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

2016-02-19 16:33 4 1 收藏

今天图老师小编给大家精心推荐个PS加强网页设计中像素化细节的技巧教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

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

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

  好吧,我们开始。

  1.像素分隔线

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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

  选取铅笔工具(不要选错为画笔),大小调为1px

  选取一个较背景色更深的颜色,如图中的深蓝色,按住Shift画出一条直线

  选取一个较浅的颜色,再画一条直线。OK

  PS.画线过程可以放大画布(Z)以便观察。

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

  clearspring.com

  tutorial9

  2.像素边缘

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

  接下来是加上后的:

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

  可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇,而有一种灯光反射(高亮)的效果。使得白色块的边缘更加突出。

  而方法跟第1个技巧是一样的,就是用铅笔工具画1px的线。需要注意颜色的选择,一般选择比背景色更浅的颜色,才能制造高亮的效果。

  3.像素阴影

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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

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

  也就是把距离与大小调为1。

  接下来我们看看一些使用该技巧的例子:

  总结一下

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

来源:https://www.tulaoshi.com/n/20160219/1612400.html

延伸阅读
texture在设计中应用已经越发完善了。它将形成一种趋势,简单而有效的为web页面设计添加几分深度感。 充分发挥texture的威力是一份伟大的职责。它不仅能够很好增强web设计的表现效果,对于设计师来说还是一个质量上乘的好工具。它的美妙作用是可以引导浏览者的视线,强调关键元素的重要性。 然而,长期以往texture似乎总和脏乱或者低劣设计为...
全尺寸背景在网页设计中已经越来越受欢迎,几年来,这一趋势的另一个变化是模糊的背景图像。 最近似乎有更多的模糊背景设计雨后春笋般冒出来,在使用某种类型的模糊图像的大背景下或者一个全尺寸的背景,不仅让整个网站下显得非常的人性化,烘托出网站所要给用户的氛围,也能更够突出产品或者人物本身特质,在配合新的CSS技术的情况下 更能到给...
图片幻灯片是网页中最常见的一种效果,功能几乎差别不大,可很多网页设计师可能都没有考虑过这种最常用的幻灯片其中所涵盖的用户体验思想,本文通过国内外几家大型网站中的幻灯片来分析他们各自的设计小细节及给我们带来的体验 1、卓越亚马逊的首页轮换图片,每刷新一次,都是随机不同的顺序显示,这样的设计解决了对于较多图片轮换而靠后的图...
就我自己看到的而言,很多平台的表单页面都存在样式混乱的问题,也许是不关注,还未意识到。下面就我个人理解,对表单设计的经验做些分享,首先什么样的表单才能算的上是好的表单?这个得搞清楚。 先撇开交互和产品,若加上这两点,那有的说了。 1. 能够清晰传递表单信息并使用户快速轻松完成 2. 对于整站而言,能够样式统一减少用户学习成本...
    现在我们来制作一个简单的网页设计稿。设计稿如下图。     新建一个640×480的白底图像,然后使用形状工具的矢量方式13-4 实战网页设计稿,画出一个长方形。这个长方形本身具有4个锚点,我们使用锚点添加工具,在长方形的上边和下边分别各增加两个锚点,这样矩形就有了8个锚点。现在使用直接选择工具选中位于右侧...

经验教程

143

收藏

56
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部