推荐阅读

Photoshop调出唯美紫色效果的外景美女
最终效果原图1、打开素材图片,创建色相/饱和度调整图层,对黄色,绿色进行调整,参数设置如图1,2,效果如图3。这一步快速把图片中的黄绿色转为黄褐色。2、创建可选颜色调整图层,对红、黄、青,黑进行调整,参数设置如图4 - 7,效果如图8。这一步把图片中的红色及黄色稍微调淡一点。

photoshop cs6简单打造男人质感古铜色调色教程
原图效果图2、创建曲线图层,对RGB进行调整。参数设置如下图4、创建色彩平衡图层,对阴影、高光、中间调进行调整。参数设置如下图6、图层样式设置为“柔光”选择蒙版,用画笔涂上除面部外的地方。如下图

在Flash中用XML实现多语言支持
下载本教程源文件请点击这里。 一、介绍 互联网是没有国界的,但互联网是有多语言的,有关多语言支持问题很令人头痛,在制作Flash作品,特别是在制作网页方面应用的过程中,对多种语言的支持就显得越发重要了。本文介绍了一种在Flash中利用XML来实现多语言支持的方法。 二、实现原理 可以利用Flash支持unicode编码来实现多语言的支持。先将XML文档的编码设置为utf-8,将要显示的内容保存在XML文档中。在Flash中创建一个XML对象,在此对象中导入相应的XML文档,解释并显示出来,就实现了多语言的支持。注意此种实现方法只能支持utf-8编码的语言。 三、制作实例 我们来实现一个支持英语、法语、德语、意大利语、葡萄牙语、西班牙语六种语言的例子,例子的效果如图1所示。当然,要实现更多的语言支持,实现的原理是大同小异的,只是需要简单的更换一下XML文档而已。 2、新建一个XML文件,命名为french.xml,本文件用来支持法语,保存的格式为utf-8格式,保存的内容如下:<?xml version="1.0" encoding="utf-8"?><CONTENT><english_btn>Anglais</english_btn><french_btn>Fran?ais</french_btn><spanish_btn>Espagnol</spanish_btn><german_btn>Allemand</german_btn><italian_btn>Italien</italian_btn><portuguese_btn>Portugais</portuguese_btn><content_txt>Voici un exemple de ce que vous pouvez faire avec dossiers XML externes et éclat MX. Cliquez sur tout drapeau et automatiquement tous les champs du texte sont mis à jour à quel que soit langue que vous sélectionnez. La pince du film ne traduit pas texte. Il lit simplement le texte traduit que vous écrivez dans le document XML. Alors il est chargé dans votre film.</content_txt></CONTENT> 3、新建一个XML文件,命名为german.xml,本文件用来支持德语,保存的格式为utf-8格式,保存的内容如下:<?xml version="1.0" encoding="utf-8"?><CONTENT><english_btn>Englisch</english_btn><french_btn>Franz?sisch</french_btn><spanish_btn>Spanisch</spanish_btn><german_btn>Deutsch</german_btn><italian_btn>Italienisch</italian_btn><portuguese_btn>Portugiesisch</portuguese_btn><content_txt>Hier ist ein Beispiel von dem, was Sie mit externen XML-Akten und Flash MX machen k?nnen. Klicken Sie auf jeder Fahne an, und automatisch werden alle Textfelder zu welch Sprache aktualisiert der Sie auserlesen. Die Filmklammer übersetzt keinen Text. Es lautet den übersetzten Text, den Sie das XML-Dokument einfügen, einfach. Dann wird es in Ihren Film beladen.</content_txt></CONTENT> 4、新建一个XML文件,命名为italian.xml,本文件用来支持意大利语,保存的格式为utf-8格式,保存的内容如下:<?xml version="1.0" encoding="utf-8"?><CONTENT><english_btn>Inglese</english_btn><french_btn>Francese</french_btn><spanish_btn>Spagnolo</spanish_btn> <german_btn>Tedesco</german_btn><italian_btn>Italiano</italian_btn><portuguese_btn>Portoghese</portuguese_btn><content_txt>Ecco un esempio di quello che Lei può fare con archivi di XML esterni e MX Abbaglianti. Clicchi su alcuna bandiera ed automaticamente tutti i campi di testo sono aggiornati a lingua purchessia che Lei seleziona. Il clip di film non tradUCe testo. Legge semplicemente il testo tradotto che Lei scrive nel documento di XML. Poi è caricato nel Suo film.</content_txt></CONTENT> 5、新建一个XML文件,命名为portuguese.xml,本文件用来支持葡萄牙语,保存的格式为utf-8格式,保存的内容如下:<?xml version="1.0" encoding="utf-8"?><CONTENT><english_btn>Engels</english_btn><french_btn>Frans</french_btn><spanish_btn>Spaans</spanish_btn><german_btn>Duits</german_btn><italian_btn>Italiaans</italian_btn><portuguese_btn>Portugees</portuguese_btn><content_txt>Aqui é um exemplo do que você pode fazer com arquivos de XML externos e Flash MX. Fa?a tique-taque em qualquer bandeira e automaticamente todos os campos de texto s?o atualizados a qualquer idioma que você seleciona. O clipe de filme n?o traduz texto. Lê o texto traduzido que você escreve no documento de XML simplesmente. Ent?o está carregado em seu filme.</content_txt></CONTENT> B、制作Flash文件 1、在Flash中新建一个文件,将影片的大小设置为760 px * 200 px,背景设置为黑色。如图2所示。 2、在场景中用文本工具拉7个文本框,类型都设置为Dynamic_Text,分别命名为english_btn、french_btn、spanish_btn、german_btn、italian_btn、portuguese_btn、content_txt。在场景中的摆放位置如图3所示,注意中间大的那个为content_txt。
最新发布

