推荐阅读
Dave Rapoza的动画角色绘画作品欣赏
Dave Rapoza是美国波士顿的一名自由职业画家。他的作品包含了很多上世纪80至90年代的动画人物形象，例如忍者神龟、希曼等等，这些我们童年时代非常喜爱的虚拟动画人物在Dave Rapoza的创作中以写实的形象再次出现，带给我们非常大的视觉冲击力。当然作为网页设计师来说，我们不能只看热闹，不看门道。带着素描中”三大面、五大调子”的视角去审视这些作品的话，我相信我们在Dave Rapoza对于光影的细节表现上一定能给自己带来很多的灵感。我们先来看看当年的动画片海报，将我们的记忆拉回到90年代那幸福的童年时光。以下是Dave Rapoza的创作作品：一、多纳泰罗二、拉斐尔三、米开朗琪罗
PS给婚纱MM换脸
小提示：在找图片的时候，最好找一个与原照片人物脸的角度相同的或者差不多的，这样做出来的效果会更加逼真，不会有僵硬的感觉。3、然后从“工具栏”中选择“钢笔”工具，我们的主要目的是把图4人物的头部抠下来。所以，用钢笔勾勒出大致轮廓，这里要注意脸部轮廓一定要精确，其他地方可以大致勾勒。如图5所示：图54、然后，切换到“路径”面板，按住“Ctrl”键，点击我们刚才创建的路径，使其处于选中状态，如图6所示：图65、将所选头部的区域，拖到图3中，将“人物B”头部的角度调成与“人物A”头部的角度相近的角度（包括方向和头部的大小）。接着，右击拖过来的人物头部，使其处于当前操作状态，“Ctrl+T” 快捷键，自由旋转，如图7： 图76、 接着，我们要把“人物B”头部多余的部分抠掉。因为是单色背景，所以，使用“魔棒”工具就可以。从“工具栏”中选择“魔棒”工具，点击除了头发外的其他咖啡色的区域，这样就选中了我们所要抠掉的部分，如图8：图8 6、 接着，按“Delete”删除键，删除咖啡色的区域。得到图9：图97、为了保持和原照片风格一样，我们还要保留原照片的皇冠，所以，把“人物B”一部分的头发连同丝带用“套索”工具选中，一起删除。得到如图10：图10
Flash 8 工作环境简介
Flash以便捷、完美、舒适的动画编辑环境，深受广大动画制作爱好者的喜爱，在制作动画之前，先对工作环境进行介绍，包括一些基本的操作方法和工作环境的组织和安排。 运行Flash 8，首先映入眼帘的是“开始页”，“开始页”将常用的任务都集中放在一个页面中，包括“打开最近项目”、“创建新项目”、“从模板创建”、“扩展”以及对官方资源的快速访问。如图1-10所示。图 1-10 开始页 如果要隐藏“开始页”，可以单击选择“不再显示此对话框”，然后在弹出的对话框单击“确定”按钮。 如果要再次显示开始页，可以通过选择“编辑”|“首选参数”命令，打开“首选参数”对话框，然后在“常规”类别中设置“启动时”选项为“显示开始页”即可。 在“开始页”，选择“创建新项目”下的“Flash文档”，这样就启动Flash8的工作窗口并新建一个影片文档。如图1-11所示。图1-11 Flash 8的工作窗口 Flash 8的工作窗口由标题栏、菜单栏、主工具栏、文档选项卡、编辑栏、时间轴、工作区和舞台、工具箱以及各种面板组成。
最新发布
3个让平面作品变得高大上的构图技巧
说到构图，估计大家第一反应可能都会联想那些不明觉厉的辅助线，相对于摄影中的构图来说，平面设计的布局自由度较高，本期主要讲解的是构图背后的思路与技巧，通过将元素在版面中不同的组合形式，我们可以做出很多变化丰富的版面。而那些构图线只是辅助我们思维的工具，切勿本末倒置。那么构图时需要注意哪些问题呢?有哪些文字的构图技巧呢?接下来我们一起了解这方面的内容。版式的布局就是在反复的进行“建立秩序”与“打破秩序”的过程。当文字放置到版面中时，矛盾就已经形成，接下来就是解决矛盾的过程。我们所学习的所有技巧与法则都是用来解决画面矛盾的有力工具。本期为大家例举三种文字的编排形式，分别是倾斜构图、压角式构图和散点构图。为了增强趣味性和记忆点。这里将抽象的示意图替换成生活中常见的麻将牌面，希望能够方便大家的理解。
高手教您如何快速把作品集焕然一新
作品集是设计师的门面，找工求职时，它决定了公司对设计师的第一印象。学生作品集里通常会有一些学校项目，它们的特点就是「重过程，轻视觉」，过程都非常全面、详实，而视觉上花的功夫比较少，这其实是很吃亏的。为了让大家都能把作品集做得美美哒，Hoka找出了自己3年前的第一份UI设计作业，做了视觉重设计，并且记录下了重设计的思路和视觉设计的小技巧，分享给大家。适合读者：刚毕业或还在上学，需要找实习和第一份工作的同学们想要申请设计/HCI类项目的同学们因为这份作业是在美国读书时做的，所以 UI 是英语的，不过设计的思路无论中英文都是共通的。第一份UI作业：大学生运动App这是我的第一个设计项目，一个典型的学生项目。当时被密歇根大雪冻僵的我，摸着越来越圆的小肚纸，决定做一个帮助大学生参加体育活动的 app。app 的目标很简(yòu)单(zhì)，用户能看到学校里正在/即将展开的体育活动，并且登记参加这项运动。比如有一群小伙伴想去打篮球，还缺一个人，就可以发布到这个 app 上，想打篮球的同学看到了，觉得时间、地点、人数没有问题，就可以登记参加。讲完了APP的背景，我们看一下我当时设计的首页长什么样子吧：
12条提高产品可用性的动效设计原理
本文将市面上最常被使用的动效进行了一次总结并逐条阐明这些设计背后的原理，每条原理后面我都会为朋友们选出一些大家最常用的 App 作为例子，顺手打开就能体验啦。缓动(Easing)、偏移量和延迟(Offset & Delay)主要与时间相关。父子关系(Parenting)用于阐述元素之间的关系。变形(Transformation)、数值变化(Value Change)、遮罩(Masking)、覆盖(Overlay)、生成(Cloning)多作用于加强元素自身的延续性。视差(Parallax)多作用于表明元素的层级关系。蒙层(Obscuration)、多维化(Dimensionality)、镜头平移与缩放(Dolly & Zoom)作用于表明元素与空间的关系。1. 缓动(Easing)当运动发生的时候，元素运动速率的变化符合用户的预期。自然界之中是很少存在完全线性的运动的，没有任何东西能够完美的保持匀速运动，缓动效果能够让运动看起来更加接近自然，符合用户的认知，达到用户的预期。例子：你手机里面几乎所有动态效果都是缓动的，看起来是不是非常舒服和谐呢?
这些流行的缤纷多彩字体正在走向标准化
Color Fonts，多彩字体是近两年频繁出现的设计语汇，越来越多的设计项目当中，开始使用这一技术，尽管目前它依然处于起步阶段。诸如Adobe Typekit 这样的字体服务供应商，已经开始提供一些支持特定浏览器的多彩字体。也正是因为多彩字体使用范围越来越广泛，才有设计师预测，它会成为网页设计领域的“Next Big Thing”。作为一个植根于网页设计领域的设计趋势，多彩字体到底有着什么样的特征?今天的文章，我们一起来聊聊这个话题。什么是多彩字体顾名思义，多彩字体(Color Font)，字体本身所包含的不仅仅是外观形体的特征，不同的区域可以以不同的色彩来呈现，甚至包含阴影、渐变、纹理和透明度等属性。这些时髦的属性不仅赋予了字体复杂多变的色彩，而且让它具备更加丰富的细节。多彩字体包含了常见字体中应有的矢量形状或位图信息，或者兼而有之，这使得多彩字体的字体文件要比普通的字体更大。如果你对于多彩字体没有太多概念，那么你想想我们用过的图标字体和表情字体，它们就是多彩字体的一种。同时，我们常用的字体通常被称为 Chromatic Font ，也就是“有色的字体”，因为它们通常只能包含一种色彩。不过，多彩字体还存在问题，最大的问题在于目前并没有一套通行的字体标准。使用类似SVG的矢量文档的还好，而使用位图格式的多彩字体，字体文件大小则会随着字体尺寸的增大而膨胀。目前常见的多彩字体包含下面的5种格式：·SBIX(Apple)：在macOS 和 iOS系统上的原生位图字体
详细解析美工必须要懂的设计配色技巧
混迹在各大电商平台的设计师兄弟姐妹们，今天和大家说说配色，其实美工中的配色是不是可以随便配?事实上是不可以的，下面小编就给大家带来一些案例分享：案例:大家可以用拾色器去吸下背景颜色看看，淡黄色和蓍草粉色，看看这2个颜色在拾色器的位置。是不是明度和饱和度的数值很接近，而且在拾色器的位置都位于右上角。大家都知道色彩三要素HSB(色相、饱和度、明度)。我知道很多人其实不知道…排版有排版的规则，对齐对比等等…配色也有配色的规则，毫无秩序的色彩搭配会看起来特别乱，配色的规则就是HSB保持统一的情况下，色彩才会看起来非常协调和统一。HSB保持统一并不是说数值保持统一，咱们可以试下。我将淡黄色的饱和度和明度值调成77和82与粉色保持一致，就变成了下面这个结果。
4种背景设计技巧让你的设计脱颖而出
在很长一段时间里面，网页中的背景图片元素，一直都生活在CSS、JS甚至视频的阴影当中，它的“参与感”并不强烈。不过随着审美和用户需求的逐步变化，背景图片在网页装饰上，开始发挥着越来越重要的作用。当然，从总体上来看，变化并不明显，但是在绝大多数的情况下，背景图片开始作为主要的视觉驱动力而存在。传统意义上的背景主要是使用图片，近几年开始流行视频背景了。而这些主要还是集中在网站的页头、Banner等位置，大多用来欢迎用户，推荐内容。许多网站都采取了相似的策略，让用户有所期待。随着动效的流行，现在越来越多的设计师开始试图将CSS3、HTML5和JS等技术融入到背景设计中来，寻求全新的解决方案。事实上，现在已经有四种不同类型的动态背景设计方案，它们风格都非常符合时下流行的趋势，且都具备不俗的发展潜力，今天我们聊聊这四种风格前卫大气的背景设计。粒子动效粒子动效是目前最流行的选择之一，很大程度上是因为这种方案对于目前的网站和浏览器而言，负载并不大，并且足够优雅。它可以很好地同纯色背景、插画、矢量素材甚至照片结合起来使用。除此之外，颗粒的动效变化也有很多变化。可以是在整个页面中随机散布移动的点，也可以模仿雨滴和流星的运动轨迹，还能参考星座、星空和宇宙中行星的运动来设计。粒子动效还能和鼠标运动以及触发事件结合起来：可以让粒子避开光标，也能让粒子围绕这光标运动，甚至让运动轨迹紧跟光标运动，等等。Huub 这个网站就是一个典型的案例，不同的点构成群组，点和点之间有细线连接，在黑色的背景上移动着形成自转的效果。当鼠标移动到附近的时候，光标所在处会形成新的点，与最近的光点连接。小贴士：如果你想实现类似 Huub 这样的动态背景效果，不妨看看 Dominic Kolbe 所创建的名为Mouse Parallax Demo 的项目，它能给你带来近似的效果。如果你立刻马上想要一个高度可用的粒子特效背景的话，那么你应该看看 Vincent Garreau 所创建的 Particles.js 这个JS库。
11张插画说明设计师和客户之间的分歧
TMD(Trust Me, I’m A Designer)制作了 11 张插画，形象描绘了设计师和客户之间最大的分歧。也许这就是为什么他们总是不能愉快地玩耍的原因。理想世界中，设计师和客户的关系应该建立在以同一个目标为共识的基础上。但现实是，他们之间不同的观点总是让事情看起来有点复杂。比如，客户想让 Logo 变大一点、颜色亮点，字体再更好些;而设计师想要更多留白，或是在微妙的色差中不停调整，希望有维密天使一样完美的字型等等。颜色字体程序空间
设计师如何从临摹设计作品中提高自己
不知道你有没有这样的情况，临摹了很多设计作品，但是等到自己原创的时候，就做不出来了。为什么?因为临摹的阶段有很多种，而且每个阶段都有不同的侧重点，也许你并没有注意对一些细节的思考。为了解决这个问题，今天菜心就来简单介绍四个临摹的阶段，大纲如下：跟着教程临摹对照原稿临摹加入想法临摹转化现实临摹1. 跟着教程临摹如今网上有很多设计类的教程，手把手教你把一个图标(或海报等)做出来，这种临摹方法会告诉你一些具体的数值，你只要跟着一步一步做就可以。
详解电商设计中使用到的的合成玩法
我在电商设计师里发现一个现象，很多人，尤其是很多店铺新手，拿到一个设计需求后，第一反应不是分析需求适合什么效果和样式，而是直接玩合成，为什么?因为他们觉得合成效果很炫酷，觉得合成是件很容易的事，其实这就有点本末倒置了，在这种思想下产出的成果往往也不是设计，而是炫技。那做设计的正确思路到底是什么样?到底什么情况下才适合玩合成效果?合成在设计里到底该怎么玩?针对以上问题，今天我就来跟大家汇报总结一下吧～1. 先说一说，做设计的正确思路到底是什么样?要想知道合理的设计需求是什么样的，那你就先得知道为什么会有这个设计需求。先看一个活动的流程：我们一般是先有活动目的，然后根据活动要达到什么目的效果来确定定位方向，再根据定位方向和想达到的效果出策划方案和文案，有了文案以后才有设计需求。也就是说你的设计结果最终是要传递正确的定位信息和合适的氛围给到目标用户的，而设计的形式和创意也都应该围绕着这个文案和活动目的来，比如刚过去的京东618某会场的页面设计。我们可以来分析一下需求：目的：平台年中去库存、刺激全名消费从而积累资金发力、培养用户忠诚度。定位：所有有购物需求的人。氛围要求：要热闹、要嗨、要给人有档次的感觉的同时又有亲和力的感觉，从而包容和吸引各种层次群体的购物需要。
详细解析作品包装和展示中的用色技巧
快年底了，大家又要开始着手整理这一年的作品集，那么如何快速的提升作品集的展示效果，增强自己作为专业设计师的逼格呢，相信是很多同学关心的事，一说到作品包装，有些同学想到的是套用Mockup。拉透视还有一些同学在展示布局上特别用心有人用了这些方法，作品立刻脱颖而出，而更多的人却被说成表面功夫，这是为什么?排版固然重要，但色彩的运用同样不能忽视，有时色彩甚至是作品脱颖而出的关键试想一下，在Dribbble 有很多高人气作品，虽然内容平平，但只要颜值到位，依然可以圈粉无数