photoshop

Photoshop网页设计中加强像素化细节的3个小技巧

在网页设计中细节的处理十分重要,我个人也经常观摩外国佬的网站,发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里分享给大家的小技巧很简单,但是却可以很好滴增强整个网站的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。
并且你会留意到这些技巧都围绕一个词,就是“像素化”,简单地说就是一些1px,2px的小线。
好吧,我们开始。

1.像素分隔线

第一个介绍的是分隔线,请看下图,为Pixel2Life.com的导航栏。
1 Photoshop网页设计中加强像素化细节的3个小技巧
留意图中红圈圈中的线已经按钮之间的分隔线,这些线看起来有一种凹进去的感觉,形成一种很好的分隔线的感觉。接下来我把这张图放大,我们看看其中原理。

2 Photoshop网页设计中加强像素化细节的3个小技巧
上图放大300%效果

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

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

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

2.像素边缘

首先我们看一张没有加“像素边缘”的原图:
8 Photoshop网页设计中加强像素化细节的3个小技巧
接下来是加上后的:
6 Photoshop网页设计中加强像素化细节的3个小技巧
看出来区别了吗?没关系,接下来请看放大下的图片:
7 Photoshop网页设计中加强像素化细节的3个小技巧
可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇,而有一种灯光反射(高亮)的效果。使得白色块的边缘更加突出。
而方法跟第1个技巧是一样的,就是用铅笔工具画1px的线。需要注意颜色的选择,一般选择比背景色更浅的颜色,才能制造高亮的效果。

3.像素阴影

这是3个技巧里面最容易实现的,但它一样特别实用,甚至经常会用到。照例我们先看图片:
10 Photoshop网页设计中加强像素化细节的3个小技巧
可以看出在有阴影下,文字立体感得到加强,特别在文字的背景较复杂,比较多噪点时使用该技巧会使文件比较突出。
而加上阴影方法很简单,只需双击图层名称,添加“投影”的图层样式。然后按下图设置参数:
12 Photoshop网页设计中加强像素化细节的3个小技巧
也就是把距离与大小调为“1”。
接下来我们看看一些使用该技巧的例子:
13 Photoshop网页设计中加强像素化细节的3个小技巧

14 Photoshop网页设计中加强像素化细节的3个小技巧

总结一下

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

people also love:

  1. 这15个Photoshop快捷键,你掌握了吗
  2. Photoshop在网页设计中制作文字效果的2种方法

24 Comments:

  1. stan says:

    look a lot better

  2. Jutoy says:

    嗯,的确。虽然只是1px,但是效果的显著的~
    学习了。

    • eddie says:

      嗯,其实类似的技巧还有很多
      不断学习啊。。

  3. wlsy says:

    好文,看完豁然开朗。

    • eddie says:

      呵.有到豁然开朗这种地步吗?

      • wlsy says:

        有的,之前一直不清楚那个1px的凹陷怎么画的。

        • eddie says:

          恩,我以前也很想知道是怎么画的。刚开始自己试验,然后是用直线工具画的,但是现在用铅笔工具还是比较好定位一点

  4. 张泽涛 says:

    eddie,这篇写得很不错哦,观察细微,真正做用户体验就应该做到这样,赞一个

    • eddie says:

      嗯 这个题目我一直想写的 以后有其它类似细节技巧再写出来

  5. epile says:

    我之前还发信息问Jutoy怎么弄这种效果~无解~
    没想到你居然写了一篇出来~
    太棒了~

    • eddie says:

      呵呵 看来很多人都想知道那种凹陷直线的效果

  6. [...] 原文:http://www.ediyang.com/3-photoshop-skills-make-pixel-popping/ [...]

  7. bolo says:

    学习了,用css做出图片效果的那个方法,妙极了。

  8. 万戈 says:

    我是PS菜菜鸟,路过学习了

  9. cubic. says:

    1px看起来或许并不起眼被人忽略,但在设计中往往起着至关重要的作用!呵呵,fighting~~

  10. money says:

    看完之后茅塞顿开,恍然大悟,豁然开朗….学习了

  11. [...] 原文:http://www.ediyang.com/3-photoshop-skills-make-pixel-popping/ [...]

  12. sam says:

    学习了。之前也在研究1px的用法。

  13. AlvinJ says:

    真是细节决定成败啊~
    没想到1px的线也可以起到画龙点睛的作用!
    学习了~

  14. 虽然是一像素,做好了也能提升品质。

  15. rainson says:

    有时候,成败就是因为细节!学习了~~

Leave a Reply

Back To top