SLJ.me - 申力军 » Design

15个Google为网站开发者打造的工具

SLJ — Sun, 18 Apr 2010 15:09:13 +0000

Google 的使命是 Web，在 Google 眼中，未来的一切应用都将 Web 化，一直以来，Google 为 Web 开发与设计者推出了大量免费工具，让他们更好地创建，维护，改善他们的 Web 站点，这些工具包含了开发，分析，维护，修补等等用途，本文将介绍15款这样的工具。

1. Google Chrome Developer Tools

这是 Google Chrome 中类似 Firefox Firebug 以及 Web Developer Toolbar 的一个扩展，用于调试你的网页，包含一个 DOM 探测器，一个 JavaScript 调试台，可以设置执行断点和跟踪，一个类似 YSlow 的执行分析器。
2. Webmaster Tools

一个对网站拥有者来说非常有用的程序，可以帮助你从各个角度改善自己的站点。可以发现站点中的恶意程序，发现搜索引擎爬虫遇到的错误，可以发现你的 HTML 代码中需要改进的部分。还可以帮你发现你的站点中最热门的网页，并发现你站点中的错误链接。
3. Google Web Toolkit

Google Web Tootlkit （GWT）是一个 Web 开发基础框架，为开发者提供了一些基础类库，GWT 同 Google 的其它产品，如 AdWords，FeedBurner，Google Ajax 类库等紧密集成，这里有一个 Google Docs 教程。
4. Google Code Search

帮助开发者搜索代码，支持正则表达式搜索，或在一个高级搜索界面中，很直观地搜索那些可能会让你事半功倍的公共代码。
5. Page Speed

Google 现在已经将网站加载速度算到搜索排名算法中，Page Speed 可以帮助你分析你的网站性能，基于 Google Web 性能最佳实践。
6. Browser Size

该工具帮你分析，你的网页在不同浏览器，不同浏览尺寸下的显示状况，非常适合看看自己的网页在不滚动的情况下，在各种浏览尺寸下显示到哪里。
7. Google Ajax Libraries API

Google Ajax Libraries API 包含多种流行的 JavaScript 库（目前有10种），并可以从 Google 高性能的 CDN 网络中加载，既节省了你的服务器带宽，同时，由于用户可能已经在别的网站加载过这个库，因此可以显著加快这些库的加载速度。
8. Google Website Optimizer

接着这个工具，你可以对自己的网站进行 A/B 测试，并对网站进行优化。
9. Sites

顾名思义，Google Sites 可以帮你创建一个托管的网站，可以将包括 YouTube，幻灯，Gmail 日历，Google Gear 小程序，Google Docs 一类的应用集成其中。如果将站点设置为不公开，你可以将这个工具用于个人文档工具。
10. Speed Tracer

以可视化方式，帮你分析你的 Web 程序中各种元素的加载或运行速度与实践，这里有一些关于这个工具的用例。
11. Project Hosting

这是 Google Code 项目的一部分，可以帮你托管你的开源项目，Web 开发与设计者还可以在这里找到大量现成的项目以供借鉴或套用。
12. Google App Engine

这是一个可用来托管自己的 Web 程序的地方，甚至可以使用自己的域名。这里有一个教程，讲解如何使用 Google App Engine 来创建一个留言本。Google App Engine 中已经托管了大量的 Web 程序。
13. Google Chart Tools

Google Chart Tools 可以帮助你将数据转化为图表，并嵌入自己的网页，这些图表还拥有交互功能，可以钻入，或通过鼠标盘旋获取详细信息，还可以实现动画图表。
14. Closure Tools

Closure Tools 是 Google Labs 的一个开发套件，包含3个工具，闭包编译器（一个 JavaScript 优化器），闭包函数库（用于 Ajax 程序开发）以及一个用于动态生成 HTML 的闭包模板。
15. Google Analytics

经典的 Google 流量分析统计工具。

来源：Six Revisions - The Top 15 Google Products for People Who Build Websites

iPhone网页设计欣赏与最佳实践 Showcase of Designs Optimized for iPhone

SLJ — Wed, 10 Mar 2010 10:00:44 +0000

近些年来，手机已经成为越来越流行的上网设备。iPhone的出现，使移动Web程序越来越多姿多彩，针对移动设备的网页设计，也渐渐开始成为一个重要的网页设计分支。这篇文章里，我们一起欣赏优秀的手机网页设计，其中绝大部分是针对iPhone的。

虽然iPhone的Safari浏览器已经和桌面浏览器一样强大，可以解析任何网页，但它的可视面积小的多，操作方式也有其特殊性。面对来自iPhone 可能达数百万计的流量，设计师和程序员们开始重视这一挑战 —— 他们必须在iPhone屏幕的最大范围内，使用最少的带宽，显示最漂亮的网页。

iPhone的浏览体验与普通桌面浏览器的完全不同。按钮和链接必须足够大，因为我们的手指不可能像鼠标指针一般精确。当然，制作适于iPhone的界面并不是像造火箭那么复杂的任务，我们使用相同的HTML、CSS和Javascript，而改变的仅仅是屏幕的尺寸。

在下面的展示里，我们挑选了一些有趣的、高互动性并且精致漂亮的iPhone网页设计，我们还介绍了一些方便的开发工具，来帮助你更高效的设计iPhone网页界面。

1. 新闻/娱乐类

Sevnth Sin

独特的导航菜单为这个网站增添了非凡的吸引力，绝佳的理念和设计。

Blip.tv

清新简介的版式和配色，非常契合网站的定位。

NBC

you-tube风格的设计非常便于查找和定位。

杂志架，所有操作一键搞定。

一个简单的转瓶子游戏，非常好的图像应用。

大缩略图设计，非常方便

配色方案很完善的星座网站

非常鲜亮的配色和版式，给人以冲击力和吸引力

2. 商业/企业

DPTO

个性的红色界面和新颖的3D导航，增添了无限魅力

Mind Medium Creative

特殊的光泽设计，非常有质感

Redhawk Investment Advisors

非常有商业气息，不错的色彩应用

充分体现动感和活力的Nike网站

信息比较丰富，但空隙太大了些

非常舒适的设计，让人不禁像进去睡个觉。

蓝色的背景、恰到好处的空隙和圆角，让这个网页非常舒适和引人注目

Batali Associates

不常见的布局版式，非常适合iPhone

Ready For iPhone

一个专门提供iPhone网站解决方案的公司，“go”上的手型图标让人忍不住就去点点。

Element Fusion

另一个提供解决方案的公司

Volkswagon

车型相册，导航非常人性化

3. 购物/电子商务

Torn Robes

简洁漂亮的手机购物站点，购物流程非常舒适

Coosh

独立产品的宣传网站，非常漂亮

Walmart

非常容易找到想要的商品，并且可以生成自己的商品订单列表

4. 个人展示/博客

World Ending Blog (Japanese)

比较好的阅读体验

Signal Element

只有三个页面的网站，但是设计感非常强

One Crimson Splash

配色与构图非常完美

5. 教育/资讯

MIT

简约，简洁，便于使用

101 Cook Books

虽然没有复杂的设计，但内容整齐，便于阅读

Please Fix The iPhone

1881

电话黄页站点，非常清晰易读。

AOL Food

爱厨人士必备

Deviant Art

艺术展示站点，配色非常富于文化气息，且清晰易读

最后的不一定是最重要的，送给大家一句格言：

He who laughs at himself never runs out of things to laugh at. (大意可能是：学会取笑自己的无知，你就永不缺可以笑的题材。 …)

iPhone网页设计工具

下面一些工具可以帮助你把网页快速“iPhone化”。

iPhoney
iPhoney是一个基于Safari的iPhone网页测试环境，可以用来测试开发iPhone网站。这是个非常好的工具，你可以看到网页在iPhone上呈现的样子。
Test iPhone
基于web浏览器的模拟器，可以快速测试你的iPhone网页
iWebKit (Demo)
iWebKit 是一个文件包，用来帮你建立适用于iPhone和iPod touch的网页和应用程序。里边包含了一些可用的模板。
iUI
iUI 是个包含Javascript、CSS和图片的前端框架，为你准备好了iPhone网页的一些标准样式和特效。
Intersquash (Demo)
这不是个设计工具，它可以帮助你建立适用于iPohne的RSS Feed。
WPtouch
WordPress的iPhone化模板
Jaipho Gallery (Demo)
如果你的网站有相册，那这个工具可以提供针对iPhone的优化。

关于作者

作者：Adeel Raza

原文：Showcase of Designs Optimized for iPhone

[转] UED,UXD在中国

SLJ — Sat, 06 Mar 2010 07:33:24 +0000

UED全称User Experience Design，中文叫“用户体验设计”。
UXD全称User eXperience Design，中文叫“用户体验设计”。

显然这两个词还是一回事情，但要比UE迟的多。最早我在2005年底从Yahoo那边了解的，大概2006年听到同行普遍提起，同年9月份“淘宝UED”团队博客建立之后，才被大家熟知。但中国互联网公司最早成立部门研究“用户体验”的不是淘宝，而是百度，当时就叫“用户体验部”，后来才被同化的UED。大概在2005年已经有30人左右成型的团队（用户体验部总监郭宇，于2004年11月加入百度）。

首先UED这个词来自海外，但在海外除Yahoo很少有公司提起。如前文所述，老外并不习惯叫UE，所以理论上描述“用户体验设计”的缩写不应该是UED，而是UXD。确实也有UXD的说法，但只偶尔在某些海外网站上见到，同行心目中的认知程度不高。

再仔细推敲，其实不难发现，UED这个词有误。因为“用户体验设计”的说法本身有问题，UE并不能通过Design完全解决，通常Design涉及的只是UE比较表层的Experience需求。事实上，海外公司普遍都叫“UX团队”，也没有“UED团队”的说法。

