跳到主要内容

设计师在Photoshop中进行图像切片的指南

在网络上处理图像时,有时您想要加载大图像,无论是作为主要图像在页面上还是作为背景。缺点是你会立即遇到几个问题。首先是实际的文件大小。第二是决议。第三是压缩。

如果文件很大,则需要很长时间才能加载,特别是对于连接速度较慢的用户。您可以通过压缩来缩小文件大小,但只能在图像质量开始受损之前走得太远。

您的问题的解决方案是使用图像切片,这将允许您一次加载图像,直到整个图像出现在屏幕上。

这个怎么运作

以下是对其工作原理的概述:如果您的图像需要花费很长时间才能自行加载,则可以利用Photoshop中的“切片”工具将图像切割成较小的部分。这些图像将保存为单独的文件,并使用“存储为Web”命令进行优化。

此外,Photoshop还会创建显示切片图像所需的HTML或CSS。在网页中使用时,将使用前面提到的HTML或CSS在浏览器中重新组合每个图像,以创建平滑的结果。这是切片图像的示例。

image slicing

切片基础知识

为了简单起见,我们只能在一个图层上使用切片工具。在这个例子中,我正在处理一个960x722px的图像。在开始之前您需要了解的一些事项:

  • 创建切片时,可以使用切片工具,也可以使用图层构建切片。
  • 可以使用“切片选择”工具选择切片。
  • 您可以使用其他切片移动,调整切片大小或对齐切片。此外,您可以为切片,类型和URL指定名称。
  • 可以使用“存储为Web所用格式”对话框中的设置优化每个切片。

要开始按C在键盘上单击切片工具。

image slicing

创建切片时,您可以从三种设置中进行选择:正常,固定纵横比和固定尺寸。

  • 正常:这将根据您开始的位置变为切片,并结束您在图像上绘制的框。
  • 固定宽高比:这是使用整数设置高度和宽度的位置。要详细说明,如果要创建一个三比一的切片,则输入3表示高度,输入1表示宽度。
  • 固定尺寸:您可以在此处设置切片的高度和宽度(以像素为单位)。

切片图像时有几个选项。如果准确性不重要,您可以手动切片图像,如有必要,使用切片选择工具移动完成的切片。

image slicing

如果准确性很重要,请使用指南来绘制图像中的重要部分。

image slicing

在切片菜单栏的顶部,单击C或切片工具将其激活,然后在图像上方的切片菜单栏中,单击切片从切片按钮。

image slicing

将自动为您绘制切片。然后,您可以使用“切片选择工具”重新定位切片。

编辑切片信息

创建每个切片后,您可以通过两种方式之一编辑切片的相关信息。

首先要做的是单击切片选择工具,单击要编辑的切片,然后单击菜单栏中“显示自动切片”按钮旁边的图标。

image slicing

另一个选项是右键单击切片,然后在弹出菜单中单击“编辑切片选项”。

image slicing

这两个选项都将打开“切片选项”对话框。

image slicing

如您所见,有许多设置。您可以更改切片的名称,可以为其指定一个URL,这样当在浏览器中单击它时会将您带到另一个位置,您可以设置Target(_blank,_self,_parent,_top),Message文本,Alt标签,切片的尺寸等。

除了网络

对布局感到满意后,请转到“文件”>“存储为Web”。

image slicing

在这里,您可以为每个切片设置文件类型和压缩,或者使用“存储为Web所用格式”对话框中列出的默认值。对设置满意后,单击“保存”按钮。

image slicing

这将打开Saved Optimized As对话框。在框的底部有几个重要的设置。

  • 格式:您有三个选项,分别是HTML和图像,仅图像和HTML。
  • 设置 您可以选择自定义,背景图像,默认设置,XHTML和其他。
  • :您的选项是所有切片,所有用户切片和选定切片。

在本教程中,我使用的是HTML和图像,默认设置和所有切片。如果对设置满意,请选择要保存文件的文件夹,然后单击“保存”按钮。这将创建一个HTML文件并将所有六个图像保存到一个文件夹中。

以下是Adobe Dreamweaver中HTML文件的分屏视图。如您所见,代码简单易用。

image slicing

结论

如您所见,如果您有一个大图像,图像切片很有用。通过将其分成多个部分,图像的一部分将首先开始加载,让用户知道更多信息。这对于连接速度较慢的用户很有帮助。

有关更多信息,请查看以下文章:

:内森西格尔



翻译字数超限