Photoshop设计简洁风格的网页模板

时间:2012-07-26 09:39 来源:未知 作者:admin 点击:
:Photoshop设计简洁风格的网页模板 本教程主要使用Photoshop设计简洁风格的网页模板,详细介绍如何使用960栅格系统设计网站界面。该栅格系统会优化网站设计流程。下面让我们一起来学习吧 终效果预览 1.新建文档 参数:宽1680px、高1100px,背景亮灰色(#F9F9
:Photoshop设计简洁风格的网页模板
本教程主要使用Photoshop设计简洁风格的网页模板,详细介绍如何使用960栅格系统设计网站界面。该栅格系统会优化网站设计流程。下面让我们一起来学习吧

终效果预览

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网

1.新建文档

参数:宽1680px、高1100px,背景亮灰色(#F9F9F9)

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网

2.添加网格

网上有很多栅格系统可供下载,是我们建立属于自己的栅格系统好的参考。如果你以前没有使用过栅格系统,本文就是简单的入门。它让你的工作变得轻松而有章可循,是原型布局得力的助手。

下载960栅格系统,地址http://960.gs/

下载完成后,来到“templates”文件夹,使用photoshop打开960pix宽、12列栅格。

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网

下面我们要把栅格导入到我们的工作文档。选择“12列栅格”图层组,拼合图层组并复制粘贴进工作文档。

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网

现在我们需要基准栅格。基准栅格是元素留白、行高等取值的重要参考。首先,新建文件,宽搞均为24px,删除背景,新建一条1px高度的单线,置于画布底部。定义图案:编辑-定义图案,给图案起一个容易记忆的名字。

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网

返回工作文档,新建图层,填充图案:编辑-填充,使用刚才定义图案进行填充。

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网

后,我们要使用参考线标记我们的工作区域。新建参考线:视图-新建参考线,选择“垂直”,在360px、840px、1320px新建参考线。

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网

3.开始设计

现在栅格系统建立完成,可以开始设计了。我们把整个网站分成5个大部分:

1.页眉

2.插图

3.内容区-左

4.内容区-右

5.页脚

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网


:Photoshop设计简洁风格的网页模板

4.添加页眉

我们习惯于自上而下的设计。选择矩形选择工具,绘制一个横贯整个画布宽度的矩形选区,高度120px。打开标尺工具能保证绘制的准确度,120px高刚好占到5个垂直方向的栅格,然后填充深灰色(#2C2C2C)。这个页眉主要用于放置logo和导航栏。

Photoshop设计简洁风格的网页模板,PS教程,思缘教程网

5.插入你的logo

在页眉的左上方插入logo,对齐到第二列栅格,这样就给了网站40px的内边距。本项目Logo字体我采用50pt Century Gothic,填充亮蓝色(#ADC7D9),通过对文字“grid”加粗、填充白色来跟前面的文字“blue”区分。接下来给Logo添加内阴影效果,降低内阴影不透明度到25%,距离:2px、大小:5px。

分享到:
云南新华电脑学校专业职业规划师为你提供更多帮助

相关文章

发表评论
评价:
验证码: 点击我更换图片
咨询中心
咨询电话:0871-68211888,QQ:800068988

在线咨询 预约报名
新华云课堂
电话咨询 顶部