《图形图像处理》项目实训05-《项目实训五 网页设计》实习指导.docx

《《图形图像处理》项目实训05-《项目实训五 网页设计》实习指导.docx》由会员分享，可在线阅读，更多相关《《图形图像处理》项目实训05-《项目实训五 网页设计》实习指导.docx（18页珍藏版）》请在课桌文档上搜索。

1、图形图像处理实习指导项目实训五:网页设计时尚前线网站首页制作时尚前线网站首页制作实习指导书任务名称联时尚前线网站首页制作任务要求联本任务是为时尚前线网站设计的首页作品。在制作过程中，以制作页面中的各栏目作为核心内容，页面颜色采用亮丽的红黄色系，以突出时尚感。通过本任务的学习，要求掌握运用Photoshop进行网站页面设计与制作的方法与技巧。1 .熟练掌握网页设计与制作的过程与方法；2 .学会运用PhoIOShoP搭建网页框架的方法与技巧；3 .能够准确把握网站风格，合理配色；4 .掌握路径、调整图层、形状图层在网页设计中的综合运用方法与技巧。1 .新建文件。按CtrI+N键，在弹出的“新建”对

2、话框中设置参数，如图57所示。图5-1新建文件2 .在“图层”面板中单击“创建新组”按钮，重命名为“背景”；选择“背景”组，在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为RGB(198,139,88)、RGB(233,183,138)和RGB(239,163,183),如图5-2所示，效果如图5-3所示，同时得到“渐变填充1”图层。图5-2设置“渐变”参数图5-3添加“渐变”调整层后的效果3 .选择“钢笔工具”，在其工具选项栏中单击“路径”按钮，绘制如图5-4所示的路径。图5-4绘制路径4 .在“图

3、层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为RGB(249,73,90)和RGB(255,155,94),位置为63%,81%；不透明度色标数值从左到右依次为100%,100%,0%,如图5-5所示，效果如图5-6所示，同时得到“渐变填充2”图层。图5-5设置“渐变”参数图5-6添加“渐变”调整层后的效果5 .选择“钢笔工具”，在其工具选项栏中单击“路径”按钮，绘制如图5-7所示的路径。图5-7绘制路径6 .在“图层”面板中单击“创建新组”按钮，重命名为“上背景”；选择“上背景”组，在“图层”面板中单击

4、“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为RGB(141,117,83)、RGB(238,230,221)和RGB(242,223,202),如图5-8所示，效果如图5-9所示，同时得到“渐变填充3”图层。图5-8设置“渐变”参数图5-9添加“渐变”调整层后的效果7.选择“矩形工具”，在其工具选项栏中单击“路径”按钮，绘制如图5-10所示的路径。图5-10绘制路径8 .在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为RGB

5、(209,68,105)和RGB(239,163,183),如图5-11所示，同时得到“渐变填充4”图层，并将其置于“渐变填充3”图层下方，效果如图5-12所示。图5T1设置“渐变”参数图5T2添加“渐变”调整层后的效果9 .选择“渐变填充4”图层，设置前景色为RGB(255,232,0)。选择“钢笔工具”，在其工具选项栏中单击“形状图层”按钮，绘制如图5T3所示的形状，得到“形状1”图层，此时的图层面板如图5T4所示。图5-13绘制“形状1”图5-14当前图层面板状态10 .按Ctrl+J键，复制“形状1”图层，得到“形状1副本”图层。按Ctrl+T键调出自由变换控制框，调整“形状1副本”图

6、层中的形状大小、角度及位置，如图5T5所/Jo图5T5”形状1副本”图层中的形状11 .按照步骤9步骤10的制作方法，结合形状绘制工具、图层复制及图像变换等,制作其他形状，直至效果如图5T6所示，此时的图层面板如图5-17所示。图5-16左上角装饰形状图5-17当前图层面板状态12 .选择“钢笔工具”，在其工具选项栏中单击“路径”按钮，绘制如图5-18所示的路径。图5-18绘制路径13 .在“图层”面板中单击“创建新组”按钮，重命名为“主菜单”；选择“主菜单”组，在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左

7、到右依次为RGB(255,49,103)和RGB(113,0,30),如图5T9所示，效果如图5-20所示，同时得到“渐变填充5”图层。图5-19设置“渐变”参数图5-20添加渐变”调整层后的效果14 .选择“钢笔工具”，在其工具选项栏中单击“路径”按钮，绘制如图5-21所示的路径。图5-21绘制路径15 .在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“纯色”命令，设置颜色为RGB(208,126,148)，如图5-22所示。图5-22添加“纯色”调整层后的效果16 .按照步骤14步躲15的制作方法，结合形状绘制工具、图层复制等，制作其他形状，直至效果如图5-23所示

