Archived entries for 设计

Design lol 是一个颜文字,意思是: 为设计欢呼

Design lol.net 是一个全球设计blog精华的点评分享站,每日更新。它的前身就是我的每日设计三推。

从去年10月,我开始在推特上每天发3条设计推。基本都是国外设计blog的精华文章。然后每两周在《西乔的九卦》http://blog.xiqiao.info/tag/3dt 上配图汇总一次。但是第一时间有滞后性,第二基本未作分类。有很多朋友搜索起来的时候不方便。

两周前和萧然同学一起吃饭,他的animetaste是一个世界一流动画短片赏析的blog,经过大半年的发展,现在成为一个很有价值的专业内容站。我们讨论完,霍炬和我都觉得每日设计三推还是应该以更好的方式积累下来。三推发到10年6月,已经有300多篇文章。

所以我决定做一个新站,把这些设计三推重新分类整理,标注tag,并创建了几个实用的过滤器。比如按颜色,按样式,按web设计单元,按风格等。除了可以每天带给读者们新的内容,也可以成为一个设计师们手边的工具箱。

这个站用的还是wordpress,使用了一个现在很风行的 magizine-style 布局的模版。这个站做设计才用了1个小时,改样式和Php用了4天。又花约5天把300条三推和300多张图片一篇篇发布上去。

以后的每日设计三推将在designlol.net 和我的tw@arthur369上继续发布,tw标签是 #3dt,

Design lol 是一个新生儿,希望大家继续支持并订阅 http://designlol.net/feed

同时也希望能有其他作者加入,一起推荐和点评国外精华的设计文章。

为kwestion设计的logo。kwestion是一个开源的twitter客户端,类似dabr和推特中文圈。非常好用。

这个logo的含义是:twitter小鸟 穿越并击破了黑暗的言论空间。

献给我们热爱的twitter,以及twitter上可爱的人们。

一开始的创意是:一片树叶,向上生长击破这个黑色的气球对话框。

期间,火炬同学作为一只患有破墙症的code monkey,非常积极主动地出了很多的馊主意。比如把树叶做出Matrix 里的效果;在树叶上做出像素感;认为碎石破坏画面美感之类的。

后来我觉得树叶及其配色 让人很难关联到twitter,布局也比较难处理。就重新画了一只蓝色的小鸟。火炬同学又来了,说好像一只被闪电劈过的鸟飞过。。。看我非常生气,只好重新解释为:闪电劈开的不是小鸟,而是黑暗。。。

当朋友拜托你给他的公司或产品做一个简单的网站。或者你刚刚发布了一个软件,需要一个官网。或者想给你的WP blog加一个首页。。

Berita是一个专为此类需求设计的免费theme。较之于同类产品,它同时为了增加定制化程度还改造了wp系统,使用上更类似插件。只要掌握简单的html+css,就可以随意对页面进行改造。灵活度和拓展性在同类中是佼佼者。

下图是我昨天使用WP+ berita改造的网站。(这个网站主要是为了方便演示,里面的部分icon和图片有版权问题,请勿直接使用)

这是berita官网的demo

在此处下载我改造过的版本。(修改了css,header.php以及图片文件)

此处下载官方原版。官方地址:http://bizzartic.com/bizzthemes/berita/download/

我缩小了原版的header区域高度,在search框上方增加了一组url。添加了一些底栏版块的样式。

具体如何使用berita的插件系统,我会在下面详细说明流程。并放出我的代码。

————————————————————————————————————————————————————

首先,像安装所有theme一样,解压包放置在wp-content/themes,并在WP左侧菜单 Appearance – Themes 里启用该theme。

接下来看见的界面是这样的。。。空空如也。不要失望。还有大量的定制化和手写代码工作要做。

在左侧菜单的Appearance里可以发现多了一项Berita Theme Options .这就是定制系统。如下图。我做了粗略的说明。

Berita简单的工作原理:

一个简单的企业站是有一部分静态页面和一部分动态页面来共同构成的。诸如about us ,contact us ,service, feature, customs 之类不经常变动的页面直接写成静态html页面。 news,case 之类会需要更新维护的动态部分使用CMS系统来生成。

Berita 使用WP里的pages 来制作静态页面,用posts来制作动态部分。实际上pages和posts都使用同一个编辑器,在编辑代码时没有什么差别。

所以下面先来创建一些pages,一些posts和几个categories,来作为“建筑材料”。

有了材料,我们就可以组建首页了。

第一步:设置LOGO

在此处设置Logo图片。如果勾选Show Blog Title+Tagline,则logo图片不再生效,而直接显示blog title和tagline的文本。

第二步:首页导航。

创建完pages后,导航上会直接出现链接。可以在Berita Theme Options 去掉你不希望显示在导航上的page。

在Blog Section Settings 设置一个放在导航上的post 分类。链接到Categories页面。适用于”公司新闻”或者“产品的blog”

这里只允许设置1个。系统建议创建一个Category 名叫 BLOG ,然后把其它所有分类都设为它的子分类。这种做法适合想给blog加个首页的用户。

还可以设置在footer区显示的文字导航

