用ps制作网页讲课教案
- 格式:doc
- 大小:1.47 MB
- 文档页数:49
中职讲课ps教案怎么写教案标题:中职讲课PS教案怎么写教案背景:中职教育是培养学生实际工作能力的阶段,其中一项重要技能是掌握常用的图像处理软件,如Photoshop(简称PS)。
编写一份中职讲课PS教案旨在通过讲解和实践,帮助学生掌握PS软件的基本操作和常见应用。
教学目标:1. 了解PS软件的基本功能和操作界面;2. 掌握PS中常用的工具和功能,如选择工具、涂抹工具、调整图像色彩等;3. 能够使用PS对图片进行常见的修饰和编辑,如调整亮度、对比度、裁剪、添加滤镜等;4. 培养学生的创造力和审美观,通过PS编辑出具有创意和艺术性的作品。
教学内容和步骤:1. 导入环节:通过讲述PS的应用领域和重要性,调动学生的兴趣和学习积极性。
2. 介绍PS软件:简要介绍PS的背景和功能,并展示PS软件的操作界面。
3. 常用工具和功能讲解:a. 选择工具:通过示范和讲解,教学生如何使用不同的选择工具进行选区、删除、复制等操作。
b. 涂抹工具:说明不同涂抹工具的作用和效果,引导学生实践操作并比较不同工具的差异。
c. 调整图像色彩:教授学生如何使用色彩调整工具进行亮度、对比度、饱和度等调整。
4. 实践操作:a. 图片修饰:引导学生选择一张图片进行修饰,通过修改亮度、对比度、添加滤镜等效果,使其更具艺术感。
b. 创意合成:鼓励学生运用所学到的选择工具和涂抹工具,将不同图片进行合成,实现创意效果。
5. 总结与展示:a. 回顾本次课程的重点内容和学习要点,并激发学生对PS进一步学习的兴趣。
b. 提供展示平台,让学生展示自己制作的作品,并鼓励互相欣赏和讨论。
教学资源和评估:1. 教学资源:计算机设备、PS软件、相关教学视频或PPT。
2. 学生评估:观察学生在实践操作环节的表现,检查他们对所学内容的理解和运用能力。
可以通过课堂展示作品进行综合评估。
教学扩展:1. 探究更高级的PS功能和技巧,如图层合成、修复照片等,以提升学生的PS操作水平。
Photoshop美工基础与网店装修教学教案第一章:Photoshop基础知识1.1 教学目标让学生了解Photoshop的基本功能和界面布局。
学会使用Photoshop的基本工具,如选择工具、裁剪工具、画笔工具等。
掌握基本的图像编辑技巧,如调整图像大小、分辨率、颜色模式等。
1.2 教学内容Photoshop的基本功能和界面布局介绍。
选择工具、裁剪工具、画笔工具等基本工具的使用方法。
图像编辑技巧,如调整图像大小、分辨率、颜色模式等。
1.3 教学步骤1. 导入:向学生介绍Photoshop的基本功能和界面布局。
2. 演示:教师演示如何使用选择工具、裁剪工具、画笔工具等基本工具。
3. 练习:学生跟随教师的指导,自行尝试使用基本工具进行图像编辑。
1.4 作业布置让学生利用Photoshop制作一张简单的个人名片,运用基本工具和图像编辑技巧。
第二章:图像调整与修饰2.1 教学目标让学生学会使用Photoshop调整图像的亮度、对比度、饱和度等基本调整功能。
掌握图像修饰技巧,如去除污点、修复图像、涂抹等。
2.2 教学内容图像调整功能,如亮度、对比度、饱和度等的调整方法。
图像修饰工具,如去除污点、修复图像、涂抹等的使用方法。
2.3 教学步骤1. 导入:向学生介绍图像调整功能和图像修饰工具。
2. 演示:教师演示如何调整图像的亮度、对比度、饱和度等以及使用去除污点、修复图像、涂抹等工具。
3. 练习:学生跟随教师的指导,自行尝试调整图像和进行修饰。
2.4 作业布置让学生利用Photoshop调整一张照片的亮度、对比度、饱和度等,并进行必要的修饰。
第三章:图层与蒙版3.1 教学目标让学生了解图层的概念和基本操作,如创建图层、删除图层、图层属性等。
学会使用蒙版功能,如图层蒙版、调整图层蒙版等。
3.2 教学内容图层的概念和基本操作,如创建图层、删除图层、图层属性等。
蒙版功能的使用方法,如图层蒙版、调整图层蒙版等。
3.3 教学步骤1. 导入:向学生介绍图层的概念和基本操作。
《PS》电子授课教案一、教案基本信息1. 课程名称:Photoshop图像处理2. 课程性质:专业选修课3. 授课对象:数字媒体专业大一学生4. 授课方式:电子授课5. 课时安排:每章2学时,共10学时二、教学目标1. 让学生了解Photoshop的基本功能和操作界面2. 培养学生熟练使用Photoshop进行图像处理的基本技能3. 提高学生运用Photoshop创作个性化作品的能力三、教学内容1. Photoshop的基本功能介绍2. 工作界面的熟悉和操作3. 图像处理的基本技巧4. 色彩调整与图像优化5. 选区、mask和通道的应用四、教学方法1. 采用PPT演示,详细讲解Photoshop的基本功能和操作方法2. 结合实例操作,让学生跟随老师一起实践,加深对知识点的理解3. 分组讨论,让学生合作完成特定任务,提高团队协作能力4. 课后作业,巩固所学知识,培养独立创作能力五、教学评价1. 课后问卷调查,了解学生对课程的满意度及建议2. 作业评分,评估学生在课程中的学习效果3. 课堂参与度,观察学生在课堂上的积极程度4. 作品展示,评价学生的创作能力和创新精神六、教学资源1. PPT课件2. Photoshop软件3. 图像处理实例素材4. 网络资源:Photoshop教程、案例分析等七、教学步骤1. 导入新课,介绍Photoshop的基本功能和应用领域2. 讲解Photoshop的工作界面,演示基本操作3. 演示图像处理的基本技巧,如裁剪、缩放、调整亮度等4. 讲解色彩调整与图像优化方法,如色阶、曲线、饱和度等5. 实例演示选区、mask和通道的应用,如人物美容、图像合成等八、课堂互动1. 提问环节:学生提问,老师解答2. 操作实践:学生跟随老师一起操作,巩固知识点3. 小组讨论:学生分组完成特定任务,分享成果和心得4. 作品展示:学生展示课后作业,评价和建议九、课后作业1. 练习图像处理基本技巧,如裁剪、缩放、调整亮度等2. 完成一个色彩调整与图像优化的案例,如调整照片色彩、优化图像效果等3. 尝试运用选区、mask和通道制作一个个性化图像作品十、课程总结与展望1. 总结本节课所学内容,强调重点知识点2. 强调课后作业的完成,鼓励学生独立创作3. 展望下一节课的内容,引发学生兴趣和期待4. 提醒学生关注Photoshop软件的更新和行业动态,提高自身的竞争力重点和难点解析一、教案基本信息补充说明:确保教案基本信息准确无误,以便于学生和教师了解课程的整体安排和目标。
ps课程设计网页设计一、教学目标本课程旨在通过学习网页设计的基本原理和Photoshop软件的使用技巧,让学生掌握网页设计的基本流程,能够独立完成简单的网页设计项目。
知识目标:使学生了解网页设计的基本原理和概念,熟悉Photoshop软件的基本界面和功能。
技能目标:培养学生使用Photoshop进行网页设计的实际操作能力,能够运用所学知识独立完成网页设计项目。
情感态度价值观目标:培养学生对网页设计的兴趣,提高学生对美的感知和创造能力,使学生在完成项目的过程中,增强自信心,培养团队协作精神。
二、教学内容本课程的教学内容主要包括网页设计的基本原理、Photoshop软件的基本操作和网页设计实例讲解。
1.网页设计的基本原理:包括网页设计的基本原则、色彩搭配、布局等。
2.Photoshop软件的基本操作:包括图像的基本编辑、图层的使用、选择工具、路径工具等。
3.网页设计实例讲解:通过实际案例,讲解如何使用Photoshop进行网页设计,包括网页的整体设计、图片处理、文字排版等。
三、教学方法本课程将采用讲授法、实践法和讨论法进行教学。
1.讲授法:用于讲解网页设计的基本原理和Photoshop软件的基本操作。
2.实践法:通过实际操作,使学生掌握Photoshop软件的使用技巧,并能够独立完成网页设计项目。
3.讨论法:通过分组讨论,培养学生的团队协作精神,提高学生解决问题的能力。
四、教学资源教学资源包括教材、多媒体资料和实验设备。
1.教材:主要包括《网页设计基础》、《Photoshop教程》等。
2.多媒体资料:包括教学PPT、网页设计案例视频等。
3.实验设备:包括计算机、投影仪等。
五、教学评估本课程的评估方式包括平时表现、作业和考试三个部分,每个部分所占的比重分别为30%、30%和40%。
1.平时表现:主要评估学生在课堂上的参与程度、提问回答等情况,通过观察学生的表现来评价他们的学习态度和理解程度。
2.作业:主要评估学生的实际操作能力,通过布置课后练习,让学生运用所学知识独立完成网页设计项目,以此评价他们的掌握程度。
《网页设计与制作立体化教程(Photoshop+Dreamweaver+Flash CS6)》教学教案第1章赏析特色网站个人网站规划的操作思路小结1、掌握网站类型、网站结构、网页组成元素和色彩搭配等基础知识。
2、掌握站点创建、编辑与管理的操作。
第2章直通车图片效果帮助中心效果小结1、掌握旋转、裁剪图片的操作。
2、掌握修复图片常用工具的使用。
3、掌握设置图层样式的方法。
思考及作想一想:1.制作直通车图片本练习要求制作一个淘宝直通车图片,要求通过文本来说明网站的保修服务内容。
制作时可打开本书提供的素材文件进行操作。
要求操作如下。
(1)填充背景,添加素材。
第3章婚纱售卖网站首页个人网页效果小结1、掌握网页效果图的设计思路。
2、熟练掌握绘图工具的使用。
3、掌握切片的使用方法思考及作想一想:1.设计婚纱售卖网站首页本练习要求为婚纱售卖网站的首页设计一个界面效果图,要求页面中能够显示部分产品、有购买功能。
要求操作如下。
(1)新建图像文件,创建参考线布局页面。
(2)添加素材文件,对素材文件进行编辑。
(3)为图像添加相关的文本装饰,并设置其格式。
本练习要求完成“七月”个人网页效果图的设计,然后对其进行切片,完成后将第4章保修服务网页效果代金券说明网页效果小结1、掌握网页文档的创建、设置与保存。
2、掌握文本网页的制作方法。
想一想:1.制作“保修服务”网页本练习要求制作一个“保修服务”页面,要求通过文本来说明网站的保修服务内容。
第5章“服装”网页效果“产品介绍”网页效果1、掌握插入与编辑图片和多媒体对象的方法2、掌握超链接的创建和应用想一想:1. 制作“服装”网页本练习要求打开服装网页“index.html”,先在其中插入背景音乐,然后插入图像,第6章“花卉推荐”网页效果摄影首页效果、掌握框架和表格的使用、掌握使用CSS+DIV布局网页的方法、掌握网页布局的设计思路想一想:1.制作“花卉推荐”网页本练习要求使用表格来制作“花卉推荐”页面,在制作时先在空白网页中插入表格,并根据需求在表格中添加相关内容,再对添加内容的表格进行编辑,最后设置表格的属性。
第2 章 Photoshop 网页版面制作教学目标1.把握使用photoshop制作网页中图形元素的技巧2.把握使用photoshop进展整体版面的制作3.把握photoshop切片工具的使用方法4.把握photoshop 与dreamweaver 结合的方法教学要求学问要点Photoshop 画线Photoshop 图案填充画笔的设置自定义图案的力气力气要求关联学问Photoshop 按钮的制作Photoshop Logo 标志的制作Photoshop 图像的合成Photoshop 网页版面制作Photoshop 切片与输出路径与外形图层的绘制;图层样式的用法文字图层的用法;图层的用法图层蒙版及图层混和模式的用法颜色、文字、版面的设计切片的用法;输出导入Dreamweaver 的方法2.1网页图形元素的制作2.1.1各式线条的绘制在网页中常使用线来分隔版面,或分隔导航条,是最常用的图形元素。
在photoshp 中画线是使用画笔或铅笔工具来实现的。
1.画线选择photoshop 工具箱中的画笔工具,并设置画笔的半径为1 个像素,设置画笔硬度为0%,按住shift 键拖动鼠标可绘制一条直线。
如要连续绘制多条直线,确定要在绘制后始终线前先选择其它工具,然后再选择画笔工具连续绘制,否则连续绘制会消灭连笔现象如图2-1 所示。
连笔图2-1 连笔现象2.画虚线画虚线和画直线一样也是使用画笔工具,不过要对画笔间距进展设置。
按下快捷键F5 弹出画笔设置面板,对画笔的直径、硬度和间距进展设置,如图2-2 所示,图2-2 绘制虚线的画笔设置3.画凹凸线凹凸线在网页版面中最常见,对网页有着格外重要的点缀作用,如图2-3 所示。
绘制的方法如下:首先绘制一条比背风光暗的直线,然后再绘制一条比背风光亮的直线,线条颜色可选用与背风光同一色系的颜色,然后两直线并列排,这样凹凸效果就出来了。
图2-3 凹凸线2.1.2图案填充在网页的背景和Banner 中常常会见到填充的各式图案,如点、方格子,横线、斜线、穿插线等等。
photoshop课程设计一、课程目标知识目标:1. 让学生掌握Photoshop的基本操作界面和工具栏功能,包括图像的选择、编辑、图层、路径等基础知识;2. 培养学生运用Photoshop进行图像处理和设计的技能,如调整色彩、亮度、对比度,以及运用滤镜和特效;3. 使学生了解并掌握Photoshop在广告设计、网页设计等领域的应用。
技能目标:1. 培养学生运用Photoshop进行创意设计的实践能力,能够独立完成一幅完整的图像作品;2. 培养学生解决实际问题的能力,如修复照片、合成图像等;3. 提高学生的审美观和视觉传达能力,使其能够运用Photoshop表达自己的创意和想法。
情感态度价值观目标:1. 激发学生对Photoshop的兴趣和热情,培养其主动学习和探索的精神;2. 培养学生的团队协作和沟通能力,使其在创作过程中能够互相借鉴、交流、提高;3. 增强学生的版权意识,尊重他人作品,养成良好的网络道德素养。
课程性质:本课程为实用技能类课程,注重理论与实践相结合,强调学生的动手操作能力。
学生特点:学生具备一定的计算机操作基础,对图像处理和设计感兴趣,希望掌握Photoshop技能。
教学要求:教师应注重启发式教学,引导学生主动参与,充分调动学生的学习积极性;同时,关注学生的个体差异,给予个性化指导。
通过案例分析、实践操作、作品展示等形式,使学生真正掌握Photoshop技能。
在教学过程中,不断评估学生的学习成果,及时调整教学策略,确保课程目标的实现。
二、教学内容1. Photoshop基础知识:- 认识Photoshop操作界面;- 学习工具箱、选项栏、面板等基本功能;- 掌握图像的打开、保存、关闭等基本操作。
2. 图像编辑与调整:- 学习选区的创建与编辑;- 图像的裁剪、旋转、翻转等基本操作;- 色彩调整、亮度/对比度调整、色阶、曲线等高级调整功能。
3. 图层与路径:- 图层的概念、创建、编辑与管理;- 路径的创建与编辑;- 图层样式与路径的运用。
ps网页设计课程设计一、课程目标知识目标:1. 让学生掌握PS网页设计的基本概念,理解网页设计的基本原则和流程。
2. 学会使用PS软件进行网页布局、颜色搭配、字体选择等设计技巧。
3. 了解网页设计的常见类型及其特点,能够分析并评价优秀网页设计案例。
技能目标:1. 培养学生运用PS软件进行网页设计的能力,掌握基本的切片、导出和优化技巧。
2. 提高学生审美能力,使其能够独立设计出符合用户体验的网页作品。
3. 培养学生团队协作和沟通能力,能够与他人共同完成网页设计项目。
情感态度价值观目标:1. 激发学生对网页设计的兴趣,培养其主动学习和探究的精神。
2. 培养学生关注用户体验,树立以用户为中心的设计理念。
3. 引导学生树立正确的审美观念,关注网页设计的社会价值和文化内涵。
课程性质:本课程为实践性较强的学科,旨在培养学生的设计思维和实际操作能力。
学生特点:初中年级学生对新鲜事物充满好奇,具备一定的计算机操作基础,喜欢动手实践。
教学要求:结合学生特点,注重理论与实践相结合,强调设计思维和实际操作能力的培养,使学生在课程学习中能够充分展示个性和创造力。
通过课程学习,使学生达到预定的学习成果,为后续相关课程打下坚实基础。
二、教学内容1. 网页设计基本概念:介绍网页设计的相关术语,如网页、网站、UI/UX设计等,让学生理解网页设计的基本构成和原则。
教材章节:第一章 网页设计概述2. PS软件操作基础:教授PS软件的基本操作,如工具栏使用、图层操作、选区创建等,为后续网页设计打下基础。
教材章节:第二章 PS软件基本操作3. 网页布局与排版:学习网页布局的基本原则,如网格系统、F型布局等,以及排版技巧,如字体选择、颜色搭配等。
教材章节:第三章 网页布局与排版4. 网页设计元素制作:教授如何使用PS制作网页中的按钮、导航栏、图片轮播等元素,并掌握切片和导出技巧。
教材章节:第四章 网页设计元素制作5. 优秀网页设计案例分析:分析并评价国内外优秀网页设计案例,让学生了解设计趋势,提高审美能力。
在本教程中,你将学会如何在photoshop中制作一个漂亮的绿色的干净的网页效果图。
你将学会一些很时髦的设计技巧,像是如何制作3D丝带,或者是如何设置看上去很专业的渐变色。
出自: 翻译:苏打苏塔设计量贩铺最终效果图看一看我们最终的效果图吧,看上去还不错:>在photoshop中新建文档1在photoshop中新建一个文档,尺寸为980px ×830px.2 如果你在photoshop软件界面中,没有看到在画布的周围看到标尺,点击试图>标尺(Ctrl + R)可以显示标尺。
3 在画布的四个边,分别拖拽四条标尺线。
在这四条线中间,我们将绘制我们的页面创建页面背景4 选择圆角矩形工具(U), 设置圆角半径为10px,设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。
设置这个图层名字为“bg“.5 好了,现在,我们将扩大我们的画布。
首先,缩小我们的画布视图(ctrl+-),然后点击图像>画布尺寸(Alt + Ctrl + C),然后根据下面的截图设置参数。
6 再一次选择图像>画布尺寸(Alt + Ctrl + C),然后根据下面的截图设置参数。
7 在图层面板中点击背景图层,设置前景色为#6C821C,用油漆桶(G)填充背景8 在背景图层上面创建一个新图层,命名为”gradient“.9 在工具栏中选择渐变工具(G),从画布头部开始向下拖拽出一个从白色到黑色的渐变。
10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.11 保持该图层仍为选定状态,点击图层>图层蒙版>显示全部。
12 在工具栏中选择渐变工具(G) ,从你的画布底部向上拖拽一个从黑色到透明的渐变。
可以根据下面的截图进行拖。
13 右键单击图层“gradient”,在弹出的菜单中,设定转换为智能元件。
14 点击滤镜>杂点>添加杂点。
根据下图设置参数。
15 新建一个图层,用画笔工具(B),选择白色的软笔刷,直径为300px,在你的画布顶端,画一条白线。
16 设置这个图层的透明度为50% ,并命名该图层为“highlight“.17 在bg图层上面,新建图层。
点击键盘上的D,设置成默认的前景背景色(前景白色,背景黑色),然后点击滤镜>渲染>云彩。
18 在图层面板上,右键单击该图层,在弹出的菜单中,设置该图层为智能元件。
命名该图层为“texture“.19 保持图层”texture”仍未选定状态。
点击滤镜>模糊>动感模糊,根据截图进行参数设定20 然后点击滤镜>锐化>锐化。
21 给图层”texture”添加蒙版,点击图层>图层蒙版>显示全部。
22 选择渐变工具(G) ,从画布底部到顶端,拖拽一个黑色到透明的渐变。
23设置图层渲染模式为叠加,设置图层透明度为40%。
设置主要内容的背景24 双击“bg”图层,打开图层属性面板。
根据下图进行外发光的参数设定。
25 新建图层,设置前景色为#2A2009, 选择画笔工具(B) ,用一个比较硬的直径为25px的画笔,在你的圆角矩形的下边缘,画一个圆。
26 在图层面板中右键单击该图层,设置图层为智能对象。
27 然后点击编辑>自由变化(Ctrl + T) ,根据下图进行变形。
28 点击滤镜>模糊>高斯模糊,按照下图进行参数设定。
29 设置该图层的渲染模式为整片叠底,透明度为30%。
最后,给该图层命名为”shadow“, 把这个图层放在bg图层的上面。
创建导航条30 好了,接下来,我们来做导航条。
选择矩形工具(U) ,设置颜色为#D8D8A5.31 在你之前创建的那个大的圆角矩形中,创建一个高为60px的矩形,命名该图层为“navigation bar“.Note: 打开信息面板(F8), 这样你就会看到你所创建的矩形的高度。
32 双击图层“navigation bar”打开图层属性面板,按照下图设置参数33 你可能注意到,我们刚刚创建的矩形并没有圆角。
为了纠正这个小的细节,我们应用剪辑蒙板(clipping mask)这个概念。
右键点击图层“navigation bar”layer, 选择创建剪切蒙版。
34 好了,我们接下来要做的是,创建当前页的按钮。
选择矩形工具(U), 设置颜色为#A6A43F, 创建一个高为60px的矩形。
35 设置透明度为15%,命名该图层为”current page button “.36 然后向下设置剪辑蒙板。
37 选择刚刚的四个图层,点中ctrl然后分别在图层面板中点击这四个图层,然后点击Ctrl + G群组。
设置这个群组名为“bg & navigation bar“.38 选择文字工具(T),给导航添加一些文字,用颜色#A6A43F. 在这次的设计中,我用的字体是Avenir LT 65 Medium 。
如果你没有这个字体,可以用你喜欢的字体代替。
给“特色项目”部分,自定义一个图案39 好了,我们要创建一个图案。
新建一个文档,文件>新建(Ctrl + N), 尺寸是5px * 5px, 透明背景。
40 设置前景色为#2A2009, 在工具栏中选择铅笔工具(B) ,在你的画布中间,画一个1px大小的方框。
41 点击编辑>定义图案。
命名这个图案,然后点击ok。
好了,你可以关闭这个文件了。
创建“特色项目”区域42 选择矩形工具(U) ,创建一个高为330px的任何颜色的矩形。
43 在图层面板上,双击该图层,打开图层属性面板。
按照下图进行参数设定。
44 命名这个图层为“pattern“.45 选择圆角矩形工具(U), 设置圆角半径8px, 颜色#A6A43F, 创建一个宽940px 高240px的圆角矩形。
46 设置图层透明度为50%,命名该图层为“featured project bg“.47 选择矩形工具(U), 设置颜色#A6A43F, 创建一个尺寸为610px * 220px 的矩形。
这个将会是“特色项目”的图片的位置。
,命名该图层为“image bg.”48 导入任何你喜欢的图片。
(我用的是网站Envato website 的截图).49 把图片放在你刚刚创建的矩形的上面,在图层面板上单击创建图层剪切蒙版。
命名这个图层为“image“.50 选择文字工具(T) ,在右边添加一些文字。
按照下图进行书写。
群组这些文字,命名该群组为“text“.创建按钮call-to-action51 好了,我们要在“特色项目”的底部创建两个按钮。
选择圆角矩形工具(U), 设置半径为8px,颜色为#A6A42F, 创建一个小矩形。
命名该图层为“button 1“.52我们希望按钮的上面不是圆角。
按照下面的操作进行:确定图层”button 1″的蒙版是选中的。
选择直接选择工具(A),在你看到的路径上单击。
好了,这时候你将看到在每个圆角上都有两个锚点。
选择转换点工具(默认图标是个小钢笔头,在这一组工具中可以找到) ,单击这四个锚点。
再次选择直接选择工具(A),按住shift键创建直角边。
53 设置该图层透明度为30%.54 然后用文字工具l (T)添加一些文字。
设置颜色为#EAEAB7.55 你也可以添加一些小图标。
如果你喜欢,可以去这里翻翻看。
《30套漂亮的免费图标集》56 群组所有的文字和图标图层,命名太群组为”button 1“.57 创建另一个按钮。
58 为了方便管理,群组所有关于”特色相聚”的图层和群组层,命名这个大的群组为”featured project创建3D丝带59 选择矩形(U) 创建一个高为130px的颜色为#A6A43F的矩形,如下图。
命名该图层为“ribbon background“.60 选择圆角矩形(U), 设置半径为10px ,在你刚刚创建的矩形的左边的位置,拖拽一个矩形。
在这一步,你可以拖拽一些标尺线作为辅助。
61 点击你之前创建的圆角矩形的矢量蒙版,让它被选中。
然后选择圆角矩形(U), 在属性栏中点击从形状减去区的按钮,创建一个圆角矩形。
按照下面的截图进行操作。
62 创建一个新的图层,右键点击设置为创建剪贴蒙版。
63 选择渐变工具(G),按照下面的截图拖拽一个白色到透明的渐变。
64 设置该图层渲染模式为叠加,透明度为30%,命名为“highlight“.65 选择矩形工具(U), 设置颜色为#878533 ,在图层”ribbon background”上创建一个矩形。
66 选择矩形工具(U), 在属性栏中点击从形状减去区按钮,然后创建一个矩形。
如图。
剪切掉我们不要的那部分。
67 双击图层,打开图层属性面板。
按照下面的截图进行参数设置。
68 重复以上步骤,不过这一次是在丝带的右边。
69 群组所有关于丝带的图层,命名该群组为”ribbon“.70 在图层”ribbon background”上创建一个新图层。
然后按照之前的操作,创建一个阴影。
71 选择圆角矩形工具(U), 设置半径为8px,颜色为#E1E0C1 ,创建四个圆角矩形,大小为220px * 110px.72 设置透明度为50%,然后群组他们。
命名该群组为”images“.73 在工具栏中选择文字工具(T) ,在你的布局下面添加一些文字。
也可以添加一些图标。
74 应用文字工具(T) ,颜色为#E0E0AC 。
在文档的顶端,写上整个站点的名字。
75 双击该图层,打开图层属性面板。
按照下图进行参数设定。
76 然后写标语。
77 为了让效果图更完整,你可以选择四个图片,导入到你的文档中。
放在你的丝带上。
好了,完成了!如果你按照该教程进行学习,你应该能得到下面的效果。
单击这里查看完整效果。
full-scale version。