忆西风 发表于 2013-12-4 22:27:07

photoshop制作一幅专业web2.0网页布局

在这个photoshop教程中我们将要学习怎么制作一个专业网站的2.0布局，以前我们学习了那么多的photoshop教程，似乎都有些长，那是因为这些教程都是非常详细。我保证只要你跟着去做就会发现很简单，你所要做的只是去试一试。
最终效果预览

http://www.98ps.com/uploads/allimg/c130508/13D01F44430-462062.jpg
详细教程
软件：Adobe Photoshop
版本：CS4
难度：中级
预计完成时间：大约两个小时

步骤1
为了确保能够对齐我们采用960s坐标制（从这里获取）下载打开文件
我们先创建背景图层，在背景层上右击，然后选择背景图层，命名为“bg”。

http://www.98ps.com/uploads/allimg/c130508/13D01F44P-4K0J.jpg

步骤2
我们运用了这么多参考线，所以我们需要打开视图>标尺。

http://www.98ps.com/uploads/allimg/c130508/13D01F44S0-4QJ0.jpg
步骤3
我们要为标题区设置下边框，所以需要在下方100px拖拽一条新的参考线，执行视图——新建参考线，位置：100

http://www.98ps.com/uploads/allimg/c130508/13D01F44U0-493X9.jpg
步骤 4
让我们来创建标题。先创建一个1020*100px的选区，然后按下shift+backspace 填充（可用任何颜色）

http://www.98ps.com/uploads/allimg/c130508/13D01F44920-50YO.jpg
做一个渐变叠加，如下图所示。

http://www.98ps.com/uploads/allimg/c130508/13D01F44940-51L55.jpg
将这个图层命名为“header-bg”。

http://www.98ps.com/uploads/allimg/c130508/13D01F44c0-529192.jpg
步骤 5
输入网站标题，并设置以下文字属性：
字体设置： Rockwell (从这里获取)
字体大小: 30px
字体样式: Regular
反锯齿设置：平滑
颜色：不要紧，因为我们还要执行一个渐变叠加

http://www.98ps.com/uploads/allimg/c130508/13D01F45010-534247.jpg
现在对文本添加渐变叠加，参考下图所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F45050-54R52.jpg
将你的网站标题和标题背景色对齐；同时选择你的标题层和“header-bg”层，然后选择垂直居中。

http://www.98ps.com/uploads/allimg/c130508/13D01F4510-55UA.jpg
步骤 6
导航条字符设置如下：
字体设置：Arial
字体大小: 20px
字体样式: Regular
反锯齿设置：平滑
颜色：#ffffff

http://www.98ps.com/uploads/allimg/c130508/13D01F45130-563932.jpg
创建一个圆角矩形作为一个动态链接，固定大小65*35Px，半径5px，（可用任何颜色填充）。

http://www.98ps.com/uploads/allimg/c130508/13D01F451Z-5O960.jpg
根据下图所示：执行描边，渐变叠加.

http://www.98ps.com/uploads/allimg/c130508/13D01F45230-5Y222.jpg
在我们进行下一步之前，首先要确保你的图层条理清晰，下面展示的是我们的图层面版!

http://www.98ps.com/uploads/allimg/c130508/13D01F452F-595H6.jpg
步骤7
现在我们该创建一个特色的设计空间了。我们先在上一个参考线430px之后添加一个水平的参考线作为下边框。

http://www.98ps.com/uploads/allimg/c130508/13D01F4530-6012Y.jpg
创建一个1020*430px的选区作为特色设计空间的背景，用任何颜色填充。

http://www.98ps.com/uploads/allimg/c130508/13D01F45340-61S30.jpg
然后执行图层样式——渐变叠加，设置参考下图所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F4540-62Q30.jpg
现在让我们添加光泽效果！创建一个1020*120px的选区，用任何颜色填充。

http://www.98ps.com/uploads/allimg/c130508/13D01F454F-6350P.jpg
然后添加渐变叠加，可参考下图设置。

http://www.98ps.com/uploads/allimg/c130508/13D01F45510-641643.jpg
降低图层不透明度到40%