而UED来到中国后，反而成为主流论调，得到广大公司的认可。可见与UE类似，UED也具有很浓的本地化色彩。在进入用户体验执行层面之后，很多同行/公司的第一反应，是要有这样的一个人，或者有这样的一个团队。因此才有了“UE工程师、UE设计师”和“UED部门”类似的称谓。

早期UED部门设立的职能职位主要有用户研究、交互设计、视觉设计，慢慢后来加入前端开发、界面设计等，某些甚至把产品经理也划入其内。具体叫法五花八门、千奇百怪。有个重要差异值得探讨，关于“工程师、设计师”的区别，根据理论推敲，既然UE是个非理性话题，不似Usability那样有逻辑可以遵循，有标准可以执行，所以我认为偏重“感性”的用户体验应该更靠近“设计”。

当然，以现在的成熟观点来看，不管叫“UE设计师”还是“UE工程师”都是不合适的，因为本身用户体验设计就不应该是一个人或一个部门的工作，而良好用户体验是产品的全方位目标。从执行层面看，用“概念”来命名职位（如可用性工程师），明确职能（如产品部门、用户体验设计部门并存），都不利于团队协作，容易造成责权不分，具体我在2008年6月所写用户体验的误解中大概清晰了执行思路。

http://mashable.com/2009/01/09/user-experience-design/

User experience isn’t just the responsibility of a department or a person, That compartmentalist view of UX is evidence that it is not part of the organizational culture and hints to teams not having a common goal or vision for the experience they should deliver collectively.

有趣的现象，几乎国内所有公司组建的“用户体验设计团队”都叫UED，并且已经形成固定用语，比如淘宝UED。只腾讯有个用户研究与体验设计中心(Customer Research & User Experience Design Center)，简称叫CDC。

2008年之后，应该说业内UED发展达到高峰，互联网一线公司基本都组建了自己的UED团队。除淘宝外，阿里系公司先后还有阿里巴巴UED、阿里妈妈UED、阿里软件UED、支付宝UED、中国雅虎UED、口碑UED。业内其他还有百度UED、搜狐UED、网易UED、携程UED、金蝶友商网UED等等，都在互联网上有网站（绝大多数就是个blog）宣传和公关。大有成为互联网公司标准配置的趋势，从业者也以能进入这样的“专业团队”为荣。

我更倾向于腾讯CDC这样以专业研究机构名义的命名，如此更利于用户体验“理念”的推广，而不会造成部门之间的“隔绝”。事实也证明，成立“用户体验设计”部门走业务流程，自下而上推动产品质量提升的效果并不明显。容易给其他同事造成“做用户体验是那帮人的事”的错觉。

以大家喜闻乐见的Google为例子，2005年7月Google在中国设立研发中心，也相继设置了用户体验部门。与当时的百度一样，不叫UED，而且执行体系沿袭Google风格，基于产品而不是部门（注意此区别），一般由PM+Developer+Designer组合的小团队共同向产品负责，有时会有Researcher介入。产品组同事各有所长，展开平级协作，由整个团队来推动用户体验设计。

归根结底，体制决定一切。如今类似小团队跨部门的协作方式已被国内互联网公司积极学习，并且取得了良好效果。在执行框架内，如果UED脱离产品进行盲目细分，堕落成为用户研究+交互设计+视觉设计+前端开发，我认为将很不利于产品的创新、迭代、改进。

原文：UED,UXD在中国

[原创]多选/全选checkbox，AJAX提交。另附IE的onchange BUG

SLJ — Sat, 06 Mar 2010 06:50:17 +0000

最近在为MeePlace 2.7的后台编写多选功能。在一个接一个的版本中，MeePlace的后台是越来越强大了（不够谦虚，hoho），后台采用纯ajax异步（有的时候觉得编程会有点麻烦，但是从1.0开始就是这样的后台，现在要改的话也麻烦，况且AJAX能给用户带来更好的体验，就继续开发吧：D）

这次后台增加的功能中，有一个是能够多选/全选项目，这个已经是历史遗留问题了，在我所有开发的项目中都是用这套自己开发的后台系统，改一改就成。这次布莱恩吧multi-selectable列在了Milestone里，所以就写了。以前有做过多选，不过由于是原始form的post，所以比较简单。这次用AJAX的后台多选操作，我还是想了一下才开始动手的。

我的想法是，通过遍历checkbox，来得到有被选定了的checkbox的value，然后再传给后端进行多选处理。

下面公开MeePlace的这部分代码。

全选按钮。用户点击全选的那个checkbox后，checkbox的onclick=”select_item_all(this,”allitem”,”childitem”)”
其中”allitem”是全选的checkbox的classname，因为也许这个全选会出现两个，或者更多，比如表头和表尾各一。
“childitem”是所有的条目前的checkbox的classname。
JS代码：

//全选按钮
function select_item_all(whochecked,allitem,childitem)
{
 if(whochecked==true)
 {
  $('.'+allitem).attr('checked',true);
  $('.'+childitem).attr('checked',true);
  $('.itemtr').addClass('trselected');
 }
 else
 {
  $('.'+allitem).attr('checked',false);
  $('.'+childitem).attr('checked',false);
  $('.itemtr').removeClass('trselected');
 }
}

这样通过判断提交全选的checkbox是否被勾选，来达到全选目的。

下面的代码是点击”Delete selected”（“删除所选”）之后，扫描所选中的checkbox的value以及发出警告和异步提交的代码
JS代码：

function delselected(sheet,where,childitem)
{
//通过扫描制定childitem（项目前的checkbox的classname），来获取选中了的项目IDs
   var selected_ids='';
   var obj=$("input:checked[class='"+childitem+"']");
    $.each(obj, function(i,item){
       selected_ids+= $(item).val() +',';
     });  

if(selected_ids)
{
 var a=confirm("CAUTION! You are going to delete a quantity of items.\n\rThese items will never be restored after deleted.\n\rSure to delete these items?");
if(a==0) return ;
}
else   //没有发现选中的checkbox
{
 alert('You have not selected any item.');
 return;
}

 //通过jQuery的$.post来异步提交数据
$.post("/mgt/func/delete.php?"+Math.random(), {
sheet:sheet,
where:where,
equal:selected_ids
},function(data){tips('Items deleted.');nav();});

}

对应 delete.php的代码，虽然代码不安全，能够直接注入的样子，直接操作数据库。但是出于是后台的代码，而且MeePlace对SESSION的检验非常严格，所以就这么用了，我想没有一个Admin想用自己的Admin权限黑自己的网站的。LOL
PHP代码：

//检查_SESSION

//自己的数据库连接，或者是框架的数据库接口

///传递过来的值，equals是所选ID经过explode()函数之后得出的数组
$sheet=$_REQUEST[sheet]; //
$where=$_REQUEST[where]; //
$equal=$_REQUEST[equal]; //

$equals = explode(“,”, $equal);
/// 循环删除数据库中的制定条目
$i=0;
while($i if($equals[$i]){
$query="delete from `$sheet` where `$where`= '$equals[$i]' limit 1";
$rc=mysql_query("$query") or die("ERROR: $query");
$output.=$query."\n\r";
}
$i++;
}

另外如果你想通过checkbox的onchange来调用全选函数的话，结果是：IE不支持！最后只好使用onclick来实现了。这个也是历史遗留问题。算是IE的一个不愿解决的BUG

Ajax Loading 在线图片生成

SLJ — Mon, 28 Dec 2009 02:29:35 +0000

最近在做 YelpClone 的 Theme 定制服务，边做边学很多。

有两个网站拿出来分享一下，一直忘了分享，也许是域名太好记了。呵呵

Ajaxload.info 本人比较喜欢这个

Load Info

Preloaders

极简主义网站设计:寓丰富于简单

SLJ — Wed, 09 Dec 2009 13:23:47 +0000

作为设计师，我们都知道，一个极简的设计可以实现漂亮的效果。

然而，很多设计师在实现上有些麻烦：要么是没有时间让使用如此少的元素制作的页面看起来漂亮，要么就是最终的结果只是看起来“不完美”。

网上有很多关于极简主义设计的文章，而本文的目的是帮你实现一个漂亮而不空洞的极简网站设计

最重要的是，我们将展示一个小的极简网站设计画廊，这样你就可以分析为什么一些设计可以而其它的则不可以。

什么是极简主义设计

极简主义设计已经被描述为最基本的设计，剔除了多余的元素、色彩、形状和纹理。

它的目的是使内容被突出出来并成为焦点。从一个视觉的角度来说，极简主义设计意味着平静和将思想带回本真。

这个设计运动始于瑞士，然后被用于多种媒体：图形设计、建筑、音乐、文学、绘画以及最近的网页设计。(拓展阅读维基百科：极简主义)

尽管极简主义已经有几十年了，早期的互联网并没有能够展示它。即便除了旋转的logo、滚动和鲜艳的色彩之外，网站设计依然常常是杂乱和咄咄逼人的。

我们将在本文中讨论极简网站设计的基本原理。但是即便你选择不去追求极简主义的审美，本文也能帮你简化你的设计，无论你是哪种风格。

越简单越丰富

正如提到的，极简主义将最重要的内容带到最前面并为用户避免分散注意力。如果一个页面有太多的元素，浏览者将迷惑于去看哪里或误解每个元素的优先级。一个极简主义设计将焦点正好放到正确的内容上。

比如，在一个黑白设计上的任何色斑，都会引起用户的注意力。色彩本身也将成为焦点。让我们来看一个具体的例子：

之前你或许已经见到此类设计：纯白背景，一个内容块和一个图形元素。

图形元素使用色彩、纹理和形状。很明显这是页面中最重要的元素，而且它代表了设计师的品牌和个性。

