原文Data Visualization and Infographics Resources

作者 Cameron Chapman 译者:西乔

数据可视化及信息可视化可以让复杂的数据集变得明了易懂。通过将数据和统计结果图形化,复杂的概念和信息可以在更短时间内呈现更多含义。

大部分数据可视化处理的对象是具体的数据或统计结果。另一些则致力于表现无形的话题,为抽象概念提供可视化的展现。一般来说,前者的表现形式多为图示或图表,而后者则往往更富创造与想象力。

许多可视化与信息可视化应用得很拙劣:有些不恰当地放置了过多繁冗信息(或不足的信息)、有些使用了不规范的格式、还有一些其他的常见错误。

下文中提供了信息可视化及数据可视化的25种实用资源。其中大部分展示了令人印象深刻的图表,还包括一些关于该怎样去设计的话题。

提供作者以前的文章作为参考

1. Data Visualization Sites 数据可视化网站

以下是一些能给信息设计师带来巨大帮助的blog及网站,提供了 创建方法、案例、类型以及其他资源。有些还甚至提供了工具来帮助您创建自己的可视化数据。

Strange Maps

Strange Maps 上有许多基于图表的地图,涵盖古今。地图里所带的标注,其中最有趣的是那些历史地图。

Screenshot

Screenshot

Screenshot

Wall Stats

Wall Stats 用海报招贴的形式制作了“美国个人可自由支配收入的统计”图表。它们还提供了其他关于政治及经济议题的图表。

Screenshot

Screenshot

Visual Complexity

Visual Complexity 陈列了来源广泛,涉及近700个工程项目的图表。他们都进行了分类并提供缩略图,以便于对海量信息进行检索。

Screenshot

Screenshot

Screenshot

Cool Infographics

Cool Infographics 是一个令人敬畏的blog——信息可视化的编年史及大量搜集来的可视化数据。只要你所能想得到的话题,这儿都有。基于tag的架构便于你查找特定类别的图表。

Screenshot

Screenshot

Screenshot

Data Mining

Data Mining 涉及的领域为数据可视化、社会化媒体和数据挖掘。这个Blog从包括《美国国家地理》及《经济学人》在内的其它媒体上聚合了大量的信息可视化图形,。

Screenshot

Screenshot

Edward Tufte

该网站 介绍了来源广泛的信息可视化图表。每张图表都有独立评注,其中有一些令人难以置信的有趣图片。

Screenshot

Screenshot

Infographics News

Infographics News主要提供新闻类信息可视化图像,也发布了一些和新闻相关的不同寻常的图表

Screenshot

Screenshot

Information Aesthetics

Information Aesthetics 上转载了许多细节精致的图表和可视化数据,涉及政治、经济、金融及其他类型。最早可追溯倒2004年12月。

Screenshot

Screenshot

Chart Porn

Chart Porn t提供来至全国各地的图示和图表,设计精美,涉及广泛。按话题分类,易于检索。

Screenshot

Screenshot

Screenshot

Behance Network

网站 Behance Network 基于Tag机制,内容涉及信息架构及其他一些特定类型。可以按作者进行检索。

Screenshot

Screenshot

Good Magazine

Good Magazine 推荐了一些极有趣的原创图表,从“水危机”到“食品券的增长”到“奥巴马对投票率的影响”。

Screenshot

Screenshot

Screenshot

Matthew Ericson

这个BLOG 展示了图表设计师Matthew Ericson及其他人的创作作品。新近比较有特色的图表是纽约市的谋杀案地图和工业产值的可视化数据。

Screenshot

Screenshot

NiXLOG Infographics

NiXLOG 上从互联网上聚合了大量信息可视化的内容,还包括一份原创图表:关于苹果电脑及其消费观如何普及的演变历程。

Screenshot

Screenshot

Virtual Water

Virtual Water是一个专业blog,主题是用水量的统计。他们用招贴的形式展现信息并(全部或部分地)出版发行。

Screenshot

Screenshot

History Shots

History Shots是一个商业网站,出售各种主题的数据图表及可视化产品(招贴、明信片等)。他们的主要提供历史事件、时代及包括政治、军事、体育或其它有趣科目在内的数据图表。这是一个相当有趣的网站,你可以在屏幕赏缩放图片进行浏览。

