织梦CMS - 轻松建站从此开始!

我的网站

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

时间:2011-02-07 21:02来源:思源论坛 作者:未知 点击:
下部分需要一些图标,红色的最适宜,可以从Dryicons.com网站进行下载. 在每部分的文字说明之间,添加分隔线,由两条1px的直线组成,一条挨着另一条,颜

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

创建侧栏

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

在右侧栏添加新闻动态。

Photoshop设计商务网站布局教程

(责任编辑:RGB)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容