http://www.98ps.com/uploads/allimg/c130508/13D01F455P-A55G.jpg
步骤 8
接下来添加高光！运用单排选取框工具创建一个1像素的选区，如下图所示设置对齐：

http://www.98ps.com/uploads/allimg/c130508/13D01F45620-B2b3.jpg
设置前景色为 #acd86e 然后按下 shift+backspace 填充；要确定是使用前景色作为填充色。

http://www.98ps.com/uploads/allimg/c130508/13D01F45A0-CB18.jpg
我保证你会拥有一个很棒的像素细节。

http://www.98ps.com/uploads/allimg/c130508/13D01F45E0-D2333.jpg
我们已经做好了创建背景的基础，所以我们要给他们命名，使他们系统化，然后把他们组合在一起。

http://www.98ps.com/uploads/allimg/c130508/13D01F45F-E2026.jpg

                                                           
      步骤 9
让我们更精确些！根据下图拖拽两条参考线。

http://www.98ps.com/uploads/allimg/c130508/13D01F45I0-F3246.jpg
输入欢迎语，字符设置如下：
字体设置：Rockwell
字体大小: 40px
字体样式: Regular
反锯齿设置：锐利
颜色：#f4f4f4
http://www.98ps.com/uploads/allimg/c130508/13D01F45P-GS06.jpg
我已经写上了“Here’s our brand new work. Oops Welcome!”但是我们需要以某种方式来强调“Welcome！”这个单词。所以基本上我们先添加一个渐变叠加，如下图所示。

http://www.98ps.com/uploads/allimg/c130508/13D01F45U0-H13P.jpg
现在根据下图所示拖拽两条新的水平参考线。

http://www.98ps.com/uploads/allimg/c130508/13D01F45Z-I5P4.jpg
在我们结束这一步之前，要确定你的文字图层已经组织起来。

http://www.98ps.com/uploads/allimg/c130508/13D01F45930-J3553.jpg
步骤 10
我们先创建一个220*150像素的选区（可用任何颜色填充），这个选区将会作为我们的图像控制区。

http://www.98ps.com/uploads/allimg/c130508/13D01F45960-K9E1.jpg
将这个图层命名为“pic-holder”然后试着将它像上图所示对齐。
描边

http://www.98ps.com/uploads/allimg/c130508/13D01F46010-L1312.jpg
让我们添加一个特征设计中图片，文件>打开图像。把图层命名为“pic”，并且确定放在“pic-holder”的上层。
在“pic”图层上右击并且选择创建剪贴蒙板。

http://www.98ps.com/uploads/allimg/c130508/13D01F46040-MO24.jpg
步骤 11
创建阴影，我们先复制“pic”和“pic-holder”这两个图层。

http://www.98ps.com/uploads/allimg/c130508/13D01F46050-N5632.jpg
选中复制的两个图层，执行编辑>自由变换，然后调整高度为：-100.0%

http://www.98ps.com/uploads/allimg/c130508/13D01F460F-O41a.jpg
当复制的两个图层仍处于选中状态时右击选择转换为智能对象，把这个图层命名为“shadow”，并且确定这个图层是位于底部。

http://www.98ps.com/uploads/allimg/c130508/13D01F4610-PTS.jpg
选择“shadow”层然后单击添加图层蒙版（位于图层面版的底部）。

http://www.98ps.com/uploads/allimg/c130508/13D01F46140-Q6045.jpg
选择渐变工具（G）设置黑、白、黑从下到上拉一个线性渐变。

http://www.98ps.com/uploads/allimg/c130508/13D01F4620-R13X.jpg
你应该会得到下面的图像。

http://www.98ps.com/uploads/allimg/c130508/13D01F46220-S22E.jpg
步骤 12
我们需要为图像添加一个说明，先创建一个240*25像素的选区，填充颜色值：#1a1919，作为说明的背景。

http://www.98ps.com/uploads/allimg/c130508/13D01F46260-TI40.jpg

输入说明文字，字符设置如下：
字体设置：Arial
字体大小: 15px
字体样式: Regular
反锯齿设置：None
颜色：#82aa48

