Havenyi&SKDD Team 从事 RIA项目业务;界面设计；交互设计

常见的广告尺寸

你浏览一些网站，会发现广告在网页中占不同的比例，但其中大部分都有标准尺寸。互动广告局制定了标准尺寸以用于在线广告，虽然网站所有者可以出售所 有尺寸的广告，但建议还是遵循标准，因为潜在的广告客户可能已经有设计好的标准尺寸广告，因而将有更大可能去购买标准尺寸的广告位。网页设计师应该了解客 户希望出现在其网站上的广告尺寸即标准尺寸。

博客通常会实用125×125的尺寸，尽管其他尺寸也在使用。Daily Blog Tips就是一个典型例子，6个125×125尺寸的广告放在右侧栏，其他唯一的广告就是左侧栏底下的长条幅。

另一个常用尺寸是300×250，很多新网站都会在侧栏实用这个尺寸。

设计师的最优方法

1、设计满足用户需求

设计师最终是要像客户负责的，必要时设计师应该给客户建议，但是最终网站是要让客户满意才行。虽然设计师可能不同意客户在网站上使用广告的需求，但如果客户确定要这样做，我们就要考虑如何做到最好。

2、合理布局网站以便广告成为设计的的一部分

看上去很自然、标准的带广告的网站，通常是设计时就把广告考虑在内的。广告能非常适合在侧栏的某一特定位置不是偶然的，合理布局广告位置，使实现网站的最佳视觉效果成为可能，而把广告随意的放在不适合的位置上，将会压倒其他精心设计的布局。

3、考虑将来的需求

你可能会发现自己处于这样一种情况，当时设计网站时广告并不是重点，但是在不久的将来，它将成为主要收入的来源。很多网站开始时几乎没有广告，一旦 用户群建立起来就需要提供更多广告位。最理想的是，设计过程中将这种情况考虑在内，并计划将来新的广告位放在哪里。侧栏通常是增加广告数量同时不影响布局 以及内容的最佳位置，但是页头广告就相对比较困难了。

在最初就试着和客户讨论长期计划是很好的做法，以便避免这样的情况发生。如果在新的改版之前，不久就会需要更多的广告位，那么可以在一些位置放暂时 性的内容，直到它们被用来做广告位。例如，一个区域可以被用来展示网站本身的内容，一旦广告收入变得更加重要就去掉这块内容用广告位代替。

4、考虑对浏览者的影响

设计师努力让网站包含广告位置以让广告客户满意，但浏览者同样也是要考虑的。当涉及到广告，很多决定、判断需要确定，什么是适当的？哪些看起来太多了？

Keyfob: Anatomy Of An Icon

Following on from a previous article on toolbar icon design we're going to tackle it's Big Brother, the Application Icon. The two serve slightly different functions within the program but adhere to the same idea. While we could start on an existing application, we’re going to embrace vaporware and produce an Icon for an Application that doesn’t exist. This is simply to show the process. This tutorial will follow the construction of an Icon for an imaginary application called “Keyfob.” We’ll say that it’s an application for locking and unlocking the Mac remotely. This is partly inspired by a process where someone managed to put their Mac to sleep using a mobile phone.

Where Do We Start?
A biro pen, a sketchpad and a cup of tea usually works well for me. However above all these, the most important tool for developing Icons is...? A Dictionary
Every Icon is communicating a metaphor and because you are appealing to a wide audience, the accepted meaning for a term is very important. So the inclusion of a Dictionary with 10.4 Tiger was a boon for anyone who has ever tried to sum up “vertically integrated certification process” in a 16x16 square.

This process may sound a bit silly but every Icon needs to rely on a strong metaphor which is understood by the widest audience. Simplicity always wins out so in this case we will produce a key which looks like it attaches to a chain.


