下面这款iPhone支架看起来是不是非常神奇？没错，它是折纸的！这是由一个名叫Jonathan Ive的人所设计，你可以把iPhone随意的放在上面，例如横着或者竖着，最重要的一点，它是免费的，原因在于这玩意你可以自己动手做一个，只要一张图 纸即可，然后用220g以上的A4纸打印出来，按照其图示进行简单地裁剪，折叠，这样一来一个简单易用的iPhone手工支架就完成了，全程均由你手工制 作，是不是很有满足感？

 

Download and print the template PDF to do it yourself ! For US letter version, it’s here

 

Download and print the template PDF to do it yourself ! For US letter version, it’s here

常见的广告尺寸

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

博客通常会实用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禅意花园》也可以  以上的理论都谈论过

·当时按客户的要求 根据thetoke.com这个flash 3d来做，不过版面和色调是按照公司logo的感觉来做的，这个案例有个缺点就消耗内存资源，3d效果慢死人.用户体验拖拉！当然利弊都有。对方是一家装饰设计公司，对之前他们公司网站效果很不满意，原因是太过于传统了。信息量臃肿，抓不住客人想要的东西。

所以请慢慢等待效果吧！

 

最近我们Team单子开始多了

 

 

嗯，看某易的招募也太不正式，这里我发个公司 & 招募的概况，招志同道合、同样对 RIA 有热情的朋友，随本尊一起闯荡吧！ ^-^

 

公司概况：

 

本人目前在新加坡读大 4 ，公司准备注册于新加坡，面向国际、国内两大市场。主营 RIA （ Rich Internet Application ）产品以及基于 RIA 的电子商务系统，轻量级网页网络游戏。开发平台目前集中于 Adobe Flash / Flex / AIR / FMS 。 Microsoft SilverLight 、 Sun JavaFX 有所关注但暂不投入开发。其它智能移动、嵌入式设备如手机、 PSP 等的开发应用（ Flash Lite ， J2ME 等）亦在考虑范围之内。

 

招募类别 & 条件：

 

（ 1 ） RIA 开发

 

目前集中使用 Adobe 的架构，精通 ActionScript 3.0 （ AS3 ）是必备功底。 AS3 是遵循 ECMAscript 第四版标准的 Adobe Flash Player 运行时环境的编程语言，与 JavaScript 相似。具有以下任一扎实编程经验的朋友都可以很快迁移到 AS3 。

• C / C++ / VC++

• Java （ J2SE / J2EE / J2ME ）

倾向于招类似软件工程专业的朋友，需要有中、小型项目开发经验，对以下概念熟悉：

• 面向对象编程

• 设计模式

• C / S ， B / S 编程

 

（ 2 ）前、后台开发

 

前台必须精通：

• Ajax （ HTML / CSS / JavaScript / XML ）

后台必须精通以下至少一项：

• PHP ， MySQL

• JSP 及 J2EE 相关应用

• ASP.net ， C#.net ， MSSQL

同样倾向于有开发经验的朋友。

 

（ 3 ）美术 & 设计

 

呃 ... 这个要具体问首席设计某易了，我不负责这一块。但为服务 RIA 开发至少需要精通以下部分或全部软件：

• Photoshop 、 Illustrator 、 Fireworks 、 Flash

 

（ 4 ）市场、营销

 

这个嘛，哈哈哈，产品推广就靠谋略和胆识了。任何背景的朋友都欢迎，当然对 IT 熟悉更好。

6.11收到第一次面试通知，心或许有些激动。便立马去买了张去上海的动车票。
后来打开邮箱一看说面试临时改为上午，我一看就被擂住了，我心想哪有这么办事情啊，怎么能随便改时间呢，没有办法我只能去适应它了。

    “您好，简历已收到，通知您6月12号下午2：00来面试”
      “您好，抱歉，刚收到通知，面试时间要变更为6月12日上午10：30 ”

