怎么设计漂亮的网页 第1篇
Add the shadow. Create a dark gray rectangle behind the tabs, as shown in the image.
添加投影。在切换页的背后创建一个深灰色的矩形（78，609，1044，50），颜色： #303030，如图所示
Add a vector mask by clicking the little icon in the bottom of the layer palette.
Set the color to black, pick a large soft brush, and start deleting parts of the rectangle. As a result, we get a nice fake shadow effect behind our tabs.
设置颜色为黑色，选区一个大的软刷，然后开始删除矩形的部分。结果，我们创建了一个比较好看的阴影效果
也可以用渐变工具在蒙版内添加一个黑色到透明的渐变，如下图所示
Finaly the attention to detail. Draw in a 1px gray line on the bottom of the tabs. Mask the layer again like described earlier and with a big soft brush delete the left and right end of the line. Now we get a nicely faded line that follows our shadow behind the tabs.
最后我们加点细节。在切换页下方画一个1px的灰线（78，659，1044，1），颜色： #b0b0b0。然后如上一步一样的方式使左右两端产生渐变，也可以用上面所讲的用渐变来实现。现在我们就在切换页的后方紧挨着阴影的地方得到一条比较时尚好看的线。
This is how our tabs should look. 这就是我们切换页看起来的样子。
怎么设计漂亮的网页 第2篇
Add a dark blue 1px line on the bottom of the header box, apply the Drop shadow effect. For drop shadow use Blend mode: Multiply, Opacity: 65%, Angle: -90, Distance: 1px and Size: 6px. Next, create a new layer above and draw another 1px white line under the dark blue one. This way we create sharp edges for our content box. Basically you can apply this border technique on every box in your design just with different colors.
在页首长方块底端画一条1px的暗蓝色（0，539，1200，1）的线，颜色： #0e517e，添加投影效果。混合模式：正片叠底，不透明度：65%，方向：-90，距离：1px，大小：6px。之后再建一个新层，在暗蓝色线下面画一条1px的白线（0，540，1200，1）。通过这种方式，我们就可以创建一个轮廓鲜明的边缘。你可以在你的设计中把这个技巧用于其他色块。
怎么设计漂亮的网页 第3篇
Now let’s create the search box. With the Rounded Rectangle Tool, radius 5px, create a search box positioned on the right side of the grid layout and in the middle of the top gray stripe from Step 4. Add these layer styles: Inner Shadow – color: #000000, Blend mode: Multiply, Opacity: 9%, Angle: 90*, Distance: 0px, Size: 6px. Stroke – Size: 1px, Position: inside, color: #dfdfdf.
现在开始创建搜索框，用圆角矩形工具，半径5px，在网格布局的右侧、步骤4中创建的顶端灰色矩形中部创建一个用于搜索的矩形（925，26，142，30），颜色： #5c6457。添加以下样式：
内阴影—颜色： #000000，混合模式：正片叠底，不透明度：9%，角度：90，距离：0px，大小：6px。
描边—大小：1px，位置：内部，颜色：#dfdfdf。
I added the “search” text and a light gray “GO” button. This is how it should look.
在上面添加search的文本和一个亮灰色的GO按钮。如下图所示：
文字的颜色： #a0a39c。白色的圆角矩形的描边和搜索框的描边一样。
So far we have a lot of layers and need to organize things a bit so we will create a new Layer folder and name it “search”. Select all layers that make the search field and just Click + drag inside the new folder. Later we’re going to organize other content inside the folders so we have a nice organized layer palette.
到目前为止已经创建了很多图层，为了条理清楚，我们建立search组。 把所有和搜索相关的层一并拖到这个组里面去。迟点，我们都会这样组织其他部分的内容。这样我们拥有一个漂亮组织合理的图层面板。
怎么设计漂亮的网页 第4篇
If you look at the final image preview, you can see that we have nice tabs in the content area. In order to create these tabs we’ll need to perform a few extra steps, but it’s definitely worth it. First, create a large rectangle shape with the Rounded Rectangle Tool. Make it 70px high and a radius of 10px or more if you wish. Now we have to get rid of the bottom radius and make a perfect corner out of it. Pick the Direct Selection Tool and click on the shape path. Click the vertical point and drag it down while holding the Shift key until it reaches the same level with the horizontal axis. So far so good but it’s still deformed. You see the little handle. Click on it and move it upwards to the point of the path.
如果你看最终效果图，你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要一些额外操作，但这是很有必要的。首先用圆角矩形工具创建一个高70px圆角半径为10px的圆角矩形（128，589，944，70），颜色： #e1e1e1。现在我们不要底部圆角，使它形成一个完美的角。用直接选择工具单击这个图形的路径，单击垂直方向的点然后按住shift键往下拉到水平坐标轴的高度。现在看起来不错了，但是还是比较简陋。然后你看见一个小的控制点。单击它并移动到路径上的点。
Now we have created a perfect corner. This is how it should look. Repeat this step for the right bottom corner.
现在我们创建一个完美的角。就像图中所示。在右下角也重复该步骤，并给它添加一个1px的描边，描边的颜色： #b0b0b0
怎么设计漂亮的网页 第5篇
Create the very bottom part where the repeated navigation will be placed. You can copy the rectangle from the top where the navigation is placed, move it down and make it about 40px high. Place it at the very bottom of your canvas. Please note that you may need to expand your canvas at this point so that all your graphics fit. If you need to do that, then go to Image > Canvas size and set the height to fit the entire layout.
怎么设计漂亮的网页 第6篇
Don’t forget to keep things organized. So create more layer folders and organize your palette. This is how I have done it.
不要忘记整理图层，这里新建图层夹把图层归类。
By adding a nice heading, some text, and bullet lists, our web design work is finished. Let’s move on.
增加一个漂亮的标题、一些文本和列表，我们的设计工作又完成一部分。现在继续下一步吧。
标题文字字体：Verdana；字号：30px，加粗；颜色： #227dac
副标题文字字体：Verdana；字号：14px，加粗；颜色： #494949
列表文字字体：Verdana；字号：12px；颜色： #494949
列表前的项目号，由圆和自定义形状中的勾这个形状组合起来的，圆的颜色： #227dac；勾的颜色： #ffffff
列表下的文字字体：Verdana；字号：12px，加粗；颜色： #494949
图片下方的字体：Verdana；字号：12px，倾斜；左侧文字颜色： #227dac，右侧文字颜色： #494949
And again some layer organization. 再组织一下图层
当前的结果：
怎么设计漂亮的网页 第7篇
Create a new layer and draw in a big rectangle about 400px high. This one is used for our header. Fill it with a nice blue gradient from #2787b7 to #258fcd.
See how subtle the color change is?
新建一个图层并画一个大的高400px的矩形（0，130，1200，410）。这个将用于我们的页头。用一个漂亮的蓝色渐变去填充它，颜色从 #2787b7到 #258fcd
以下展示颜色的微妙变化：
怎么设计漂亮的网页 第8篇
网页美工设计中，最常用的几个颜色为蓝色、绿色、橙色，以及暗红色。
蓝为主调。蓝色多与白、橙搭配，。白底，蓝标题栏，橙色按钮或ICON做点缀;蓝天白云，沉静整洁的感觉。
绿为主调。绿色多与白、兰两色搭配。白底，绿标题栏，兰色或橙色按钮或ICON做点缀，绿白相间，雅致而有生气。
橙为主调。橙色多与白、红搭配。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀，橙色活泼热情，标准的商业色调，因此多用于商业网站的网页美工设计。
暗红为主调。暗红色显得宁重、严肃、高贵，需要配黑和灰来压制刺激的红色。黑或灰底，暗红标题栏，文字内容背景为浅灰色。
怎么设计漂亮的网页 第9篇
Create a new layer above the rectangle and set Layer mode to Overlay. Ctrl+click the rectangle layer. Now the rectangle will be selected. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, like shown on the image. This way you create a nice, subtle light effect. Additionally you can link these two layers.
怎么设计漂亮的网页 第10篇
Our header looks a bit plain right now so we’re going to add the same light effect everywhere else on the site. Select the header box (blue). Create a new empty layer above and set the mode to Overlay.
头部看起来有的平淡，因此我们可以在任意位置加相同的亮光效果。选中蓝色的头部区域。在它上面创建一个新层并设置其混合样式为叠加。
Pick a large soft brush 600px, color #ffffff and click a few times in the area under the navigation. Furthermore, to gain more depth, we can switch the color to black and do the same thing just in the bottom part of the header. Give it a try!
怎么设计漂亮的网页 第11篇
New layer. Choose the Rectangle tool again and draw in a thin dark grey rectangle, as shown in the image.
新建图层。再次选择矩形工具，如上图所示画一个瘦长的深灰色矩形（0，0，1200，6），颜色： #454545
怎么设计漂亮的网页 第12篇
Add some footer content and separate it nicely within your grid.
给页脚增加内容，你可以依据网格合理安置它们。
用直线工具画四条直线（130，1346，220，1）、（370，1346，220，1）、（610，1346，220，1）、（850，1346，220，1），颜色： #acacac
在直线的上方用文字工具添加LATEST BLOG ENTRIES、RECENT COMMENTS、ADVERTISING、TWEETER STUFF。文字字体：Verdana；字号：12px，垂直缩放150%；颜色： #e6e6e6
在第一列的下方，建立三个博客条目。左侧的按钮是用圆角矩形，半径5px，尺寸：40px*18px，颜色： #da7203。图层的样式复制上面导航栏中黄色按钮的图层样式
按钮文字的字体：Verdana Bold；字号：9px，加粗、倾斜；颜色： #e6e6e6
按钮右侧文字的字体：Verdana；字号：12px，加粗；颜色： #e6e6e6
下方文字的字体：Verdana；字号：12px；颜色： #e6e6e6
置入对话图片
给它添加颜色叠加的图层样式，颜色： #ff8a00
在第二列的下方，有留言列表
每个列表前有刚才做好的对话图标，右侧的文字字体：Verdana；字号：12px；颜色： #e6e6e6。人名加粗
下面的留言文字字体：Verdana；字号：12px；颜色： #e6e6e6
在第三列的下方，用矩形工具画四个矩形，尺寸：100px*100px，分别是（610，1368）、（730，1368）、（610，1482）、（730，1482）
给他们添加白色的描边
然后添加合适的广告图片，移动每个图片到矩形的上方，右键选择创建剪贴蒙版
在第四列的下方，用圆角矩形工具新建一个圆角矩形（850，1367，221，135），圆角半径为5px
再用多边形工具创建一个正倒三角形
用路径选择工具选择这个三角形，并拖动到合适的位置
再用直接选择工具选择最下面的点，按住Shift，将点上移到合适的位置
最后给该图层添加如下的图层样式
描边的颜色： #fbfbfb
内发光的颜色： #a3a3a3
再把该形状的填充色改成： #eaeaea
在该形状内添加文字，字体：Androgyne；字号：12px；颜色分别是： #cc580f，#b95cef，#494949
在下方添加文字和图标
文字字体：Androgyne；字号：12px；颜色是： #f3f3f3。在下面添加一条白线，颜色： #f3f3f3
在右侧添加图片
给图片添加如下的图层样式，颜色： #2e0909，并将图层的不透明度改为28%
怎么设计漂亮的网页 第13篇
对于网页设计者来说，色彩的心理作用尤其重要，因为用网络是在一种特定的历史与社会条件的环境下，即高效率、快节奏的现代生活方式的条件，这就需要做网页时把握人们在这种生活方式用网络的一种心理需求。
作为网页设计师来说，做到有针对性的用色是相当重要的，因为网站往往是各种各样的，大公司的、政府组织、体育组织、聊天的、新闻的、个人主页等等，不同内容的网页的用色应是有较大的区别，所以要合理的使用色彩来体现出网站的特色，这是高明的做法。
例如：做公司的网页，就不能仅仅使用一些不着边际的颜色来吸引人，而要让人一看到这个网站的用色就立即明确该公司的主题。
怎么能做到这一步呢?我认为要从公司的标准色上入手。
一个公司的CI是灵魂，做网站往往是为了提升公司的形象。因此把表现企业主题的标准色应用到网页中去，一定会给浏览者留下深刻的印象。这就牵涉到标准色的组合应用上，要有一个色彩的基调问题，抓住自己的主色来配以不同的辅色这样既突出了主页的公司的特色，又能使页面呈现丰富多彩(这里要切忌多种色彩并重的“花”的情况)。这只是一种用色的参考，版面设计和内容也能体现出企业的形象，只是色彩更加容易达到引人注目的效果。
做到用色有的放矢之后，我们再回到平面设计上来，因为网页设计实际上就是平面设计，只不过目的性、时效性更强而已。所以我们要把每一次网页设计都看成做平面设计。不过也有一些不同，例如网页的外框是受电脑的屏幕所限制的，具有特定的比例。同时也有一个与电脑的屏幕的颜色的搭配问题，这与普通的平面设计不会受到的任何限制有所不同。但是用色上要求与规律网页设计里是一样的，即色彩的明暗、轻重、冷暖等等，以及调和色和对比色的应用等。
针对不同的主题来布置色彩，如健康类的网站就不能采用较为刺激的大红和黄、橙以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，以及一些不利于健康的联想。
用色往往不是非常单纯的运用，还要考虑诸多因素，例如，访问者的类别：社会背景、心理需求和场合的差异等等，这就要求网页设计者要认真的分析网站的受众的不同，并且要多听取反馈信息，总结他们满意或者是不满意的原因，综合考虑。社会背景不同的人，各人的目的不同，他们对色彩的感受也不同，所以网站的用色就要考虑到多方面的需求，尽可能能的吸引各种的注意力。访问者如果大多是素质较高的人，就应该考虑用色考究，要有一定的品位，有所偏向。
网页设计的用色也要特别的关注流行色的发展。每年日本或者欧美都要发布一批流行色，这是从大量的人们的喜好中挑选出来的，关注它，并有心的研究它，而且努力的将这种观念应用到自己的设计中去，做一个色彩方面的有心人，就会使自己的网页富有朝气，更受欢迎。同时多研究别人的用色，多看一些对网站的网友的评价是相当重要的。做到这一点，能提高自己的色彩品位，多用一些受人喜爱的颜色，这样才能吸引人。
作为一名网页设计师是需要有自己的特色，例如自己钟爱的颜色，用色的一些独特的方面，这种是不要轻易的舍弃。因为没有一点自己的特色的设计师就如同一台机器一样毫无生气，这是一大悲哀!用人喜欢的色彩是不会掩盖设计师的特色的，因为设计师用色往往是在保留自己的用色方式上才去采用一些比较让人接受的颜色。所以我想网页的用色会在这种方式下日趋规范，日趋合理，逐渐让人感到一个又一个如同艺术品一样让人赏心悦目!
怎么设计漂亮的网页 第14篇
To make the active tab more obvious, we’re going to give it a faded white background. To do this first select the whole object and then subtract from the selection to get only the first tab selected.
为了使活动的切换页更加明显，我们将给它添加渐白的背景。为了达到这样的效果我们把整个对象选中然后裁切选区，最终使选中的范围只有第一个按钮。
This is what your selection should look like.
你的选区如下图所示
With a smaller soft brush, paint in a white background.
新建图层，用一个小的软刷，用白色涂抹背景
怎么设计漂亮的网页 第15篇
Time for the navigation. Use the Rounded Rectangle Tool and set the radius to 5px. Draw a rectangle, fill it with #f6a836, and apply the following effects: Inner Shadow – color: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px. Inner glow – Blend mode: normal, color: #ffffff, Size: 4px. Everything else leave default. Stroke – Size: 1px, Position: inside, color: #ce7e01.
开始制作导航栏。用圆角矩形工具，设置半径为5px，画一个圆角矩形（130，92，70，27），颜色： #f6a836，之后给他添加以下效果：
1、内阴影—颜色： #ffffff，混合模式：叠加，不透明度：60%，角度：120，距离：7px，大小：6px。
2、内发光—混合模式：正常，颜色： #ffffff，大小：4px。其他参数默认设置。
3、描边—大小：1px，位置：内部，颜色： #ce7e01。
Now select the rectangle with Ctrl+click. Go to Select > Modify > Contract and enter 1px.
Create a new layer above, set the Blend mode to Overlay and create the same effect described in the Step 5 using a smaller brush size this time. Then add the navigation text. I used Arial for navigation links, all caps and Antialias set to “none”.
在上面新建图层, 把混合模式设置成叠加，然后依照步骤5那样加照亮效果，不过这次用的是小笔刷。然后增加导航栏文字.我用Arial字体作为导航的链接字体，所有效果设置为“无”。
字体：Arial，字号：12点，活动链接的文字颜色： #7b3600，非活动链接的文字颜色： #838383
怎么设计漂亮的网页 第16篇
Next, draw a 10px high rectangle above the footer and add some subtle effect by adding two more lines on top and bottom like shown in the image.
下来，如图所示，在区域上方画一个10像素高的矩形（0，1290，1200，10），颜色： #dcdcdc，并且通过在顶端和底部各多加两条线增强细节处理。
四条线分别是：（0，1290，1200，1），颜色： #a3a3a3；（0，1291，1200，1），颜色： #ffffff；（0，1299，1200，1），颜色： #ffffff；（0，1300，1200，1），颜色： #3e3e3e