用Photoshop制作960网格的网页模板(7)插图

用Photoshop制作960网格的网页模板(7)

网格设计呢,通常显得很整齐规范,有时看上去也比较专业。但网格设计相对来说也是比较复杂的,往往需要精准的测量和栏目划分。960 Grid System/960网格系统,这是一套可以让你快速创建网格设计的工具,之所以叫960

用Photoshop制作960网格的网页模板(2)插图

用Photoshop制作960网格的网页模板(2)

新建图层,大小为填充中间的10等份,并与左右剩余的两个等份相距5像素。填充为为黑色。 接着新建一个图层,为左右各添加白到黑色的渐变色,效果如下: 删除中间的黑色图层。

广告位
用Photoshop制作960网格的网页模板(6)插图

用Photoshop制作960网格的网页模板(6)

我们再给这些图片加上一个像素天蓝色边框,在网页切割时候我们可以直接写CSS就可以了。 加上其他文字,我们自己做960 Grid System就完成了! 本实例其实制作起来非常简单,主要是根据960 Grid System的布局,把握好

用Photoshop制作960网格的网页模板(5)插图

用Photoshop制作960网格的网页模板(5)

好下面我们来对应一下十等份的位置! 底色并复制 右侧添加75*75像素的图片

用Photoshop制作960网格的网页模板(4)插图

用Photoshop制作960网格的网页模板(4)

为了使读者知道在第几页,我们把当前标签换一个颜色。 添加RSS阅读标签的图片。 . 插入头图、文字

用Photoshop制作960网格的网页模板(3)插图

用Photoshop制作960网格的网页模板(3)

接下来把中间的十等份全部删除吧。当然,你可以隐藏中间的十等份,下面的操作可以参考这十等份来调节位置。 添加一条竖立的虚线,在网页制作的时候,这条虚线可以使用dashed border来制作,这里只是用ps来做效果而

用Photoshop制作960网格的网页模板插图

用Photoshop制作960网格的网页模板

网格设计呢,通常显得很整齐规范,有时看上去也比较专业。但网格设计相对来说也是比较复杂的,往往需要精准的测量和栏目划分。960 Grid System/960网格系统,这是一套可以让你快速创建网格设计的工具,之所以叫960,就是说模板的宽度是960像素。而之所以用960像素来做为标