淘宝设计师经验分享之APP的栅格试验
这里专门说一下关于WAP App的栅格设计。以下相关都是基于一淘H5和一淘App总结得出。先介绍三个名词:Wap App;Native App;Hybrid App(融合体,H5页面嵌套在Native中),之所以说这三个,是因为它们相互之间的联系在某种程度上制约了Wap App 的栅格设计。下面详细说下栅格试验。Phone栅格和PC栅格,本质上没有区别,一样的计算方式,无外乎屏幕大小的差别,但这屏幕大小,就有很多细节需要结合手机用户习惯来判断和取舍。我们试验的Phone栅格都是流体栅格,简单说,就是不定义具体尺寸,而是屏幕占比。说到屏幕占比,我们需要设定基准屏幕(这个可根据某些具体数据确定,比如我的目标用户群使用的手机屏幕尺寸占比最多的是1136*640,即可定位基准屏幕),这里假定基准屏幕是960*640 。通常栅格的计算公式 (m+a)*n-a=640-2b (m 栅格宽;a 槽宽;b 留白宽;n栅格个数)试验 1m=40 n=12 a=10 b=25(我们通常定义栅格数目n是2,3,4,6的整数倍,12栅格算是最简单的栅格结构)。试验1的栅格是沿袭PC的思想,但在后来应用到越来越多的页面时,这种栅格做2,3,4,6等分都很OK,但不做等分时,灵活性就很差,也算是一个致命的缺点,对于视觉设计师来说有很大的局限性。所以不建议在手机上使用12栅格。

浅谈什么样的网站才可以吸引客户眼光
展示工作流在网站设计中的地位已经不可小觑了,这样会更接地气,让客户直观的知道你们在怎样的环境为他工作。这些新颖的网站里,设计师都通过了巧妙的手法将办公环境、办公流程优雅地展示在网站上,并且运用了2014年网页设计新趋势。让访客知悉自身工作室的办公状况和运营优势。好嘞!来看看今天要推荐给您的优秀站点吧。Digital Werk利用视频背景展示了堆满东西的办公桌。半透明色调更好地做到了视差效果,让访客一看即懂。JAO Creation创造了一个有趣的欢迎页面,加入儿童元素使其更富创造力和易用性。这吸引人的充满人情味的元素给网站本身的魅力和创意增添了不少动力。Ian Coyle展示了全套摩托车工具包括头盔,整体虽然看上去物品很多比较杂乱,但是总体的味道充满阳刚的韵味。