Screenshot

Screenshot

Screenshot

Flowing Data

Flowing Data提供了一些令人震惊图表,除了他们所专注的分类,还包括了一些比如美国最好的啤酒,葡萄酒的个性化形象,肯尼迪的族谱,美国宗教地理学以及不少其他类型的猛料图片。

Screenshot

Screenshot

Screenshot

Many Eyes

Many Eyes提供了工具让你创建自己的可视化数据,同时还可浏览别人的作品。他们也拥有一个很大的图库。

Screenshot

Screenshot

Screenshot

The New York Times 纽约时报

The New York Times的网站上花一点力气找到最好的图表绝对是值得的。它们拥有商业领域最好的信息图形,保证平均水平的读者能轻易理解那些实际上非常复杂的数据。

Screenshot

Screenshot

Screenshot

Nicolasrapp.com

nicolasrapp.com 是一个信息设计blog,其作者为美联社进行创作。

Screenshot

Screenshot

Screenshot

DataViz

DataViz 搜集了许多漂亮的数据化设计。尽管没有标注,但是那些图片已经完全足够说明自己了。

Screenshot

Screenshot

Screenshot

iGraphics Explained

iGraphics Explained –对于图表和数据可视化的有效性和制作方式,这个blog希望能阐明一些启示。他们展示了一些来至互联网的精美图表,这是一个启发创意的好去处,你还可以在这里认识到哪些图表形式是有效,而哪些不是的。

Screenshot

Screenshot

Screenshot

Simple Complexity

Simple Complexity 这个网站展示了一些简化复杂信息的可视化数据,用一种易于理解的方式来体现他们的真实意图。也包括一些关于如何图表优化的教程。

Screenshot

Screenshot

Screenshot

Well-formed Data

Well-formed Data 这个blog的题材:交互界面设计、信息图形、数据及统计可视化等。所附评注非常有趣,就某些话题进入了深入的探讨。

Screenshot

Screenshot

Information is Beautiful

Information Is Beautiful 这个blog颂扬了精美的数据设计。话题多元,有原创和来至他人的设计。

Screenshot

Screenshot

Screenshot

2. Flickr Pools for Infographics 信息图形的Flickr群组

Flickr 群组可以成为信息和灵感的源泉。下面案例中的图表,大部分来至世界各地的不同时期。这是一个获取想法和感知全球图表设计趋势的好地方。

Infografia | Infographics拥有700多张图表的群组,由120多位成员上传。

Screenshot

Screenshot

Screenshot

Infografistas.com / Infographics News 拥有350个类目的发布,来源的种类繁多。

Screenshot

Screenshot

Screenshot

Visual Information 包含650类目的群组。从餐馆到图书馆地图都有。

Screenshot

Screenshot

Screenshot

The Info Graphics Pool这个可能是Flickr里这一类群组中规模最大的了,拥有超过700名成员和1800个类目。

Screenshot

Screenshot

Screenshot

About the author 关于作者

Cameron Chapman 是一名专业的WEB和图像设计师。拥有超过6年的从业经验。她为很多blog写作,包括她个人的 Cameron Chapman On Writing。同时也是Internet Famous》一书的作者。

载于《程序员》杂志09年第9期。

 产品需求——《神秘的程序员们》系列漫画

这个系列的漫画讲述程序员——这种神秘人类的囧事,故事多来源于我身边的程序员朋友,且以互联网开发背景为主。

如果你有什么可乐的关于程序员的故事、对话、代码,愿意通过漫画的形式分享,请给我发邮件。arthur369@gmail.com

载于《程序员》杂志09年第8期。

最近实在是太懒了~~买了新板子,但也好久没有画。只好先把约稿拿出来凑数。不过我马上就会恢复状态啦,在去香港削屏之后,哇哈哈哈。

对待BUG——《神秘的程序员们》系列漫画

这个系列的漫画讲述程序员——这种神秘人类的囧事,故事多来源于我身边的程序员朋友,且以互联网开发背景为主。

如果你有什么可乐的关于程序员的故事、对话、代码,愿意通过漫画的形式分享,请给我发邮件。arthur369@gmail.com

译者:西乔 来源:www.webdesignerdepot.com 原作者:Kayla Knight

