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

我的网站

Photoshop美工教程:设计清新高雅的网页布局(2)

时间:2010-10-27 21:02来源:网络 作者:未知 点击:
6、添加网站介绍 使用水平 字体 工具(T),在展示区左侧添加网站文字说明,采用Helvetica 或Arial字体进行编辑,确保标题(颜色#FFFFFF)和内容(颜色#2A2A2A)文字

6、添加网站介绍

使用水平字体工具(T),在展示区左侧添加网站文字说明,采用Helvetica 或Arial字体进行编辑,确保标题(颜色#FFFFFF)和内容(颜色#2A2A2A)文字在不同图层。

Photoshop美工教程:设计清新高雅的网页布局

为了使标题更加炫目,按如下设置添加图层样式:

‘阴影’/'渐变叠加’:

Photoshop美工教程:设计清新高雅的网页布局
Photoshop美工教程:设计清新高雅的网页布局
Photoshop美工教程:设计清新高雅的网页布局

接下来,创建”About us”的圆角按钮。再一次选取圆角矩形工具(U),设置半径5PX,文本颜色为#404040,同时在右边有一个箭头图标(Mono图标集中的circleright32),重设它的大小以匹配按钮。

Photoshop美工教程:设计清新高雅的网页布局

在矩形图层上添加以下样式:

‘外发光’/'渐变叠加’:

Photoshop美工教程:设计清新高雅的网页布局
Photoshop美工教程:设计清新高雅的网页布局
Photoshop美工教程:设计清新高雅的网页布局

最后一步是在按钮右边添加花纹,就是这微妙的设计元素增加了此设计的优雅度。下载并安装花纹笔刷(资源区的上方),先设置前景色为#343434,选取画笔工具(B),找到花纹笔刷,在画布上进行一次点击,然后把图层混合模式改为“强光”。

Photoshop美工教程:设计清新高雅的网页布局

7、创建幻灯片区

选取圆角矩形工具(U),前景色为白色,半径为5PX,在展示区右侧生成一个圆角矩形。

Photoshop美工教程:设计清新高雅的网页布局

设置此图层的透明度为15%,以显示背景图案,接着添加’阴影’的图层样式:

Photoshop美工教程:设计清新高雅的网页布局

此刻,我们需要在幻灯片区域添加图片缩略图,你可以找一个网站截图或其它图片,放在白色圆角矩形上方。我们得把图片四角变成圆角,在图层面板,按住cmd/ctrl,点击白色圆角矩形的缩略图,创建一个自动选区,接着选择放图片的图层,去往菜单”选择>修改>收缩”,收缩10px,然后执行”选择>反选”(cmd/ctrl+shift+I)反选选区,最后执行”编辑>清除”。

Photoshop美工教程:设计清新高雅的网页布局

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