还可以设置多级导航。在edit page的时候,将右侧的的Attributes – Parent 设为对应页面,就可以在导航里自动出现

我在搜索框上方加了几个about | contact的入口。在Appearance – Editor – header.php里可以修改链接和文本。在<div id=”search-spot”>下方加上

<p><a href=”http://clentrust.com/about” title=”About us”>About</a> | <a href=”http://clentrust.com/contact” title=”contact us”>contact</a> | Join</p>

第三步:首页的滚动推荐区(Front Slider)。

Berita系统中,这部分也是利用Pages来完成的。创建几个pages,有无title都可以。

然后如下图中设置page的id及排序。

这个区域的高度可以在Pick Height里设置,页面中超过该高度的部分不会显示。

下面的代码大家可以直接使用:注意要更换img时,要把class 改为class=”fr” (也就是float right的意思,完成图片的右浮动)

<div class=”slider-post”><a title=”Sample Slider Page”><img class=”fr” title=”1″ src=”http://clentrust.com/wp-content/uploads/2009/11/1.jpg” alt=”1″ width=”350″ height=”250″ /></a>

<div class=”slider-title”>Sample Slider Page</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.<a class=”btn” href=”#”>view more</a></div>

第四步:底栏的3个版块。

在Appearance-Widgets菜单里,我们可以发现左边的可选widget窗体多了好几个以Bizz开头的。

右侧的Current Widget也从单一的Sidebar,增加了6组Footer。

Front Footer: 控制静态页面(首页和pages)底栏的3个版块区域

Blog Footer: 控制动态页面(posts 和 categories) 底栏的3个版块区域。

像设置传统的sidebar一样,只要将所需的窗体从左侧拖拽到右侧对应栏目里,可添加多个,并排序。

一般都是使用添加text窗体,在里面添加代码来进行页面的自定义。

下面的代码直接用,图片不要用了。___________________________________________________________________

<div class=”collumnblock”>

<div class=”itemtitle”>

<div class=”itemicon”><img width=”71″ height=”63″ alt=”Influencers” src=”http://www.dialogix.com.au/images/IconInfluencers.gif”/></div>

<div class=”text”>

<h2><a href=”features.html”>Find Key Online Influencers</a></h2>

</div>

</div>

<p>No other social media monitoring tool finds key influencers, ranks their social authority and charts sentiment as well as Dialogix…</p>

<div class=”itemtitle”>

<div class=”itemicon”><img width=”71″ height=”63″ alt=”Resellers” src=”http://www.dialogix.com.au/images/IconResell.gif”/></div>

<div class=”text”>

<h2><a href=”features.html”>Available for Agencies</a></h2>

</div>

</div>

<p>Offer Dialogix to your clients with your own branding. Generous re-seller packages are available…</p>

</div>

________________________有6个客户logo小图的代码__________________

<div class=”collumnblock2″>

<h2>Who’s already using Clentrust</h2>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Parmalat” src=”http://www.dialogix.com.au/images/LogoParmalat.jpg”/></div>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Ice Break” src=”http://www.dialogix.com.au/images/LogoIcebreak.jpg”/></div>

<div class=”companysquareend”><img width=”58″ height=”51″ alt=”ABC” src=”http://www.dialogix.com.au/images/LogoABC.jpg”/></div>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Royal Childrens Hospital” src=”http://www.dialogix.com.au/images/LogoRoyalChildrensHospital.jpg”/></div>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Breaka” src=”http://www.dialogix.com.au/images/LogoBreaka.jpg”/></div>

<div class=”companysquareend”><img width=”58″ height=”51″ alt=”Praemium” src=”http://www.dialogix.com.au/images/LogoPraemium.jpg”/></div>

<div id=”testimonials”>

<p>“Dialogix has given us insights that have changed the way our clients do business.” <strong>Remy Brassac, Gallery De Pasquale<br/></strong></p>

</div>

<p><strong>TEL: 086+12345678<br/>Mail: support@clentrust.com</strong></p>

</div>

__________________________________________________________________

Berita系统支持在widget里添加 twitter和flickr。配置非常方便

设置广告:

Berita 可以方便地在动态页面的侧边栏放置广告。支持两种尺寸。1个 320*250。或是几个125*125. 设置见下图。

125的广告支持放3组(6个)。也可以只放1组或2组。要勾选图示红框。

其他特色:

  • 支持最受欢迎的posts,好像是按评论来排序的。
  • 支持相关文章
  • 支持设置第三方订阅源及邮件订阅。
  • SEO设置
  • 它的分页也很友好

随便提两句和样式有关的。

这个系统使用的960Grid的css系统。

导航区的驼色背景不是写在css里的,是使用bgr.png。

一大张背景图。推荐一个压缩png的网站 http://www.gracepointafterfive.com/punypng 。在基本看不出来损耗的状况下,压个20%还是没有问题的。

Debug

这里有muzik
《Wordpress主题berita几处修改记录》可以看看

其他推荐

对此类theme有兴趣的同学,我再推荐两个不错的。适合更复杂的business网站或blog。

官方下载 VIEW MORE

官方下载 VIEW MORE

译者:西乔 来源: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.