Photoshop-UI设计基础教程-第7章-切片与输出界面

切片与输出界面PhotoshopUI设计基础教程第7章切片基础7.1界面切片7.2界面输出7.3课堂实训——切片并输出大米网首页7.47.1.1切片的作用切片是UI设计中不可或缺的一部分，对UI设计效果进行切片操作，能提升图片高保真（更接近真实的视觉感受）效果、降低工作量和文件量，提高页面加载速度。高保真效果降低工作量降低文件量对图像进行切片能够满足设计人员对设计效果图的高保真和还原需求。对图像进行切片能够降低整个效果文件的文件量，提升用户浏览时的加载速度。对图像进行切片能够避免因切片不规范而产生的不必要的工作量。7.1.2切片的要点切片尺寸应为双数避免遗漏切片图标是切片输出中至关重要的部分。由于机型的不同，其对应的屏幕分辨率也不相同，因此图标的大小需要针对机型进行配置。图标切片应考虑手机适配问题，根据标准尺寸输出尽量降低图片文件的文件量在切片过程中，要注重切片的完整性，避免遗漏切片。完成切片后，还需要对切片图片进行资源输出，但输出的图片往往文件量较大，不利于用户加载，因此要尽量压缩切片图片的文件量，使其更加便于浏览。智能手机的屏幕大小都是双数值，因此切片尺寸应为双数，以保证切片效果能高清显示。7.1.3规则的要点完成切片后，还需要对切片进行命名，便于后续查看和使用，不同类型或功能的界面切片其命名规则不同，如上图所示。7.1.3规则的要点在命名过程中，同一个界面中可能存在相同类型的切片，为了更好地区分各个切片，还需要在相同类型的基础上，对切片进行更加精确的命名。例如，对于一张图标切片，需要对该图标是什么、在哪里、第几张、状态等进行介绍，以帮助后期查找与选择切片图像，如左图所示。切片基础7.1界面切片7.2界面输出7.3课堂实训——切片并输出大米网首页7.4家居网页界面切片7.2.1课堂案例某家居网站制作了新的网页页面，现需要为该网页界面进行切片，在切片时要求将Banner、热卖商品、精选产品等单独展示，并对切片后的内容进行命名，方便后期调用，参考效果如图所示。创建切片、编辑切片。知识要点：案例说明：添加参考线01家居网页界面切片首页界面7.2.1课堂案例开始切片02编辑切片选项03划分切片047.2.2创建切片正常基于参考线的切片固定大小固定长宽比在Photoshop中可以使用“切片工具”创建切片，创建切片的方法与创建选区的方法相同。选择“切片工具”后，按住鼠标左键在图像上拖曳，即可完成切片的创建。“切片工具”的工具属性栏如右图所示。选择该选项后，可以通过拖曳鼠标来确定切片的大小。选择该选项后，可在“度”“高度”文本框中设置切片的宽高比。选择该选项后，可在“宽度”“高度”文本框中设置切片的固定大小。单击“基于参考线的切片”按钮，将基于参考线自动进行切片。7.2.3编辑切片“切片选择工具”主要用于编辑切片后的效果，通常在工具属性栏中完成，如下图所示。1．了解切片选择工具7.2.3编辑切片1．了解切片选择工具•

调整切片堆叠顺序按钮组：创建切片后，最后创建的切片将处于堆叠顺序的最高层。•

提升：单击“提升”按钮可以将所选的自动切片或图层切片提升为用户切片。•

划分：单击“划分”按钮打开“划分切片”对话框，在该对话框中可对切片进行划分。•

对齐与分布切片：选择多个切片后，可单击相应按钮来对齐或分布切片。•

隐藏自动切片：单击“隐藏自动切片”按钮将隐藏自动切片。“切片选择工具”的工具属性栏中各选项的作用如下。7.2.3编辑切片2．选择、移动、复制、组合、删除和锁定切片•

选择：选择“切片选择工具”，在图像中单击需要选择的切片，按住【Shift】键的同时使用“切片选择工具”单击切片，可选择多个切片。•

