你是否曾经想过设计一个漂亮的网页,但是却不知道怎样入手
说实话,几年前我也是这样
当我浏览网页的时候我看到这么多好看的网页,我就希望自己有技术创作这样的设计作品
今天我可以这么做了,而且我将教你怎么做这样的设计
从根本上,对于这种设计你需要一点 photoshop 的操作技能和观察细节的能力
通过以下的教程,我将会指出其中极细微的细节之处,而这些细节讲使你的网页设计漂亮起来
打开 photoshop,我们开始啦
正文 先看效果图 第一步 — 下载 9 6 0 网格模板 我一直以来做的设计几乎全部是基于 960 网格模板的
因此在我们开始创作之前,先下载这个模板
你能在 960
gs 上找到这些模板
下载之后解压 zip 里面关于 PSD 的模板
你会发现有两种规格: 一个是 12 栏式的而另一个是 16 栏式的
他们的区别就像名字所说的,一个是按 12 栏分布一个按 16 栏
更详细的介绍一下吧, 如果你的设计里面分 3 个区块你就选择 12栏式的,那是因为 12 能被 3 整除; 同理假如你的设计分四个区块, 你可以选 12 栏式或者 16栏式,那时因为 12 和 16 都可以被 4 整除
你会发现这个技巧将用于下面教程
第二步 — 构造你想象的结构 在我们打开PSD 网格模板创作前, 我们首先需要先构造一下想象中的结构
从上面的这张图,你可以看出来:因为在一个排版中又有排版,所以这是一个有点复杂的结构
第三步 构造了结构之后我们继续
打开16 栏式的 PSD 模板文件
打开 “图像 >画布大小”
把画布的宽度设置为 1200px 高度设置为 1700px
把背景色设置为 #ffffff 既白色
第四步 用长方形工具在顶部画一个宽 1 0 0 %高大概 8 0 p x 的长方形
用颜色: #dddddd 填充它
第五步 在长方形那层