第1课Web 图形基础及photoshop基本工具一

1、Web图形制作图形制作 联系方式： 计算中心123办公室 Mphone:Email： 参考书目： n Photoshop CS 平面设计 nPhotoshop CS 从入门到精通 美 Stephen Romaniello 著 魏海萍 于晓菲等译 电子工 业出版社 nPhotoshop CS 3以假乱真的艺术 英 Steve Caplin著 杨志锋 杨昕立 等译 电子工业出版 社 答疑安排 日期周次 时间地点 每周五 1-16 14:30-15:00200机房/123办公室 第一课第一课 一、一、Web图形基础知识图形基础知识 二、二、Photoshop基本操作基本操作

2、 三、三、 Photoshop基本工具（一）基本工具（一） n1、选择工具、选择工具 一、一、WEB图形基础图形基础 （一）什么是（一）什么是WEBWEB图形图形 WebWeb图形是指在图形是指在网页上使用网页上使用的数字图形。的数字图形。 网页包含的信息丰富多彩，有声音、图像、视频网页包含的信息丰富多彩，有声音、图像、视频 等多媒体信息。多媒体信息在网上传输，必须考虑等多媒体信息。多媒体信息在网上传输，必须考虑文文 件大小件大小、网络速度网络速度等因素。因此，网页上的图片一般等因素。因此，网页上的图片一般 采用相应的处理方法采用相应的处理方法, ,具有合适的格式。具有合适的格式。 本课程目标

3、本课程目标: : 使用使用Photoshop CSPhotoshop CS制作适合于网制作适合于网 页上使用的图片和页上使用的图片和GIFGIF动画。动画。 （二）数字图像存储方法（二）数字图像存储方法 1、光栅光栅( (位图位图) )图像图像 (1)(1)特点特点: : n由一个个像素网格点组成由一个个像素网格点组成, ,文件中记录每个文件中记录每个像素点像素点的显示特征；的显示特征； n图像品质取决于该图像所含有的像素数量，或者说它的图像品质取决于该图像所含有的像素数量，或者说它的分辨率分辨率 （图像分辨率）；分辨率越高，文件容量越大。（图像分辨率）；分辨率越高，文件容量越大。 n缩放图像

4、会发生边缘变形现象。缩放图像会发生边缘变形现象。 一般由数码相机、扫描仪、绘图程序（一般由数码相机、扫描仪、绘图程序（corelphoto paint）、图像处理程序（）、图像处理程序（Photoshop）生成，常用格式有）生成，常用格式有BMP、 GIF、JPEG、TIF等等。 一、一、WEB图形基础图形基础 （二）数字图像存储方法（二）数字图像存储方法 (2)(2)与位图有关的分辨率与位图有关的分辨率: : 分辨率：单位长度所包含的像素点数量，单位：像素分辨率：单位长度所包含的像素点数量，单位：像素/英寸。英寸。 图像分辨率：图像分辨率：每英寸图像中所含有的像素点个数每英寸图像中所含有的像

5、素点个数, 决定决定图像品质图像品质。 用于屏幕显示：用于屏幕显示：72ppi；用于打印：；用于打印：150ppi；用于印刷；用于印刷=300ppi。 屏幕分辨率屏幕分辨率：显示器单位长度显示的像素点个数：显示器单位长度显示的像素点个数, 决定决定显示品质显示品质。 输出分辨率：输出分辨率：打印图像时单位长度产生的油墨点数打印图像时单位长度产生的油墨点数,决定决定打印品质打印品质。 位分辨率：位分辨率：存储每个像素点颜色信息的二进制位数存储每个像素点颜色信息的二进制位数, 决定图像决定图像色彩丰富色彩丰富 程度程度, 又称位深度。有又称位深度。有1、8、16、32位。位。 （二）数字图像存储方

6、法（二）数字图像存储方法 2 2、矢量图形、矢量图形 用用矢量线段矢量线段描绘图像描绘图像,用用数学公式数学公式记录图像，图像记录图像，图像 内容以线条和色块为主。图像质量内容以线条和色块为主。图像质量与分辨率无关与分辨率无关，放，放 大、缩小不会出现锯齿状边缘变形现象。在任何分辨大、缩小不会出现锯齿状边缘变形现象。在任何分辨 率下显示或打印都不会损失细节，都能产生规则的清率下显示或打印都不会损失细节，都能产生规则的清 晰线条和边缘。晰线条和边缘。 多用于标志设计、插图设计和工程制图上。一般多用于标志设计、插图设计和工程制图上。一般 由由Coreldraw、Flash、Autocad、3Dma

