推荐阅读
详细解析多终端产品视觉一致性
随着智能终端的多样化和快速普及，越来越多的产品都面临着多终端的挑战。那么视觉设计师应该如何去把控好多终端产品的设计?如何让多终端的产品做到具备一致的品牌识别性?这是我想跟大家一起探讨的话题。首先对于”一致”一词，本人诠才末学，只能说是在自己目前的层次上去解释这词，请不吝赐教，相信探讨完后会让我更上一个层次。什么是视觉一致性?一致，即整体、统一。在我看来，它与对比是形成了互斥的矛盾关系，但两者同时也是相辅相成的。因为两者的和谐存在，才能形成所谓的美感。物质形态如果在形成中缺少了对比那会显得枯燥乏味，如果缺少了一致也会显得杂乱无章，所以两者是不可或缺，但需要调和。所以说，美就像是走在钢索上的人，两边都是陷阱，要走下去就必须保持两边的平衡。笼统上讲，视觉一致性就是通过视觉层次、比例、颜色、质感、排版等在设计上达到一致性。我们也可以从生活中找到些体现一致性的例子，而视觉一致性可以提高产品所塑造的品牌形象，一定程度上减少用户的认知成本。好比你进去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 MX 2004 矢量工具-给文字描边
给文字描边是常见的图像处理功能。 1.在画布上，使用输入文字，实例中字体选择。 2.单击指针工具，然后选中画布上的文字，属性检查器中的描边颜色框就会出现。 3.单击描边颜色框，在出现的对话框中单击“笔触选项”。 4.在出现的对话框中，根据需要设置。 5.描边后的文字。
Fireworks MX 2004 矢量工具-圆角一象素描边的图片
圆角一象素描边的图片是网上常见的图片处理效果，在Fireworks中主要使用“贴入内部”命令完成这个过程。 1.打开要描边的图像，记住图像的大小。实例中宽300高213。 2.使用“指针工具”选择图片使用CTRL+X快捷键剪切这个图片。画布上就为空。 3.使用圆角矩形工具 ，在画布上画一个圆角矩形，设置如下，宽高和需要描边的图片一样，X和Y值都为0，填充为无，描边宽度为1，描边种类为1象素柔化，也可以选择“柔化圆形”。 经过设置的圆角矩形。 4.执行“编辑”/“贴入内部”命令。
Fireworks MX 2004 网页工具-创建简单变换图象
简单变换图象就是直接把第一帧上的图像替换为它下面第二帧的图象。在创建这个效果前，最好准备两张相同大小的图片。 1.使用“指针”工具选中图片，选择“编辑”>“插入”>“切片”在图象或对象上方创建切片。 2.单击“新建 / 复制帧”按钮在“帧”面板中创建一个新帧。 3.打开另一幅图片，使用“剪切”和“粘贴”命令把这幅图片粘贴到创建的新帧中。 4.在“帧”面板中选择“第 1 帧”，本例中因为切片重叠，所以可以选择任意一帧。将指针放在行为手柄上方，指针更改为手柄，将行为手柄拖到切片的左上边缘。 5.出现一条从切片中心延伸到左上角的蓝色行为线，同时打开“交换图象”对话框。在“交换图象自”弹出菜单中，选择要交换的图象所在的帧，这里选择帧2。
Fireworks MX 2004 网页工具-制作替换动画
制作替换动画的原理：把一个GIF格式的图片变成切片，添加“交换图象行为”，选择一个GIF动画文件。 1.打开要作为切片的图象，实例中把一个JPG格式的图片改成GIF格式，背景透明。 2.在优化面板中选择GIF格式，Alpha透明。 3.选中图片，执行“编辑”/“手稿”/“切片”命令，把图片变成切片。 4.打开“行为”面板，给切片增加“交换图象”动作。 5.在“交换图象”对话框中，不要选择“预载图象”，点击图象文件右边的文件夹图标。
Fireworks MX 2004 网页工具-创建弹出菜单
当web网站非常复杂的时候，可以利用Fireworks MX创建功能强大的弹出菜单，这样就可以快速访问需要的页面。 按如下步骤添加弹出式菜单： 1.选中某个切片或者热点，打开行为面板，点击“+”添加“设置弹出菜单”。 2. 单击“内容”选项卡,双击每个单元格并输入或选择适当的信息。 3.如果需要创建弹出子菜单，选中这个要作为子菜单的菜单项，单击“缩进菜单”。 4.如果要在菜单列表中向上或向下移动菜单项，可以选中它向上或向下拖动。 5. 设计弹出菜单的外观。可以选择“水平菜单”和“垂直菜单”两种布局方式。
Fireworks MX 2004和DW之间的整和运用
大家都知道FW和DW同出一个公司，他们是互为利用的，FW的图片处理后多数是在DW里应用。那么我今天就来看看他们是怎么相互整合的。先请你下载今天用到的素材 第一，首先我们先在FW里做个图片的处理。请大家打开FW2004软件，点文件点打开找到今天教程里提供的图片素材001.jpg属性面板里设置宽750X600然后全居中。选择画布也将画的大小和图片一致，然后选择右边形状面板里的透视形状，将其拖入图片上，适当调整一下透视的位置。如图： 第二步，在调整好了透视形状后，选文本工具，字体华文行楷，颜色随意，分别写，闪客启航，启航论坛，启航教室，启航教务，如图： 第三步，我们分别给这四段文字做一个简单的效果。请你选中闪客启航四个字，然后看属性面板的右下角就效果功能，点开上边的加号，点“阴影和光环”|“点投影”。使其字有投影的效果，同样的方法讲其他三个连接启航论坛，启航教室，启航教务，做好。如图： 第四步，选中闪客启航，按F8或右键调出元件面板。，这一个过程和FLASH一样，然后选其类型为按钮。同样的方法启航论坛，启航教室，启航教务分别转换为按钮。如图： 第五步，这时会看到做的按钮就有了按钮的属性。我们来设置一下属性。首先请你选中第一个按钮，你的鼠标指向中心点的时候，鼠标就成手的形状，单击鼠标左键出来对话框，我们就选“添加图像交互行为”。出来的对话框里我们选在第四帧交换，然后点旁边的文件夹调入一张你要交换的图片。（素材图片里提供了一张2003111321153022603.jpg）然后在属性面板里连接部分填上按钮要指向的地址。RLT里填上相应的文字说明，目标选择一个你要打开的方式。同样的方法去设置其它三个按钮。如图：
如何在 Fireworks 8中创建HTML切片
HTML 切片指定浏览器中出现普通 HTML 文本的区域。HTML 切片不导出图像，它导出出现在由切片定义的表格单元格中的 HTML 文本。 如果要快速更新出现在站点中的文本而无须创建新图形，则 HTML 切片很有用。注意：或者，可以在使用文本编辑器或 HTML 编辑器（如 Macromedia Dreamweaver）导出 HTML 后，将 HTML 文本格式设置标记添加到 HTML。您输入的文本和 HTML 标记以原始 HTML 代码的形式出现在 Fireworks PNG 文件中切片的正文上。注意：在不同的浏览器以及不同的操作系统中查看 HTML 文本切片时，它们的外观可能会有所变化，这是因为浏览器中可以设置字体大小和类型。
如何在 Fireworks 8 中创建非矩形切片
当试图将交互性附加到非矩形图像时，矩形切片可能无法满足需要。例如，如果打算将变换图像行为附加到切片，而切片对象互相重叠或者形状不规则，则矩形切片可能会与交换图像交换出非您所要的背景图形。Fireworks 解决此问题的方法是：允许您使用"多边形切片"工具绘制任何多边形形状的切片。 您也可以在矢量路径的顶部插入切片，以便创建不规则的切片形状。注意：请小心不要过度使用多边形切片，这是因为与类似的矩形切片相比，它们需要更多的 javascript 代码。使用太多的多边形切片可能会增加 Web 浏览器的处理时间。若要从矢量对象或路径创建矩形切片或多边形切片：选择一个矢量路径。 选择"编辑">"插入">"插入矩形切片"或"插入多边形切片"（具体取决于需要的形状）。
用Fireworks 8打造美丽的雨后蝴蝶
Vista已经越来越近，它的自然风景墙纸相信你一定叹为观止吧，现在我们来做一个Vista风格的风景，把它放在桌面上一定很一错。大雨过后，在碧绿的叶子上，散落着晶莹的水滴，一只蝴蝶张开翅膀落在上面。是不是很美的影像，那么现在我们就来制做这样一个效果。 Step 1：启动Fireworks 8，打开需要一幅蝴蝶的图像，然后选择“编辑”＞“克隆”，将图像克隆两次，如图1所示。 提示：可以使用克隆的快捷键Ctrl+Shift+D。 Step 2 C 现在我们需要做一个水珠遮罩，在层面板中选择最上面的一层，然后选择“滤镜”＞“调整颜色”＞“色相和饱和度”，调整饱和度参数为-100。 Step 3 -选择“滤镜”＞“杂点”＞“新增杂点”，在弹出的杂点窗口中设置参数如图2所示。提示： Step 4 -选择“滤镜”＞“模糊”＞“运动模糊”，参数设置如下：角度 = 127; 距离 = 5。 提示：可以通过设置运动模糊来改变水滴出来的位置。 Step 5 -选择“滤镜”＞“模糊”＞“高斯模糊”，参数设置为：模糊范围 = 3.3，效果如图3所示。 提示：可以通过设置高斯模糊来改变水滴的大小。
用Fireworks 8轻松打造滑动导航菜单
用Fireworks 8，我们可以轻松打造滑动菜单，为网页增添一点酷酷的特效。 先看一下最后效果： 1、打开FW 8.0 (我用的是8.0，当然其它版本也是一样的。 2、新建一个文档。大小760X400像素。 3、用矩形工具画一个渐变的矩形，这里这个矩形是要做为导航条的背景，所以你可以调配自己喜欢的颜色。 4、然后我用直线工具画了两条线见下图，做为分隔线来用。 5、然后按住Shift+G把这两条线组合成对象，复制这个对象，从窗口对齐面板最后见下图：