Archive for the 'Techniques' Category

RGB色彩的基本原理

basic-rgb-color-theory

从小我们上学的时候就已经知道自然界是三原色组成的,那是红黄蓝色原色。可是到了计算机中,三原色不再是红黄蓝,而是红绿蓝,也就是俗称的RGB色彩。为什么计算机中的三原色是红绿蓝?那么这篇文章就为你揭晓答案。

Read more »

Serif vs Sans Serif 该如何选择

字体的种类众多,但是可以分为几大类。在网页中使用的字体主要分为Serif和Sans Serif字体,这不是什么具体的字体,而是字体的分类名称。Serif字体和Sans Serif字体的区别在于Serif字体是有衬线的,而Sans Serif字体是没有衬线的。光用文字表述还不能说清楚,下面这幅图就能体现这两种字体的区别了。

serif vs sans serif Serif vs Sans Serif 该如何选择

左边的就是属于Serif字体的Georgia字体,这是Windows系统中自带的。右边的是属于Sans Serif字体的Arial字体,也是Windows系统中自带的字体,Arial字体在网页中使用很广泛。可以看到Serif字体在笔画末端会有衬线,而Sans Serif字体则没有。Serif字体常出现在印刷当中,而网页中使用Sans Serif比较广泛。

Read more »

用JavaScript创建可折叠导航菜单

有时候为了避免页面上出现过多的元素可以将部分元素隐藏起来,等到需要的时候通过鼠标点击展开相应的元素。当导航菜单项目过多的时候就可以采用这种方法。

首先,需要创建HTML列表,代码如下:

Links

Read more »

关于Photoshop中的智能对象的介绍

从Photoshop CS2版本开始起就包含了一个重大的新功能,智能对象。那么这个智能对象到底有多么智能?就来做个比较吧。

以这张图为例,我在Photoshop中分别使用传统方法和智能对象旋转一圈,每次旋转10度,录制为动作之后重复播放,所以旋转一圈需要36次。

photoshoprotationorigin 关于Photoshop中的智能对象的介绍

下面来看看传统方法将一个普通图层分为了10度为阶梯,总共旋转一圈360度之后的效果。

Read more »

在Photoshop中用调整图层调整图像

这个文章的标题看起来有点怪,我也想不出更合适的词汇了。一般在Photoshop中对图像进行色彩方面的处理的话都是直接用菜单命令,其实在Photoshop中有个更好用的调整图层。

调整图层和用图像菜单中的调整子菜单里面的各个功能的区别在于,调整图层会新建一个图层,所以不会对原始像素进行修改,而且既然是图层,那么就可以通过图层面板中的小眼睛把它隐藏,还能够添加图层蒙版控制调整图层的影响范围。而用菜单命令的话就会改变图像中的像素信息,而且没有办法还原,除非使用撤销或者历史纪录。

另外一点区别在于调整图层对下方的所有图层都起效果,而菜单命令只对当前选中的图层其效果,无法将效果应用到多个图层上,除非将多个图层合并之后再进行调整。

在Photoshop图像->调整菜单中的项目基本上在调整菜单中都能找到。创建一个新的调整图层只要在图层面板下方选择中间的那个按钮,然后选择需要的调整功能,比如,亮度/对比度,色阶,曲线。

Read more »

为网页不同应用类型添加不同的CSS样式表

一般设计网页的时候只会给网页添加一个CSS样式表,这个样式表用于屏幕显示。但是可以给打印,手持设备,语音朗读设置不同的CSS样式表。

为什么要设置不同的样式表?网页中一般会包含很多除了内容之外的其他内容,没有必要把这些也打印出来,可以为打印机设备另外一个样式表,这样去掉网页中的导航条,边栏之类的部分,节约油墨和打印空间。同样对于盲人可以添加另外一个适合语音朗读程序的样式表,对于手持设备可以针对小屏幕设置另外一个内容更为紧凑的CSS样式表。

有两种方法给网页添加不同应用类型的CSS样式表,一种是把样式表分为不同应用类型的单个文CSS文件,或者把所有内容写在一个CSS文件里。

