photoshop设计网页

There are a number of different ways to create Websites. While some may choose to hand draw a concept and then start coding HTML, others may want to take a more graphical approach to the design and layout.

有多种创建网站的方法 。 尽管有些人可能会选择手绘一个概念，然后开始对HTML进行编码，但其他人可能希望对设计和布局采用更具图形化的方法。

This graphical approach is what I’m here to show you.

我在这里向您展示这种图形化方法。

So today, I’ll explain the design process I go through when a new customer hires me. Being very visual, I find it easier to start with an image when I design a Website, and these are the basic steps I follow:

所以今天，我将解释新客户雇用我时要经历的设计过程。 由于非常直观，我发现在设计网站时从图片开始比较容易，这些是我遵循的基本步骤：

1. First, using Photoshop, create an image that mimics the general layout you’d like to use for your site.首先，使用Photoshop，创建一个图像，该图像模仿您要用于网站的总体布局。
2. Once you’re happy with the image you’ll need to “slice” it up for use in your Website template. In this process, it helps to have a working knowledge of HTML. You must know how tables work, so that you can slice your image in a way that will work with tables.对图片感到满意后，您需要对其进行“切片”以用于网站模板。 在此过程中，有助于掌握HTML的使用知识。 您必须了解表的工作方式，以便可以以与表一起使用的方式对图像进行切片。
3. Then it’s time to create an HTML document that’s comprised of those slices. This will become the template you’ll use to create all the pages of your Website.然后是时候创建包含这些切片HTML文档了。 这将成为您用来创建网站所有页面的模板。

To make it easier to follow along with the directions, here’s a downloadable Photoshop image that is yours to use, alter or demolish as you choose!

为了更容易按照指示进行操作， 这是一个可下载的Photoshop图像 ，您可以根据自己的选择使用，更改或拆除它！

Note: if you publish this image, all I ask for is a link back to my site

注意：如果您发布此图片，我所要求的只是指向我网站的链接

Let’s get started!

让我们开始吧！

界面图像创建 (Interface Image Creation)

Interface Design

界面设计

This is the most critical part of the whole design process. The design of your interface is very important for usability. You’ve probably heard it a thousand times, but the old saying is true: if your visitors can’t find all your content, or they’re confused by your layout, they really are only one click away from leaving your site.

这是整个设计过程中最关键的部分。 界面的设计对于可用性非常重要。 您可能已经听过一千遍了，但老话是真的：如果您的访问者找不到您所有的内容，或者他们对您的布局感到困惑，那么实际上离开站点仅一键之遥。

Planning Ahead

提前计划

With any new design, you must plan ahead. This will enable you to adapt to any changes that arise quickly and easily. For example, imagine you wanted to add another section to your Website. Does the navigation of your site allow for this, or will it entail a complete redesign? If you’re in the latter category, expect to waste time and money — resources that can easily be saved if you design your site layout well the first time.

对于任何新设计，您都必须提前计划。 这将使您能够适应Swift而轻松地发生的任何变化。 例如，假设您想在网站上添加其他部分。 您的网站导航是否允许这样做，还是需要进行彻底的重新设计？ 如果您属于后一类，则要浪费时间和金钱-如果您第一次设计好网站布局就可以轻松地节省资源。

It’s important to imagine where you’d like to be in the future. Websites are like any other business: you must change with the times.

想象您将来想成为的重要人物。 网站就像其他业务一样：您必须与时俱进。

Layout

布局

We’re going to start with an image that is 740×460 pixels in size. In this space, we need to include the header, navigation and content areas.

我们将从一个740×460像素大小的图像开始。 在这个空间中，我们需要包括标题，导航和内容区域。

Below, you can see a layout image that I created in Photoshop. The dark blue bars at the top and bottom of the page represent where our navigation will be — this kind of layout is very effective if, for example, you have a lot of content and you like fast loading pages.

在下面，您可以看到我在Photoshop中创建的布局图像。 页面顶部和底部的深蓝色条表示导航的位置-例如，如果您有很多内容并且喜欢快速加载页面，则这种布局非常有效。

After you’ve created your image in Photoshop, it’s time to prepare each section so you can use them in an HTML document. Let’s slice it up!

在Photoshop中创建图像后，该准备每个部分了，以便可以在HTML文档中使用它们。 让我们切成薄片！

切片图像 (Slicing Your Image)

Although you can use any graphics software to create your image, I recommend Photoshop. Packaged with this program is ImageReady, which you can use to save images for the Web, create gif animations, and slice up Photoshop images.

尽管您可以使用任何图形软件来创建图像，但我还是建议您使用Photoshop。 与该程序一起包装的是ImageReady，可用于保存Web图像，创建gif动画以及分割Photoshop图像。

Now, “slicing” means that we’ll take your original page layout image, and make smaller individual images out of it, which you can then insert into an HTML table.

现在，“切片”意味着我们将获取您的原始页面布局图像，并从中制作出较小的单个图像，然后您可以将其插入HTML表中。

You could just use the large image as a page on your Website, and make image maps over the areas that you want to be links. The problem with this solution is that it will take forever to download — your users won’t be impressed!

您可以将大图像用作网站上的页面，并在要链接的区域上绘制图像地图。 该解决方案的问题在于，它将永远需要下载-您的用户不会被打动！

As you’ll see in this example, when you slice up a large image, you have the ability to optimize each section individually to make the total file size smaller. Also, as in this example, some slices are duplicated, so you need to only use one of them, which will in turn make the total file size even smaller. The example image I created for this is only 26.1k. What this means to you is that this page will only take 9 seconds for a person on a 28.8k modem to download. Are you starting to see the benefits?

如您在本示例中所看到的，当切片大图像时，您可以单独优化每个部分以减小文件总大小。 另外，如本例中所示，某些切片是重复的，因此您只需要使用其中一个即可，从而使文件的总大小变得更小。 我为此创建的示例图像仅为26.1k。 这对您意味着对一个28.8k调制解调器上的人而言，下载该页面仅需9秒。 您开始看到好处了吗？

Here we have our image in Photoshop, prepared for slicing:

在这里，我们在Photoshop中有准备切片的图像：

As you can see, blue lines cross the image. These are guidelines that Photoshop allows you to simply drag out of the ruler area — they mark where we are going to slice the image.

如您所见，蓝线穿过图像。 这些是Photoshop允许您简单地将其拖出标尺区域的准则-它们标记了我们要对图像进行切片的位置。

翻译自: https://www.sitepoint.com/design-website-photoshop/

photoshop设计网页