因为这个特殊的图形元素的复杂性，该页面中的更多内容会让它不太醒目，显得不太重要。保持内容到最小，设计师就实现了完美的平衡。

如何简化内容

实现极简设计或者简化设计的第一步，不是简单的去掉大部分图片，而是要重新考虑内容并将其简化到无遮盖的需求。只有那样才能让页面中最重要的元素实现其预期的效果。

就像你策划任何其它网站一样，写下你需要的内容：logo、介绍、导航等等。去掉其它一切不需要的东东。尽可能的丢掉它们。

下面是一些你可能不需要的元素。请注意这仅仅是一个指导。你的确切的需求将依赖于你的具体设计。下面的一些元素对你的网站来说可能不是必须的。

社区媒体的图标或图形，或者社区媒体部分
宣传员和补充说明或介绍
“推荐,” “流行”和“最新”列表(包括Twitter和RSS订阅列表)
多于3个主要部分的页面(比如“介绍” “关于”和“服务”)
次级导航页面

这里的关键并非让网站有较少的功能，而是去掉不是必要的元素(从而强调必须的元素)或将多个部分整合到一个更简单的布局(比如，通过合并你的社区媒体链接到“关于”或介绍性部分)。

你也可以分割内容到独立的页面，给予内容的每个部分更多关注。

如何简化设计

现在轮到尽可能的简化设计了。

简约设计应该有较少的纹理、色彩、形状、线条、内容或排版。然而，如果太直白，设计将会空洞。与其丢掉所有东西，不如通过给焦点添加一个重要的特征来给设计一些感染力。

选择焦点可能的样式，并在你的设计过程中注意一下下面提到的技巧。

使用一个很棒的线框

通过理论下面的展示，我们看到一些设计师通过微妙的色彩填充、独特布局或有趣的图形添加一些视觉趣味。然而，或许他们所依赖的最重要的元素，就是一个独特的线框。

为这样的网页创建一个线框需要一些额外的注意事项。通过正确的线框，你可以实现正确的层级和组织以及创建正确的视觉趣味。

要启动一个线框，请按照以下步骤：

确定你绝对需要的内容
在一个列表里面，区分内容的优先级
给予你的列表绘制线框的草图以实验最佳的视觉层级

当作出了线框之后，考虑一下布置以及视觉上的处理方法。譬如，你的logo使用了一种在其它地方不再重用的颜色，你必须说明原因。

扩展阅读：从线框图到最终设计

空白

空白实际上同义与极简主义。

无论你的设计多么有创意，一个缺少大量空白的极简主义设计不是一个真正的极简主义设计。这样，一定要在元素周围比你平时添加更多的空白。

空白对平衡即将出现在页面中的少量元素是必要的。

平衡、对齐、对比

虽然大部分的布局可以通过空白和良好的线框实现，还是要特别注意一下设计的基本原则。与极简设计相关的三个最重要的因素是平衡、对齐和对比。

要确保您的设计遵循这些原则，但并不需要一个补充的视觉辅助以看起来“完成”了。

请同时注意其它基本设计原理。回检它们并实验不同的选择来实现最佳的效果。查看 “设计的原理”以获取更多参考。

当过度设计成为一个习惯

过度设计有时会成为一种习惯。无论你多么艰难的尝试将一个设计保持简单，它最终变得凌乱和复杂。要修正这一点，我们必须养成新的习惯。

试着在每个项目之前回顾上面的技巧并让它们贯穿整个设计流程。每次集中精力开发一个习惯。比如，努力在将内容放到空白上之前减少和简化它们。

如果您发现自己左右为难，“有什么遗漏了”，可以先试着把东西拿出来，而不是加入一些新的东西。

极简主义的每一个方面，需要不同的天赋。你将这些原理实践的越多，你的设计就将变得越简单。

另外，一旦你使用了这里讨论到的技术，看一下最终的产品并查看一下你是否能找到更进一步简化这个结果的方法。

你可以专注于在设计过程中你不能确定的区域，而且你也可以向其他设计师询问以指出你可能遗漏的元素。

极简网站设计欣赏

下面是一个极简主义网站设计的简要展示。看一下我们讨论的原理是如何实现的。同样也可以看一下哪个打破了我们的指南，并思考它们为什么还可行。

1. James Day Photo

2. Killswitch Collective

3. Lonely

4. DBushell

5. XPD.no

6. Toy NY

7. Joshua Serbus

8. Ah-Studio

9. Symour Powell

10. Icon Werk

11. Neil Wilson Architects

12. Non-Format

13. Zaum

14. Checkland Kindlysides

15. Blumenthal

16. Tink London

17. Proud Creative

18. Kimag

19. Bernat Fortet

20. All Day

一些趋势

正如你能看到的，极简主义网站设计也有一些清晰的趋势。了解这些趋势有助于在多个方面增强我们的设计。

我们应不仅仅能从其它设计师创造的布局中获得灵感，还要能有意识地打破这些趋势以形成我们自己的创造性的方法。

接下来让我们讨论一下一些趋势。

黑白设计

最值得注意的趋势之一就是黑白色彩的广泛应用。这是很明显的：除纹理、形状和内容以外，色彩也是应该被简化的。但最近它可以做过头，就显得有点沉闷。

看一下上面展示的一些确定色彩的网站，看一下它们是如何从其它极简网站中被突出出来的。同样，思考一下即便是在如此强烈的色彩使用下它们是如何能够保持极简的。这里是一个例子：

有趣的排版

基于排版网站设计和极简主义紧密的联系到一起。

当设计师乏于用别的方法激发用户，他们往往会利用有趣的排版。用排版作为唯一的视觉元素你甚至可以走得更远。

这是一个大胆的技术，但本身仍然是一个趋势。寻找保持独特的同时让排版增强设计的方法。

Flash

一个惊人数量的极简主义网站设计是基于Flash的。通过这么少的视觉刺激，一个设计可以从微妙的动画获益而不用被压倒。

同时，Flash移除了设计流程中的某些限制。非传统的线框、排版和其它元素可以比传统方法更容易的实现。

结束

极简主义网站设计出现多种形式，可是我们常常看到相同的形式重复了。趋势可以变得咄咄逼人，而我们在理解一个趋势可行的同时必须与模仿的冲动做斗争

无论如何，极简主义可以是很漂亮的而且将会在未来几年内出现，所以学习它的一些技术会不能相信的有益，无论对你的客户或你自己的项目。

但是如果你对极简主义风格不感兴趣，这个教程和难懂的原理可以帮你简化你的设计，总之这是件好事情。

翻译转载：极简主义网站设计:寓丰富于简单
英文原版：Minimalist Web Design: When Less is More

免费的Photoshop高分辨率笔刷

SLJ — Sat, 07 Nov 2009 02:52:29 +0000

在寻找一个新系列的超级高分辨率Photoshop笔刷来丰富你的收藏吗？好吧，你找对地方了！来看看这一系列的笔刷，他们全是2500px大小的大笔刷，包含全部的细节，供你在你的下一个设计中大显身手

下载免费的Photoshop笔刷
7.3mb | 1 x ABR (CS4)

Photoshop制作海洋蓝水晶字体

SLJ — Sun, 01 Nov 2009 08:17:43 +0000

在本教程中，大家将学习如何使用Photoshop在短短几分钟内再现著名的Aqua墙纸。这其实很简单的！（其实就是个字体教程）

photoshop制作海洋蓝水晶字体

创建一个新文件（文件>新建），分辨率为1920×1200px /72 dpi。然后选择油漆桶工具（G），用蓝色填充我们的第一层。颜色代码#17CBFF。

现在选择画笔工具（B），应用如下参数：不透明度30%，颜色代码#0499E6。

在蓝色背景的侧面涂抹（如下图）。

……还有底边。

使用水平文字工具（T），输入单词‘aqua’（由单独的字母组成）。字母的参数都如下图，除了Q：

字母Q的参数。

把字母放置在如下图所示的位置上：

选中图层面板中的字母层，按Shift键点击层。然后按Ctrl + J，选中的层将被复制。使用移动工具（V）往下移动它们，改变它们的颜色为#084DA2：

现在在混合选项中对每个字母使用外发光（参数如下）：

这就是你目前得到的结果：

现在选择下一个混合选项，对所有字母使用内阴影，除了最后一个字母。

混合选项——外发光：

混合选项——内发光：

混合选项——渐变叠加：

渐变设置：

这个字母的颜色变成了一种微妙的海洋蓝的感觉~

最后这个字母与其他几个字母所有的参数相同，再加上下图这个混合选项：光泽。

你会在图片上看到最后一个字母比其他的字母暗一些。

在新的图层上，我们将创建字母的阴影。每个字母的画笔参数是相同的。

使用椭圆工具（U），按照下图画一个椭圆：

填充参数如下：

……混合选项——内阴影的参数：

做完之后的效果如下：

继续在同一图层上工作。按Ctrl+左击字母图层标记第一个字母。当字母被选中时，按图层蒙版键：

最后，我们只在必要的区域上强调了亮光。

对其他字母做同样的步骤。

在最后阶段，我们将画上升的气泡。我们将选择椭圆工具（U）描绘一个圆圈。

图层填充0%，然后设置混合选项如下：

我们得到了一个透明的球体。

在里面画另一个圆形，同样图层填充0%

设置混合选项如下：

我们得到了一个上升的气泡。

然后复制我们所做的气泡，并改变其大小（按Ctrl+T）和位置，如下图：

点击放大

用Photoshop创建一个iPhone程序销售页面

SLJ — Mon, 26 Oct 2009 13:27:17 +0000

最终图像预览

点击下图查看大图

转载自： http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-promotional-iphone-app-site-in-photoshop/

想看这个作品是如何被构思的吗？请看关联资源：http://vector.tutsplus.com/tutorials/web-design/build-a-promotional-iphone-app-website-wireframe-in-fireworks/