Sketching
Then the process of swirling out your ideas begins. It doesn't matter if the sketch looks like monotone roadkill, you are just throwing ideas down onto paper at the moment. If any aspiring filmmakers ever needed encouragement they should look at the Taxi Driver storyboards of Martin Scorcese. The man has incredible talent in filmaking but would be thrown out of kindergarden art class. Once you have placed some ideas down on paper you can scan them in and dive into your image editor of choice. I'm using Photoshop CS and IconBuilder Pro for this one. The method I use to create icons could be wildly different from someone else so go with whatever method feels comfortable. The end result will be a series of scaled resources that the OS will use in different views.

Blocking In Colours
From my sketch ideas I'm going to take the angled key with a button for operation at a distance. The icon is going to be built using vector shapes and layer styles so there is no need to build a huge source file and scale down as these will scale up quite well. First we draw out the base layer with the pen tool. It's usually helpful to have the sketch on a layer at the top set to overlay mode as you can then check you are following the rough idea. When we have the base layer laid down we can then start to fill in certain shapes with layer styles such as gradients and inner glows to give definition. The pattern overlay tool can be quite useful to give some texture in certain areas.

Highlights And Shadows
When we have filled in the base layers with colour and some effect we can start building up highlight layers for each of these examples. The main concern with the highlight layers is to reinforce the overall shape of the icon, be it a sphere, pipe, or circle. So on this Icon, we use a lighter shade of grey to build up the curve of the rubber. The surface would be quite dull so the edges and highlights would all be quite soft. Lastly some shadow layers complete the overall impression of the icon shape.

If you want to apply a nice edge highlight, try putting an inner and outer glow on a shape and then setting the fill content to 0%. Use a layer mask to knock out the shadowed side. Make sure to click “Layer Mask Hides Effects” in the Blending options palette All through these layers, masks are used to bring down the edges of highlights or bring up shadows in certain areas. If you are unhappy with the angle of something , clicking on the approriate point with the Direct Selection tool and nudging the point with the arrow keys usually solves most issues.

Smaller Sizes & Exporting
While the Icon we’re building may look decent in 128x128, the majority of the time it is going to be viewed in a smaller size in the Dock, sidebar or Column/List view. So we have to think about what we do to make it look well at smaller sizes. Sometimes a simple scale and sharpen will work. Other times, it helps to build a version of the Icon specifically at that size.

The vector nature of this method helps making scaling or style changes at a later date without any loss of quality. This Icon could be scaled up to 256x256 or larger and only the layer effects and masks need a small cleanup to match the 128x128 look. With the 32 and 16 resouces we can zoom in and see what detail if any we can clear up. One tip is to sharpen the edges by judging the overall colour of the icon and applying a very subtle stroke using that shade to harden the edges of the icon. Thus in list and sidebar locations the icon can be more visible. The final step is to build the icon resouces in IconBuilder (using the IconBuilder Photoshop template, you can instantly fill in the various sizes by clicking QuickBuild). For most Application Icons, you will be creating a ICNS file.


Metaphors and Wild Fowl
An Icon is not a turkey. Stuffing it with extra elements will not give it more flavour. If the urge to fiddle is overwhelming, take a break from the Icon for a few hours and come back to it. The Icon can be given extra elements like little light indicators or graphics on the button but are they contributing to the meaning or just an excuse for pixel pushing? Simple is very hard to achieve consistently but it’s something that’s worth aiming for.

I’ve made a little movie of the process so you can see the general buildup of effects. I could have given the PSD but I think it’s better to show the general process rather than the exact settings and layers for one specific piece of artwork.

View Quicktime Movie - 2.7mb
Download the OS X Icon File - 163k

[tutorial and images © Cian Walsh of AfterGlow Design]

收集http://www.redbots.cn/resources/2009/02/12/7673.htm

I've had a few requests for insights into the process of making icons. Instead of answering individually, I've decided to make this the first subject of a range of articles to be authored here at PixelResort.

