信息网络技术与网络出版发行03

第四章Photoshop网页图形设计速成授课教师：刘爽目录基础知识识位图与与矢量图图区分矢量量图与位位图（像像素图形形）图像菜单单-色彩模式式图像菜单单-调整大小小图像菜单单-调整绘图基本本方法如何开始始工作图层与图图层菜单单绘图基本本工具文字面板板的使用用强大的选选区功能能图章工具具的使用用画笔与渐渐变位图与矢矢量图位图也称称为点阵阵图像或或绘制图图像，是是由称作作像素（（Pixel）的单个个点组成成的。这这些点可可以进行行不同的的排列和和染色以以构成图图样。当放大位位图时，，可以看看见赖以以构成整整个图像像的无数数单个方方块。扩扩大位图图尺寸的的效果是是增大单单个像素素，从而而使线条条和形状状显得参参差不齐齐。矢量图形形是计算算机图形形学中用用点、直直线或者者多边形形等基于于数学方方程的几几何图元元表示图图像。矢矢量图形形与位图图使用像像素表示示图像的的方法不不同。矢量图(向量图)与位图(栅格图)区别位图使用用像素点点逐一描描绘图像像，放大大时有马马赛克现现象或出出现色彩彩边缘模模糊现象象。而矢矢量图不不会出现现马赛克克现象。。矢量图常常用于印印刷，适适合放大大显示的的图案相相对简单单的图像像，位图图适合摄摄影出版版和中小小幅面印印刷。区分矢量量图与位位图（像像素图形形）放大后，，矢量图图不会出出现马赛赛克失真真使用Flash、CorelDRAW、Illustrator等软件绘绘制的图图形都是是矢量图图常见矢量量图格式式：WMFEMFEPSCDRAI常见位图图格式：：JPGGIFBMPPNGTGAPSD图像菜单单-色彩模式式如何浏览览图像：：放大镜镜、导航航器、空空格色彩模式式位图（黑黑白图））灰度（仿仿黑白照照效果））索引色（（GIF图像色彩彩模式））RGB（JPGPNG图像色彩彩模式））CMYK（印刷色色、色域域比RGB小CDRAI等文件常常用）GIFJPGPNG是最常见的网页位图图像格式图像菜单单-调整大小小调整画布布大小注意对齐齐九宫格格对齐方方式的使使用调整图像像大小变为48*48大小的PNG图像图像菜单单-调整调整色阶调整整曲线调整整色相调整整（老照照片）去色（黑黑白照））如何开始始工作认识Photoshop绘图界面面工具栏、、图层、、通道、、路径空白工作作区背景景:双击(打开图形形)新建：窗窗口画布布、单位位与分辨辨率像素单位位设置（（编辑-预设-单位与标标尺）RGB色彩模式式用分辨率率计算打打印用图图形尺寸寸网页设计计时使用用的画布布尺寸大大小950**700950**600图层与图图层菜单单图层面板菜单单移动图层层：快一一点，精精确一点点范例：用用移动工工具做立立体字关键：复制和填填充图层层色块Alt快捷键与与光标移移动键的的配合使使用绘图基本本工具钢笔工具具、图形形工具、、绘制路路径、转转换路径径拾色器与与吸管工工具如何上色色：（先先选择区区域）Alt++退格、Ctrl+退格、油油漆桶用钢笔工工具绘制制一个苹苹果的图图形，并并绘制高高光部分分文字面板板的使用用打开字体体面板大小、行行间距、、比例缩缩放对齐方式式修饰：斜斜体、加加粗行高、字字间距安装更多多的字体体，可以以加速你你的工作作下载站点点地址：：http://///20强大的选选区功能能选区功能能是使用用Photoshop创作图像像的重要要法宝，，使用它它，可以以方便的的修改任任意图形形区域。。创作出出千变万万化的PS图形。选区功能能基本选择择：圆形形、矩形形、像素素条【描边】特殊选择择：魔术术棒、磁磁性魔术术棒选区菜单单及其菜菜单快捷捷键Ctrl+ACtrl+DCtrl++Shift++DCtrl+Shift+I变换选区区：羽化化、收缩缩…Ctrl++T绘制新月月、米老老鼠头像像外形范例：制制作一张张简单的的名片图章工具具的使用用范例：修修改人物物的面部部瑕疵瘦脸瘦瘦身——液化滤镜镜画笔、渐渐变画笔载入画笔笔与选区配配合的画画笔自定义画画笔（范范例：制制作MSL水印图章章）自定义图图案渐变载入渐变变调整渐变变（用金金属立体体感渐变变实现金金属圆柱柱体）渐变类型型综合训练练：绘制口袋袋妖怪头头像（（3X皮卡丘））定义背景景网点图图案背景圆、、阴影选区描边边钢笔绘画画(填充、描描边)电子作业业3：模仿课堂堂示范设设计自己己的名片片：410**250像素绘制两张张300**300像素大小小的口袋袋妖怪图图不准抄袭袭同学作作品作作业详细细信息在在查阅按照学号号最后两两位数字字选择：：23号同学选选2X与X3两张图。。基础绘制制部分End……Photoshop速成-高级应用用部分授课教师师：刘爽爽样式面板板定义文字字样式阴影文字字金属文字字用样式快快速定义义常用网网页布局局面板斜纹面板板圆角面板板动作面板板饱和度对对比度调调整动作作新建950**600空白图像像动作通道与遮遮罩使用遮罩罩融合照照片立体视觉觉原理光照、投投影与反反射网页设计计中的常常见立体体效果多层次阴阴影镜面倒影影网页中的的按钮制制作1平面立体体按钮制制作网页中的的按钮制制作2黑色质感感开关按按钮制作作（（搜索关关键字有有完整整教程））搜集素材材、加速速创作速速度可搜集的的素材：：画笔渐变样式滤镜（KPT5（含3.0）KPT7、EyesCandy、Xenofex）像素图库库矢量图库库可借鉴的的资源：：已设计好好的网页页与网页页模板PSD或或CDR格式的广广告源文文件如何绘制制网页布布局与网网页模板板授课教师师：刘爽爽常见布局局及其网网站类型型中心型布布局：个个人网站站首页、、企业网网站欢迎迎页面上下型布布局：信信息内容容页、通通知公告告“厂”型布布局：企企业站点点、博客客、分类类浏览页页“门”型型布局：：综合信信息站点点，大型型门户站站点、政政府机构构网站创意布局局：企业业形象展展示站点点、网络络单页广广告Photoshop绘制网页页基本布布局为织网做做准备——网页模板板切片Photoshop为加速网网页设计计工作，，准备了了“切片片”工具具，用于于切割和和快速生生成小幅幅的网页页素材图图片。切片时，，应按照照图片最小化原原则，尽量切切割小块块的图片片，同时时兼顾大大型的区区域尺寸寸，不破破坏整体体感。切背景图图时要充充分利用用平铺特特性，切切割出最最小图形形：切片工具具的使用用切片工具具：对网页模模板进行行切片，，并自动动对齐边边角处切切片位置置切片选择择工具：：选择单个个切片，，并对切切片边缘缘与位置置进行微微调技巧：微微调有时时因PotoShop的自动吸吸附功能能而失败败时，可可考虑重重新切对对应区域域或按住住Ctrl进行大幅幅度拉动动后，调调回合适适的位置置。电子作业业4网页模板板临摹要求：1每人按学学号规律