信息动态

网站设计是技术与创意的融合!

建站常识

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

2009-05-14 15:08:00

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

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

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

好吧，我们开始。

1.像素分隔线

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

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

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

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

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

clearspring.com

tutorial9

#p#

2.像素边缘

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

接下来是加上后的：

看出来区别了吗？没关系，接下来请看放大下的图片：

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

#p#

3.像素阴影

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

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

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

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

总结一下

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

上一篇：退订邮件的设计
下一篇：谁为用户买单(1)—电子商务网站的交互设计

近期更新

延伸阅读

解决方案

轮胎行业网站设计解决方案 机械行业网站设计解决方案 房地产行业网站设计解决方案 科技企业网站设计解决方案 电子家电网站设计解决方案 食品行业网站设计解决方案 集团公司网站设计解决方案 企事业单位网站设计解决方案 外贸行业网站设计解决方案 健身运动网站设计解决方案 美容与化妆品网站设计解决方案 建筑设计行业网站设计解决方案 物流行业网站设计解决方案

TAGS关键字

青岛轮胎网站设计 搜索引擎蜘蛛 网站策划 外贸网站建设 轮胎网站设计 青岛网页制作 青岛网站建设基础知识 青岛网页设计 搜索引擎 青岛flash网站 用户界面 青岛开发区建站公司 微信小程序 官网网站建设 H5 苹果系统 企业网站建设 青岛SEO 青岛网站优化 营销策略 海信网络科技 网站制作 青岛网站案例 青岛不错的英文网站建设公司 青岛海洋投资集团 css GOOGLE 互联网 外贸网站设计 企业网站

青岛力图数字科技有限公司 2008- 版权所有 鲁ICP备09005893号-6 | 网站地图

青岛网站建设 青岛网站设计 青岛网站制作


0532-85810878 473587358 扫码添加微信

扫码添加微信

 扫码关注公众号

官方公众号