正在阅读:Photoshop设计现代风格的企业产品网站Photoshop设计现代风格的企业产品网站

2010-02-08 09:54 出处:PConline原创 作者:PS真功夫 责任编辑:lizhiyan

  本例将利用Photoshop设计现代风格的企业产品网站,生成一个切片前的PSD文件,希望大家喜欢!文章最后提供psd下载。先看看预览:

Photoshop设计现代风格的企业产品网站
效果预览

  建立一个新的Photoshop文档

  1、首先在Photoshop中新建一个文档(Ctrl+N),大小为1200 x 1200像素,背景设为透明。

Photoshop设计现代风格的企业产品网站
图1

  设置头部背景

  2、使用矩形选定工具在透明的背景上画出一个矩形,矩形大小:1200px ×120px

Photoshop设计现代风格的企业产品网站
图2

  3、使用油漆桶工具(G)用任意颜色填充头部刚才选定区域。点开图层样式对话框,用以下设置来增加一个渐变叠加效果。

Photoshop设计现代风格的企业产品网站
图3

  完了,应该出现以下效果:

Photoshop设计现代风格的企业产品网站
图4

  创建内容部分的背景图层

  4、现在我们将要创建图层内容区域的第二部分背景。把前景色设为#00315C,背景色设为#001B32。选择矩形框选定工具(M)选定剩下的透明图层;选定后,选择渐变工具(G),然后设置渐变类型为径向渐变。

Photoshop设计现代风格的企业产品网站
图5

  5、设定好渐变工具(G)后,从顶部的中间垂直的拖动到画布的4/1大小左右。

Photoshop设计现代风格的企业产品网站
图6

  添加参考线

  6、现在我们需要一些参考线保留出宽度为850px的中间内容部分。选择视图 > 新建参考线。在新建参考线对话框中输入175px,取向选择垂直。这样一个画布左边的参考线就做好了。

Photoshop设计现代风格的企业产品网站
图7

  7、重复6的步骤,创建另外一条垂直参考线,不过这次输入1025px (175px + 850px = 1025px)。这样一个850px宽、居中的区域就做好了。

Photoshop设计现代风格的企业产品网站
图8

  设计头部区域

  8、选择横排文字工具(T),然后对其左边参考线边沿添加上页面标题和标语。

Photoshop设计现代风格的企业产品网站
图9

键盘也能翻页,试试“← →”键

关注我们

最新资讯离线随时看 聊天吐槽赢奖品