PS网页设计教程V——如何在Photoshop中创建一个商业网站布局
导读： 作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻

作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。

本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。

约定：

1、本文的软件是Photoshop CS5版本

2、原教程的截图是英文的，本人在重新 *** 的基础上，重新截了中文版的图

3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数

例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77

例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定

4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。

Hello Today I will create another web layout (template) in Photoshop and this time I will try to create a business template

大家好。今天在这儿要发布一个新的PS教程（模版），如何在PS中创建一个商业网站布局

Open Photoshop and create a new document (Ctrl + N), as a background choose #edebe6

打开PS创建一个新的文档（Ctrl+N）（尺寸：1020px1120px），背景色： #edebe6

Step 1- Creating the logo and search area

First, I will select Rectangle Tool and I will add a black shape on the top of the document then with Type Tool I will add the logo (font used: Tahoma)

步骤1 - 创建Logo和搜索框

首先，用矩形工具在文档的顶部创建一个黑色的矩形（0，0，1020，12），颜色： #403c33，然后用文字工具添加Logo（字体：Tahoma，（74，62），大小：30px）。

O the right side of the logo I will create a search form, that’s why I will select Rectangle Tool and I will create a shape and I will apply this layer styles, then with Type Tool I will write Search:

在Logo的右边创建搜索表单，用矩形工具创建一个矩形（755，70，160，25），添加如下的图层样式，然后用文字工具添加文本Search

Having Rectangle Tool selected I will create a *** all shape in the right side of the shape created on previous step, for this one I will apply this layer styles:

继续用矩形工具在刚才的矩形的右边创建一个小的矩形（915，70，32，25），对这个矩形添加如下的图层样式：

颜色渐变的颜色为： #b85a36， #fa7b46

描边的颜色： #fde0ce

用文字工具添加文字GO，添加如下的图层样式

Step 2 _ Creating the Navigation and Featured Area

First, select Rectangle Tool and create a green shape, as a color, I have used #aed1c4

步骤2 - 创建导航栏和特 *** 域

首先，用矩形工具创建一个绿色的矩形（0，188，1020，60），颜色： #aed1c4

With Rectangle Tool create another shape I have used a red color for demonstration proposes This shape has the following dimensions: 918 by 62px

用矩形工具创建另一个矩形（51，156），为了示范我用红色。这个矩形的尺寸为918px62px

Then apply some layer styles:

然后添加如下的图层样式：

内阴影的颜色： #bac4a9

颜色叠加的颜色： #96c6b6

Next I will add the links For each of them I have applied this layer styles:

接下来要添加一些链接。对每个链接添加如下的样式：

With Pen Tool (P) I will create a *** all triangle over the Home link and I will apply this layer styles:

用钢笔工具在Home链接的上方创建一个小的三角形，添加如下的图层样式：

投影的颜色： #5a7169

Then using Line Tool I will create some separators between links To create this you will need to set the weight for the line tool to 1px

然后用直线工具在链接之间创建一些分割线。直线工具的粗细设置为1px

