推荐阅读
(6-9):制作网页翻转按钮
大家经常在一些网页中看到一种会随着鼠标的接触而变色的按钮，参见范例网页。这称之为鼠标翻转效果，这是根据英文rollover翻译而来的，其实不是很符合中文的语境。其原理是利用两张图片，平时显示一幅，当鼠标接触后换成另外一幅图片。如下图。这样看起来好像是鼠标接触的时候按钮变亮了。现在我们来动手制作，首先在Photoshop中将它们制作成图片，然后再做成网页。首先新建一个400×300的白底图像，新建一层，利用形状工具椭圆〖U/SHIFTU〗，在公共栏选择第3种绘图方式(填充像素)，调出信息调板〖F8〗观看数值，用任意颜色在新建层中间位置画一个直径40左右的正圆(按住SHIFT保持正圆)。如下左图。0614【窗口>样式】调出样式调板，点击右上角圆三角按钮，选择“替换样式”，在出来的样式列表目录中选择“Web翻转样式”，确认目前选择的是新建层，然后使用“选中状态的蓝色胶体按钮”样式。如下中图红色箭头处。大家也可以自己选择其他颜色的。0615将新建层与背景层合并，然后【图像>修整】，如下右图所示。确定操作后图像将被裁剪为和所画的圆同等大小。这个命令的作用是根据左上角第一个像素处，或右下角最后一个像素处的颜色，在我们这幅图像中这两个地方都是白色。然后就将画面中连续的白色部分裁剪掉。这就好像现实中打印图像之后将纸张的边缘裁剪掉一样。接着将背景图层复制一层，对复制出来的图层使用曲线工具，合并高光和暗调区域(高光点229,255；暗调点60,0)，形成加亮按钮的效果。如下左图。完成后我们得到两个图层，分别是暗色按钮的背景层，和亮色按钮的背景复制层。如果以上步骤无法完成，点此下载范例文件0616使用【文件>在ImageReady中编辑】〖CTRLSHIFTM〗，或点击工具栏最下方按钮，将会跳转到ImageReady中，这是Photoshop附带的一个软件，用来制作动画和网页。我们找到Web内容和图层两个调板，如下右图。后面的操作就是由这两个调板配合完成。 在完成以上5个步骤后，我们就可以开始制作鼠标翻转效果了。开始之前我们先简要介绍一下制作的原理。范例网页大家也看过，是随着鼠标的接触而发生的。这里涉及一种概念，叫事件和方法。我们的日常生活就是由许多事件和方法组成的，比如口渴是事件，喝水就是解决这个事件的方法。肚子饿是事件，吃东西就是方法。想学习是事件，看《大师之路》就是方法等等。这其实就是一种编程的思想，和人一样，电脑也是由事件和方法组成的一套逻辑系统。所以下面我们也要按照这种思路，去创建一个事件和解决方法。这个事件就是鼠标接触事件。平时鼠标不接触，我们只显示暗色按钮层(背景层)。而在鼠标接触的事件发生后，显示亮色按钮层(背景副本层)。
AutoCAD 2007 入门教程-CAD图形的输入输出
AutoCAD 2007 提供了图形输入与输出接口。不仅可以将其他应用程序中处理好的数据 传送给 AutoCAD ，以显示其图形，还可以将在 AutoCAD 中绘制好的图形打印出来，或者 把它们的信息传送给其他应用程序。此外，为适应互联网络的快速发展，使用户能够快速有效地共享设计信息， AutoCAD 2007 强化了其 Internet 功能，使其与互联网相关的操作更加方便、高效，可以 创建 Web 格式的文件 (DWF) ，以及发布 AutoCAD 图形文件到 Web 页。 AutoCAD 2007 除了可以打开和保存 DWG 格式的图形文件外，还可以导入或导出其他格式的图形。 导入图形 在 AutoCAD 2007 的 “ 插入点 ” 工具栏中，单击 “ 输入 ” 按钮将打开 “ 输入文件 ” 对话框。在其中的 “ 文件类型 ” 下拉列表框中可以看到，系统允许输入 “ 图元文件 ” 、 ACIS 及 3D Studio 图形格式的 文件。 在 AutoCAD 2007 的菜单命令中没有 “ 输入 ” 命令，但是可以使用 “ 插入 ” | 3D Studio 命令、 “ 插入 ” | “ ACIS 文件 ” 命令及 “ 插入 ” | “ Windows 图元文件 ” 命令，分别输入上述 3 种格式的图形文件。 插入 OLE 对象 选择 “ 插入 ” | “ OLE 对象 ” 命令，打开 “ 插入对象 ” 对话框，可以插入对象链接或者嵌入对象。 输出图形 选择 “ 文件 ” | “ 输出 ” 命令，打开 “ 输出数据 ” 对话框。可以在 “ 保存于 ” 下拉列表框中设置文件输出的路径，在 “ 文件 ” 文本框中输入文件名称，在 “ 文件类型 ” 下拉列表框中选择文件的输出类 型，如图元文件、 ACIS 、平板印刷、封装 PS 、 DXX 提取、位图、 3D Studio 及块等。
自己动手制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer 就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 在Dreamweaer 中新建一个文件，绘制一个层，在该层中插入一个表格（如图1），对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的Css样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration（装饰）”均设置为“None（无）”，将“Hover”的“Color（颜色）”设置为红色，最后将设置好的样式应用到各个菜单条中（可按“F12”键预览效果）。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角（使整个菜单条完全露出但上边缘正好靠拢页面上边界），在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置（如图2）。
数码摄影10个技巧
以前一定听过这种话：数码相机(以下用DC)无所不能。你只要按下按钮，一张伟大的照片就会变魔术般展现在你面前。相机越好，照出来的照片越好。果真如此吗?见鬼，当然不是了! 事实是你可以用一个简单的消费级傻瓜DC拍出一张伟大的照片，也可以用最贵的DC拍出一张垃圾照片。漂亮的照片不是相机搞出来的，而是摄影师搞出来的。只要有一些拍摄方面的知识，再加上不断改进的愿望，你可以用你的小DC拍出能登上时代周刊的大照片。 为了帮助你在成为伟大摄影师的道路上快步前行，这里送给你10个技巧，它们会让你即使不花大价钱买昂贵的设备也能像专业人士一样拍照。 1.暖化你的照片 你注意过有些时候你拍的照片有一种冷冷的感觉吗?如果答案是肯定的，那你并不是孤独呵呵。DC的默认白平衡设置是“自动(auto)”，虽然在大部分情况下都是适用的，但有时候却会让景物太“冷”了。 当你拍户外景物的时候，特别是当阳光充足时，试着把你的白平衡调到“多云(cloudy)”那一档。对，就是“多云”那一档，这个变化跟在你的镜头前加一个暖色滤镜的效果是一样的。它使得照片中红色和黄色的更加丰满，从而暖化了这张照片 图1a是在一个山区拍摄的，白平衡设置在“自动(auto)” 图1b 同一个场景，我把白平衡换成了“多云(cloudy)”，同时把一副Costa Del Mar太阳镜放在了镜头前(佳能PowerShot S200,程序模式program mode) 如果你不相信我，那就试试吧。在户外分别用自动白平衡和多云白平衡拍两组照片，然后在你的电脑上对比着看，我猜你一定会喜欢看上去暖洋洋的那一组的 2.用太阳镜做偏振镜
最新发布
提高用户体验与新窗口打开网页的关系
论证完使用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。