实用平面创意设计与技法.pptx

《实用平面创意设计与技法.pptx》由会员分享，可在线阅读，更多相关《实用平面创意设计与技法.pptx（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实用平面创意设计与技法实用平面创意设计与技法第10章 绘制网页广告第1页/共27页效果预览第2页/共27页10.110.1客户要求客户要求客户需求：零点都市广告的网页广告客户需求：零点都市广告的网页广告主题内容：网页广告主题内容：网页广告1、客户要求A、“猎人娱乐互动世界“网站网页广告效果要求：突出互动的特点以及娱乐、时尚的特点。2、对客户要求的界定网页广告与现实广告的区别：网页广告受到网速的限制。广告画面的尺寸不能太大，颜色不能太丰富，画面的内容也不允许复杂。A、绘制一个画面教为简洁的图象，从颜色上来和广告所要求表现的效果相呼应第3页/共27页10.210.2设计思路设计思路1 1、设计主题

2、的传达、设计主题的传达猎人娱乐互动世界这则广告，通过文字的颜色来和时尚呼应，以背景中猎人娱乐互动世界这则广告，通过文字的颜色来和时尚呼应，以背景中 不不停摆动的小球和网络互动的特点相适应。停摆动的小球和网络互动的特点相适应。2、具体思路表述猎人娱乐互动世界的广告中整个画面的色彩以黑、白、灰为主，只是在位于画面正中的广告语中加了一些红色。黑色、白色、红色的搭配，给人以时尚、前卫的感觉。再加上整个网页画面中简洁的图象与布局，以及背景中不停摆动的小球，处处和猎人网互动、娱乐的特点想吻合。第4页/共27页10.310.3设计前的准备工作设计前的准备工作1 1、设计素材的收集与整理、设计素材的收集与整理

3、 比较一下网页广告与常见的一些广告的区别比较一下网页广告与常见的一些广告的区别2 2、设计技巧概述、设计技巧概述 A A、“猎人娱乐互动世界猎人娱乐互动世界“网站网站 主要是对文字的设置和调整，以及细心的绘制出主要是对文字的设置和调整，以及细心的绘制出动画动画中需要的每一个图象元素。然后是在中需要的每一个图象元素。然后是在ImageReadyImageReady中设置动画。（通过在动画中设置动画。（通过在动画调板中添加动画帧，以及更改每一帧的停留时间和调整调板中添加动画帧，以及更改每一帧的停留时间和调整”图层图层“调板中的显示调板中的显示与否与否来实现动画效果的。来实现动画效果的。第5页/共2

4、7页第一节 绘制网页图像第6页/共27页制作动画前的图像第7页/共27页1010、44猎人网猎人网猎人网猎人网网站制作目的：使更多的人知道该网站，以增加该网站的知名度和点击率。网站制作目的：使更多的人知道该网站，以增加该网站的知名度和点击率。n 10.4.1 绘制静态的网页画面n 制作步骤：图图10.1”新建新建“对话框对话框（1）启动photoshop7.0，在菜单栏中选择”文件“|”新建“命令，打开”新建“对话框，参照图10.1所示，新建一个”猎人网“的空白文档。第8页/共27页（2）在工具箱中选择”矩形选框“工具，在视图的下端绘制一个矩形的选区，如下图10.2所示效果。图图10.2 绘制

5、矩形选区绘制矩形选区第9页/共27页（3）保持工具箱中前景色为黑色，在键盘上按下Alt+Backspace 快捷键，使用前景色将矩形选区填充（如下图10.3所示）。小帖士：快捷键复习前景色填充：ALT+Backspace/Delete背景色填充：CTRL+Backspace/Delete图图10.3 填充后的效果一填充后的效果一 第10页/共27页（4）继续使用：“矩形选框”工具，在视图的顶端再绘制一个大些的矩形选区，并用浅灰色浅灰色将其填充，取消选区后的效果（如下图10.4所示）。图图10.4 填充后的效果二填充后的效果二第11页/共27页（5）使用“矩形选框”工具在如图10.5所示位置，绘

