PS派教程网 - PS教程 | Photoshop教程 | 数码暗房

Photoshop制作漂亮的网页-960网格系统

时间:2011-12-26 18:22来源:未知 作者:PS314 点击: 关键词:网格系统,网页
本教程将简单介绍利用Photoshop配合960网格系统,制作一个漂亮的网页。这种设计方式,将借助一个宽度为960像素的模板,将网页分成不同区域,从而简化了Web开发的工作流程。

960网格系统 (960 Grid System)是目前比较流行的一种 Web 网页设计模式。该系统非常适合网页效果图的制作,你可以轻松的设计出一张简单而又标准的网页效果图。960网格系统图样会提供HTML和CSS代码,因此,写代码的时候,960网格系统同样出色。

 
本教程的目的是让你创建一个属于你自己的960网格系统,熟悉这种方法以后,你可以轻而易举的完成许多复杂的布局。
 
960 Grid System 官方网站:http://960.gs
教程来自:http://www.tutorial9.net
 

效果图

PS制作网页_960网格系统_效果图
 

第 1 步 - 创建一个新的文档

打开 Photoshop ,创建一个1680px的宽度和高度 1100px的新文件,然后填充一个非常浅灰色(#F9F9F9)的背景。
 
PS制作网页_960网格系统_新建文档
 

第 2 步 - 添加网格

登录官方网站下载960网格系统 。
下载完成后,解压缩,有许多文件夹,其中templates文件夹是本PS教程所使用的文件夹。
打开 templates 文件夹,有许多字文件夹,这些文件夹以软件的名称命名,里面保存着适合各中软件的960网格系统。
其中的 photoshop 文件夹,是本教程的素材文件,里面包含3个PSD文件:
960_grid_12_col.psd
960_grid_16_col.psd
960_grid_24_col.psd
 
这3个文件分别将960像素的网格分成了12、16、24条子网格。
本教程将会以960_grid_12_col.psd为模板进行讲解。
用 Photoshop 打开该文件。
 
PS制作网页_960网格系统_源文件
 
拼合图像,复制图层到我们刚刚新建的文件当中。利用Photoshop的移动工具,使其水平居中,并利用Photoshop自由变换工具,向顶部和底部拉伸,使其布满整个画布。
 
PS制作网页_960网格系统_拼合图像
 
现在我们需要一个基线网格。 基线网格,将有助于网站个元素的排版。
首先创建一个新的文件 24x24px,背景为透明。
然后借助于Photoshop的但行选择工具或者直线工具,绘制沿文档底部的一个单一的 1px的线。 
我们将定义为一种图案: 编辑 ->定义图案 ,并给他一个名字。
 
PS制作网页_960网格系统_自定义填充图案
 
返回刚刚网页文档,新建一个图层,
执行图案填充——编辑 -> 填充,找到刚刚自定义的图案,模式为正片叠底,填充画布。
这样我们的网页文档就有了基线。
 
PS制作网页_960网格系统_基线
 
最后,我们将使用参考线标示出我们的工作区。 
创建一条参考线:视图 -> 新建参考线;
建立垂直360px,840px,1320px,的3条参考线。
 
PS制作网页_960网格系统_参考线
 
另存为模板。
这样我们再次设计网页时,直接打开此文件即可。

责任编辑:PS314

第 1 页 - 共 5 页
顶一下
(41)
69.5%
踩一下
(18)
30.5%
------分隔线----------------------------

搜索

高级