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

项目实训五：网页设计《图形图像处理》实习指导时尚前线网站首页制作《时尚前线网站首页制作》实习指导书时尚前线网站首页制作本任务是为时尚前线网站设计的首页作品。在制作过程中，以制作页面中的各栏目作为核心内容，页面颜色采用亮丽的红黄色系，以突出时尚感。通过本任务的学习，要求掌握运用Photoshop进行网站页面设计与制作的方法与技巧。1.熟练掌握网页设计与制作的过程与方法；2.学会运用Photoshop搭建网页框架的方法与技巧；3.能够准确把握网站风格，合理配色；4.掌握路径、调整图层、形状图层在网页设计中的综合运用方法与技巧。1.新建文件。按Ctrl+N键，在弹出的“新建”对话框中设置参数，如图5-1所示。图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.在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为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.在“图层”面板中单击“创建新组”按钮，重命名为“上背景”；选择“上背景”组，在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为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（209，68，105）和RGB（239，163，183），如图5-11所示，同时得到“渐变填充4”图层，并将其置于“渐变填充3”图层下方，效果如图5-12所示。图5-11设置“渐变”参数图5-12添加“渐变”调整层后的效果9.选择“渐变填充4”图层，设置前景色为RGB（255，232，0）。选择“钢笔工具”，在其工具选项栏中单击“形状图层”按钮，绘制如图5-13所示的形状，得到“形状1”图层，此时的图层面板如图5-14所示。图5-13绘制“形状1”图5-14当前图层面板状态10.按Ctrl+J键，复制“形状1”图层，得到“形状1副本”图层。按Ctrl+T键调出自由变换控制框，调整“形状1副本”图层中的形状大小、角度及位置，如图5-15所示。图5-15“形状1副本”图层中的形状11.按照步骤9～步骤10的制作方法，结合形状绘制工具、图层复制及图像变换等，制作其他形状，直至效果如图5-16所示，此时的图层面板如图5-17所示。图5-16左上角装饰形状图5-17当前图层面板状态12.选择“钢笔工具”，在其工具选项栏中单击“路径”按钮，绘制如图5-18所示的路径。图5-18绘制路径13.在“图层”面板中单击“创建新组”按钮，重命名为“主菜单”；选择“主菜单”组，在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为RGB（255，49，103）和RGB（113，0，30），如图5-19所示，效果如图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所示，此时的图层面板如图5-24所示。图5-23主菜单形状图5-24当前图层面板状态17.选择“横排文字工具”，在其工具选项栏中设置适当的字体、字号及颜色，在菜单栏形状上输入网站Logo及导航等文字，效果如图5-25所示。图5-25添加文字后的效果18.选择图层组“主菜单”，打开素材文件“素材1.psd”，使用“移动工具”将其拖动到制作文件中间位置，得到“中心图像”层。按Ctrl+T键，调出自由变换控制框，调整其大小及位置，如图5-26所示。图5-26“中心图像”效果此处“素材1.psd此处“素材1.psd”文件中的素材是以智能对象的形式给出的。如果需要查看其具体参数设置，可以双击智能对象缩览图，在弹出的对话框中单击“确定”按钮即可。技术解析19.制作网站名称及按钮效果。在“图层”面板中单击“创建新组”按钮，重命名为“时尚前线”；在“时尚前线”图层组中，选择“横排文字工具”，设置字体为“HYe3gf”、字号为68.27点，分别输入文字“时”、“尚”、“前”、“线”，并分别选中每个文字，设置颜色分别为RGB（217，9，53）、RGB（255，162，0）、RGB（12，158，219）和RGB（43，203，6）。选择文字图层“尚”，在其图层名称上单击鼠标右键，在弹出的菜单中选择“转换为形状”命令，将图层“尚”转换为形状图层。选择“直接选择工具”，选择文字“尚”右上角的点，按Delete键将其删除，如图5-27所示，此时的图层面板如图5-28所示。图5-27输入网站名称图5-28当前图层面板状态20.使用形状工具，在文字“尚”右上角的位置制作两片叶子，得到“颜色填充1”和“颜色填充1副本”，其填充色依次为RGB（12，158，219）和RGB（217，9，53），如图5-29所示。图5-29文字“尚”右上角的叶子21.结合形状绘制类工具，在网站名称下方绘制正圆形状，得到“形状10”。选择“椭圆工具”，在其工具选项栏中单击“路径”按钮，在白色正圆外侧绘制路径，如图5-30所示。图5-30绘制正圆图形及路径22.新建图层，得到“图层1”。设置前景色为RGB（149，143，136），选择“画笔工具”，在其工具选项栏中设置画笔大小为1px，按F5键调出“画笔”面板，设置“间距”为400%，如图5-31所示；切换到“路径”面板，选择“路径1”，单击“画笔描边路径”按钮，隐藏路径后的效果如图5-32所示。图5-31“画笔”面板图5-32描边路径效果23.按Ctrl键，分别单击“图层1”和“形状10”，按Ctrl+Alt+E键盖印图层，将选中图层中图像合并到新图层中，并将其重命名为“图层2”，调整其中图像的位置；按Ctrl+J键，复制“图层2”两次，调整图像位置，如图5-33所示。图5-33复制圆形图像24.打开素材文件“素材2.psd”，使用“移动工具”将其拖动到制作文件中，得到“文字信息”层，如图5-34所示，当前图层面板如图5-35所示。图5-34“文字信息”效果图5-35当前图层面板25.打开素材文件“素材3.psd”，使用“移动工具”将其“左菜单”层拖动到制作文件中，效果如图5-36所示。图5-36“左菜单”效果26.继续使用“移动工具”将素材文件“素材3.psd”中的“中心目录”层拖动到制作文件中，效果如图5-37所示。图5-37“中心目录”效果27.继续使用“移动工具”将素材文件“素材3.psd”中的“隐藏的菜单”层拖动到制作文件中，效果如图5-38所示。图5-38“隐藏的菜单”效果28.继续使用“移动工具”将素材文件“素材3.psd”中的