深底色风格的页面设计很受欢迎,它可以创造出别致优雅,极富创造力的效果。

深底色设计适用于许多网站类型,但并非所有。这种风格应该在恰当的条件下使用。

虽然深底色风格可以带来视觉冲击力,但是很多设计师并不知道如何有效地表现他们,取得的效果往往适得其反。失败的设计会导致可读性差,难以吸引用户,无法使用传统的设计元素等问题。

所以在这里,我们将讨论一些深底色页面设计的要素,以便让你的下一次设计更受欢迎,更具创造性

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。

相比之下,10%的受访者倾向于深底色的网站,另外36%的认为将取决于网站类型而定。

那什么是正确的答案呢?虽然每个人都有自己的观点,但既然有如此高比例的用户可以忍受深底色的页面设计,有时甚至是他们的首选。我们作为网页设计师必须了解如何为我们自己和客户创建更有效的深底色设计。同时我们必须相信深底色风格可以增加其可读性和友好性。

使用更多的空白

在这里或许我们应该称之为“空黑”。

有效地利用空白,在任何设计中都是重要的,对于深底色风格而言更必不可少。

深色的设计令人感到“沉重”,拥挤的布局会加重这种感受。 看看一些流行的深底色设计,可以注意到他们运用了大量的空白。

网站 Black Estate 陈列了互联网上优秀的深底色页面设计,它本身也是一个值得关注的卓越设计。 其设计中运用了大量的空白,还有独到之处:有效地在某些重要元素旁边使用空白。

首先,用户会第一眼看见的元素——logo,旁边有大量的空白。 然后用户会注意到主内容区和右侧的酒瓶。 如你所见,空白完美地反衬出了内容区的主标题和酒瓶上的文字。

BlackEstate

Tictoc的设计中,精选内容及相关图片配合大片的空白共同构成。随着页面下移,我们可以发现空白越来越少,这样我们的注意力就会转移到缩展示的内容。

其关键是:空白可以逐步引导用户到页面底部

黑色背景增加了设计的纵深感。 网站非常依赖设计中的空白,配合黑色背景制造出来的创意效果,页面才如此吸引人。

TicToc

网站 Mark Dearman的布局中应用了大量对称分布的空白。

每个内容区块间的空白提供了足够的呼吸空间,在用户视线浏览到下一区块前,提供很好的休息点。大量的空白是深底色设计中必不可少的,它能够令布局简洁,突出重要的元素,令整体外观更优雅。

MarkDearman

文字间距

由于可读性是深底色设计的头号问题,所以设计师应该更多地关注文本的设计。在整体设计中,改善可读性的一个途径是增加文本的段落间距,字距及行高

下图中比较了在深底色和浅底色中不同文本间距造成的效果。

Text White Space

另一种方式来改善网站的可读性的方式是增加字号。 如同本文中提到的大部分规则,更大的字体意味这更多的空白。 字母越大,字母的中间和四周就会出现更多空白。如下图中的”a“字,字号越大,除了四周的空白越大,字母“a ”字臂和字谷中的空白也更大。

要注意,浅色背景上的小号文本比暗色背景上的更容易阅读。 所以在设计新网站时,要使用一些虚拟文本来做测试,以确保文本的易读性, 如果不行,尝试增加字号看是否有帮助

文本的对比度

很多人都同意,深底色设计容易造成眼睛疲劳,过高或过低的对比度通常是罪魁祸首。 那如何找到完美的平衡点呢?

假设你在一个漆黑的房间里,突然有明亮的光线进入,你肯定会感到非常不适。 但如果是在一个不太黑的屋子里,射入不那么亮的光线,则会好受得多。 这同样适用于web设计。

寻找完美的对比度,意味着要找到背景暗度和文本亮度之间的平衡点

下图中简略地说明了背景和文本之间的对比状况。 你可以注意到背景和文本的亮度都在梯次降低。

在深底色背景上,为文字寻找合适的亮度要困难得多。要找到完美的平衡点,必须要试验不同的配色。 通常不使用纯黑或纯白能带来更好的效果。

Text Contrast

如何选用字体

