网页美工设计模块五 网站整体设计.pptxVIP

网页美工设计模块五 网站整体设计任务一 设计网站首页教学目标 １．能记住各种工具的使用。２．能理解如何整合素材。３．能记住图层蒙板的的应用。１．变形命令、移动工具、文字工具的使用２．设计风格的确立与色调的选择 教学重、难点新课导入　　餐饮类网站的设计应符合顾客的审美观点，为顾客营造一种宾至如归的感觉。其中网页的主题风格应与网站经营的产品想匹配。例如，经营西式餐点的网页，可以采用欧洲古典风格的花纹和色调，而经营中式餐饮的网页，则可以通过一些象征中国风格的图形元素突出网页的主题。 本实例采用金黄色为主色调，辅以褐色、橘黄色等颜色，以突出中餐馆的特点，除了使用金黄色等中国文化特色的色调外，在设计首页时还采用了回纹花纹、古典建筑风格的窗格、画卷卷轴等与中国文化相关的图形图像元素，以及大量的中餐菜肴的照片，以突出中国的特征　目标展示图6-1-1网站首页展示任务分解一、Logo设计 1.在Photoshop CS6中执行【文件】|【新建】命令，打开【新建】对话框，设置网页文档的【宽度】、【高度】、【分辨率】等属性，建立空白网页文档，如图6-1-2所示。 2.在文档中新建“背景”图层文件夹，导入素材文件/模块六/任务一/ “backgroundColor.psd“，将其命名为“背景1”，拖入到“背景”图层文件夹中，删除“图层1”，如图6-1-3所示。 图6-1-2空白网页文档 图6-1-3 素材背景效果3.用同样的方式，导入素材文件/模块六/任务一/ “paperGrain.psd素材图像，将其命名为“背景2”，拖入“背景”文件夹中，放置在“背景1”图层上方，作为纸张纹理，如图6-1-4所示。4.再导入素材文件/模块六/任务一/ “topGrain.psd”文档中的回纹纹理，将其拖动到网页文档的顶部，即可完成背景图像的制作，如图6-1-5所示。 图6-1-4 纸张纹理效果 图6-1-5 回纹纹理效果5.新建“标志”图层文件夹，导入素材文件/模块六/任务一/LogoBG.psd的素材文档，设置其中素材图像位置，选择“直排文字工具”，在“字符”面板中设置文字工具的属性，然后在Logo背景中输入文字“，如图6-1-6所示。6.选中该图层，右击图层名称，执行“混合选项”命令，单击“投影”列表项目，在右侧设置“投影”样式的各种属性，然后选择“外发光”效果，设置如图6-1-7所示。 图6-1-6文本属性参数 图6-1-7文本图层样式参数 7选中“横排文字工具”，在“字符”面板中设置文字工具的属性，然后输入网站的名称如图6-1-8所示。8.将光标置于“亦”字之后，换行并选中“江南”二字，设置其文本的属性，如图6-1-9所示。 图6-1-8网站名称样式参数 图6-1-9文本样式参数9.选中“亦江南”图层，右击执行“混合模式”命令，添加并设置“投影”样式。然后，选择“外发光”和“内发光”等列表选项，如图6-1-11所示。10.再选择“描边”的列表项目，为“亦江南”文本添加2px的黑色外部描边，即可完成该图层的样式设置，如图6-1-13所示。11.选择“横排文字工具”，输入“—八十年老店—”文本，字体颜色为黄褐色（#735e2d）,然后设置文本样式。12.在“工具选项”栏中单击“变形文字”按钮，在弹出的“变形文字”对话框中设置“样式”为“扇形”，然后设置“弯曲”为“+20%”，然后单击确定按钮，如图6-1-14所示。13.用同样的方式，添加“—中餐服务连锁—”文本到Logo底部，颜色同上为“黄褐色”，然后设置文本变形，完成Logo，如图6-1-15所示。 图6-1-11 “渐变叠加”样式参数 图6-1-13文本样式参数图6-1-14文本变形参数 图6-1-15文本变形参数二、制作导航与Banner1、在网页文档中新建“导航条”图层文件夹。然后打开“navigatorBG.psd”素材文档，将文档中的墨迹图像导入到网页文档中。2右击导入图层名称，执行“混合选项”命令，打开“图层样式”对话框。在左侧选择“投影”列表项目，然后设置投影属性，如图6-1-17所示。3、选择“横排文字工具”，在“字符”面板中设置文本的样式，然后输入导航条的文本，即可完成导航条的制作，如图6-1-18所示。 图6-1-17设置投影属性 图6-1-18设置文本样式4、在网页文档中新建“背景图”图层文件夹，然后导入“flower.psd”和“flower2.psd”两个素材图像，移动其在网页文档中的位置，如图6-1-19所示。5、导入“delicacies1.psd”素材文档，在“图层”面板中单击“添加图层蒙版”按钮，为图层添加蒙板，如图6-1-20所示。6、选择工具栏中的“画笔工具”，在图层蒙版上绘制黑色和灰色的图像，以覆盖图层中的内容。7、打开 “delicacies1.psd”