使用Photoshop+960 Grid System模板进行网页设计
作者：暴风彬彬 来源：彬Go 发布时间：2009-02-28 13:44:00
标签：photoshop,960,grid,system,模板,设计
前几天彬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的空隙。
最终效果图
0
投稿猜你喜欢
本教程介绍一些比较明鲜丽色彩的调色方法。大致过程：运用调色工具把照片的色调调统一，基本上1-2种主色即可。然后再适当的调亮及修饰细节即可完成- 曾几何时，创建彩色半调效果是何等耗神费力的活儿。首先要在PS里打开图片转成灰度，再应用彩色半调滤镜，然后还要再次在AI里打开文件，最后使用实
- 英文教程来源于：psdtuts 作者：Collis 翻译：高小白 。第一部分–背景这个教程的制作有三个部分–背景，文字本身和一些
- 本教程介绍人物转手绘的一些比较基础的操作。大致的过程：先给人物磨皮及美白，然后处理人物的五官和头发。最后就是后期的细节处理，如加黑线，添加高
- 本例我们介绍运用PS设计制作一个汽车类网站头部的过程，先将素材图片图片进行抠图、合成、调整，然后制作出网页的背景，将制作好的素材图拖入，最后
- 教程明细软件: Adobe Photoshop CS3 难度:中等预计完成时间: 3-4小时最终效果图作为设计人员，我们偶尔需要使用数码设备
- 我们将学习如何在photoshop中使用简便快捷的方式绘制逼真的月亮效果。第一步根据下面的设置创建新的ps文件.现在,我们开始绘制背景.点击
- 天语A158绝妙体验招贴海报教程。先看一下最终效果： 1.新建一个文件，参数如图1所设。 图12.制作背景图画。利用“矩形工具”在画面绘制同
- 在这个教程中，我将向大家展示如何用Photoshop快速创建一个简单流行的字体效果，我们将使用笔刷，混合模式，基本的滤镜，如何模糊和液化。很
- 原图抠图之后的效果教程步骤如下打开原图 选择快速选择工具 可以得到比直接用魔术棒工具细致一些的选区先将选区储存到通道中 以方便后
- 本教程介绍个性名片的制作方法。制作的时候分为两部分来做，背景及装饰部分。里面有很多细小部分需要有耐心去完成。颜色及装饰可以按照自己喜好选择。
- 本教程作者没有提供详细的过程介绍图，不过有详细的调色机滤镜的详细参数说明。制作的过程不太复杂，按照作者的提示操作都可以做出来。制作的过程中有
- AI 处理干净精准的矢量图形可谓是得心应手、游刃有余，但有时我们不想要干净精准的风格。许多插图作品是粗略或手绘风格的。使用 AI 的实时描摹
- 网格设计呢，通常显得很整齐规范，有时看上去也比较专业。但网格设计相对来说也是比较复杂的，往往需要精准的测量和栏目划分。960 Grid Sy
- 水平有限，翻译难免有误，请有心的朋友给予指出，以方便更多朋友阅读。这是我众多网站界面设计教程中的一个，是专门为10Steps.sg写的。我们
- 本教程是借助数位板来鼠绘。鼠绘的方法跟平常的一样，从线稿开始，然后慢慢上色，再处理细节。虽然思路比较简单，不过鼠绘的过程是非常复杂和精细的。
- Fireworks是网页原型和网页效果图设计利器，在最新的CS5版本中，新增了如下的功能：1、自定义笔刷，Fireworks CS5终于能够
- 偶然发现了比较详尽的ps插件介绍，主流插件大概都囊括在内。我就转过来了。大家根据介绍各取所需，大部分都能在百度搜索到安装文件下载链接。插件介
- 注：本人修改了教程中部分的步骤，某些操作采用了自认为更简便或效果更好的操作，如果有不懂的或者有所指正，欢迎留言~谢谢大家！最终效果图预览：第
- 前言：刚认识PS的时候，就看到了动作，但一直不知道是做什么用的。后来才制作，原来我们需要做重复的东西，动作就非常用的上，而且功能强大。我们还
