Web图形基础及photoshop基本工具一

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

2、图形Web图形是指在网页上使用的数字图形。 网页包含的信息丰富多彩，有声音、图像、视频等多媒体信息。多媒体信息在网上传输，必须考虑文件大小、网络速度等因素。因此，网页上的图片一般采用相应的处理方法,具有合适的格式。本课程目标: 使用Photoshop CS制作适合于网页上使用的图片和GIF动画。 （二）数字图像存储方法1、光栅(位图)图像(1)特点: 由一个个像素网格点组成,文件中记录每个像素点的显示特征；图像品质取决于该图像所含有的像素数量，或者说它的分辨率（图像分辨率）；分辨率越高，文件容量越大。缩放图像会发生边缘变形现象。 一般由数码相机、扫描仪、绘图程序（corelphoto pain

3、t）、图像处理程序（Photoshop）生成，常用格式有BMP、GIF、JPEG、TIF等。一、WEB图形基础（二）数字图像存储方法(2)与位图有关的分辨率:分辨率：单位长度所包含的像素点数量，单位：像素/英寸。图像分辨率：每英寸图像中所含有的像素点个数, 决定图像品质。用于屏幕显示：72ppi；用于打印：150ppi；用于印刷=300ppi。屏幕分辨率：显示器单位长度显示的像素点个数, 决定显示品质。输出分辨率：打印图像时单位长度产生的油墨点数,决定打印品质。位分辨率：存储每个像素点颜色信息的二进制位数, 决定图像色彩丰富程度, 又称位深度。有1、8、16、32位。（二）数字图像存储方法2、

4、矢量图形 用矢量线段描绘图像,用数学公式记录图像，图像内容以线条和色块为主。图像质量与分辨率无关，放大、缩小不会出现锯齿状边缘变形现象。在任何分辨率下显示或打印都不会损失细节，都能产生规则的清晰线条和边缘。 多用于标志设计、插图设计和工程制图上。一般由Coreldraw、Flash、Autocad、3Dmax、fireworks等生成，常用文件格式有CDR、SWF、DWG、3DS、WMF等。（三）常用图像文件格式1、JPEG：静态图像有损压缩格式。可设置压缩比率，压缩比率的高低直接影响图像品质的高低。JPEG格式与其它图像格式相比数据量小、色彩损失少，能真实反映原图片，是网页中广泛使用的图像格

5、式。2、GIF：可交换图形格式。最多支持8位256色。主要用于保存带有纯色区域或清晰边缘的图像。可保留透明区域，有静态和动态两种方式。与其它格式相比文件小巧，适于网上传输、网页设计等，网上动画一般有GIF动画或FLASH动画。 （三）常用图像文件格式3、PNG：一种无损压缩格式，PNG-8：类似于8位GIF格式，使用256种颜色，支持透明区域，但不支持动画。PNG-24：支持24位彩色，支持透明区域和杂边颜色，适于保存照片。PNG-32：能支持32位颜色被认为是未来WEB图形的主要格式。4、PSD：PHOTOSHOP专用文件格式。可以存储图像中所有的图层、通道和辅助线等信息。5、BMP：Mic

6、rosoft公司开发的一种Windows系统下的标准图像文件格式。支持RGB、索引颜色、灰度和位图颜色模式，不支持Alpha通道和CMYK颜色模式。6、TIFF：一种无损压缩格式。多用于桌面排版和图形艺术，可以在多种图像软件之间转换，是应用非常广泛的一种图像格式。二、Photoshop基本操作工作界面：菜单栏、选项栏、工具箱、各种面板、图像编辑窗口Photoshop 层的解释：一幅图片可由多个图层组成每个图层可以是：透明的（画布上无任何颜色）完全不透明（画布有底色）部分透明（画布上有些部分着色了）图像的显示效果是各层叠加之后的总体效果。上层遮盖下层的程度由上层的透明度和混合模式决定三、Phot

7、oshop基本工具（一）（一）选取工具及选区变换1、几何选取工具2、自由套索工具3、魔棒/快速选择工具4、选择菜单5、变换选区（二）移动工具选取的基本概念：图像建立选区后，对图像所执行的任何操作只能影响选区中的图像范围，而选区外的图像将会受到保护，不受执行命令或操作的任何影响。切换选取工具：右击矩形选取工具进行切换。选区的追加(shift)、削减(alt)和交集消除锯齿：图像中选区的弧边或斜边部分会产生锯齿状，可消除。羽化选区边缘：进行羽化后，会以选取范围的虚线框为效果中线，所设定的羽化半径为效果的宽度，将选区范围的边缘区域做雾化处理。该区域又叫半选取区域。（一）选取工具1、几何选取工具组 :