6.12一大早起来 查好地图方位车次后动身了，为了避免不迟到，我下火车就叫了Taxi 到了沪松区-奥林匹克花园（从上海火车站到目的地大概有23公里），途中我听司机讲这边刚刚开发不久，已经算是郊区了，看看车外就知道不如市区中心。（心里暗暗地想有点上当了）其实我根本就不知道这个公司的具体规模，只是在网上提供的信息为注资几百万，与什么香港公司一起搞的。 ps：公司名称： 上海龙铺网络科技有限公司

进去之后，前台小姐接待了我，穿着七分牛仔裤。我心里纳闷了，这个公司真有点随便了，毕竟这个是小公司。
等了些时间，负责面试的人叫我进了办公室，几句套话后，叫我拿出简历（当时自己有些措手不及，因为投递简历的时候应该看了我的简历啊，其实这点我疏忽了，以为实习哪里有这么麻烦啊），负责人说，今天是面试市场方面的人才，我当时真晕！！！我说我是来面试设计方面的实习生的，经过折腾以后就把我推到一个搞程序的人看作品了。
负责人还振振有词的说：正好我们这里缺做效果的。（我从他的话就能推出来他根本就不知道他们自己的招聘内容，而且和搞人事根本就没有衔接好。一个字这个公司管理上很勒色）。后来才得知这个所谓的网络公司就一个做网页效果的。

接着，我走进员工的工作区，大概有6-8个人左右，因为个人对品牌这个细节比较敏感，所以有意识了看了看他们工作用的显示器--结果证实“非主流”。心想：这里压根就和设计没有关系，再看看员工懒散的工作状态就知道了。

那个搞程序的折腾了半天才把我的硬盘接好，囧。

我说我主要是做交互设计和UI设计的，他们似乎都漠不关心，就只关心做网页的。我看来真是找错了地方了。

看过我的网站案例后，还满意。说等电话通知。（拜拜，终于可以离开这个地方了）

总结：个人经验不足，不了解对方公司，实习就应该找大点的公司多多学习的。对方公司管理很不好，对自己成长很不好

ps：看看他们的公司www.787977.com
      就知道了 从页面就可以看出设计水平 看域名就知道了

  从他们发布信息来看，招聘信息有多专业词汇，在面试的时候根本就没有提到过！
  很怀疑！

 

龙铺网是上海龙铺网络科技有限公司及香港一口投资控股有限公司共同筹建的，以建成国内最大，最全，最便捷的网购返利及一站式会员店消费的网站为宗旨。她力建国内领先的网购领域的垂直搜索平台，提供最全，最便利的消费，购物比价和购物返利服务，想体验一个快速发展的创业公司氛围么？想无限自由挥洒你的创意才能和灵感，实现个人人生远大理想及抱负。那我们就一起扬帆远航吧！

职位4：技术部 平面和动画设计师 5人

岗位职责：
1、配合完成网站新网页的设计工作；
2、完成网站的广告设计工作；
3、对网站的界面改善和UI优化提建议。
岗位要求：
1、人品良好，善于沟通，热心；
2、能熟练使用常用设计工具，如DW,PS,AI,CORELDRAW,FLASH等进行有创意的平面和动画设计；
3、有2年以上设计经验者优先；
4、对用户体验改善有自己独到的见解；
5、年龄，户籍，学历，性别不限；