http://www.98ps.com/uploads/allimg/c130508/13D01F462P-U55B.jpg
确定你的文件简洁！

http://www.98ps.com/uploads/allimg/c130508/13D01F46310-V4a1.jpg
步骤 13
复制一份特色图像然后右对齐。

http://www.98ps.com/uploads/allimg/c130508/13D01F46340-WJ60.jpg
我们将要在中部做一个大一些的图，我们先创建一个340×200px的选区，如下图所示对齐，用任何颜色填充。

http://www.98ps.com/uploads/allimg/c130508/13D01F463F-XYD.jpg
以下图作参考，执行描边 。

http://www.98ps.com/uploads/allimg/c130508/13D01F4640-Y5953.jpg
下图是我们做到这一步的效果。

http://www.98ps.com/uploads/allimg/c130508/13D01F46430-Z1596.jpg
确定你的图层系统化并且已经重组。 我已经创建了三个组，下图是它们的样子

http://www.98ps.com/uploads/allimg/c130508/13D01F46460-915439.jpg
步骤 14
现在让我们来创建滑动按钮！我们先运用椭圆选区工具（M）创建一个50*50的选区，用任何颜色填充。

http://www.98ps.com/uploads/allimg/c130508/13D01F464Z-92F14.jpg
添加图层样式，如下图所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F4A40-93UP.jpg
运用自定义形状工具(U) 创建一个箭头样式，然后如下图所示给它添加图层样式。

http://www.98ps.com/uploads/allimg/c130508/13D01F4AZ-945224.jpg

你看到的图将会是这个样子：


http://www.98ps.com/uploads/allimg/c130508/13D01F4B30-956342.jpg
不要忘了对齐你的按钮，如下图所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F4BP-961963.jpg
复制另一个箭头然后右对齐。

http://www.98ps.com/uploads/allimg/c130508/13D01F4C10-aU57.jpg

                               
      步骤 15
我们来一起制作内容区域，首先创建一个1020×815px的选区。

http://www.98ps.com/uploads/allimg/c130508/13D01F4C60-b3251.jpg
设置颜色值为： #e8e8e8，然后按下Shift+Backspace t填充选区。