I will add first a darker line (#8fafa4)，then a whiter one (#aad4c6)。

我首先添加一条深色的直线（颜色： #8fafa4）,然后添加一条浅色的直线（颜色： #aad4c6）

Then I’ll make sure that both of the lines are selected on my layer palette and I will click Ctrl + E (to merge them) I will duplicate this layer several times (to have a separator for each link)

然后在图层面板选中刚才的两条直线的图层，Ctrl + E（合并图层），复制几次合并后的图层（在每两个链接之间都有一个分隔符）

Next using Rectangle Tool I will create another shape As a color I have used #d6e1c7 and I have applied this layer styles:

接下来用矩形工具创建另一个矩形（72，218，876，254），颜色： #d6e1c7。对它添加如下的图层样式：

描边的颜色： #e4f1d3

To create a nice 3d effect for navigation, using Pen Tool (P) I will create this Grey shape:

I will create another one on the right side, and here is my outcome:

给导航栏添加漂亮的3d效果，用钢笔工具创建灰色（颜色： #eaebe3）的三角。

同样的在右边创建另一个三角，这是我做到效果图

个人的建议，如果不能熟练的运用钢笔工具，可以通过复制矩形，调整大小，旋转角度，调整图层顺序来达到同样的效果。

With Type Tool(T) I will add some text

用文本工具添加一些文本

大标题文字，字体：Tahoma，大小：30px，添加如下的图层样式

段落文字的颜色： #7f7f7f

Then from my stock images I will search for a business image Please note that when you add an image in Photoshop, usually the resolution is pretty high All you have to do is to resize it, using Free Transform which can be activated by pressing Ctrl + T from your keyboard

从我收藏的中搜索一个关于商业的。要注意的是当你在PS中添加的时候，常常分辨率是非常高的，你要做的就是重新调整它的大小，在键盘上用Ctrl+T激活自由变形工具。

在PS CS5中通过置入的方式打开的话，为了后续的操作，还必须在该图层上右键选择“栅格化图层”

Here is my image

这是我添加的

Now I will select Rectangular Marque Tool (M) and I will make this selection over my picture:

用矩形选择工具在的上方设置矩形选区

I will right click on my picture (having Rectangular Marquee Tool selected) and I will choose Feather

在上方右键鼠标（在用矩形选择工具选择的范围内），选择“羽化”

and I will use 50px for Feather Radius

羽化的半径设置为50px

Next right click again over the selection but this time I will choose Select Inverse

接下来再次鼠标右键点击选中区域，这次是选择“选择反向”

按delete键几次，删除边缘的区域，达到羽化的效果。不同的次数不是固定的，本文中的是4次。

I will set Blending Mode to Luminosity and I will lower the Opacity to 60%

图层的混合模式选择“明度”，不透明度设置为不超过60%

结果如下：

Next I will add a button on Featured Area (at the bottom of the text) To do that I will select Rectangle Tool and I will create a shape then I will add this layer styles:

接下来要在特 *** 域添加一个按钮（在文本的底部）。用矩形工具创建一个矩形（392，425，92，28）并添加如下的样式：

渐变叠加的颜色： #ba5c38，#f97c44

描边的颜色： #ffe0ce

给按钮添加文字Click here。并复制之前搜索栏那块的GO文字的图层样式

My output

我的样张

Now I would like to make this Featured Area more visible To do that I will select in my layer pallete the main shape used to create Featured Area, and I will apply a Free Transform (Ctrl + T), then I will push this button to go in “Wrap Mode”

现在要对特 *** 域增加一些变化。在图层面板选择特 *** 域的主要矩形，然后进行自由变换（Ctrl + T），然后点击“在自由变换和变形模式切换”按钮

When you will be in “Wrap Mode” a grid will show up

这样会进入自定变形模式，会显示一个控制变形的网格

Here select this corner, and with your mouse gently drag it a little bit down

选择左下角的控制点，然后用鼠标轻轻的往下拖动一点点（往下拖动14px）

I will do the same for the right side

选择右下角的控制点，做同样的步骤

Once you have finished press ENTER

当你做完按ENTER键确定

My result

我的结果

The final step for Featured Area will be to create some shadows For That I select Ellipse Tool and I will create this shape

最后要对特 *** 域添加一些阴影，用椭圆工具添加一个椭圆

Next I will go to Filter>Blur>Gaussian Blur and I will choose for radius 10px, then I will select Rectangular Marque Tool and I will make this selection

接下来点击：滤镜 > 模糊 > 高斯模糊，设置半径为10px，然后用矩形选择工具选取如下的矩形

Hit DELETE Button on your keyboard then press Ctrl + D to unload the selection

按键盘上的DELETE键删除选区的内容，然后Ctrl+D取消选区

Here’s my result:

这是我的结果：

Next I would like to add a shadow at the bottom of the curved shape Unfortunately I can’t create a nice shadow using the “standard way” _ ellipse tool, that’s why I will use the Brush Tool

All you have to do is to create a new layer on your Layer Palette (Ctrl + Alt + Shift + N) chose a rounded brush, a black color and follow the edge of your shape

接下来，我想在弯曲形状的底部添加一个阴影。不幸的是我不太会使用"标准 *** "——椭圆工具，去创建一个好看的阴影。因此我会使用画笔工具去画阴影。

创建一个新图层在你的图层面板 (Ctrl + Alt + Shift + N)上，选择圆角的画笔，黑色，沿着弯曲形状的边缘画一条黑线。

Now apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 12px

My result _ a nice and soft shadow

现在添加高斯模糊（滤镜 > 模糊 > 高斯模糊），半径设置为12px

我的结果 - 一个漂亮柔和的阴影

Step 3 _ Creating the Content Area

This one is really easy to create First with Rectangle Tool I will create this shape:

步骤3 - 创建内容区域

这部分非常容易。首先用矩形工具创建一个矩形（47，416，926，464），颜色： #d6e1c7

接下来，用矩形工具在左侧新建一个灰色的矩形（47，416，25，70），颜色： #acb69e

用直接选择工具选择矩形的左下角，按DELETE键删除左下角的控制点，使之成为一个阴影三角形

同同样的 *** 在右侧新建矩形（948，416，25，70），删除右下角控制点，成为另一边的阴影三角形

Then with type tool I will add some text

然后用文字工具添加一些文本，标题文字的颜色： #4a5340

在标题和内容之间，用直线工具添加白色的水平分割线，不透明度设置为50%

在两栏之间添加阴影分隔符，和特 *** 域文字和之间的分割符做法类似

Content area is finished now

内容区域就完成了

Step 4 _ The Footer

This one, again is quite easy to create because is a replica of the Featured Area I have used the same techniques used to create Featured Area

步骤4 - 页脚

这部分，非常容易 *** 因为和特 *** 域一模一样。我要用和特 *** 域相同的技术去 *** 它

因为是类似，就直接复制特 *** 域的相关图层，移到合适的位置，点击：编辑 > 变换 > 垂直翻转，再进行合适的微调。

With Type Tool I will add some text and with Rectangle Tool I will create some forms for “Newsletter” The orange buttons are using the same layer styles like the button from Featured Area If you have followed me when I have created Featured Area you will be able to create the Footer also

用文字工具添加一些文本，用矩形工具添加一些Newsletter的文本框，桔**按钮是用和特 *** 域的按钮的同样的图层样式。如果你是一直跟着我做完特 *** 域，那你一定也能完成页脚区域

页脚区域：

标题文字：颜色： #98a289

文本框：用矩形工具画矩形，图层样式直接复制头部区域文本框的图层样式

文本框文字：直接复制头部区域文本框文字，修改文字后，移到合适的位置

按钮：用矩形工具画矩形，图层样式直接复制头部区域按钮的图层样式

按钮文字：直接复制头部区域按钮文字，修改文字后，移到合适的位置

阴影分割符：直接复制内容区域的阴影分隔符，移到合适的位置

下面是我最终的结果：

心得：

本教程的特色是利用变形模式，完成折纸特效

更多PS网页设计教程V——如何在Photoshop中创建一个商业网站布局 相关文章请关注PHP中文网！

向Talk-Mania网站致敬。一年前，在该网站上看过许多不错的网页设计教程。一年后，再回头想看看有没有什么新的教程的时候，蓦然发现该网站已经打不开了。也许是关闭了，也许是改了网站名了。幸好，去年本人还是下载保存了几个教程，本教程就是其中之一。也希望能看到更多的PS网页设计教程的网站，以及更多优秀的设计。

约定：

1、本文的软件是Photoshop CS5版本

2、原教程的截图是英文的，本人在重新 *** 的基础上，重新截了中文版的图

3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数

例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77

例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定

In this tutorial I will show you how to create a professional blog web layout in Photoshop

在本教程里，我将展示如何在Photoshop中创建一个专业博客网站布局。

We will use the 960 Grid System to create the web layout Download the archive file from the site, unzip it and open the "960_grid_12_col 2psd" file from the "photoshop" folder

我将用960 Grid System创建网站布局，从站点上下载该文件，解压后从photoshop文件夹打开960_grid_12_col 2psd。

由于Talk-Mania网站已经无法访问，再加上该PSD实际上是一个定位辅助文件，故本译文就没有用该文件。

Step 1

Increase the size of your document by going to Image > Canvas Size Use the settings from the following image Then select the Paint Bucket Tool (G) and fill the background with the color #f6f0e2

步骤1

从菜单：图像 > 画布大小，在增加你的文档的大小。使用如下的图中的配置，然后选择油漆桶工具，给文档添加背景颜色： #f6f0e2

由于没有打开PSD，因此本步骤就变成新建一个文档，尺寸：12001500px。用油漆桶工具给文档添加背景颜色： #f6f0e2

结果如下：

Step 2

Select the Rectangle Tool (U) and create a white rectangle with the width 940px from the top of your document to the bottom Leave a distance of 30px from the bottom edge of your document Name this layer "content bg", double-click on it to open the Layer Style window and add a 1px stroke using the color #ded6c4

步骤2

在你的文档，用矩形工具从顶部到底部创建一个宽940px的白色矩形（130，0，940，1470），距离底边20px。命名该图层为content bg，双击该图层打开图层样式对话框，对该矩形添加一个描边的样式，宽度1px，颜色： #ded6c4

Step 3 - Creating the header

Click on the 'Create a new group' button from the bottom of the Layers panel to create a new group and name it "header"

Select the Rectangle Tool (U) and create a rectangle with the height 10px at the top of your document using the color #aa915c Name this layer "top bar"

步骤3-创建头部

在图层面板的底部单击‘创建新组’按钮，创建一个新组，命名为header。

用矩形工具在文档的顶部创建10px高的矩形（0，0，1200，10），颜色： #aa915c，命名为top bar。

Step 4

Select the Line Tool (U), set the weight to 1px and create a horizontal line at the bottom of the rectangle you created at the previous step using the color #968051 Name this layer "1px line"

Hit Ctrl/Cmd + J to duplicate this layer Change the color of the new line to #c3a76a Then select the Move Tool (V) and hit the up arrow once to move this layer one pixel up

步骤4

用直线工具在刚才创建的矩形的底部画一条宽度1px的水平直线，颜色： #968051。命名为1px line

Ctrl+J复制该图层，对新的直线更改颜色为 #c3a76a。然后选中移动工具，按上方向键一次，使得该直线上移一个像素。

Step 5

Select the Rectangle Tool (U) and create a rectangle with the height 100px and the color #e8c271 underneath the first rectangle Name this layer "header bg"

在上面的矩形的下面，用矩形工具创建一个高100px的矩形，颜色： #e8c271。命名为header bg

Step 6

Ctrl/Cmd-click on the vector mask of the "header bg" layer to select it Then go to Layer > New Fill Layer > Gradient The selection that you made has now been transformed into a mask and the gradient will be visible only over the header

Use the settings from the following image for the Gradient Fill layer and move the gradient in the left side of the header (to move the gradient, click on the image and drag the cursor white the Gradient Fill window is opened) Set the blend mode of this layer to Overlay 20%

步骤6

Ctrl+click单击header bg图层去选中它。然后点击，图层 > 新建填充图层 > 渐变。选择的区域就像转换成了一个蒙板，这样线性渐变只能在头部区域可见。

渐变填充的参数参考下面的图像，然后移动渐变图层到头部区域的左边（移动渐变图层的时候，单击该图层，拖动的时候要注意出现白色的光标），设置图层的不透明度20%

Step 7

Select the Line Tool (U) and create two lines with the weight 1px at the bottom of the header Use the color #f4d48f for the first line and #c6a661 for the second one

步骤7

用直线工具在头部区域的底部创建2条宽度1px的水平直线。之一条直线的颜色： #f4d48f；第二条直线的颜色： #c6a661

Step 8

Select the Type Tool (T) and write the name of your web layout in the left side of the header using the color #f6eedd and the font Myriad Pro Bold Italic

Activate the guides to help you position this text layer correctly

Double-click on this layer to open the Layer Style window and use the settings from the following image I used the color #8e7849 for Drop Shadow

步骤8

在你的网站布局的头部区域的左边用文字工具书写你网站的名字，颜色： #f6eedd，字体：Myriad Pro，粗斜体

激活你的辅助线，帮助你正确定位你的文字图层。

双击你的文字图层，打开图层样式对话框，然后按照下图设置参数，投影的颜色设置为 #8e7849

Step 9 - Creating the navigation bar

Create a new group and name it "navigation" Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 550px by 50px and the color #e9d09b Name this layer "navbar" and use the Move Tool (V) to move it in the right side of your layout at 10px underneath the header I used the color #cdbd9b for Drop Shadow

步骤9 - 创建导航栏

创建一个新组，命名为navigation。用圆角矩形工具创建一个圆角矩形（500，70），尺寸：550px50px，颜色： #e9d09b，命名为navbar，用移动工具移到文档的右侧，下边沿在头部区域的下方10px。如图添加样式，投影的颜色： #cdbd9b

Step 10

Select the Type Tool (T) and write the name for your navigation menu items using the color #fffcf4 Add a shadow to your text layers using the settings from the following image

步骤10

用文字工具添加导航栏的菜单，颜色： #fffcf4。对文字添加投影，设置如下图所示：

Step 11 - Creating the featured area

Create a new group and name it "featured" Then select the Rounded Rectangle Tool (U) and create a rectangle with the dimensions 900px by 280px and the color #d9cdb2 Name this layer "featured bg" and move it at a distance of 30px from the bottom edge of the header

步骤11 - 创建特 *** 域

创建新组，命名为featured。然后用圆角矩形工具创建一个圆角矩形（150，140），尺寸：900px280px，颜色： #d9cdb2。命名此图层为featured bg，移动到距头部区域底边30px的位置。

Step 12

Select the Rectangle Tool (U) and create a rectangle inside the big rounded rectangle with the dimensions 600px by 260px and the color #f9f5ed

Activate the guides to help you create this shape Then name this layer "image holder"

Open an image in Photoshop and move it into your web layout document using the Move Tool (V) Name this layer "image" and put this image over the "image holder" layer Right-click on the "image" layer and select Create Clipping Mask

步骤12

用矩形工具在刚才的大圆角矩形中创建一个矩形（160，150），尺寸：600px260px，颜色： #f9f5ed

激活辅助线以帮助你创建刚才的矩形，命名此图层为image holder

在PS中打开一个，用移动工具移动到你的网页布局上。命名此图层为image，并且移动此图层到图层image holder的上方。在image图层上右键鼠标并选择创建剪贴蒙板

Step 13

Now we will create two arrows for the featured area Select the Rounded Rectangle Tool (U) and create a *** all rounded rectangle with the color #d9cdb2 Double-click on this layer to open the Layer Style window and use the settings from the following image For the Stroke I used the color #aaa18c Name this layer "rounded rectangle"

步骤13

现在我们要在特 *** 域创建2个箭头。选择圆角矩形工具创建一个小的圆角矩形工具（710，260，60，40），颜色： #d9cdb2。双击此图层，打开图层样式窗口按下图设置参数，描边的颜色： #aaa18c。命名此图层rounded rectangle

Step 14

Select the Custom Shape Tool (U) and create an arrow shape inside the rounded rectangle using the color #e8e0c8 Duplicate this arrow and move the new one to the left

Select the "rounded rectangle" layer and the two arrow layers and hit Ctrl/Cmd + G to put them inside a group Name the group "right arrow"

步骤14

选择自定形状工具创建一个箭头形状在刚才的圆角矩形中，颜色： #e8e0c8。复制该箭头并移动到左边一点

选择rounded rectangle图层和两个箭头图层，Ctrl+G把他们归并到一个组。命名该组为right arrow。

Step 15

Use the Rectangular Marquee Tool (M) to select the right side of the *** all rounded rectangle Make sure that the "right arrow" group is selected, then go to Layer > Layer Mask > Hide Selection

步骤15

用矩形选择工具选择小的圆角矩形的右边。确保right arrow组被选中，然后点击菜单：图层 > 图层蒙版 > 隐藏选区

Step 16

Right-click on the "right arrow" layer and select Convert to Smart Object Duplicate this layer (Ctrl/Cmd + J) Then go to Edit > Transform > Flip Horizontal Name the new layer "left arrow" and move it in the left side of the featured area

步骤16

鼠标右键right arrow图层，选择转换为智能对象。复制该图层（Ctrl+J）。然后点击菜单：编辑 > 变换 > 水平翻转。命名新图层为left arrow并移动到特 *** 域的左边

Step 17

Select the Rectangle Tool (U) and create a rectangle with the size 280px by 260px and the color #f4ecd8 Put the rectangle next to the featured image and name this layer "text bg" Double-click on this layer to open the Layer Style and add a 1px stroke using the color #f8f4ea

步骤17

用矩形工具创建一个矩形（760，150），尺寸：280px260px，颜色： #f4ecd8。矩形紧贴到特 *** 域的的右边，命名为text bg。双击该图层打开图层样式，添加1px的描边，描边颜色： #f8f4ea

Step 18

Ctrl/Cmd-click on the vector mask of the "text bg" layer to select the rectangle Then go to Layer > New Fill Layer > Gradient and use the settings from the following image I used a #362D1A-to-transparent gradient While the Gradient Fill window is opened, click on the image and move the gradient in the left side of the rectangle Then set the opacity of this layer to 10%

步骤18

Ctrl+click点击text bg图层去选择矩形。然后点击菜单：图层 > 新建填充图层 > 渐变，然后按照下图设置参数。在线性渐变中，设置颜色为#362D1A到透明，当渐变填充窗口打开的时候，单击渐变移动到矩形的左边。然后设置不透明度为10%。

Step 19

Create two vertical lines in the left side of the rectangle Use the color #c7bca0 for the first line and #fffdf7 for the second one

步骤19

创建两条竖直的直线在矩形的左边，之一条直线的颜色： #c7bca0，第二条直线的颜色： #fffdf7

Step 20

Select the Type Tool (T) and add some text for the featured area using the color #6e6758 and the font Helvetica

步骤20

在特 *** 域用文字工具添加一些文字，颜色： #6e6758，字体：Helvetica（本译文用Verdana字体代替）

Step 21

Select the Line Tool (U) and create a horizontal line underneath the featured area using the color #e7e1d5

步骤21

用直线工具创建一条水平线（150，445，900，1）在特 *** 域的下方，颜色：# e7e1d5

Step 22 - Creating the content area

Create a new group and name it "content" Then select the Rectangle Tool (U), hold down the Shift key and create a square with the size 200px by 200px and the color #d9cdb2 Name this layer "image holder", double-click on it and use the settings

对于企业来说，一个好的网页设计能够为企业在短时间内带来一定的经济效益，同时还能够提高企业的知名度，创建企业形象等，对于企业的好处是不言而喻的，那么，一个好的网页设计究竟需要考虑哪些因素呢？下面就由小编来为大家简单介绍一下。

1、电脑尺寸的问题

由于现代电脑可选择的范围比较大，也会出现很多尺寸的问题，在进行网页设计的时候，最需要考虑的就是尺寸问题，首先要对网页的尺寸进行熟悉，其实尺寸只是采用了分辨率的原理。因此电脑不同它的分辨率也会有所差异，在进行网站规划的时候，首先就需要对电脑尺寸做详细规划，避免尺寸问题出现。。

2、网页颜色的问题

一个好的网页设计最主要的就是颜色搭配的问题，一般来说网站的颜色主要有几个色调组成的，分别是主、次、搭配色。这三个颜色的结合主要就是为了提升网页的美观性。如果颜色搭配不协调，则会影响到网页的整体美观，降低用户的搜索兴趣。

3、网页配套部件的问题

一个网页再进行设计的时候，首先需要将一些配套工作做好。我们最常见的配套部件有图标等这些都是需要在网页设计之前先设计完成的。然后在设计的时候直接ps上去就可以了，如果不提前设置好，就会出现与主网页不搭调的情况。

4、技术的问题

想要做好一个网页设计，前提就是需要有相应的技术功底，如果没有过硬的技术，则一切都是免谈。做一个好的网页，设计师除了需要懂得ps、flash这些相应的功能以外，还需要了解一些简单的网页 *** 原理及代码，以便更好的完成工作。

除以上几点因素以外，好的网页设计还需要考虑很多其他的因素，比如说在网页 *** 的时候，需要通过当前的页面联想到其他页面的感应问题。如果说一个页面与另一个页面之间没有任何感应，那么则说明这个网页是失败的。

优秀网页设计