推荐阅读
应用PhotoShop抽出功能轻松抠出照片中的人物
原图效果1、打开图片，ctrl+j两次，得到图层1和图层1副本2、点击红圈处，创建新图层，得到图层2把这层放于图层1与背景层之间，并填充颜色，这里填充了绿色，作为检验效果和新的背景层3、在图层1执行滤镜--抽出命令
Fireworks MX 2004 实例-麦冲效果
第一步：建立一个工作区，高400宽400，背景色黑色。选种钢笔工具，关闭笔触在场景里任意勾画一个不规则的形状。然后对其进行填充，选线性—波浪 左色块#FFFFFF,中间#00FFFF,右色块#0099FF，请参考图片。。。 第二步：对其进行效果添加，选中你做好的形状，点菜单栏滤镜—EYE4000—摇动变形。请参考图片设置相应参数。。。点确定。 第三步 ：还是选滤镜—EYE4000—光患环效果，请参考图片对其参数进行设置。。然后点确定。 第四步：执行滤镜—模糊—缩放模糊，请参考下图设置。点确定。。 第五步：在此执行滤镜—调整颜色—色介。请参考图片设置其属性，点确定。
Mix-FX帮您制作FLASH特效字只需五步
我们在上网时不难发现，无论是网站的logo，还是飘浮广告都会大量运用Flash制作的各种精美的特效字。不过对于没有Flash使用经验的菜鸟来说，制作这样的特效字会感到非常困难。下面笔者就为大家介绍一款专门制作Flash特效字娜砑?B>Mix-FX，让菜鸟们轻松制作自己的Flash特效字，说不定别人看了后会认为你是一个Flash高手哟! 先下载Mix-FX软件，安装后运行，可见到图1所示的软件主界面，界面上方是特效字的设置区域，下面则是预览窗口，可实时显示文字效果。该软件制作Flash特效字仅仅需要5个步骤就可以完成，让我们来实践一下吧! 第一步：输入文字、选择特效 在Text标签页中输入你所要制作成Flash的原始文字，如computer。Mix-FX只支持英文输入，且最多为35个英文字母。在“Select Text Effect”下拉框中选择文字的变化效果，软件提供了多达20种效果，如数字化、抖动、淡入淡出、爆裂、旋转等。当选择了一种效果后，只需点击“Update”按钮就可在预览区中看到效果。最后来设置文字的字体，点击“Select Font”下拉框选择软件内置的11种文字效果即可。
一个Logo的制作过程
这是某位同学问的做法~他发的图是这个：但是~我做不出一模一样的，所以还需要多多琢磨啦~1。在FW中新建一个88*31大小的文件。2。在画布中画一个88*31的矩形。3。矩形填充-渐变-放射状，然后选择颜色。（不一定要酱紫的，你喜欢怎么样就选怎么样的效果）4。在祯面版中选择重置祯。数量自己估计，在当前祯之后。5。在祯1上打“_”最好是白色的，效果：阴影和光晕――发光，设置如图。6。接下来把这个"_"复制到祯3。7。在祯4同一位置写上“B_”；祯5同一位置写上“BK_”；祯6你也能猜出来，是“BK1_”，就这样以此类推，把要的字打完。到最后一个字的时候，后面就表打“_”了。并重置最后一字所在祯。（你前面重置的但是没有用到的全都拖到垃圾筒里）8。最后一字所在祯的祯延时设为50。9。在下一祯中作一个矩形，宽10，高31。纹理粒状，透明度0%。位置在画布的左上角。10。用倾斜工具，将矩形调节到你想要的倾斜位置。11。选中矩形，滤静――模糊――高斯模糊（教程：）12。在接下来的几祯里调节位置。13。最后一祯中把矩形移出去。最后一祯祯延时：100。14。在作些修改，比方说加边框什么的，美观一些。15。导出成GIF动画，完成。未美化的完成图：其实这个很简单的，只是把以前的教程结合一下而已~如果有什么不对的，请指教，谢谢
最新发布
详细解析设计更优的移动支付流程的方法
译者注：在电子商务中，我们发现用户在支付环节的流失率非常高，支付流程的用户体验是至关重要的环节。本文介绍了一些移动端支付流程的方法，怎样让我们的支付流程更加易用。业余时间翻译了这篇文章跟大家共享，若大家发现任何错误，欢迎随时给予纠正。原文地址：designing-a-better-mobile-checkout-process数据显示越来越多的用户具有使用智能手机进行付款的倾向。“ 这些用户愿意在移动设备上完成购买吗? ”这个问题得到了迅速回答。2012年，美国移动电子商务销售额飙升81%,形成了250亿美元的市场。值得注意的是，这些成交贡献只有一部分来自于app。根据调查显示，61%-81%的用户更倾向于在移动端的网页上来完成购物的各种操作：研究商品和价格，查看商品详情，参加促销活动，下单和支付等。比起功能相互****的app，他们更倾向于在浏览器中来进行购物(来获得浏览与支付环节之间的无缝体验)。让我们深入看一些移动端结账流程的例子。1、只保留重要信息我们也许都回答过很多令人讨厌的问题，比如“你是怎么知道我们的?”这样的问题可能是对商家有用，对消费者来说没有任何作用。然后这些消费者需要付出辛苦赚来的钱，他们也更有权力决定是否关闭这个页面。虽然这些问题在网页上不那么重要，但是在移动端却是致命的。让我们来看两个例子：左边是是由Moby设计的响应式移动支付流程，他减少了不必要的信息只保留了必要的信息。成功的把整个支付流程聚合到了一个页面。
网页设计中文字排版的10点技巧分享
在网页设计中，文字排版对于网站和用户之间建立良好的沟通以及帮助用户实现目标起着重要的作用。当我们谈论网页是否能和用户建立有效的沟通的时候，通常是指文字排版在这里起到的作用：“网页中95%以上的信息是以文字形式呈现的。”良好的排版使用户更易于阅读，而混乱的排版则使用户失去继续浏览的意愿。正如“Oliver ReichensReichenstein在他的文章“Web Design is 95% Typography ”中写道：“排版的目的是优化可读性，访问率，可用性，保持和图形的平衡关系”换言之，优化排版也在帮助您优化界面。本文中，我们提供一组规则，将帮助您提高文本内容的可读性和易读性。1.不要使用过多的字体网站排版中建议最多不要超过3种字体类型，不然会使网站看起来松散和不专业，不仅太多的字体类型会造成这种问题，太多的字体尺寸也会破坏网页布局。通常情况下，将字体家族的数量限制在最小数量(2个是很多，1个通常就够了)，整个网站坚持使用相同的原则。如果使用多个字体，请确保俩个字体是否和谐。以下面的字体组合为例，Georgia和Verdana的搭配相得益彰，相对比较和谐。相比于右边Baskerville和Impact则会有明显的冲突感，非衬线Impact明显的超过了Baskerville的视觉冲击力。
详细解析网页初级学习者如何学习
嗨少年，你是否下定决心学习网页设计？那就恭喜你了！网页设计可能是你职业生涯中让你满血复活的技能之一了。路漫漫其修远兮，在这漫长的学习中,开始的30天是至关重要的，因为很多人仅仅坚持了一两个星期就放弃。在这篇文章中，我将传授你一些有用的知识和技巧，让你更好的开始网页设计之路，并长久的留在这个赛道上。向上吧，骚年！网页设计是一个涉及面很广的领域“我想学习网页设计”这句话就像“我想学习如何烹饪”一样,你知道吗？做饭有成千上万的食谱,很多不同的烹饪风格。每个成为设计师的人都应该知道,网页设计有成千上万的特定工具和一般原则。也正因为网页设计是这样一个广泛的领域,许多人就简单地问：叫兽，我该如何开始？这个问题虽然只有六个字，却能阻挡了人们的网页设计之路：有这么多工具可以选择,那我到底该选哪个呢？我真的无从下手。我的网页设计之路在网页设计大军中,我也曾是一个被如何开始和从哪里开始弄的不知所措的菜鸟。我不知道是该先学习Dreamweaver呢还是photoshop ? 或者先学习如何用JavaScript编程?其实这些事情我都可以做,但当学习的资源很多的时候,我们中的许多人就会面临着过载的选择,当你有很多选择时,你会烦恼,最终一个也不想选了。你有过这种经历吗？Dreamweaver是一个很基本的程序,它可以帮助你更快编写HTML和CSS代码。它的优点是简单,缺点是你会花更多的时间去编码。所以Dreamweaver只能是一个节省时间的好方法,而不是学习网页设计的好开头。这就是我已经吸取的教训。所以我的选择是:首先学习HTML和CSS. 为什么要从HTML 和CSS开始?
色彩的流行趋势分析及实际设计中的应用
无论是平面设计，包装设计还是网页设计，空间设计还是产品设计，色彩永远是最为重要的环节，但我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是电脑界面的色彩。关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关设计书籍或者特别棒的设计案例，有利于系统系统地理解，在此我们通过设计的对比和配色告诉大家在工作中，色彩的配置和色标使用;下面介绍一些色彩在实际使用中的步骤;第一步、底色和图形色;色彩搭配的问题确实不是一个简单的问题。这一代的设计师比上一代的设计师，所能运用的色彩工具多了许多。如今，我们能运用好计算机为我们提供的丰富色彩，看来不是很简单的事情。就我个人而言，在我从事设计师工作以来，往往也会迷失在色彩的世界。现在交流一下自己学过的和掌握的一些经验，希望大家指正。配色所要注意的要素实际设计时，我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案，这个方案就是我的配色计划。在做配色计划时，我们应该考虑下述几点以突出视觉效果。在设计时我们会经常遇到用几个色做各种形的构成，作为底的色我们往往会将它推远，而作为图形或文字的色我们要将它拉近。这就需要我们了解受配色关系的影响是什么样的。一般明亮和鲜艳的色比暗浊的色更容易有图形效果。因此，配色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。图形色要和底色有一定的对比度。这样才可以很明确的传达我们要表现的东西。我们要突出的图形色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。第二步、整体色调 如果我们想使我们的设计能够充满生气，稳健，冷清或者温暖，寒冷等感觉都是由整体色调决定的。那么我们怎么能够控制好整体色调呢?只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。才可以控制好我们设计的整体色调。首先要在配色中心决定占大面积的色，并根据这一色来选择不同的配色方案会得到不同的整体色调。从中选择出我们想要的。如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉，反之亦然。如果用暖色和纯度高的色作为整体色调则给人以火热刺激的感觉，以冷色和纯度低的色为主色调则让人感到清冷、平静的感觉。以明度高的色为主则亮丽，而且变得轻快，以明度低的色为主则显得比较庄重、肃穆。 取对比的色相和明度则活泼，取类似、同一色系则感到稳健。色相数多则会华丽，少则淡雅、清新。 以上几点整体色调的选择要根据我们所要表达的内容来决定。第三步、配色的平衡 颜色的平衡就是颜色的强弱、轻重、浓淡这种关系的平衡。这些元素在感觉上会左右颜色的平衡关系。因此，即使相同的配色，也将会根据图形的形状和面积的大小来决定成为调和色或不调和色。一般同类色配色比较容易平衡。处于补色关系且明度也相似的纯色配色，如：红和兰绿的配色，会因过分强烈感到刺眼，成为不调和色。可是若把一个色的面积缩小或加白黑，改变其明度和彩度并取得平衡，则可以使这种不调和色变的调和。纯度高而且强烈的色与同样明度的浊色或灰色配合时，如果前者的面积小，而后者的面积大也可以很容易的取得平衡。将明色与暗色上下配置时，若明色在上暗色在下则会显得安定。反之，若暗色在明色上则有动感。第四步、配色时要有重点色 配色时，为了弥补调子的单调，可以将某个色作为重点，从而使整体配色平衡。在整体配色的关系不明确暧昧时，我们就需要突出一个重点色来平衡配色关系。选择重点色要注意以下几点：重点色应该使用比其他的色调更强烈的色。 重点色应该选择与整体色调相对比的调和色。 重点色应该用于极小的面积上。而不能用于大面积上。选择重点色必须考虑配色方面的平衡效果。第五步、配色的节奏 由颜色的配置产生整体的调子。而这种配置关系在整体色调中反复出现排列就产生了节奏。色的节奏和颜色的排放，形状，质感等有关。由于渐进的变化色相、明度、纯度都会产生变化而且时有规律的，所以就产生了阶调的节奏。将色相、明暗、强弱等等的变化做几次反复，从而会产生反复的节奏。可以通过赋予色彩的配置以跳跃和方向感就会产生动的节奏，等等。我们可以通过学习或训练来掌握更多的节奏效果。
让你的表单升级到CSS3和HTML5客户端验证
今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。查看预览首先，我们得为我们的表单策划一下该有什么功能，用什么形式表现。在这个示例中，我们就制作一个比较简单的留言表单。需要的功能如下：名称电子邮件网站地址提交按钮我们都希望用户能够填写正确的信息再提交，要实现这一点，我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢？在这里简单的使用服务器验证，不做进一步的深入了解。在我心中，憧憬着一个美丽而简约的提交表单。虽然现在很丑，但是他不是野鸡是凤凰。
详细解析网页页面光影特效的运用
为了展现页面的主题或者是贴近游戏的氛围，常常会看见游戏的页面中运用了许多不同类型的光效的渲染，一个简单的元素有时候加上一点光效就可以化腐朽为神奇。那么光效究竟是如何具体地影响页面的视觉观感的呢?1、 丰富页面的层次当人物和背景的颜色比较接近时，为了增强人物的立体感和空间感，可以在人物上添加光效，拉开人物和背景的距离，形成视觉差异，这样需要强调的人物就瞬间凸显了出来，页面的层次也一下子体现出来了。2、 烘托气氛光效的颜色、形状和出现的位置会对设计表达的气氛产生很直接的影响，就好像现实中的光源一样，浅色暖色调的光效给人光明温暖的感觉，深色冷色调的就给人阴暗冷酷的感觉，同样的素材加上不同的光效，展现的也许就是完全不同的立场。具体到游戏页面设计，不同的势力性格不同，通常都有各自的代表颜色，这时候用对应的光效来表现，很容易就能烘托出这些势力不同的个性来，是非常基本的运用。3、 视觉焦点有时候光效在页面上以光源的形式出现，这样可以很容易抓住用户的眼球，吸引住用户的焦点，页面上需要重点强调的信息，就可以展现在光源附近，这时光效充当的就是引导用户的作用，非常简单，但是很有效。
常见的浏览器HACK技巧总结
如果你经常需要做前端页面，那么你一定多多少少需要解决页面的浏览器兼容问题。而浏览器兼容问题大部分也集中在对IE系列的兼容。这里就总结一下对IE系列的CSS Hack，记录一下，方便以后查阅。IE系列浏览器的hack大略如下：这样就基本上就可以兼容所有IE。其中粉红色部分为属性hack，黄色部分为选择器hack，它们可以结合使用。此外Firefox和Chrome也有它们专有的hack，详细hack方式及使用示例如下：Firefox： @-moz-document url-prefix() /*写在选择器外层时（只可写在此处）：Firefox only*/ Chrome： @media screen and (-webkit-min-device-pixel-ratio:0) /*写在选择器外层时（只可写在此处）：Chrome only*/ 使用示例： @-moz-document url-prefix() /*Firefox*/{ body { background-color:pink; }} 浏览器对css的解析是从前到后的，并且采用最后一个样式声明。 .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-color: #FF0000/9; /*IE6、IE7、IE8会显示红色*/ *background-color: #0066FF; /*IE6、IE7会变为蓝色*/ _background-color: #009933; /*IE6会变为绿色*/} background: red; /* 对FF Opera和Safari有效 */#background: blue; /* 对 IE6 和 IE7有效 */_background: green; /* 只对IE6有效 *//*/background: orange;*/ /** 只对IE8有效 **/!important /*FF、IE7有效*/* /*IE都有效*/ IE8是可以和IE7兼容的，简单一行代码，让IE8自动调用IE7的渲染模式。只需要在页面中加入如下HTTP meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，只要IE8读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。
社交媒体分享图标在网页设计中的作用
上周末，我参加了生平第一次黑客马拉松。你知道什么是黑客马拉松吗?那是一个出钱的人(投资者)寻找可能开发成功的项目，然后持续24小时的很长很长的马拉松式的编程活动。所以我和我的朋友们或多或少的建立并提出了一些现成的项目(无论从发展还是商业的角度去看)，于是投资者选择在这些项目上投入。在一个项目发展的最新阶段上，我们在社交媒体图标的选择上面发生了很多争执，而且没有一个人想要放弃。这次的争论给我们提供了新的想法，也使我们更加注重社交媒体图标在网页设计中的作用。它们看起来像什么?它们真正的作用是什么呢?为什么网页开发人员怀疑它们呢?剖析社交媒体图标事实上，社交媒体图标可以理解为社交媒体、社交网络的标志以及说明的链接。社交媒体图标可以表现出几个不同的功能。有时，它是社交网络中的公司资料页面/帐户的链接。通常情况下，你可以在它们的周围看到“跟随我们……”或“加入我们……”这样的字样。这些图标通常会被放在网页的顶部或底部，也可以放置在侧边栏。从经验来说，它们在整个网站都是可见的。New York TimesLucius社交媒体图标可以在社交网络中的用户帐户内共享特定的网站页面内容。这样的图标总是应用于博客和网上商店，我们也可以把它分为两种类型：普通的社交媒体共享图标;
设计一个成功电子商务网站的四大特点
电商网站的设计是最复杂且交互性最强的，对于一个不谙此道的人的来说将会是一个艰巨的任务。即使你在网站设计圈子里混迹多年，你也可能不知该从何处下手。所以一旦你下定决心要趟这一趟“浑水”，牢记以下几点将会使你在设计道路上事半功倍：1、面向合适的用户群在浩瀚网海，你可以找到任何你想要的东西，那么是什么使用户能来网上光临你的网店，而不是去大型零售专营店血拼呢?为用户提供良好的用户体验，使他们相信并且尊重你在这方便独到的眼光就显得尤为重要。如果你能给用户博学可靠的印象，那么用户也更愿意花时间同你一起购物。认清你的电商网站的闪光点，然后在你的设计中将其突出放大。例如Kiki &Bree专注于双胞胎婴儿装的设计。或许你也可以在专营连锁店找到类似的产品，但是K & B提供的网站设计和产品描述，会让你觉得他们的产品经过设计师的精雕细琢，是其他三俗网站无可比拟抄袭不来的。2、遵守常规的导航元素一个电商网站也是最需要讲求实际的网站之一，对于其他网站的设计(比如作品集和博客)，一些规则可以被打破，但是对于电商网站，“形式遵循功能”的设计理念需要严格遵守，如此才能将用户的困惑和不满降低到最小。应遵从的设计理念如：导航栏需要在左边或者右边可快速识别的搜索栏