移动：选择切片后，按住鼠标进行拖曳，即可移动所选切片。•

复制：先使用“切片选择工具”选择切片，再按住【Alt】键，当鼠标指针变为形状时单击并拖动鼠标，即可复制切片。•

组合：组合切片可以通过连接切片的边缘来创建矩形切片，在创建时还可确定所生成切片的尺寸和位置。•

删除：若创建过程中出现了多余的切片，可以将它们删除。•

锁定：当图像中的切片过多时，最好将它们锁定起来。切片基础7.1界面切片7.2界面输出7.3课堂实训——切片并输出大米网首页7.4输出家居网页界面7.3.1课堂案例当完成家居网页界面的切片后，还需要将界面存储为PNG格式，并保存HTML和图像。存储为Web所用格式。知识要点：案例说明：存储切片01输出家居网页界面7.3.1课堂案例查看切片后的效果027.3.2存储为Web所用格式将图像优化变小后，可以让用户更快地浏览和下载图像。选择【文件】/【导出】/【存储为Web所用格式（旧版）】命令，打开“存储为Web所用格式”对话框，在其中可对图像进行优化和输出，如右图所示。7.3.2存储为Web所用格式•

显示选项：单击“原稿”选项卡，可在窗口中显示没有优化的图像。•

抓手工具：单击“抓手工具”，使用鼠标拖动图像可移动查看图像。•

切片选择工具：当图像包含多个切片时，可使用“切片选择工具”选择窗口中的切片，进行优化。•

缩放工具：单击“缩放工具”，可放大图像显示比例。•

吸管工具：使用“吸管工具”在图像中单击可吸取单击处的颜色。•

吸管颜色：用于显示吸管工具吸取的颜色。•

切换切片可视性：单击“切换切片可视性”，可显示或隐藏切片的定界框。•

颜色表：在对图像格式进行优化时，可在“颜色表”中对图像颜色进行优化设置。•

图像大小：可将图像大小调整为指定的像素尺寸或原稿大小的百分比。•

状态栏：显示鼠标指针所在位置的颜色信息。“存储为Web所用格式”对话框中主要选项的作用如上。7.3.3Web图像文件格式在“存储为Web所用格式”对话框中选择需要优化的切片后，在右侧的文件格式下拉列表中选择一种文件格式，可细致地对切片进行优化。•

PNG-24格式：PNG-24格式适合压缩连续色调的图像，它可以保留多达256个透明度级别，但文件体积超过JPEG格式。

•

WBMP格式：WBMP格式适合优化在移动端设备中使用的图像。•

GIF和PNG-8格式：GIF格式常用于压缩具有单色调或细节清晰的图像，它是一种无损压缩格式；PNG-8格式与GIF格式的特点相同，其选项也相同。•

JPEG格式：JPEG格式可以压缩颜色丰富的图像，将图像优化为JPEG格式时会使用有损压缩。7.3.4Web图像的输出设置在优化完Web图像后，在“存储为Web所用格式”对话框的“预设”栏右侧单击按钮，在打开的下拉列表中选择“编辑输出设置”选项，打开“输出设置”对话框，在该对话框中可设置HTML文件的格式、命令文件和切片等，如下图所示。切片基础7.1界面切片7.2界面输出7.3课堂实训——切片并输出大米网首页7.4实训背景“大米农场”企业准备对制作好的大米网首页进行切片操作，方便后期网页程序人员编辑，要求根据内容添加参考线，然后根据参考线进行切片，并保存为PNG格式。实训思路查看大米网首页可发现，整个首页分为Banner、产品展示和底纹3个部分，为了便于区分可根据版块进行参考线的划分，然后根据参考线进行切片操作。——切片并输出大米网首页

课堂实训

课堂实训——切片并输出大米网首页01选择“切片工具”，在工具属性栏中单击“基于参考线的切片”按钮，将图像基于参考线等分成多个小块。0203打开“大米网首页.jpg”图像文件，选择【视图】/【标尺】命令，或按【Ctrl+R】键打开标尺，从左侧