http://www.98ps.com/uploads/allimg/c130508/13D01F4D20-c9454.jpg
运用单行选框工具 (M) 创建1px 的选区，位置如下图所示，然后填充白色(#ffffff)。

http://www.98ps.com/uploads/allimg/c130508/13D01F4D60-100B02.jpg
现在一个很棒的像素细节就制作出来了！

http://www.98ps.com/uploads/allimg/c130508/13D01F4DZ-101J52.jpg
步骤 16
我们需要给内容区域设置一个上边界，所以我们在50像素下面拖拽了一条新的参考线。
下载标志设置Basic Set ? Pixel Mixer，位置如下图所示。

http://www.98ps.com/uploads/allimg/c130508/13D01F4E10-1025109.jpg
在标志下方拖拽一条新的参考线, 距离20Px再拖拽一条新的参考线。
输入标题，字符设置如下：
字体类型: Rockwell
字体大小: 29px
字体粗细: Regular
反锯齿设置：Sharp
颜色: #81aa48

http://www.98ps.com/uploads/allimg/c130508/13D01F4EP-10395K.jpg
如下图所示拖拽两条参考线。

http://www.98ps.com/uploads/allimg/c130508/13D01F4F50-1043B4.jpg
输入一些文本，字符设置如下：
字体类型: Arial
字体大小: 15px
字体粗细: Regular
反锯齿设置： None
颜色: #2f3235

http://www.98ps.com/uploads/allimg/c130508/13D01F4FZ-10512X.jpg
如下图所示再拖拽三条参考线

http://www.98ps.com/uploads/allimg/c130508/13D01F4G40-1064322.jpg
步骤 17
现在我们来创建一个“read more” 按钮，运用圆角矩形工具 (U) 创建一个大小为 100×30px，半径为5px 的圆角矩形，用任何颜色填充。

http://www.98ps.com/uploads/allimg/c130508/13D01F4GP-10HJ4.jpg
参考下面图像，给图层添加图层样式。

http://www.98ps.com/uploads/allimg/c130508/13D01F4H40-10S108.jpg
运用椭圆工具(U)创建一个15×15px的椭圆，填充颜色为： #4d4d4d.
为了能够正确地对齐，我们先选择椭圆所在的图层和矩形所在的图层，当两个图层都被选定，单击对齐水平中心。

http://www.98ps.com/uploads/allimg/c130508/13D01F4I0-10a0H.jpg
按下 “+”, 填充白色 (#ffffff) 位置如下图所示。

http://www.98ps.com/uploads/allimg/c130508/13D01F4I40-11093I.jpg
输入文字 “read more” ，字符设置如下：
字体类型: Tahoma (get it from here)
字体大小: 12px
字体粗细: Regular
反锯齿设置： None
颜色: #ffffff

http://www.98ps.com/uploads/allimg/c130508/13D01F4IF-1113523.jpg
添加阴影。参考下图设置。

http://www.98ps.com/uploads/allimg/c130508/13D01F4J20-1125295.jpg
步骤 18
创建一个垂直的分隔符，运用直线工具(U) 创建两条紧挨着的线，填充颜色值为 #ffffff ? #b3b3b3.

http://www.98ps.com/uploads/allimg/c130508/13D01F4JF-1134340.jpg
对齐这两条线如下图所示

http://www.98ps.com/uploads/allimg/c130508/13D01F4K10-1141447.jpg
不要忘了组织你的图层，看一下我的图层。

http://www.98ps.com/uploads/allimg/c130508/13D01F4K50-115a93.jpg
步骤 19
重复三次以上两个步骤，然后效果如下图所示！

http://www.98ps.com/uploads/allimg/c130508/13D01F4K60-1163223.jpg

                               
      步骤 20
让我们来创建一个分隔符
在50px之后拖拽一条新的参考线。

http://www.98ps.com/uploads/allimg/c130508/13D01F4L0-11J617.jpg
用椭圆先框工具 (M) 创建一个选区如下图所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F4L30-11Q400.jpg

设置前景色为(#000000)，然后按下 Shift+Backspace填充选区，将图层命名为“separator_bg”。


http://www.98ps.com/uploads/allimg/c130508/13D01F4LP-119E36.jpg
为了使它有模糊的效果，执行文件> 模糊 > 高斯模糊? 半径：3px.

http://www.98ps.com/uploads/allimg/c130508/13D01F4M30-120B23.jpg
选择 “separator_bg” 图层，创建一个选区然后删除。

http://www.98ps.com/uploads/allimg/c130508/13D01F4M60-121MX.jpg
单击添加图层蒙版标志然后设置渐变编辑器为黑，白，黑。

http://www.98ps.com/uploads/allimg/c130508/13D01F4N0-1224134.jpg
用渐变工具 (G) 根据下图所示拖拽一个线性渐变。

http://www.98ps.com/uploads/allimg/c130508/13D01F4N40-1235412.jpg
降低图层透明度度为50%。

http://www.98ps.com/uploads/allimg/c130508/13D01F4O0-1245116.jpg
用直线工具(U) 在分隔符顶部创建两条水平线，把place them right above the separator.
填充颜色为：#b3b3b3 ? #ffffff ，然后为他们添加同样的图层蒙版。

http://www.98ps.com/uploads/allimg/c130508/13D01F4O30-1259193.jpg
步骤 21
我们现在要制作下方的内容区域，距离50px 拖拽一条新的水平参考线。

http://www.98ps.com/uploads/allimg/c130508/13D01F4P40-12ER3.jpg
输入标题，字符设置如下：
字体类型： Rockwell
字体大小： 30px
字体粗细： Regular
反锯齿设置：Smooth
颜色： #81aa48

http://www.98ps.com/uploads/allimg/c130508/13D01F4Q10-12Ma5.jpg
如下图所示拖拽两条新的水平参考线。

http://www.98ps.com/uploads/allimg/c130508/13D01F4Q60-12VJ2.jpg
输入一些文字字符设置如下：
字体类型： Arial
字体大小： 14px
字体粗细： Regular
无锯齿设置：None
颜色： #505150

http://www.98ps.com/uploads/allimg/c130508/13D01F4R10-12b962.jpg
距离160px拖拽一条新的参考线作为内容区域的下边界。

http://www.98ps.com/uploads/allimg/c130508/13D01F4S40-1309550.jpg
步骤 22
输入另一个标题和文本，字符设置同上个步骤。

http://www.98ps.com/uploads/allimg/c130508/13D01F4SZ-131S14.jpg
用键盘输入一个引号，字符设置如下：
字体类型：Arial
字体大小：200px
字体粗细：Regular
反锯齿设置：Smooth
颜色： #505150
降低图层透明度度为50%。

http://www.98ps.com/uploads/allimg/c130508/13D01F4T20-1325X1.jpg
输入一些你自己的或者是引用的话，字符设置如下
字体类型： Arial
字体大小：14px
字体粗细：Italic
反锯齿设置： Smooth
颜色：#81aa48

http://www.98ps.com/uploads/allimg/c130508/13D01F4TF-13322Y.jpg
步骤 23
为了创造一个垂直的分隔线，我们创建两条紧挨着的线，线条颜色分别设置为：#ffffff ? #b3b3b3.

http://www.98ps.com/uploads/allimg/c130508/13D01F4U0-1343H8.jpg
确定你的图层组织起来，看一下我是怎么组织它们的。

http://www.98ps.com/uploads/allimg/c130508/13D01F4U40-1353259.jpg

                               
      步骤24
像左边一样输入另一个标题 （尝试着写一些东西代表团队，比如，我写下了“Our Team”)

http://www.98ps.com/uploads/allimg/c130508/13D01F4UF-1361334.jpg

用矩形工具 (U)创建一个90×90px 的矩形，然后以任何颜色填充，命名这个图层为“photo1_holder”。
这个区域将会作为团队成员的展示区。执行描边，参考如下图所示。


http://www.98ps.com/uploads/allimg/c130508/13D01F4V10-13L960.jpg

放置团队成员的一张图片，命名这个图层为“photo1″，确定图层 “photo1″是在“photo1_holder”图层的上方，然后右击 “photo1″图层选择添加剪贴蒙版， 你会看到如下图所示的样子。


http://www.98ps.com/uploads/allimg/c130508/13D01F4V60-13Y235.jpg
步骤 25
输入一些关于团队成员的文字，字符设置如下：
字体类型： Arial
字体大小：14px
字体粗细：Regular
反锯齿设置 Smooth
颜色：#7ba344

http://www.98ps.com/uploads/allimg/c130508/13D01F4W10-13941R.jpg
我们将创造社会媒体图标。先从博客开始，输入“t”字符设置如下：
字符类型： Pico-Black (get it from here)
字体大小：30px
字体粗细： Regular
反锯齿设置：Smooth
颜色： #2fcfff
参考下图设置执行描边。

http://www.98ps.com/uploads/allimg/c130508/13D01F4W50-140H43.jpg
让我们再创建一个LinkedIn的连接图片！输入“in”并设置以下文字属性：
字体类型： Myriad Pro (get it from here)
字体大小：30px
字体粗细：Bold
反锯齿设置 Smooth
颜色：#0081ac

http://www.98ps.com/uploads/allimg/c130508/13D01F4WP-1412596.jpg
Facebook!? 输入“f”并设置以下文字属性：
字体类型： Klavika (get it from here)
字体大小：30px
字体粗细：Bold
反锯齿设置 Smooth
颜色：#395796

http://www.98ps.com/uploads/allimg/c130508/13D01F4X30-142C93.jpg
步骤 26
复制成员照片创建一个图层，选中图层，执行图层> 新建调整层> 黑白
检查确定是“使用先前的图层创建剪贴蒙版”。

http://www.98ps.com/uploads/allimg/c130508/13D01F4XP-1433261.jpg
输入同样的文字，我们写的社会媒体图标使用和以前相同的字符,但是给他们所有的颜色值:# 505150。

http://www.98ps.com/uploads/allimg/c130508/13D01F4XZ-1441S2.jpg
悬停在上方，明显的成员看起来不会是灰色。
复制两份对齐如下图所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F4Y40-1455221.jpg
确定它们是对齐的， 要创建四个独立的组，而且每个组要包括每个成员的内容。选中四个组，在控制柄处单击分散排列左边界。

http://www.98ps.com/uploads/allimg/c130508/13D01F4YP-1461548.jpg
我已经组织了我的图层，你呢？

http://www.98ps.com/uploads/allimg/c130508/13D01F4Z20-14OW0.jpg
步骤 27
在我们开始制作社会媒体链接内容之前，需要设置一引起边界，这就是我们要拖拽新的参考线的原因，如下图所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F4Z30-14Y029.jpg
创建一个940×70px 的选区，如下图所示对齐：

http://www.98ps.com/uploads/allimg/c130508/13D01F4Z50-1494640.jpg
用任何颜色填充，添加渐变叠加，参考下图设置：

http://www.98ps.com/uploads/allimg/c130508/13D01F4Z60-1501A4.jpg
创建一个70×45px的选区。参考下面图片设置然后添加图层样式，将图层命名为“tw_bg”。

http://www.98ps.com/uploads/allimg/c130508/13D01F4910-151WK.jpg
将图层 “tw_bg”设置为不可见。
创建一个10×43px的选区，然后编辑>变换 > 斜切。调整控制柄选项。
X: 40px
Y: 1253px
V: -39
将图层命名为 “effect” 然后将“tw_bg”图层可见。

http://www.98ps.com/uploads/allimg/c130508/13D01F49140-1524a9.jpg

按照“tw_bg” 的图层样式给“effect”图层调整图层样式.

http://www.98ps.com/uploads/allimg/c130508/13D01F491P-1533624.jpg
输入字母 “t” 并设置以下文字属性：
字体类型： Pico-Black
字体大小：35px
字体粗细：Regular
反锯齿设置：Smooth
颜色：不要紧，因为我们还要添加一个渐变叠加。

如下图所示，给图层添加图层样式。

http://www.98ps.com/uploads/allimg/c130508/13D01F49220-1542V8.jpg

                               
      步骤 28
重复第20步再创建一个分隔符或者直接复制，所放位置如下所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F492F-1556110.jpg
我们需要把矩形的右边给切掉，我们选中“tw_bg”图层然后单击添加图层蒙版。
在矩形右边做一个选区(我们需要给切掉的) ，设置前景色为黑色(#000000)然后按下 Shift+Backspace填充。

http://www.98ps.com/uploads/allimg/c130508/13D01F49330-1564E3.jpg
步骤 29
输入一些文字—实际上应该是一个Tweet— 并设置以下文字属性：
字体类型： Arial
字体大小：15px
字体粗细：Regular
反锯齿设置：Smooth
颜色：#222222

http://www.98ps.com/uploads/allimg/c130508/13D01F493P-15MH2.jpg
为了使文本对齐，同时选中文字图层和the green bar layer，然后单击垂直中心对齐。

http://www.98ps.com/uploads/allimg/c130508/13D01F49420-15VH3.jpg
步骤 30
重复第27步创建一些图形如下图所示， 同时创建一个矩形，填充以颜色值#334814 ，然后调整不透明度为40%。

http://www.98ps.com/uploads/allimg/c130508/13D01F494P-15931c.jpg

给大矩形添加图层样式，设置参考下图所示：


http://www.98ps.com/uploads/allimg/c130508/13D01F49510-160XN.jpg
给the skewed rectangle填充一个暗些的颜色值：#2a6788

http://www.98ps.com/uploads/allimg/c130508/13D01F49550-1616034.jpg
输入“t”，并设置以下文字属性：
字体类型： Pico-Black
字体大小：35px
字体粗细：Regular
反锯齿设置 Smooth
颜色：#2fcfff
描边，参考下图所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F495Z-1623493.jpg
确定你的图层系统化并且组合好了。

http://www.98ps.com/uploads/allimg/c130508/13D01F49640-1639206.jpg
步骤 31
复制另一个the Twitter icon， 调整上面的颜色 (大矩形) 为： #0080ab, 然后填充the skewed rectangle 的颜色值为：#00526d.

http://www.98ps.com/uploads/allimg/c130508/13D01F49E0-164Q18.jpg
输入文字“in” 并设置以下文字属性：
字体类型： Myriad Pro
字体大小：35px
字体粗细：Bold
反锯齿设置 Smooth
颜色：white (#ffffff)

http://www.98ps.com/uploads/allimg/c130508/13D01F4a30-1A9314.jpg
创建三份the Twitter或获得图标,更改叠加颜色(大长方形):# 395796,填补倾斜矩形这个颜色值为:# 263e6f。

http://www.98ps.com/uploads/allimg/c130508/13D01F4b20-1BD64.jpg
输入文字“f”，并设置以下文字属性：
字体类型： Klavika
字体大小：35px
字体粗细：Bold
反锯齿设置 Smooth
颜色：white (#ffffff)

http://www.98ps.com/uploads/allimg/c130508/13D01F4b40-1C5459.jpg
再复制一份，更改叠加颜色(大长方形):#e8e8e8,填补倾斜矩形这个颜色值为:# cdcdcd。

http://www.98ps.com/uploads/allimg/c130508/13D01F4bP-1DJ47.jpg
输入文字“fr”，并设置以下文字属性：
字体类型： Frutiger Black (get it from here )
字体大小：35px
字体粗细：Bold
反锯齿设置 Smooth
颜色：f: #0079d2 ? r: #ff3093

http://www.98ps.com/uploads/allimg/c130508/13D01F4c40-1E2063.jpg
把图标分别放在每一个分隔组里，然后选中这四个图标单击分散左边。

http://www.98ps.com/uploads/allimg/c130508/13D01F4cF-1F6204.jpg

                               
      步骤 32
让我们继续，现在只剩下页脚了。创建一个1020×460px 的选区，以任何颜色填充。

http://www.98ps.com/uploads/allimg/c130508/13D01F50010-1G4032.jpg
添加渐变叠加，参考下图设置。

http://www.98ps.com/uploads/allimg/c130508/13D01F500Z-1H9413.jpg
现在你应该拥有一个很漂亮的阴影。

http://www.98ps.com/uploads/allimg/c130508/13D01F50150-1I45a.jpg
wi运用单排选框工具(M) 创建一个1px 的选区然后填充白色(#ffffff)。

http://www.98ps.com/uploads/allimg/c130508/13D01F5020-1J6022.jpg
步骤 33
参照下图所示拖拽两条新的水平参考线。

http://www.98ps.com/uploads/allimg/c130508/13D01F50240-1K6310.jpg
输入一个标题，并设置以下字符属性：
字体类型： Rockwell
字体大小：30px
字体粗细：Regular
反锯齿设置 Sharp
颜色：#7ea547

http://www.98ps.com/uploads/allimg/c130508/13D01F502Z-1L5O1.jpg
输入一个sub-title，字符属性设置如下：
字体类型： Arial
字体大小：15px
字体粗细：Regular
反锯齿设置： None
颜色：#d3d3d3

http://www.98ps.com/uploads/allimg/c130508/13D01F50330-1M35K.jpg
运用线性工具 (U)在顶部创建两条水平线，然后设置颜色值为：#151515 ? #2f2f2f.

http://www.98ps.com/uploads/allimg/c130508/13D01F503Z-1Nc51.jpg
如下图所示对齐：

http://www.98ps.com/uploads/allimg/c130508/13D01F50430-1OUR.jpg
步骤 34
参照下图所示拖拽两条新的水平参考线。

http://www.98ps.com/uploads/allimg/c130508/13D01F504F-1P94S.jpg
运用圆角矩形工具 (U) 创建两个210×25px半径 5px 的矩形，填充颜色为： #141313，设置阴影。

http://www.98ps.com/uploads/allimg/c130508/13D01F504Z-1Q2514.jpg
在这两个矩形里面输入文本，设置文字属性如下：
字体类型： Arial
字体大小：15px
字体粗细：Regular
反锯齿设置： None
颜色：#7ea547

http://www.98ps.com/uploads/allimg/c130508/13D01F50520-1R3c3.jpg
创建另一个矩形如上图所示，但是这个高度调整为： 110px依然在里面输入文字，属性设置同上，复制我们在第17步制作的按钮，然后对齐它如下图所示：

http://www.98ps.com/uploads/allimg/c130508/13D01F50540-1S6311.jpg
步骤 35
如同左边，我们在右边也输入同样的标题。

http://www.98ps.com/uploads/allimg/c130508/13D01F50560-1T6120.jpg
输入文字，并参考下图设置。

http://www.98ps.com/uploads/allimg/c130508/13D01F50610-1U9437.jpg
把你所做的复制两份。

http://www.98ps.com/uploads/allimg/c130508/13D01F50C0-1V64X.jpg
步骤 36
输入第三个标题和一些文字来填充右边的部分。

http://www.98ps.com/uploads/allimg/c130508/13D01F50D0-1W1Y9.jpg
现在你的页脚应该像这个样子：

http://www.98ps.com/uploads/allimg/c130508/13D01F50G0-1X3S1.jpg
步骤 37
我们现在应该到这一步了！向下50px拖拽一条新的水平参考线。

http://www.98ps.com/uploads/allimg/c130508/13D01F50K0-1YVS.jpg
在每个顶部创建两条水平线，设置颜色为#181818 ? #2f2f2f.

http://www.98ps.com/uploads/allimg/c130508/13D01F50M0-1Z30X.jpg
输入一些关于版权的文字，并设置以下文字属性：
字体类型：Arial
字体大小:15px
字体粗细：Regular
反锯齿设置： None
颜色：white (#ffffff) ? #82aa48

http://www.98ps.com/uploads/allimg/c130508/13D01F50P-1913937.jpg
运用这些字符设置，输入write a sub-navigation.

http://www.98ps.com/uploads/allimg/c130508/13D01F50T0-1923F1.jpg
要确保你的图层条理清晰，并且都已经组合起来，下面看到的是我们的样子！

http://www.98ps.com/uploads/allimg/c130508/13D01F50W0-193P16.jpg
总结：
现在我们已经做好了，我们已经创造了一个专业WEB2.0网页布局。正如你所看到的,这里的方法很简单，却能做出很好的效果。

http://www.98ps.com/uploads/allimg/c130508/13D01F50930-194YK.jpg

酆俊雅 发表于 2013-12-4 22:27:35

传说中的沙发？？？哇卡卡

袁淳雅 发表于 2013-12-7 12:47:34

无论是不是沙发都得回复下

锺楠楠 发表于 2013-12-8 15:45:00

OMG！介是啥东东！！！

席安琪 发表于 2013-12-12 22:45:11

支持你哈...................................

花清嘉 发表于 2013-12-23 11:30:35

楼下的接上

隗春娇 发表于 2014-1-13 16:51:34

看起来好像不错的样子

丌官灵雨 发表于 2014-1-19 16:54:37

LZ是天才，坚定完毕

顾菱凡 发表于 2014-1-22 09:26:45

佩服佩服！

卫梦云 发表于 2014-1-27 19:28:50

路过的帮顶

全雪戈 发表于 2014-3-6 21:27:32

为毛老子总也抢不到沙发？！！

通菁英 发表于 2024-11-3 12:36:05

好，很好，非常好！

穆野雪 发表于 2025-2-4 09:50:26

为毛老子总也抢不到沙发？！！

西门彬 发表于 2025-4-12 13:25:13

发发呆，回回帖，工作结束~

西门彬 发表于 2025-5-14 09:07:10

看起来好像不错的样子

单于力 发表于 2025-5-17 12:14:36

very good

元慕旋 发表于 2025-5-23 13:41:52

楼猪V5啊
页: [1]
查看完整版本: photoshop制作一幅专业web2.0网页布局