SoleilNeon's Blog

10种风格的网页按钮图标集

SoleilNeon — Thu, 11 Mar 2010 12:13:59 +0000

设计网页的时候需要各种图标包括按钮也需要各种图标，设计图标确实是个麻烦事，最近收集了一套具有10种色彩风格的按钮图标。下面是张预览图。

建议使用的时候先阅读一下其中的Readme文档，里面是版本声明：可以自由使用这套图标，包括用在商业网站上，但是不能用于商业用途，比如再次出售。毕竟人家也是有版权的，做个图标不容易啊。

怀旧复古Photoshop 3/4/5下载

SoleilNeon — Fri, 05 Mar 2010 13:58:54 +0000

说到在电脑上处理图像没有人不知道Photoshop，就连不会用的小姑娘制作非主流的照片都都选Photoshop，可以看出Photoshop在人们心中的专业性。从1990年发布第一个版本以来，Photoshop在上个月刚刚度过20岁生日。

Photoshop现在最新版为CS4，版本号11，估计在4月份的时候Photoshop CS5应该就会发布了。现在我们暂时不向前看，把目光转回到过去，Photoshop历史上经典的版本。Photoshop 3就是一个很经典的版本，从这个版本开始Photoshop加入了图层的功能，随后的4和5也有非常大的改进。只可惜Photoshop在Windows平台上最早的版本Photoshop 2.5目前还没有找到。挖掘基上介绍了Photoshop 20年的进化历程。

Photoshop 3很小，整个安装包只有10M多一点，而Photoshop CS4的安装包是1.5G，大约是前者的150倍。

我全部都在虚拟机中安装的。因为软件比较老，所以我都没敢在Windows XP上安装，而是在Windows 2000上安装的。测试都能通过，运行速度很快。

都是ED2K连接，也就是说需要用电驴下载。

下载地址：Photoshop 3 (10.18M) | Photoshop 4 (25.34M) | Photoshop 5 (58.44M)

Serif vs Sans Serif 该如何选择

SoleilNeon — Tue, 02 Mar 2010 03:58:27 +0000

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

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

原因在于电脑屏幕是基于像素的，当使用Serif字体的时候如果想要达到与Sans Serif字体的可读性的话就需要增加字体大小。因为Serif字体具有衬线，所以当小于12px或者更小的情况下就会显得字幕挤成一团，辨认起来较为困难。当然还有一种平滑显示的技术，称作抗锯齿，原理就是在字母的边界增加灰色的像素，这样看起来更为平滑一些。下面这张图对比了一段文字使用了Serif字体与Sans Serif的对比以及平滑显示和没有平滑显示的文字外观。

可以看到显示效果最好的就是平滑处理后的Sans Serif字体，而未平滑处理的Serif字体是最难阅读的。当然这个情况只限于字体比较小的正文部分，所以我推荐在正文部分使用Sans Serif字体增加可阅读性，使读者阅读起来更轻松。

不过Serif字体还是有其他用途的，比如说标题。标题一般都会使用大于20px大小的字体，这样就算是Serif字体也不会难于阅读，相反Serif字体能够给人一种沉稳的厚重感。

这里使用的是Serif字体，如果要使用Sans Serif字体的话恐怕效果就会大打折扣。只有这使用大号字体的情况下才适合使用Serif字体。

因此我建议在正文部分不要使用Serif字体，这会使文字变得非常难于辨认，除非你有足够的信心能够做出出色的显示效果，否则Sans Serif字体是最佳选择。至于标题部分，没有什么限制，但是要记住不要为了可以使用某种字体而使用，页面的整体美观性是最重要的。

HTML 5参考手册

SoleilNeon — Thu, 25 Feb 2010 06:10:46 +0000

HTML 5是下一代网页标准规范，已经有越来越多的浏览器支持HTML 5了，包括Firefox 3.5以上的版本，Google Chrome，Opera 10和Safari，唯独只有IE系列还没有动静。虽然说HTML 5目前还处于阶级阶段，全面普及有可能要到2020年。但是掌握先机总是有必要的，HTML 5的多个新特性足以使网页的交互能力大大提升。HTML 5中最大的特性就是支持video标签，可以插入视频，而不需要借助例如Flash或者Silverlight之类的插件技术。

尽管曾经还有一个与HTML 5同时在制定的标准XHTML 2，不过现在随着HTML 5的逐渐成熟，XHTML 2已经胎死腹中。两者有太多的交集，没有必要同时存在两种标准，所以W3C取消了XHTML 2的制定。所以，对于广大的设计师来说HTML 5将是今后的出路。如果你想要更为华丽的特效，那么可以采用Flash。

这份参考手册对HTML 5中的所有标签功能和用法都做了细致的说明，不过是英文的，如果英文不是太好的话就开着字典看吧。

下载html5-cheat-sheet.pdf

比尔盖茨鲍尔默乔布斯和Google创始人卡通头像图标

SoleilNeon — Sat, 20 Feb 2010 05:59:41 +0000

比尔盖茨，史蒂夫鲍尔默，乔布斯和Google创始人在IT界可是呵呵有人的大人物。最近SoleilNeon收集了一套这些大大的卡通图标。这套图标为透明背景的PNG格式，分为256像素和512像素两种尺寸。可惜不是矢量格式的，要是矢量的话就更好了。

