推荐阅读
精选国外非常吸引人的旅游门户网站设计欣赏
其实酒店和旅游类的网站最能体现多媒体内容和文字的搭配技巧了，这类网站通常需要营造氛围，展现美感，体现吸引力，优秀的案例比比皆是。今天我们就来看一组优秀的案例。现如今的旅游和酒店类网站设计的越来越带感了，壮美的风景和精致的界面融为一体，优质的服务和梦幻般的界面让用户在网站中流连忘返。这些网站以惊艳的图片和视频立足，配合以突出的现代网页设计技术，结合当下的设计趋势，视差滚动、全景图片、响应式布局、动态图片一个都不缺席。这些网站巧妙地将多媒体技术、文字排版和特效平衡为一体，为用户提供了身临其境的体验。>Pygmy ElephantPygmy Elephant 是一个旅游机构，网站为用户提供了逼真而难忘的视觉体验。其中涵盖的多媒体类型丰富，通过丰富的视觉体验鼓励游客踏上旅程。网站使用了视频背景，漂亮的图文混排，精致的交互细节。>Cruise Me为了让项目效果突出，设计和开发团队使用了诸多先锋的技术。当用户打开网站的时候能够看到首页上交互性极强的地图，每个地标都能够为用户提供丰富的信息以便浏览和了解。再向下，用户可以翻看不同主题不同旅游项目的卡片，有目的和针对性地了解具体信息。整个网页的设计友好而令人愉悦。>Bird Luxury Travel PR
PHOTOSHOP绘作逼真蕃茄
4.画个大椭圆，羽化20，反选，增加亮度30。 5.取消选择后，用加深和减淡工具处理周边，上面和两边减淡，底部加深。使用加深和减淡工具的时候，需要不断的尝试，这时最好给图像做个历史快照，或是复制一层来做，这样便于修改，涂抹时次数是很多的，不一会就数十次了，在历史记录中可恢复不了。 6.蕃茄有几个瓣，现在来做这几条陷下去的纹。画个椭圆，用选择-变换选区旋转和移动到适合的位置，羽化1，在凹纹的位置用减淡工具檫。 7.反选后用加深工具檫。 8.同样方法做出余下的陷纹。观察整体，再对局部作一些加深增强立体感，可加轻微杂色，数量约1。 9.给这个层命名“蕃茄”，新建一层，在上部画个小椭圆，羽化3，填充灰白性线渐变，将图层模式设为“颜色加深”，作为蒂部位下陷的暗调。向下合并到蕃茄。 10.新建一层，命名“茄蒂”，用钢笔仔细钩出蒂的形状，填充绿色（46/77/27）。 11.绘画实物时，离不开我们的好帮手――加深和减淡工具。刚接触时，我也是极为头痛的，它们不象图层样式那样，调节参数就可以得到效果的，不容易掌握。但只要经过耐心的练习和尝试，你会发觉它们实在是可爱极了。处理茄蒂时可用钢笔辅助钩出叶瓣，也需要载入茄蒂的选区，用轻移、旋转、羽化、反选等动作来得到我们需要的工作选区。完成后加杂色1.5%。
Photoshop打造斑驳压纹镂空文字效果
简 介】 利用PS可以打造出各种各样奇特的文字效果，下面我们来制作一款压纹镂空文字…… 先看一下效果： 效果图 制作工具：Photoshop CS 制作过程： 1、新建一个宽度为100像素，高度为100像素，分辨率为350像素的文件。 2、新建图层1，单击工具箱中的“自定义形状工具”，在其属性栏中单击路径按钮，并在形状下拉面板中选择五角星图案，然后在窗口中拖拽创建一个五角星路径，如图01所示。
自己动手用Dreamweaver制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 图1 在Dreamweaer中新建一个文件，绘制一个层，在该层中插入一个表格(如图1)，对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为“None(无)”，将“Hover”的“Color(颜色)”设置为红色，最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果)。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界)，在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置(如图2)。在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer将自动打开行为面板。单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/Stop Timeline”，打开“Stop Timeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”，动作为“Stop Timeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。图2 2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹出的功能。添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交互行为。选择“自动播放和循环”复选框，使动画能够自动循环播放(如图3)。图3
最新发布
提高用户体验与新窗口打开网页的关系
论证完使用target=_blank并非绝对错误之后，分场景探讨如何减少新开窗口。自有意识注意这个问题，是看到Plod大叔在04年提倡不乱弹窗的奔走相告。抛开某些不合逻辑意图不论，为什么大量使用弹出页面？因为设计师担心用户迷失方向。为什么用户会迷失方向？因为导航系统不够好。为什么导航系统不够好？因为产品功能太多太乱。为什么功能太多太乱？因为需求没控制好。为什么需求没控制好？因为提需求的人自己也没想清楚。说白了，很多场合都不仅仅是设计师的问题，因此只能选择不断妥协用劣质方案堆砌豆腐渣结构体系。快节奏中有些事情没法避免很正常，但设计师应该尽责做到迭代式的全局统筹重构。以上参考淘宝的老包同学在08年总结符合国情的链接新窗口打开中的应用场景。下载各种文件、打印各种文档，需要前后对比的帮助，注册表单的隐私条款都有必要target=_blank。能够定论target=_blank必然提升用户体验的场景很少，并且个人认为随着客户端技术的发展，会被逐步取代。比如lightbox这个ajax应用，给设计师带来了“查看大图不用再新开窗口”的全新设计理念，这在以前是不可想象的。主域名更换比如友情链接、网志内嵌的关键词外部链接等，而跨应用平台的链接通常也得更换二级域名。如果全部不新开窗口，为了避免意外跳出，应该先提醒用户这是外部链接；如果部分新开窗口，那么应该有统一规则进行约束，并明确告知将opens new window。见过三类案例：msdn例子，icon告知用户这是站外链接。gblog例子，icon告知用户这是站外链接，同时可以点击target=_blank。
网页布局方案:弹性流体布局
在我的另一篇文章《弹性+固宽布局》中，我介绍了弹性加最小固定宽度的一种布局方案，现在介绍另一种布局方案---弹性流体布局。那种方案其实就是这种布局的变通应用。弹性布局最大的优点就是能充分利用屏幕空间。无论客户端分辩率多大，都能自动适应宽度的变化。图一看看上面这幅图片，这是国外的一个网站，它本身是固定宽度布局的，我们的布局就以这幅图为基础来讲解的。当然，我不会全面介绍如何制作这个完整页面，我只针对重点做一下讲解。其实做一个弹性布局，相对来说是比较简单的，但是这种布局虽简单，可是对于细节上的把握才是这种布局的精髓。弹性布局虽说有这么好的优点，可是却有比较致命的缺陷：一、解决最小宽度一般弹性布局都是利用百分比来设置一个容器的宽度。这样就能自动适应屏幕的宽度了。但是宽度值不能完全由用户自由缩放，我们必须在这个百分比宽度限制其最小宽度，当用户缩小窗口到一定值，就不让窗口再缩放了。熟悉CSS的朋友都知道，有这样四个属性：这四个属性刚好能解决这个问题，是不是比较欣喜，可是，别忙，虽说它们能解决这个问题，可是却有一个严重的问题，用户使用最多的浏览器IE6却不支持这几个属性，这是一件非常糟糕的事情。我们总不能丢弃用户最多的浏览器吧！
Fireworks 中毛笔字条幅的制作
Word-BREAK: break-all" width="90%" border=0> [焚天讲义][转帖]Fireworks 中毛笔字条幅的制作胡乱做的，很难看，没有表现不出书法的真正韵味来，大家不要见笑...... 需要稍微注意的几个步骤： 1）毛笔字效果的制作 2）印章的制作 3）宣纸条幅背景的制作 我就不按照通常的step-by-step的步骤来说了，因为我很懒。 用来做毛笔字的中文字体很多，这里“织梦幻影”及落款小字都选用了“方正黄草简体”，大家有兴趣可以选用其他的字体。 1、毛笔字的制作[要点：内阴影特效] 其实大部分可以用来做毛笔字的中文字体，直接写上去就不用做什么处理了，不过为了更逼真一些，我们稍做处理： 写上“织梦幻影”四个字，CLONE文字图层（ctrl+shift+D），选中下面的一层文字，fill选项中，边缘设为1PX的羽化，然后执行滤镜sharp，锐化一下； 选中上面的一层，执行内阴影特效，偏移值为3，阴影颜色为白色，其他值默认。OK 2、印章的制作[要点：印章边缘线条的选用及造残] 印章的字体我用的是“方正隶二”，其实以前做过印章，最好的效果是“方正繁淡古”或者是“**古印篆”的。 做为印章，本身的朱砂印泥的颗粒质感以及后期艺术加工的造残效果最为重要，有时间了再写单独的教程出来吧。这里的两个小印章都是随意弄的，很粗陋。 写上印章里的字，方型的印章就直接画个圆角矩形框，不规则图型的，就用钢笔或是铅笔工具直接手画。 stroke参数设置：选用charcoal笔触的textured（不好意思，我不知道这两个怎么翻译），粗细为2，适度羽化，颜色当然要选用朱红了。经过实践发现，这种stroke能很好的表现出印章边缘的效果。。。 当然精益求精的你也可以进一步修理一下，把边框转化为位图（ctrl+shift+alt+Z），然后用橡皮擦掉一点。。。。 3、最后是宣纸背景的制作了 很简单，直接把背景矩形填充为solid，颜色灰色（用调色板把#cccccc的颜色调亮一些），图案填充选line-horiz2，90% 大概调整一下各元素的位置，OK啦~~~ 哇哈哈，怎么看怎么难看，也怪不得我，只花了5分钟做图，15分钟都写了教程了
教你用FW做酷LOGO
这是我第一次写教程,写得有点吃力,有很多方面写得不好,请原谅! 第一步:新建一个88*31象素的图片，然后先设计好自己喜欢的背景！如图1(图1)第二步:做好背景后，然后双击层1，选定“共享交叠帧”，目的为了使层一显示在所有帧中！如图2(图2)第三步:3、然后建个层2，如图3红圈建层方法。(图3)第四步:然后选定层二输入网站名如“繁星个人设计”字体为“宋体”12号字，接着选定字后，点属性的――效果――阴影和光晕――发光，然后设定参数如图4(图4)效果图(图5)第五步:5、用“矩形”（图6）工具拉出一个大小刚能覆盖“繁星个人设计”的矩形，然后边与填充定为：#000033（设为#000033这只是为了依赖于我的背景色，学习者可以自由发挥）(图6)效果图(图7)第六步:在菜单“窗口”中打开帧，或按shift+F2.如图8(图8)然后设定每帧时间为7%秒（设定此置为每帧停留的时间）接下来就是新建帧！（图9），然后选建6个帧，把第一帧的“繁星个人设计”和“矩形”复制到六帧中，从第二帧开始把“矩形”设透明度为80%，第三帧60%，一直到第六帧0%（设透明度方法如图10，选定“矩形”然后设定。(图9)(图10)第七步:好了，做完“繁星个人设计”效果以后，再做LOGO下方的效果。再建4个帧，把原来的所有效果复制到各帧中，然后在第七帧开始用“矩形”工具做出LOGO下方的矩形效果以下效果如图11（做法不多说）效果图(图11)然后第八帧删除LOGO下方的矩形，第九帧又复制回来，再然后第十帧在“矩形”上面打上网址如：”liangbj.126.com”，字体04b_08，字体大小自己定好（如果没04b_08字体，在我打包的源文件中有，安装就可以用了）做出“繁星个人设计”这样的效果，（做法不多说，前面已说过）第八步:接下来就是做划过LOGO的半透明条！用“矩形”做一条适当长宽的矩形条（白色，透明度自定，我的定为30%），把矩形条稍微转到一点，然后建六个帧。每帧移动矩形条，如图12(图12)好了教程就到些为止,如果还是不知明的,就多多熟悉FW再学做吧这是原文件下载 点击浏览该文件
像素图教程
编者：我们这里说的“像素画”并不是和矢量图对应的点阵式图像，像素画也属于点阵式图像，但它是一种图标风格的图像，更强调清晰的轮廓、明快的色彩，几乎不用混叠方法来绘制光滑的线条，所以常常采用.gif格式，同时它的造型比较卡通，得到很多朋友的喜爱。如果用插值的方式随意改变图片的大小，风格就难以保证了。绘制这种像素画除了须具备相当的耐心之外，造型、绘制方法也很重要。本系列教程将由浅入深介绍绘制像素画的各种绘制方法和技巧，希望大家喜欢。 今天我们就来看看绘制像素画所需的一些基本知识。 像素画系列教程1：工具的选择 编者：我们这里说的“像素画”并不是和矢量图对应的点阵式图像，像素画也属于点阵式图像，但它是一种图标风格的图像，更强调清晰的轮廓、明快的色彩，几乎不用混叠方法来绘制光滑的线条，所以常常采用gif格式，同时它的造型比较卡通，得到很多朋友的喜爱。绘制这种像素画除了须具备相当的耐心之外，造型、绘制方法也很重要。本系列教程将由浅入深介绍绘制像素画的各种绘制方法和技巧，希望大家喜欢。 （注：文本插图中标注PIXEL FOREST字样的由本文作者郎绘制，其余插图由ICONCN的Jill绘制，在此表示感谢。） 当许多不同颜色的点一个个巧妙的组合与排列在一块后便构成了一副完整的图象，这些点便称为像素(pixel)，图象称之为Icon(图标)或者称为像素画。其它的点阵式图象虽然也由像素组合而成，但是它们在制图过程中并不是十分强调像素，甚至根本无需去考虑到像素的变化，与之相比像素画对于像素更是逐个描绘，处处见真章。 作为像素画来说应用范围相当广泛，直至今天我才恍然大悟，原来从小时候玩的FC家用红白机的画面直到今天的GBA手掌机；从黑白的手机图片直到今天全彩的掌上电脑；即使我们日以面对的电脑中也无处不充斥着各类软件的像素图标。如今像素画更是成为了一门艺术，深深的震撼着你我。下面我们就来谈谈第一步，工具的选择和使用。 像素画欣赏（建筑
Fireworks制作光泽按钮一例
我偶在一个教学网站看到一则关于用PS制作一个光泽按钮的教程，效果不错，但愿作者称这种效果乃APS特有，并推崇大家使用PS软件，这令用Fireworks的我十分不爽（哈哈。。。），随意用Fireworks做出同样的效果以正视听。 本文作者所用的版本为Fireworks MX。 原效果图如下： 制作这个效果的方法比较简单： 第一步，建立新文件，利用“圆角矩形工具”画出一个四个角有一定弧度的矩形，大小即为你想做的按钮的大小，其填充采用单色填充，选择你想要得按钮颜色。 第二步，将该矩形复制一个，新复制的矩形将成为我们所看到的光泽部分，首先，将其填充改为线性填充，颜色取白色到白色渐变，不错，您没有看错，是白色到白色渐变，因为我们需要的效果并不在颜色上体现，而是在透明度上体现，那么下一步我们在线性填充属性框中颜色设置中色块而上面的黑色的小三角即为设置透明度的，其中的一个取默认值100%，而另一个取0%，我们看到的矩形就成为一个透明渐变的色块儿。 第三步，将颜色填充的方向从默认的左右渐变改为上下渐变，方法是当鼠标为选取工具是，色块儿上有一个横向的辅助线，用于表示其渐变的方向，把它改成一条竖线就可以了。注意竖线一定要直，否则你的效果一定要大打折扣。 第四步，修改白色渐变矩形的大小，原则是与原来的单色矩形相比，宽度比原来略小，左右只露出一条线即可；高度取原来的一半儿，将其放在单色矩形上面顶端也留出一条线的距离，这样看到的效果最佳。 以上就是这个简单的光泽按钮的做法，如果还想加个阴影，在单色矩形上加或者另复制图层做高斯模糊后置于底层做阴影都可。不过笔者认为取后一种方法比较好，并非不信任Firewroks模糊功能，只是这样一来对效果的表达更有发挥的余地。个中奥妙大家慢慢体会吧。
雾化效果
发现最近好像很流行这种雾化效果？ 差不多这种效果给人的感觉是阳光照在物体产生的发光效果。或者有一层模糊的雾的效果。好像以前的超级漂亮（皮肤N光滑）的MM就是这么出来的，以前在Photoshop找了N久，不会。用软件也不会，原来是这样。做法：在Fireworks 里将它模糊，值大致为5-8左右，然后复制一个，不用模糊，但将它的透明度调到50-80左右。直接下载PNG文件，上面保留了FireWorks的原始图层及效果做法。雾化后：
炫出我的个性QQ聊天表情的绘制（上）
前段时间，为大家讲解了如何在Fireworks中绘制QQ皮肤的教程实例，相信大家已有所收获。这次我们再利用Fireworks中自带的GIF动画制作功能，为大家讲解动态QQ表情的制作。从而也将个性化的QQ进行到底！在我们日常生活当中，人的表情都被包含在“喜怒哀乐”当中。但在网上的QQ聊天当中，可用的表情动作却是丰富多彩，特别是动态表情的出现，更能将某种情绪的表现生动而有趣地展现出来，这种表现力有时比文字的表达还要入木三分。由于QQ本身自带的聊天表情有限，因此，不少朋友都乐于从其它软件或论坛中搜集各种聊天表情，然后再添加到QQ的表情库中以备使用。但这样一来难免会使风格不同、尺寸不一的各类表情混合使用，造成了一种遗憾。为此在本例教程中将带大家尝试着绘制一款外形统一且具有个性化的QQ表情。 在动手绘制之前，我们很有必要先将所要绘制的表情进行挑选，只将聊天中较为常用或自己比较喜欢地表情列为设计目标，当然，绘制出更多具有自己原创风格的表情动作才是真正个性化的体现。另外，我们这次所要绘制的是GIF格式是动态表情。因此尽可能地保持好动作第一帧与最后一帧的连惯性也是非常重要的。 在本例教程中选用的是我自己绘制的一套名为“大眼绿豆”的聊天表情，由于表情较多，加之教程篇幅所限，也就不可能将全部表情的绘制过程逐一讲述。但万变不离其宗，绘制方法却是有限的。因此，我将以下三款集中了较多的FireworksGIF动画制作功能的表情，作一个详细讲解。放大镜汗晕 本教程源文件下载(ZIP压缩文件，127K)一“放大镜” 启动Fireworks后，先新建一个分辩率为72，455*255大小的画布。画布较大是为了绘图的方便，表情的尺寸大小我选择的是65*65像素。也就是说，不管这一表情的动作如何，它都不能大于这个范围，而且整套的其它表情也是如此。所以，我们首先是要在画布上画一个67*67的正方形，表情的绘制也就在这个方寸之内展开。 我们先来画绿豆的脸，用“椭圆形”工具画一个59*59大小的正圆，然后用“部分选择”工具将该圆下端的节点选中后，用方向键向上移动7个像素。接着我们用“椭圆形”渐变对其进行填充，渐变值由#9FEC00至#81B31A，描边色为#669506的2像素柔化描边。如图01。