Step 1 – Document Setup 第一步：文档设置：

Grab the “wireframe_final.psd” we exported in our last tutorial in this series (Build a Promotional iPhone App Website Wireframe in Fireworks). Rename this file to “final.psd,” or your preferred name.

Notice below how the imported file opens fairly well in Photoshop. There is an issue with the text boxes being longer than the document though (second image below, notice how the box is long and continues past the bottom of the document). I don’t know a quick way to fix this. It’s a peculiarity I mentioned in the last tutorial. If anyone knows a good fix, definitely let me know. So, go through and copy the text of each element, then recreate a new text box and paste the text back in place, or just leave it as is.

Also, go ahead and delete the “Notes” folder as well, as we don’t need the notes here.

Step 2 – First Dominant Visual Element

I often like to work on the dominant (and more important) visual elements of the design first, and then build from there. So, let’s get started with the “promotion” area.

We’re going to add an aurora illustration to the background here. Ian Yates wrote an awesome Illustrator tutorial on Making an Aurora Borealis Vector Sky in Illustrator. There are a few benefits to using a vector graphic here. One is that it stylistically stands out with a unique look. Also, we can use it for other sized branding areas as well.

After completing the aurora borealis vector tutorial go ahead and import your unique result into Photoshop. You can see that the only change I made was flipping the design. You should of course create your own for your work. I pasted the illustration in as Pixels because I don’t need to make any changes to the vector source file after bringing it in, so no need to use a Smart Object.

Now drag the vector mask from our promotional background shape onto our aurora borealis design.

This will apply the vector mask as shown below, just make sure it lines up as you want it.

Step 3 – Adding an iPhone Image

There is spectacular freebie of an iPhone image with lots of iPhone GUI graphics. Go ahead and download the iPhone GUI PSD 3.0. Open the file and drag the iPhone image into your working document. Then scale it and line it up with the guides as shown in the second image below. Be sure to grab the image as shown. The only screen component grabbed other than the phone is a transparent angled screen glare.

Now we’ll add the aurora borealis illustration to the iPhone. This just makes the design look a little more interesting. In the final website a video file would look good here, which shows the app in action though. Bring in another copy of the aurora borealis illustration. You can bring in a smaller version of it this time, as we’re filling a smaller space. Paste it in as Pixels again.

Now with the illustration placed over the iPhone in the position you want it in, and the illustration selected, go to Layer > Vector Mask > Reveal All. Then grab the Rectangle Tool (U), make sure it’s set to Paths in the top-left corner, and draw your screen. If you don’t get it the exact size you need the first time, then hit Command + T and resize the rectangle vector mask as needed.

Be sure to keep your layers organized as we continue to build this design.

Step 4 – Working on Our Color Scheme

We just added two dominant elements on the page. Also, the aurora illustration we added is a great source to grab some color from to make this page’s color scheme. Go ahead and double-click on the default “Background” layer to unlock it, name it “background,” and place it in a new “background” folder.