让你惊叹不已的HTML5画布技术应用
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上。这些最新的网页技术究竟能给我们今后的浏览带来什么样的改变?下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已。当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果。但是,下面的这些演示只使用了现代浏览器里自带技术,完全不需要借助 Flash 或 Silverlight 之类的插件。这种技术门槛的降低必将给这些技术的普及繁荣创造不可或缺的前提保障。这是我最喜欢的一样演示,因为里面有一个很可爱的小女孩,似乎是有了人气就更能让人动心。如果你也喜欢这个小女孩,那就移动你的鼠标,让风从各个方向吹动它的头发。→ 观看演示 撕扯布单的这个演示在过去的几个月里成为了互联网上的大明星。用你的鼠标在这个网状布单上拖拽,你会发现它动画效果非常的顺滑,而完成这些效果的只是一小段代码,想必它已经让你惊叹不已。然而,不仅这些,这个动画还能响应你的拖拽的力度和速度,根据不同的力道,表现出不同的撕扯破坏效果,够神奇吧,完美的HTML5画布功能的体现。→ 观看演示

交互设计中如何增加趣味性和愉悦度
趣味性、愉悦度,这些都是针对用户情感化设计的领域。功能、实用性,这些需要很强逻辑性的事物很难和情感产生关联,并不是指这些不重要,它们很重要,它们是基础,但缺少了情感的作用,很难产生一些东西,像:快乐、愉悦、悲伤、美…花、大海、春天、小屋… 这些都是很普通的名词,但将它们富有诗意的组合在一起:我有一所房子,面朝大海,春暖花开。接受者会投入不同的情绪去理解这样一个组合。上面这些名词就像我们在设计过程当中所遇到的各种元素,按键、菜单、icon、动态效果… 将它以诗意的方式组合在一起,由此用户产生了情绪上的波动。交互设计的本质是对用户行为的一种设计,直达内心的设计能够影响用户自身的情感,从而导致用户的行为。常会有设计师说将用户当成是一个易怒、情绪不定、不明理的人,为什么?因为人的本质是非理性的,逻辑是理性层面的考量,而面对情感这个潜藏在理性背后的东西,需要设计师有深厚的功力,这不是单纯技巧上的问题,而是一种时间、感觉、情绪等综合的圆熟。针对用户情感进行设计时需要考虑产品的用户群,情感设计的应用将会为产品塑造个性,需要明确产品个性是否与目标用户相符。所以题主需要考虑一下,所说的趣味性是否与产品所预期的个性相符,这很重要。扯回到正题,交互设计中的趣味性如果让我用一句话表达,我会说:「情理之中,意料之外」btw:自己对有趣的定义可能会与大家不太一样。方式一:「延伸现实」最知名的例子莫过于,iOS的惯性滑动效果(或许有同学会不同意,但这真的是我认为很有趣的设计),这样的一个设计,在我眼中可以用两个字来形容–惊艳,什么样的设计师才能够对周围世界的观察敏锐到如此境界呢?让我们记住这个人的名字吧 — Bas Ording,可以说没有这个设计可能就没有iPhone的诞生吧