字体在设计中扮演着重要的角色,在深底色设计中我们应该更谨慎地考虑字体的选用。 下图中示范了在深色背景中14号无衬线字体和衬线字体的显示效果。

(译注:衬线:例如右边Serif的“S”字母曲线两端的小笔画,那就是衬线。中文中的衬线字体是宋体,无衬线字体是黑体。衬线字体除了有笔画顶端的装饰笔画,线条有明显的粗细变化。而无衬线字体往往笔画是粗细是一致的,或变化非常不明显。)

无衬线字体可读性更强, 但许多设计师仍然选用衬线字体来表现设计中优雅的部分。其中的诀窍是仅在大字号文本上选用衬线字体,大字号的衬线字体会带来更多额外的空白,从而令每个字母都显得非常清晰。

Font Choice

下图的案例中, 衬线字体和无衬线字体的使用形成了优美的搭配。

在大字号的文本(如标题,导航和页面头部)上使用衬线字体,可令设计倍增优雅。 在正文部分使用了简洁的无衬线字体,又提高可读性和对比度。

Serif and Sans-serif

使用精简的配色方案

为了让深底色设计具有简洁明快的外观,设计者应该选用精简的配色方案

从下面的几个案例中,我们可以看出,炫目的配色方案在深底色设计中并不适用,因为对比太强烈了。

坚持只使用一种或两种颜色

如果要尝试更多的颜色,试试与背景色同色系的搭配。

Color

当然,许多深底色的页面设计中拥有激动人心的配色方案。 你可以在使用正确技巧的情况下打破规则约束。

不过,一般状况下,过多的颜色容易让页面看起来脏乱, 由于背景色已经让页面颜色很深,所以请谨慎使用颜色。

提供切换模式。

虽然我们已经掌握了很多技巧令深底色设计更具吸引力,但是我们还可以再做一点努力已满足更多的用户。

务必增加一个样式表,以便用户可以选择切换到效果为“浅色背景+深色文字”的另一版本。

同时创建2个样式表可以保证这一点,一个用于默认的深底色风格,一个用于替换为浅底色。

网站SitePoint上有不错的教程讲到了这一点 : Build a Simple Style Switcher in CSS.《如何使用css创建风格简洁的界面切换功能。》。 在这里仅需创建深色和浅色两份样式表,而无需其它颜色(如橙色、蓝色、白色)的界面皮肤。

最适合使用深底色风格的设计类型

如前所述,很大一部分用户认为,深底色的页面设计可以适用于某些网站类型,但那份调查中并没有说清楚究竟是哪些类型。

一般而言,深底色风格适合用于创意型或优雅型的设计,比如:对于摩登时尚网站,深背景色可以显得别致优雅。对于手绘风格的网站,深色背景可用于更好地体现个性与创意。

别致的深底色设计

深色但带给人的感觉是纵深,权威的,有力的。在使用得当的时候会看起来非常别致优雅。这里有一些使用深底色风格设计的案例和技法。

网站Larissa Meek 在背景里使用了古典风格的纹理,创建了优雅的基调。其它另类的特性令人对此设计印象深刻。

这种技法可应用与多种类型的网站。复古和景点的纹理可以创造兼具优雅和个性化的风格。

大部分人会把古典的纹理和高档关联起来,所以使用这种方法可以很容易地创建让网站看起来有档次。

Larissa Meek

Depth Core 的设计非常简洁,深色背景提升了风格和档次,也很明确的体现了网站所有者的风格。别致的设计可以提升你所展示的作品的价值。

请注意,这款设计中没有纹理,也没有任何logo和作品展示之外的图片。否则这个设计将会显得很臃肿,而照现在这样,内容区的呈现非常精美和紧凑。

设计中一个比较好的流程是先加入所有必不可少的元素,然后再一个一个加入所需的元素,设计师在此过程中可以不断停下来思考下每个新元素的添加是否必要,布局有没有因此而过于饱和。

Depth Core

被优雅背景衬托的艺术品会看起来更有价值,所以对于产品展示网站,例如网站 Tapbots ,一个拥有深色背景和良好光泽感的设计,可以有助于产品的售出。

美妙的渐变和光线,以及模拟该高科技设备本身质感的纹理,好的设计应该和产品本身相辅相成。

Tapbots

创意型的深底色设计

