第15章 处理 Web 图形与切片教学课件 Photoshop CC平面设计.pptx

《第15章 处理 Web 图形与切片教学课件 Photoshop CC平面设计.pptx》由会员分享，可在线阅读，更多相关《第15章 处理 Web 图形与切片教学课件 Photoshop CC平面设计.pptx（28页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第15 章 处理 Web 图形与切片教学 课件 Photoshop CC平面设计处理 Web 图形与切片Photoshop CC平面设计核心技能一本通（移动学习版）1515.1 Web图形15.2切片15.315.4编辑切片画板15.5导出图层与文件15.6综合实训：制作家居网站首页15.1.1 Web图形与安全色Web图形是指为了用于网页传输而经过优化后的图像，通常为JPG、GIF、SVG、PNG等格式。当用户通过其他途径展示自己制作的图像时，可能会因为计算机系统设置、浏览器等原因呈现出不同的效果，造成色差。为了避免这种情况，在制作Web图形时用户应优先使用Web安全色，它是浏览器使用的21

2、6种颜色，当在8位屏幕上显示颜色时，浏览器会将图像中所有颜色更改成Web安全色。Web安全色是浏览器使用的216种颜色。当在8位屏幕上显示颜色时，浏览器会将图像中所有颜色更改成Web安全色。当设计人员把在自己计算机上制作的图像通过其他途径进行展示时，图像可能会由于计算机系统设置、浏览器等原因而呈现出不同的效果，造成颜色的差异。15.1.2 使用Web安全色将非Web安全色转换为Web安全色01在拾色器中选择Web安全色02在“颜色”面板中设置Web安全色0315.1 Web图形15.2切片15.315.4编辑切片画板15.5导出图层与文件15.6综合实训：制作家居网站首页15.2.1 切片类型

3、Photoshop CC中有两种切片类型，即用户切片和自动切片。用户切片是指用户通过切片工具手动创建的切片；自动切片是指Photoshop自动生成的切片。手动创建新切片或编辑切片时，图像中都会生成自动切片来占据图像区域，自动切片可以填充图像中的用户切片或图层切片中未定义的空间。15.2.2 创建切片B A使用工具创建切片通过菜单命令创建切片“切片工具”属性栏15.1 Web图形15.2切片15.315.4编辑切片画板15.5导出图层与文件15.6综合实训：制作家居网站首页15.3.1 选择、移动与调整切片在完成切片绘制后，设计人员可使用“切片选择工具”对切片进行选择，再进行进一步移动或调整。“

4、切片选择工具”主要用于选择切片、调整切片堆叠顺序、对齐与分布切片等。15.3.2 划分与组合切片“切片选择工具”属性栏划分切片组合切片15.3.3 转换切片 15.3.4 设置切片选项01通过按钮转换02通过命令转换将自动切片转换为用户切片后，可以进行切片选项的设置。在“切片选择工具”的工具属性栏中单击 按钮，或者在需要设置的切片上单击鼠标右键，在弹出的快捷菜单中选择【编辑切片选项】命令，即可打开“切片选项”对话框。15.3.5 复制切片 15.3.6 删除切片使用“切片选择工具”选择切片，再按【Alt】键，当鼠标指针变为 形状时单击并拖动鼠标，即可复制并粘贴切片。使用快捷键删除A使用命令删除

5、B使用鼠标右键删除C15.3.7 优化与输出切片网页中图片的格式一般为GIF、JPEG或PNG格式，设计人员可根据不同的需求对切片后的图像进行优化和输出操作。存储为W eb所用格式W eb图形的输出设置W eb图形优化选项15.1 Web图形15.2切片15.315.4编辑切片画板15.5导出图层与文件15.6综合实训：制作家居网站首页15.4.1 画板的用途画板可以在原有画布之外创建出新的画布。画板可以将任何所含元素的内容剪切到其边界中，它相当于一种特殊类型的图层组。画板中元素的层次结构显示在“图层”面板中，其中还有图层和图层组，一个画板下可以包含图层和图层组，但不能包含其他画板。从外观上看

