热门网页设计教程文章推荐

广告赞助商

主页 > 网页教程 > 网页设计教程 > INTRODUCE

新手必看的网页构图,网页设计教程

2012-12-19 21:43 作者:admin 来源:未知 浏览: 我要评论 (条) 字号:

摘要:新手必看的网页构图,网页设计教程 最终效果预览 1.新建文档 参数:宽1680px、高1100px,背景亮灰色(#F9F9F9) 2.添加网格 网上有很多栅格 系统 可供下载,是我们建立属于自己的栅格系统最好的参考。如果你以前没有使用过栅格系统,本文就是简单的入门。它让你

新手必看的网页构图,网页设计教程 最终效果预览



1.新建文档
参数:宽1680px、高1100px,背景亮灰色(#F9F9F9)

2.添加网格
网上有很多栅格系统可供下载,是我们建立属于自己的栅格系统最好的参考。如果你以前没有使用过栅格系统,本文就是简单的入门。它让你的工作变得轻松而有章可循,是原型布局最得力的助手。
下载960栅格系统,地址http://960.gs/
下载完成后,来到“templates”文件夹,使用photoshop打开960pix宽、12列栅格。

下面我们要把栅格导入到我们的工作文档。选择“12列栅格”图层组,拼合图层组并复制粘贴进工作文档。

现在我们需要基准栅格。基准栅格是元素留白、行高等取值的重要参考。首先,新建文件,宽搞均为24px,删除背景,新建一条1px高度的单线,置于画布最底部。定义图案:编辑-定义图案,给图案起一个容易记忆的名字。

返回工作文档,新建图层,填充图案:编辑-填充,使用刚才定义图案进行填充。

最后,我们要使用参考线标记我们的工作区域。新建参考线:视图-新建参考线,选择“垂直”,在360px、840px、1320px新建参考线。

3.开始设计
现在栅格系统建立完成,可以开始设计了。我们把整个网站分成5个大部分:
1.页眉
2.插图
3.内容区-左
4.内容区-右
5.页脚

4.添加页眉
我们习惯于自上而下的设计。选择矩形选择工具,绘制一个横贯整个画布宽度的矩形选区,高度120px。打开标尺工具能保证绘制的准确度,120px高刚好占到5个垂直方向的栅格,然后填充深灰色(#2C2C2C)。这个页眉主要用于放置logo和导航栏。

5.插入你的logo
在页眉的左上方插入logo,对齐到第二列栅格,这样就给了网站40px的内边距。本项目Logo字体我采用50pt Century Gothic,填充亮蓝色(#ADC7D9),通过对文字“grid”加粗、填充白色来跟前面的文字“blue”区分。接下来给Logo添加内阴影效果,降低内阴影不透明度到25%,距离:2px、大小:5px。

6.添加导航
导航栏我们采用以文字为主的列表形式,这样可以营造干净整洁的视觉效果。选择18pt Arial写入导航栏文字,“Home”使用白色,其他文字都使用亮灰色(#BBBBBB)。调整页眉所有的元素垂直居中对齐。

7.添加插图区
我把这一部分称作插图区是根据他的用途来命名的-他展示了页眉的主要信息。重复页眉的做法绘制矩形选区,高度240px,然后填充跟logo一致的亮蓝色(#ADC7D9)。我们来添加渐变填充,混合模式“叠加”,不透明度30%。

8.创建插图区背景
公司名为“Bluegrid”,为了突出主题,我们创建一个栅格背景。使用跟前面创建基准栅格相同的办法。新建文件宽高均为25px,删除北京,绘制1px的单线置于画布的底部和右边缘,然后定义图案。

9.添加插图区背景
在所有图层上方新建图层,编辑-填充,使用新定义的图案填充。

旋转15°,应用白色叠加。新建空白图层,跟白色栅格图层拼合并命名为“grid”。

混合模式选择“柔光”,按住Ctrl键单击插图区背景层取得选区,ctrl+Shift+I反选后删除多余的栅格。

(责任编辑:admin) 新手必看的网页构图,网页设计教程
顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
特别说明

转载教程《新手必看的网页构图,网页设计教程》请注明出处:网页设计制作教程 http://wy.logozhizuowang.com 谢谢!
下载地址:

◎ 广告赞助

◎最新评论
      谈谈您对该文章的看
      表  情:
      评论内容:
      评论昵称: 点击我更换图片
      * 请注意用语文明且合法,谢谢合作 审核后才会显示! Ctrl+回车 可以直接发表

      ◎ 阅读说明READ EXPLANATION

      ☉推荐使用第三方专业下载工具下载本站软件,使用 WinRAR v3.10 以上版本解压本站软件。
      ☉如果这个软件总是不能下载的请点击报告错误,谢谢合作!!
      ☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
      ☉如果遇到什么问题,请到本站论坛去咨寻,我们将在那里提供更多 、更好的资源!
      ☉本站提供的一些商业软件是供学习研究之用,如用于商业用途,请购买正版。