7、x、fireworks等等 生成，常用文件格式有生成，常用文件格式有CDR、SWF、DWG、3DS、 WMF等。等。 （三）常用图像文件格式（三）常用图像文件格式 1、JPEG：静态图像有损压缩格式。可设置压缩比率，压缩比：静态图像有损压缩格式。可设置压缩比率，压缩比 率的高低直接影响图像品质的高低。率的高低直接影响图像品质的高低。JPEGJPEG格式与其它图像格式与其它图像 格式相比格式相比数据量小、色彩损失少，能真实反映原图片，是数据量小、色彩损失少，能真实反映原图片，是 网页中广泛使用的图像格式。网页中广泛使用的图像格式。 2、GIF：可交换图形格式。最多支持可交换图形格式。最多支持8位

8、位256色。主要用于保色。主要用于保 存带有纯色区域或清晰边缘的图像。可保留存带有纯色区域或清晰边缘的图像。可保留透明透明区域区域，有，有 静态静态和和动态动态两种方式。与其它格式相比两种方式。与其它格式相比文件小巧，适于网文件小巧，适于网 上传输、网页设计等，网上动画一般有上传输、网页设计等，网上动画一般有GIF动画或动画或FLASH 动画动画。 （三）常用图像文件格式（三）常用图像文件格式 3、PNG：一种无损压缩格式，一种无损压缩格式，PNG-8：类似于：类似于8位位GIF格式，使用格式，使用 256种颜色，支持种颜色，支持透明透明区域，但区域，但不支持动画不支持动画。PNG-24：支持

9、：支持24 位彩色，支持透明区域和杂边颜色，适于保存照片。位彩色，支持透明区域和杂边颜色，适于保存照片。PNG-32： 能支持能支持32位颜色被认为是未来位颜色被认为是未来WEB图形的主要格式。图形的主要格式。 4、PSD：PHOTOSHOP专用文件格式。可以存储图像中所有的图专用文件格式。可以存储图像中所有的图 层、通道和辅助线等信息。层、通道和辅助线等信息。 5、BMP：Microsoft公司开发的一种公司开发的一种Windows系统下的标准图像文系统下的标准图像文 件格式。支持件格式。支持RGB、索引颜色、灰度和位图颜色模式，不支持、索引颜色、灰度和位图颜色模式，不支持 Alpha通道和

10、通道和CMYK颜色模式。颜色模式。 6、TIFF：一种无损压缩格式。多用于桌面排版和图形艺术，可以一种无损压缩格式。多用于桌面排版和图形艺术，可以 在多种图像软件之间转换，是应用非常广泛的一种图像格式。在多种图像软件之间转换，是应用非常广泛的一种图像格式。 二、二、PhotoshopPhotoshop基本操作基本操作 n工作界面：菜单栏、选项栏、工具箱、各种面板、图像编辑窗工作界面：菜单栏、选项栏、工具箱、各种面板、图像编辑窗 口口 nPhotoshop 层的解释层的解释：一幅图片可由多个图层组成：一幅图片可由多个图层组成 每个图层可以是：每个图层可以是： u透明的（画布上无任何颜色）透明的（

11、画布上无任何颜色） u完全不透明（画布有底色）完全不透明（画布有底色） u部分透明（画布上有些部分着色了）部分透明（画布上有些部分着色了） 图像的显示效果是各层叠加之后的总体效果。图像的显示效果是各层叠加之后的总体效果。 上层遮盖下层的程度由上层的上层遮盖下层的程度由上层的透明度透明度和和混合模式混合模式决定决定 三、三、PhotoshopPhotoshop基本工具（一）基本工具（一） （一）（一）选取工具及选区变换选取工具及选区变换 1、几何选取工具、几何选取工具 2、自由套索工具、自由套索工具 3、魔棒、魔棒/快速选择工具快速选择工具 4、选择菜单、选择菜单 5、变换选区、变换选区 （二）

12、（二）移动工具移动工具 n选取的基本概念选取的基本概念：图像建立选区后，对图像所执行的任何：图像建立选区后，对图像所执行的任何 操作只能影响选区中的图像范围，而选区外的图像将会受操作只能影响选区中的图像范围，而选区外的图像将会受 到保护，不受执行命令或操作的任何影响。到保护，不受执行命令或操作的任何影响。 n切换选取工具切换选取工具：右击矩形选取工具进行切换。：右击矩形选取工具进行切换。 n选区的追加选区的追加(shift)(shift)、削减、削减(alt)(alt)和交集和交集 n消除锯齿消除锯齿：图像中选区的弧边或斜边部分会产生锯齿状，：图像中选区的弧边或斜边部分会产生锯齿状， 可消除。