This won't be a tutorial or a step-by-step walkthrough, more like a general guideline based on my own experience. It's how my workflow crops up. Enough disclaimer, let's see if we can make an icon. To illustrate the creation of an icon, I've decided to redraw my old TextEdit icon from the bottom up.

Sketching

Sketching is an important tool in defining the concepts of your icons infancy. Sketching shouldn't be accurate, it's all about getting your ideas down on paper.

Unconsciously you make alot of decisions when you first put that pen to the paper. Perspective and major elements materialize and you get a first and early look of what might work. The power of moleskins should never be underestimated. Reference pictures and rough tracing might come in handy if you're drawing something completely alien to you.

Where to Start?

When that unceremoniously blank photoshop document is staring back at you, it might be hard to know where to begin. My advice is, start with large and defining elements of the Icon. In this case the wooden pad sets the perspective and works as the foundation of the icon.

The Pen Tool

The Pen tool is the iconists best friend. It takes time to master, but it's the heart and blood of icon creation. Even though your finished work will be raster based, vector scalabillity in the work area is essential. It allows you to move around and resize elements like there's no tomorrow.

Blending Options

If the Pen tool is the iconists best friend, blending options is the beer they enjoy together. Blending options are way more powerful than many recognize. The subtle symphony of individual styles can create almost any texture and surface.

I could write an entire book about the power of blending options. The best way to learn is to play around with it yourselves. Don't be fooled by the labels adobe has given the individual options - an inner shadow doesn't necessarily need to cast a shadow, etc. Explore the possibilities of the individual options.

Organize!

As you slowly add more details to your icon, make sure to stay in control of your growing number of layers. Organize in folders, and nestle in smart objects.

Icons can easily have 100+ layers, so staying on top of the individual parts make tweaking alot easier.

Smaller Sizes

As you may know, a regular icon package contains several sizes. When you first start out, make sure to work on the maximum size your package will contain. This is often 512????512 pixels (leopard standard). From there on, you should work your way down the various sizes (256, 128, 32, 16).

Tweak and completely redraw your icon to fit each individual size. Much of the liberty you have in the 512px version won't be afforded you in the smaller sizes. Each size is equally important. An icon is only as good as it's least attractive size. Make those pixels count!

Packaging

When you've spend a few hours perusing the details and tweaking everything to your satisfaction it's time to pack up the icon. Personally i use Iconfactory's marvelous IconBuilder. It outputs Mac & PC formats without a blink.

Ultimately the creation of each icon is inheretly different. To say that I haven't gone into detail is a mild understatement. There are quite alot of aspects which i haven't covered, but I hope that i've shed some light on the process of making an Icon.

Download

Download the finished icon from the Icons Section.

I'll be happy to answer any questions in the comments.

Author: Michael Flarup
URL: http://pixelresort.com

鄙视我的一些客户得了便宜卖乖！借着我的朋友关系 增加我的工作量

以下就是一些来自于Eye-Tracking研究结果的窍门，可以为改进你的网站设计提供些意见：

1.对比图像，文字更具吸引力

与你所认为的相反，在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户，他们是来寻觅信息的而不是图像。因此，保证你的网站设计凸现出最重要的信息板块，这才是设计的首要原则。

2.眼球的第一运动聚焦于网页的左上角

用户浏览网页的这一习惯应该在意料之中，毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时，应该尽量保持这一格式。要知道，如果你希望保持个人特色，搭建一个成功的网站，你就必须尊重用户们的习惯。

3.用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边的内容

用户普遍的浏览方式呈现出“F”的形状。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与。在此放置头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读。

4.读者会忽视横幅广告

研究表明，读者常忽视大部分的横幅广告——尽管你以此维持网站生计——视线往往只停留几分之一秒。如果你想通过广告挣钱，那么必须创新你的广告位以及合理配置网站广告形式。

5.花哨的字体和格式被忽视

