网页图像动画与脚本编程

网页图像动画与脚本编程 主讲：熊丽华

第三章网页效果图设计 情境2：商业网站Logo设计与制作 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训:企业LOGO设计基于工作过程的网页设计与制作教程

1项目展示与项目目标 项目展示与项目目标 • 基本掌握图层的概念 • 掌握图层的使用方法与技巧 • 熟练掌握图层的样式的使用方法与技巧 • 掌握网页布局工具网格、标尺与参考线的使用技巧

2. 项目资讯 1．项目背景淮信科技有限公司是一家集培训认证、软件开发、域名注册、虚拟主机、网站建设、网络营销推广与一体的IT企业。简称淮信科技，企业已经有了自己的企业商标，设计企业Logo主要是为了建立网站而使用，所以设计要简洁，反映出企业性质。

2. 项目资讯 关键知识点一：Logo的设计综述 • 在字典中Logo是“标识语”的意思，在IT领域，Logo是标志、徽标的意思。网站的Logo就是网站的标志，也是互联网上各个网站用来与其他网站链接的图形标志。 • Logo有以下几个作用： • 1）Logo是与其他网站链接以及让其他网站链接的标志和门户。 • 2）Logo是网站形象的重要体现。 • 3）Logo能使浏览者便于选择。 • 一个好的Logo应具备的条件： • 1）精美、独特，符合设计标准。 • 2）与网站的整体风格相融。 • 3）能够体现网站的类型、内容和风格。

2. 项目资讯 关键知识点一：Logo的设计综述网易的Logo，它使用了3种颜色：红（网易）、黑（NETEASE，www.163 .com）、白（底色）。“网易”两个字使用了篆书，体现了古典意味，也蕴含着“轻松上网，易如反掌”的含义。新浪网的Logo，Logo的背景色以淡黄色到白色的过渡，同时配以礼花、鞭炮以及“春”字都反映了春节的气氛，该Logo最有特色的是字母i，i上的点用了表象性手法处理成一只眼睛，而这又使这个字母i像一个小火炬，这样既向往人们传达了“世界在你眼中”的概念，激发人们对网络的好奇，又使人们容易记住新浪网的域名。

2. 项目资讯 关键知识点二：图层的使用不透明度图层就像一层透明的玻璃纸，透过这层纸，可以看到纸后的东西，而且无论在这层纸上如何涂画都不会影响其他层的内容。混合模式图层可见性填充与调整图层普通图层蒙板图层添加图层填充与调整图层链接图层添加图层样式

2. 项目资讯 关键知识点二：图层的使用图层分类： • 背景层：自动创建，始终位于面板的最下方，一个图像文件只有一个背景层。 • 普通层：这是一个比较普遍应用，使用率很高的图层，通过常用方法进行创建，并且可以对普通层进行色彩的编辑、图形的绘制。 • 文字层：文字层是在图像中输入文字后自动创建的图层。 • 图层组：图层组的作用是将相关的多个图层放置在一个组中，从而便于图层的管理。

2. 项目资讯 关键知识点二：图层的使用 • 图层的常用操作 • 新建图层 • 新建图层对话框参数说明： • 名称：新建图层的名称 • 使用前一图层创建剪贴蒙版：勾选该项，可以使用前一图层创建剪贴蒙版，也就是说使用前一个图层中的内容来遮盖其上新建的图层。 • 颜色：设置新建图层的显示颜色。 • 模式：用于设置新建图层的混合模式 • 不透明度：用于设置新建图层的不透明度。

2. 项目资讯 关键知识点二：图层的使用 • 图层的常用操作 • 新建图层组 • 选择图层 • 选择单个图层 • 选择连续图层：Shift • 选择不连续图层：Ctrl • 选择所有图层：【选择】|【所有图层】 • 取消单个图层的选择：Ctrl+单击 • 复制图层 • 删除图层

2. 项目资讯 关键知识点二：图层的使用 • 图层的常用操作 • 创建新的填充与调整图层 • 创建新的填充图层的三种类型： • 纯色：用于创建新的纯色填充图层 • 渐变：用于创建新的渐变填充图层 • 图案：用于创建新的图案填充图层 • 创建新的调整图层 • 链接图层 • 合并图层：合并图层可以大大释放内存空间，从而加快图像的处理速度。 • 向下合并 • 合并可见图层 • 拼合图层

2. 项目资讯 关键知识点二：图层的使用 • 图层混合模式的设置：指两个图层进行混合，从而得到一个新的混合效果。 • 正常 • 溶解 • ……. • 设置图层样式 • 投影：可以给图层内容添加投影效果。 • 内阴影：可以在图层内容边缘的内部增加投影，产生凹陷的效果。 • 外发光、内发光：可以在图像边缘的外侧或内侧增加发光效果。 • 斜面与浮雕：可以在图层内容增加不同组合方式的高亮和阴影效果，从而产生逼真的立体效果。 • 光泽：可以在图层内部根据图层的形状应用阴影效果，通常会创建出光滑的磨光效果。 • 颜色渐变：可以用颜色对图层实现渐变的效果。 • 描边：可以使用图层样式在当前图层上描画对象的轮廓。

