WEB开发网
开发学院图形图像PhotoShop Photoshop在网页设计中加强像素化细节技巧 阅读

Photoshop在网页设计中加强像素化细节技巧

 2009-05-20 13:33:29 来源:WEB开发网   
核心提示:在网页设计中细节的处理十分重要,我个人也经常观摩外国佬的网站,Photoshop在网页设计中加强像素化细节技巧,发现优秀的网站设计在细节方面的处理都是照顾十分周全的,今天在这里分享给大家的小技巧很简单,再画一条直线,OK PS.画线过程可以放大画布(Z)以便观察,但是却可以很好滴增强整个网站的细节,所以我自我认为这些技

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

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

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

选取铅笔工具(不要选错为画笔),大小调为1px 
选取一个较背景色更深的颜色,如图中的深蓝色,按住Shift画出一条直线 
选取一个较浅的颜色,再画一条直线。OK 
PS.画线过程可以放大画布(Z)以便观察。

怎么样,效果比单色的分隔线要好很多吧?接下来再看一些使用这个分隔线技巧的例子:

2.像素边缘

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

接下来是加上后的:
 

1 2  下一页

Tags:Photoshop 网页设计 加强

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接