很久没有更新了，最近确实比较忙。再加上使用微博比较多，一直懒于写下超过140字的东西，今天终于要爆发一下了。今天带来的是一个Illustrator的教程，效果不用多说，上图就是。喜欢的话就跟着做，其实很简单的。

首先我要我要感谢国家感谢党，给我这个写日志的机会。这个教程并不是我原创的，要感谢Smigoo找到了这个教程。教程是英文的，如果你英语水平好可以去直接看英文原版教程。如果你英语不好，那也没有关系，这里有我翻译好PDF格式的教程。

如果持观望态度，不知道这篇教程值不值得花费时间学习，那么你可以看看文章中的最终效果图，有各种式样。

实现这种效果一共有三种方式：第一个方式是购买专用的移轴镜头，这种镜头专门可以实现非常小景深的微缩模型的效果，但是售价在1万块以上；第二个方式就是购买内置微缩模型功能的DC，现在已经有DC可以制作这种效果，比如理光CX2和CX3，但是为了这种效果购买一个相机还是不值；第三个方式就是我今天带来的，利用无所不能的Photoshop！

首先选择一张需要处理的照片。这种照片也比较有讲究，拍摄的时候要选择俯视的视角拍摄，画面中要包括树木或者高楼之类的高低元素，这样出来的效果才明显。好了，下面开始Photoshop制作过程。

第一步，在Photoshop中打开照片，按Q键进入快速蒙版。

第二步：选择渐变工具。

第三步：在渐变工具的选项栏中选择对称渐变，模式改为反向。

第四步：填充渐变，效果如下图。

第五步：按Q键退出快速蒙版。出现选区，然后按下CTRL+SHIFT+I反选，保持中央部分为被选中。

第六步：选择 滤镜-〉模糊-〉镜头模糊

第七步：设置参数，调整半径，根据自己选择的照片实际情况作调整。

第八步：调整色阶，对比度，曲线等，达到满意的效果。

第九步：对于太大的图片，可以适当裁剪加强效果。

至此，完成了！

想要做一个微缩模型的效果不是很难，关键在于选区的大小，模糊半径这些参数的调节上。多多练习就会做出好效果的。

把这两个按钮拖放到舞台中，在属性面板中把实例名称分别设置为volumePlus和volumeMinus。接着倒入声音文件到Flash库中，然后连接至ActionScript，具体方法看这里。Class名继续使用BGSound。

在以前版本的ActionScript中可以直接在sound对象上设置音量，现在都被更改到了SoundTransform类。按F9打开动作面板，把下面的代码输入进去。

var sound:BGSound=new BGSound();
var soundChanel:SoundChannel=sound.play(0,999);
var transformSound:SoundTransform=new SoundTransform();
transformSound.volume=1;
soundChanel.soundTransform=transformSound;
volumePlus.addEventListener(MouseEvent.CLICK,addVolume);
volumeMinus.addEventListener(MouseEvent.CLICK,reduceVolume);
volumePlus.buttonMode=true;
volumeMinus.buttonMode=true; 

stage.addEventListener(Event.ENTER_FRAME,setVolume);
var soundVolume:Number=10; 

function setVolume(e:Event):void{
    transformSound.volume=soundVolume/10;
    soundChanel.soundTransform=transformSound;
    if(soundVolume==10){
        volumePlus.enabled=false;
    }else if(soundVolume==0){
        volumeMinus.enabled=false;
    }else{
        volumePlus.enabled=true;
        volumeMinus.enabled=true;
    }
} 

function addVolume(e:MouseEvent):void{
	if(soundVolume<10){
                soundVolume+=2;
        }
} 

function reduceVolume(e:MouseEvent):void{
        if(soundVolume>0){
                soundVolume-=2;
        }
}

按行解释代码：

第1行：创建BGSound类型对象sound。
第2行：创建SoundChanel类型对象soundChanel，同时开始播放sound，把播放的值赋给soundChanel对象。
第3行：创建SoundTransform对象transformSound。
第4行：设置transformSound对象的属性volume值为1。volume值的范围在0-1之间，0就表示没有声音，也就是静音，1就是最大音量。
第5行：将transform对象赋值给soundChanel的soundTransform属性。
第6-7行：分别给volumePlus和volumeMinus按钮添加事件监听，分别调用addVolume和reduceVolume方法。
第8-9行：设置按钮的指针形状为手形。
第11行：给舞台注册Event.ENTER_FRAME事件监听，这个用来实时监控声音音量，当发现通过按钮更变声音音量之后马上调整音量。
第12行：创建Number类型的变量soundVolume，用于存储实时音量。默认值为10的原因是因为Number类型在进行加减的过程中二进制计算会有误差，所以取整数就可以避免。其实在这里使用uint类型更合适，就可以避免这个问题。
第14行：定义函数setVolume用于改变音量。
第15行：将当前的音量值赋给transformSound.volume属性。每次改变音量值后需要重新赋值一次。
第16行：将transformSound赋值给soundChanel.soundTransform属性，道理同上。
第17-23行：当音量为最大的时候禁用增大音量按钮，此时按钮无法点击。当音量最小的时候禁用减小音量按钮，此时按钮同样无法点击。当既不是最大音量也不是最小音量的时候恢复按钮为活动状态，可点击。
第27-31行：定义addVolume方法，当音量小于最大音量的时候音量加0.2。（这里虽然是加2，但是在setVolume方法中会再除以10，所以实际增加量为0.2）。
第33-37行：定义reduceVolume方法，当音量大雨最小音量的时候减0.2。道理同上。

