当前位置: 首页 > 设计教程 > 网页设计教程 > Photoshop设计商务网站布局教程(4)

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

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

创建侧栏

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

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

Photoshop设计商务网站布局教程

在右侧栏添加新闻动态。

Photoshop设计商务网站布局教程

  • 共5页:
  • 上一页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 下一页
  • 上一篇:Photoshop制作碳纤维风格的插入式导航菜单
    下一篇:用Photoshopo制作简单的水晶按钮

    图集推荐

    • 灵感
    • 美图