《信息网络技术与网络出版发行课件》由会员分享，可在线阅读，更多相关《信息网络技术与网络出版发行课件（32页珍藏版）》请在金锄头文库上搜索。
1、第四章第四章 Photoshop网页图形设计网页图形设计速成速成授课教师：刘爽授课教师：刘爽授课教师：刘爽授课教师：刘爽关于教材章节、自习作业关于教材章节、自习作业l l教材第一、第二章为自学章节。内容通俗易懂，请教材第一、第二章为自学章节。内容通俗易懂，请教材第一、第二章为自学章节。内容通俗易懂，请教材第一、第二章为自学章节。内容通俗易懂，请同学们自学，并做好这两章课后习题后，发送电子同学们自学，并做好这两章课后习题后，发送电子同学们自学，并做好这两章课后习题后，发送电子同学们自学，并做好这两章课后习题后，发送电子作业题目与答案内容到作业题目与答案内容到作业题目与答案内容到作业题目与答案内容
2、到目录目录l l基础知识位图与矢量图基础知识位图与矢量图基础知识位图与矢量图基础知识位图与矢量图区分矢量图与位图（像素图形）区分矢量图与位图（像素图形）区分矢量图与位图（像素图形）区分矢量图与位图（像素图形）图像菜单图像菜单图像菜单图像菜单- -色彩模式色彩模式色彩模式色彩模式图像菜单图像菜单图像菜单图像菜单- -调整大小调整大小调整大小调整大小图像菜单图像菜单图像菜单图像菜单- -调整调整调整调整l l绘图基本方法绘图基本方法绘图基本方法绘图基本方法如何开始工作如何开始工作如何开始工作如何开始工作图层与图层菜单图层与图层菜单图层与图层菜单图层与图层菜单绘图基本工具绘图基本工具绘图基本工具绘图
3、基本工具文字面板的使用文字面板的使用文字面板的使用文字面板的使用强大的选区功能强大的选区功能强大的选区功能强大的选区功能图章工具的使用图章工具的使用图章工具的使用图章工具的使用画笔与渐变画笔与渐变画笔与渐变画笔与渐变位图与矢量图位图与矢量图l l位图也称为点阵图像或绘制图像，是由称作像素位图也称为点阵图像或绘制图像，是由称作像素位图也称为点阵图像或绘制图像，是由称作像素位图也称为点阵图像或绘制图像，是由称作像素（PixelPixel）的单个点组成的。这些点可以进行不同的）的单个点组成的。这些点可以进行不同的）的单个点组成的。这些点可以进行不同的）的单个点组成的。这些点可以进行不同的排列和染色以
4、构成图样。排列和染色以构成图样。排列和染色以构成图样。排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方当放大位图时，可以看见赖以构成整个图像的无数单个方当放大位图时，可以看见赖以构成整个图像的无数单个方当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和块。扩大位图尺寸的效果是增大单个像素，从而使线条和块。扩大位图尺寸的效果是增大单个像素，从而使线条和块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。形状显得参差不齐。形状显得参差不齐。形状显得参差不齐。l l矢量图形是计算机图形学中用点、直线或者多边形矢
5、量图形是计算机图形学中用点、直线或者多边形矢量图形是计算机图形学中用点、直线或者多边形矢量图形是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。矢量图形与等基于数学方程的几何图元表示图像。矢量图形与等基于数学方程的几何图元表示图像。矢量图形与等基于数学方程的几何图元表示图像。矢量图形与位图使用像素表示图像的方法不同。位图使用像素表示图像的方法不同。位图使用像素表示图像的方法不同。位图使用像素表示图像的方法不同。l l矢量图矢量图矢量图矢量图( (向量图向量图向量图向量图) )与位图与位图与位图与位图( (栅格图栅格图栅格图栅格图) )区别区别区别区别位图使用像素点逐一描绘图
6、像，放大时有马赛克现象或出位图使用像素点逐一描绘图像，放大时有马赛克现象或出位图使用像素点逐一描绘图像，放大时有马赛克现象或出位图使用像素点逐一描绘图像，放大时有马赛克现象或出现色彩边缘模糊现象。而矢量图不会出现马赛克现象。现色彩边缘模糊现象。而矢量图不会出现马赛克现象。现色彩边缘模糊现象。而矢量图不会出现马赛克现象。现色彩边缘模糊现象。而矢量图不会出现马赛克现象。矢量图常用于印刷，适合放大显示的图案相对简单的图像，矢量图常用于印刷，适合放大显示的图案相对简单的图像，矢量图常用于印刷，适合放大显示的图案相对简单的图像，矢量图常用于印刷，适合放大显示的图案相对简单的图像，位图适合摄影出版和中小幅
7、面印刷。位图适合摄影出版和中小幅面印刷。位图适合摄影出版和中小幅面印刷。位图适合摄影出版和中小幅面印刷。区分矢量图与位图（像素图形）区分矢量图与位图（像素图形）l l放大后，矢量图不会出现马赛克失真放大后，矢量图不会出现马赛克失真放大后，矢量图不会出现马赛克失真放大后，矢量图不会出现马赛克失真l l使用使用使用使用FlashFlash、 Corel DRAWCorel DRAW、 IllustratorIllustrator等软件绘制的图形都是等软件绘制的图形都是等软件绘制的图形都是等软件绘制的图形都是矢量图矢量图矢量图矢量图常见矢量图格式：WMF EMF EPS CDR AI常见位图格式：J
8、PG GIF BMP PNG TGA PSD图像菜单图像菜单- -色彩模式色彩模式l l如何浏览图像：放大镜、导航器、空格如何浏览图像：放大镜、导航器、空格如何浏览图像：放大镜、导航器、空格如何浏览图像：放大镜、导航器、空格l l色彩模式色彩模式色彩模式色彩模式 位图（黑白图）位图（黑白图）位图（黑白图）位图（黑白图）灰度（仿黑白照效果）灰度（仿黑白照效果）灰度（仿黑白照效果）灰度（仿黑白照效果）索引色（索引色（索引色（索引色（GIFGIF图像色彩模式）图像色彩模式）图像色彩模式）图像色彩模式）RGBRGB（JPG PNGJPG PNG图像色彩模式）图像色彩模式）图像色彩模式）图像色彩模式）C
9、MYKCMYK（印刷色、色域比（印刷色、色域比（印刷色、色域比（印刷色、色域比RGBRGB 小小小小CDR AICDR AI等文件常用）等文件常用）等文件常用）等文件常用）GIF JPG PNG是最常见的网页位图图像格式是最常见的网页位图图像格式图像菜单图像菜单- -调整大小调整大小l l调整画布大小调整画布大小调整画布大小调整画布大小注意对齐九宫格对齐方式的使用注意对齐九宫格对齐方式的使用注意对齐九宫格对齐方式的使用注意对齐九宫格对齐方式的使用l l调整图像大小调整图像大小调整图像大小调整图像大小变为变为变为变为48*4848*48大小的大小的大小的大小的PNGPNG图像图像图像图像图像菜单
10、图像菜单- -调整调整l l调整调整调整调整色阶调整色阶调整色阶调整色阶调整曲线调整曲线调整曲线调整曲线调整色相调整（老照片）色相调整（老照片）色相调整（老照片）色相调整（老照片）去色（黑白照）去色（黑白照）去色（黑白照）去色（黑白照）如何开始工作如何开始工作l l认识认识认识认识PhotoshopPhotoshop绘图界面绘图界面绘图界面绘图界面工具栏、图层、通道、路径工具栏、图层、通道、路径工具栏、图层、通道、路径工具栏、图层、通道、路径空白工作区背景空白工作区背景空白工作区背景空白工作区背景: :双击、双击、双击、双击、Ctrl+Ctrl+双击双击双击双击l l新建：窗口画布、单位与分辨
11、率新建：窗口画布、单位与分辨率新建：窗口画布、单位与分辨率新建：窗口画布、单位与分辨率像素单位设置（像素单位设置（像素单位设置（像素单位设置（编辑编辑编辑编辑- -预设预设预设预设- -单位与标尺单位与标尺单位与标尺单位与标尺）RGBRGB色彩模式色彩模式色彩模式色彩模式用分辨率计算打印用图形尺寸用分辨率计算打印用图形尺寸用分辨率计算打印用图形尺寸用分辨率计算打印用图形尺寸网页设计时使用的画布尺寸大小网页设计时使用的画布尺寸大小网页设计时使用的画布尺寸大小网页设计时使用的画布尺寸大小l l950*700 950*600950*700 950*600图层与图层菜单图层与图层菜单l l图层图层图层
12、图层面板菜单面板菜单面板菜单面板菜单移动图层：快一点，精确一点移动图层：快一点，精确一点移动图层：快一点，精确一点移动图层：快一点，精确一点l l范例：用移动工具做立体字范例：用移动工具做立体字范例：用移动工具做立体字范例：用移动工具做立体字l l关键：关键：关键：关键：复制和填充图层色块复制和填充图层色块复制和填充图层色块复制和填充图层色块AltAlt快捷键与光标移动键的配合使用快捷键与光标移动键的配合使用快捷键与光标移动键的配合使用快捷键与光标移动键的配合使用绘图基本工具绘图基本工具l l钢笔工具、图形工具、绘制路径、转换路径钢笔工具、图形工具、绘制路径、转换路径钢笔工具、图形工具、绘制路
13、径、转换路径钢笔工具、图形工具、绘制路径、转换路径l l拾色器与吸管工具拾色器与吸管工具拾色器与吸管工具拾色器与吸管工具如何上色：（先选择区域）如何上色：（先选择区域）如何上色：（先选择区域）如何上色：（先选择区域）Alt+Alt+退格、退格、退格、退格、Ctrl+Ctrl+退格、油漆桶退格、油漆桶退格、油漆桶退格、油漆桶用钢笔工具绘制一个苹果的图形，并绘制高光部分用钢笔工具绘制一个苹果的图形，并绘制高光部分文字面板的使用文字面板的使用l l打开字体面板打开字体面板打开字体面板打开字体面板大小、行间距、比例缩放大小、行间距、比例缩放大小、行间距、比例缩放大小、行间距、比例缩放对齐方式对齐方式对
14、齐方式对齐方式修饰：斜体、加粗修饰：斜体、加粗修饰：斜体、加粗修饰：斜体、加粗行高、字间距行高、字间距行高、字间距行高、字间距l l安装更多的字体，可以加速你的工作安装更多的字体，可以加速你的工作安装更多的字体，可以加速你的工作安装更多的字体，可以加速你的工作下载站点地址：下载站点地址：下载站点地址：下载站点地址：l l 20强大的选区功能强大的选区功能l l选区功能是使用选区功能是使用选区功能是使用选区功能是使用PhotoshopPhotoshop创作图像的重要法宝，创作图像的重要法宝，创作图像的重要法宝，创作图像的重要法宝，使用它，可以方便的修改任意图形区域。创作出千使用它，可以方便的修改
15、任意图形区域。创作出千使用它，可以方便的修改任意图形区域。创作出千使用它，可以方便的修改任意图形区域。创作出千变万化的变万化的变万化的变万化的PSPS图形。图形。图形。图形。l l选区功能选区功能选区功能选区功能基本选择：圆形、矩形、像素条基本选择：圆形、矩形、像素条基本选择：圆形、矩形、像素条基本选择：圆形、矩形、像素条【描边描边描边描边】特殊选择：魔术棒、磁性魔术棒特殊选择：魔术棒、磁性魔术棒特殊选择：魔术棒、磁性魔术棒特殊选择：魔术棒、磁性魔术棒选区菜单及其菜单快捷键选区菜单及其菜单快捷键选区菜单及其菜单快捷键选区菜单及其菜单快捷键l lCtrl+A Ctrl+D Ctrl+Shift+
16、D Ctrl+Shift+ICtrl+A Ctrl+D Ctrl+Shift+D Ctrl+Shift+I变换选区：羽化、收缩变换选区：羽化、收缩变换选区：羽化、收缩变换选区：羽化、收缩 Ctrl+T Ctrl+Tl l绘制新月、米老鼠头像外形绘制新月、米老鼠头像外形绘制新月、米老鼠头像外形绘制新月、米老鼠头像外形范例：制作一张简单的名片范例：制作一张简单的名片图章工具的使用图章工具的使用l l范例：修改人物的面部瑕疵范例：修改人物的面部瑕疵范例：修改人物的面部瑕疵范例：修改人物的面部瑕疵瘦瘦脸 瘦身瘦身液化液化滤镜画笔、渐变画笔、渐变l l画笔画笔画笔画笔载入画笔载入画笔载入画笔载入画笔与选
17、区配合的画笔与选区配合的画笔与选区配合的画笔与选区配合的画笔自定义画笔（范例：制作自定义画笔（范例：制作自定义画笔（范例：制作自定义画笔（范例：制作MSLMSL水印图章）水印图章）水印图章）水印图章）l l自定义图案自定义图案自定义图案自定义图案l l渐变渐变渐变渐变载入渐变载入渐变载入渐变载入渐变调整渐变（用金属立体感渐变实现金属圆柱体）调整渐变（用金属立体感渐变实现金属圆柱体）调整渐变（用金属立体感渐变实现金属圆柱体）调整渐变（用金属立体感渐变实现金属圆柱体）渐变类型渐变类型渐变类型渐变类型综合训练：综合训练：l l绘制口袋妖怪头像绘制口袋妖怪头像绘制口袋妖怪头像绘制口袋妖怪头像 （3X3
18、X皮卡丘）皮卡丘）皮卡丘）皮卡丘）定义背景网点图案定义背景网点图案定义背景网点图案定义背景网点图案背景圆、阴影背景圆、阴影背景圆、阴影背景圆、阴影选区描边选区描边选区描边选区描边钢笔绘画钢笔绘画钢笔绘画钢笔绘画( (填充、描边填充、描边填充、描边填充、描边) )电子作业电子作业3 3：1.1.1.1.模仿课堂示范设计自己的名片：模仿课堂示范设计自己的名片：模仿课堂示范设计自己的名片：模仿课堂示范设计自己的名片：410*250410*250像素像素像素像素2.2.2.2.绘制两张绘制两张绘制两张绘制两张300*300300*300像素大小的口袋妖怪图像素大小的口袋妖怪图像素大小的口袋妖怪图像素大
19、小的口袋妖怪图3.3.3.3.不准抄袭同学作品不准抄袭同学作品不准抄袭同学作品不准抄袭同学作品 作业详细信息在作业详细信息在作业详细信息在作业详细信息在查阅查阅查阅查阅l l按照学号最后两位数字选择：按照学号最后两位数字选择：按照学号最后两位数字选择：按照学号最后两位数字选择：2323号同学选号同学选号同学选号同学选2X2X与与与与X3X3两张图。两张图。两张图。两张图。基础绘制部分基础绘制部分 EndPhotoshop速成速成-高级应用部分高级应用部分授课教师：刘爽授课教师：刘爽授课教师：刘爽授课教师：刘爽样式面板样式面板l l定义文字样式定义文字样式定义文字样式定义文字样式阴影文字阴影文字
20、阴影文字阴影文字金属文字金属文字金属文字金属文字l l用样式快速定义常用网页布局面板用样式快速定义常用网页布局面板用样式快速定义常用网页布局面板用样式快速定义常用网页布局面板斜纹面板斜纹面板斜纹面板斜纹面板圆角面板圆角面板圆角面板圆角面板动作面板动作面板l l饱和度对比度调整动作饱和度对比度调整动作饱和度对比度调整动作饱和度对比度调整动作l l新建新建新建新建950*600950*600空白图像动作空白图像动作空白图像动作空白图像动作通道与遮罩通道与遮罩l l使用遮罩融合照片使用遮罩融合照片使用遮罩融合照片使用遮罩融合照片立体视觉原理立体视觉原理l l光照、投影与反射光照、投影与反射光照、投影
21、与反射光照、投影与反射网页设计中的常见立体效果网页设计中的常见立体效果l l多层次阴影多层次阴影多层次阴影多层次阴影l l镜面倒影镜面倒影镜面倒影镜面倒影网页中的按钮制作网页中的按钮制作1 1l l平面立体按钮制作平面立体按钮制作平面立体按钮制作平面立体按钮制作网页中的按钮制作网页中的按钮制作2 2l l黑色质感开关按钮制作黑色质感开关按钮制作黑色质感开关按钮制作黑色质感开关按钮制作（搜索关键字（搜索关键字（搜索关键字（搜索关键字 有完整教程）有完整教程）有完整教程）有完整教程）搜集素材、加速创作速度搜集素材、加速创作速度l l可搜集的素材：可搜集的素材：可搜集的素材：可搜集的素材：画笔画笔画
22、笔画笔渐变渐变渐变渐变样式样式样式样式滤镜（滤镜（滤镜（滤镜（KPT5KPT5（含）（含）（含）（含）KPT7KPT7、Eyes CandyEyes Candy、XenofexXenofex）像素图库像素图库像素图库像素图库矢量图库矢量图库矢量图库矢量图库l l可借鉴的资源：可借鉴的资源：可借鉴的资源：可借鉴的资源：已设计好的网页与网页模板已设计好的网页与网页模板已设计好的网页与网页模板已设计好的网页与网页模板PSDPSDPSDPSD或或或或CDRCDR格式的广告源文件格式的广告源文件格式的广告源文件格式的广告源文件如何绘制网页布局与网页模板如何绘制网页布局与网页模板授课教师：刘爽授课教师：刘
23、爽授课教师：刘爽授课教师：刘爽常见布局及其网站类型常见布局及其网站类型l l中心型布局：个人网站首页、企业网站欢迎页面中心型布局：个人网站首页、企业网站欢迎页面中心型布局：个人网站首页、企业网站欢迎页面中心型布局：个人网站首页、企业网站欢迎页面l l上下型布局：信息内容页、通知公告上下型布局：信息内容页、通知公告上下型布局：信息内容页、通知公告上下型布局：信息内容页、通知公告l l“ “厂厂厂厂”型布局：企业站点、博客、分类浏览页型布局：企业站点、博客、分类浏览页型布局：企业站点、博客、分类浏览页型布局：企业站点、博客、分类浏览页l l“门门门门”型布局：综合信息站点，大型门户站点、政型布局：
24、综合信息站点，大型门户站点、政型布局：综合信息站点，大型门户站点、政型布局：综合信息站点，大型门户站点、政府机构网站府机构网站府机构网站府机构网站l l创意布局：企业形象展示站点、网络单页广告创意布局：企业形象展示站点、网络单页广告创意布局：企业形象展示站点、网络单页广告创意布局：企业形象展示站点、网络单页广告PhotoshopPhotoshop绘制网页基本布局绘制网页基本布局为织网做准备为织网做准备网页模板切片网页模板切片l lPhotoshopPhotoshop为加速网页设计工作，准备了为加速网页设计工作，准备了为加速网页设计工作，准备了为加速网页设计工作，准备了“切片切片切片切片”工具，
25、用于切割和快速生成小幅的网页素材图片。工具，用于切割和快速生成小幅的网页素材图片。工具，用于切割和快速生成小幅的网页素材图片。工具，用于切割和快速生成小幅的网页素材图片。l l切片时，应按照图片切片时，应按照图片切片时，应按照图片切片时，应按照图片最小化原则最小化原则最小化原则最小化原则，尽量切割小块的，尽量切割小块的，尽量切割小块的，尽量切割小块的图片，同时兼顾大型的区域尺寸，不破坏整体感。图片，同时兼顾大型的区域尺寸，不破坏整体感。图片，同时兼顾大型的区域尺寸，不破坏整体感。图片，同时兼顾大型的区域尺寸，不破坏整体感。l l切背景图时要充分利用平铺特性，切割出最小图形切背景图时要充分利用平铺特性，切割出最小图形切背景图时要充分利用平铺特性，切割出最小图形切背景图时要充分利用平铺特性，切割出最小图形：