这样就算完成了。代码要比控制播放和停止长一点，但是还算比较好懂。如果有问题的话可以留言和我交流。

第一步需要创建一个MovieClip（影片剪辑），其中有两帧，第一帧为播放状态，第二帧为停止状态。把这个MovieClip放到舞台上，属性中设置实例名为musicControl。为了防止在MovieClip加载之后循环播放，需要在第一帧上添加stop();代码。状态图像就像这样：

接着需要把声音文件导入到Flash库中，并且设置从库连接至ActionScript。具体方法见这里。将Class（类）名设置成BGSound，这个值可以是任意的值，这里我用的是BGSound。

最后打开动作面板，按F9调出。输入以下代码：

var sound:BGSound=new BGSound();
sound.play(0,999);

var isMusicOn:Boolean=true;
musicControl.buttonMode=true;
musicControl.addEventListener(MouseEvent.CLICK,toggleMusic);

function toggleMusic(e:MouseEvent):void{
	if(isMusicOn==true){
		musicControl.gotoAndStop(2);
		isMusicOn=false;
		SoundMixer.stopAll();
	}else if(isMusicOn==false){
		musicControl.gotoAndStop(1);
		isMusicOn=true;
		sound.play(0,999);
	}
}

按行解释代码：

第1行，创建BGSound的对象sound。之前的文章说过ActionScript 3.0中所有的都是类，声音也不例外，所以使用之前需要创建对象。
第2行，播放sound对象。这样当影片加载之后自动播放声音。第一个参数是播放起始的偏移量，0为默认位置，也就是从头播放。第二个参数是循环的次数，Flash没有提供一个永远循环的方法，但是可以设置一个无限大的值近似于永远循环。我在这里用了999这个值，我所用的声音长度为23秒，循环999次就是22977秒，也就是6.3825个小时，几乎没有人会运行这么长的时间，所以也就接近于永久循环。
第4行，创建Boolean类型的变量isMusicOn，并且设置状态为true。这个变量用于保存声音播放的状态，true表示正在播放，false表示已停止。
第5行，设置musicControl的buttonMode属性为true，也就是按钮状态为true。按钮状态下，鼠标的悬停光标为手型，表示可以点击。这个不是必须的，当没有这行的时候musicControl的鼠标指针就是和系统一样的肩头指针。但是将指针设置成手型使交互性更友好。
第6行，给musicControl添加事件监听，事件类型为MouseEvent.CLICK，并将处理函数设置为toggleMusic。当鼠标点击一次musicControl就调用一次toggleMusic函数。
第8行，定义处理函数toggleMusic。参数名为e，参数类型为MouseEvent，这个值必须与注册的时间类型一致。
第9-12行，当isMusicOn的状态为true时，musicControl跳转到第2帧，也就是声音关闭的状态，并将isMusicOn设置为false。Flash中声音的停止需要调用SoundMixer类的静态方法stopAll()来实现。
第13-16行，当isMusicOn的状态为false时，MusicControl跳转到第1帧，也就是声音播放状态，并将isMusicOn设置为true。接着同第2行一样，开始播放声音。

代码不是很长，而且我认为解释也很到位了。网上很多人写的教程代码很全但是注释少得可怜，很难让人看懂。所以我尽量把代码解释完整。如果还有什么问题可以留言。下次介绍控制音量大小的方法。

色彩 – 主题色

一个网站必须要有主题色，这是一个主题，这种颜色在一个网页中所占的比例最高。可以有其它的辅助颜色，但是只能起点缀作用，当你的网站出现了两种主色，那么就很难达到美观的效果。主题色是网站的主色调，是贯穿于一个网站的所有页面的。辅色不能过多过大，否则就会影响到主题色的老大的地位。

以草绿色为主的主题色，以黄色为辅色。

一咖啡色为主调，只有在Logo的部分才使用了绿色。

对齐