6、制选区。图图10.5 绘制选区绘制选区（6）在工具箱中单击前景色按钮，打开“拾色器”对话框。如图10.6所示，将颜色调整为深一些的灰色。图图10.6“拾色器拾色器”对话框对话框参考如图所示参数较上面较上面深一些的灰色深一些的灰色第12页/共27页（7）使用“矩形选框”工具在视图中右击鼠标，在弹出的快捷菜单中选择“描边”命令，打开“描边”对话框，如图10.7所示。在“描边”选项组中，将“宽度”设置为3像素，位置为“居内”，单击“好”按钮，对选区进行描边操作。图图10.7 描边选区描边选区（8）在菜单栏中“选择”|“取消选择”（CTRL+D），将图像中的选区取消。第13页/共27页填充像素（9）选

7、择工具箱中的工具，单击其选栏中的黑色三角形按钮，在弹出的“几何选项”面板中，选中“终点”复选框，然后再将“粗细”参数栏设置为5像素，如图10.8所示：（10）使用“直线”工具，在如图10.9的位置绘制箭头图像。图图10.8 设置选项栏设置选项栏图图10.9 绘制箭头绘制箭头5第14页/共27页（10）选择工具箱中的“横排文字”工具，在如图10.10 的位置输入“猎人娱乐互动猎人娱乐互动世界世界”，然后单击选项栏中的“提交所有当前编辑”按钮，完成文字的设置。图图10.10 添加文字添加文字（11）在“字符”调板中，将文字的颜色设置为白色白色，并将“水平缩放”选项设置为150%，如图10.11所示

8、效果。图图10.11 设置文字设置文字第15页/共27页（13）在菜单栏中选择“图层”|“图层样式”|“投影”命令，打开“图层样式”对话框，参照图10.12 所示，为文字图层添加投影效果添加投影效果。图图10.12 添加投影效果添加投影效果第16页/共27页（14）继续使用“横排文字”工具，在视图中输入两段文字“加入娱乐互动世界”和“尽享无穷乐趣”，将字体颜色设置为黑色黑色，并将字体大小设置为50点，如图10.13所示效果。图图10.13 设置文字设置文字第17页/共27页接下来为这两段文字添加上相同的样式。（15）执行“图层”|“图层样式”|“投影”命令，打开“图层样式”对话框。如图10.1

9、4所示效果，为文字添加投影效果添加投影效果。图图10.14 添加投影效果添加投影效果第18页/共27页文字图层添加样式后的效果：图图10.15 添加样式后的效果添加样式后的效果第19页/共27页（16）在“图层样式”的左边再选择“渐变叠加渐变叠加”选项，对话框右侧切换到“渐变叠加”的相关选项。如图10.16 所示效果。在对话框中，单击“渐变”选项右侧的渐变条，打开“渐变编辑器”对话框，调整一个黑色到白色再到红色的渐变效果，如图10.16右下图所示。图图10.16 编辑图层样式编辑图层样式第20页/共27页（17）编辑完毕后将“渐变编辑器”对话框关闭，再将“图层样式”对话框关闭。此时文字效果如图

10、10.17 所示效果。图图10.17 文字效果文字效果第21页/共27页（18）在“图层”调板中，先选中“加入娱乐互动世界”图层，点击右键，选取“拷贝图层样式”，然后再选择“尽享无穷乐趣”图层，选取“粘贴图层样式”，如图10.18 所示，这样，两图层即产生相同的效果，如图10.19 所示。图图10.18 拷贝图层样式拷贝图层样式图图10.19 两图层相同的效果两图层相同的效果第22页/共27页（19）在“图层”调板中，双击“加入娱乐互动世界”图层的“渐变叠加”效果，再次打开“图层样式”对话框，选中“反向反向”复选框，将文字的渐变效果颠倒过来，然后将对话框关闭，如图10.20 所示效果。图图10

11、.20 调整图层样式调整图层样式第23页/共27页（20）最后，再将该网站的网址添加到画面中，如图10.21 所示。图图10.21 添加网址添加网址第24页/共27页本章小结1.设计思路猎人娱乐互动世界的广告中整个画面的色彩以黑、白、灰为主，只是在位于画面正中的广告语中加了一些红色。黑色、白色、红色的搭配，给人以时尚、前卫的感觉。再加上整个网页画面中简洁的图象与布局，以及背景中不停摆动的小球，处处和猎人网互动、娱乐的特点想吻合。2.结合软件知识点A.选区工具的应用及调整B.文字工具及字符调板的应用C.图层样式的综合运用第25页/共27页感谢系领导和相关老师的大力支持！感谢现代技术教育中心的技术支持！尤其感谢高斌老师的帮助和指导！感谢每天坐在讲台下面给了我展示舞台的同学们！谢谢大家！第26页/共27页