8、，此时的图层面板如图5-24所示。图5-23主菜单形状正常V不透明度：100%司一用.口 . 口 U 8图5-24当前图层面板状态17 .选择“横排文字工具”，在其工具选项栏中设置适当的字体、字号及颜色，在菜单栏形状上输入网站Logo及导航等文字，效果如图5-25所示。图5-25添加文字后的效果18 .选择图层组“主菜单”，打开素材文件“素材LPSd”，使用“移动工具”将其拖动到制作文件中间位置，得到“中心图像”层。按CtrI+T键，调出自由变换控制框，调整其大小及位置，如图5-26所示。图5-26“中心图像”效果技术解析此处“素材Lpsd”文件中的素材是以智能对象的形式给出的。如果需要查看其

9、具体参数设置，可以双击智能对象缩览图，在弹出的对话框中单击“确定”按钮即可。19 .制作网站名称及按钮效果。在“图层”面板中单击“创建新组”按钮，重命名为“时尚前线”；在“时尚前线”图层组中，选择“横排文字工具”，设置字体为“HYc3gf、字号为68.27点，分别输入文字“时”、“尚”、“前”、“线”,并分别选中每个文字，设置颜色分别为RGB(217,9,53)、RGB(255,162,0)、RGB(12,158,219)和RGB(43,203,6)2吞.O .J -图5-28当前图层面板状态20 .使用形状工具，在文字“尚”右上角的位置制作两片叶子，得到“颜色填充1”和“颜色填充1副本”，其

10、填充色依次为RGB(12,158,219)和RGB(217,9,53),如图5-29所示。公司概况I 产品介绍I公司茴介I 发展目标 I公司业H寺酶图5-29文字“尚”右上角的叶子21 .结合形状绘制类工具，在网站名称下方绘制正圆形状，得到“形状10”。选择“椭圆工具”，在其工具选项栏中单击“路径”按钮，在白色正圆外侧绘制路径，如图5-30所示。HOME I LOGIN IMAP公司概况I 产品介绍公司简介发展目标I公司1举能H寺高前图5-30绘制正圆图形及路径22 .新建图层，得到“图层1”。设置前景色为RGB(149,143,136),选择“画笔工具”，在其工具选项栏中设置画笔大小为Ipx

11、,按E5键调出“画笔”面板，设置“间距”为400%,如图5-31所示；切换到“路径”面板，选择“路径1”，单击“画笔描边路径”按钮，隐藏路径后的效果如图5-32所示。6/国 31图5-31 “画笔”面板公司概况I产品介、公司简介I发展目标H寺南前图5-32描边路径效果23 .按Ctrl键，分别单击“图层1”和“形状10”，按CtrI+Alt+E键盖印图层,将选中图层中图像合并到新图层中，并将其重命名为“图层2”，调整其中图像的位置；按Ctr1+J键，复制“图层2”两次,调整图像位置，如图5-33所示。图5-33复制圆形图像24 .打开素材文件”素材2.psd”，使用“移动工具”将其拖动到制作文

12、件中，得到“文字信息”层，如图5-34所示，当前图层面板如图5-35所示。公司概况I 产品介绍公司简介I 发展目标承侬H寺舟前图5-34 “文字信息”效果I 网公司业绩图5-35当前图层面板*不读明度：g% 颜色IS充1副本颜色塘充I阖B 口口疑m口时llnrara*ra25 .打开素材文件“素材3.psd”，使用“移动工具”将其“左菜单”层拖动到制作文件中，效果如图5-36所示。图5-36“左菜单”效果综合查询”精品推荐联系方式拿捏皆词层拖动到制26 .继续使用“移动工具”将素材文件“素材3.psd”中的“中心目录”作文件中，效果如图5-37所示。图5-37“中心目录”效果27 .继续使用“移动工具”将素材文件“素材3.psd”中的“隐藏的菜单制作文件中，效果如图5-38所示。28 .继续使用“移动工具”将素材文件“素材3.psd”中的“底部”层拖动到制作文件中，效果如图5-39所示。技术解析此处“素材2.psd”和“素材3.psd”文件中的素材是以智能对象的形式给出的。如果需要查看其具体参数设置，可以双击智能对象缩览图，在弹出的对话框中单击“确定”按钮即可。29.时尚前线网站首页制作完成，效果如图5-40所示。30.最终图层面板，如图5-41所示。图5-41最终图层面板