13、可消除。 n羽化选区边缘羽化选区边缘：进行羽化后，会以选取范围的虚线框为效：进行羽化后，会以选取范围的虚线框为效 果中线，所设定的羽化半径为效果的宽度，将选区范围的果中线，所设定的羽化半径为效果的宽度，将选区范围的 边缘区域做雾化处理。该区域又叫半选取区域。边缘区域做雾化处理。该区域又叫半选取区域。 （一）选取工具（一）选取工具 1 1、几何选取工具组几何选取工具组 : :单击并拖动鼠标创建形状规则的单击并拖动鼠标创建形状规则的选区选区 。 （一）选取工具（一）选取工具 Shift+拖动拖动创建正方形或圆形选区创建正方形或圆形选区 Alt+拖动拖动从中心点开始创建选区从中心点开始创建选区 Sh

14、ift+Alt+拖动拖动从中心点开始创建正方形或圆形选区从中心点开始创建正方形或圆形选区 在选区内拖动鼠标在选区内拖动鼠标绘制后重新定位选区绘制后重新定位选区 2 2、套索工具组套索工具组 : :选取颜色复杂、边缘不规则的区域选取颜色复杂、边缘不规则的区域 一般套索工具：一般套索工具：单击并拖动鼠标，用选框围住待选区域。单击并拖动鼠标，用选框围住待选区域。 多边形套索工具多边形套索工具：单击并拖动鼠标创建直边选框的各边。：单击并拖动鼠标创建直边选框的各边。 Shift+Shift+单击：绘制水平、垂直或单击：绘制水平、垂直或4545度的线段度的线段 磁性套索工具磁性套索工具 ：依据图像中像素的

15、对比度值：依据图像中像素的对比度值“直觉地直觉地” 建立选区。当单击并拖动鼠标时，此工具放置一条路径，建立选区。当单击并拖动鼠标时，此工具放置一条路径， 这条路径被吸引到两个反差区域的边界上。当松开鼠标这条路径被吸引到两个反差区域的边界上。当松开鼠标 时，这条路径就变成一个选区。时，这条路径就变成一个选区。 （一）选取工具（一）选取工具 3、魔棒工具 : 根据像素颜色与亮度的相似性建立“自 动”选区,一般用于选取一定颜色范围内的图像区域。 方法：在要选取的区域上单击鼠标，与单击点像素颜色和亮 度相似的区域被选中。 容差：0255，系统默认32。用来设置与单击点像素颜色值 的差别范围。 快速选择

16、工具 : 以涂抹方式“画出”不规则选区,能快速选 择多个颜色相近的区域。 方法：在要选取的区域上拖动鼠标，颜色和亮度相似的区域 被选中。 （一）选取工具（一）选取工具 4 4、选择菜单、选择菜单: : 创建或改变选区创建或改变选区 全选（全选（CTRL+ACTRL+A） 取消选择（取消选择（CTRL+DCTRL+D） 反选（反选（CTRL+SHIFT+ICTRL+SHIFT+I） 羽化（羽化（CTRL+ALT+DCTRL+ALT+D） 修改修改 变换变换 载入载入 色彩范围色彩范围 （一）选取工具（一）选取工具 5 5、 变换选区变换选区: : CTRL+TCTRL+T：自由变换：自由变换 C

17、TRL+CTRL+拖动边框中点：斜切拖动边框中点：斜切 CTRL+CTRL+拖动角点：透视扭曲拖动角点：透视扭曲 SHIFT+SHIFT+拖动角点：缩放拖动角点：缩放 CTRL+SHIFT+TCTRL+SHIFT+T：再次应用前一个变换：再次应用前一个变换 CTRL+SHIFT+ALT+TCTRL+SHIFT+ALT+T：再次应用并复制前一个变换：再次应用并复制前一个变换 （一）选取工具（一）选取工具 （二）移动工具（二）移动工具 Shift+Shift+拖动拖动沿沿4545度方向移动度方向移动 方向键：方向键：每次移动每次移动1 1个像素点的距离个像素点的距离 shift+shift+方向键

18、方向键 每次移动每次移动1010个像素点的距离个像素点的距离 拖动选区到另一个图像文件拖动选区到另一个图像文件复制选区到另一个图像文件中形成一个新层复制选区到另一个图像文件中形成一个新层 shift+shift+拖动选区到另一个图像拖动选区到另一个图像 文件文件 复制选区到另一个图像文件中形成一个新层，复制选区到另一个图像文件中形成一个新层， 并放置在图层中心位置。并放置在图层中心位置。 移动工具移动工具使用技巧使用技巧 任务一：浏览图片任务一：浏览图片 练习练习1: 打开图片打开图片“瀑布瀑布.jpg” 练习内容练习内容: 缩放工具缩放工具, 抓手工具抓手工具, 显示模式按钮显示模式按钮 练

