《网页美工设计》教案-第2节 综合案例-餐饮类网页设计制作案例2 教案

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第三部分综合实训篇第一章综合案例——餐饮类网页设计制作标题第二节综合案例——餐饮类网页设计制作案例2课时2课时教学目标教学内容与过程对于一个餐饮网站来说，从精致的美食摄影到美观的布局，在提高企业形象的同时，也成为一种有效的营销手段。餐饮类网站如果按照餐饮文化来分类：可分为中餐网站和西餐网站。在设计中餐类网站时，应突出中国文化的风格。本次案例分为五大块完成：顶部区、中间区、食物区、新闻区、底部区。首先是顶部区新建文档，制作背景一、背景1、对背景图层进行填充，RGB数值为250、243、210。2、导入顶部背景素材，移动到合适的位置。载入图层2选区，新建图层，选择渐变工具，添加七彩色谱渐变。将该图层的混合模式改为柔光。二、登陆条1、新建矩形选框，将前景色设置成深红色，RGB为102、6、11填充颜色2、再复制矩形选框，填充红色，RGB为170、10、183、制作文字及登陆框三、导航条1、打开标尺，横向纵向建立十字参考线2、选择圆角矩形工具，半径设置为10PX，鼠标放在中心点的位置，按住ALT键，从中心分别绘制两个圆角矩形3、选择椭圆工具，在两端处再绘制两个圆形4、载入路径选区，填充褐色（97、58、26）5、给该图层添加图层样式，投影（距离4，扩展0，大小4）添加图层样式—斜面与浮雕。内斜面、平滑、深度113%方向上。大小18软化0角度90、高度30高光模式（正常）黄色214、131、36，不透明度100%阴影模式（正片叠底）158、94、36，不透明度75%6、选择木纹素材，移动到导航上方。按住ALT键，鼠标放在两个图层中间，单击。如果需要颜色对比强烈，可以复制图层。混合模式调整为柔光，不透明度50%左右7、制作花纹载入导航形状图层选区，选择修改，收缩5像素.新建图层，编辑描边2.选择自定义形状从中心绘制图形，栅格化图层并进行修改选择钢笔工具绘制，新建图层，选择画笔工具，笔头2像素，描边路径，CLTRL+ALT+T键，水平翻转合并花纹效果，添加图层样式投影、内阴影效果。投影滤色，深褐色，距离1，扩展0，大小0.内阴影，正片叠底深褐色，距离3阻塞0大小28、输入文字，将花纹的图层样式复制给文字。9、将导航图层新建为组1，命名为导航1，对其进行复制，再修改文字，特色导航制作完成。四、特色美食文字制作1、导入文字2、移动图片至每个文字的上方3、分别按住ALT键，鼠标放在两个图层中间，单击。将其中不协调的图层，混合模式调整为强光。这样通过四个部分完成了顶部区的制作。第二块是中间区1、选择矩形选框工具，新建图层，填充175、12、17红色。添加图层样式，图案叠加，图案木质，64*64像素。混合模式正片叠底。2、导入素材，放入合适的位置。3、选择矩形选框工具，新建图层，填充暗红色。4、制做矩形选框，填充淡黄色。按住ALT键，复制另外的三个图层。分别将美食素材放在欧矩形选框上方，按住ALT键，鼠标放在两个图层中间，单击。第三块是食物区1、导入素材，将笔刷素材混合模式调整为颜色减淡。2、与上面美食图片制作的方法类似，制作出1湘菜篇2川菜篇3海鲜篇4主食篇大家在排版时需要注意整洁美观。第四块新闻区1、导入纹样素材，复制图层，载入选区，按住CTRL+ALT+T键，复制新的图层。再次按住住CTRL+ALT+SHIFT+T键,复制多个图层。2、一排制作完成后，再复制一排图层，垂直翻转。3、再复制制作两边的边框效果。为了对称，同样复制，并水平翻转。4、输入文字及制作完成图片。第五块底