对齐是个很重要的元素排列原则，一般来说，一个网页上使用同一种对齐，比如左对齐或者居中对齐。当然也有特例，当遇到大型的块级的元素可以在页面使用左对齐的原则下部分使用居中对齐。当设计一个网页的时候需要针对不同的显示器的像素宽度，为了照顾到部分群体，一般采取比较小的象素宽度值。当你的显示器的像素宽度超过了网页的宽度时，设计者往往都会使页面居中对齐，因为那样左对齐就比较难看了。

中间的方框是元素的容器，将容器居中对齐后把容器中的元素左对齐。

有对齐是使用相对较少的一种对齐方式，但是对齐方式没有好坏之分。使用对齐原则需要大胆尝试，但是当发布实际作品的时候一定要进行反复测试，以检验页面所使用的对齐是否美观。

对比

对比是一个重要的展示内容的方式。网页内容存在对比才不会让人觉得网页是死气沉沉的。对比可以有多种方式，颜色的对比，形状的对比，大小的对比之类。但是对比和对齐一样，要大胆使用，对比一定要明显。如果两个元素的应用了对比，但是让人看不出来对比，那么这只能是一个失败的对比设计，还会使内容显得混乱。

使用了形状大小的对比，粗体字很明显的让Nite更为突出。相对于细体，粗体更能汇聚观看者的眼光，吸引读者的视线。试想一下，如果想达到对比，但是文字只粗了一点，让人感觉不出对比的效果，那么就会是适得其反，显得很难看。

色彩的对比，突出了Coming Soon。使用色彩对比有一个注意事项。对比不能过于强烈而造成文字或者图案无法辨识，最典型的就是红色与蓝色。当使用#FF0000和#0000FF这两个颜色时候，其中一个颜色作为背景色，而另一个颜色作为前景的文字颜色的时候，强烈的对比让我无法辨识清楚文字，文字越小越显得刺眼。颜色对比没有什么公式，唯一需要做的就是多测试，自己试验一下对比是否看着舒服。在任何时候可读性都是最重要的！

风格统一性

和主题色一样，一个网站必须要有一个主风格。这点国内的大型网站和国外的网站都明白，基本都能遵守。但是一些个人网站，以及BLOG之类的网站，不同的页面之间甚至会存在不同的风格。风格的统一性是贯穿于中各网站的，每个页面都必须符合主风格。可以有各个页面的子风格，但是同样不能影响到网站整体风格的主题地位。也就是说网站的整体风格是老大，其他的小弟都是跟着他混得，不能和老大显得格格不入。

易用性

易用性是比较难做到，而且也是最容易被人忽视的。很多网站，尤其是国内的网站，对于用户来说易用性做的非常差。我曾经上过一个网站，始终找不到需要找的东西，后来还是经过了一番复杂的步骤，经过了“培训”才能顺利过关。

flickr的易用性做的相当好，可以去体验一下。

跨平台性

跨平台主要包括系统平台和浏览器平台。不同的系统上有不同的显示效果，正如早期Windows和Mac上的颜色管理模式的不同导致同一颜色在这两个平台上的不一致，所以才诞生了216色网络安全色。这216色可以说在Windows和Mac上都能显示出同样的效果，随着Windows和Mac的不断发展，这216色逐渐被人们淡忘，因为色彩的显示越来越更一致了。

另外，Windows和Mac以及Linux系统中分别内置了不同的字体，有一部分字体是三个系统都包含的。这一交集的字体包括Courier，Crourier New，Symbol，Times等字体。当你使用了一个系统中没有的字体时，样式表就会调用默认的字体，如果样式表中的默认字体系统中也没有的话就会调用系统默认字体。另外包括像素，pt，inch等单位在不同的系统平台上也有不一样的情况。像素是一个屏幕的指标，这个相对来说是比较稳定的单位。

不同的浏览器之间的显示效果就有很大的变化，最特殊的就是微软的Internet Explorer系列浏览器。IE系列对于标准支持的特殊性导致了它不同于Firefox，Opera，Chrome，Safari。所以作为一个合格的设计师来说，发布页面之前一定要测试页面是否在不同的浏览器上也能显示一致。

细节

细节是考验人耐心的部分，细节不易被人感觉到，但是却能影响整体的效果，但是却是比较花费时间和心思的部分。如果希望网页更具立体感，就要考虑到高光和阴影。如果需要模拟真的效果，那么色彩上就需要稍微参杂一些杂点，这样看起来更具真实感。

猴子脚下的阴影，以及右边方框的高光和阴影是整个网页的整体看上去更自然。

这篇文章总结了优秀网站的设计原则，一共有7条，做好这7点基本就能够设计出一个美观的网站。当然不是这一篇文章就能使你大幅进步，设计网站还需要很多个方面的经验，多上网浏览美观的网站也是一个部分。如果你有什么疑问和需要帮助的，可以和我联系，或者在文章下直接留言。