详细解析儿童产品可用性研究分析
儿童产品在几年间异军突起,越来越受到人们的欢迎。艾瑞咨询于2012年2月进行的儿童网民用户调查的数据、CNNIC公布19岁以下网民规模及中国统计局公布的各年龄段人口分布加以推算,艾瑞咨询得出目前中国6-14周岁的儿童网民数量达到7660.2万,较2010年6-14岁儿童网民规模7379.2万增加了约280万。儿童用户量在不断的增加,网民年龄分布及互联网渗透率也在不断升高。儿童产品用户群非常明确,用户量在不断的增加,粘度大,衍生出一系列的周边,如图书、电影、包括版权等等,儿童游戏盈利前景也非常大,关注度非常高,儿童产品市场的竞争越来越激烈。2010年洛克王国正式上线,对于儿童用户我们了解的并不是很深,对于儿童用户的浏览习惯,以及儿童的心态感知,我们了解甚少,在儿童网站设计、重构过程中,带来不少的不便,于是做了一些比较浅表的研究。儿童的市场越来越大,这里也有一份爱奇艺无线UED负责人@晓生分享的儿童界面设计指南《经验分享:为儿童设计移动应用界面的技巧》以下为洛克王国官网首页与七雄争霸官网首页的热区图:

详细解析浅谈HTML5网页设计的游戏化之路
如今商业网站中用于广泛的HTML5无限下拉效果已经越来越受到游戏网站的喜爱。各个品牌为了打造专属自己的游戏特色,纷纷推出了模拟HTML5效果的品牌站,且都起到了相当好的效果。可是从很多方面来说我们对HTML5的真正形态并不了解,而且在很多方便来说处于探索阶段。视觉上看上去酷炫的技术并不都 是HTML5,更多时候我们把HTML5当成了一切技术站点统称。广义论及HTML5,实际指的是包括HTML、CSS和JavaScript在的一套技合。它希望能少浏览器对于需要外挂程式的丰富性网路应用 服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,Oracle JavaFX的需求,且提供更多能有效增网路应用的标准集。这样,搜索引擎可以更容易索引Web站点,我们也可以搜索到更快,更准确的信息。HTML5会带来一个统一的网络,无论是笔记本,台式机,还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候,开发者需要重新考 虑用户体验,网站浏览,网站结构等因素使得这个网站对任何硬件设备都通用。以下将讲述HTML5与常用的Flash的区别,及与IE的常见问题HTML5 与 Flash 这个争论由来已久,Flash被某些开发设计者滥用导致一些网页加载缓慢,而HTML5为之带来一线曙光。相对于移动设备用户来说,ios设备用户可能会 从HTML5获得更多好处,因为苹果一直不愿支持Flash。现在看来,就页面游戏而言,Flash是更好的选择,但取决于你的浏览器,如果你的游戏不是很复杂,HTML5是更好的选择。Web开发与设计者从这些争 论中应该吸取的东西是,Flash之外还有别的选择,但Flash有牢固的地盘,在为客户提供开发设计的时候,需要对他们的目标客户做一些研究。HTML5 与 IE IE9经常高调宣扬它对HTML5的兼容,它确实将是一个很好地支持HTML5的浏览器,因为,IE9使用 Windows现代图形API以及PC的图形加速卡输出文字和图形。微软还曾宣称,IE9将支持GPU加速的 HTML5,将图形滚动,3D图形显示等处理交由图形加速卡。 但是不可忽视的是,在中国用户中还是有一部分固定用户正在使用不支持HTML5的IE6。所以在网站的制作初期,目标用户的定位要明确。李安导演的PI’S EPIC JOURNEY电影创造的一段佳话,而他的网站也极具代表性–以前大家着重在于内容本身,而它有着浓郁的HTML5的特征以交互为核心。整站在不同分辨 率下面css用的不一样,移动设备下面可以有动画,移动设备下面可以播放视频。就设计而言,3d翻转的特效可以大胆构想;可以使用滤镜、圆角,以前这些需 要切图来实现,现在只需几行css即可。这些强大的功能背后都给设计师留下了更多的想象空间,同时也创造出了更大的交互难度。站址:http://journey.lifeofpimovie.com/

