【使用Photoshop+960 Grid System模板进行网页设计】的更多相关文章

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

前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法.今天,暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符合960网格系统的网页效果图. 网格设计呢,通常显得很整齐规范,有时看上去也比较专业.但网格设计相对来说也是比较复杂的,往往需要精准的测量和栏目划分.960 Grid System/960网格系统,这是一套可以让你快速创建网格设计的工具,之所以叫960,就是说模板的宽度是960像素.而之所以用960…

与960 Grid System相关的那些问题

为什么是960px? 一直以来,网页设计师都希望寻找一个理想的页面宽度值,既能适应大部分屏幕,又尽可能的在一行显示更多的信息. 我们首先会考虑的是全屏自适应,但这并非一个好的解决方案.一方面,需要做一个能适应各个宽度的设计,从背景图片,到每个栏目标题的文字长度,都需要考虑到适应多变的宽度:另一方面,也是最致命的一点,相比英文单词,中文方块字是没有起伏的,用户对文字位置记忆的依赖性更大.自适应宽度也就意味着一行显示的文字数是不定的,阅读中文文字块时很可能很难一下找到刚才读到的那个地方现在到哪去了.…

compass安装使用960 Grid System

960 Grid System 是一个CSS的页面布局框架 demo:  http://960.gs/demo.html 前提:安装Ruby .NodeJS 步骤1:在命令行下安装css插件: gem install compass-960-plugin 步骤2:创建my_project项目: compass create -r ninesixty my_project --using 960 在页面中引用该css <head>  <link href="/stylesheet…

PS网页设计教程XXIV——从头设计一个漂亮的网站

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的文字显示.…

PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的文字显示.…

PS网页设计教程——30个优秀的PS网页设计教程的中文翻译教程

PS网页设计教程--30个优秀的PS网页设计教程的中文翻译教程   作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 下面是本系列的30个优秀PS网页设计教程的翻译教程,本人历时一年有余,翻译了这些教程.在翻译的过程中,重新截了中文版的图,也修正了一些参数,并给出了一些更好的技法的建议,更加适合新手上手练习,适合初学者临摹学习,也可以给有一定基础的设计者做个参考. 在这儿和广大网友交流,大家互相学习,…

BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新.简洁;要素…

960 grid 分析

960 网格系统的构造如下:页面总宽度 960px12 栏布局, 每栏 60px每栏两边保留 10px 的外边距, 相当于 20px 的槽内容区域总宽度是 940px 960 布局无疑是非常好的网格系统, 因为相当灵活. 它帮助网页设计者快速地构造以下栏栅数目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用. 为什么960? 1024 x 768 的分辨率下,打开F…

Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G​

全书共15章,主要包括网页制作基础.Dreamweaver CC网页制作.Photoshop CC网页图像设计.Flash CC网页动画设计以及综合案例实战5个部分.通过本书的学习,不仅能让读者学会三大软件的基本操作,而且本书中列举的实战案例,还可以让读者举一反三,在实战工作中用得更好. 此外,本书还提供了丰富的栏目板块,如专家提醒.核心妙招和长知识.这些板块不仅丰富了本书的知识,还可以教会读者更多常用的技巧,提高读者的实战操作能力. 本书浅显易懂,指导性较强,主要定位于希望快速进入网页设计领域…

Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G

全书共15章,主要包括网页制作基础.Dreamweaver CC网页制作.Photoshop CC网页图像设计.Flash CC网页动画设计以及综合案例实战5个部分.通过本书的学习,不仅能让读者学会三大软件的基本操作,而且本书中列举的实战案例,还可以让读者举一反三,在实战工作中用得更好.  此外,本书还提供了丰富的栏目板块,如专家提醒.核心妙招和长知识.这些板块不仅丰富了本书的知识,还可以教会读者更多常用的技巧,提高读者的实战操作能力.  本书浅显易懂,指导性较强,主要定位于希望快速进入网页设计…