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

我的网站

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

时间:2010-10-27 21:02来源:网络 作者:未知 点击:
接下来添加图片描述,在图层面板,按住cmd/ctrl,点击图片图层的缩略图,创建一个自动选区,新建图层,并以黑色填充选区,然后使用圆角矩形选框工具

接下来添加图片描述,在图层面板,按住cmd/ctrl,点击图片图层的缩略图,创建一个自动选区,新建图层,并以黑色填充选区,然后使用圆角矩形选框工具(M),选取新建的黑色矩形的上部分并删除。

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

降低图层透明度到75%,添加简单的文字说明

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

8、在展示区底部添加分隔线

像步骤2一样在展示区底部添加一条灰色、水平分隔线,不同在于还要添加’内阴影’的样式:

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

设计的主内容区的时间到了!

9、给主内容区添加背景

就像预览图一样,主内容区分布为三列,选取矩形选框工具(M),生成画布宽的选区,用颜色(#FBF5EA)进行填充。

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

主内容区的设计其实相当简单,但是要让人看出很简单也要花一定时间完成。我们将从左边开始,放置服务列表。

10、添加列标题

对于我们的列标题,从Mono图标挑选一个象征符号,并放在标题左边,使用字体”Georgia“和颜色(#323232)编辑标题文本。下一步,在文本底部添加弧线边界,这就要用到钢笔工具(P)了,像下图一样创建一条路径。

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

为了给路径描边,设置前景色为文本颜色(#323232),然后选择一个较硬的画笔工具,大小大约为3px。接着打开”路径”面板(窗口>路径),点击面板下方的”用画笔给路径描边”。

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

下面为曲线添加一点渐变,设置”渐变叠加”的图层样式:

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

复制曲线图层,离原图层下方4或5px处,降低透明度到24%。

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

11、为左栏添加内容

设置标题颜色为深灰(#323232),文本内容颜色为一种可读性的灰色(例如:#2A2A2A)。像创建”About us “一样创建”Read More”按钮,对于中间这行,我改变了颜色,一种纯灰色(#484848)用于激活状态下的颜色。

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

12、为中栏添加内容

像左栏一样,添加标题和图标(另外合适的图标)。使用圆角矩形工具(U),设置半径3px,前景色为白色,生成一小型的圆角矩形,在矩形下方添加一些文本和描述。

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

接着为圆角矩形设置图层样式:

‘外发光’/'描边’:

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

然后,在圆角矩形内添加与描述相配的图片。

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

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