下载

用JavaScript创建可折叠导航菜单

SoleilNeon — Wed, 17 Feb 2010 13:46:35 +0000

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

首先，需要创建HTML列表，代码如下：

Links

Link One
Link Two
Link Three
Link Four

接着在HTML页面的和标签之间添加下面的JavaScript代码，原理是通过切换元素的css的display属性来控制显示或隐藏。

function collapse(zap){
	if(document.getElementById){
		var abra=document.getElementById(zap).style;
		if(abra.display=="block"){
			abra.display="none";
		}else{
			abra.display="block";
		}
		return false;
	}else{
		return true;
	}
}

最后把给标题添加a元素，添加onclick事件，当点击鼠标的时候就是触发事件，调用定义好的函数：

Links

这样就完成了简单的可折叠菜单，可以自己添加相应的CSS样式。

Photoshop键盘快捷键对应图

SoleilNeon — Mon, 15 Feb 2010 06:33:50 +0000

Photoshop提供了大量的快捷键操作，掌握这些快捷键对于提升设计效率很有帮助。但问题是，那么多的快捷键怎么才能记住？实际上只要记住一些常用的就可以了，所以我推荐一个直接把快捷键写在键盘键位上的图片。普通的Photoshop快捷键介绍都是文字和快捷键介绍，不仅枯燥难懂，记起来还麻烦。这个看起来很直观，下面是一张预览。

Photoshop Keyboard Shortcuts.jpg | Photoshop Keyboard Shortcuts.pdf

3款WordPress情人节主题下载

SoleilNeon — Wed, 10 Feb 2010 13:32:16 +0000

2010年的中国春节刚好和西方的情人节是一天，这么难得的日子应当好好庆祝一下。眼看还有几天情人节就快到了，所以搜集了3款WordPress情人节主题，提前给大家准备准备。有情人的庆祝情人节，没有情人的可以庆祝春节。看的顺眼的话可以留着明年接着用，哈哈。

Valentine Theme

下载 | 演示

Heats Theme

下载 | 演示

Pink Love

下载

5个特殊的动物字体

SoleilNeon — Sun, 07 Feb 2010 14:01:57 +0000

最近收集了几个相当特别的动物字体。这些字体不包含传统的字母，而是一些动物形状，有点像是Windows中自带的Wedding字体。

Horses

下载

Cats vs Dogs

下载

Giants of the Sea

下载

Birds of a feather

下载

Ding o Saurs

下载

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

SoleilNeon — Fri, 05 Feb 2010 06:14:59 +0000

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

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

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

那么，如果转换为智能对象再进行10度为阶梯，总共旋转一圈360度是什么效果：

这样就能看出来普通的图层进行旋转和智能对象的区别了：普通图层进行36次每次10度的旋转之后画质变得相当的差，但是智能对象却几乎没有任何损失（其实完全没有损失）。这是为什么？

原因在于智能对象记录了原始信息，每次所作的更改都是建立在原始信息之上。第一次更改建立在原始信息上，第二次更改还是建立在原始信息上，第三次也一样在原始信息上。而普通图层就不一样，第一次更改建立在原始信息上，第二次更改是建立在第一次的信息上，第三次更改建立在第二次的信息上，也就是说普通图层的更改建立在上一次的信息上。在这里因为刚好旋转一圈，和原始状态一样，所以智能对象没有画质损失，但是如果只旋转一次10度的话，智能对象还是会有损失的，因为要重新采样。

可以自己试验一下，同样的东西在旋转45度之后按下Ctrl+T可以看到，在普通图层上度数为0，而在智能对象上度数是45。

为什么仅仅旋转就能产生如此大的变化？原因在于，计算机内部处理图像是基于像素的，而像素以x（横轴）和y（数轴）排列，最终形成二维的面。理论上只有当图像进行以90度为单位的旋转才不会出现画质的变化。例如像我采取的以10度为单位进行一次旋转，普通同层每旋转一次就要进行重新采样，一两次看不出画质的劣化，但是次数越来越大画质劣化的越明显，最终就成这个鸟样了。而智能对象始终是基于原始信息的，当进行36次每次10度的旋转之后其实就等于没有旋转。

如何创建智能对象？很简单，智能对象也是个图层。选择需要转换成智能对象的图层，然后在鼠标右键菜单中选择转换为智能对象（Convert to Smart Object）就创建好一个智能对象了。

智能对象能干什么？在需要多次对图像进行变形（包括旋转，缩放，透视等）的时候使用智能对象是再合适不过的。智能对象能保存原始信息，所以当进行了无数次的变形之后都不用担心画质会有降低，因为是以原始信息作为修改而不是上一次。可以说智能对象就是为了大量变形而准备的。

智能对象不能干什么？智能对象不能使用图像菜单中的自动色调，自动颜色，自动对比度，也不能使用图像-〉调整菜单中的几乎所有功能，除了阴影/高光和变化。也就是说几乎无法调整智能对象的色彩，比如曲线，色阶，色彩平衡。智能对象可以使用大部分滤镜，除了抽出和液化。

怎样把智能对象转换为普通图层？这很简单，只要选择智能对象图层，然后在鼠标右键菜单中选择栅格化图层（Rasterize Layer）

以上就是我对智能对象的介绍和理解。如果有什么疑问或者不同的观点欢迎交流。