从Snow Leopard 10A222开始，到昨天晚上安装好的10A380，一路下来体验了4，5个测试版本，每个测试版本都试用了一个月左右，总体上每个版本都在进步。
10A380差不多是发布预览版了，功能在WWDC上作了介绍，不可能再添加什么新功能了。安装完，第一眼能看到的最大变化就是默认桌面壁纸稍有改变，点点繁星更加明亮，中间的星云也鲜艳了一些。
安装后占用磁盘的空间相比Leopard小了很多，在选择了三个语言包的情况下（还安装了两个更新），占用磁盘空间8.2GB，确实能节省6GB左右的空间，很显然，这是去掉了PPC支持的结果。
开关机的速度能快不少，不过程序的启动，运行速度，跟Leopard相比感觉是快了一点，不过不明显。
跟Leopard比起来，有明显更新的功能主要是QT变更为了QuickTime X，功能强大了不少，中文输入法也做得很好了，基本可以丢掉第三方的QIM之类的输入法了，新版本中支持多点触摸板手写输入也是亮点，虽然使用的几率不大。
Finder重写了，速度上稍微快了一点，OPEN CL，MS Exchange之类的功能，普通用户可能不能直观感受，我也没具体体验，不作评论。
现在系统整体支持64位了（还不清楚CoreDuo之类的32位平台能不能安装，PPC是不用想了），带来的问题可能就是一些第三方软件，在系统发布初期的兼容性不好，需要一到两次更新升级之后才能做到稳定兼容。
总 体感觉，SnowLeopard就是Leopard的SP版（不恰当的比喻，Windows 7 也是Vista的SP版，其进步不见得比XP SP2相对SP1的进步更大）。对现在的Leopard用户来说，29美元的升级费用不高也不算低，因为大版本升级要付费是Apple的传统（微软的SP 升级方式还算厚道，至少是免费推送），而29美元没带来多少更新的功能，这个价格就要见仁见智了。
SnowLeopard为了速度的提升，只能支 持Intel平台了，这肯定让使用PPC的老用户失望，不过Apple向来喜新厌旧，对他的用户也是如此，很多做法会让老用户感到不厚道。不过还是希望 Leopard能继续更新下去，在Snow Leopard发布之后，Leopard应该继续针对PPC平台发布更新。

 

iPhone Stencil Kit

苹果的产品设计,界面设计，UI设计一向为全球用户和工业设计业内人士所瞩目，究竟在苹果公司内部进行着怎样的设计流程也令人好奇。日前在SXSW（西南偏南电影、音乐和互动媒体节）上，苹果高级工程经理Michael Lopp介绍了苹果的产品设计流程：

精细雕琢的设计原型

　　和其他公司设计师仅仅制作粗糙的模型不同，苹果设计师制造的模型精细到了每个细节。虽然这会大大增加工作量，也延长了设计完成的时间。但这一措施也避免了未来因设计模糊不清导致的麻烦。

10到3到1

　 　为任何一项新功能和新设计，苹果设计师都要制作10个截然不同的设计模型。虽然很多公司都会这么做，但大部分企业制作的7个模型只是为了让其他三个看起 来更好一些。苹果则不同，10个模型是设计师无限发挥想象力的作品，然后再大幅削减到三个可选模型，经过几个月的工作，最终确定一个最佳设计。

两线会议

　 　每周，设计团队都召开两次会议。其中一次名为“大脑风暴”，设计师可以忘记所有工程上的禁锢，放飞自己的想象力，甚至拿出“疯狂”的点子。然后，他们还 会召开一次完全独立的产品会议。这次会议上设计师和工程师齐聚一堂，解决设计中各种细节问题。这两线会议要贯穿整个开发进程。

 

 

