推荐阅读
23个Facebook Paper中的设计细节分析
Cocoachina：Facebook的 Paper 自前几日上架App Store后就成为开发者设计师们热议话题，在App Store里也获得了很高的用户好评率，当然也有不喜欢这款应用的用户，包括那些讨厌Facebook的用户和被众多手势操作迷惑的用户。不过在我看来，Paper中一些细节设计和交互设计还是给人带来很大的惊喜，以下是我认为值得与其他设计师分享的设计细节。（温馨提示：动态gif 图稍大，等一下就可以流畅看咯）Facebook（脸谱）推出的移动新闻阅读应用Paper在发布后的短短一周，其下载量在苹果应用商店迅速攀升，并获得了包括《连线》在内的多家美国科技媒体的好评。Paper是在美国当地时间2月3日，即社交网络巨头Facebook成立十周年之际，正式发布的。Facebook创始人马克·扎克伯格（Mark Zuckerberg）曾表示，自己梦想着有一天Facebook能了解足够多的用户情况和生活习惯，以便推送用户乐意看到的精准信息，扎克伯格将此称为“全球最好的私人定制报纸”。值得注意的是，目前只有美国区的苹果商店上架了该应用，可以免费下载，但不提供iPad版本，Android平台何时上线未知。内容做成了一张张卡片早在1月底，Facebook就宣布将在其成立10周年之际推出新产品，市场也早已风传Facebook要推新闻阅读应用，但没有想到其界面和设计是如此令人赞不绝口。《连线》杂志称其为目前看来是最好的Facebook。科技博客The Verge则评价称，是最好的Facebook应用。说到细节，就不能不提Dribbble，来看看上面有哪些逆天的icon，还有哪些大牛级别的设计师吧。涨姿势时间：来了解下Facebook Paper 的设计主管：Mike Matas。
PS滤镜打造炫光星球
这篇教程教飞特的朋友们用PS滤镜打造炫光星球，教程制作难度一般。主要使用了云彩和扭曲两个滤镜，转发过来，希望飞特的朋友们喜欢这篇教程。先来看看最终的效果图吧： 教程用到的笔刷：星星笔刷、星云笔刷、碎片笔刷具体的制作步骤如下： 1、创建一个新图片，大小为940*700，背景填充黑色，新建一个图层，使用套索工具(羽化50px)绘制一个椭圆选区，然后执行“滤镜―渲染―云彩”，如图所示。 2、按下Ctrl+L打开色阶调整框，应用下图所示的设置。
人物摄影中的基本取景法 特写和大特写
特写一般表现人物肩部以上的头像或某些被摄对象细节的画面。在拍摄特写画面时，构图应力求饱满，对形象的处理宁大勿小，空间范围宁小勿空。通过特写，表现人物瞬间的表情，展现人物的内心世界。 大特写 女性的特写镜头应尽可能隐藏脸部的缺陷，不可影响其形象。对于特写中不能隐藏的缺陷或不足，还可以通过后期处理进行修饰。 有些人当成为了照片的主角后，一再表示“不喜欢被照出来”，这会使摄影师不知所措。若没有任何不愿被照出来的理由，此时只能理解为不满意相片中自身的形象。作为摄影师还得会鼓励模特，尽可能赞扬模特的优点，告诉其隐藏缺点的方法。 照片2-17室内照相馆中的高调人物照片 <照片2-17>是有意识地提高闪光灯的亮度后拍摄的照片。提高亮度，使背景的白色和人物的脸色相同，这样即去掉了皮肤上的细纹或缺点。为了表现回头的背影，人物安排在1/2的右侧。 对于<照片2-18>，在多个角度取景，以表现截然不同的视觉感。人物的特写(Close-up-shot)可以拍摄人的整个头部，也可以截取特定部位，这都有助于构成独特画面。 照片2-18
网页制作中FLASH代码的优化
1.js部分:function swf(src,w,h){html = '';html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="'+w+'" height="'+h+'" id="main">';html += '<param name="allowScriptAccess" value="sameDomain" />';html += '<param name="movie" value="'+src+'" />';html += '<param name="quality" value="high" />';html += '<param name="wmode" value="transparent" />';html += '<embed src="main.swf" quality="high" bgcolor="#cc6600" width="'+w+'" height="'+h+'" name="main" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';html += '<\/object>';document.write(html);}2.调用部分<SCRIPT>swf('http://www.poluoluo.com/benner.swf','1004','159')</SCRIPT>
最新发布
模拟条形码制作
教程开始之前，首先请看如下所示效果： 在FW4里面产生如图所示的模拟条形码效果是比较容易的，但是我们要首先明确一点，那就是这种条形码的效果我们只能是进行模拟制作，如果想要精细的制作一个正规的严格的条形码的话，就需要精确的来定位操作了。好了，模拟条形码的效果如何产生，请看后面的详细步骤：第一步、打开FW，新建文件，文件的大小设定为：宽88像素，高31像素；背景颜色自定，这里采用了透明的背景图。第二步、选取工具箱的矩形绘制工具，在编辑区绘制一个矩形，矩形的填充设定是我们制作这种模拟条形码效果的关键所在，所以我们一定要按照下面的设定来进行。选定绘制的矩形，打开Fill（填充）面板，将填充方式变为Folds，具体的填充方案为“White，Black”，其余选项保持默认值不作修改，具体设定如图01所示：图 01 Fill填充设定第三步、选定矩形对象，打开Info（信息）面板，将W、H、X、Y内各个数值框的设定值进行相应修改，来改变刚刚绘制矩形的大小和位置，使得矩形的大小正好适合编辑区的大小，具体的设定如图02所示：图 02 Info面板设定第四步、按照上面所示步骤进行操作的话，会产生如图03所示的效果：
印章制作
近期，不断有朋友询问古印章效果的制作方法，试着做了一个效果图，感觉还不错，下面就拿出来同大家一起来学习一下制作方法：【印章效果图】第一步：打开FW，新建文件，宽高均为100像素，背景色采用白色。第二步：选取工具箱的矩形绘制工具，配合Shift键，在编辑区绘制一个正方形，用来做为印章的边缘部分。正方形的各项相关设置为：Fill（填充）选项选择“None”；Stroke（描边）选项为设置的重点所在，描边类型选择“Unnatural”，描边的具体形状为“Fluid Splatter”，描边的Tip选择默认的形状，描边宽度为2像素，Texture（纹理）选项可以选择一种你认为比较适合，也可以不选择，Stroke（描边）选项的具体设置如图01所示。图01 Stroke描边选项具体设定第三步：此时编辑区的矩形应该如图02所示。图02 矩形形状[暂停]通过第二步的详细设定，想必后面的步骤各位已经能够想出来了，建议你现在自己去试着做一个印章效果，然后回头来看看后面的解说时候和你的步骤类似。:) 第四步：输入文字。这一步的关键在于文字字体的选择上，为了体现古印章的效果，我们最好采用一些古体繁体字，比如本例所采用的“文鼎古印体繁”，或者采用“汉鼎繁印篆”等等，这样效果会更逼真些。其余各项设定如图03所示。[注意]字号的大小要参考刚刚所画的正方形的大小来设定，最好能够恰恰容纳进正方形内。
Fireworks打造金属效果
很多朋友都很羡慕一些金属的效果，那么现在就让我们通过Fireworks简易强大的功能来制作一些该类的效果。 提示：不要认为金属效果很难创造，其实该类效果的基本形成完全依靠填充渐变来实现。只要我们能够掌握好光源照射以及扩散的角度，在感官上体现出一种立体的感觉就可以了。第一步：如图1所示。打开工具面板选择椭圆形工具（TOOLS-Ellipse Tool），同时按住Shift键在编辑区中画一个正圆形。颜色为白色。 第二步：如图2所示。选择多边形工具（Polygon Tool）并双击，在弹出的的选项面板（Option）中定义边角数量（Sides）为6。画出多边形后选择比例工具（Scale Tool）将该六边形横向压扁。第三步：如图3所示。通过不断的拷贝、粘贴六边形并转换角度造成基本的齿轮平面图。然后按下Ctrl+A全选所有图形，打开修改菜单选择联合功能中的结合（Modify-Combine-Union）将图形合并。第四步：如图4所示。打开填充面板选择放射渐变（Fill-Radial）填充图形。
FW动画类型及制作详解
写在前面的话： 我一直认为FW比之PS强大的地方主要体现在两点上，一是向量图形编辑模式与位图编辑模式的完美整合，二就是纯图形处理功能与GIF动画制作功能的整合。至于说在软件的使用简便性上的对比，我现在到觉得无益探讨，盖因对于某一软件使用操作的得心应手完全取决于使用者的喜好。续论上述两个优势。图形模式混合处理这一功能，ADOBE在PS６中以经引入，我们抛之不谈。就动画处理图形处理的整合上来说，PS比之FW仍有相当距离。（注：以上是作者的观点，并不代表pcedu.com.cn的立场） 现在就让我们共同走进FW中来仔细了解一下FW在动画处理上的强大功能及其灵活简便，并侧重分析一下可生成的动画形式。注意：在本篇中只针对软件直接生成的动画效果进行分析，不做手工分桢动画的讨论。提示：在FW中有两种“符号”可以通过软件内建指令产生运动及其它变化的效果。一是“图形符号（Graphic Symbol）”，二是“动画符号（Animation Symbol）”。逐步分析：虽然我们能够利用FW制作出很酷炫的动画效果，但它毕竟不是一个专业制作GIF动画的软件，所以纯软件生成的效果非常简单。大致可以分为以下两个类别：一是基本运动类，二是特效运动类：一、基本运动类包括： 直线运动：它包含了垂直、竖直、倾斜这三种运动情况。如图１所示。直线运动１
Fireworks 制作渐变动画
一、符号的运用 范例: 网络使用者对动画有偏好，曾有调查显示，和静态的广告比起来，网友们比较常点选动态的广告。网络上的广告几乎已和动态GIF画上等号，当然了，动态GIF在网站内容中一直扮演着重要的角色，而Fireworks就是创造动态GIF的最佳工具。结合了建立动态效果及绘图，图象编辑的功能，Fireworks将修改动态效果变得更简单，并且效果更显多样化。 (学会了制作fireworks的符号与分身，接下来就是要开始运用了，那就接着继续观看下一个课程分身的渐变) 这里的例子是让物件移动并且加上淡出的效果。有一种方法可以做到，就是用手动的方式改变物件在每一格frame里的位置，但是这必须具有细心及耐心，所以这里要教你如何用 Fireworks来帮你。 (学会了符号的渐变，接下来就是最后的步骤压缩与输出，那就接着继续观看最后一个课程压缩与输出) 图象所有调整及存取的东西都在一个复杂的对话框中完成，它的位置在文件下拉菜单中的File>EXPort Wizard 。
Fireworks4滚盖图技巧高级篇
本节学习重点：掌握使用Fireworks4制作高级滚盖图的技巧。掌握Firewroks4与Dreamweaver4结合使用的方法。1、打开fw，新建文件。大小为200*60像素，背景色采用透明（Transparent）。分辨率保持默认大小。2、制作按钮并输出相应Html文件。请看具体步骤：2、1 选取工具箱的矩形绘制工具，在编辑区绘制一个矩形，矩形的Stroke（描边）选项设为None（不要有描边）；Fill（填充）选项中填充类型选择Linear（线性填充），填充颜色的调配顺序为“#000066--#FFFFFF--#8787CF”，其余的选项保持默认，（当然，你可以选择相应的材质进行填充）填充效果请看图01所示：图 012、2 默认情况下，线性填充的方向是按照填充颜色从左向右的方向进行填充，现在，我们要改变一下它的填充方向，选中该矩形，点取工具箱的油漆桶工具，然后在矩形上方由上向下拖动油漆桶，这样，矩形的填充色就会变成由上向下的填充形式。如图02所示：图 022、3 选中该矩形，打开Info（信息）面板，将矩形的高度设为和画布的高度相同：60像素，宽度可以根据需要，自行设定。如图03：图 03
Fireworks4制作超酷金属字
如例图所示的这款金属字是否给你一种镏光溢彩的感觉呢？如果你回答No，我只好就此Stop了，呵呵。好了，废话不多，我们一起开始吧！看看到底如何制作出这样一款超酷的金属字效果来。本节要点：重点掌握Effect（效果）命令中Adjust Color--Curves效果命令和Hue/Saturation效果命令的使用方法！第一步、 新建文件，文件的大小为300*100像素，背景色采用白色。为了突出效果，建议你先不要采用其他色彩的背景色，等我们学习完毕，你自己重新开始时，再用其他的颜色来试验也不迟。第二步、 选取工具箱的Text Tool（文字工具），在编辑区点击，在随后弹出的文本编辑器中输入文字，这里输入的是“金属字”三个字，字体采用的是“方正超粗黑简体”（尽量选用较粗的字体）；字体的颜色为黑色；字号为91pt大小；字体边缘效果选择Smooth Anti-Alais（平滑边角）。其他的选项保持默认值即可。设定完毕，编辑区应该如图01所示：图01 输入文字后的编辑区第三步、 这一步，我们要调整文字的填充颜色。选中编辑区的文字对象，打开Fill（填充）面板，将文字的填充方式由原来Solid（单色填充）变为Linear（线性填充），点击颜色列表旁边的Edit（编辑）按钮，对渐变色进行编辑，从左到右的颜色排列顺序为“#CCCCCC--#000000--#CCCCCC”，具体设定请参考图02。（注意：文字的填充颜色设定很关键，如果你采用其他的颜色打牌方案的话，效果就不一定如我们所愿了，不过，你可以自行试验）图02 对文字的填充色进行调整第四步、 设定完毕后，文字的填充色已经发生了变化，由原来的单色填充变成了从左向右的渐变色填充，如图03所示：
fireworks制作送给心上人的礼物
送给心爱的人的一个礼物，那就是你的一颗心！哈哈 ：），不要害怕……。如何才能“掏出”这颗心呢？请看本教程！ 第一步：制作“心形”。 1.1 用椭圆工具画出一个正圆，然后clone它，将clone后的圆向右移动，调整位置如图1.1所示。为了力求使得两个圆保持水平，我们可以使用"align"（对齐）工具，（modify-->align-->center horizontal）让他们保持水平对齐。接下来，同时选中两个圆，选择菜单项的"modify --> combine --> punch"命令，这时候，应该如下图1.2所示：图1.1 --- --- --- >> 图1.2 1.2 用工具箱的超级选择工具（也就是工具箱右上角的白色箭头)，点中如上图1.2所示的节点，向下拖动到合适的位置，也就是你的心型图的高度。如下图所示： 1.3 还是用超级选择工具，点中如下图3.1所示的两个节点，此刻心型图已经形成了，如下图3.2所示：图3.1 --- --- --- >> 图3.2
活用Firework4制作下拉菜单
Firework4的一个新增加的功能就是能轻易地制作下拉菜单。下拉菜单是目前比较热门的一种网页交互方式之一。仿Windows界面的下拉菜单非常流行。但是由于制作菜单需要懂得一定的javascript语言或者操作步骤比较麻烦。因此在一段时间内还很少有人制作这样的东东。现在有了Fireworks就简单了。 闲话休提，言归正传。新版本的firework4.0，在界面上，跟firework3.0没有多大区别。打开firework4，新建一个文档，（记住页面大少要象素800×600）你利用一些基本作图技术，制作出几个按钮。如图1，我就搞了这样几个按钮。 接着点击左边工具栏slice tool(小刀工具)，将几个按钮割开。如图2：右击“我的历程”按钮，选取add pop-up Menu选项；然后右击“我的历程”，选择“pop-up memu”于是调跳出一个新窗口，如图3： 在文字栏中填上你菜单内容，连接在栏中填入你所要连接的页面，之后按加号添加。按类似的方法，再添加几个，在本文例子中填入四栏！之后，按next键继续。如图4 在此，让我详细地介绍一下以上窗口的内容。Cell栏：那是菜单选项的格式，html是html文本格式，而image是指图片格式。选择不同，会有不同的效果。在此，本人较赞成用图片格式，因为那看起来较漂亮些。下面的是字体和字号的选择，这随你喜欢啦！up state是指鼠标放到按钮时的字体设置和菜单格的设置，overstate是指鼠标放到菜单栏时字体的设置和菜单格的设置。你可以选择一种你喜欢的格式。Preview是预览栏，因为该软件对中文支持不好，所以显示为不正确，你可以不管它，因为导出时是正常的。之后，按“finish”搞定。完成这些设置后，按“文件”菜单的eXPort选项，导出html文件，这样你可以预览啦！哗，是不是很酷呢！如图5
Fireworks4.0大内秘籍之两仪剑法
小生不才最近发现,Fireworks菜单选项中有一个Xtras(扩展),其下包含了Adjust Color,Blur,shapen等子菜单,而在effect(效果)面板中,也有与Xtras下子菜单相类似的效果菜单选项.这两者在应用中是一样的还是有什么区别呢? 非常凑巧,不才在翻阅<<Fireworks大内秘籍>>时,看到了关于这个问题的一段专门的武功讲解――两仪剑法.现在摘录如下,让大家一起来参研. 两仪剑法摘录 两仪剑法为武当派两位高手积数十年之力所创,剑法中有阴有阳,亦刚亦柔.出招时,一人长剑大开大阖,势道雄浑,一人疾趋疾退,剑尖上幻出点点寒星.使用该剑法,首要的是要分清两仪,区别位图效果和实时特效,方能临阵不乱,从容秀图. 心法：位图效果 Xtras菜单中的命令是针对位图图形的,用于创作位图效果. 在Fireworks中,通常区分如下几类对象:位图图形,矢量对象,文字对象. 位图图形可以在位图编辑模式中对图像进行修改,而其他对象在位图编辑模式下,不受影响.所以,使用Xtras中的命令必须确定操作的是位图图形.如果您对其他对象使用Xtras,将出现如下对话框.