使用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的空隙。
如果您对其他CSS框架也很感兴趣或想了解更多CSS框架,您可以参考《精选15个国外CSS框架》。
最终效果图
设计步骤
按照960 Grid System的定义,我们找一张960像素,12等份,每部分左右边距都是10px。这里缩小了图片,大家做的时候按照960像素去切割,去960 grid system官方网站可以下载布局好的素材。(参见”960 grid system”的官方网站介绍。)
新建图层,大小为填充中间的10等份,并与左右剩余的两个“等份”相距5像素。填充为为黑色。
接着新建一个图层,为左右各添加白到黑色的渐变色,效果如下:
删除中间的黑色图层。
接下来把中间的十等份全部删除吧。当然,你可以隐藏中间的十等份,下面的操作可以参考这十等份来调节位置。
添加一条竖立的虚线,在网页制作的时候,这条虚线可以使用dashed border来制作,这里只是用ps来做效果而已。
完成文字和导航,导航的位置这里可以参考之前“十等份布局”的大约位置来布局。
为了使读者知道在第几页,我们把当前标签换一个颜色。
添加RSS阅读标签的图片。
插入头图、文字
好下面我们来对应一下十等份的位置!
底色并复制
右侧添加75*75像素的图片
我们再给这些图片加上一个像素天蓝色边框,在网页切割时候我们可以直接写CSS就可以了。
初步效果
加上其他文字,我们自己做960 Grid System就完成了!
总结
本实例其实制作起来非常简单,主要是根据960 Grid System的布局,把握好每一个元素的定位。
http://blog.bingo929.com/photoshop-960-grid-system-web-design.html(感谢彬GO)
转载于:https://www.cnblogs.com/zytrue/p/8493495.html
使用Photoshop+960 Grid System模板进行网页设计相关推荐
- CSS Framework 960 Grid System (收)
CSS框架 :960 Grid System 官网:http://960.gs/ 什么是框架?框架是一种你能够使用在你的web项目中概念上的结构.CSS框架一般是CSS文件的集合,包括基本风格的字体 ...
- compass安装使用960 Grid System
960 Grid System 是一个CSS的页面布局框架 demo: http://960.gs/demo.html 前提:安装Ruby .NodeJS 步骤1:在命令行下安装css插件: gem ...
- css框架之960 Grid System 基本原理及使用方法
关于CSS框架其实一直是一个比较热门且很有争议的话题,的确,国内的一些前端er们越来越关注CSS框架,并都开始尝试使用,觉得CSS框架能够节省更多的开发时间,显著提高工作效率.当然,还有很多人持相反意 ...
- HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
- HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
- web网页设计与开发:个人明星介绍主题网站设计——张艺兴(10页) HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 网页设计作业...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
- html5模板区别,网页设计和平面设计理念的六大区别
1. 设计理念的不一样 平面设计的核心是品牌.它要以品牌为出发点去设计,要在视觉上100%体现品牌的魅力. 而网页设计的核心是用户.网站的目的是与用户100%沟通,是要实现某些特定的功能,这有点像电脑 ...
- photoshop 切片 html 图片路径,PS网页设计中切片使用教程
第12章网页设计中的应用 ps是设计行业的"全能型选手".除了在传统设计中起到了中流砥柱的作用,在网页设计行业也有很好的表现.使用ps的网页设计工具及相关功能,可以轻松创建网站图像 ...
- 学校网页设计成品 基于HTML+CSS+JavaScript仿山东财经大学官网 学校班级网页制作模板 校园网页设计成品
- PS网页设计教程XV——如何在Photoshop中创建一个充满活力的作品集的网页设计
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
最新文章
- nodejs pm2使用
- mysql多条件查询_使用dsum轻松搞定多条件查询,学会它,再也想用sumifs了
- 3D模型在网页上显示
- Python:名片管理系统
- 调研了100+开源博客,发现这5个最好用!
- 需求管理与分析——需求池
- ubuntu安装jdk
- 使命召唤16计算机内存不足,使命召唤16出现一个问题怎么解决
- 判断参数并赋予默认值
- 为什么JavaScript中给变量赋值会影响到其他地方?
- lodop 使用教程之图文详解 + 详细方法/参数的配置说明
- Idea终端中无法使用maven命令问题解决
- 怎样用关系代数表达式表示查询要求?求过程
- matlab熵权法,matlab—熵权法
- 用php语言说句情话,最甜蜜的情话句子(精选50句)
- Hadoop之图解MapReduce与WordCount示例分析
- 初学Python-反射 装饰器 面向对象编程 异常处理 断言
- 关于anchor的解释
- 聘大佬、秀技术、搞开源,开发者说:小米「很技术」
- Allegro通孔焊盘制作