例如,现在有3个样式表,screen.css用于屏幕显示,print.css用于打印,handheld.css用于手持设备。在HTML源代码的head部分添加下面几行:

Read more »

绘制正确投影大小与距离

在现代设计中,投影几乎无处不在。绘制投影是个基础的技能,但是这看似简单,却很容易犯各种错误。一种常见的投影错误就是投影的大小与距离。

投影能够创造一种立体的感觉。在一幅图片或者网页的设计中,所有元素组合成一个整体,所有元素的投影都必须满足一体性。初学者通常在各个堆叠的元素上会放置同样的大小和距离的投影。以下面这幅图片为例。

drop-shadow-incorrect

Read more »

成为优秀设计师应该做到的9点要求

想要设计出优秀的作品并不是一件容易的事情,不仅需要有技术,还要有审美观。有再好的技术但是没有好的审美做出来的作品也不好看。同样,没有熟练的技术只有优秀的审美观也没有办法把自己的创意表达出来。我也算不上优秀的设计师,但是我从事设计也有很长的时间了,根据我自己的经验总结出来成为优秀的设计师应该做到的9点要求。

1,留心观察生活中的事物。简单来说创意来源于生活,一切创意来源都是生活中的事物。这也是为什么好莱坞大片中的外星人永远都和人类差不多,有两个眼睛,一个鼻子,两个耳朵,但只是形状不同而已,再怎么想象都离不开现实生活。

2,将创意创作为作品。有好的创意就应该将它转换为作品。这样既能锻炼技术,还能加深印象,将创意牢记于心。

3,把灵感记录下来。灵感是一瞬间的,如果当灵感存在于脑中的时候不记录下来的话,事后就很难回想起来了。灵感在任何时候都会闪现,在走在路上,坐在车上。所以只要有可能,就把灵感用各种方式记录下来。比如用简短的文字描述一下,画个草图,或者用手机拍照再加上文字注释。

Read more »

关于网页反垃圾留言部分的易用性设计

目前只要是个可以留言的地方基本都会遭受垃圾留言的袭击。垃圾留言和垃圾邮件一样令人心烦。但是很多邮件服务商比如Gmail,Hotmail,Yahoo都可以过滤垃圾邮件。而网站都是网站所有者自己处理,所以应对垃圾留言比较麻烦。

针对垃圾留言,已经诞生出很多反垃圾留言的工具或者是插件。这些反垃圾留言的工具或者插件主要适用两种方式来屏蔽垃圾留言。一种是具有一定的算法,能够识别出是否是垃圾留言,然后根据结果进行判断,如果是垃圾留言就直接屏蔽,这一类的代表就是WordPress上用的比较广泛的Akismet。另外一种是使用CAPTCHA(Completely Automated Public Test to tell Computers and Humans Apart)方法,中文意思就是“全自动区分计算机和人类的图灵测试”。这个的表现形式就是在留言之前要输入验证码,就象这样:

captcha 关于网页反垃圾留言部分的易用性设计

这就是常见的验证码。另外还有一种方式也就是给出一道简单的计算题,算出结果才能通过留言,就象这样:

Read more »

用图片解释CSS盒子模型

CSS Box Model

很多CSS初学者不太理解margin和padding的区别,用语言描述总是非常难懂,用一幅图片就能很好解释了。其实从这幅图基本就能理解了,但是我还是稍微的讲解一下。

由内而外开始,最里层是内容区域,一般都是在html中的<p></p>标签中。5的地方就是padding,4的地方是border,1的地方就是margin。如果说border(边框)是内阁内外的大门,padding就是内边距,也就是内容距离房屋大门的距离,margin就是外边距,是外面其他的房屋距离大门的距离。一切内容都是存在于border这个大门中的。3是背景图片,2是背景色。背景图片和背景色可以设置任何一个,也可以不设置,也可以两个都设置。当同时设置了背景图片和背景色的时候会像图上表现的一样,背景图像会覆盖住背景色,当背景图像不存在时才会显示背景色。

Read more »