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

我的网站

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

时间:2011-02-07 21:02来源:思源论坛 作者:未知 点击:
创建导航和网站标题 使用圆角矩形工具,半径为10px,拖出一般按钮大小的圆角矩形作为导航链接。 不管用什么颜色填充,然后与topbar图层合并,得到的效

创建导航和网站标题

使用”圆角矩形工具”,半径为10px,拖出一般按钮大小的圆角矩形作为导航链接。

Photoshop设计商务网站布局教程

不管用什么颜色填充,然后与”topbar”图层合并,得到的效果如下:(我按照作者说的操作,没有得到下图效果,只是把圆角矩形的图层样式改为”topbar”的图层样式)

Photoshop设计商务网站布局教程

在”topbar”下方添加其它导航链接,圆角矩形作为某链接动态时的形状。

Photoshop设计商务网站布局教程

在导航链接下添加网站标题和标语,字体选择的是”quicksand”,(在此下载)对于前两个字母以红色填充,剩下的字母为深灰色。

Photoshop设计商务网站布局教程

创建产品服务盒

创建产品服务盒之前,在”header”图层底部边缘新建两条1px的水平线,分别为黑白两色,完成后设置图层透明度为40%

Photoshop设计商务网站布局教程

选取”圆角矩形工具”,半径仍为10px,在网站标题下拖出一个大约250px高的矩形,直到”contact us”右边缘为止。

Photoshop设计商务网站布局教程

为此矩形设置以下图层样式

1)阴影

Photoshop设计商务网站布局教程

2)斜面与浮雕

Photoshop设计商务网站布局教程

3)渐变叠加

Photoshop设计商务网站布局教程

4)描边

Photoshop设计商务网站布局教程
Photoshop设计商务网站布局教程

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