19、习练习2: 打开图片打开图片“太阳太阳.psd”浏览多层图片浏览多层图片“ 练习内容练习内容: 注意当前图层标记注意当前图层标记, 图层缩略图图层缩略图, 显示状态标显示状态标 记记 上机实践任务上机实践任务 以下各题效果参照以下各题效果参照“第一课各题效果第一课各题效果.HTML”.HTML” 任务二：新建图片文件任务二：新建图片文件 练习练习1: 1: 新建图片文件新建图片文件“自己姓名自己姓名.jpg”.jpg” 要求要求: 400: 400300300像素像素,72,72像素像素/ /英寸英寸,RGB8,RGB8位位, ,白色背景白色背景 操作提示操作提示: : 设置前设置前/ /背景

20、色为蓝背景色为蓝#0000FF/#0000FF/白白#FFFFFF,#FFFFFF,使用云彩滤使用云彩滤 镜镜, ,输入文字输入文字, ,移动文字到合适位置移动文字到合适位置 练习练习2: 2: 新建图片文件新建图片文件“自己姓名自己姓名1.1. psd” 要求：要求：300200像素、像素、 72像素像素/英寸、英寸、RGB8位，绿色背景位，绿色背景 #006633 练习练习3：新建图片文件：新建图片文件“自己姓名自己姓名2. psd2. psd” 要求：要求：300200像素、像素、 72像素像素/英寸、英寸、RGB8位，透明背景；位，透明背景； 文字颜色文字颜色#FF0033、华文行楷、

21、华文行楷、72点。点。 任务三任务三：几何选取工具几何选取工具 练习练习1：对：对“童年童年.jpg”制作模糊边界效果制作模糊边界效果 操作提示操作提示: 创建矩形羽化创建矩形羽化20选区选区, 反选反选, del清除选区清除选区 练习练习2： 将图片将图片“大熊猫大熊猫.jpg”制作椭圆模糊边界效果制作椭圆模糊边界效果 操作提示操作提示: 创建椭圆羽化创建椭圆羽化20选区、反选、选区、反选、del清除选区清除选区 练习练习3：打开：打开图片图片 “车轮车轮.jpg” 制作样张效果制作样张效果 操作提示操作提示: 创建椭圆选区创建椭圆选区, 变换选区变换选区, 复制选区复制选区, 移动移动 图

22、层图层 任务四：套索工具任务四：套索工具 练习练习1 : 打开打开“view.psd”使用套索工具制作样张效果使用套索工具制作样张效果 操作提示操作提示: 创建多边形选区创建多边形选区, DEL清除选区清除选区 练习练习2: 打开打开“栅栏栅栏.jpg”使用套索工具制作样张效果使用套索工具制作样张效果 操作提示操作提示: 创建多边形选区创建多边形选区, 复制选区复制选区, 移动图层移动图层 练习练习3 : 打开打开“人物人物1.psd”使用套索工具制作样张效果使用套索工具制作样张效果 操作提示操作提示: 创建多边形选区创建多边形选区, 复制选区复制选区, 移动图层移动图层 任务五：魔棒任务五：

23、魔棒/快速选择工具快速选择工具 练习练习1：打开：打开“人物人物2.jpg, 街景街景.jpg”制作样张效果制作样张效果 操作提示操作提示: n用魔棒用魔棒/快速选择工具选取人物背景同色区域，反选选中人物，快速选择工具选取人物背景同色区域，反选选中人物， 再用套索加再用套索加/减选以精确选区减选以精确选区 n复制复制/粘贴选区粘贴选区, 生成新图层生成新图层 n自由变换新图层，移动新图层到合适位置自由变换新图层，移动新图层到合适位置 练习练习2：打开：打开“模特模特.jpg, 樱花樱花.jpg”制作样张效果制作样张效果 n操作提示操作提示: n快速选择工具选取人物背景同色区域，加快速选择工具选取人物背景同色区域，加/减选以精确选区减选以精确选区 n使用使用“调整边缘调整边缘”选项柔化选区边缘。选项柔化选区边缘。 n复制复制/粘贴选区到樱花图像中合适位置粘贴选区到樱花图像中合适位置 任务六任务六：选择菜单选择菜单 练习练习1： 打开图片打开图片”26.jpg”, 修整边缘，效果参照样张修整边缘，效果参照样张 操作提示：选择背景，反选手选区，复制粘贴到新建的白色背景操作提示：选择背景，反选手选区，复制粘贴到新建的白色背景 图像中；选择