如何提升移动应用的心理响应速度
在移动体验的设计当中,界面的响应速度是我们需要重点关注的。移动用户所处的典型情境通常会使他们的注意力更难集中,耐心更有限。如果交互的触发或内容的加载需要让用户等上太长的时间,那么很少有人会不动声色从容不迫的听之任之。怎样使你的移动应用变的更快?这个问题显然会涉及到很多方面的因素,例如界面图形资源及开发技术方案的合理性等等,而我们今天要探讨的,是一些从“心理”角度出发的细节设计技巧在几个典型场景中的使用方式。图片上传当你在Instagram里发布照片时,图片文件实际上是在你刚刚完成拍摄或是从本地选择好之后就已经开始悄悄上传了。整个上传机制充分利用了Instagram自身的照片发布流程——用户在拍好或选择好照片之后,还需要经历一段包含着若干步骤的编辑操作,例如缩放、剪裁、添加滤镜效果、添加文字等等,而图片文件的上传工作就在这段时间里悄然完成。用户不需要再焦躁的面对进度条或是上传状态提示信息一类的东西了。一旦用户完成编辑并点击“分享”,界面会切换回到feed当中,如下图所示。此时feed内容上方会短暂的出现一个“正在完成”(Finishing up)的提示,然后用户刚刚发布的照片会立刻出现在feed当中。整个“上传”环节给人的感觉非常简短而自然。回顾这一流程,你会发现正是那些让人觉得很有参与感的图片编辑环节分散了用户的注意力,文件的自动上传工作巧妙的利用了这个时间段。良好的设计使用户产生了一种“幻觉”,让他们感到图片的上传似乎没有花费任何时间(用户可能根本就不会产生任何感觉,因为流程太自然了),而实际上,用来上传图片的时间长度从技术角度讲并没有真正被缩短。如此一个低调到用户可能完全不会察觉的设计方式,给产品体验带来的提升作用却是相当巨大的。过去,市面上的多数照片分享应用都使用着相同的“传统”方式,即在用户完成编辑并确认分享之后再开始上传流程;而Instagram的方式使其在“轻松”和“快捷”等方面的体验极大超越了同类产品。用户未必了解原理,也不在意原理,他们只是在潜移默化当中选择那些让自己觉得“好用”的产品,放弃那些“不好用”的。消息发送这也是移动体验设计当中的一个典型“加速点”。

7种快速的提升移动端用户体验的方法
一项好的设计往往起始于内容。要想你的移动用户体验更充分的表达和符合实际的操作体验,在内容的设计上你可能需要经过一些调整和改变。不过,你应该从哪里开始呢?内容应该如何适应移动设备并做到可以无缝地工作呢?我想,你可能需要从思考用户如何与小屏幕交互的方式开始,以及它如何能够影响(以及能影响的程度)他们想要去阅读。1.你需要每一屏只保留一个主要信息(想法)当移动设备的内容设计看起来一团糟的时候,试着重新计划和规划页面的元素(这一点在网站设计项目中是一样的),你需要保证每一个屏幕最多承载一个主要的的视觉或信息。即使现在的手机日益趋向于更大的尺寸和分辨率,也不要被诱惑在屏幕上塞过多的信息!每一屏保留一个主要信息已经足够了,再多,你可能就冒着压倒用户的风险。一般来说,习惯使用移动设备的用户更倾向于多任务处理。他们可能在看你的网站设计的同时,也在看棒球比赛,或者和朋友聊天。通过保持信息和内容的简单和直接,你有一个更好的机会来传达一个想法,同时,这个想法也更容易被用户吸收(因为页面上没有其他不先关的干扰)。但这个想法具体是什么呢?它可以是一组文本、图像和可操作的元素。内容的组合应该让用户做出一个选择:你想要这样做吗?2.优先级导航