Grab the Paint Bucket Tool (G), then change the Foreground Color to a dark bluish-gray (#536475), which I selected from the illustration. Now change the primary navigation background located in the “header” folder a dark blue (#212b3f), which was also sampled from the illustration. Give the “bottom” area background the same dark blue color for the background.

We’ll also change the color of some of our navigation buttons at this point as well. The image below shows where we’re at so far in this design. Change the primary navigation button background colors to a slightly lighter grayish-blue (#5e7285) than the page background, except for the current page button. We want to give the current page button the impression of being pressed in. So, make it the same color as the page (#536475). We’ll enhance this greatly a little later in the tutorial when we add styling.

In the “secondary_nav” area select the larger background behind the Aurora icon and change it’s color to a grayish-blue (#475665) that is slightly darker than the page background. Again, we’re going to make this look indented. Also, go ahead and use the same lighter grayish-blue (#5e7285) as the primary navigation buttons on the footer buttons.

Step 5 – Changing Our Text Color and Basic Styles

You can see how going dark with our page design makes it painfully obvious that it’s time to work on the text colors. We designed the text mostly with dark on light for the wireframe, but now we need to go to light on dark. Change most of your text to white. I’ll point out the few exceptions below. Also, clean up any text, reposition elements, and experiment with font weight as you go through this.

I’m setting some of the text in Myriad Pro, though in areas that will be coded and not images I often used Helvetica for this design, which is ubiquitous on computer systems. I also used Helvetica for some areas that I wanted to have a slightly different look than the Myriad Pro being used. I set the Aurora name in Futura Condensed Extra Bold where it was to be used for branding.

You can see the text in most of the “header,” “secondary_nav,” “promotion,” and “body” is white. A few exceptions are the logo area (which will is just a placeholder for now), the “Aurora App” text that is dark blue (#131828) to help it stand out, and the headings for the body that are the same dark blue.

We also need to work on the “bottom” section text as well. I set all the headings in Myriad Pro Bold at 20pt. The color is a bright baby blue (#85a1bc). I used that same blue for the text links. I set the rest of the text in white using a smaller Helvetica Bold.

The “footer” has just a couple color changes. The links were changed to an even brighter baby blue (#97b8d8), except for the active link which is white and underlined. The copyright text is 12pt Helvetica and darkish blue (#212b3f).

Step 6 – Bringing in the Logo Design

First, take a screenshot of our PSD file of the area we’ll be placing the logo into (with the logo placeholder text turned off). Fire up Illustrator. Place the screenshot on it’s own layer and lock it. I also turned off the artboard visibility (Shift + Command + H). Now create a layer for your logo and insert the text “iLoveMyApps,” which is serving as the company’s name for this tutorial. Set the text in Cooper Std Black Italic at 30pt, and give it a white fill, as shown below. Now with the text selected, go to Text > Create Outlines, then ungroup the text (Shift + Command + G). Also, delete the “o,” as we’ll be replacing that with a heart.

Now let’s work on the heart shape. First, turn on the grid (Command + “) and turn on Snap to Grid (Shift + Command + “), which will allow you to draw the shape easily. Go ahead and create a half heart shape with the Pen Tool. Now go to Object > Transform > Reflect and apply a Copy with the settings shown below. Now line up the inner edge of both half heart shapes, then in the Pathfinder palette click on Merge, which gives us a final heart shape.

Now scale the heart shape down and place it as shown. Also, work on spacing out each letter of the text until it looks right to you. I wanted the entire text to appear as one, but I spaced each word out just a bit to increase legibility. It still reads as one word though. Now copy and paste the final logo as a Smart Object into Photoshop.

Step 7 – Starting to Add Style To Our Design

We’ll continue to work our way down from top to bottom, but keep in mind that as you’re designing you may bounce around more to various areas of the design, and experiment with different looks and styles, which is great and feel free to do that.

Within the “header” section, select the background, then apply the layer styles shown below. This gives the top of the body area a small highlight and a subtle shadow is cast on the header area, which pushes it back a bit.

Now apply the styles shown below to our logo. For the gradient overlay the gradient goes from gray (#c0c4c9) to light gray (#e3e5e7).

Step 8 – Adding Style to Our Primary Navigation

First we’ll work on the non-active primary link background styles, which means all except for the “Apps” link. Apply the styles shown below and use colors that look right to you. Note: I got lot’s of inspiration from the Meta Lab site for this part of the design. I love the work done by this company, check out their folio while you’re there.

It’s always important to imagine where the light source is in your design. We’re applying some subtle lighting effects, which will give this design a modern feel, though we still need to keep the light source in mind.

Imagine that there is a light source coming from the top of the page shooting straight down, which is giving us the light direction for many of the styles we’ll be adding. Of course you can imagine more than one light source, and you can deviate from this somewhat, but keeping the light primary light source in mind will help to make the styles you apply make sense and work together visually.

Now apply the styles shown below to the “Apps” link background, which is our active link and will make it look like it is pressed down.

Now apply the following Bevel and Emboss style to the text within the primary navigation to make it stand out a bit. The effect on the text is subtle, but noticeable.

Step 9 – Applying Style to Our Secondary Navigation

First of all let’s add our iPhone app icons. For the main Aurora icon, use the same aurora illustration as used in the promotional area. Drag the vector mask that is applied as a gray square currently, onto a scaled down version of the aurora illustration, refer to Step 2 on how to do that. Now let’s add some style here. Add the following layer styles to the icon.

Apply the same styles to the outer icon background as we did to the “Apps” background button in Step 7. Control-click on the layer thumbnail of the “Apps” button background and select Copy Layer Styles. Then select the outer background, Control-click its layer thumbnail and choose Paste Layer Style, as shown below.

Step 10 – Applying Style to Our Secondary Navigation Continued

Now we’re going to add some style to our other application icons. These are just place holders to show the client where other icons would go. So I want to give them a similar look as the Aurora icon, but not make them stand out much. So, let’s start by filling them with a pattern. First we’ll make the pattern.

Open a 4px by 4px new document set up for the web. Grab the Pencil Tool, set the brush size to 1px and paint four rectangles as shown below. The darkest rectangle is #05020a and the lightest is #251440 this color. Hit Command + A to select All, then go to Edit > Define Pattern and name it “Purple Rain.” Yes I did where a shirt with this pattern on it in the eighties back in grade school.

Select the first placeholder icon. Notice how it is a shape layer currently. We need to rasterize that. So go to Layer > Rasterize > Fill Content, which keeps our vector mask in place, but rasterizes the fill. Notice the result is a rasterized layer with a vector mask applied to it – quick and simple. Go through and do this for each placeholder icon.

Grab the Paint Bucket Tool (G), and in the top-left corner choose Pattern from the drop down, make sure our “Purple Rain” pattern is selected, then click once on each placeholder icon to apply the pattern. Now Control-click on the Aurora icon thumbnail and copy the layer style, then paste it onto each placeholder application icon. Also, adjust the spacing of the application names to make room for the styles.

Let’s also adjust our default app store placeholder button over on the right of this section. A simple way to make this button blend in better to our design is to change the background color. Go to Image > Adjustments > Hue/Saturation and apply the settings shown below, or those of your choice.

Step 11 – Applying Style to Our Promotional Area

Let’s start with the background and buttons. First we’ll apply style to our large background area. Select the aurora illustration and apply the following layer styles. This gives us a highlight at the top and a stroke around the area.

Now apply the same styles to the top-right price area background, but also add the styles shown below. The colors used for the purple gradient overlay are sampled from the aurora graphic. The colors of the gradient go from purple (#68448f) to darker purple (#320580) and then back to a mid purple hue (#65428c).

Apply the same layer styles to our main “Light Up Your iPhone” heading, as we did in Step 7. You can copy and paste the layer style from there. Apply the same Bevel and Emboss style to the price text and the sub heading, as we applied to the primary navigation text in Step 7. You may want to change the Opacity of the Highlight Mode or Shadow Mode for the shading though, experiment with what looks best to you. Also, select the horizontal rule, which is a 1px high shape, and change it’s color to black. Also, apply the settings shown below to it.

Step 12 – Applying Style to Our Main Call to Action Button

Now apply the following layer styles to our main call to action button. We’ve placed a drop shadow on this so that it stands out from the background more. It has a bright color, which will attract attention. It’s placement also attracts attention. The gradient overlay has similar colors to the one used for the price background, but it only has two colors applied instead, which go from purple (#68448f) to dark purple (#320580). We’ll add an arrow in just a moment to make it stand out more as well.

Now grab the Ellipse Tool (U), and use it to create a shape layer as shown below. The color doesn’t matter because the styles will overlay it anyway. Rearrange the button text to look balanced with the added element. We’ll be using this circle to place a download arrow inside shortly. Apply the following layer styles to the button (the colors in the gradient overlay go from #9cc67e to #3a4f66).

Now we’ll create our arrow, place it into Photoshop, and style it.

Open Illustrator and create a web document. Turn on View > Show Grid and View > Snap to Grid. Use the Pen Tool to draw an arrow utilizing the grid. The size doesn’t matter. Now resize it to a shape that is about the size of the larger arrow shown below. Now go to Effect > Style > Round Corners and apply with a Radius of 0.139 in. Now copy the arrow and paste as a Vector Smart Object in Photoshop. Note: I’m using black below for demonstration purposes, but the arrow should be white.

Now apply the same styles to the arrow as we did our logo in Step 7 and scale to fit the space. The result is shown in the second image below.

Here’s what we have so far. The top section is looking good. Now let’s move onto the body next. We’ve got the bulk of the site styled now. It will be smooth sailing from here.

Step 13 – Applying Styles to Our Body Area

There aren’t too many styles that need to be applied here – just a few. Let’s start with the titles. We want to make them look indented by highlighting the inner bottom character edges, which is a style often used in Apple sites. Apply the style shown below to the “Aurora” title text. Also, apply the same style to the “Screenshots” and “Features” titles. With these later two titles, change the Opacity to 40% though (everything else in this Drop Shadow Layer Style is the same).

Apply the same layer style to the bullet points under the “Feature” column, as applied to it’s title. The results so far are shown below.

Now copy the horizontal rule from the “promotion” section, change the color to dark blue (#131828) and scale it to fit the area above the “Screenshots” title. Notice how the style is retained.

Now copy this same horizontal rule and use multiple copies of it in the last column of this section, as shown below. Be sure to delete the existing unstyled horizontal rules.

Now follow the same steps for these placeholder images here as you did in Step 10. Apply the same layer styles and “Purple Rain” background pattern fill. This is just a quick way to make this area look good for client review before you get ahold of the actual photos that will go there later. The final “body” section is shown below.

Step 14 – Apply Style to the Bottom Section

First, let’s apply the same Bevel and Emboss layer style to our titles here as we did to the text in our primary navigation in Step 8. Now drag four copies of our stylized horizontal rule down and resize as necessary, or apply the same styles and coloring to the existing horizontal lines as we did to them in the “body” section.

Replace the remaining horizontal rules of this section with dashes. You can use the Type Tool and the Dash Key for this. I used Myriad Pro at 14pt for this. This is something that will be coded in CSS, but we want to make sure we’re communicating this effectively in the design.

Apply the same layer styles to our buttons as we did in our primary navigation. Just copy those layer styles down. Be sure to stylize the text of the buttons as well. Now replace our twitter bird with a full-color version, which you can download free in the Practika Icon pack from Smashing Magazine.

Apply the following layer styles to the background of the “bottom” section and we’re done!

Conclusion

There are lots of creative website solutions you can create using just a handful of chosen elements, an interesting color scheme, utilization of appropriate styles, and attention to subtle light effects. The final image is below. You can view a larger version here.

网站设计中漂亮的文字渐变效果

SLJ — Thu, 22 Oct 2009 04:35:58 +0000

Bainbridge Studios

2. aiAlex

3. Radium

4. Deagostini Bombers of World War II

5. Coda

6. Bird Malaysia

7. atebits

8. Macalicious

9. Idea Foundry

10. iceberg

11. Newism

12. Studio 7 Designs Inc

13. Overture Technologies

14. Your Web Job

15. WPCoder

16. Strutta

17. Hashrocket

18. Mac.AppStorm

19. Hugs

20. Keypoint

21. OnWired

22. Anderbose

23. Uncover

24. Mein Brandenburg

25. Shopify

26. goinnovate

27. Brian Michael Hansen

From: http://sixrevisions.com/design-showcase-inspiration/beautiful-gradient-typography-in-web-design/

20 个提高Photoshop工作速度的小贴士

SLJ — Tue, 20 Oct 2009 06:31:55 +0000

我们基本上每天都在用Photoshop,但是我打赌这篇博文中至少有一条贴士会让你觉得“为什么我原先不知道？”。

这些贴士能够让平时工作中最常用的操作变得更快捷，让你提高工作速度。

转载请注明来源：20 个提高Photoshop工作速度的小贴士 | 奇亚
英文原版：20 Handy Photoshop Tips For a Faster Workflow

Hold Spacebar to move a selection - 按住空格来移动选区

Drag a selection with the Marquee tool, but before releasing the mouse button, press and hold the Spacebar to relocate the selection.

想要移动一个选区，在释放鼠标前，按住空格键不放

Display larger font previews – 在预览字体中显示更大号的字

Go to Photoshop’s preferences and head down to the Type section. Change the Font Preview Size option to Extra Large to display legible preview on the font drop down menu.

Change values with the cursor keys – 用方向键更改值

Rather than typing in an exact figure, simply nudge the numeric value up and down sequentially with the cursor keys.

Quickly zoom back to 100% – 迅速将缩放还原到 100%

Double click the Zoom icon’s magnifying glass to jump back to 100%.

Toggle visibility of multiply layers – 多图层切换可视状态

Click the ‘eye’ icon next to a layer to toggle the visibility on or off, then drag the selection down the palette to repeat the command on multiple layers.

Hide or show all other layers – 隐藏或者显示其他图层

Press the ALT key while clicking the ‘eye’ icon next to a layer to toggle the visibility of all other layers.

Load the selection of a layer – 载入一个图层的选区

Press CMD while clicking the layer thumbnail to load a selection of the layer contents.

Quickly toggle between blending modes – 在混合模式中迅速切换

Windows users can simply toggle using the cursor keys, Mac users however can use the Shift key along with the plus and minus keys while the direct selection tool is active. Using this command while another tool is selected will change the blending mode option for that specific tool.

Toggle palette visibility – 切换调色板显示

Increase the size of your work area by toggling off the palettes using the Tab key. Hover over the edges of the screen to bring back palettes, which will then disappear again when the mouse is moved away.

Fit to full screen – 全屏显示

Another handy tip for Mac users. Cycle through various full screen modes by pressing the F key.

Switch to precision cursor mode – 切换到精确指针模式

Press Caps Lock to turn on the precision cursor, useful for creating accurate selections. This also toggles off the brush outline, which can be handy for some occasions.

Increase and decrease brush size – 增大或减小笔刷大小

With the Brush tool selected, press the [ and ] keys to increase or decrease the brush size.

Rotate a Photoshop brush – 旋转PS笔刷

Head into the Brush setting, under Brush Tip Shape adjust the circular icon to rotate the angle of the brush.

Quickly adjust layer opacity – 迅速调节图层透明度

Select a preset opacity value by pressing the numeric keys from 1-10. Number one equals 10%, five equals 50% and so on.

Auto select layers or groups – 自动选择图层或组

Select and adjust the selection settings to automatically select a layer, or a group. Or turn the option off to avoid accidental layer selection.

Automatically load files into layers – 自动载入文件至图层

Go to File > Scripts > Load files into stack to open up a bunch of images and automatically place them onto individual layers.

Easily create new guides – 简单的创建新向导

Click and drag a guide from the document rulers, or go to View > New Guide to drop a guide at a specific placement.

Change layer palette thumbnail sizes – 更改图层调色板缩略图大小

Click the small options arrow in the corner of the Layers Palette, then change the Layers Panel Options to alter the thumbnail size.

Copy multiple layers – 复制多图层

Draw a selection, then use the shortcut Shit+CMD+C to Copy Merged. This takes every layer into the clipping, rather than just the current layer selection.

Move items with super nudge – 大幅度的移动项目

The cursor keys will nudge an object by 1px by default. Hold Shift while nudging to increase this to 10px. Especially handy when designing web layouts for consistent spacing.

[转] 24个实用PS笔刷创建教程

SLJ — Thu, 15 Oct 2009 15:58:30 +0000

Using Photoshop brushes can be a quick and effective way to beautify and improve a design. Though there are many Photoshop brushes available on the web free for you to download, you can also make your own to guarantee that you’ll have something truly unique.

Creating Photoshop brushes is easier than you think; if you don’t know where to start, check out these handy tutorials on Photoshop brush creation.

1. Create Photoshop Brushes for Coffee Stains and Splatters

Learn how to compose Photoshop brushes using a scanned-in photo of coffee stains and splatters, giving you insight on how to use your own photos to create reusable brushes.

2. Creating Grunge Brushes

Belgian graphic/web designer Verle Pieters shows her readers how she makes grunge brushes that can be applied on design projects to create a worn look.

3. How to Create Your Own Brushes

Discover a method for creating reusable floral brushes in this step-by-step Photoshop tutorial on PhotoshopStar.

4. Building a Lego Bricks Photoshop Brushes Set

In this Photoshop brush creation tutorial, you’ll take a stock image of Lego blocks and transform it into a brush set.

5. Photoshop Brush Tutorial

This 4-step Photoshop brush tutorial on deviantArt will introduce you to the art of creating brushes in Photoshop.

6. Photoshop Brush Tutorial

This tutorial illustrates a process for making a beautiful grunge corner brush using a stock photo and layer masking.

7. Creating Your Own Grunge Brushes

In this tutorial, you’ll see a process for creating grunge brushes in Photoshop using a standard default brush that’s modified with the Displace filter.

8. How to Create Your Own Photoshop Brushes

In this detailed Photoshop brush creation tutorial, you’ll discover the basic techniques for using stock images to create truly unique brushes.

9. How to Create a Set of Photoshop Grunge Brushes

Sometimes you want to create Photoshop brush sets either to group your brushes for organization or to share them with others – this tutorial will show you how.

10. Creating Your Own Custom Adobe Photoshop Brushes

This tutorial gives you an introduction to creating your very own custom Photoshop brushes using stock imagery.

11. How to Make A Photoshop Brush

Designer and blogger Jay Hilgert of BittBox shares his techniques for making custom Photoshop brushes.

12. Creating Your Own Fractal Photoshop Brush: Tutorial

Fractals are popular in digital art compositions and if you’d like to learn how to make reusable fractals for use in your Photoshop projects, check this tutorial out.

13. Leaf Brush Tutorial

Create unique leaf brushes using stock photos by following along this excellent web tutorial on Spoono.

14. Creating Photoshop Brushes Tutorial

This tutorial, which is also available as a downloadable PDF that you can print out, walks you through the making of a Photoshop brush.

15. How to Make a Brush in Photoshop CS3

This tutorial takes a vector illustration made in Adobe Illustrator and converts it to a Photoshop brush.

16. How to Create and Define Photoshop Brushes

Learn the basics of making and defining Photoshop brushes so that you can easily use them throughout your digital art projects.

17. Create Photoshop Custom Brush

In this Photoshop brush creation tutorial, you’ll discover a method for generating your own brushes using palm trees.

18. Make Photoshop Brushes

This Photoshop tutorial on producing brushes takes a high-resolution photo of a flower and with the help of the Pen (or Lasso) Tool isolates and converts the subject to a brush.

19. Adobe Photoshop CS3: Brush Creation for Dummies

This beginner level brush creation tutorial on Instructables will take you on a step-by-step journey into producing your very own Photoshop brushes.

20. How to Make a Brush and How to Use It

This Photoshop brush starts by creating a Photoshop pattern; the result is a brush that you can use as a tiled pattern in your designs.

21. How to Create Photoshop Brushes? Complete Tutorial

This Photoshop brush creation tutorial shows you how to create a brush using default shapes included in Photoshop.

22. Custom Brushes Tutorial

Richard Carpenter, a regular author here on Six Revisions, shows readers of his Photoshop design blog (hvdesigns) how he creates custom Photoshop brushes.

23. How to Make Photoshop Brushes

In this Photoshop brush creation tutorial, you will learn how to produce custom brushes using default brushes.

24. Creating Custom Brushes

This Photoshop brush creation tutorial shows you how to make an interesting brush by using a royalty-free (and downloadable) image.

Do you use Photoshop brushes? Where do you get your Photoshop brushes? Do you usually create your own or to you prefer to download them? Join the discussion in the comments! *edited by Jacob Gube

转自：http://sixrevisions.com/photoshop/24-useful-tutorials-on-creating-photoshop-brushes/

关于网页设计的一些好收藏

SLJ — Sat, 10 Oct 2009 15:22:21 +0000

今天在 Six Revisions 上看到了作者又更新了本次的Favorites，这一次更新我觉得与我关系特别密切，因为有很多东西都是近期所研究，有的也在奇亚上发布过了。所以本文转载翻译并作收藏。

Favorites from the Feeds is a Six Revisions series that highlights notable design and development articles, tutorials, tools, and downloadable resources from my RSS feeds. In this installment, you’ll see some of my favorite Photoshop tutorials from last week, a great article on Opera’s site on grid design, and the other stuff you normally see on FFF.

1. 3 Powerful Ways To Make Typography Talk On Your Website

2. Methodic approach to CSS coding: Four Bubbles Model

3. 10 Excellent Books for Learning Web Design | 10本学习Web设计的好书！

4. The myth of the page fold: evidence from user testing

5. Minimizing Complexity In User Interfaces

6. Different Methods for Choosing Color Schemes in Web Design | Web设计中不同的选选择颜色主题的途径

7. Grid design basics: Grids for Web page layouts | 网格设计基础：网页布局的网格

8. Elegant CSS Message Boxes for Blogs | 博客中精美的CSS信息框

9. Selecting the Right Chart Type for your Data | 为你的数据选择正确的图标类型

10. How to Create a Rusty Texture in Photoshop | 怎样用PS创建一个锈迹斑斑的文字

11. Create a New Retro Text Effect in Photoshop | 用PS创建新的文字效果

12. Draw Paths with Photoshop’s Pen Tool | 用PS的Pen工具画出路径

13. How to Code a Clean Portfolio Design (Plus Free 5-Page Template)

14. BoxedArt Website Design Tutorial

15. Usability Testing Demystified

16. Taking your Site from One to One Million Users

17. Design as a Differentiator

18. Google Wave 101

19. gRapha?l: Charting JavaScript Library

20. milkchart: Graph/Chart library for MooTools

21. The Pomodoro Technique: Time Management Method

22. Pencil: Sketching and Prototyping with Firefox

23. Design Patterns Library by Fellowship Technologies

24. CSSbake: User Interface Design Gallery

25. Hi-Res Fully Stained Paper Textures

转载自：http://sixrevisions.com/series/favorites-from-the-feeds/favorites-from-the-feeds-07/

用Photoshop设计一个简洁新潮的公司网站

SLJ — Thu, 08 Oct 2009 14:45:04 +0000

I often think at the actual economic crisis, I am a man in a constant precariousness and I look for some good solutions to improve my daily connection with the world. Well, I have a only solution: create things, make unique stuff. I apologize. I don’t know the secrets to save the world (I’m not Batman!), but I can make good stuff in Web Design, so with the today post I will explain how to create a clean and almost serious (hard thing for me) web design for a company.

Starting the Work

First of all it could be useful to take a look at the final result (click here to see the full-scale preview). If you think this is a passable work, continue the reading for learning how to realize the layout using Photoshop.

Final Result – makingSeo

Step 1 – Set up the document

Cup of coffee ready. Open a new document in Photoshop 1200×1520 px, resolution of 72 pixels/inchs, and a RGB Color Mode of 8 bit.

Activate the rules (Ctrl+R). Setup two guides as shown in the following image to limit the the wide of layout to 960 pixels. To create the guides go to View->New Guide. Set (1) Vertical and 120 px, (2) Vertical and 1080 px.

The space between the guides should be 960 px, we will create all elements of the layout whitin the Photoshop guides. You could also use the 960 Grid Template for Photoshop.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. Check it out because it can help your design process.

The Background

Our goal is to create a clean and fresh layout for a new SEO company that is not scared by the economic crisis (maybe they are Superheroes).

Step 2 – The Header Background

Choosing an height of 1520 pixels we’ve decided to develope the complete layout following a precise wireframe which is in our mind or on a page in our block-note. In this case I made a pen sketch evaluating the height (header 150 px + down-header 300 px + main container 750 px + footer 320 px).

Once made this preamble we can start to design the complete background for the website.

Use Horizontal guides to separate the sections (you can also drag the guides directly from the rules).

Create a new layer (Ctrl+Shift+N), use Rectangular Marquee Tool (M) to draw a selection in top and add #0e4968 color at the selection (right click->Fill). Go to Filter->Noise and Add Noise (Amount 1%, monocromatic).

Set the following style for the layer: Drop Shadow (Multiuply, Opacity 60%, Angle 103°, distance 1px, Size 7px), Gradient Overlay (from white to transparent white, Blend Mode Soft Light, Opacity 79%, Linear, Angle 90°, Scale 69%).

Add a second layer with a green color (#c3dd6c) using the same technique. You can use a clipping mask (right-click on the layer in the Layers Panel, Create Clipping Mask), name the layer “green bck”.

Add a new layer and fill it with #d4e9ff color, add noise and apply the following style: Gradient Overlay (from transparent to white, linear) and Stroke (6px, #bddafd color).

A new simple gray level for the main container.

Duplicate the header layers for the footer. Below you can see the final background.

Header and Down Header

We want to create a nice header with the logo of the company and a nice menu. We use the down-header section to describe, through a promotional message, the mission of makingSEO.

Step 3 – The Logo

Use the Gradient Tool (G) to draw a light as shown. Apply a Soft Light Blend Mode and set at 70% the Opacity. This layer must be added at the same level of “green bck”.

Below you can see the result.

Now use Horizontal Type Tool (T) and the font Mentone to add a string as shown in the picture (#fffff for “making” and #c4de6d for “SEO”).

Apply the style at the layer. Use Drop Shadow (Multiply, Opacity 20%, #000000, 120°, Distance 1px and Size 3px), Inner Glow (Screen, Opacity 39%, #ffffff, Choke 0% and Soze 1px), Bevel and Emboss (Inner Bevel, Smooth, Depth 154%, Size 0%, Soften 2px and a custom opacity for Highlight Mode and Shadow Mode), Gradient Overlay (from #000000 to #ffffff using Soft Light, Opacity 90%, 90° and Scale 94%).

Use Rounded Rectangle Tool (U) to add a shape, set the fill at 0% and add the style. Inner Glow (Screen, #ffffff, Opacity 39%, Noise 0%, Choke 0%, Size 1px), Bevel and Emboss (Inner Bevel, Smooth, Depth 154%, Size 0px, Soften 2pz, angle 90°, Altitude 26°, Highlight Screen with an Opacity of 100% and Shadow Mode Multiply with an Opacity of 34%), Gradient Overlay (from white to black, Soft Light, Opacity 90%, Linear, Angle 90° and Scale 94%).

Add a simple slogan.

Step 4 – The Menu

Create a new text string using Verdana (12px) for the menu.

Draw a dashed grid. Use Horizontal Type Tool (T) and create a string of “- – – -”, then rasterize it (right-click on the layer name in Layers Panel and select Resterize Type). This is the baseline for the grid that you can duplicate and positionate each single line to build a nice grid. Apply the style at the grid using a Fill of 0% and Gradient Overlay. It’s clear that horizontal and vertical lines have different Angle and Style in Overlay Gradient.

Down Header

In this section we would comunicate to the visitors what makingSEO do. The company works!

Step 5 – Big Typography in Down Header

Add a text in the right side of this section. Use Mentone and create three layers as shown in the following image. Draw two shape using Rounded Rectangle Tool (Radius 10px) to highlights the #ffffff type.

Apply Drop Shadow setting Opacity 100%, Angle 120%, Distance 3px, Size 0px and color #bddafd for the blue text, #a76a1b (orange) and #8db311 (green) for the white.

Step 6 – Call to Action Button

Add a new rectangular shape using Rectangle Tool (U) and set the fill of the layer at 0% (name the layer “button”). Add the following style: Gradient Overlay (Normal, Opacity 47%, Linear, Scale 84%).

Create a new layer, set your foreground color to #000000, choose the Paint Brush Tool (B), select a Hard Brush with the Diameter of 10px, create a circle at the bottom of your rectangle.

Edit->Free Transform (Ctrl+T) and stretch the circle as shown in the figure.

Go to Filter->Blur->Gaussian Blur and use a radius of 3-5 pixels and drink your coffee.

Right-click on the Vector Mask Thumbnail of the rectangular shape “button”, this is a way to create a selection. Now Shift+Ctrl+I for inverting the selection and Add a Vector mask at th shadow layer as in the image. Set Multiply Blend mode with an Opacity of 10%.

Create a second shadow using the same technique.

Add a new text string and apply the style. Inner Shadow (Multiply, Opacity 20%, Distance 1px, Size 1px), Outer Glow (Screen, Opacity 75%, Nois 0%, #ffffff, Softer, Spread 0%, Size 16 pixels).

Step 7 – Screenshot

Add a website scrrenshot on the left side an apply Drop Shadow (Multiply, Opacity 83%, Ange 90°, Distance 2px, Size 21px) and Stroke (8px, Outside, Normal, 100%, #ffffff).

Step 8 – Badge

Use Rounded Rectangle Tool (Radius 10px) to insert a first shape (name this shape layer “badge-1″). Drag some guides to delimit the figure.

Add a second shape (name this layer “badge-2″).

Click on the vector mask of the rounded rectangle you’ve just created (”badge-2″) to make it active, then select the Rounded Rectangle Tool (U), choose on the the option bar Substract from the Shape Area (-), and create a rounded rectangle as shown in the following image.

Add the last rounded rectangle and drag the layer just below the screenshot layer as shown. Add a Gradient Overlay (from white to black with Color Midpoint at 75%, Multiply, Opacity 76%, Linear, Angle 180°, Scale 12%).

Select “badge-1″ and using Direct Selection Tool (A) create a cut at the tail of the badge as shown.

Now select “badge-1″ and “badge-2″ (Ctrl+click on the name) from Layers Panel. Right-click and Duplicate Layers. Right-click and Duplicate Layers. Right click and Merge Layers.

Apply the style at this new layer. Drop Shadow (Multiply, Opacity 30%, Angle 120°, Distance 2px, Size 4 px), Inner Glow (Screen, Opacity 46%, Noise 0%, #ffffbe, Choke 0%, Size 5px), Bevel and Emboss (Inner Bevel, Smooth, Depth 100%, Size 5px, Soften 0px, Angle 166°, Altitude 48°, Screen and Opacity at 39% for Highlight Mode, Opacity of 0% for Shadow Mode), Gradient Overlay (from Normal, Opacity 39%, Linear, Angle 90°, Scale 61%).

Add a text and apply a hard drop shadow.

Main Content and Sidebar

It’s time to add contents and more informations.

Step 9 – Contents

Choose the Horizontal Type Tool (T) and add some text (using Verdana). You can also use some icons. Consider the icon set designed by “Navdeep Raj” for Smashing Magazine. Use the same technique (drashed lines) used in header menu to split the headings and the paragraphs.

Below a complete view.

Step 10 – Buttons

Use the Pen Tool (P) with the help of some guides to draw a button for the bottom of some paragraphs. Apply style at the layer using Drop Shadow (Multiply, opacity 30%, Angle 120°, Distance 2px, Size 4px), Inner Glow (Screen, Opacity 46%, #ffffbe, Sifter, Choke 0%, Size 5px), Bevel and Emboss (Inner Bevel, Smooth, Depth 100%, Size 5px, Soften 0px, Angle 166°, Altitude 48°, Highlight Mode Screen with an Opacity of 39%, Opacity 0% for Shadow Mode).

At the end add a text using a hard drop shadow for the style of layer.

You can add a second button with an orange color.

Step 11 – Sidebar

Design another rounded rectangle (#fbfbfb, stroke 1px dcdcdc) and add some text as shown in the following image.

Footer

Here we’ll insert some other useful informations for visitors.

Step 12 – Designing Footer

Add three columns using the previous techniques. Use an icon in Twitter section.

At the end add the credits.

Conclusion and Download

Congrats, we’ve designed a decent frash layout for a great Seo Company. I really love this clean style. Click on the following link to download the complete layered PSD Template.

Dont’ Forget. The template is released under Creative Common License (CC 3.0 Attribution) also for commercial use.

Bye Batman!

你能否成为一名Web设计师？

SLJ — Thu, 08 Oct 2009 05:57:39 +0000

想成为一名 Web 设计师吗？那要具备什么呢？

来自：Can You Be a Web Designer? | Six Revisions

22个Photoshop网页设计教程网站推荐

SLJ — Sat, 03 Oct 2009 02:47:29 +0000

今天向大家推荐一些非常棒的网页设计类教程网站，这些网站都会经常更新一些优秀且高质量的Web界面设计教程。如果你热爱网页设计并且经常搜集各种界面设计教程，那么你一定要把下面这些网站收藏起来。

1.PsdVibe

2.HV-Designs

3.SixRevisions

4.AdobeTutorialz

5.GrafPedia

6.TemplateTuts

7.WebDesignDev

8.PSD Tuts

9.Web Tint

10.PSD Tempate

11.Webitect*

12.MonsterTuts

13.PSDCore

14.WebDesignLibrary

15.Talk-Mania

16.PSDFan

17.PSD News Box

18.2Photoshop

19.TutorialTab

20.ToxicLab

21.AlfoArt

22.InsanelyArt

转自http://blog.bingo929.com/22-photoshop-web-design-interface-tutorial-sites.html

[转]12个对网页设计师非常有用的图片优化工具

SLJ — Thu, 01 Oct 2009 14:32:12 +0000

图片非常重要，它们可以让你的页面更好看，更引人注目。但是，高质量和漂亮的图片常常会很大,它们会让页面加载变慢并消耗更多带宽。所以我们，这些设计师应该优化图片以使其体积更小但质量更高！
事实上有很多有用的图片优化工具，它们可以帮助我们优化并减小图片的文件尺寸。这些有用的应用包括web应用和桌面应用。

基于web的图片优化工具

1. Smush.it

Smush.it是一个很流行的图片优化工具，它可以既减小图形文件的大小又能保持其质量，也就是我们称之为“无损(lossless)”图片压缩！你可以通过网站来运行Smush.it (一次最多5张图片)或者通过Firefox的YSlow扩展。

2. Dynamic Drive在线图片优化器

该在线图片优化器允许你优化不同的文件格式，比如GIF、JPG和PNG。你既可以从本机上传图片，也可以像Smush.it那样粘贴图片的URL。该工具可以优化并转换你的图片为不同的文件类型。该工具的限制是每次一张图片，每张图片不大于200K。

3. PunyPNG

PunyPNG使用多个优化技术。它将先检测你的图片，然后判断哪种技术是最适合的。PunyPNG 支持大部分流行图片格式，并自动为你测定转换的图片格式。

4. SiteReportCard图片优化工具

SiteReportCard图片优化工具支持GIF、JPG和PNG格式。你可以粘贴图片URL或者从你的电脑上传。该工具将会压缩和优化图片为适当的大小和质量。

桌面图片优化工具

1. Shrink O’Matic

Shrink O’Matic是一款基于AIR的应用，它可以通过拖拽来即时的处理图片。你可以选择一些选项，比如输出格式、输出名字或者输出大小。

2. OptiPNG

OptiPNG是一款高级PNG优化器，可以将多种文件格式的图片转化为优化过的PNG图片。Windows用户可以通过OptiPNG Windows Shell Integration项目将OptiPNG整合到Shell，或者使用OptiPNG作为Paint.NET 插件。使用Mac OS X 的用户可以通过PNGCrusher应用享用OptiPNG。

3. ImageOptim

ImageOptim是一个前端工具，它是开源的，不过貌似只有Mac OS版本，使用来自于AdvanceCOMP的AdvPNG、OptiPNG、PngCrush、JpegOptim、来自于libjpeg的jpegtran、Gifsicle以及可选的PNGOUT。

4. PNGOUT

PNGOUT是一个命令行应用，它有很多的不同选项。支持PNG、GIF、BMP、JPG、TGA和PCX 格式。

5. PNGGauntlet

PNGGauntlet是一个使用PNGOUT来优化PNG文件的.NET 应用。它可以将JPG、GIF、TGA、PCX 和BMP 等文件转换为PNG。如果你不是很熟悉Windows命令行，可以试一下PNGGauntlet。

6. JPG & PNG Stripper

这个应用可以从图片文件中移除不必要的元数据。它支持JPG、JFIF和PNG 文件格式。

7. TweakPNG

TweakPNG是一个用于优化PNG文件的低级别的工具。那么为了使用这个工具，你需要熟悉PNG文件格式。你可以从这个网站了解更多的关于PNG文件的信息。

8. RIOT – Radical Image Optimization Tool

RIOT可以通过幻数读取并优化不同的图片格式。随意它也能优化不常见的图片扩展，这让它与其它优化工具相比比较独特。RIOT将会并排显示元素图片和输出图片，这样你就可以简单的对比它们的质量。

转自：http://www.qianduan.net/12-pairs-of-very-useful-web-designer-image-optimization-tool.html
英文：12 Really Useful Image Optimization Tools For Web Designers

[转]Photoshop手绘笔刷大收集

SLJ — Thu, 01 Oct 2009 14:28:26 +0000

手绘设计的东东常常是一个颇为流行的选择来表现一个人的品位、热情以及童心。

貌似女生比较喜欢在自己的博客中使用手绘元素，这样可以显得很可爱或者有才……

尽管通过扫描手绘作品或者使用绘图板可以制作新的设计，使用准备好的设计也常常是个不错的选择。

为了帮你快速的进行手绘风格的作品设计，这里我们收集了一批漂亮的手绘风格Photoshop笔刷:

卷状笔刷

1.Swirl Set

2.Swirly Scribbles

3.Twizzles

4.Whirls

5.Aesthetique Swirl

花儿、植物、装饰笔刷

6.Feb Brushes

7.And Its Flowers

8.Flower Brush Set

9.Paisleys

10.Floral Ornaments

11.Flowers & Vines

12.Plants

13.Folk-Art Floral Brush Set

14.Flower Doodles

15.Doodled Trees

16.doodled trees

17.When I Grow Up Brushes

18.Enchantment Brushes

心形笔刷

19.Hearts Set

20.Beautiful Hearts

21.Scribbled Hearts

22.Hearts

23.Two Tone Hearts

24.Hand Drawn Heart Brushes

箭头笔刷

25.Sketchy Arrows

26.Creative Doodles

27.Arrow Doodles

28.Hand Drawn Arrow Brushes

29. 120+ Free Hand-drawn Vector Arrows

各种形状

30. Drawn object brushes

31.Doodles Set

32.Stick Men

33.School Days

34.Scribbles

35.Primitive Art

36.Various Doodles

37.Handmade Doodles

38.Pencil

39.Sketchbook Scribbles

40.20 Stencil Words

41.Dotted Brushes

42.Star Doodles

43.Frames

44.Hand Drawn Star Brushes

45.MISC ITEMS photoshop brushes

46.Urban Scrawl

47.Random Da Vinci Sketches

48.Doodles

49.Primative Art

50.Doodles

51.Doodles Brushes

52. Doodle Photoshop Brushes by chokingonstatic

53. Hand drawn floral patterns

整

[转]基于jQuery的饭否输入框.（QQ校友的留言和评论心情也有）

Sun, 05 Jul 2009 15:15:15 +0000

基于jQuery的饭否输入框.

相信大多数人都使用过饭否。总的来说，饭否算是国内一个不错的互联网产品。个人比较喜欢。特别是那个140字的输入框，我觉得还不错，能实时的显示 “已经输入多少字”和“还可以输入多少字”。所以，这篇文章就是来讲解如何制作一个类似的输入框。（现在QQ校友上的留言和评论心情这块也有）

1，基本布局

所需要的元素：一个标题，一个提示字数的元素，多行输入框一个，loading图片一张，提交按钮一个。
布局涉及到2个状态：”1个默认状态” 和” 1个已经超出” 的状态。
具体布局可以看下面的2个例子：
http://www.cssrain.cn/demo/fanfoutext/demo1.html
http://www.cssrain.cn/demo/fanfoutext/demo2.html

2，添加脚本

布局做好后，添加脚本就相对简单了。
很多人做这个效果的第一反应就是使用 onkeydown或者onkeyup。我以前也是，当时遇到了很多问题。
不过上次看了国外一个代码后，我改变了思路。使用的是focus + setInterval() + +blur来实现。
具体思路就是当鼠标获取焦点(onfoucs)后，添加一个setInterval(), setInterval()中的函数就是用来截取字符串的。当鼠标失去焦点后，清除interval。另外需要注意的是，在focus时，需要判断避免重复执行。
具体代码可以看Demo3:
http://www.cssrain.cn/demo/fanfoutext/demo3.html

3，ctrl+enter提交表单

这是一个很普通，但非常实用的提交方法，所以我打算添加进去。
代码如下：

$content.keydown(function(e){
if(e.ctrlKey&&e.keyCode=="13"){
...
}
})

具体代码可以也可以看Demo3:
http://www.cssrain.cn/demo/fanfoutext/demo3.html

4，改变成另外一种提示方式

Demo3中即使超过了，用户还是能输入。如果你打算超过后，就不让输入，那么请看Demo4：
http://www.cssrain.cn/demo/fanfoutext/demo4.html

此文来自CSSrain.

10个木纹素材

Fri, 03 Jul 2009 05:27:38 +0000

资源：http://hjoranna.deviantart.com/art/Wood-Texture-4-117827898

资源：http://www.flickr.com/photos/matthamm/2689470945/

资源：http://www.flickr.com/photos/matthamm/3345597659/

资源：http://www.flickr.com/photos/matthamm/3345597591/

资源：http://www.flickr.com/photos/matthamm/3346430996/

资源：http://www.flickr.com/photos/matthamm/3345597487/in/photostream/

资源：http://crimson-designs.deviantart.com/art/Bruised-Red-Wood-11647331

资源：http://www.flickr.com/photos/deiby/2528506906/

资源：http://errantdreams.deviantart.com/art/Wood-Texture-3-Hardwood-94017060

10.

资源：http://www.flickr.com/photos/bittbox/3508082241/in/set-72157617708336229/

SLJ.me - 申力军 » Design

15个Google为网站开发者打造的工具

Related Posts / 相关文章

iPhone网页设计欣赏与最佳实践 Showcase of Designs Optimized for iPhone

1. 新闻/娱乐类

2. 商业/企业

3. 购物/电子商务

4. 个人展示/博客

5. 教育/资讯

iPhone网页设计工具

更多内容

关于作者

Related Posts / 相关文章

[转] UED,UXD在中国

Related Posts / 相关文章

[原创]多选/全选checkbox，AJAX提交。另附IE的onchange BUG

另外如果你想通过checkbox的onchange来调用全选函数的话，结果是：IE不支持！最后只好使用onclick来实现了。这个也是历史遗留问题。算是IE的一个不愿解决的BUG

Related Posts / 相关文章

Ajax Loading 在线图片生成

Related Posts / 相关文章

极简主义网站设计:寓丰富于简单

什么是极简主义设计

越简单越丰富

如何简化内容

如何简化设计

使用一个很棒的线框

空白

平衡、对齐、对比

当过度设计成为一个习惯

极简网站设计欣赏

1. James Day Photo

2. Killswitch Collective

3. Lonely

4. DBushell

5. XPD.no

6. Toy NY

7. Joshua Serbus

8. Ah-Studio

9. Symour Powell

10. Icon Werk

11. Neil Wilson Architects

12. Non-Format

13. Zaum

14. Checkland Kindlysides

15. Blumenthal

16. Tink London

17. Proud Creative

18. Kimag

19. Bernat Fortet

20. All Day

一些趋势

黑白设计

有趣的排版

Flash

结束

Other Posts / 其他文章

免费的Photoshop高分辨率笔刷

Related Posts / 相关文章

Photoshop制作海洋蓝水晶字体

Related Posts / 相关文章

用Photoshop创建一个iPhone程序销售页面

最终图像预览

Step 1 – Document Setup 第一步：文档设置：

Step 2 – First Dominant Visual Element

Step 3 – Adding an iPhone Image

Step 4 – Working on Our Color Scheme

Step 5 – Changing Our Text Color and Basic Styles

Step 6 – Bringing in the Logo Design

Step 7 – Starting to Add Style To Our Design

Step 8 – Adding Style to Our Primary Navigation

Step 9 – Applying Style to Our Secondary Navigation

Step 10 – Applying Style to Our Secondary Navigation Continued

Step 11 – Applying Style to Our Promotional Area

Step 12 – Applying Style to Our Main Call to Action Button

Step 13 – Applying Styles to Our Body Area

Step 14 – Apply Style to the Bottom Section

Conclusion

Related Posts / 相关文章

网站设计中漂亮的文字渐变效果

Bainbridge Studios