photoshop设计网页
We are now going to optimize and export each slice. Use the “Slice Selection Tool” to select the slice called gray_bar Now, hold down the shift key, and click the blue_square slice. As these are both single-color images, we can optimize both at the same time. Use these settings to optimize the two slices as gifs:
现在，我们将优化并导出每个切片。 使用“切片选择工具”来选择名为gray_bar的切片，按住Shift键，然后单击blue_square切片。 由于这些都是单色图像，因此我们可以同时对其进行优化。 使用以下设置将两个切片优化为gif：
Next, use the “Slice Selection Tool” to select the header, and then, holding down the shift key, click on the footer too. As these slices have complex color transitions it’s best to save them as jpegs. Uses these settings:
接下来，使用“切片选择工具”选择页眉，然后在按住Shift键的同时单击页脚。 由于这些切片具有复杂的颜色过渡，因此最好将它们另存为jpeg。 使用以下设置：
The reason that I’ve included a small amount of blur here is to smooth out some of the pixelation that’s often associated with jpeg images. This is not a common practice when optimizing photographs, however, because the photo will look out of focus.
我在此处包含少量模糊的原因是为了消除与jpeg图像经常相关的一些像素化。 但是，在优化照片时，这不是常见的做法，因为照片看起来会模糊。
To export these images use the “Slice Selection Tool” to select the header, footer, blue_square and the gray_bar:
要导出这些图像，请使用“切片选择工具”选择页眉，页脚，blue_square和gray_bar：
In the File menu choose “Save Optimized As”:
在“文件”菜单中，选择“另存为”：
With this, you have a few options:
有了这个，您有几种选择：
you can choose the destination (where the images and code will be saved) and then click save, or 您可以选择目标位置(将在其中保存图像和代码)，然后单击“保存”，或者 you can choose to save the HTML only, and it will create an HTML page that will fit the layout you designed. 您可以选择仅保存HTML，它会创建一个适合您设计布局HTML页面。 The third option — saving only the images we’ve selected — is what we are going to do. 第三个选项-仅保存我们选择的图像-是我们要做的。In the “Save as type” dialog box choose “Images Only”. Then, below that, choose “Selected Slices”. As a default, ImageReady will save all the selected images in an “images” folder. You can click on the “Output Settings” box, and in the lower part of this dialog deselect the “Put images in folder:” check box if you like. I generally create the folder structure of a new Website before I slice the image up — obviously you can save the files to any folder you like. Once you’ve selected the location, click save.
在“另存为类型”对话框中，选择“仅图像”。 然后，在其下选择“选定的切片”。 默认情况下，ImageReady将所有选择的图像保存在“图像”文件夹中。 您可以单击“输出设置”框，然后在该对话框的下部取消选择“将图像放入文件夹：”复选框。 通常，在切片图像之前，我通常会创建新网站的文件夹结构-显然，您可以将文件保存到所需的任何文件夹中。 选择位置后，单击“保存”。
The next step is to create the HTML page we will later use as a template for the rest of the Website. If you’re wondering why we didn’t save the center slices of our original layout image, here’s why. The gray box in the center of the image will contain your content. The blue horizontal bars at top and bottom (ie. below and above the header and footer) similarly serve to designate the location of text links for your navigation.
下一步是创建HTML页面，稍后将其用作网站其余部分的模板。 如果您想知道为什么我们没有保存原始布局图像的中心部分，这就是原因。 图像中心的灰色框将包含您的内容。 顶部和底部(即，页眉和页脚的下方和上方)的蓝色水平条类似地用于指定导航文本链接的位置。
Go to page: 转到页面： 1 | 1 | 2 | 2 | 3 | 3 | 4 4翻译自: https://www.sitepoint.com/design-website-photoshop-3/
photoshop设计网页
相关资源：网页设计中Photoshop与Flash的结合应用