Photoshop设计简约风格的wordpress模板

这此photoshop网页设计教程,我们将学习如何制作一个整洁简约风格的WordPress网页模板.我们将使用到960网格系统作为模板,使网页上的设计元素更加容易对齐.

预览(创作之前先预览我们将完成的作品效果,点击图片放大.)

创建新的psd文件

1 我们将会用到960 网格系统作为起始模板.下载之后开的文件名为960_grid_12_col.psd 的文件并且隐藏名为12_col_grid的组.

创建背景

2 第一步,在图层面板选择背景图层单击右键重命名,这将会使图层解锁并且可以编辑,在这里我将背景图层命名为bg.

3 选择渐变工具,设置前景色为: #efefef ,背景色为#cacaca.在选项条选择径向渐变.在画步上拉开一个与此类似的渐变.

设计顶部区域

4 拖动一条水平的参考线到50px的位置上作为头部的边界线.这也是网页头部区域位置的标志.

5 加上标题和口号;选择横排文字工具,打上你网站的名字和宣传口号.这里可以可以参考我用到的样式:

“YourName”

字体: Nilland font (get it from dafont.com)

字体大小: 33pt

字体重量: Bold

反锯齿设置: 浑厚

颜色: #525252

“some awesome slogan”

字体: Arial

字体大小: 14pt

字体重量: Regular

反锯齿设置: 浑厚

颜色: #207687

6 将字体对齐到左上角.使用你的参考线精准定位.

创建导航

7 选择横排文字工具根据以下设置打上导航文字(home, about us, services, portfolio, and contact):

字体: Arial

字体大小: 17pt

字体重量: Regular

反锯齿设置: 浑厚

颜色: #525252

8 根据下图使用文件的参考线对齐导航链接的文字: