使用Photoshop+960 Grid System模板进行网页设计

960-grid-system-photoshop

前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法。今天,暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符合960网格系统的网页效果图。


网格设计呢,通常显得很整齐规范,有时看上去也比较专业。但网格设计相对来说也是比较复杂的,往往需要精准的测量和栏目划分。960 Grid System/960网格系统,这是一套可以让你快速创建网格设计的工具,之所以叫960,就是说模板的宽度是960像素。而之所以用960像素来做为标 准,是因为960像素宽具有高度的灵活性。今天我们就来教大家制作一个960 Grid System的网页模板。(960 Grid System官方网站:http://960.gs/)

960 Grid System的特性是将960像素的网页分为12列的布局和16列布局。12列布局将总宽分成12份,每份的宽度是60px,而16列的布局分成16份,每份的宽度是40px,每部分左右边距都是10px,从而每列产生20px的空隙。

如果您对其他CSS框架也很感兴趣或想了解更多CSS框架,您可以参考《精选15个国外CSS框架》。

最终效果图

960 grid system + Photoshop

设计步骤

按照960 Grid System的定义,我们找一张960像素,12等份,每部分左右边距都是10px。这里缩小了图片,大家做的时候按照960像素去切割,去960 grid system官方网站可以下载布局好的素材。(参见”960 grid system”的官方网站介绍。)

960-grid-system-网页设计

新建图层,大小为填充中间的10等份,并与左右剩余的两个“等份”相距5像素。填充为为黑色。

960-grid-system-模板

接着新建一个图层,为左右各添加白到黑色的渐变色,效果如下:

960-grid-system-网页设计

删除中间的黑色图层。

960-grid-system-网页设计

接下来把中间的十等份全部删除吧。当然,你可以隐藏中间的十等份,下面的操作可以参考这十等份来调节位置。

960-网格系统

添加一条竖立的虚线,在网页制作的时候,这条虚线可以使用dashed border来制作,这里只是用ps来做效果而已。

960-grid-system-网格系统

完成文字和导航,导航的位置这里可以参考之前“十等份布局”的大约位置来布局。

960-grid-system-网格

为了使读者知道在第几页,我们把当前标签换一个颜色。

960-网格-系统

添加RSS阅读标签的图片。

960-grid-system-网格系统

插入头图、文字

960栅格系统

960-grid-system

960-grid-system

好下面我们来对应一下十等份的位置!

960-grid-system-photoshop

底色并复制

960-grid-system

右侧添加75*75像素的图片

960-grid-system

我们再给这些图片加上一个像素天蓝色边框,在网页切割时候我们可以直接写CSS就可以了。

960-grid-system-17

初步效果

960-grid-system

加上其他文字,我们自己做960 Grid System就完成了!

960-grid-system

总结

本实例其实制作起来非常简单,主要是根据960 Grid System的布局,把握好每一个元素的定位。

留意更新

订阅彬Go以查看前端开发/CSS框架最新教程及资源。

本文来源:互联网

10 Comments

发表评论

  • 960 grid的一些资料 - Teddy's
    2011-08-31

    […] 使用Photoshop+960 Grid System模板进行网页设计 […]

  • 960 Grid System相关问题 | Designprototype
    2011-05-26

    […] 《960网格系统(翻译)》 《960 Grid System 基本原理及使用方法(翻译) 》 《使用Photoshop+960 Grid System模板进行网页设计 》 […]

  • 与960 Grid System相关的那些问题 | Dreamer
    2010-11-28

    […] 《960网格系统(翻译)》 《960 Grid System 基本原理及使用方法(翻译) 》 《使用Photoshop+960 Grid System模板进行网页设计 》 […]

  • 匿名
    2010-09-14

    这个教程只是使用了960的宽度而已啊~!至于网格系统的严密布局根本还完全触不了边!

  • 匿名
    2009-03-18

    请教个问题,设计出来如何切割,如何应用到860框架上啊。关键的地方都没有说哦。

  • seo
    2009-01-14

    博主是学设计的吧,主页不错

  • fandt
    2009-01-14

    和CSSRain有同感。

  • 匿名
    2009-01-14

    彬GO
    Good Work!
    我是刚接触网页界面设计,苦于找不到太多的网页界面设计的资料比如说视频类的。。 不知道可否提供一些。
    如果可以的话请发至我的邮箱:ViewFelicity@live.cn
    谢谢了。。

  • CssRain
    2009-01-13

    前几天 就跟我们组的GUI说过 类似的。

    这样一来,就能节约我们输出HTML人员的时间 了,因为只要数格子就知道距离,另外GUI也能设计出比较规矩的 PSD。

    现在的距离还是要去算,或干脆目测。 经常会有 1 – 5 px左右的差距。

  • 匿名
    2009-01-13

    学习了,还不知道Framework的用处还可以来设计页面啊。。
    不错。。Thanks