PS设计教程网欢迎你!

Photoshop设计商务网站布局教程(4)

文章来源于 PS真功夫,感谢作者 PS真功夫翻译 给我们带来经精彩的文章!
设计教程/PS教程/设计教程2010-03-15
下部分需要一些图标,红色的最适宜,可以从Dryicons.com网站进行下载. 在每部分的文字说明之间,添加分隔线,由两条1px的直线组成,一条挨着另一条,颜色从左到右为黑色和白色。新建图层,选取单列选框工具,点击一

下部分需要一些图标,红色的最适宜,可以从Dryicons.com网站进行下载.

Photoshop设计商务网站布局教程

在每部分的文字说明之间,添加分隔线,由两条1px的直线组成,一条挨着另一条,颜色从左到右为黑色和白色。新建图层,选取”单列选框工具”,点击一下画布,然后选取”矩形选框工具”,选取类型为”交叉选取”。

Photoshop设计商务网站布局教程

给选区填充黑色,照此方法再新建一条白色竖线,完成后设置图层混合模式为”柔光”。

Photoshop设计商务网站布局教程

在每个段落下方,创建一个小型圆角红色按钮。

Photoshop设计商务网站布局教程

创建侧栏

在产品服务盒下方创建新图层,并且像上述创建分隔线一样再创建一条分隔线,对准第二个和第三个服务盒之间那条分隔线。如下所示:

Photoshop设计商务网站布局教程

挨着侧栏分隔线,用”矩形选择框工具”创建选区,宽度不用太宽。

Photoshop设计商务网站布局教程

选择”渐变工具”进行从黑到透明的线性渐变,从左到右(越过选区)拖出此渐变,完成后设置透明度为15%。

Photoshop设计商务网站布局教程

给侧栏分隔线和刚才新建的渐变图层添加图层蒙版,然后再次拖出同样的线性渐变,方向是从元素底部到头部,如下所示:

Photoshop设计商务网站布局教程

在右侧栏添加新闻动态。

Photoshop设计商务网站布局教程

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa