Photoshop-CS6第六章

,第六章 网页组成元素设计与制作,Contents,Part1网页制作基础知识,Part2图层样式,Part3网页配色的基本理论,目录,Part4切片工具及切片选择工具,Part1 网页制作基础知识,关于导航栏、banner的尺寸、网页页面制作流程,关于导航栏,导航栏主要包括网站的栏目、搜索工具、回到首页、附加功能等几大元素。,栏目,搜索,附加功能,Banner的尺寸,468*60(px)：这是目前最流行的广告条392*72(px)：这是一个垂直的导航条234*60(px)：这个尺寸刚好是468banner的一半120*240(px)：垂直的旗帜，国内网站上见到的不多120*90(px)、120*60(px)：Button按钮125*125(px)：这是一个方形的广告Button,根据谷歌广告，效果最好的Banner尺寸为：336280 300250 72890 160600理想情况下，如果客户不限空间，那么Banner可以按照以上的尺寸进行设计。,选择最有效的Banner尺寸,网页页面制作流程,1）栏目和版块。2）目录的结构设计。,学习任务1 导航栏的制作,图6-1导航栏效果图,案例1制作流程主要使用形状工具绘制导航栏及按钮形状。然后使用钢笔工具组工具调整形状大小。使用渐变工具完成导航栏颜色的填充。使用文本工具完成文字内容的输入。,案例1,Part2 图层样式,调用图层样式 、图层样式的应用、复制图层样式,（1）从菜单栏中调用,图6-26 通过“图层“菜单打开图层样式窗口,调用图层样式,（2）“图层”面板中调用,图6-27 通过图层调板下方的按钮打开图层样式窗口,（3）双击图层栏调用,图6-28 通过双击图层打开图层样式窗口,（4）右击图层栏调用,图6-29 通过右击图层栏打开图层样式窗口,图层样式的应用,（1）图层样式库,单击“样式”选框右侧的小三角按钮,图6-31 图层样式库,（2）斜面和浮雕,单击“样式”选框中的“斜面和浮雕”选项,图6-32 斜面和浮雕样式选项,图6-33 斜面和浮雕样式调整效果,（3）混合选项,图6-34 图片叠加,图6-35 混合选项效果,图6-36 混合选项中的“填充不透明度”效果,图6-37 混合颜色带的参数变化效果,（4）描边,图6-38 描边样式填充单色,图6-39 描边样式填充渐变,图6-40 描边样式填充图案,（5）投影,图6-41 投影样式,图6-42 投影样式中阴影颜色的“混合模式”调整,图6-43 投影样式等高线调整效果,（6）内阴影,其设置方法与“投影”基本一致，唯一与“投影”不同的是“阻塞”选项，这个选项的作用与“投影”样式中的“扩展”相似。,（7）外发光,图6-44 外发光样式,图6-45 外发光样式选项中颜色调整,（8）内发光,图6-46内发光样式方法参数,图6-47 内发光样式阻塞参数,其参数设置与外发光基本一致，不同的是有“源”的选择，而且有阻塞参数，如图6-46，6-47所示。,阻塞：设置该参数时，数值越大，“内发光”边缘越清晰。,源：勾选“居中”是从图层的图案中发光，勾选“边缘”是从图层的图案边缘内发光。,（9）光泽,图6-48 光泽样式效果,图6-49 光泽样式效果,（10）其他样式,图6-50 渐变叠加样式,图6-51 渐变叠加样式中心点调整,复制图层样式,图6-52 复制粘贴图层样式,选中图层，右击选择“拷贝图层样式”，然后选中需要添加同样图层样式效果的图层，右击选择“粘贴图层样式”。,图6-53 复制下方图形的样式粘贴到文字上,学习任务2 Banner的制作,（1）主题明确,图6-54 微公益广告banner,图6-55 实木地板广告banner,图6-56 微吧婚嫁系列banner,（2）色彩搭配协调,图6-57 明亮的颜色搭配,（3）文字排版,图6-59 突出重点的文字排版,图6-58 文字错落有致的排版,设计制作一个banner，效果如图6-60所示。以内容为主，侧重产品的版式设计，左边文字，右边图片，颜色采用紫色为主，色彩明亮干净，画面简洁，主题突出，模特、花纹等辅助元素也让整体看起来美观大方。,案例2,图6-60效果图,案例2制作流程使用渐变工具制作背景。使用画笔工具制作背景高光。使用矩形工具绘制背景部分的三个矩形，然后复制矩形，使用变形操作完成形变。使用图层样式完成矩形颜色变化。使用选取工具处理鞋子及人物素材图片素材，完成抠图。使用文本工具输入文字内容，用图层样式完成文字效果编辑。,Part3 网页配色的基本理论,网页配色、色彩分析,网页配色,好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁不安。,相同色系搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。,（1）同色系搭配,邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。,（2）邻近色彩搭配,一般来说，色彩的三原色（红、黄、蓝）最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力，产生强烈的视觉效果。,（3）对比色彩搭配,暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。,（4）暖色色彩搭配,冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。,（5）冷色色彩搭配,色彩分析,（1）红色,图6-91 以红色为主色的页面,红色与黑色的搭配在商业设计中被誉为商业成功色，红黑搭配常被用于较前卫时尚、个性的娱乐休闲区网页中。,红色象征热情、奔放、喜悦、庄严。,（2）黄色,黄色象征高贵、富有、灿烂、活泼,黄色与其他颜色配合很活泼，有温暖感，代表快乐、希望、智慧和轻快。,图6-92 以黄色为主的关于食品的页面,（3）蓝色,蓝色象征天空、清爽、科技,浅蓝色和绿色、白色之间的搭配可以使页面看起来非常干净清澈，能体现出柔顺淡雅和浪漫的气氛。,图6-93 以蓝色为主色调的页面,（4）绿色,绿色象征植物、生命、生机,绿色在黄色和蓝色之间，属于较中庸的颜色，是和平色，偏向自然美，宁静、生机勃勃、宽容。,图6-94 以绿色为主色调的页面,（5）紫色,紫色象征浪漫、富贵,紫色加入少量的白色，就会成为一种十分优美、柔和的色彩。,图6-95 以紫色为主色调的页面,（6）橙色,橙色象征青春、活力，容易引起食欲,通过将浅绿色、浅蓝色、蓝色等颜色与橙色搭配使用，可以构成最明亮、最欢乐的色彩。,图6-96 以橙色为主色调的页面,（7）白色,白色象征纯洁、简单、洁净,很少有纯白色的网页，通常与其他色彩搭配使用，给人感觉清新，干净。,图6-97 以白色为主色调搭配蓝灰色的页面,（8）黑色,黑色象征严肃、庄严和坚毅,黑色适合于许多色彩搭配。黑色还具有高贵、稳重、科技的意象。,图6-98 以黑色为背景搭配彩色的页面,（9）灰色,灰色象征庄重、沉稳,灰色是中性色，可以与任何色彩搭配，也可以帮助两种对此强烈的色彩实现和谐过度。,图6-99 以灰色为主色调的页面,学习任务3 网页页面制作,为网站划分框架结构,图6-108上下结构,图6-109左右结构,图6-110上中左右结构,图6-111综合性组合,图6-112不规则组合,熟悉网页基本架构,Logo,导航栏,Banner,页面组成元素通常是网页的Logo、导航栏、网页banner、网页文本及图像设计等,案例3,图6-113效果图,通过仿制首页面，了解页面制作的基本流程和操作规范，同时掌握Photoshop工具箱中切片工具的使用，了解切片工具的作用。效果如图6-113所示。,案例3制作流程首先分析页面的基本架构。制作页面的nav。制作页面的banner。制作页面的tab。制作页面的content。制作页面的foot。,Part4 切片工具及切片选择工具,切片工具的使用、切片选择工具,切片工具的使用,（1）使用方法,首先选择photoshop中的切片工具，如图6-164所示。,图6-164 切片工具,打开需要切片的页面，如图6-165所示。,图6-165 打开网页页面,根据需要把图像切割的片数，在图像上按住鼠标左键，拖动出合适大小的选区，如图6-166所示。,图 6-166 调整切片大小,在文件菜单中选择“文件”选择“存储为web所用格式”命令，如图6-167所示。,图6-167 打开“存储为web所用格式”命令,（2）存储方法,在弹出的对话框中，设置好参数，单击“存储”按钮，如图6-168、图6-169所示。,图6-168 切片存储窗口选项,图6-169 切片存储格式选择,切片选择工具,切片选择工具主要用来进一步编辑调整切片选区，如图6-170所示。,图6-170 切片选择工具,（1）删除切片方法,在要删除的切片选区内，单击鼠标右键，弹出如下对话框，选择PhotoshopCS6“删除切片”即可。如图6-171所示。,图6-171 右键选择“删除切片”,（2）编辑切片选项,在要删除的切片选区内，单击鼠标右键，弹出如下对话框，选择PhotoshopCS6“编辑切片选项”，在弹出的对话框中设置各个选项，如图6-172所示。,图6-172 右键选择“编辑切片选项”,（3）划分切片,如果感觉某一块切片还是比较大，那么可以在切片上点击鼠标右键，从弹出的菜单中选择“划分切片”选项，如图6-173所示。,图6-173 右键选择“划分切片”命令,如在弹出的对话框中，选择水平划分，输入重新划分为3份，点击“确定”按钮后，所选择的切片将被重新水平划分为3份，如图6-174所示。,图6-174 选择“水平划分”效果,如在弹出的对话框中，选择垂直，输入重新划分为4份，点击“确定”按钮后，所选择的切片将被重新垂直划分为4份，如图6-175所示。,图6-175 选择“垂直划分”效果,实训 登录界面的制作,1实训内容制作一个登录