详细解析网页设计中微文本的使用技巧
目前,网站设计的最大趋势之一是使网站所承载的内容极简化和微小化。“微小化”的文本元素已经成为一种流行趋势,但这种设计趋势,在设计领域同样引发了一些争论。毫无疑问,小文本在大小和尺寸上可能会导致一些可读性问题。但如果你用心并处理得当的话,小文本区块实际上可以帮助你创建一个视觉焦点和重心,并将用户吸引到设计的特定部分。接下来,跟上思维,让我们来看看这个微小的文本趋势应该如何实现以及它将如何发挥作用,以帮助你获得一些设计灵感。1.创建层次结构和组织感尽管超大型文本随着使用已经在设计领域打下一定的基础,成为主页和标题设计的主要选项。但是目前有一种趋势——在浏览器或桌面的第一个屏上尽可能在保证视觉的基础上提供更多的信息(原因之一可能是设备尺寸和分辨率的不断增加,给设计师更多的设计空间)。这也就是“微小化”文本“横空出世”的原因。字体的大小和比例的不同,使得排版有明显的视觉流动感。通过使用一层很小的文本(通常使用14到16点的尺寸大小),你可以创建一个额外的焦点让用户聚焦。小文本,特别是与其他较大文本一起使用时,可以吸引用户,因为它们是不同的,这在视觉上就形成了对比。Maxime Bonhomme在其网站设计中使用了小文本。你可以看到,微小化的文本元素提供了关于项目的关键细节,而更大的文本则负责提供工作的描述。你需要观察和注意这些周围有大量空间和内容的微小文本元素是如何工作的。2.形成风格

浅谈国内游戏官网现状及网页设计趋势
为什么游戏官网的构建好像这年从来没变过 ?这是功能使然还是思维惯性?什么才是真正是对的?设计师的工作就是在此框架下在样式上做文章?思考点其实很多,答案其实也是随环境在一直变化着的。今天的答案,也会成为你明天的束缚。但我认为最重要的还是结论得来的思考过程,能有样的一个沟通机制,一个平台来和业内设计师一起交流思考的过程。按部就班,惯性思维的做设计,可能会让你的思路越做越窄。就如ideas这期主题—-”游戏官网”一样,设计师emily和jason会和大家分享下,他们对于游戏官网现状,看法,发展方向的一系列思考。1.未来你的样子:关于游戏类官网趋势的猜想 by:emily用户界面设计随着产品屏幕操作的不断普及,已经融入我们的生活。界面设计是以人为中心,使产品达到简单使用和愉悦使用的设计,用户界面设计对于任何产品、服务都极其重要。在过去几年里我们看到了互联网的快速发展,我们手头上、眼前的信息一直在爆炸式的增长着,视觉设计师当然也不在仅仅只是在视觉上的表现,现在和将来,从 信息架构和交互流程的角度,无论未来的潮流如何变化,归根结底,设计师们都在努力的降低用户的认知成本。让界面所承载的信息内容更直接、便捷的呈现在用户 面前,用户将在不同使用场景需要可以得到更好的支持,用户体验已经成为狠角色。现在的游戏类网站一成不变、让人窒息的网页布局,可否应该让用户被动地接收信息向转为主动创造互联网信息蜕变?如何能让用户达到改变的临界点,需要通过很 多设计技巧来做。未来,随着移动端智能设备用户数量的愈来愈多,表象如何变化,追究实质要如何去思考和准备呢?1.扁平化趋势 游戏类网站可以扁平化吗?那就看你要怎么去做!在没有加入使过多的元素看起来更干净,拥有独特的大的背景图像、前景图像或按钮、文本和导航、更合理使用的 交互方式等,如何把他利用恰到好处?扁平设计有独特的外观,依赖于一个清晰的层次和便于用户理解和互动元素的设计和布局,另外还有受欢迎的JS应用程序及 有小惊喜的交互设计。(有些JS动画暂不支持IE6,但是如果你还因循守旧墨守陈规的话是否改变一下呢,IE6总不可能一直持续下去吧?CSS3大势所 趋,抓紧时间了解学习)http://www.nexon.com/