2. 项目资讯 关键知识点三：文本工具与图层样式的使用字体变形使用字体文字工具属性字体对齐字符段落使用字体字体颜色文字大小字体样式

2. 项目资讯 关键知识点三：文本工具与图层样式的使用

2. 项目资讯 关键知识点四：网页效果图的精确布局参数设置命令: 执行“编辑”→“首选项”→“单位与标尺”命令（快捷键<Ctrl+K>直接调出“首选项”对话框）参考线命令: 执行“视图”→“标尺”命令即可在编辑窗口中显示标尺；执行“视图”→“显示”→“参考线”命令即可在编辑窗口中显示参考线。网格命令: 执行“视图”→“显示”→“网格”命令即可在编辑窗口中显示网格。

商标淮信科技（方正大黑简体）淮信科技英文名称 3. 项目计划与决策淮信科技Logo主要在原有的商标的基础上，设计出简洁，反映出企业性质的网络标志。建议设计的大小为230像素×100像素，Logo的主题内容放在中间区域210像素×60像素内，企业商标重新绘制，主体颜色不变仍然采用企业的科技蓝色（RGB值为15，40，140），草图设计如图3-34所示。

4. 项目实施 1）启动Photoshop 软件，然后执行“文件”→“新建”命令，创建“淮新科技Logo.psd”文件，宽度：230像素，高度：100像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色。 2）执行“编辑”→“首选项”→“单位与标尺”命令，修改标尺的单位为像素，执行“编辑”→“首选项”→“参考线、网格、切片和计数”命令，将网格线间距修改为20像素），执行“视图”→“标尺”命令显示标尺，执行“视图”→“显示”→“网格”命令显示网格，最后执行“视图”→“新参考线”命令，会弹出“新建参考线”对话框（如图3-35所示），依次新建两条水平参考线（20px，80px）与两条垂直参考线(10px，220px)，新建完成后效果如图3-36所示。

4. 项目实施 3）新建一个图层，放大图像然后使用“多边型套索工具”，依次选区坐标1（10，20）、坐标2（25，30）、坐标3（30，50）、坐标4（25，80）、坐标5（10，80）、坐标6（15，50）形成闭合选区，如图3-37所示，最后设置前景色为蓝色（RGB值为15，40，140），并填充到选区中，如图3-38所示。图 3-38 填充选区图 3-37 绘制不规则选区

4. 项目实施 4）复制图层1命名为图层2，然后执行“编辑”→“自由变换”命令，在变换区域内单击鼠标右键执行“水平翻转”命令，最后将图层2向右移动25像素，如图3-39所示。 5）新建图层3，选择“椭圆套索工具”，设置属性中的样式为固定大小，宽20像素，高20像素，绘制选区后填充为红色（RGB值为：255，0，0），用方向键调整其位置在图层1与图层2中间，如图3-40所示。图 3-39 绘制不规则选区图 3-40 填充选区

4. 项目实施 6）使用文本工具输入“淮信科技”，设置字体为“方正大黑简体”， 36点，字体为蓝色，点击字符段落标记，设置字符间距为100（如图3-41所示），文字效果如图3-42所示。图 3-41 设置字符间距图 3-42 添加文字后的效果

4. 项目实施 7）采用同样的方法输入文本“Huaixin Scinence and Technology”，字体：Arial Black，大小：8点，颜色：蓝色（RGB值为15，40，140），如图3-43所示。 8）新建图层4，使用铅笔工具绘制一条线，调整图层位置，如图3-44所示。图 3-43 添加英文文字图 3-44 添加横线的效果

4. 项目实施 9）对图层添加图层样式。鼠标选中“淮信科技”文本层，鼠标点击“添加图层样式”按钮，选择“斜面与浮雕”效果，设置如图3-45所示。图 3-45 为“淮信科技”设置“斜面与浮雕”

4. 项目实施 10）在图层面板中，选中“淮信科技”文本层，把鼠标放在上点击鼠标右键，执行“拷贝图层样式”命令，然后选中图层1，点击鼠标右键执行“粘贴图层样式”命令，依次对图层2、图层3组同样的操作，最后给图层3添加“描边”效果（如图3-46所示）。 11）调整各个图层的位置，淮信科技Logo就完成了，效果图如图3-25所示。图 3-46 图层3的描边效果设置（颜色为白色）

5. 项目检查与评估

6.强化拓展实训与作业：企业LOGO设计

第三章网页效果图设计 情境2小结 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 6. 强化拓展实训:企业LOGO设计基于工作过程的网页设计与制作教程

谢谢大家

网页图像动画与脚本编程

网页图像动画与脚本编程

Presentation Transcript