信息网络技术与网络出版发行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+退格、油漆桶•用钢笔工具绘制一个苹果的图形，并绘制高光部分文字面板的使用打开字体面板大小、行间距、比例缩放对齐方式修饰：斜体、加粗行高、字间距安装更多的字体，可以加速你的工作下载站点地址：://font.chinaz.com/20强大的选区功能选区功能是使用Photoshop创作图像的重要法宝，使用它，可以方便的修改任意图形区域。创作出千变万化的PS图形。选区功能基本选择：圆形、矩形、像素条【描边】特殊选择：魔术棒、磁性魔术棒选区菜单及其菜单快捷键Ctrl+ACtrl+DCtrl+Shift+DCtrl+Shift+I变换选区：羽化、收缩…Ctrl+T绘制新月、米老鼠头像外形范例：制作一张简单的名片图章工具的使用范例：修改人物的面部瑕疵瘦脸瘦身——液化滤镜画笔、渐变画笔载入画笔与选区配合的画笔自定义画笔（范例：制作MSL水印图章）自定义图案渐变载入渐变调整渐变（用金属立体感渐变实现金属圆柱体）渐变类型综合训练：绘制口袋妖怪头像（3X皮卡丘）定义背景网点图案背景圆、阴影选区描边钢笔绘画(填充、描边)电子作业3：1.模仿课堂示范设计自己的名片：410*250像素2.绘制两张300*300像素大小的口袋妖怪图3.不准抄袭同学作品作业详细信息在按照学号最后两位数字选择：23号同学选2X与X3两张图。基础绘制部分End…Photoshop速成-高级应用部分授课教师：刘爽样式面板定义文字样式阴影文字金属文字用样式快速定义常用网页布局面板斜纹面板圆角面板动作面板饱和度对比度调整动作新建950*600空白图像动作通道与遮罩使用遮罩融合照片立体视觉原理光照、投影与反射网页设计中的常见立体效果多层次阴影镜面倒影网页中的按钮制作1平面立体按钮制作网页中的按钮制作2黑色质感开关按钮制作（搜索关键字有完整教程）搜集素材、加速创作速度可搜集的素材：画笔渐变样式滤镜（KPT5（含3.0）KPT7、EyesCandy、Xenofex）像素图库矢量图库可借鉴的资源：已设计好的网页与网页模板PSD或CDR格式的广告源文件如何绘制网页布局与网页模板授课教师：刘爽常见布局及其网站类型中心型布局：个人网站首页、企业网站欢迎页面上下型布局：信息内容页、通知公告“厂”型布局：企业站点、博客、分类浏览页“门”型布局：综合信息站点，大型门户站点、政府机构网站创意布局：企业形象展示站点、网络单页广告Photoshop绘制网页基本布局为织网做准备——网页模板切片Photoshop为加速网页设计工作，准备了“切片”工具，用于切割和快速生成小幅的网页素材图片。切片时，应按照图片最小化原则，尽量切割小块的图片，同时兼顾大型的区域尺寸，不破坏整体感。切背景图时要充分利用平铺特性，切割出最小图形：切片工具的使用切片工具：对网页模板进行切片，并自动对齐边角处切片位置切片选择工具：选择单个切片，并对切片边缘与位置进行微调技巧：微调有时因PotoShop的自动吸附功能而失败时，可考虑重新切对应区域或按住Ctrl进行大幅度拉动后，调回合适的位置。电子作业4网页模板临摹要求：1每人按学号规律选择两幅临摹（1号做01+022号做02+033号做03+01，依次类推）2将PSD源文件压缩为Rar格式发送3PSD文件必须保留分层格式4文字必须保留T矢量格式，不允许像素化5严格按照940-980像素宽度设置，高度按实际情况增减，单位与尺寸不准确，不计作业成绩。