Photoshop项目实践教程教学模块八.pptx

  1. 1、本文档共49页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
教学模块八 动画和Web 页设计教学目标 本模块主要介绍Photoshop CS5中有关Web页图像设计的内容。通过本模块的学习,能够熟练掌握Web页设计的方式、方法。从切片应用到优化图像、动画制作,深入了解Photoshop在网页设计中的作用,并能够利用其强大的图形图像处理功能,制作出精美的网页模板及网页动画。教学模块八 动画和Web 页设计教学目标任务目标: 利用Photoshop的图像处理功能制作精美的Web页导航栏。任务说明: 本任务主要通过使用Photoshop图像处理,制作“花语网站导航栏效果”,效果图如图8-1-1所示。图8-1-1 导航栏效果完成过程:步骤1选择“文件”→“打开”命令打开素材文档中的图像文档“导航栏背景.jpg”(附赠光盘教学模块8﹨素材﹨导航栏背景.jpg)。步骤2新建图层1,按【Ctrl+A】键全选。单击前景色标,打开拾色器,设置前景色为R:32,G:157,B:38,按【Alt+Delete】键,为该图层填充颜色。图层效果如图8-1-2所示。图8-1-3 做矩形选区效果步骤4按【Delete】键后效果如图8-1-4所示。图8-1-4 删除后的效果步骤5按【Ctrl+D】键,取消选区。步骤6选择“文件”→“打开”命令打开素材文档中的图像文档“logo.png”(附赠光盘教学模块8﹨素材﹨logo.png)。步骤7 在该文档的“图层”面板中选择图层“logo”,鼠标“右击”该图层,在弹出的菜单中选择“复制图层”,弹出“复制图层”对话框。在目标文档中选择打开状态的文档“导航栏背景.jpg”,单击【确定】按钮。如图8-1-5所示。图8-1-5 复制导航栏背景图层 步骤8在Photoshop中的文档标签栏单击“导航栏背景.jpg”,切换到该图像,可以看到“logo”图层,出现在该图像的“图层”面板中。调整“logo”图层图像的位置,如图8-1-6所示。 步骤9在该文档“图层”面板中单击“创建新组”按钮 ,创建新组,为该组命名为“导航按钮”,如图8-1-7所示图8-1-6 调整logo位置图8-1-7 创建“导航按钮”组步骤10在该组中新建图层,命名图层为“按钮背景”。如图8-1-8所示。图8-1-8 创建“按钮背景”层图8-1-11所示 变换后的位置步骤14按【Ctrl】键并单击“按钮背景”图层缩略图,得到该层图像选区,按【Ctrl+Alt+Shift+T】键四次,得到四个复制后的圆角矩形,取消选区,调整该层图像位置,如图8-1-12所示。选择“视图”→“显示”→“参考线”命令,取消参考线的显示。图8-1-12 调整位置 步骤16分别输入“花语简介”、“花语构成”、“起源发展”、“节日花语”和“恭贺花语”。图层效果如图8-1-14所示,图像效果如图8-1-15所示。图8-1-15 图像效果图8-1-14 文字图层效果图8-1-16 横排文字参数设置步骤18输入网址信息,调整位置,效果如图8-1-17所示。图8-1-17 输入网址文字后效果 步骤19选择“文件”→“存储为”命令,将所得结果存储为“导航栏.psd”文件,这样我们就完成了花语网站导航栏的设计。效果图参看“附赠光盘教学模块8﹨素材﹨导航栏.jpg”。任务目标: 利用Photoshop的图像处理功能制作网页效果。任务说明: 本任务主要通过使用Photoshop图像处理,制作“花语网站主页效果”,效果图如图8-2-1所示。图8-2-1花语网站主页效果完成过程:步骤1选择“文件”→“打开”命令,打开素材文档中的图像文档“网页背景.jpg”(附赠光盘教学模块8﹨素材﹨网页背景.jpg)。步骤2选择“文件”→“存储为”命令,文件名为“花语主页.psd”。步骤3选择“文件”→“打开”命令,打开素材文档中的图像文档“导航栏.jpg”(附赠光盘教学模块8﹨素材﹨导航栏.jpg)。步骤4在“导航栏.jpg”文档的“图层”面板中选择背景图层,鼠标“右击”该图层,在弹出的菜单中选择“复制图层”,弹出“复制图层”对话框。在目标文档中选择打开状态的文档“花语主页.psd”,单击【确定】按钮。如图8-2-2所示。图8-2-2复制花语主页图层 步骤5在Photoshop中的文档标签栏单击“花语主页.psd”,切换到该图像,可以看到“背景副本”图层出现在该图像的“图层”面板中。将该层改名为“导航栏”,调整“导航栏”图层的图像位置调整到最上方,如图8-2-3所示。图8-2-3 调整导航栏到最上方步骤6 选择“文件”→“打开”命令,打开素材文档中的图像文档“图片1.png”(附赠光盘教学模块8﹨素材﹨图片1.png)。步骤7 在“图片1.png”图像中,按【Ctrl+A】键全选,选择“编辑”→“拷贝”命令,然后返回图像“花语主页.psd”,选择“编辑”→“粘贴”命

文档评论(0)

132****9295 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档