6、，画板可充当文档中的单个画布。文档中未包含在画板中的任何图层会在“图层”顶部进行编组，并保持未被任何画板剪切的状态。15.4.2 创建画板 15.4.3 调整画板位置与大小在“图层”面板中选择需要调整的画板后，选择“画板工具”，在图像编辑区中单击画板并拖动鼠标，可自由移动画板。选中画板，选择【窗口】/【属性】菜单命令，打开“画板”属性面板，在其中设置“X”和“Y”参数调整画板的水平位置和垂直位置，设置“W”和“H”参数修改画板的宽度和高度。在图像文件中添加画板新建包含画板的图像文件030115.4.4 删除画板 15.4.5 导出画板为单独的文件在“图层”面板中选择画板后，选择【文件】/【导出

7、】/【画板至文件】菜单命令，打开“画板至文件”对话框，在其中进行相应的设置后，单击 按钮，即可导出画板为单独的文件。画板可以像图层组一样被解散或删除。在“图层”面板中选择需要删除的画板后，可以通过以下方式将其删除。BA删除画板及其包含的内容仅删除画板15.4.6 导出画板为PDF文档在“图层”面板中选择画板后，选择【文件】/【导出】/【将画板导出到PDF】菜单命令，打开“将画板导出到PDF”对话框，在其中进行相应的设置后，单击 按钮，即可导出画板为PDF文档。15.1 Web图形15.2切片15.315.4编辑切片画板15.5导出图层与文件15.6综合实训：制作家居网站首页15.5.1 从PS

8、D文件中生成图像资源从PSD文件中生成图像资源对多设备Web设计来说尤其有用。JPEG、PNG或GIF图像资源可以从PSD文件中生成，将受支持的图像格式扩展添加到图层名称或图层组名称时，会自动生成资源。指定品质大小和参数构建复杂图层名称从一个图层或图层组生成多个资源15.5.2 导出并微调图像资源 15.5.3 快速导出PNGPNG文件格式具有体积小、传输速度快、支持透明背景的特点，并且该格式采用无损压缩方式，不会降低导出后的图像质量。选择【文件】/【导出】/【快速导出为PNG】菜单命令或【图层】/【快速导出为PNG】菜单命令，可将图像文件或其中所有的画板导出为PNG文件。在将PSD文件、画板

9、、图层和图层组导出为图像资源时，如果需要微调设置，可以选择【文件】/【导出】/【导出为】菜单命令，打开“导出为”对话框。15.5.4 复制CSS 15.5.5 复制SVGSVG是一种用XML定义的语言，它用来描述矢量图形，是可交互的和动态的。SVG图形在放大或改变尺寸的情况下，其图形质量不会有所损失。复制SVG是指直接将复杂的图形生成代码显示，便于添加到HTML中通过浏览器来观看。选择【图层】/【复制SVG】菜单命令，或者在“图层”面板中使用鼠标右键单击图层，在弹出的快捷菜单中选择【复制SVG】命令，即可复制SVG。复制CSS是指从形状或文字图层中生成级联样式表（CSS）属性。这是一种用于表现

10、HTML（标准通用标记语言的应用）或XML（标准通用标记语言的子集）等文件样式的计算机语言，它会捕获图像的大小、位置、填充颜色、描边颜色和投影等参数。选择【图层】/【复制CSS】菜单命令，或者在“图层”面板中使用鼠标右键单击图层，在弹出的快捷菜单中选择【复制CSS】命令，即可复制CSS。15.1 Web图形15.2切片15.315.4编辑切片画板15.5导出图层与文件15.6综合实训：制作家居网站首页制作家居网站首页综合实训实训要求“梦想家”家居网站是一个时尚家居平台，其倡导创意家居设计，目标用户为二线及二线以上城市的众多年轻人，这些用户往往习惯享受快捷、方便的服务。现需制作“梦想家”家居网站