为什么呢？那是因为用户会认为这些是广告，并非他们所需要的信息。事实上，研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。

6.用数词来代替数字

如果使用数词取代数字的罗列，读者会发现在你的网站可以很容易地发现真实的资料。要知道，你是写给那些将第一次浏览你的网站的读者，所以，让他们容易发现他们所需的信息，让他们感兴趣。

7.字体大小影响浏览行为

想改变人们对你的网页的看法吗？改变网页字体的大小。大的字体刺激浏览，而小一些的字体则提高焦点阅读量。根据你的需要，合理配置两者的比例。

8.遇到感兴趣的内容，用户仅会多看一眼副标题

不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词，这样可以有效利用搜索引擎，让它带来读者。

9.人们大都只浏览网页的小部分内容

如果在用户浏览的时候提供信息使他们尽快锁定目标，就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。

10.简短的段落相对于长段落来说有更好的表现力

网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，例如这个电子商务网站的产品介绍。

11.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力

别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我们需要消除这些干扰。

12.网页顶部和左边的广告更能吸引眼球

如需要在网站植入广告，试图使他们融入网页的左上部，这样他们才能吸引到最大的视觉注意力。当然，用户仅仅会注意到这些广告，这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。

13.将广告放置与最佳内容一旁也可以提升注意力

如果想要提升广告的可视性和点击率，可以将其设置于最能引起人兴趣的内容一旁，整合进网页的设计里。这样，用户既可以找到所需的内容，你也能提升广告的效益。

14.在各种测试中，人们阅读文字广告最为专心。

正如上面提到的，一般的互联网用户不会花费太多时间用于查看那些一眼就能看出是广告的内容。这就是文字广告表现出众的原因。他们并没有分散注意力，而是与网页的其它部分内容融为一体，这让他们减少了对读者的视觉刺激，也使这一广告形式获得成功的阅读率。

15.越大的图像吸引越多的注意力

如果要在网页中使用图片，那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关，否则它更容易被忽视。大多数读者都拥有高速的连接速度，所以请放心在你的网站上使用那些较大体积的图片。

16.干净、清晰的特写图片能吸引更多的视觉注意

可能那些抽象的艺术图片会让你的网站看起来很有味道，但是他们并不会吸引多少读者的注意力。如果你需要使用到这些图片，请确保所用图片的清晰以及其表达内容的简单可读性。必须注意的是，那些与真实的“人”相关的图片比所谓的模特图片更为“优秀”。

17.标题能吸引眼球

浏览网页时，读者能发现的第一内容是标题。确保网页的所有相关链接畅通和有效，以让读者顺利的通过网站进一步搜索。

18.用户花费大量时间察看按钮和菜单

所以，你需要花费额外的时间维护你的精心设计。毕竟，他们不仅吸引了读者的眼球，更是网站设计的重要组成要素。

19.表单格式可以延长读者的注意时间

分解内容和段落，大量使用表单形式来表现你的文章，可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容，会让网站更容易浏览，用户更快的找到所需的信息。

20.避免呈现大块的文本

研究显示，一般的网络浏览者不会花费时间去阅读大块的文本，无论他们有多重要或写得多好。因此，必须把这些大文本分解为若干小段落。突出重要的地方，放置点击的按钮也可以提高用户的注意力。

21.格式可以吸引注意力

在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎，因为过多的使用会使你的网页难以阅读，把读者吓跑。

22.利用好空白

尽管把网页的每寸空间都填满这个想法十分诱人，但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没，同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁，给读者预留出一些视觉空间来供读者休息。

23.放置于网页顶部，导航工具的作用将更好的发挥

理想情况下，你不会满足于当读者打开你的网站时仅浏览初始页，而是希望他们浏览翻阅，察看其它感兴趣的内容。将导航器置于网页顶部，就可以让用户通过使用这个工具轻松的找到所需的目标内容。

当然读读《css禅意花园》也可以  以上的理论都谈论过