(精选)网页美工设计模块五 网站整体设计课件.pptxVIP

网页美工设计 模块五 网站整体设计 任务一 设计网站首页 教学目标 １．能记住各种工具的使用。 ２．能理解如何整合素材。 ３．能记住图层蒙板的的应用。 教学重、难点 １．变形命令、移动工具、文字工具的使用 ２．设计风格的确立与色调的选择 新课导入 　　餐饮类网站的设计应符合顾客的审美观点，为顾客营造一种宾至如归的感觉。其中网页的主题风格应与网站经营的产品想匹配。例如，经营西式餐点的网页，可以采用欧洲古典风格的花纹和色调，而经营中式餐饮的网页，则可以通过一些象征中国风格的图形元素突出网页的主题。 本实例采用金黄色为主色调，辅以褐色、橘黄色等颜色，以突出中餐馆的特点，除了使用金黄色等中国文化特色的色调外，在设计首页时还采用了回纹花纹、古典建筑风格的窗格、画卷卷轴等与中国文化相关的图形图像元素，以及大量的中餐菜肴的照片，以突出中国的特征 　　 目标展示 图6-1-1网站首页展示 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文本变形参数 二、制作导航与Banner 1、在网页文档中新建“导航条”图层文件夹。然后打开“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”素材文件，将其中的菜肴和筷子等素材图像导入到网页文档中。 图6-1-19导入素材图像 图6-1-20绘制选区 8、用同样的方式导入“smoke.psd”素材文档中的烟雾图像，并通过图层蒙板对其进行遮罩处理，如图6-1-23所示。 9、导入“butterfly.psd”素材文档，将其中的蝴蝶图像导入到网页文档中,如图6-1-2