11、的首页界面，要求不但要体现家居网站的特色，还要展现展品的美观性和实用性，首页整体效果应简洁、美观，符合年轻人的审美喜好。尺寸要求为1920像素3200像素。实训思路（1）本例家居网站首页中的文案主要需对企业相关信息进行介绍，如公司介绍、业务介绍、精选展品介绍等，字体风格应干净、利落。（2）设计时可采用顶部Banner+栅格布局，将首页界面分为导航、Banner、相关版块和页尾4个部分，将Logo置于导航栏，然后对各个部分的内容分别进行设计。制作家居网站首页综合实训实训思路（3）家居网站主要针对年轻用户，其色彩以灰色为主色，以蓝色和黄色为辅助色，整个效果简洁、自然。（4）结合本章所学的切片、画板

12、、文件的导出等相关知识，在符合网页尺寸的画板中进行制作，并导出文件，生成Web图像切片。01新建Photoshop预设的“网页-大尺寸”文档，设置“名称”为“家居网站首页界面”，显示标尺并添加参考线，划分出导航栏版块。使用“矩形工具”在图像编辑区顶部绘制一个灰色矩形和一个白色矩形，可对白色矩形添加“投影”图层样式。置入“家居网站Logo.png”素材文件，将其拖动到白色矩形上，使用“横排文字工具”输入文字，设置字体和颜色，调整其大小和位置。然后在“梦想家家居”文字下方绘制灰色矩形作为装饰。打开“图像素材.psd”素材文件，将其中的图标拖到“家居网站首页界面.psd”图像文件中的右上方，输入“介

13、绍.txt”素材文件中对应的内容，设置字体和颜色，调整其大小和位置。0203制作要点04使用“矩形工具”绘制1920像素800像素的矩形，作为Banner版块。打开“图像素材.psd”素材文件，将素材图片拖动到绘制的矩形中，创建剪贴蒙版，复制矩形并将其移动到素材图片的上方，然后设置复制后矩形的不透明度为“40%”，创建剪贴蒙版。输入“介绍.txt”素材文件中对应的内容，设置字体和颜色，调整其大小和位置。在“点击查看”文字下方绘制灰色矩形作为按钮。若发现画板尺寸不足，可使用“画板工具”加长画板尺寸。准备制作“精选展现”版块，分别绘制1300像素700像素、1100像素700像素、210像素700

14、像素的矩形。将“图像素材.psd”素材文件中的素材图片拖动到矩形上方，调整大小和位置，创建剪贴蒙版。输入“ELEGANT ART”文字，设置字体和颜色，调整其大小和位置，使其穿插在版面中作为装饰，输入“介绍.txt”素材文件中对应的内容，设置字体和颜色，调整其大小和位置。050607制作风景明信片综合实训制作要点08在图像编辑区底部绘制1920像素500像素的矩形，作为页尾版块。输入“介绍.txt”素材文件中对应的内容，设置字体和颜色，调整其大小和位置。再使用“直线工具”在文字之间绘制4条竖线。拖动参考线划分出导航栏、Banner、“精选展现”版块和页尾，基于参考线创建切片。隐藏参考线，使用“

15、切片工具”将导航栏区域垂直划分为4个切片，将Banner区域垂直划分为3个切片。使用“划分切片”命令，对“精选展现”版块和页尾进行合理的均匀划分。使用“存储为Web所用格式”命令将切片存储为JPEG格式文件，生成“家居网站首页界面.html”网页和“images”文件夹。将导航栏、Banner、“精选展现”和页尾版块的所有图层分别编为“导航”“Banner”“精选展现”“页尾”图层组。使用“图像资源”命令，添加文件扩展名，将每个图层组转换为JPG图像资源，将生成“生成图像资源-assets”文件夹，然后按【Ctrl+S】组合键保存文件。制作风景明信片综合实训制作要点09101112谢 谢 观 看