Post Pic

photoshop教程–创建清新、色彩生动的网页布局(下)

接上篇“pphotoshop教程–创建清新、色彩生动的网页布局(中)

最终效果图:

清新的网页设计教程

第二十一步:新建蓝色矩形

  1. 在组“导航”下新建组(图层>新建>组),组命名为“案例”,再新建组放置在“案例”中,并命名为“背景”
  2. 选取矩形工具(U),颜色设置为#219aad,创建宽度为983px,高度为273px的蓝色矩形,(提示:打开(按F8)信息面板,查看宽度和高度),设置此图层的透明度为55%,命名为“bg4”

3. 在photoshop中打开在上篇中一开始要保存的第二张图片“像素化的蓝色矩形”,把图片移动到此文档中,并且覆盖蓝色矩形,同样也设置透明度为55%,命名为“bg3”。

4. 按住ctrl键,点击“bg4”中的矢量蒙版缩略图以选中此蒙版

5. 新建图层,放在“bg3”上方,命名为“bg2”,选取渐变工具(G),画一个颜色#56b8e5到透明的渐变,方向是从选区底部到选区头部,然后按ctrl+d撤消选区 

6、新建图层,放在图层“bg2”上方,命名为“bg1”,选取矩形选框工具(M),像下图一样创建选区,宽度为983px,高度43px     

7、选取渐变工具(G),画一个颜色#0f2b42到颜色#2a607f的渐变,方向是从选区底部到选区头部,然后按ctrl+d撤消选区

第二十二步:“注册”与“了解更多
1.新建组“注册按钮”,放在组“背景”上方,选取圆角矩形工具(U),设置半径2px,像下图一样新建圆角矩形(82*38),并设置如下图一样的图层样式(注意:shap2图层的透明度是100%) 

 2.  重复步驟1创建“了解更多”的按鈕,并且增加一层,添加箭头,选取自定义形状工具(U)中的第二个箭头形状,像下图一样创建箭头

第二十三步
1. 新建组,命名为“左箭头”,放在组“了解更多按钮” 上方,选取椭圆工具(U),新建颜色为#406F94的圆,并设置“内阴影”和“描边”的图层样式

2. 新建图层,选取自定义工具(U)中的箭头形状,创建白色箭头,并设置图层样式“阴影”,透明度为50%
 

 3. 重复步骤2,在右边也创建同样的箭头

第二十四步
1. 在组“案例”中新建组,命名为“图片”,在组里放置一张小图片,双击图层,设置如下图的图层样式“外发光”

2. 新建组,选取字体工具(T),在蓝色矩形左边添加文字说明(这个得自己发挥了),组命名为“文字”。

 第二十五步:创建内容区
1. 新建组,放在组“案例”下面,命名为“内容”,在此组里再新建一组“阴影”,选取矩形工具(U),创建一白色矩形(983*181),图层命名为“白色形状”,透明度为90%。
 

2. 像二十一步中的第4点一样,选中“白色形状”的图层蒙版,然后新建图层,命名为“头部阴影”,选取渐变工具(G),画一个颜色为#8f8f8f到透明的渐变,方向为选区的头部到选区的底部,设置图层透明度为50%,然后选取移动工具(V),按键盘上的向下的方向键两次

  

3. 新建图层,选取矩形选框工具(M)像下图一样新建选区(273*180)。选取渐变工具(G)画一个颜色#8f8f8f到透明的渐变,然后取消选区,以下图为参考。

4. 添加图层蒙版(图层>图层蒙版>显示全部),使用大一点的黑色软笔刷(我用的是27px),涂在阴影中间部分上面,设置图层透明度为30%,命名为“垂直阴影1”,复制(ctrl+j)图层“垂直阴影1”,移动至右边,重命名为“垂直阴影2”。  

5. 选取线条工具(U),新建重1px,颜色为#aebcc7的水平线,将图层转换为智能对象(右击图层,在下拉菜单中选择“转换为智能对象”)图层命名为“水平线”。

6. 选取字体工具(T),编辑网站内容,您也可以使用图片或别的来替换

第二十六步:创建网站底部内容
1. 新建组“底部”,并新建图层,选取矩形选框工具(M),新建选区(982*88)。

2. 设置前景色为#555555,选择一大的软笔刷(我选的是100px),沿着选区头部边缘进行涂画,撤消选区,设置图层透明度为50%,并命名为“渐变”。

最终的“渐变”将是这个样子:

3. 新建图层,选择单行选框工具,新建一选区,并以白色填充。按ctrl+d撤消选区。转到菜单 图层>图层蒙版>显示所有,选取一大点的黑色软笔刷像下图一样遮住图层,以下图为参考。设置图层透明度为15%,命名为“直线”。

 
4. 添加底部文字说明。

这个大制作终于完功了,里面的字体设置什么的还需要各位看客们多担待!最终效果图:

参考上篇中篇    下载PSD文件

Google AdSense


10 Responses

01.04.10

终于看完了,看来这回事沙发,lol!

01.04.10

3篇终于完了。学习了。

01.04.10

很欣赏 “木枫” 的翻译
自己做了弄中文图给大家看
这么长的一篇

好久没有更新了.

01.04.10

非常不错

01.04.10

如果能出一个视频教程就更好了、呵呵

01.04.10

连内容本身都翻译,这个真的有点画蛇添足了,保持原味就好…译者貌似完全不懂网页设计?文字的使用太出乎意料了…呵呵,无恶意,一点建议而已…

01.04.10

初次翻译,难免会有些粗糙,你提的建议下次我会注意的。谢谢!

01.04.10

加油,木枫!
我们都在努力!

谢谢John的建议

01.04.10

网页设计需要和性能结合起来的,如果纯粹是图片,界面效果虽然漂亮绚丽,但还是不是最好的。

评论这篇教程

* 昵称, Email, 评论为必填内容

关于ps真功夫

ps真功夫专注国外photoshop教程的翻译,还包括国外优秀设计资源的分享。欢迎大家加入我们的qq交流群34873740讨论,进入ps真功夫介绍了解更多详情。

加入ps真功夫大家庭

ps真功夫是一个爱好photoshop的大家庭,旨在介绍和翻译国外优秀photoshop教程以及精品资源的分享,欢迎ps爱好者以及英语翻译爱好者加入我们人人为我,我为人人。