推荐阅读
详细解析多终端产品视觉一致性
随着智能终端的多样化和快速普及，越来越多的产品都面临着多终端的挑战。那么视觉设计师应该如何去把控好多终端产品的设计?如何让多终端的产品做到具备一致的品牌识别性?这是我想跟大家一起探讨的话题。首先对于”一致”一词，本人诠才末学，只能说是在自己目前的层次上去解释这词，请不吝赐教，相信探讨完后会让我更上一个层次。什么是视觉一致性?一致，即整体、统一。在我看来，它与对比是形成了互斥的矛盾关系，但两者同时也是相辅相成的。因为两者的和谐存在，才能形成所谓的美感。物质形态如果在形成中缺少了对比那会显得枯燥乏味，如果缺少了一致也会显得杂乱无章，所以两者是不可或缺，但需要调和。所以说，美就像是走在钢索上的人，两边都是陷阱，要走下去就必须保持两边的平衡。笼统上讲，视觉一致性就是通过视觉层次、比例、颜色、质感、排版等在设计上达到一致性。我们也可以从生活中找到些体现一致性的例子，而视觉一致性可以提高产品所塑造的品牌形象，一定程度上减少用户的认知成本。好比你进去LouisVuitton的店铺时，你不可能会看到有Chanel或者其他品牌风格的包包罗列在里面吧，LouisVuitton同一个系列的包，从手提包到肩包到行李箱，虽然产品上略有不同，但它们的细节和气质都是一致的，标识图形、埃尔泽菲尔字体以及颜色已经形成了其品牌的识别符号。甚至其衍生产品也都保留着LV独有的气质。我不是一个网游爱好者，但对游戏界面略有研究。当你在玩2D的阿拉德欧式风格的游戏，途中突然弹出一个3D的很唯美的又带有东方古典风的广告弹窗，肯定会觉得很不和谐吧。当你使用游戏中的充值币时，细心点你会发现消耗充值币的动画与消耗游戏币、消耗体力等消耗类的动画效果是一致的。其实每一款好的游戏界面都必须做到相关元素一致性、风格一致性、色彩搭配一致性等，这样才会给用户带来好的体验。还有就是你常看到的系列广告，他们系列感也是可以通过好些方式(画面表现手法，内容板式，slogan的位置等)来体现出视觉一致性，让用户可以直观出同一个产品的系列广告。
用美图秀秀怎么修改gif图片尺寸裁剪gif大小
gif设计的时候，是一组相同尺寸的图片，加上动图效果生成的动图。那么要修改其尺寸，且不破坏原有的动图效果，那么就需要找到合适的软件才能完成，本文使用美图修改动图，也是为了能够让大家轻松掌握，虽然不能像裁剪图片那般容易，但一些技巧还是有一定的借鉴意义的，希望看完本篇教程，能够给您启发。 1、使用的还是v4，v5最新版不支持此种操作，美图官网直接点击【立即下载】，安装完成后启动软件。 2、首先用美图打开动图，以静态图片的形式展示，目的是为了确定裁剪尺寸。下图中打开gif图片，提示显示为静态图片，点击确定即可。 3、图片打开之后，如下图所示，我们只需要中间的区域，点击裁剪按钮， 4、通过拖拉选框，找到合适的位置，比如下图中，中间图案的尺度为140*90，我们的目的就是把gif裁剪为此尺寸。 5、点击右上角的【新建】按钮，弹出的界面上，输入上面获取的宽度和高度值，背景色选为【透明】，点击应用按钮， 6、创建出的画布上，单击右键，点击弹出的【插入一张图片】，选中gif图片。 7、因为固定了画布大小，所以只需要移动gif图到合适的位置，露出需要的图案部分即可，然后点击右上角的【保存与分享】按钮， 8、弹出的界面上，可以看到默认展示的动图缩略图，以及后缀名为gif，更改路径和文件名之后点击保存即可。 如果只是修改gif图片的尺寸，那么就更为简单了，只需要新建画布，拖拉缩放gif图片保存即可，如有疑问可以在下方留言。
Illustrator CS5初学者必读（15）复杂无缝贴图
在上节内容中制作了较为简单无缝贴图，在本节内容中，继续为朋友们讲述使用裁切标记，制作较为复杂的无缝贴图的方法。为了更加便于朋友们理解这个命令的应用原理，我精心的为朋友们安排了实例，在开始教程的学习之前，请先在网站下载配套的练习文件，以便跟随操作步骤学习。（1）执行“文件”→“打开”命令，将“复杂图案.ai（2）在“图层”调板中，复制“背景”图层。（（4）执行“对象”→“创建裁切标记”命令，创建裁切标记。
Painter9.5+友基绘影绘制卡通人物漫画
工具：Painter9.5+ 友基绘影ⅡPF8080 1.首先要完成线稿，漫画类的和写实的不同，线稿很重要。要有耐心，因为最后线稿不会覆盖全部显示的出来 图1 2.提线条 打开PS，将线条和之后要上色的图层分开，涂色的时候不要伤到线稿~，直接把背景图层复制到上一层，将模式改为正片叠底，然后把背景图层清空。将线稿调整颜色。 完成。 图2
最新发布
Fireworks中制作呼机
先看看效果图 可能你早就步入了手机时代，但不能否定曾经的传呼通讯给了我们极大的方便，饮水思源，让我们一起来怀念数字信息的先驱－－－呼机。1、新建文件，Width=300,Height=220，背景色为白色，2、用圆角矩形工具，在编辑区拖画出一个圆解矩形，填充色为#006633。打开Object面板，在Roundness 中。输入圆角角度为36。选中该圆角矩形，打开Effect面板，Bevel and Emboss>Inner Bevel,在弹出的设置框中，如图设置。3、用圆角矩形在编辑区拖画一个略小点的圆角矩形，在Object面板中，把圆角糸数Roundness设为36，填充色为#006633，把它克隆一个备用Edit>clone，为了方便起见，把克隆出来的圆角矩形隐藏起来（在layer面板中点它前面的眼睛图标）。选中该圆角矩形，打开Object面板，Bevel and Emboss>Inset Emboss，在弹出的设置框中如图设置。4、打开刚才隐藏的克隆出的圆角矩形，（在layer面板中点它前面的眼睛图标既可），选中它，打开Fill填充面板，如图设置5、使该圆角矩形从左上角到右下角渐变，打开Effect面板，Bevel and Emboss>Inner Bevel，在弹出的设置框中如图设置。6、噫。怎么是这效果，不太对路，不要急，看我们如何让它走上正途吧。选中这黑色的圆角矩形，在layer面板中，把混合模式选为screen，看看，起了什么变化？我们就是要这种效果。7、用圆角矩形工具在编辑区拖画出一个大小适当的圆角矩形，在Object面板中，把圆角糸数Roundness设为36，我们要把这圆角矩形成为呼机上的显示屏，选中它，打开Fill填充面板，选用线形渐变linear，进行如图编辑8、选中该圆角矩形，用油漆桶工具使渐变方式从上到下填充，打开Effect面板，Bevel and Emboss>Inset Emboss，在弹出的设置框中如图设置9、下面我们给呼机加上按键，用工具箱中的椭圆工具拖画出一个小椭圆，填充色为黑色，选中该椭圆Edit>clone克隆出一个，把克隆出的椭圆隐藏起来备用，选中椭圆，打开Effect面板，Bevel and Emboss>Inset Emboss，如图设置10、打开刚才隐藏的克隆出的椭圆，选取它，打开Effect面板，Bevel and Emboss>Inner Bevel，在弹出的设置框如图设置11、选中这两个椭圆，Modify>Group把它们组群，选中组群后的椭圆，Edit>clone克隆出一个，把它移到旁边。这样两个按键就形成了，用上面同样的方法，再画一个稍大点的按键，用旋转工具把这个大的按键旋转一点角度。此时效果如图
Fireworks中设计网页虚线的几个妙招
网页设计中我们会用到很多种样式的分隔线，下面我们就来看看在Fireworks中设计网页虚线有哪些妙招。 方法一、用Fireworks中自带的虚线样式 Fireworks中自带的虚线样式有：三条破折线、加粗破折线、双破折线、基本破折线、实边破折线、点状线。 在网页设计中，我通常的用的是实边破折线。因为它和网页Css中border的dotted、dashed两个参数效果相似。在制作网页时，不需要导出切割图片，而是用CSS定义。 但有时候总觉得自带的那些虚线不适用，或者想设计更有特色的网页设计图时。我们还需要用到其他的虚线。 方法二、用Fireworks的自带纹理 画一个1像素高的矩形（边宽为0，填充所需色），然后给它添加Fireworks的自带纹理，纹理总量设为100%。 以下是一般可用的1像素高的纹理虚线效果图：
无缝背景图制作之一
通常我们在制作网页的时候，会使用一些现成的小图片平铺的方法来作为网页的背景图，但是如果我们想要制作自己的背景效果图片的话，如何才能达到构成背景图的各个小图片之间的的无缝拼接呢？想一想可能是很简单的事请，但是做起来就不是那么容易的事情了，好了，下面我们一起来看看制作的步骤。 本节我们要学习的，就是制作一个六边形的图片，然后通过处理将六边形的图片作为无缝背景平铺的背景图片，大家可以试验采用其他的效果图来作为无缝背景平铺的背景图片。 1、打开FW，新建一个文件，文件的大小为50*50像素，背景色为白色。[注意]一般来说，背景图片都是比较小的，我们这里采用50*50像素大小的目的是，希望制作的演示步骤能够清楚些。2、选取工具箱的多边形绘制工具，因为我们需要绘制一个六边形，所以现在我们打开Options面板，进行相关设定如下图所示：3、设定完毕，我们就可以绘制出一个六边形了，记得绘制的同时配合Shift键，这样我们就可以绘制出一个等边六边形。绘制的时候，请注意鼠标的拖动方向及其范围，通过鼠标拖动可以调整绘制出的六边形的位置、方向、大小等，请大家绘制时参考下图所示：4、此刻六边形的大小可能与编辑区的大小不符合，我们可以使用缩放工具对其进行大小的调整，使其大小和编辑区基本相符即可，如下图所示：
Fireworks笔触和蒙板打造残破照片边缘
绘制造残破照片边缘的方法有很多，本文我们用Fireworks笔触和蒙板来实现。 1、在Fireworks中打开欲加残破边缘效果的照片文件，可以使用矩形或圆形工具绘制并覆盖欲处理成残破边缘的区域轮廓，如果想要不规则形状的区域，也可以使用钢笔工具绘制出闭合路径，如图所示： 2、绘制好路径后，选择路径，填充颜色和笔触颜色均选择白色，在属性栏中把填充的边缘设置一定的羽化值，笔触类型主要以非自然类型笔触中不规则图形为主，本教程里最终效果选择的是[非自然]中的[油漆泼溅]， 设置笔触的笔尖边缘柔化为0： 3、设置笔触选项，选择笔触的高级选项，进一步设置笔触效果，教程所使用的设置仅供参考，大家可以根据不同的笔触设置不同的参数： 4、选择路径和照片两层，修改菜单――蒙板――组合为蒙板，注意蒙板的属性选择为灰度外观，得到最终效果：
Fireworks笔触与选区实现残破照片边缘特效
绘制残破照片边缘的方法有很多，我们上次介绍了用Fireworks笔触和蒙板来实现的方法，今天我们用Firework的s笔触与选区来实现。 1、首先打开欲加残破边缘效果的照片文件； 2、可以使用矩形或圆形工具绘制并覆盖欲处理成残破边缘的区域轮廓，如果想要不规则形状的区域，也可以使用钢笔工具绘制出闭合路径。使用钢笔工具，建议将填充边缘选择为[实心]，为了能更好的看到轮廓位置，先不要填充颜色，只加笔触颜色，如图所示： 3、绘制好路径后，选择路径，在属性栏中设置笔触类型，选择的类型主要以非自然类型笔触中不规则图形为主，本教程里最终效果选择的是[非自然]中的[油漆泼溅]； 4、接下来再选择[笔触选项]，详细设置笔触。设置笔触的[笔尖]的[边缘柔化]为0；
Dreamweaver制作网页实用七招
一、从外部文档中粘贴时，如果只要文字而不想要其格式，可以使用“Edit→paste as text”命令，不要直接用Ctrl+V。 二、当有浏览者使用Netscape浏览页面时，在改变窗口大小的时候页面会花掉。在制作网页时就应该考虑到这个问题，可以通过点击“Command→Add/Remove Netscape resize fix”来加以解决，它可以使在Netscape中浏览页面时，改变窗口大小的时候页面不会花掉。 三、仅仅拷贝文字。当我们从Dreamweaver中拷贝文字到另一个应用程序的时候，HTML代码和文字一起被拷贝过去了。一般我们都用快捷键Ctrl+C来拷贝， 如果在拷贝的时候多按一个“C”键则只拷贝选中的文字。 四、在Dreamweaver中输入空格是一件令人很头痛的事。如果你按下面的方法操作就会简单多了:先将“中文输入法”转换成全角状态，然后同时按下键盘上的Shift+Ctrl+space就可以插入一个空格(可以连续输入)。 五、library组件和template模板不用上传服务器，就可以正确预览使用了该组件或模板的页面。 六、不要在同一个页面同时使用表格和层来布置，在Netscape中会导致混乱，从属关系除外。 七、一次链接到两个网页。我们都知道超级链接一次只能连到一个页面。如果你要想一次在不同的框架页中打开文档，可以使用“Go To URL”javascript 行为。打开一个有框架的网页，选择文字或图像，然后从行为面板中选择“Go To URL”。你会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个你想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。
实战网页图形效果一则
关于使用FW系列软件制作一些图形效果的教程，相信我们已经林林总总的看到了不少，当然，我们知道这些教程的中心点大部分都是为了网页设计来服务的，毕竟我们感觉FW系列软件似乎就是为了服务网络工作而专门存在的，所以我们今天就来实战看看如何制作一款现在网上比较流行的Banner效果。图例如下：点击这里下载源文件 1、新建文件，文件大小随意，这里采用的是非正规的Banner尺寸：500*200像素大小。首先导入需要体现的位图图像，然后选取工具箱的Shapes工具组的园角矩形绘制工具，在编辑区绘制一个园角矩形，关于园角矩形的园角大小的调整，可以通过拖动位于四个角的黄色的菱形框来进行调整，如下图： 注：园角矩形的形状大小及其位置摆放可以通过调整Properties属性面板的Info区域的数值来实现，具体设置参看下图： 2、在编辑区绘制一个大的矩形对象，宽度要以能覆盖住上侧的园角矩形对象为准，位置摆放如下图所示。同时选定两个矩形对象，执行菜单命令“Modify -- Combine Paths -- Punch(修改--联合路径--打孔)”。3、在执行打孔命令后生成的园角矩形对象下方绘制一个矩形对象，高度以达到位图对象高度约2/3处为准（此处凭个人感觉可自行决定），为了便于今后叙述我们把矩形的填充颜色变为淡黄色。选取工具箱的超级选择工具（白色箭头），在黄色矩形的任意一个顶点处单击鼠标，选定该路径节点（如果在单击顶点时弹出对话框的话，点击确定即可），然后选取工具箱的钢笔工具，在黄色矩形框的下方路径上单击以增加路径节点，增加的路径节点如下图所示，位置差不多即可。
Fireworks制作妇女节主题宣传动画
我们以这个妇女节为主题宣传动画表达衷心的祝福，愿全世界的女性都能够美丽自信、幸福美满。 在下面的例子中，我们通过具体的Fireworks的实例为即将到来的三八妇女节献上一个精美的礼物。我们首先使用Fireworks的矢量路径工具如矩形、笔触、路径等勾勒出一个卡通的女性形象。为了使得形象更加具有生动感，我们可以为图像添加一定的动画效果，从而制作出一个GIF动画，为三八增加一些趣味和色彩，同时我们能够对Fireworks的帧、动画等功能加以熟悉，在这里以妇女节为主题设计的一幅动画来表达我们衷心的祝福，愿全世界的女性都能够美丽自信、幸福美满。文章末尾提供原文件供大家下载参考。 1、首先在Fireworks中新建一个大小为400×400的画布，在这里我们将画布颜色自定义为红色，如图1所示。 图1 新建红色画布 2、在这里我们要绘制的是一个拥有迷人的脸蛋，卷曲的长发，丰满的身材的漂亮女人。首先来绘制圆圆的脸蛋，只要绘制一个椭圆，使用钢笔工具增加一些锚点，然后用部分选定工具对锚点进行形状调整就可以了，由于脸蛋的很大一部分都要被头发挡住，对其形状的要求可以放低。设置填充颜色为#FFEEDA，笔触颜色为黑色，柔化圆形，大小为2，如图2所示。 图2 绘制圆圆的脸蛋 3、脸蛋画好了，就要绘制弯弯曲曲的长发了，因为有着一头卷曲长发的女人最为动人，但同时卷发的绘制会相对复杂一些，使用前面的方法对绘制的各种形状（可以根据需要自由选择圆形、矩形中的一种进行初步绘制）进行自由变形，从而勾勒出头发的基本形状，如图3所示。 图3 绘制卷曲头发的轮廓 4、为了让头发有高光的效果，从而显得更加有层次，我们可以在这个基础上添加一些曲线和较深一点的颜色，其中较深颜色的区域也是由矩形或者椭圆等规则形状进行变化得到的，最终得到如图4所示的效果。
用Fireworks快速调整人像照片色调
说起照片处理大家就会想到Photoshop，其实Fireworks中也有很多工具可以帮助我们快速调整照片色调。 下面我们介绍详细的调整步骤。 在Fireworks中打开一张我们准备处理的图片：
使用Fireworks 简单绘制竹子
早上用竹盐牙膏刷牙的时候，发现包装上的竹子很好看~ 上班的时候没什么事情就尝试着也做了一个竹子。不过，感觉有些地方还是没有达到想象中的效果，大家可以交流好的意见 这里先说下制作以前要注意的地方：我感觉竹子最重要的部分就是关节部分（2段竹子的结合处）这也是竹子的特点；还有就是竹段中，类似丝状的纹理。 1、首先画一个27*105的矩形（数值近似就可以），然后调节四脚的结点，使矩形中间的位置向内凹。 2、加上渐变色，由于我想做的效果并不是那种很真实的竹子效果，所以颜色浅了些；而且只是简单的渐变：#009000 #00cc00 3、在变形的矩形上加一些105高的竖线，注意间距要是不相同的，用来做竹子上竹丝的感觉。颜色要深些：#006600 透镜度调到20。 4、这一步用来给竹子的上下边缘加阴影，用来突出竹段之间接合的部位；在上端边缘的部分画一个长10像素的线段，颜色#006600，高斯模糊1； 5、这一步与上一步基本相同，只不过是在底部边缘的部分画一个长10像素的线段，颜色#ffffff，高斯模糊1； 6、到这一步竹段的部分就已经制作完成了，全选Ctrl+G，然后复制一个竹段，使它和第一个竹段首尾相接，但之间要留一个像素的空隙，在这个空隙中填充一条线段，颜色#006600，透明度30%。 7、这一步制作竹叶：画一个宽35高8的椭圆；删除上下2个结点；调节右边的结点，使图形左尖右宽；