除了可以呈现出优雅的气质,深底色设计可以比浅色设计带有更多感情色彩,从而使他们成为一个创意型的项目。让我们来尽可能展现一些创意型设计的案例。

这个网站内容很少,但是布局非常另类,深色背景是内容很少网站的完美选择。

另外由于这种类型需要更多的空白,所以设计师也有更多发挥余地。

Inca

Grunge (摇滚)风格的网站的呈现形式多样,由于grunge 风格带有黑暗和潦草的意味,所以深底色风格一个匹配的选择。

(译注:grunge——另类摇滚的同义词。起源于西雅图的类金属(metal-like)另类摇滚。grunge渐渐形成一种时尚风格,比如宽松、多层的衣服和撕破的牛仔裤等)

深底色Grunge风格的Trozo 看起来打破了所有的设计规则,杂乱的纹理,拥挤的布局,数量众多的颜色。但是这个网站依然看起来还不错,这是怎么回事呢?

有如此众多和混乱的元素掺杂其中,对于设计初学者而言这可能非常棘手。维持这个设计平衡的关键是对元素进行合理的组织。

首先,背景明确地界定出了区块,可以引导用户视线,也能将内容放置到有组织的区块里。

其次,设计中有大量的空白。虽然背景是纹理,但重复的图案实际上也是一种空白,可以帮助平衡布局中的轻重疏密。

出现在logo左边、导航下方和页面右侧的空白最为明显。另外在“Exhibit 01″ 和 “Exhibit 02″之间的空白也是很常用的手法。

空白可以平衡布局,哪怕它看起来不像空白而是纹理。此为,较少的文本和区块(此设计中只有3个)有助于让页面看起来简洁。.

Trozo

网站Drew Wilson 的设计看起来打破了使用精简配色方案的规则,但实际上鲜艳和丰富的颜色仅仅集中在头部的一小块区域,没有全局滥用。

暗色的背景可以让光感和鲜艳的颜色看起来更明亮更突出。

一些设计在规则之外创造了完美的效果。但是依然应该谨慎对待规则,避免让太多渐变、纹理和颜色遍布整个页面。

Drew Wilson

总结

深底色设计可以赋予设计 优雅的气质和创造力,令产品的展示更加完美。但是并不适合所有类型的网站。

对于一些大型网站,尤其是用户中可能有视力缺陷或行动不便者,千万不要使用深底色设计,哪怕你提供了界面切换模式。

希望在您需要设计一个深底色背景风格的网站时,上述提示和策略可以对您有所帮助。

Kayla Knight 为WDD特别撰稿。

快速提升你的工作效率——PS中的文档管理(上)

PS中回溯历史记录的步骤是有限的,所有操作在经历超过一定步数的修改后都无法进行版本还原,以及进行针对原版本的修改。对于一个工程文件而言,版本不可逆是灾难性的。所以针对PS,我们应该保留素材的原始数据,尽量使用非破坏性编辑。

“非破坏性操作”是图像处理软件长久以来面临的问题,Adobe从最早的版本到最新的CS4,经过十几年发展,ps的用户们也遍历变迁。最早PS的使用者为了保留历史版本,不得不频繁“保存副本”。直到后来有了历史记录面板,有了快照,有了调整图层,有了智能对象,CS3版本中更向3dsMAX学习了属性堆栈。

来看看PS在“非破坏性操作”的4个方面上已具备的功能(截止到CS3版本):

  • 原始数据的留存:智能对象、历史快照。
  • 效果叠加:填充图层、调整图层、混合模式和图层样式
  • 操作区域:上文中提到的蒙版,剪切组
  • 属性堆栈:智能对象的滤镜库堆栈(PS3中新功能)。

四、使用填充图层和调整图层

图层面板下方的添加调整(填充)图层按钮

1 填充图层:

当需要为页面上某个版块添加浅灰色背景,在导航上使用长条型漂亮的渐变背景时,你是习惯如何操作,创建一个空白图层,在选区里直接填色?还是使用填充图层?

Ps中传统方式是在空白图层中创建选区或路径后执行填充命令,但自从允许使用填充图层在对象中填充纯色、渐变或纹理后,油漆桶变成了最鸡肋的工具之一。