[软件作者：张宴 本文版本：v1.1 最后修改：2008.11.06 转载请注明原文链接：http://blog.s135.com/post/373.htm]

　　两年后，APMServ再出新版本──APMServ 5.2.6，升级了各集成软件的版本，增加了Nginx、Memcached、WinSCP，以及部分Linux命令的支持。

　　软件名称：APMServ 5.2.6
　　软件作者：张宴
　　授权方式：免费软件
　　发布日期：2008年10月21日
　　运行环境：WinNT/Win2000/WinXP/Win2003
　　文件大小：20.4MB
　　官方网站：http://apmserv.s135.com
　　讨论群组：http://blog.s135.com/apmserv/bbs/
　　
　　下载地址：
　　㈠官方下载点：
　　[国内下载点①→新浪爱问CDN] http://blog.s135.com/apmserv/bin/5.2.6/sina/
　　[国外下载点①→美国微软公司] http://blog.s135.com/apmserv/bin/5.2.6/microsoft/

　　㈡合作下载点：
　　[华军软件园] [新浪网] [中国站长站] [霏凡软件站] [绿色软件联盟] [绿色下载站] [1001下载乐园] [源码网] [共享世纪]
　　[IT168下载] [搜狐下载频道] [太平洋下载中心] [木蚂蚁下载] [汉江软件园] [寻源码] [洪越源代码] [中国站长之家]

　　老版本下载>>>
　　
　　软件简介：
　 　APMServ 5.2.6 是一款拥有图形界面的快速搭建Apache 2.2.9、PHP 5.2.6、MySQL 5.1.28＆4.0.26、Nginx 0.7.19、Memcached 1.2.4、phpMyAdmin 2.11.9.2、OpenSSL、SQLite、ZendOptimizer，以及ASP、CGI、Perl网站服务器平台的绿色软件。无需安装，具有 灵活的移动性，将其拷贝到其它目录、分区或别的电脑时，均只需点击APMServ.exe中的启动按钮，即可自动进行相关设置，将Apache和 MySQL安装为系统服务并启动。APMServ集合了Apache稳定安全的优点，并拥有跟IIS一样便捷的图形管理界面，同时支持MySQL 5.0 & 4.0两个版本，虚拟主机、虚拟目录、端口更改、SMTP、上传大小限制、自动全局变量、SSL证书制作、缓存性能优化等设置，只需鼠标一点即可完成。

　　1、注意事项：APMServ程序所在路径不能含有汉字和空格。
　　2、MySQL默认用户名：root，密码为空
　　3、MySQL数据库文件存放目录：MySQL5.1\data或MySQL4.0\data
　　4、网站根目录[HTML,PHP]www\htdocs [ASP]www\asp [CGI,Perl]www\cgi-bin
　　5、访问本机请用http://127.0.0.1/或https://127.0.0.1/ (如果开启SSL)
　　6、非默认端口，网址为http://127.0.0.1:端口/或https://127.0.0.1:端口/
　　7、如果在“扩展功能”中选择使用Memcached，它的端口为：11211
　　8、APMServ集成了以下软件：

　　Apache 2.2.9 【HTTP服务器】
　　Nginx 0.7.19 【HTTP服务器】
　　NetBox 2.8 Build 4128 【HTTP服务器＋ASP脚本解释引擎】
　　PHP 5.2.6 【PHP脚本解释引擎】
　　MiniPerl 5.8 【Perl脚本解释器】
　　Memcached 1.2.4 【key-value内存缓存系统】
　　MySQL 5.1.28 【MySQL数据库服务器】
　　MySQL 4.0.26 【MySQL数据库服务器】
　　phpMyAdmin 2.11.9.2 【MySQL数据库在线管理工具】
　　eAccelerator 0.9.5.3 【PHP脚本加速引擎】
　　ZendOptimizer 3.3.3 【PHP脚本加速引擎】
　　OpenSSL 0.9.8h 【HTTPS(SSL)安全传输协议】

　　附加组件：
　　㈠Perl、CGI支持（需下载ActivePerl）：
　 　APMServ 5.2.6 附带的是MiniPerl，可以运行简单的Perl、CGI程序。如果运行复杂的Perl、CGI程序，请下载ActivePerl，安装在 APMServ所在分区根目录下的usr目录中。假如APMServ所在目录为E:\APMServ5.2.6，则将ActivePerl的安装路径选为 E:\usr
　　ActivePerl 5.8.8.819 for Windows 下载地址：[华军软件园] [中国站长站]

　　注意事项：
　　迅雷、Skype、PPLive、BT等软件启动后默认会占用80端口，导致Apache无法启动。解决方法：先关闭这些软件，启动完APMServ之后，再开启这些软件。

　　已知BUG修正：
　　1、无法启动Nginx的BUG修正方法
　　http://www.unixsns.com/space.php?uid=1&do=thread&id=51

　　使用教程（非官方）：
　　● 用APMServ一键快速搭建Apache+PHP+MySQL+Nginx+Memcached+ASP运行平台

　　软件截图：
　　㈠主界面：
　　

　　㈡虚拟主机设置界面：
　　

---

　　下载网站推荐与安全认证：

　　新浪下载栏目5星级编辑推荐与安全认证：
　　
　　

　　华军软件园4星级推荐与安全认证：
　　

　　IT168编辑4星级推荐与安全认证：
　　
　　

　　中国站长站4星级推荐与安全认证：
　　

 感谢♥YY..D2

 

 

昨日,中国电信武汉分公司表示,CDMA新号段——189号段下月投放,用户用CDMA手机上网,最高可达3M宽带,比家里用宽带上网还快!
目前,市民用手机号码上网速率不快,浏览网页、下载音乐要花费时间.随着189号段投放,加上原有133/153号段,CDMA号段纳入“互联网手机”,上网速率保持1—3M宽带.

 因 通讯运营商实施重组,中国电信向中国联通收购CDMA业务,10月1日起, CDMA业务(133/153)的运营将从中国联通转移到中国电信,武汉约有30多万户进行移交.中国电信武汉分公司投入10亿元对CDMA网进行升级改 造,新建1000个基站.本月底,C网网络语音容量从50万用户增至150万;今年内,无线网络容量95万增至265万户.

新社会BBS的图标更新升级中,未完成

我从周南到江南，从湖南到苏南，就是脱离不了一个“南”，注定我就呆在“南”这里。中学05时迎来百年校庆，当时海外侨胞都来了，当时国台办都非常关注马 英九的母亲的到来！入党积极分子，没办法要出海报，迎校庆，参比赛！在取材加工中，发现做新海诚的云的一些技巧，当然之前有看过他的背景处理教程！ 注：size：A3    SoftTools：Macbook pro ；Photoshop CS3；Illustrator CS3 time：5hs

 

感谢初夏

本文基于新海诚画集空的记忆完成

详细翻译版本会在以后放出，本文为个人整理和解释版

（Example）为原书有例子

 

简化了一些东西
第一次用FW做东西 也是我第一次进入icon
平时都在潜水看人家的东西。学习中

在这之前老是对自己说，能不能摆脱人家的教程步骤呢
因为之前有按人家的步骤做过东西，虽然效果是做出来了，但回过来想一下。
我真的掌握好了嘛！之前做网页的时候，老师老讲我不动脑筋！
现在开始悟出来一些东西，真想学东西的时候，还是必须摆脱教程的影子
吸收教程中的精髓步骤 比如一些滤镜的用法。。。这样自己才会有进步
想真正进入ui中，还是得从临摹开始····再到自己的东西

韩国无敌意淫史

Nowadays we can see icons everywhere, from a game console to web applications. Icons are getting more and more popular and play an important role, maybe the most important role in user interfaces. However, the resources about icon design are not that popular which is why when we have done our first steps in icon design, it was really hard to find a good starting point.

There were only few in-depth tutorials or books about this subject. Which is why we would like to share some (hopefully useful) tips about how to create a simple icon set. This tutorial presents of course not everything you should know about how to master icon design, but we hope that it will help you, particularly if you have just started to learn, or want to learn more about icon design.

Few weeks ago we have released the Bright! Icon Set (see the image above) which is available for free download from our web-site. This article explains the process of designing a simple pencil icon, one of the icons of the icon set. The tutorial is very detailed and in-depth, so you will hopefully be able to follow each step without any problems.

Although we consider a basic example, the principles, conceptialization and techniques from this article can easily be applied to icon design in general. Although all tools we use in this guide are very simple and very easy to work with, your acquaintance with Adobe Illustrator is still requisite.

This is the result which we’ll come up with at the end of the article. You can download the source file as well.

So how do we start? Usually before starting, we have to gather some pencil pictures on the Web and pick up the details and traits out of those pictures and mix them all to create a style for some fresh pencil icon. We always start with a hand-drawn sketch.

1. Characteristics of a pencil icon

Drawing an icon means to draw the most typical characters of an object so that it can capture the icon’s action or represent the concept and nuance.
As you might know, there are generally three kinds of pencils to select from:

1. Prism-shaped body with a shiny glaze-coated end.
2. Prism-shaped body with an eraser secured to the pencil body by a bright white metal ring.
3. Cylinder-shaped body without an eraser.

We choose the second kind for the icon design because it has all necessary elements, making it easier for the viewer to recognize the image. After trying to sketch some upon the second kind, this is the sample sketch that matches the style of the set that we have in mind.
Our favorite drawing tools are Copic Markers with 10%, 30%, 50% gray tones and a ballpoint pen. Some important things that should be followed as working on this icon:

• When an icon is designed in a large size, you need to pay close attention to details, and make sure that the two-point perspective is used. But in this article, because the icon is to be made and optimized in smaller sizes (64×64px and 48×48px), its concept should be as simple as possible, and the icon should be illustrated in one-point perspective.
• Light used in the icon must be harmonized.
• Perspective used for the icon must be identical in the iconset, making all the icons look like being in a family.
• Style should be a bit more manly-looking.
• Decisive color is green.
• Since the icon is to be saved in an EPS8 file, only gradient is used and all the paths must be connected (no open paths). It is also important to note that there is no transparent effect and no raster image invovled.

Okay, let’s get to the main part!

2. Sketches:

In our icon design sketches always come first.

We are going to scan these sketches into Illustrator.

3. Basic outline:

3.1. The pencil body

1. Create a 64 x 64px document. Drag the image (the scanned sketch) into the artboard of the new document. Go to the Transparency palette and set the image’s opacity to 50. Lock this layer and save the document. Create a new layer and start to make outlines on it.
2. Create a rounded rectangle path using the Rounded Rectangle tool and then click on the artboard to set the Corner Radius value to 10px. Click OK.





3. Choose the Selection tool (V) and click on an edge of the rounded rectangle path and drag it over and make it fit tightly on the sketched image like the picture below.

   

   • Select the round rectangle and set their color to none.
   • The eraser looks smaller than the body, so it needs to be reformed. There may be several ways to redraw the eraser like using the Pen tool (P) but from my experience they didn’t give good results.
4. Select the rounded rectangle path. Double-click on the Scale tool and check Uniform in the Scale dialog box. Set the scale value at 96%. Check Copy to create a replica as shown in the picture below.

   

5. Choose the Rectangle tool and draw a new rectangle at the position of the eraser and over the rounded rectangle path.

   

6. Choose the Add Anchor Point tool (+) and click on the central point of the rectangle path (drawn in step 5) to add one more anchor point. Next, select the Delete Anchor Point tool (-) and delete 2 anchor points.

   

7. Choose the Ellipse tool and draw an ellipse as shown below:

   

8. Select the larger rounded rectangle path and the ellipse path. Go to the Pathfinder palette and click the Divide icon. A new group appears in the Layer palette. Any divided path will belong to this group.

   

9. Go to the Layer palette and select two paths located below the new group, press Command/Ctrl + G to put them into a group and lock this group. Do that to make it easier to delete unused paths in step
10. Ungroup the group with divided paths (in step 8) by selecting the group and choosing the Ungroup command from the right-click menu.

    

11. Delete unused paths until the result is achieved as below.

    

3.2. The metal ring

Just like the steps done with the eraser, for this path we’ll use a bigger ellipse and divide the pencil body path to detach the metal ring from the body.

The shape of pencil now has been taken very basically. I think we can go into its details from this step on. What we have to do is cleaning up the pencil.

4. Details:

Create the outlines for a pencil with sharpened end by using the Rounded Rectangle tool and the Pathfinder palette. All we have to do with this path is make the pencil body in a prism shape and look being already sharpened.

1. Select the Rounded Rectangle tool and draw a new rounded rectangle path with 4pt corner radius (like in step 2B).

   

2. Make a duplicate of this rounded rectangle path by pressing “Copy and Paste in front” commands (Command/Ctrl + F )
3. Move the duplicate path to the right.

   

4. Select both rounded rectangle paths and the body path, and then divide them using the Divide option in the Pathfinder palette.
5. Select the group with divided paths and ungroup it, and then delete unused paths. The result should be like this:

   

6. Continue using the Rounded Rectangle tool to draw another rounded rectangle path, and then use the Divide option to cut the path in the middle of the pencil body to form a clear prism. Next, ungroup and unlock all the paths in Layer 2, and then change their names. See the result below.

   

   

5. Styling the Pencil:

And now we are going to give the icon some charm. The steps include:

5.1. Adding gradient

1. Select all the paths and select the Gradient tool, and then go to the Swatches palette and choose a radial black-gray-white gradient.
2. Select each path and drag the Gradient tool (G) across each of them until you see the result like the picture below:

   

3. Select all the paths and set their stroke weight to zero. The purpose is to preview the pencil in general.

   

   Well, light depicted in the pencil body looks fine, but the metal ring and the sharpened end need to be adjusted a bit.

4. Change the gradient type of this path to linear to create a new gradient as shown in the picture below. Hoping you could create the gradient like mine. In case you couldn’t make it yourself, just download the attached source file.

   

   

   

5. The metal ring path should embrace the eraser tightly. To do this, use the Add Anchor Point tool (+) and add 4 more anchor points to the two ends of the metal ring path, and then delete 2 corner points. The result look like this:

   >

6. The metal ring path also needs to be a little thicker. The easiest way is use the Offset Path command. Select the path and then go to Object>Path>Offset Path. In the Offset Path dialog box, set the offset value to -1pt or less. You may check Preview to see the result and hit OK.

   

   

   Notes:

   • Use the Offset path to make a duplicate over the metal ring path; change the gradient of the metal ring path (locating below the duplicate) to give depth.
   • Whenever the Offset path is used, the default name of the duplicate is “path”.
   • If the offset value is minus (-), the duplicate will stay upper.
7. Apply the radial black-gray-white to the metal ring path, press G and drag the Gradient tool across the path until you get the result like the picture below:
   Okay, the metal ring looks acceptable to the eye. Now let’s mess with the sharpened end or the pencil nib path.

   

8. Scale the pencil nib path so that it adjoins with the pencil body.
9. Like in the sketch, the pencil nib path here needs a highlight piece located right at its center, making up its shape. Before doing this, remember that the icon is to be saved in EPS8 format and there’s no usage of effect, no blending mode or opacity adjustment but only paths or the blendshape. To make it simpler, use the Pen tool and draw a path over the pencil nib path.

   

10. Change the direction and angle of the gradient until the pencil nib is taken shape properly.
11. Draw the pencil lead using the Pen tool.

    

12. Give a highlight piece to the eraser using the Pen tool and change the angle of the gradient to suggest the eraser shape.
13. Use the Offset path command to make a duplicate of the eraser path. Change the gradient tone of the eraser path to make its contour look sharper.

    

5.2. Tweaking the color

In this stage, we’ll put each element of the pencil into each separate group (the body, the eraser, and the sharpened end).

1. Select the pencil body paths (including 3 paths). Go to Edit > Adjust Color Balance, check Preview and Convert in the Adjust dialog box, and then switch to RGB mode.

   

2. Drag the slider to change the Red/Green/Blue values (to whatever color you like).
3. Select the eraser and do the same Step 2.
4. Select the sharpened end and change its color (do dittos).

   

   The pencil now looks flatter than it was initially. That’s because the gradient will lose the black color after adjusting the color balance. What we’re going to do next is go back to the three elements of the pencil and add the black color to their gradient so that the shapes of the elements will display clearer.

5. Grab the gradient slider and move the main color closer to the white. In the Color palette, drag that color down to the Gradient palette. Select the color just dragged (by clicking the gradient slider) and change its value to 0-0-0 (make sure the color mode is RGB). You may use the Color palette to change the gradient color.

   

6. Deeper details and style matching

After everything basic is done, switch to Pixel Preview mode from the View menu to see if the pixelation problem occurred.

We are almost done. Yet, as you see, the pencil lead looks very sharp-pointed, giving an unsafe feel. So we got to change that conical point to a frustum of a pyramid. Also, we need to add some extra paths to the pencil body as highlight pieces (using the Offset Path command). This is necessary because the outer housing of the pencil is a very shiny coating.

And the result is:

After the icon is rotated at 45-degree angle:

Well, one more thing, the pencil still looks so dark that can’t match the styleweI want to have, so we’ll make a change to its color. Just add some detail to the metal ring path by (1) duplicating the path and scale the duplicate a little bit, and then (2) make another duplicate and drag the gradient over it to make the icon more realistic.

Note: make sure both “Snap to Pixel” and “Snap to Point” have been checked after Pixel Preview mode is used.

The final outcome:

Look at the final outcome. While the light direction comes from above, the lower part of the pencil body is lighter than the upper part. Yes, it’s the reflection of light.
Many assume that it’s tough to draw icons with Illustrator due to difficulty in representing color and light. If you have a good sense of color you can change the gradient color and tone using the Color palette.

Anyway with Photoshop, you could do the following way:

1. Export your vector to a PNG, then open it in Photoshop.
   Change the color and light level of the icon image by using Curves or Color Balance or Auto Levels (from Image menu > Adjustments), or using other techniques you knew in Photoshop. After editing, save the image file.
2. Drag the edited image into Illustrator, then use the Eyedroper tool to pick up three main values of color – brightness, medium and darkness, and after every pick-up, drag the color into the Swatches palette to save.
3. Drag your chosen color into the Gradient palette to make your own nice gradients, then applied to your icon.
   I used to do that way for a while and now I’ve owned a useful library of gradients, which I always use to style my icon sets.

如果你拥有个人博客，或是facebook、igoogle、校内网的用户，你还可以到这里领取一个奥运小工具，挂在博客或主页 上，8月8日起，你将能通过这个小挂件方便快捷地到达奥运各个频道，还可以加入图平方网站创建属于自己的擂台，与朋友们同台较量，体验奥运竞技的乐趣！

 

 

尺寸：宽200px 高

300px

主要功能：奥运门户通道、新鲜事报道，图平方快捷入口

获取这个插件：

适用于各种支持嵌入式代码的网站，独立博客等。（推荐站长及博客大巴、wordpress、bo-blog、PJblog等用户使用） 复

制下面的代码到相应的html文件或模块中：

Flash文件（SWF）：

复制下面的代码到论坛或日志编辑页面

的”添加Flash”url中，即可和朋友们分享查看这个装备。

Google小工具：

如果你是igoogle用户，点击下面这个按钮，可以将“我的奥运装备”直接添加到你的iGoogle页面中。

祝福开幕式顺利!

《震动·感动》 -512抗震主题海报邀请展《震动·感动》512抗震主题海报邀请展 -视觉传达系倡动

目的：无欲无求，只是寄上江南设计人的一点哀思。
主题：关注抗震救灾，以此为主题随意创作设计。
组织：由视觉传达系发起的一次抗震赈灾活动。
邀请：诚邀视传的或不是视传的，在校的或不在校的，学设计的或不是设计的，只要想表达对遇难同胞的哀思的有心之人，即可参加。

载体：海报（90*120cm）手绘形式或者打印
时间：2008.5.23日3点前提交到设计楼a105

展出：1.先在设计学院一楼展厅悬挂展示
            2.所有作品通过无锡市红十字总会捐献给灾区博物馆收藏

注：由于这是纯粹学生自发组织的活动，如是无锡以外地区，免费帮助打印。发到邮箱：resonance0512@126.com  注明学校和联系信息·
院内同学可自行打印或者统一打印。如统一打印，费用在10-20元之间，到时另行通知。

组织倡动：江南大学 设计学院 视觉传达系 
网络支持：新社会论坛http://bbs.newdesigner.org


注：准备以设计的方式表达爱心和哀思的设计师，请回复！



去往论坛浏览此文章，参与讨论

伪界面设计
a、在PS设计伪界面
b、切片工具对整体进行合理的分割
注意点：隐藏你要通过输入的文字，分割时要保持他的整体意义，尽量让每一部分是完整的，注意一些交互上操作。
c、导成WEB格式-直接导成HTML格式—步骤:
1、.点击文件存储为WEB文件格式
2、在界面里面调整理想参数
3、导出保存PS能自动生成一些HTML代码，但是他不是很标准，你必须在Dreamweave里面进行加工
d、在Dreamweave里面进行代码加工
具体步骤：
1、先修改标题
2、修改页面属性：背景颜色、背景图片.....
3、把页面调整为布局格式（这个可以按照自己习惯来设置，有标准的表格方式，也有布局类型）
4、把要添加文字的图片转化为背景形式
　 a、找到对应图片路径
　 b、拷贝路径后删除图片
　 c、转化为标准形式
　 d、把路径粘贴到背景属性上
　 e、回到布局界面
5、添加具体文字连接设置等操作
6、CSS设置
7、修整代码，发布预览按F12即可预览效果
本文转自建站学  http://www.jzxue.com ,转载请注明出处。