Photoshop设计制作苹果界面网页模板
从别的网站中寻找灵感,来设计一清爽而又干净的网站布局.这个网站主要的特色是:用横向来分割布局.用颜色丰富的头部来讲解网站的内容;用一友好的欢迎消息来讲解事例;最终在页脚分两列来填充页脚的资料.
一好的设计大多来源于在纸上的构想.因此我们要养成在一幅纸上构图.你可用铅笔,来自由的构造一粗稍的布局.
规勾出一线框也有助于我们理解一网站的层次结构,并可深入的理解最佳设计的地方.
1.在PS中创建一文件,设定见图.在设定网站的尺寸时,看下主流的显示器是多大,如此可让网站的整体设计越加的友好.
2.在文件中央部分加上辅助线,使其宽度为960px.之后再创建一基本的网格让项目对准(PS:木木也没有用过网格,知道的请补一下谢谢.)
3.创建一图层来做网页的导航.给其一宽度,之后填充白色.双击这个图层打开图层样式表,先择色彩渐色为:灰色渐变为白色,点确认.
4.创建一图层来做头部展览的部分.先矩形选区勾出给定的宽度,之后填充渐变两个具有活力的色彩.再为其加上个内阴影让它看上去更有深度.
5.细腻的纹理质感,能给一设计带来画龙点眼的效果.选取头部展区图层按crtl+J拷贝副本,选中副本滤镜--杂点--添中杂点,见图.混合模式:叠加,减小透明度获得效果.
6.在导航上提高公司的LOGO,之后加上图层样式,加上一渐变,色彩选取与头部相匹配的,之后再加一内阴影的效果.
7.创建一图层,选取文字工具,色彩先中灰色之后在导航上打上文字.给链接的色彩可选取深一些.
8.在头部设一位置,来讲解网站的特色.为标题选取一适合的字体大小,最终给文字添加阴影.
9.接着做完内容,这次我们文字用arial或者helvetice字体,如此可使HTML识别,而不成照片来替换,如此可提高网页的下载速度.
10.在头部加一笔记本电脑,如此正好服合一虚构公司的性质,新建一关键的区域来显示在网站在笔记本中的效果.
11.只为强调笔记本,可做出一渐变的效果来吸引浏览者的目光.
12.创建一图层,渐变一灰色到白色的效果.之后将图层放到笔记本的后面.
13.在展览头部的下方,创建一图层,用矩形选项框画一距形,最终为其渐变一由灰色到白色的效果.
14.将主内容分为两列,用辅助线分隔.在左半我们把加上一文本内容,而右半我们则来做导航.此时我们运用文字工具来为内容加上文本,选取适合的字体的大小,标题.使文本读起来可更轻易的让人吸收.
15.在文本的下方,建一图层来展览blog的最新贴子.这贴子可分为两列.标题由于要给用户单击用,因此在单击点应调整此色彩,以突出链接.
16.创建一图层,运用圆角矩形工具画一矩形出来,这儿的色彩可随意填充一下.由于我们要在下方再为它执行更改.
17.双击这个图层打开图层样式表,加上一灰色到白色的渐变;1PX 灰白的外面框;最终再加个内阴影.
18.在此面版上为网站锦上添花.为其加上文本内容与图象.
19.选取圆角矩形来做一按扭.加上图层样式,能让按扭服合网站的风格.
20.给按扭加个文本来提示用户.
21.创建一图层,在主内容下加上页脚区域,填充浅灰色以便于区别主内容.
22.给制一椭圆填充渐变黑色到透明.按ctrl+T,将这个椭圆拖成一条线.
23.运用矩形选区删掉多余的部分.在网页设计一点细微的动作会给用户带来很好的觉得,来吸引浏览者的目光.
24.页脚网页中不可少的一部分.在这个事例中,加上了用户登陆区域.在登陆框加入一内阴影.
25.在页脚加上公司的一点信息,比如:地址,电话,电子邮件,地址等.在这儿文字大小可选和主内容的字体同样,以体现出整体性.
26.最终加上联系方式,这部分可突出,以使浏览者更轻易找到.
27.做完.在这个教程里主要是运用大量灰色干净来布局,突出的部分则用彩色来显示.