相比较传统方式,填充图层具有更大的操作灵活性。单击图层面板中的图层缩略图,就可以随时更改颜色、修改渐变、更换纹理,且具有非常直观的预览效果。

填充图层中填充对象的形状范围实际上是一种内置蒙版,所以这种填充方式集合了蒙版的种种优势,比如可以使用黑白画笔来随意修改填充边缘、或使用矢量编辑工具来修改矢量形状蒙版。

图示案例:使用渐变填充图层、使用画笔/橡皮擦修改蒙版

在web设计中,所有需要使用填充色块的地方都尽可能使用矢量路径+填充图层来完成,这样生成的填充色块可以随时随地保持方便修改和无损形变。

图示案例:使用矢量工具+填充图层 创建常用元件。

2 调整图层

调整图像的色阶、色相、对比度、色彩平衡?把彩色图像变为灰度图像,色彩反相,调整照片的色温,这些都是最常用的操作。但你经常拿不定主意,对原始图像施加调整效果进行实验……

一个设计成浅蓝色的按钮,BOSS看了不喜欢,要求改成浅绿色。改完以后效果不好,BOSS又要求改成灰色……

如果你经常遭遇上述情况,请选用“调整图层”功能来进行你的调色实验吧。

PS中可以用来实现图像调整的方法:

使用调整图层要好于其它两种操作,调整图层不会更改原始图像中的像素,(会略微增加文件大小),也是一种内置的蒙版。可以随时更改。 在进行多项调整时,使用调整图层意味着新建多个图层,多个调整图层可以分别修改排序、混合样式和透明度

图示案例:使用调整图层改变元件配色

六、使用智能对象及滤镜堆栈

1  智能对象

PS从cs版本开始增加了智能对象(smart object)。智能对象可以保护原始像素内容,用户可以进行变换操作(包括缩放,旋转,变形等)而不会累次地降低图像质量。如一个400px宽的位图素材,使用变换操作压缩为200px宽,旋转45°。后来又想修改为300px框,旋转为原位。但上一次压缩操作已经对图像质量形成了不可逆的损害。如果在操作第一次变换前将该素材转为智能对象,无论它之后变换了多少次,都可以保证是基于400px宽的原始质量来进行更改操作。

智能对象的另一个好处是,可以通过编辑其中一个副本来实现对所有副本的同步改动。

一个使用了智能对象副本的psd源文件尺寸会小于标准的psd文件,这是因为智能对象图层的复制不会像标准图层复制那样生成真正的多倍像素内容,而只是充当了的角色。

这一点和“Ai的嵌入”有很像的特征。

图示案例:使用智能对象,编辑智能对象的原始文件,达到影响所有副本。

2 智能滤镜和滤镜堆栈

智能滤镜是指针对智能对象应用的一些滤镜,在滤镜库里可以浏览滤镜菜单,预览并对统一对象使用多个滤镜。

滤镜堆栈和AI中的外观面板很相似,所有施用过的智能滤镜都显示在PS的图层面板。你可以再次关闭该滤镜,调整滤镜的透明度和叠加模式,调整多个滤镜的施用次序

除了上述优点,还可以再次对智能对象的原始文件进行修改,所以使用智能滤镜,在原始文件和滤镜使用的操作上都有极大的灵活性。同时也都是非破坏性编辑。

图示案例:使用智能滤镜和滤镜堆栈。

3 栅格化操作

智能对象,矢量对象,文字对象有一些共性:在被栅格化(像素化)之前,随时随地都具备可编辑性,这个特性让上述对象类型在任何时候都应该成为你的首选。但是有些滤镜和变形操作是其失效的。

所以要非常谨慎地操作栅格化命令,栅格化和图层合并一样是破坏性的,不可逆的。

如果必须要使用某些滤镜效果或变形,建议不妨为上述对象创建一个副本,隐藏保留原本,在副本上施行操作。

对于边缘修改,边缘羽化、擦除这类操作,可以使用蒙版技术来完成。这同样是非破坏性操作。

七、使用图层样式(layer style)

图层样式可以实现非常丰富的特效,包括投影,光泽,纹理,发光。

