Fireworks设计网页平面稿入门
先看最终效果图：
下面开始讲解：
1.布局
先来说一下 我们制作网页一般的大小
高度：没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。
宽度：
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001
注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
所以如果是1024的分辨率，你的网页不如设成1000安全一点。
如果是800的分辨率一般都设成770。
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右,1024的设定990左右.
我这样用辅助线和标尺把大概范围划分出来,注意我的划分,正好是770,和1000的地方,应为我要做的网站是1024分辨率下的,但是考虑到依然可能存在800分辨率的用户,所以我回把主要的内容和菜单都放置在770以内,770-1000的地方放一些辅助的东西,这个习惯特别是在做一些门户网站设计的时候更要考虑以下,毕竟改善用户体验也是我们要考虑的问题.
2.开始工作
我们继续讲解,现在我们来画上部菜单部分的内容,其实很简单拉,就是画一个方框,一个圆,然后组合,加上渐变就可以了,如下图设置
3.下面我们来画哪个类似徽章的东西
其实也很简单,创意是类似奖状上贴的哪个获奖标志一样,会让网站生动一点
我们选择多边形,如图:
设置如下,继续贴图,大家要注意一下图层顺序,拖动到下层就好了
要注意,这个图层我们固定了以后通常就不动了,所以要锁定,不然鼠标晃来晃去很容易把图移位,注意图层那里点一下就多了一个小锁子,方便吧,这下他就彻底不干扰我们了!
好的我们继续,其实其他的东西都大同小异
我们来研究一下细节：
我最喜欢的就是firewroks超级多的纹理,在ps里面有些纹理要自己做真的好麻烦啊!我最喜欢的对角线
看页面左边的渐变部分,其实就是拉出来了一个矩形,然后加上线性的渐变,然后加上对角线的纹理,稍微调整一下透明度,就这么简单,效果却很好看,嘿嘿
下一个小地方,就是产品资讯的背景框,其实也很简单
就是一个矩形,然后外框为红色,矩形加一个内部发光,发浅灰色的光,就这样就成了
下一个地方 就是右上角大家可以看到一个类似网格的底纹
其实就是一个矩形，再加上一个蒙版，一个渐变，就ok了，现在看起来是不是生动很多
OK，看图：
就这样一个网站的平面设计三下五除二的就搞定了！
相关推荐
-
Fireworks设计网页平面稿入门
先看最终效果图: 下面开始讲解: 1.布局 先来说一下 我们制作网页一般的大小 高度:没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值. 宽度:1.在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003.但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框.2.在Firefox下,宽度的分率辨减19.比如1024的宽度-19就变成10053.在Opear下,宽度的分率辨减23.比如1024的宽
-
网页游戏开发入门教程三(简单程序应用)
网页游戏开发入门教程二(游戏模式+系统)http://www.jb51.net/article/20724.htm 一.选择开发语言 后台:java .net php 前台:flex javascript ajax 数据库:mysql mssql 用哪种组合,真的不重要.重要的是时间和成本.复杂的地方在数据的交互和完善,而不在技术或效果的实现.往往遇到一些问题.比如地图如何编?人物移动如何实现?其实这些问题从技术上实现都比较容易.难在实现后,数据如何交互.没有解决数据交互的问题,实现这些技术点的
-
php 网页游戏开发入门教程一（webgame+design）
一.简单的程序框架. webgame程序构成: 三大部分. 第一是数据流程.第二是程序.第三是美术. 其中,数据流程包括了功能.也只有在功能中才能体现数据流程. 数据流程相当的麻烦,后面再讨论. 比如最简单的卖买产品. 要实现这个功能. 那么需要有产品基础表.产品详细表.商店表.背包表.如果扩展性更强,相应的双表是少不不了的. 表的问题都简单了.关键是这个物品有什么用.这样物品的来源,一大堆数据,物品的走向,又是一大堆数据. 最后,这些数据得绕成一个圈. 绕圈是一件困难的事情.特别是功能和道具多
-
网页游戏开发入门教程二（游戏模式+系统）
一.游戏模式目前webgame游戏模式大体上可以分为以下四类:1.玩家拥有一个城市,不断的升级城市内建筑,建筑可以自动获得物资,可以生产军队,军队之间进行对比数值的战斗.这里我简单的称为Ogame模式. 比较优秀的代表:战神世界II,Travian,Ogame,武林三国,纵横天下,领主online,乱舞春秋,热血三国,方便面三国等等.这是一个比较成熟的模式, 但正因为成熟.因此,玩家接触到这类游戏比较的多,除非你能超过这些优秀的代表,否则就只是简单的重复开发. 对玩家来说:优点:Ogame模式模
-
浅谈Vue入门需掌握的知识
Vue作为一款目前最流行的前端框架之一,是许多前端开发工程师的不二选择.最近我在前端岗位上也运用Vue实现了几款产品,那么今天来分享一下Vue是什么,以及我对Vue的见解. 一.定义 Vue是一套用于构建用户界面的渐进式JavaScript框架 与传统JS和JQuery框架不同,Vue的渐进式框架表示开发者可以由简单组件写起,渐渐搭建出一个复杂的前端平台. 形成Vue渐进式框架的核心概念为:组件化,MVVM,响应式,和生命周期,下面会一个个详细介绍. 二.为什么要用Vue? 1. 组件化 Vue
-
网站制作之网页技巧
相信众位网友在网上尽情冲浪时,一定会看到不少设计独特.创意新颖.页面诱人的个人网页,遇到这些网页你也一定会驻足停留.仔细欣赏一番,同时脑海中大概也会有一丝想要制作一个属于自己的个人主页的念头.如果你确实有这个想法,那就请你继续看完下面的内容,下面提供的网页设计技巧一定会使你大饱眼福,并让你在以后设计自己的主页过程中游刃有余.好了,说了这么多,还是让我们直接切入正题,和大家一起看看笔者今天带来了哪些网页制作技巧吧: 1.设计前要有筹划 设计主页也许并不是很困难.但这一工作与编制传统的宣传品一样,都
-
2013年 移动App设计13项注意细节总结
导读:在过去的一年里,移动成主流也让众多的移动应用如雨后春笋般层出不穷,在众多开发者从中获利的同时竞争也愈演愈烈,如何才能保证自己立于不败之地?用户是上帝,一切还得从应用说起. 对于刚刚过去的2012年,你最想说什么?2012年的移动开发领域足以用"风起云涌,瞬息万变"来形容,移动应用市场蓬勃发展也让众多的移动应用开发者获利匪浅,也由此涌现出了许多优秀的应用设计,随着用户的品质需求的上升,App界面设计也被提升到了全新的高度.移动应用实现了从互联网到移动设备的成功蜕变,从用户角度出发,
-
XML 轻松学习手册(比较不错)第1/3页
我想就我个人学习过程的心得和经验,写一篇比较全面的介绍文章.首先有两点是需要肯定的: 第一:XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解,等待只会让你失去机会: 第二:新知识肯定会有很多新概念,尝试理解和接受,您才可能提高.不要害怕和逃避,毕竟我们还年轻. 提纲 本文共分五大部分.分别是XML快速入门,XML的概念,XML的术语,XML的实现,XML的实例分析.最后附录介绍了XML的相关资源.作者站在普通网页设计人员的角度,用平实生动的语言,向您讲述XML的方
-
再推荐十款免费的php开发工具
下面介绍10个免费.强大的PHP编辑器/开发工具.这些编辑器拥有调试器.增量执行PHP脚本.查看每一行的所有变量值等功能. 1) Notepad ++ Notepad++是一款非常有特色的编辑器,是开源软件,可以免费使用.支持的语言: C, C++, Java , C#, XML, HTML, PHP, Javascript! 功能有: 1. Notepad内置支持多达 27 种语法高亮度显示(囊括各种常见的源代码.脚本,值得一提的是,完美支持.nfo 文件查看),也支持自定义语言: 2. N
-
php开发工具有哪五款
由于最近小编要自学php,所以整理了一些常用的php开发工具,给大家分享一下: 1.EditPlus EditPlus是一套功能强大,可取代记事本的文字编辑器,拥有无限制的Undo/Redo.英文拼字检查.自动换行.列数标记.搜寻取代.同时编辑多文件.全屏幕浏览功能.对于很多php程序来说,EditPlus 非常简单好用.同时EditPlus也是一款好用的HTML编辑器,除了可以颜色标记HTML Tag (同时支持C/C++.Perl.Java)外,还内建完整的HTML和CSS1指令功能