Jul
29
常常的网页设计都由PS来完成平面效果,然后再抠出元素组成HTML,最后镶嵌到程序中。
而一个网页的成功与否,在于它的细节。
有多细,我给的定义就是1PX(1像素)。
入行初期,对于细节这东西掌握不好,现在再去看那些网页,虽然有的还在用,但是都很是丑陋。而且现在还在运行的网站,都是当初歪打正着,细节处理得很好的。
下面就是对细节方面的研究:
1.像素分隔线
第一个介绍的是分隔线,请看下图,是一个导航栏。

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

我们可以看到这些分隔线,都是有2条相邻的1px直线构成的,并且一条颜色较背景色更深,一条较浅。接下来,看方法:
选取铅笔工具(不要选错为画笔),大小调为1px
选取一个较背景色更深的颜色,如图中的深蓝色,按住Shift画出一条直线
选取一个较浅的颜色,再画一条直线。OK
PS.画线过程可以放大画布(Z)以便观察。怎么样,效果比单色的分隔线要好很多吧?
2.像素边缘
首先我们看一张没有加“像素边缘”的原图:

接下来是加上后的:

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

可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇,而有一种灯光反射(高亮)的效果。使得白色块的边缘更加突出。而方法跟第1个技巧是一样的,就是用铅笔工具画1px的线。需要注意颜色的选择,一般选择比背景色更浅的颜色,才能制造高亮的效果。
3.像素阴影
这是3个技巧里面最容易实现的,但它一样特别实用,甚至经常会用到。照例我们先看图片

可以看出在有阴影下,文字立体感得到加强,特别在文字的背景较复杂,比较多噪点时使用该技巧会使文件比较突出。 而加上阴影方法很简单,只需双击图层名称,添加“投影”的图层样式。然后按下图设置参数:

也就是把距离与大小调为“1”。
国内目前的设计风格已经从以前的韩国风格开始转换为欧美风格,都极力的使用最简洁的元素来表现效果。
而欧美风格也再变化,也不再一味的求简,现在也注重丰富的颜色和结构。
以后说不定,全球都会有统一的风格也说不定,起码,wordpress的模板全球通用。
期待
而一个网页的成功与否,在于它的细节。
有多细,我给的定义就是1PX(1像素)。
入行初期,对于细节这东西掌握不好,现在再去看那些网页,虽然有的还在用,但是都很是丑陋。而且现在还在运行的网站,都是当初歪打正着,细节处理得很好的。
下面就是对细节方面的研究:
1.像素分隔线
第一个介绍的是分隔线,请看下图,是一个导航栏。
留意图中红圈圈中的线已经按钮之间的分隔线,这些线看起来有一种凹进去的感觉,形成一种很好的分隔线的感觉。接下来我把这张图放大,我们看看其中原理。
我们可以看到这些分隔线,都是有2条相邻的1px直线构成的,并且一条颜色较背景色更深,一条较浅。接下来,看方法:
选取铅笔工具(不要选错为画笔),大小调为1px
选取一个较背景色更深的颜色,如图中的深蓝色,按住Shift画出一条直线
选取一个较浅的颜色,再画一条直线。OK
PS.画线过程可以放大画布(Z)以便观察。怎么样,效果比单色的分隔线要好很多吧?
2.像素边缘
首先我们看一张没有加“像素边缘”的原图:
接下来是加上后的:
看出来区别了吗?没关系,接下来请看放大下的图片:
可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇,而有一种灯光反射(高亮)的效果。使得白色块的边缘更加突出。而方法跟第1个技巧是一样的,就是用铅笔工具画1px的线。需要注意颜色的选择,一般选择比背景色更浅的颜色,才能制造高亮的效果。
3.像素阴影
这是3个技巧里面最容易实现的,但它一样特别实用,甚至经常会用到。照例我们先看图片
可以看出在有阴影下,文字立体感得到加强,特别在文字的背景较复杂,比较多噪点时使用该技巧会使文件比较突出。 而加上阴影方法很简单,只需双击图层名称,添加“投影”的图层样式。然后按下图设置参数:
也就是把距离与大小调为“1”。
国内目前的设计风格已经从以前的韩国风格开始转换为欧美风格,都极力的使用最简洁的元素来表现效果。
而欧美风格也再变化,也不再一味的求简,现在也注重丰富的颜色和结构。
以后说不定,全球都会有统一的风格也说不定,起码,wordpress的模板全球通用。
期待



今天做了个typecho
企业网页设计流程教程
