推荐阅读
Photoshop制作超酷的武林高手动画效果
前几天闲得无聊做了个这样的GIF发到群里玩，大伙都问这什么软件做的，我想说这只是PS叠加素材而已。喜欢的朋友让我们一起来学习吧。正片叠底：整体效果显示由上方图层和下方图层的像素值中较暗的像素合成的图像效果，任意颜色与黑色重叠时将产生黑色，任意颜色和白色重叠时颜色则保持不变。滤色：该项与-正片叠底-的效果相反，在整体效果上显示由上方图层和下方图层的像素值中较亮的像素合成的效果，得到的图像是一种漂白图像中颜色的效果。如果要说的简单一点的话：正片叠底就是过滤掉白色，滤色就是过滤掉黑色。先看效果图下面是素材首先我们要做的就是打开这两个图片，一个是你自己录的GIF，一个是你的挑选的特效。一楼我上传了附件，可以去下载一下，里面都是楼主收集的GIF特效素材。
Flash CS5操作指南（77）使用 Flash Professional 与 Flash Builder
使用 Flash Professional 与 Flash Builder Flash Professional CS5 提供 Flash Pro 与 Flash Builder 4 之间强化的工作流程。启用的工作流程包括： •在 Flash Builder 4 中编辑 ActionScript 3.0，以及在 Flash Pro CS5 中测试、除错或发布。 • 从 Flash Professional 启动 ActionScript 3.0 档案，以便在 Flash Builder 4 中编辑。有关 Flash Pro/Flash Builder 工作流程的视讯教学课程，请浏览www.adobe.com/go/lrvid5303_fl_tw。 开始之前为了启用这些 Flash Pro/Flash Builder 工作流程，请确认符合下列条件： •必须安装 Flash Professional CS5 与 Flash Builder 4。 •若要从 Flash Builder 启动 FLA 档案，您必须在「Package Explorer」面板中指派项目的 Flash Professional 项目特性。如需在 Flash Builder 中指派项目特性的详细信息，请参阅 Flash Builder 说明。 •若要从 Flash Builder 启动 FLA 档案，项目必须指派一个 FLA 档案，以便在项目的 Flash Professional 属性中进行测试与除错。
Flash AS3.0 实现FLASH的“动态链接库”
因为以前是做.net 的开发的,所以很习惯与 DLL 文件,觉得它异常方便,特别开发大型项目时,分成不同的DLL文件进行开发,不但节省了编译的时间,也使得程序结构更加完美. AS3中,写一类,代码如下:packagecw.DizhuAS3{publicclassDizhuRules{ publicfunctionDizhuRules() { trace("DizhuRulesCreate") }}} 新建一FLA[DizhuAS3.fla],写一帧写以下代码: import cw.DizhuAS3.*; DizhuRules;//这里还是和AS2一样,如果没在FLASH里出现过,编译的时候不会被编译进SWF中. [size=+0][size=+0] 编译后得到包含有 DizhuRules 类的 DizhuAS3.swf 文件.我把他扔进一个叫LIB的文件夹里.再新建一FLA,尝试在第一帧写以下代码:importflash.net.*;importflash.events.*;varmyloader:Loader=newLoader();myloader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLibLoaded);myloader.load(newURLRequest("LIB/"+"DizhuAS3"+".swf"));functiononLibLoaded(e:Event):void{trace("loadcompele");varClassReference:Class=myloader.contentLoaderInfo.applicationDomain.getDefinition("cw.DizhuAS3::DizhuRules")asClass;//("cw.DizhuAS3::DizhuRules") 与("cw.DizhuAS3.DizhuRules")效果一样newClassReference();} 编译运行,可以看得到 DizhuRules Create 被 trace了出来... AS3引入了 applicationDomain ,使得被载入进来的swf 里的类与主swf的里都存在与不同的环境中,从而不会出现像AS2中的旧的被新的同名的类替换的后果[因为AS2里的类都是加在_global上]
PS制作可爱叠加字
教程制作步骤如下： 首先创建一个新文件，大小300 * 500像素，填充颜色#1a142c。当然，你也可以设置自己喜爱的颜色。 之后，创建一个新层，用椭圆选框工具像我下图这样创建选区，并用另一种颜色#6d56b2填充它。 OK，让我们在背景上工作，现在我们开始创建文本效果！选择水平文字工具，用KabelBd字体和任何颜色写出字母P。
最新发布
7种必知可能毁了你内容的设计错误
设计上的错误是我们无法避免的，它可能发生在任何设计师的身上(即便是大师也一样)。也许你正在试图尝试快速的完成一个设计项目，或者你此刻正在为一个复杂的网站设计而日夜工作，只是其中有些需要注意的点被你给忽略了。但是，一旦你发现并注意到它们，你必须修复他们，立即。一些设计错误可能会破坏你的内容，导致用户放弃继续停留在你的网站，或失去对你提供有用信息的信任感。如果你不及时修正可能很难恢复他们对你的信任。不过，今天你不用感到困惑，因为今天的每一个提示都有一个来自Design Shack图片集中的实际的设计例子，希望能够帮助你找到你现在应该避免的错误!1.潦草的字体在排版方面，最常见也是最广泛的“问题制造者”就是空间。行间距或首行缩进、文本包装中的空格量是常见的“违规者”。尽管在有时你会看到很多的排版上面已经有很大的空间预留了，但更常见的问题是文本却没有足够的呼吸空间，使设计会让人感觉很混乱，难以阅读。对于大多数权重高的文本内容来说(试着想想主内容区的文本内容)，常用的网格公共线间距约为刻字大小的百分之十二至百分之一百五十。对于那些更小的文本内容来说，你甚至可以在增加一些额外的行间距，以确保它在那些小屏设备上仍能保持高可读性，比如移动设备上。这么做的诀窍在于，设计师需要充分考虑到用户如何才能在不同的媒介上获得最舒适的体验，其中文字需要容易阅读，并能够很自然的按顺序“自然流动”，而不会让眼睛感到疲劳。距离太远的文本可能与距离太近的文本在问题的处理上面临同样困难。当谈到文本的设计包装时，请遵循相同的一般规则。对于包装的相关元素，请考虑使用镜像行间距规则。这样一来，一切都会有一致和统一的感觉，可以表明元素是相关的，同时也增加了文本的可读性。正确示范：House of Khlebny2.一切都保持相同的大小
详细解析6种实验性的网页导航模式
虽然绝大多数的设计都遵循设计规则和用户的使用习惯，但是标新立异的设计仍然非常有市场。独特的设计更容易让人难忘，这一点是毋庸置疑的。在网页的导航栏设计上，也是如此。随着越来越多的网页开始采用加粗的非衬线字体置于网页顶部作为导航，许多有想法的设计师开始有意识的打破这一规律，别出机杼，采用不一样的导航模式。当然，如果你的网站用户量大，并且需要尽量降低用户的使用门槛，遵循常规的设计更合适。如果你的网站是更加偏向实验性的小网站，有趣而好玩的导航模式，反而更适宜于用户探索。不同的导航模式对于网站的影响不尽相同，针对不同的内容、不同的用户，你需要仔细挑选导航模式。实验性的导航并不具备泛用性，但是如果你在追求别具一格的设计，那么下面这些独特的导航设计应该能激发你的灵感。侧边栏导航侧边栏导航的设计多种多样，它可以是静态的也可以是动态的，宽度可大可小，几乎可以随心所欲地进行设置。但是如果你仔细审视会发现，它不仅仅是单纯的将原本的顶部导航旋转90度放到侧面就好了，对于正常的上下滚动的页面而言，常驻的侧边栏导航意味着整个页面其他部分的长宽比和以往截然不同了。所以，不论侧边栏导航的宽窄如何，你都需要重新审视，尤其是它在不同尺寸、比例的屏幕下的显示效果，并且进行合理的重设计。同时，导航中的文字如果太长，在侧边栏中还存在展示上的问题，那么你要怎么解决呢?需要考虑的问题非常之多。最优的导航设计通常都不会使用太长的词汇，并且占据的空间也相对固定。导航项目最好不要太多，如果导航栏需要滚动浏览那就太过了。上面Sanctum 的案例就做的足够简单干净，当用户滚动浏览的时候，导航会停留在对应的位置，并且随着背景而改变色彩。
25个经典案例解析个性化设计的奥秘
想想你身边的朋友，哪些人比较突出?通常来说，你认为比较突出的那些人是能让你产生强烈认同的人，因为他们个性中一些比较独特的品质和你个性中的某些品质相同，这种个性上的认同往往就是决定一个人是否能从普通朋友变为好朋友的关键。设计也是如此，个性化元素能够使一个普通设计成为优秀的设计。个性化设计能够与观众建立交流，并且从情感上吸引观众。还记得苹果公司的“Get a Mac”系列广告吗?他们让约翰·霍德格曼(John Hodgman)扮演老旧笨重的PC，同时聘用贾斯汀·龙(Justin Long)来扮演最新最酷的“Mac”，TBWA Media Arts Lab在广告中分别为两种产品赋予了不同的特性，以此让观众建立情感联系，思考自己到底是时髦的Mac还是古板的PC。这一系列广告成为近年来少有的令人印象深刻的广告作品。因此，无论是关于朋友还是关于广告设计，个性化元素都能对人产生深刻的影响。它是让一个品牌吸引消费者并且从众多竞争对手中脱颖而出的关键因素，也是过滤潜在消费群体的手段，因为个性化元既能吸引一些人，也能让另一些人望而却步。所谓的负面宣传其实根本不存在，无论观众的反应是否正面，个性化设计达到的最终目的就是引起观众讨论，与品牌进行交流。在这个社会媒体的世界里，这种策略在未来很长一段时间都将持续发挥效应。那么如何进行个性化设计呢?Aarron Walter便掌握了这门艺术，他在Smashing杂志中谈论了个性化设计如何与用户和消费者产生持续联系，他强烈建议设计师“把个性融入设计的核心内涵中”，并分享了适用于产品和品牌的个性化设计技巧。无论你是为自己还是为公司或品牌进行设计，其过程都是一样的，你要问自己“如果我设计的产品是一个人的话，他是什么样的人?”是保守还是时髦?是友善还是邪恶?是沉稳还是轻佻?列出与品牌内涵契合的五个特性和一两个与其相悖的特性，比如，你想要的特性是感性而非感伤，专业而非专制。所有这些特性都将成为指导文本和视觉元素设计的核心标准。想知道具体操作技巧就看看下列25个经典的个性化设计案例分析。01.直率、大胆、创意名片设计是展示个性的一扇大门。Emily Grey的名片用十分直截了当的文本来概括自己个性，她甚至毫不避讳地使用“shit”这样大胆的字眼，直截了当地告诉观众“I get shit done”,丝毫不担心这会吓到某些人。其中的黑框眼镜是创意和现代元素的象征。总之，这个设计体现了她鲜明的个性。
6个方法帮交互设计师与上下游顺畅合作
本文是刚入行的交互设计师结合整个实际项目实践，尝试探讨交互设计师和产品经理、其他上下游同事之间的“共生”关系，希望帮助设计新人找到与上下游配合的一点灵感。协助产品经理确定产品架构产品经理才是最懂产品的人吗?在项目初期，大家对产品的概念都很模糊，即使是产品经理也是通过来自各方的需求、数据和竞品分析等来大致搭起框架。这个框架是否合理，框架衍生的功能流程限定在什么范围，这些问题即使是最有经验的产品经理也不敢保证。交互设计师虽然是产品经理的下游，也应尽早参与策略层(Strategy)的讨论，如果你的领导了解交互设计的重要性并且邀请你参加项目前期的务虚会议，你就应该珍惜机会，会前做好竞品分析等准备工作，会上以交互岗位的专业视角提出建议; 如果你不够幸运，不能参与到产品战略决策，只是承接上游下达的交互任务的话，那么也不要只是沦为画线框图的工具，要发挥主观能动性积极沟通，最终让方案变得更好。需要注意的是，我们的建议不要仅仅只局限在功能流程实现(Structure)和页面结构(Skeleton)等方面，也要积极参与功能范围(Scope)和产品愿景(Strategy)等方面的讨论。案例：项目前期产品经理往往会先画一些草图来帮助说明问题，这是一种很好的沟通方式，草图能显示对产品的理解和将来产品的发展方式。“网易帐号管家”作为一款多帐号管理工具，涉及安全检测及操作引导、帐号保护加固、产品保护等功能，为了盘活产品还要在未来加入一定的运营内容。但产品经理前期的草稿只是将帐号功能简单排列，这时候就要我们通过各种方法来表达自己对于产品的理解并给出建议。前期的定位非常关键，一旦架构错误，之后的交互工作很难开展。总结：越早接触产品的讨论就能越早深入了解产品的核心价值。提出自己的专业建议，让产品朝着好的预期方向发展，这样我们在进行交互工作的时候是开心幸福的。
设计师如何说服PM取消底部导航栏
记得之前写过关于标签导航如何设计的一篇文章，大体上的介绍了几种类型，这周正好遇到一个关于标签导航的问题：产品经理要求在底部的导航中由原来的五个主功能增加至六个，交互设计师如何说服产品打消这个念头?本周就这个问题我详细说下当中的几个要点以及延伸出来的几个问题。不要打破标签导航的架构之前说过：在项目研发阶段，我们应该关注产品的主要功能，不应该偏离方向，为了其他辅助功能去改变产品的主要格局。为什么呢?在用户使用这款产品的过程中，他们一定是为了达到某种目的或完成某项任务而去使用它，这说明产品一定拥有解决目标用户问题的功能。那么一个产品会有 5 个核心功能么?答案是否定的。无论是多好的产品都一定只有一个核心功能，而其他功能一定是子功能或辅助功能，它的存在与否不影响产品核心功能的价值。如购物 App，加入游戏功能。包括微信、支付宝等等，即使支付宝有这么多功能，甚至于慢慢开始引导用户进行社交，但是更多人用它只是进行第三方的支付手段。假如有一天话费充值成了他们主要的盈利手段，那么我相信他们也不会把话费充值这个功能单独列入标签导航中。说到这里好像还是没进入深层次的探讨，为什么突出核心功能又不能把它列入标签导航中呢?这个问题应该从标签导航本身出发。标签导航是产品的主要框架，一款产品的架构分布基本都是由标签导航来组织，让用户了解这款产品的主要功能。而现在更多的功能是由标签导航配合其他导航来完成，如用列表导航来做分支(之前另一篇文章也提到过)，这样一旦子功能过多，就很好的可以用列表导航做分布，不影响标签导航，从而也就不影响产品的主要框架。这段话的意思已经说明：目前社会的产品设计，标签导航已经不适用于展示单个功能，而是多个功能的合集。举个例子:
Dribbble实例聊聊未来设计师视觉趋势
不管dribbble的争议有多大，低成本的发布流程，高门槛的准入机制和特殊的排行算法保证了dribbble每天都以高质量的水准给我们提供着大量的视觉idea，这些idea潜意识的影响着设计师，引领着设计风潮的改变。各种成熟的视觉理念最初的雏形灵感大多都来源于此，今天我们就回到dribbble最初建站的2009年，通过以往的 作品看看这些年视觉设计都经历了怎样的变迁，也审视一下这些视觉趋势变迁背后的深层原因。查看dribbble过去8年的作品，大致可以把视觉设计的演变分为三个阶段：触屏初期的拟物化随着iPhone4等一系列触屏手机迅速占领移动市场，很多用户的认知还停留在按键时代，为了能够降低学习成本，快速的使用户上手，拟物化的设计占据了app设计的主流。利用材质、光泽、质感、逼真的细节、高光等手段拉近虚拟世界与真实世界的距离，有效降低了人与机器间信息传递的折损。拟物化设计的主要有以下几个特点：1. 主体设计元素使用渐变和阴影;2. 使用带有质感的纹理;3. 颜色更多使用饱和度较低的颜色，大量的灰色，深蓝色;4. 适当使用带有光泽的渐变来设计按钮;
国外优秀的设计机构官方网站设计欣赏
极简风、现代主义、扁平化、栅格系统……这些流行的设计趋势和设计手法，你希望哪些出现在自家设计公司的网站上?除了漂亮和风格化之外，它们让网站拥有更好的易用性，也更有性格，更重要的是，它们展现出了一个设计机构应有的素质。所以，不论你是要为自己的工作室/公司设计网站，还是想对现有网站进行重设计，今天的网站推荐列表上的公司，值得你学习研究。不可否认的是，人始终都是视觉动物，人们还是喜欢从封面设计来判断一本书的内容。不论使用什么样的设计风格，借助怎样的手法，一个在视觉上足够愉悦的网站总是需要的吧?好的官网设计能让潜在客户从愉悦到惊喜，让竞争对手从惊疑到讶异，当你的网站做的足够优秀的时候，被Awwwards推荐也不是没可能的!让我们看看下面的20个优秀的设计机构官方网站都是怎么设计的吧。Digital marketing agency MelbourneDigital Next 是一家位于墨尔本的数字营销机构，他们的主要为客户提供PPC管理，网页设计和SEO优化。网站设计走的是清爽现代的风格，其间加入了微妙的动画效果，这个设计在当前看起来还挺主流的。RED InteractiveRED 为用户提供的服务非常全面，从策略到设计与技术支持，甚至包括媒体制作。他们的网站设计主要充分运用了栅格系统来构建友好的布局，便于潜在客户查看设计案例和相关的新闻。Sequence
如何有效布局信息繁杂的网站设计
互联网信息时代，很多内容为主的网站都信息过载，这导致了载入速度过慢。电商网站如此，新闻类网站也是如此，而一些设计师作品集网站或者设计机构的网站也是如此，老实说，作为设计师，应该避免信息过载现象的出现。而一旦你掌握这些技巧，那么你离高薪酬的资深设计师也就不远咯。内容主导的页面布局会自然而然的繁杂、问题多，设计这种网站的过程，也是一个艰难的挑战，而且网站拥有者的目的是想给用户提供更多的信息，信息会越来越多。当然，可以听听专家指导，坚持一些亘古不变的设计原则，来确保布局的组织良好和架构分明，这就能减少很多不必要的繁杂。今天涵盖了一堆信息量大，但是却不杂乱的网页设计，具备愉悦的即视感。不吹牛，您可以挨个点看感受一下：)Action Film相当复杂的网站，但是在布局上很聪明将一堆小视频组织的条理分明。登录页分成好几条线，是精确的多媒体侧边栏。Salon’s组织有序，不同尺寸的很多照片排列在一起也非常有序，打破了单调布局的常规。House
巧用不对称设计打造有趣的网站设计欣赏
对称与不对称似乎是网页设计过程中，一直要做的取舍。对称的和谐，和不对称的差异，都是创造好设计的必须的手段。但是对称通常都用的不错，但是不对称并非人人都运用娴熟。今天的文章，我们简单聊聊网页设计中的不对称设计。在绝大多数情形下，不对称的设计元素能从其他的元素中脱颖而出。这些不对称的设计看起来更富有活力，如果其中包含有按钮、控件或者链接的话，它们通常能获得比其他部位更多的关注。今天我们就一起来仔细看看网页设计师们是如何通过对比、留白和布局来打造令人难忘的不对称设计。不对称的设计并不全是外部轮廓上的差异，它同样可以是内部结构上的不对称。举个例子，图库页面中，每张图都有缩略图，其中某个比其他的缩略图略大一点，这种差异会立刻吸引用户的注意力。总的来说，不对称设计非常适合于将用户的注意力吸引到特定的区域或者元素上，这是它的优势所在。接下来，我们仔细看看对比、间距和布局是如何创造出不对称的效果。可观察到的对比度当你将视野中的视觉干扰都移除了之后，你的用户会很快注意到那些细微的差异。这个时候，你可能会适当地增加一些效果，比如渐变的背景，甚至jQuery 动画。这样的效果能让页面中仅剩的一两个元素飞快地让人注意到。著名Mac平台设计软件Sketch的官方网站的设计就是个很好的例子，深色和浅色被容纳到一个统一的页面设计中来。在页头中，你会注意到两个按钮：深色的“免费试用”和浅色的“立刻购买”。有意思的是，两个按钮都是同样的大小，并且处于同一个水平面上，并且是同一色系。但是，“免费购买”的按钮被设计成为幽灵按钮，整体和深色背景几乎融为一体。这样一来，使用浅蓝色实底的“立刻购买”按钮和背景构成了鲜明的对比，相当的显眼。当你打开页面的时候，会一眼注意到购买按钮，这就是通过大量的留白和合理的对比营造出来的视觉引导。
10个精致的企业网站设计模板欣赏及点评
以下的10个网页设计作品是ThemeForest上最受欢迎的优秀企业网站设计模板的其中一小部分。它们风格低调沉稳，几乎只使用黑白灰三种色彩，却不雷同，并且在细节上都非常讲究。ThemeForest是非常值得网页设计师关注的高品质网站，其上的几乎每一个设计模板都称得上是杰出的设计作品，值得我们认真揣摩学习。这篇文章里我将根据自己的观点对这10个设计模板的设计思路和方法做一总结，列出其中的要点，挖掘值得我们在网页设计中值得借鉴的东西，希望能够对大家有所帮助。一、设计的目的是为了信息更好的传播1、整体风格感觉很干净，原因是整个页面近乎于白色，只用非常亮的不同层次的灰色来区分各信息区域。主视觉背景应用的灰色渐变颜色最暗的值也才是#F4F4F4。而灰色之上用高饱和度和亮度的成色做跳出色，不至于让页面看上去灰灰的一片。下面的截图显示这个设计中使用的灰色是非常亮的，而跳出的橙色基本上使用了最大的色值。2、整个页面没有过多的设计元素出现，导航没有设计导航条，”Read more”也没有做成按钮的样式。只是将文字、图片放置于页面上，通过元素之间的间距、文字大小、文字颜色来组织信息，尤其是各部分信息间较宽的留白，让页面也更有透气感。从这个设计我们可以了解到设计的核心目的在于为功能性加分，作为网页设计来说，就是更好的传递信息，就像百度联盟用户体验中心的主视觉上写的”让复杂的内容通过设计的手段达到最优的传播性。”而我们常常为了单纯的所谓”酷”和”炫”的设计，通过深入的分析这个设计案例可以得到反思。3、整个页面为通栏设计，内容居中于930像素范围之内。这样的设计去除了左右的边框，更有透气感，是企业网站设计中常用的布局方法。