8、单击并拖动鼠标创建形状规则的选区 。（一）选取工具Shift+拖动创建正方形或圆形选区Alt+拖动从中心点开始创建选区Shift+Alt+拖动从中心点开始创建正方形或圆形选区在选区内拖动鼠标绘制后重新定位选区2、套索工具组 :选取颜色复杂、边缘不规则的区域 一般套索工具：单击并拖动鼠标，用选框围住待选区域。 多边形套索工具：单击并拖动鼠标创建直边选框的各边。 Shift+单击：绘制水平、垂直或45度的线段 磁性套索工具 ：依据图像中像素的对比度值“直觉地”建立选区。当单击并拖动鼠标时，此工具放置一条路径，这条路径被吸引到两个反差区域的边界上。当松开鼠标时，这条路径就变成一个选区。 （一）选取工

9、具3、魔棒工具 : 根据像素颜色与亮度的相似性建立“自动”选区,一般用于选取一定颜色范围内的图像区域。方法：在要选取的区域上单击鼠标，与单击点像素颜色和亮度相似的区域被选中。容差：0255，系统默认32。用来设置与单击点像素颜色值的差别范围。快速选择工具 : 以涂抹方式“画出”不规则选区,能快速选择多个颜色相近的区域。方法：在要选取的区域上拖动鼠标，颜色和亮度相似的区域被选中。（一）选取工具4、选择菜单: 创建或改变选区全选（CTRL+A）取消选择（CTRL+D）反选（CTRL+SHIFT+I）羽化（CTRL+ALT+D）修改变换载入色彩范围（一）选取工具5、变换选区:CTRL+T：自由变换C

10、TRL+拖动边框中点：斜切CTRL+拖动角点：透视扭曲SHIFT+拖动角点：缩放CTRL+SHIFT+T：再次应用前一个变换CTRL+SHIFT+ALT+T：再次应用并复制前一个变换（一）选取工具（二）移动工具Shift+拖动沿45度方向移动方向键：每次移动1个像素点的距离shift+方向键 每次移动10个像素点的距离拖动选区到另一个图像文件复制选区到另一个图像文件中形成一个新层shift+拖动选区到另一个图像文件复制选区到另一个图像文件中形成一个新层，并放置在图层中心位置。移动工具使用技巧 任务一：浏览图片练习1: 打开图片“瀑布.jpg” 练习内容: 缩放工具, 抓手工具, 显示模式按钮练

11、习2: 打开图片“太阳.psd”浏览多层图片“练习内容: 注意当前图层标记, 图层缩略图, 显示状态标记上机实践任务以下各题效果参照“第一课各题效果.HTML”任务二：新建图片文件练习1: 新建图片文件“自己姓名.jpg”要求: 400300像素,72像素/英寸,RGB8位,白色背景 操作提示: 设置前/背景色为蓝#0000FF/白#FFFFFF,使用云彩滤镜,输入文字,移动文字到合适位置练习2: 新建图片文件“自己姓名1. psd” 要求：300200像素、 72像素/英寸、RGB8位，绿色背景#006633练习3：新建图片文件“自己姓名2. psd” 要求：300200像素、 72像素/英

12、寸、RGB8位，透明背景；文字颜色#FF0033、华文行楷、72点。任务三：几何选取工具练习1：对“童年.jpg”制作模糊边界效果操作提示: 创建矩形羽化20选区, 反选, del清除选区练习2： 将图片“大熊猫.jpg”制作椭圆模糊边界效果操作提示: 创建椭圆羽化20选区、反选、del清除选区练习3：打开图片 “车轮.jpg” 制作样张效果操作提示: 创建椭圆选区, 变换选区, 复制选区, 移动图层任务四：套索工具练习1 : 打开“view.psd”使用套索工具制作样张效果操作提示: 创建多边形选区, DEL清除选区练习2: 打开“栅栏.jpg”使用套索工具制作样张效果操作提示: 创建多边形

13、选区, 复制选区, 移动图层练习3 : 打开“人物1.psd”使用套索工具制作样张效果操作提示: 创建多边形选区, 复制选区, 移动图层任务五：魔棒/快速选择工具练习1：打开“人物2.jpg, 街景.jpg”制作样张效果操作提示:用魔棒/快速选择工具选取人物背景同色区域，反选选中人物，再用套索加/减选以精确选区复制/粘贴选区, 生成新图层自由变换新图层，移动新图层到合适位置练习2：打开“模特.jpg, 樱花.jpg”制作样张效果操作提示:快速选择工具选取人物背景同色区域，加/减选以精确选区使用“调整边缘”选项柔化选区边缘。复制/粘贴选区到樱花图像中合适位置任务六：选择菜单练习1： 打开图片”26.jpg”, 修整边缘，效果参照样张操作提示：选择背景，反选手选区，复制粘贴到新建的白色背景图像中；选择/ 载入选区，选择/修改/收缩 (2个像素)，再用选择/修改/羽化 (2个像素)柔化边缘；反选后清除边缘蓝色像素点。练习2：打开图片”32.psd” ，制作样张效果操作提示：用”选择/色彩范围”菜单命令创建选区, 清除选区内容。任务七：自由变换工具练习1： 打开图片”314.psd”制作打开的门 ，效果参照样张操作提示：创建门选区, 自由变换选区(ctrl+拖角点)，将门打开; 复制原门左边长条区域,自由变换后移动到门把手左边，制作门厚度.练习2： 打开图片”bike.p