除了常用的发光、投影、浮雕外(在webUI设计中其实它们反而不常用),

  1. 图层样式可用于填充纯色、渐变和纹理。比较与填充图层,图层样式最显著的特点是便于移植。
  2. 描边可用于创建border。内发光可用于创建padding。外发光可用于创建margin和小圆角边框。
  3. 混合模式、透明度、填充透明度都是图层样式的一部分。他们可以被一起方便地移植
  4. 单纯使用样式可以创建多种玻璃质感、水晶效果、金属拉丝、塑胶质感的按钮样式。

图层样式的优点:

图层样式可以通过复制、粘贴操作来传递到其它图层中。可以通过多选,一次向多个图层粘贴某个样式。还可以通过快捷键来操作。Alt+拖拽,是移动某个图层样式,alt+crtl+拖拽是复制图层样式。(使用鼠标快捷时,透明度,填充透明度和混合模式这3个属性将无法像粘贴图层样式那样也传递过去。)

图层样式不会破坏原始图像质量,允许随时修改样式的配置参数。

更改原始图像时,应用其上的图层样式会立即自动变换以适应新图像。

图层样式支持无损缩放。(涉及像素纹理的除外)。另外当psd文件的图像大小(分辨率)发生改变时,图层样式可同步缩放。必须保证“图像大小”的设置对话框里,如图这个复选框被选中,同步缩放才能起作用。

图层样式可保存为预设配置,进入资源库,在多个pad文件之间复用,保证样式的继承和统一。

下面这些链接中可以提供大量的图层样式下载,双击.sal文件,可以直接加载样式在预设配置里。

42 Photoshop Layer Styles for Button Design – Free Download

131 Ultimate Web 2.0 Layer Styles

220 Amazing Free Photoshop Layer Styles

八、资源管理——定义预设配置

对于交互界面设计这种存在大量需要风格统一的工程文件和多人团队协作的项目而言,资源管理是必须的工作。

和程序写作一样,需要先统一接口、函数,PS里也有许多可以预先配置好的元素。

包括 渐变、纹理、色卡、图层样式、矢量形状、画笔、等高线、工具、图案等,更专业的还需要做统一的颜色配置。

PS提供在”菜单: 编辑 —> 预算管理器”里管理这些资源。可对资源进行分组,命名,添加,删除,存储,载入等操作。

每一种资源都有对应的控制面板,每一个面板右侧都有折叠小三角。点击后展开统一的管理菜单。

在项目开始前,

  • logo和标志性装饰图形 作为 矢量形状预设载入。
  • 主配色 作为 色板预设载入
  • 常用渐变 作为 渐变预设载入
  • 主按钮和背景条样式 作为 图层样式预设载入
  • 常用纹理 作为 图案填充纹理预设载入
  • 常用虚线 作为 画笔图案载入
  • ……

花一些前期准备时间,将设计风格进行商讨统一,然后新建组别存储。并将不同类别的预设分别存储为预设文件:如色块文件:***_pro.aco , 渐变文件:***_pro.grd。分发给协作设计师使用。除了能大幅度提高工作效率,还能保证文档工作的专业和规范。

且无论项目持续了多长时间,或者经历时间漫长的频繁改版,或者更换过几个设计师,都能保证基础风格的协调和统一。

八. 多人协作项目的ps文档版本控制

Adobe的从CS版本开始,在套装中提供了Version cue 和 Bridge.

Version cue:  用户PSD文档的版本控制,多人在线协作管理

Bridge:图片管理/浏览工具。支持Adobe的所有工程文件预览(得保存为pdf兼容格式)。拥有支持 tag , 图片尺寸,类型 等多种维度的强大过滤器,用于管理本地数量庞大的素材库很好。

这两个小工具软件很容易被忽略,(我觉得是它们2.0之前的版本都做得太差了,Bridge曾经导致我频频死机。但是从cs3版本后,这两个小工具都在性能上做了很大优化,变得非常好用)

关于结合使用Version cue 和 Bridge,创建一个属于设计师的SVN系统,对工程文件进行版本控制,这有一篇写得很好很详细的教程。在阿里集团中,淘宝的UED团队还是最靠谱的。
Version cue+bridge(cs3)优化版本控制【alex ren】



Copyright © 2007–2013. All rights reserved.

RSS Feed. powered by Wordpress a theme by Xiqiao.