推荐阅读

绘制树枝小鸟主题插画的Illustrator教程
本教程主要使用Illustrator绘制在枝叶上小鸟主题插画,整体的设计风格都以小清新为主,推荐给朋友学习,希望大家可以喜欢。先看看效果图1. 如何创建Starling步骤1使用850像素宽度和850像素高度创建新文档(文件>新建)。我们从头开始。删除笔触颜色并设置您在下图中看到的以下填充颜色。接下来,采用椭圆工具(L)并创建一个深灰色的椭圆。现在,我们将应用Inflate效果到这个椭圆。转到效果>扭曲>膨胀。输入您在下面看到的选项。展开此形状(对象>展开外观)。首先创建一个小的浅灰色椭圆形(使用椭圆工具(L))并稍微向左旋转。之后,添加一个黑色的圆圈和一个更小的白色圆圈来突出眼睛。要获得完美的圆形,请在按住Shift按钮的同时使用椭圆工具。

(3-1):界面概览
首先我们来认识一下Photoshop的界面组成,如下图是一个典型的界面。为了方便识别,我们加上了颜色和数字。1:顶部的红色区域是菜单栏,包括色彩调整之类的命令都存放在从菜单栏中。在我们的教程中使用【】符号来表示菜单项目。2:称为公共栏,主要用来显示工具栏中所选工具的一些选项。选择不同的工具或选择不同的对象时出现的选项也不同。3:绿色的竖长条称为工具栏,也称为工具箱。对图像的修饰以及绘图等工具,都从这里调用。几乎每种工具都有相应的键盘快捷键。4:靠右边的紫色部分称为调板区,用来安放制作需要的各种常用的调板。也可以称为浮动面板或面板。5:调板区上方的蓝色部分称为调板窗,用来存放不常用的调板。调板在其中只显示名称,点击后才出现整个调板,这样可以有效利用空间。防止调板过多挤占了图像的空间。其余的区域称为工作区,用来显示制作中的图像。Photoshop可以同时打开多幅图像进行制作,图像之间还可以互相传送数据。在打开的图像间可通过菜单【窗口】底行的图像名称切换,也可以快捷键〖CTRL TAB〗完成图像切换。除了菜单的位置不可变动外,其余各部分都是可以自由移动的,我们可以根据自己的喜好去安排界面。并且调板在移动过程中有自动对齐其他调板的功能,这可以让界面看上去比较整洁。在移动调板的过程中按住SHIFT键将对齐到Photoshop主窗口的四边。现在介绍以下图像窗口的组成,一个典型的图像窗口如下图。1:标题栏,显示文件名、缩放比例,括号内显示当前所选图层名、色彩模式、通道位数。2:图像显示比例,可通过输入数值或按住CTRL键后左右拖动鼠标来改变。使用其它方式更改显示比例后这里也会显示相应的数值。注意这里的比例只是图像显示的比例,而并不是涉及像素重组那样的更改图像尺寸。另外一个需要注意的是,有些图像细节(如细小的线条、小文字等)在小于100%显示比例的时候也许会看不清楚甚至看不到,建议都在100%比例下进行各种操作。3:状态栏,显示一些相关的状态信息,可通过单击红色箭头所指处的三角按钮来选择显示何种信息。较常用的为“暂存盘大小”,因为其可以显示出Photoshop的内存占用量。如134M/480M表示Photoshop总共可以使用480M的物理内存,当前已经占用了134M。当占用数量超过可用数量(如520M/480M)时,Photoshop的反应速度就会降低,因为此时需要使用硬盘模拟内存负责数据处理,由于硬盘的数据存取速度比起内存来慢了许多,因此导致整体处理速度的下降,这在处理大幅面图片时尤为明显。可在【编辑 首选项】的“内存与图像高速缓存”中设置较大的内存占用比例,但过大的比例可能导致其他应用程序因内存不足而无法运行。最彻底的解决方法自然是增加内存硬件或使用高速硬盘(如SCSI接口高速硬盘)。PhotoshopCS及更早版本的状态栏位于底部。0301某些右下角有缩放标志的调板是可伸缩调板,如下左图红色箭头处,用鼠标拖动此处即可拉伸调板。一般可伸缩调板都有一个最小尺寸,不能无限缩小。在每个调板的右上角,位于关闭按钮的下方,都有一个圆形三角按钮(如下右图红色箭头处),点击这个按钮后会出现调板功能的选项。不同的调板点击后出现的菜单也不一样。-双击调板的标题区(如下左图红色箭头处),可以将调板缩成最小,如下右图。但其中的功能也都不可以使用了,除非再次双击展开调板。双击标签名称(如下左图的“颜色”文字处)也有同样效果。还可以点击调板的最小化按钮(如下右图红色箭头处),调板将变为简要形式,此时调板功能可能会部分保留,再次点击将恢复,如颜色调板保留了色谱。也就是说并不是所有的调板都具有简要形式的,有的调板点击最小化按钮的效果,和双击标题区是一样的。-
利用Dreamweaver插件改变IE浏览器滚动条
做网页,常常觉得IE浏览器的滚动条与设计的网页不一致,就像好好的一锅汤,不小心掉了老鼠屎进去一样,严重影响了网页整体的美观。想尽办法去处理,却不尽人意,比如用弹出窗口,免不了造成浏览都点击放大按钮的麻烦,把滚动条去掉,可是它不适用于一屏显示不了的网页。 现在好了,这样的问题已经从一定的程度上得到了解决!让人讨厌的微软,做尽不少垄断事情的微软,还是从客户方向考虑增强软件的功能的,IE浏览器5.5以上版本已经允许人们设置样式表来改变滚动条的外观。来看看效果吧 现在我们一步步来看看是如何制造这种效果的吧: 原理之前已经说了,就是IE5.5以上版本内嵌了用样式表(Css)来控制它的游动条的功能,只要为网页添加CSS代码即可完成。有些人听到代码就头疼,大家放心,有人已经利用Dreamweaver的扩展接口做好了MXP插件,大家只要去有关网站即可下载安装。我们做的功夫只是选择颜色数值。 *&^%¥@#,哇,谁扔蕉皮? *&^&$^%&%&$$#,哇,谁砸石头? ... 好了好了,废话少说,只因公司要字数,只好...希望大家体谅体谅!不想看的可以直接去效果页面,直接copy源代码! 废话少说,现在让我来开门见山(嘻嘻,还开门见山!!),由安装开始。

如何使用MEL Scripts
此课程是为了使新入门者得以熟悉安装及执行典型的MEL Scripts,在Maya中有数个方式可执行Scripts,此课程将讨论两项 . 注意:经由Assistant Online提供之MEL Script,皆已测试完成,即可以下指示步骤完成. 来自其他原处的MEL Scripts就不在以下所限了. 什么是MEL Script ? MelScript 即内含Maya Embedded Language指令'处理程序化,或两者皆有.一般来说,就是使用MEL Script去执行一连串的指令. 您可以使用文字编辑器纂写MEL Script,之后将其储存于硬碟中,MELScript的附档名为mel,MEL并非Scenes的一部分,你可在不同的Project中重复使用MEL Script,每当你要重覆该动作时,你必须执行Script. 读取Script内容 在安装及使用Script前,研读其前头(title)的资讯,叙述著有关该Script 所有Assitant内的Script都包括这些资讯 . 一般Script皆有不同的执行需求,阅读前头资讯,将使你知道Script之间的相关性,相关的Script必须是在同一个Script目录下.
最新发布

淘宝设计师经验分享之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/