当前位置:首页 > 技术文档 > 正文

PS加强网页设计中像素化细节的技巧

作者:ahhqx 来源:source 【 】 浏览: 添加日期:2009-05-12 我要评论(27)     

在网页设计中细节的处理十分重要,我个人也经常观摩外国佬的网站,发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里分享给大家的小技巧很简单,但是却可以很好滴增强整个网站的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。

并且你会留意到这些技巧都围绕一个词,就是“像素化”,简单地说就是一些1px,2px的小线。

好吧,我们开始。

1.像素分隔线

第一个介绍的是分隔线,请看下图,为 Pixel2Life.com 的导航栏。

留意图中红圈圈中的线已经按钮之间的分隔线,这些线看起来有一种凹进去的感觉,形成一种很好的分隔线的感觉。接下来我把这张图放大,我们看看其中原理。

我们可以看到这些分隔线,都是有2条相邻的1px直线构成的,并且一条颜色较背景色更深,一条较浅。接下来,看方法:

  • 选取铅笔工具(不要选错为画笔),大小调为1px
  • 选取一个较背景色更深的颜色,如图中的深蓝色,按住Shift画出一条直线
  • 选取一个较浅的颜色,再画一条直线。OK

PS.画线过程可以放大画布(Z)以便观察。
怎么样,效果比单色的分隔线要好很多吧?接下来再看一些使用这个分隔线技巧的例子:

clearspring.com

tutorial9

2.像素边缘

首先我们看一张没有加“像素边缘”的原图:

接下来是加上后的:

看出来区别了吗?没关系,接下来请看放大下的图片:

可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇,而有一种灯光反射(高亮)的效果。使得白色块的边缘更加突出。
而方法跟第1个技巧是一样的,就是用铅笔工具画1px的线。需要注意颜色的选择,一般选择比背景色更浅的颜色,才能制造高亮的效果。

3.像素阴影

这是3个技巧里面最容易实现的,但它一样特别实用,甚至经常会用到。照例我们先看图片:

可以看出在有阴影下,文字立体感得到加强,特别在文字的背景较复杂,比较多噪点时使用该技巧会使文件比较突出。

而加上阴影方法很简单,只需双击图层名称,添加“投影”的图层样式。然后按下图设置参数:

也就是把距离与大小调为“1”。
接下来我们看看一些使用该技巧的例子:

总结一下

以上这些技巧都是我自己看来学来的,在这里希望需要的人可以学会它。这些1px的线很多人会说,用户根本就不会去注意,就是瞪大眼都看不到。是的,这的确没错。但是我认识很多好的设计,能经得时间与多人的考验,那都是很多细节来构成的。这些细节尽管你觉得看不到,但是它却为成功的设计打下坚实的基础。

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖技术文档〗Tags: ps 网页设计 ps技巧

所属专题:PS技巧

更多评论(27)..会员评论

whlwhl(111.192.*.*) 发表于:2013-08-08 11:22:40
久久孝心网(http://www.99xiaoxin.com)学习了,表示很有用!!
chenjy880101(124.205.*.*) 发表于:2013-02-28 18:03:48
老师讲的很详细,学习了! 自己动手做的:"http://www.57101858.com".大家评论一下吧!
sanmilk(110.210.*.*) 发表于:2013-02-06 09:23:15
细节决定成败,学习了!作者也很用心啊,观察得如此入微~
管理员回复:祝你早日成为大神。
caomokeke(221.6.*.*) 发表于:2012-09-12 09:18:43
这个之前也注意到后·但是看完自己去动手就非常的成就感~还有一些很细致的按钮·也很像素细节的·
管理员回复:这个要多练,还要注意一些技巧
yingzi0723(111.161.*.*) 发表于:2012-08-10 18:25:03
很实用,细节很重要!一个好的设计,除了体现在创意上,就是细节了!
管理员回复:嗯 说的不错
yayo(60.186.*.*) 发表于:2012-07-21 13:59:03
说的太好了,我正在想这种感觉怎么做的呢
xyzshin126(211.160.*.*) 发表于:2012-06-14 16:17:29
1个像素的细节
sonwly(219.235.*.*) 发表于:2012-05-25 10:39:47
无意之中发现了这个网站,觉得自己挖到宝了~~嘿嘿~

出差旅游免费预订酒店

【视频教程】新手常见问题