《实用平面创意设计与技法》.ppt

实用平面创意设计与技法,主讲：袁 超,信息技术系软件教研室,上节回顾,第9章 制作网页 A.设计网页应该注意的问题： 注意整体的 把握，色彩 的运用 要适当，不宜太多，要有 秩序感。 B.制作网页大体上包含的环节： a.设计素材的搜集与整理； b.创建静态画面； c.进入Image Ready设置动作，完成制作。 C.结合PS软件知识点： a.钢笔路径工具的应用 b.色彩渐变编辑器的设置 c.图层调板的综合应用,第10章 绘制网页广告,效果预览,10.1 客户要求,客户需求：零点都市广告的网页广告 主题内容：网页广告,1、客户要求 A、“猎人娱乐互动世界“网站 网页广告 效果要求：突出互动的特点以及娱乐、时尚的特点。,2、对客户要求的界定 网页广告与现实广告的区别：网页广告受到网速的限制。广告画面的 尺寸不能太大，颜色不能太丰富，画面的内容也不允许复杂。 A、绘制一个画面教为简洁的图象，从颜色上来和广告所要求表现的效果 相呼应,10.2 设计思路,1、设计主题的传达 猎人娱乐互动世界这则广告，通过文字的颜色来和时尚呼应，以背景中 不停摆动的小球和网络互动的特点相适应。,2、具体思路表述 猎人娱乐互动世界的广告中 整个画面的色彩以黑、白、灰为主，只是在位于 画面正中的广告语中加了一些红色。黑色、白色、红色的搭配，给人以时尚、前 卫的感觉。再加上整个网页画面中简洁的图象与布局，以及背景中不停摆动的小 球，处处和猎人网互动、娱乐的特点想吻合。,10.3 设计前的准备工作,1、设计素材的收集与整理 比较一下网页广告与常见的一些广告的区别 2、设计技巧概述 A、“猎人娱乐互动世界“网站 主要是对文字的设置和调整，以及细心的绘制出动画 中需要的每一个图象元素。然后是在Image Ready 中设置动画。（通过在动画 调板中添加动画帧，以及更改每一帧的停留时间和调整”图层“调板中的显示与否 来实现动画效果的。,第一节 绘制网页图像,制作动画前的图像,10、4 猎人网,网站制作目的：使更多的人知道该网站，以增加该网站的知名度和点击率。,10.4.1 绘制静态的网页画面 制作步骤：,图10.1 ”新建“对话框,（1）启动photoshop7.0，在 菜单栏中选择”文件“|”新建“命 令，打开”新建“对话框，参照 图10.1所示，新建一个”猎人 网“的空白文档。,（2）在工具箱中选择”矩形选框“工具，在视图的下端绘制一个矩形的选区，如下图10.2所示效果。,图10.2 绘制矩形选区,（3）保持工具箱中前景色为黑色，在键盘上按下Alt+Backspace快捷键，使用前景色将矩形选区填充（如下图10.3所示）。,小帖士： 快捷键复习 前景色填充： ALT+Backspace/Delete 背景色填充： CTRL+Backspace/Delete,图10.3 填充后的效果一,（4）继续使用：“矩形选框”工具，在视图的顶端再绘制一个大些的矩形选区， 并用浅灰色将其填充，取消选区后的效果（如下图10.4所示）。,图10. 4 填充后的效果二,（5）使用“矩形选框”工具在如图10.5所示位置，绘制选区。,图10.5 绘制选区,（6）在工具箱中单击前景色按钮，打开“拾色器”对话框。如图10.6所示，将颜色 调整为深一些的灰色。,图10.6 “拾色器”对话框,参考如图 所示参数,较上面深一些的灰色,（7）使用“矩形选框”工具在视图 中右击鼠标，在弹出的快捷菜单 中选择“描边”命令，打开“描边” 对话框，如图10.7所示。在“描边” 选项组中，将“宽度”设置为3像素， 位置为“居内”，单击“好”按钮，对 选区进行描边操作。,图10.7 描边选区,（8）在菜单栏中“选择”|“取消 选择”（CTRL+D），将图像中 的选区取消。,填充像素,（9）选择工具箱中的 工具，单击其选栏中的黑色三角形按钮，在弹出的“几何 选项”面板中，选中“终点”复选框，然后再将“粗细”参数栏设置为5像素，如图10.8所示：,（10）使用“直线”工具，在如图10.9的位置绘制箭头图像。,图10.8 设置选项栏,图10.9 绘制箭头,5,（10）选择工具箱中的 “横排文字”工具，在如图10.10的位置输入“猎人娱乐互动 世界”，然后单击选项栏中的 “提交所有当前编辑”按钮，完成文字的设置。,图10.10 添加文字,（11）在“字符”调板中，将文字的颜色设置为白色，并将 “水平缩放”选项设置为 150%，如图10.11所示效果。,图10.11 设置文字,（13）在菜单栏中选择“图层”|“图层样式”|“投影”命令，打开“图层样式”对话框，参照 图10.12所示，为文字图层添加投影效果。,图10.12 添加投影效果,（14）继续使用“横排文字”工具，在视图中输入两段文字“加入娱乐互动世界” 和“尽享无穷乐趣”，将字体颜色设置为黑色，并将字体大小设置为50点，如图10.13 所示效果。,图10.13 设置文字,接下来为这两段文字添加上相同的样式。,（15）执行“图层”|“图层样式”|“投影”命令，打开“图层样式”对话框。如图10.14 所示效果，为文字添加投影效果。,图10.14 添加投影效果,文字图层添加样式后的效果：,图10.15 添加样式后的效果,（16）在“图层样式”的左边再选择“渐变叠加”选项，对话框右侧切换到“渐变叠加” 的相关选项。如图10.16所示效果。在对话框中，单击“渐变”选项右侧的渐变条， 打开“渐变编辑器”对话框，调整一个黑色到白色再到红色的渐变效果，如图10.16 右下图所示。,图10.16 编辑图层样式,（17）编辑完毕后将“渐变编辑器”对话框关闭，再将“图层样式”对话框关闭。 此时文字效果如图10.17所示效果。,图10.17 文字效果,（18）在“图层”调板中，先选中 “加入娱乐互动世界”图层，点击右键，选取“拷贝图层样式”，然后再选择“尽享无穷乐趣”图层，选取“粘贴图层样式”， 如图10.18所示，这样，两图层即产生相同的效果，如图10.19所示。,图10.18 拷贝图层样式,图10.19 两图层相同的效果,（19）在“图层”调板中，双击“加入娱乐互动世界”图层的“渐变叠加”效果，再次 打开“图层样式”对话框，选中“反向”复选框，将文字的渐变效果颠倒过来，然后将 对话框关闭，如图10.20所示效果。,图10.20 调整图层样式,（20）最后，再将该网站的网址添加到画面中，如图10.21所示。,图10.21 添加网址,本章小结,1.设计思路 猎人娱乐互动世界的广告中 整个画面的色彩以黑、白、灰为主，只是在位于画面正中的广告语中加了一些红色。黑色、白色、红色的搭配，给人以时尚、前卫的感觉。再加上整个网页画面中简洁的图象与布局，以及背景中不停摆动的小球，处