网页设计和图像处理基础知识.ppt

网页设计和图像处理基础知识 （编辑基础培训）本讲义仅为培训纲要，需结合软件和实例进行讲解广西房地产信息网内部使用，如需转载请注明出处2007-02-29 培训目录 一、专题制作 二、图像处理 三、色彩搭配 一、专题制作 使用软件：Dreamweaver 8 、Photoshop CS2 1、Dreamweaver 8软件常用工具/界面介绍 title标签 页面属性 插入表格 插入图像/图像占位符/图像alt标签 链接 CSS面板/属性面板/视图模式 2、专题框架的制作：使用表格（table）布局 专题制作流程： 确定专题方案 构思布局草图：结合方案考虑专题中的重要栏目，内容的多少，素材、色彩等因素，确定草图 使用Photoshop制作框架图片（简单专题框架可以不使用Photoshop，比如房网现在的热点专题类型） 使用Dreamweaver进行布局制作专题 实例操作演示 用专题实例进行制作演示 注意一下几点 插入表格table 边距控制/细节控制 定义CSS（字体CSS/链接CSS） CSS的路径/重新导入CSS Title标签/alt标签 二、图像处理 1、Photoshop CS2软件介绍：常用工具/界面介绍 图层面板/历史纪录面板/动作面板 字体/段落面板 显示比例/图像修改选项/辅助线设置 工具栏： 选框工具/移动工具/前景色/后景色 文字工具/圆角矩形工具 2、图像处理 a.图像大小衡量单位：网页图片通常都以像素（px）作为大小单位 示例图片 输出使用的图片（舞台背景、户外广告等）则以常用度量单位表 示大小：米（m），厘米（cm），毫米（mm）等 b.图像大小：|图片大小面板 图片的大小通常由3个因素决定：宽度（W），高度（H）， 分辨率（R），通常使用网页图片的默认分辨率为：72 对于输出使用的图片，特别是使用喷绘和写真的户外广告等需要 图片比较大（例如：10M*8M），可以适当降低分辨率 c.修改图像的大小 首先记住几个快捷键：新建ctrl+n（new）， 全选ctrl+a(all)，复制ctrl+c(copy)，粘贴ctrl+v(view) 注意：图像的大小必须和网页上需要的大小一致，否则会导 致图像变形，模糊等 普通修改(按比例修改)：打开图像——调整宽度（W）， 高度（H），分辨率（R） |实例 特殊修改（不按比例修改）：图像的比例和网页上需要的大 小比例不一致，强行修改图像比例会导致图像变形 首先满足宽或高中其中一项 |实例 d.图像的效果 *透明度修改（结合水印和背景图像的制作） *图层样式（渐变/描边/投影/外发光/斜面浮雕） *图像合并 *图像调整（常用几个：亮度/对比度，色彩平衡，去色） *图像上的字体/字体的效果 *图层：位置/链接/锁定/隐藏/添加/删除 （结合ImageReady进行简单gif动画制作） |以上均举实例 e.批处理图像 |实例 定义动作 使用动作 f.图像的保存 |实例 合并图像（不可见图层的影响） 保存格式：常用gif/jpg（区别，格式大小） 保存文件的名称：有一定规律性 三、色彩搭配 1、色相环介绍 12色相环是由原色，二次色和三次色组合而成。色相环中的三原色是红、黄、蓝色，彼此势均力敌，在环中形成一个等边三角形。 二次色是橙、紫、绿色，处在三原色之间，形成另一个等边三角形。红橙、黄橙、黄绿、蓝绿、蓝紫和红紫六色为三次色。三次色是由原色和二次色混合而成。 12色相环 原色 二次色 三次色 2、色相环的基本配色 无色设计、类比设计、冲突设计、互补设计、 单色设计、中性设计、分裂补色设计、原色设计、 二次色设计、三次色三色设计 (颜色配合：几种颜色组成图片 颜色组合：几种颜色混合成一种颜色) a.无色设计：不用彩色，只用黑、白、灰色 b.类比设计： 在色相环上任选三个连续的色彩或其任一明色和暗色 d.互补设计： 使用色相环上全然相反的颜色 f.中性设计： 加入一个颜色的补色或黑色使它色彩消失或中性化（即将一 种颜色和它的补色混合起来得到的颜色） 3、列举网页配色分类及实例（简单列举3个） a.回味、女性化、优雅 （针对网页或图像的主题的配色方案） b.运动型、轻快 c.活泼、快乐、有趣 注意：以上列举的是理论的配色方案，而我们在设计中必 须从自己的实际情况出发。 比如：给客户的一张图片上加上字