飞鱼的声纳

如何创建你的favicon？

wantfee — Fri, 03 Sep 2010 02:32:49 +0000

最近给博客添加了favicon，也就是浏览器地址栏左边的那个小图标，之前也捣鼓了几次都没有成功，主要原因是图标倒是做好了，16像素乘以16像素大小，可放到主题文件包中的时候，发现特别模糊，而别人的主题包里的图片都特别清晰，但文件大小却显示是16像素，不明白是什么原因。后来才知道在windows下查看图片的缩略图的时候，是以48像素大小显示的，难怪16像素的图片要模糊了！而其实这个.ico格式的图片，是可以将不同大小的图片打包放置于一个.ico图标文件之内的。就好像是一个大袋里里装了同一个样子的不同大小的玩具，在不同的环境下，你会看到不同大小的玩具，但是样子却都是一样的。是不是还挺有那么点技术含量的？所以为你的博客创建一个favicon是绝对值得一试的。那么如何创建你的favicon呢？

一、下载插件

因为我们要在Photoshop中创建这个图标，所以，首先要下载能将图片保存为.ico格式的Photoshop插件。Photoshop本身是不支持将图片保存为.ico格式的，有了这个插件，你才能轻松的将做好的图片保存为我们所需要的格式。

二、开始设计

我设计的整个过程是一开始先在纸上画出我想要设计的几种样式，之后挑选出自己满意的一个设计方案后，再在Photoshop中开始设计。由于16×16像素的画布太小，不便于创建图标，所以我们先来创建一个64×64像素的文档，设计完成之后再使用Photoshop中的image（图像）>image size（图像大小）命令，在弹出的对话框的下拉菜单中选择”Bicubic Sharper”选项，将图片还原为16像素大小。”Bicubic Sharper”这个选项将会确保你的图片依然清晰，不会模糊。这里需要注意的是，也许在64像素大小的画布中你的图像的显示质量看上去不错，但是并不代表你将图片的大小更改为16像素时，图片的质量依然很好。所以，你要注意观察16像素的图片质量，如果看上去不令你满意，那么你就要考虑更改64像素图片的样式了。具体的样式由你自己设计，根据自己的喜好来，我这里就不多说了，我的设计效果最终如下图：

设计好之后，将64像素大小的图片保存为.ico格式，如下图：

三、将不同大小的图片打包

正如我在上面所提到的，如果你设计的是16像素大小的.ico文件，那么你在windows下查看它的时候会发现它是模糊的，为了避免这个问题，我们需要将设计好的64像素大小的图片再保存为不同的几种格式。起码要有一个48像素大小的.ico格式，这样放入主题文件包中的时候看上去才足够美观。当然，你只需要在Photoshop中创建一个64像素大小的图标，之后使用Sib Icon Studio软件完成打包的工作。首先在Sib Icon Studio软件中打开已经做好64像素大小的文件，然后点击New Image Farmat（新图片格式）图标，在弹出的对话框中分别选择48像素和16像素大小，添加到软件界面右侧的侧边栏中，保存文件即可，这样我们就已经将三种不同大小的图标文件放入了一个.ico格式的文件中，打包完成。如下图：

四、将图片放入主题包的根目录中

接下来你需要做的就是直接将做好的图标放入到你的wordpress主题的根目录中，或者直接上传到服务器。这里所说的根目录的意思就是要和index.php文件在同一目录。你会在header.php文件中发现这一句代码：

也就是引用favicon.ico的代码，如果你还没有这一句代码，赶紧添加到代码的标签之间，否则图片是不会显示出来的。

五、测试

上传图片完成后在浏览器中重新刷新页面，或者清除浏览器缓存，或者在浏览器地址栏URL的末尾添加一个英文的问号”?”再刷页面，这样会让浏览器误认为页面是一个新页面。

六、各种不同样式的漂亮的favicon

无相关文章

柳比歇夫的时间事件记录法介绍

wantfee — Sun, 29 Aug 2010 06:51:10 +0000

上面的两幅图片是我过去一年来做的时间事件记录中的某几天的记录文字。从接触到这种方法以来，也就是2009年的7月31日到今天，我已经作了一年多时间的记录。那么什么是时间事件记录？很简单，就像那两幅图片上所展示的，把你今天干了什么事情写下来，不要写感想也不要写心情，只需要干巴巴的事情的描述，然后在后面写下做这一件事情大概花费了多长时间就行了。时间事件记录这种方法是一个俄罗斯人所创造的方法，当然虽然他一生都在使用这种方法来记录自己的生活，但是他却从来没有将这种方法告知别人。换句话说，这只是他个人的兴趣和方法。这个俄罗斯人的名字叫做柳比歇夫。在格拉宁所著的《奇特的一生》这本书中，他向我们描述了靠着这种方法，柳比歇夫一生取得了怎样的成就。

柳比歇夫的一生做了很多的事情，多到几乎让人难以置信。他的遗产包括几个部分：有著作，探讨地蚤的分类、科学史、农业、遗传学、植物保护、哲学、昆虫学、动物学、进化论、无神论。此外，他还写过回忆录，追忆许多科学家，谈到他一生的各个阶段以及彼尔姆大学……

他讲课，当大学教研室主任兼研究所一个室的负责人，还常常到各地考察；三十年代他跑遍了俄罗斯的欧洲部分，去过许多集体农庄，实地研究果树害虫、玉米害虫、黄鼠……在所谓的业余时间，作为”休息” ，他研究地蚤的分类。单单这一项，工作量就颇为可观：到一九五五年，柳比歇夫已搜集了三十五箱地蚤标本。共一万三千只。其中五千只公地蚤做了器官切片。总计三百种。这些地蚤都要鉴定、测量、做切片、制作标本。他收集的材料比动物研究所多五倍。他对跳甲属的分类，研究了一生。这需要特殊的深入钻研的才能，需要对这种工作有深刻的理解，理解其价值及其说不尽的新颖之处。有人问到著名的组织学家聂佛梅瓦基，他怎么能一生都用来研究蠕虫的构造，他很惊奇： “蠕虫那么长，人生可是那么短！”

柳比歇夫的治学，博大精深，既是一个狭隘领域的专家，又是个杂家。

那么这种时间事件记录法具体是怎样来记录的呢？下面是柳比歇夫的记录文字：

乌里扬诺夫斯克。一九六四年四月七日。

分类昆虫学（画两张无名袋蛾的图）–三小时十五分。

鉴定袋蛾–二十分（1.0）

附加工作：给斯拉瓦写信–二小时四十五分（0.5）。

社会工作：植物保护小组开会–二小时二十五分。

休息：给伊戈尔写信–十分；《乌里扬诺夫斯克真理报》 –十分；列夫·托尔斯泰的《塞瓦斯托波尔纪事》–一小时二十五分。

_____________________________________________

基本工作合计–六小时二十分。

乌里扬诺夫斯克。一九六四年四月八日。

分类昆虫学：鉴定袋蛾，结束–二小时二十分。开始写关于袋蛾的报告–一小时五分（1.0）。

附加工作：给达维陀娃和布里亚赫尔写信，六页–三小时二十分（0.5）。

路途往返–0.5。

休息–剃胡子。

《乌里扬诺夫斯克真理报》–十五分，《消息报》–十分，《文学报》–二十分；阿·托尔斯泰的《吸血鬼》，六十六页–一小时三十分。听里姆斯基-柯萨科夫的《沙皇的未婚妻》。

_____________________________________________

基本工作合计–六小时四十五分。”

我把自己的时间事件记录和柳比歇夫的记录对比之后发现，柳比歇夫对日常的各种事情做了分类，比如，基本科研、分类昆虫学等等。这样做的好处就是方便最终统计在各项活动上你到底花了多少时间。比如下面的柳比歇夫的统计结果：

基本科研 –五十九小时四十五分

分类昆虫学 –二十小时五十五分

附加工作 –五十小时二十五分

组织工作 –五小时四十分

_____________________________________________

合计一百三十六小时四十五分

基本科研”这五十九小时四十五分包括什么内容？用在什么上了？

分类工作– 《分类法的逻辑》报告草稿 –六小时二十五分

杂事 –一小时○分

校对《达达派研究》 –三十分

数学 –十六小时四十分 45

日常参考书：里亚普诺夫 –五十五分

日常参考书：生物学 –十二小时○分

学术通信 –十一小时五十五分

学术札记 –三小时二十五分

图书索引 –六小时五十五分

合计 –五十九小时四十五分”

我们还可以随便拿哪一项继续分析下去，就拿第六项吧–日常参考书：生物学–十二小时。这十二小时花在什么上面，一目了然，误差不超过一分钟。

陀布尔让斯基《人类的进化》，三百七十二页，看完（共十六小时五十五分） –六小时四十五分

亚诺什·卡罗埃《动物有没有思想》，九十一页 –二小时○分

P．贝尔格的手稿 –二小时○分

聂考洛，奥斯维尔陀，十七页 –四十分

拉特纳的手稿 –一小时三十分

合计 –十二小时五十五分”

通过做这样的记录，柳比歇夫获得了精确感知时间的能力。

多年来经常看表的结果，柳比歇夫肯定形成了一种特殊的时间感。在我们机体深处滴答滴答走着的生物表，在他身上已成为一种感觉兼知觉器官。我作出这样推断的根据是：我同他见过两次面，在他日记中都有记载，时间记得十分准确–”一小时三十五分” 、 “一小时五十分”；然而当时他自然没有看表。我同他一起散步，不慌不忙，我陪着他；他借助于一种内在的注意力，感觉得到时针在表面上移动–对他来说，时间的急流是看得见摸得着的，他仿佛置身于这一急流之中，觉得出来光明在冷冰冰地流逝。

正是靠着这种时间事件记录法，柳比歇夫一生取得了多项的成就。当然，这种时间事件记录法并非适合于每一个人，这因每个人的性情而有所不同，不必强求。我想，这也是柳比歇夫为什么从未将自己的这种方法告知他人的原因所在–适合自己的并不一定适合于他人。但是我想那些对这种方法感兴趣，愿意和时间做朋友的人，将这种方法逐渐融合到你的生活中，一定会让你受用终生。

无相关文章

wordpress主题下载——Green Gaint(绿巨人)

wantfee — Tue, 03 Aug 2010 01:48:04 +0000

GreenGaint是我参考Tutorial9的样式设计的一款wordpress主题，总体颜色以绿色和黑色为主，现提供下载，希望大家喜欢。需要说明的问题是，当初设计这款主题的时候，是以我个人的博客需求为主，比如页首的分类标签，不是适合于每一个人，所以如果你在使用这款主题的时候有什么个性化的需求，可以留言给我，我会尽力帮大家修改。另外，在主题应用当中难免会出现一些问题，希望大家也能及时给我反馈，我会及时修正。

主题信息：

主题名称：GreenGaint

中文名称：绿巨人

当前版本：1.0

主题作者：wantfee

兼容测试：IE6/7/8、Firefox、Opera、Chrome、Safari

包含插件：Breadcrumb NavXT、WordPress Related Posts

主题预览：

主题捐助：

GreenGaint主题免费向大家提供，如果你觉得这个主题还不错的话，可以自愿选择捐助，支持这个主题的开发，在此表示感谢！

支付宝账户：wantfee@hotmail.com 王飞

应用说明：

一、你可以在页首部分的header.php文件中找到http://feed.feedsky.com/wantfee”>

471Subscribers

这一行代码，这是我的博客的RSS地址和订阅数字，你需要将它更改为你自己的。

二、Slide show（滑动展示区域）中的图片也包含在images文件夹中，大小为宽度600像素宽、317像素高，你如果需要个性化的图片，可以自己制作一张，放入images文件夹中，替换现有的图片，当然，不要更改图片名称，这样图片才能够正确的显示出来。（如果你懂一些html和css代码，不用我说，你知道怎么在index.php文件中修改。）

三、如果你的日志很长，可以添加标签，它会被替换为继续阅读的图片样式。

四、如果你需要在日志中提供下载，可给

标签添加

类，它会转变为下载文件的图片样式。

五、日志中的html、css、php代码需要放入到

或

中，代码将转换为预先设定的样式。

六、日志内的小标题统一为

级别的标题样式，已经做了预先的样式设定。

七、主题需要的Breadcrumb NavXT和WordPress Related Posts插件也已经放入到了主题包中，你只需要安装到wordpress后台就可以了。

八、如果你希望建立存档页面，只需在wordpress后台新建一个页面，然后右侧”模板”下拉菜单中选择”Archives”点击确定就可以了。预先建立好的页面模板会帮助你列出你博客上的所有文章。

九、关于页首分类标签，只需要将主题包中的category-xx.php文件名称中的xx数字更改为你的分类页面的数字，具体的操作方法和原理可以查看《如何创建wordpress分类页面》这篇文章。

最近看了大家的很多留言，发现对于这个问题很多人还是没弄清楚。所以在此我做一详细的说明，帮助大家解决这个问题。

第一步，登录你的wordpress后台，点击左侧文章标签下的分类目录，进入分类目录页面。如果你还没有添加分类目录，在此添加四个你想要的分类目录，如果你已经添加了分类目录并且多于四个，那么好好归纳一下你的文章分类，将分类目录减少为四个。为什么是四个？因为页首的分类标签就是四个，多出来的将无法显示。然后，将鼠标分别悬置于已经创建好的分类目录上，在浏览器左下角的状态栏上查看分类目录的ID号，例如显示出来的是tag_ID=121，那么121就是你的分类目录的ID号，记住这四个数字。

第二步，打开已经下载好的GreenGaint主题包，分别将category-44、category-114、category-120、category-121这四个文件名后的数字更改为你刚刚记下的四个数字。

第三步，打开style.css文件，找到.navi ul li.cat-item-3 a、.navi ul li.cat-item-3 a:hover等类似的选择符，将其后的四个数字也更改为我们在第一步中记下的那四个数字。（感谢chung的及时提醒。）

第四步，打开header.php文件，将这句代码中的121、44、114、120四个数字更改为第一步中记下的数字。

第五步，安装GreenGaint主题，结束。

十、GreenGaint主题包中的function.php文件提供了最新评论、最新日志、评论最多的文章、WP-PageNavi（页面导航）、Trackback List（引用列表）、WP-PostViews（日志浏览次数）的功能，可以直接使用< ?php wp_pagenavi(); ?>和< ?php if(function_exists(‘the_views’)) {the_views();} ?>语句来调用页面导航和日志浏览次数，使用和以及语句来分别调用评论最多的文章、最新评论以及最新日志列表。无需安装额外的插件。

十一、页首的分类标签、Logo及侧边栏的PSD源文件已经整理好，提供给大家下载，方便大家进行个性化的更改。

GreenGaint-tab&logo

更新说明：

2010年8月2日提供下载。
2010年8月28日，由于日志标题下方记录日志浏览数的PostViews代码有些问题，所以先暂停掉这个功能。
2010年8月30日，添加了滑动展示部分链接到单篇日志的代码，大家可自行在index.php文件中手动修改为个性化的链接。

下载主题：

GreenGaint

五月 9, 2010 -- wordpress主题——GreenGaint (38)
五月 7, 2010 -- wordpress内存不足，如何升级？ (9)
七月 1, 2009 -- 如何在wordpress中突出显示博主的评论？ (4)
三月 26, 2009 -- 一张红邮票(wordpress主题分析一B) (0)
三月 24, 2009 -- 一张红邮票（wordpress主题分析一A） (0)

我的时间管理系统

wantfee — Sat, 24 Jul 2010 00:10:34 +0000

我接触GTD也有几年了，在这几年的使用过程中逐渐形成了适合自己的一套系统，下面我就把自己的这套体系介绍一下，和大家做一下分享。

首先是收集箱（Inbox）。收集箱的功能是要能够随时随地方便记录你头脑里的任何想法，当然对于时间管理来说主要是记录你的计划、打算、愿望。比如当前我收集箱里记录的”给女儿办理城镇居民医疗保险”、”下一篇要写的博客文章《如何在wordpress中建立一个个性化的Demo页面》”或者”学习韩语”等等，凡是你想到的东西都可以在收集箱里记录下来。这个写下来的过程很重要，它可以帮助你清空大脑。这样做的目的是不要让大脑不断的耗费精力去记住事情，而要使你拿出更多的精力放在如何做事情上。

在收集箱的工具使用上我觉得纸和笔也许是一个不错的选择，它的特点是简单快速，什么时候有想法什么时候写下来就是了。但是缺点是携带不太方便，也显得过于正式。口袋里总放上一个小本子和一支笔好像老觉得有些碍事，也许不小心还会让笔戳了大腿。别人要是总看见你拿个小本子划来划去的难免多问几句，你还总得解释一下，比较烦。所以我还是选择使用手机，毕竟手机人人都有，你没事拿着手机用别人也不会多问什么。我目前使用的手机是windows mobile平台的，之前使用的收集箱工具是Evernote里的便签功能和录音功能，但是用过一段时间后我发现软件的打开速度是一个问题，毕竟Evernote是个比较大的程序，速度还是有一些慢，最后慢慢的就过渡到了简单实用的windows mobile手机里自带的word mobile程序了，也就是目前我所使用的收集箱工具。当然word程序比起更为简单的txt格式的文本来打开的速度还是稍显慢一些，但是已经能够做到瞬时打开了。这看似不起眼的瞬时打开功能实际上对于收集箱工具来说非常重要，试想你要是用一个经过等待才能编辑的工具，是不是感觉即使在短暂的等待过程中，写下来的欲望已经消失一半了？

下图是目前我的收集箱所记录的东西：

接下来就是组织和编辑了（To-do list）。这也是时间管理的核心部分。我目前所使用的工具是windows mobile平台下的MyLife Organized软件，这个软件的最大优点在于组织清晰，容易上手，不像我之前所用到的Pocket Informant软件，虽然功能强大，但是过于复杂。在组织编辑阶段需要清楚的一点是：不是所有收集箱里的东西都能和都需要放到GTD软件中的，因为很显然，我们的愿望总是多于我们所拥有的时间。也许你很想做很多事情，完成你的很多心愿，但是你的一天总是24个小时，不会多当然也不会少出一秒。所以我们要把精力和时间放在我们认为重要的事情上面。什么事情对于你来说是重要的？这个因人而异，也需要你不断的去认真思考，经常发生的事情是当前对你来说很重要的事情，你觉得需要花很多时间和精力去投入，过上一段时间之后你会觉得当初完全不值得去做，甚至会觉得把大把的时间放在那件事情上简直是浪费生命。所以这个问题值得我们不断的去思考，因为这决定了我们个人时间的投资方向。

在我的MLO软件中，我把日常的事情分为三个大的部分，第一个部分当然就是工作，第二个部分是家人和朋友，第三个部分是个人。这三个不同的部分中分别放入不同方面的事情。在任务的组织方面有一点我觉得很重要，就是对于任务的细化。有一个原则我们需要把握：凡是放在MLO中的任务必须是清楚明了、直截了当就能去干的，而不能是需要动动脑子想想怎么干才能去做的。比如，我上面提到的，”给女儿办理城镇居民医疗保险”这项任务，你不能直接将这个任务写入MLO中，因为它还很不清晰。还需要对这项任务进行细化，将它详细的分解，直到每一件事情都只需要简单的行动就可以了。对于这项任务，我首先需要明确的是城镇居民医疗保险的内容是什么，要知道这方面的内容我需要上网搜索查看相关政策，那就可以将这个这个项目首先分解为”上网查看城镇居民医疗保险政策”，接下来我需要知道办理这个保险需要准备什么材料？在那里办理？一步一步直到将项目分解为细小的一步步的行动。

下面是目前我的MLO中正在进行的事情（很多事情都拖延了，囧啊！）：

一月 11, 2010 -- 我的2009和2010 (0)
十一月 29, 2009 -- 不要安排太多事情 (0)
三月 31, 2009 -- 每天读20页的书 (0)
十二月 14, 2008 -- 不要任务，要玩！ (0)
七月 18, 2008 -- 如何才能让GTD工具中的事情安排得更合理？ (2)

手绘风格笔刷

wantfee — Mon, 12 Jul 2010 08:12:22 +0000

T9 Creative Doodles文件包含19个手绘风格的Photoshop笔刷，其中的笔刷形状包括五角星、箭头、线条、画笔等，如下图所示：

下载

无相关文章

设计更人性化的返回顶部链接

wantfee — Mon, 28 Jun 2010 02:43:59 +0000

返回顶部（Back to Top）的跳转链接是网页设计中不可或缺的一个小细节。它的目的是帮助访问者快速回到页面顶部，免除了不断拖动滚动条或者不停转动鼠标滚轮的麻烦，提高了浏览网页的效率。那么请允许我们先来思考一个弱弱的问题：为什么要返回到顶部，而不是页面的底部？囧！很简单嘛，文章都是从上往下读的啊！难道你要从下往上倒着读文章吗？这当然是一个非常重要的原因。但是还有没有其它原因呢？我想还有另外一个很重要的原因是因为页面的主要功能区是在顶部的，导航栏、搜索框等等都在页面顶部。通过导航按钮链接到别的位置，或者通过搜索关键字查找你需要的信息都是在浏览完了一张页面之后首要干的事情。

但是通常我们在返回顶部链接上做的工作太少，只是简单的在页面底部放置上一个跳转链接就完事了。这样做的结果是当页面比较长的时候点击跳转链接时，浏览器会瞬间将你送回到页面顶部，速度有时候快的让人反应不过来，不知道跳转之后所处的位置在哪。

另外一个问题是返回顶部链接做的不够醒目。通常来说，返回顶部链接都会位于页面的右下角，或者是页面的页脚上。这个地方本身就不是视觉的焦点处，如果再将跳转链接设计的不够醒目的话，访问者很可能在浏览了多次页面之后还没发现这个可以给他们提供方便的设计。

再有一个问题是位置不够合理。假设有一篇博客日志拥有很多的评论，一般来说，访问者阅读评论的时候比较少，所以当他们阅读完日志内容之后如果不去做评论的话会直接寻找另外的信息，这个时候返回顶部的链接就应该放置于日志结束之后而不是评论内容之后。当然还有更好的办法就是将跳转链接随时停留在视觉区域内。

那么这样看来，一个好的返回顶部链接的设计应该有下面几个特点：

一、平滑的从页面底部滚动至顶部。

二、醒目到足以吸引访问者去点击。

三、更具功能性的位置设计

那么如果创建一个跳转链接呢？通常的做法是紧挨着body标签下方创建一个空标签，然后再在页面底部创建一个链接，如下代码所示：


        
        
        返回顶部

但是这种方法使用了冗余的空标签，为了避免空标签的出现，可以直接使用body标签下的容器的ID来实现跳转。


        
        
        返回顶部

之后，为了让跳转更加平滑，拷贝此页面中的内容，将其保存为 smoothscroll.js文件，放到你的设计文档中合适的位置。一般来说，在你的设计文档中应该有一个javascript文件夹，将所有javascript文件都放入到这个文件夹中。接下来，在你的设计代码的和中间加入链接，表示页面将会引用这个JavaScript文件。

另外，你完全可以使用图片来代替链接，让它看上去更为美观。下面的设计例子也许会给你一些启发：

无相关文章

给照片的说明文字添加亚光背景

wantfee — Sat, 19 Jun 2010 11:23:14 +0000

最终效果：

在这个快速的教程里，我们将会展示如何创建类似于磨砂玻璃的文字说明来提高你的图片或者设计的外观。

第一步

在Photoshop中打开一张图片。我使用了一张秋天的图片。你可以使用一张你喜欢的类似的图片。或者，任何图片都行。在背景图层上双击对背景层解除锁定，将其命名为”Leaves”。

第二步

在树叶的图层上方创建一个新图层（Ctrl+N），命名为”Frosted Bar”。选择”Frosted Bar”图层，使用矩形选区工具（M）拖出一个选区，确保选区的两边一直要触及到图片的两边。选区的位置取决于你，在这个例子中我将它放置在了图片的底部，如下图所示：

第三步

使用油漆桶工具（G）将选区填充为白色（#FFFFFF），取消选区。（Ctrl+D）

第四步

给”Frosted Bar”图层应用如下图层样式：（混合选项：自定义–在高级混合选项中将填充不透明度设置为20%）

描边：使用白色（#FFFFFF），大小为2个像素，位置为外部，不透明度为50%。

第五步

我们将要编辑我们原始的图片，因此我们最好将它复制一遍，这样我们可以随时撤销编辑。因此选择树叶图层复制（Ctrl+J）。选择复制好的树叶图层，按住Ctrl键，在图层面板中点击”Frosted Bar”图层图标选取选区。应用高斯模糊（滤镜>模糊>高斯模糊），半径设置为20点击确定。

第六步

基础的毛玻璃效果已经做好了，接下来我们应用高光。在毛玻璃横条图层的上方创建一个新的图层（Ctrl+Shift+N），命名为”Highlights”。再次载入毛玻璃条的选区，选择画笔工具（B）。使用大一些的柔软的画笔（500像素，没有硬度，颜色为白色#FFFFFF）在横条的中间部分上下都画出高光（如下图），最后将图层的不透明度更改为60%。

第七步

最后一步是添加文字。使用文字工具（T）在横条中间添加你想要的文字，选择合适的文字大小（在这个例子中文字大小为100像素）。将文字图层的不透明度降低为40%，图层混合模式更改为叠加，完成。

最终效果

希望你能喜欢这个教程！

六月 4, 2010 -- 如何在Photoshop中创建一个破旧风格的网页设计 (2)
五月 19, 2010 -- 带有橙色标题的内容区 (4)
二月 24, 2010 -- 创建一个非常酷的3D网站设计效果 (1)
二月 1, 2010 -- 如何创建一个简洁、光滑的web2.0网站页脚 (0)
一月 25, 2010 -- 如何在Photoshop中创建一个非常有质感的网页布局 (1)

在Photoshop中创建不规则无缝拼接图案

wantfee — Sat, 12 Jun 2010 10:05:13 +0000

如果你仔细观察飞鱼的声纳的黑色背景的话，你会发现其实它并不是纯色的背景。而是一张有着细微质感的无缝拼接图案平铺以后的效果，这张图片是我从网上找的现成的图片，直接在CSS中使用就可以了，很简单。但是有些无缝拼接的图案却更复杂一些，图案不像这张图片那样规则，比如下面这张平铺以后的效果：

或者下面这张看上去更没有规则的：

是不是看起来很酷？尤其下面绿草地这张，你完全可以做一个南非世界杯的网页设计，把它当成是页面背景，绝对够味！

那么今天我们就以绿草地这张为例，手把手的教给你如何在Photoshop中创建类似于这样的不规则无缝拼接图片。首先要搞清楚的问题是：

为什么不能直接将图片平铺？

你可以试一下，不使用无缝拼接技术，直接将图片或者照片平铺于页面的效果，就比如用这张Flickr上100kr相册中的草地图片。效果大概如下图：

你觉得上面的页面背景效果如何？我想，草地上多出的这几个坑足矣让你在踢球的时候崴脚脖子了！所以我们还是要稍微对它加工一下的，花费这点时间也是非常值得的。让我们开始：

第一步

下载上面提供的草地图片，在Photoshop中打开它。

第二步

选择裁切工具（Crop Tool），在窗口顶部的属性栏上的宽度（Width）填上200px，高度（Height）也填上200px。代表我们要在这张图片上裁切出宽和高都为200像素大小的一个正方形。拖动已经选择好的裁切区域放置于图片中草地色彩比较均匀的地方，看上去图片中间的位置比较好。要避免放置于图片上颜色较暗的四个拐角，这样做的目的是让我们的无缝拼接图案色彩更加均匀，效果更好。

第三步

点击属性栏后面的对勾，确认裁切。接下来，选择滤镜（Filter）>其它（Other）>偏移（Offset）命令，在弹出的对话框中的水平和垂直栏中各填入100，并且勾选未定义区域中的最后一项Warp Around。你将会得到类似于下图的效果。

第四步

这时你可以看到图片中水平和垂直的不太明显的分隔线，在这一步我们就要消除这两个分隔线。放大图片，选择修复画笔工具（Healing Brush Tool），使用合适的画笔大小，大概20个像素左右，修复图片中的分隔线，直到看上去不那么明显。

第五步

这个无缝拼接图案就已经完成了。选择文件（File）>存储为Web和设备所用格式（Save for Web&Devices），选择JPEG格式，80%的质量保存。为了测试图片的效果，我们将图片平铺于页面测试一下，如下图：

总结

Photoshop滤镜中的偏移（Offset）命令是制作无缝拼接图案的关键。利用这项技术不仅可以拼出足球场，还可以拼出很多其它的页面背景。而且熟悉了之后，你会发现这种技术既简单又功能强大。绝对是网页设计中最常用的技术之一。

扩展阅读：

无相关文章

11个温和的破旧风格的网页设计

wantfee — Tue, 08 Jun 2010 02:45:29 +0000

破旧风格的网页设计应该说是一种有着强烈风格的设计，给人的感官冲击十分突出。但是如果适度的应用破旧风格的元素，或者和相应的一些色彩搭配的话还是可以做到含蓄的同时不失破旧风格的魅力。而这种相对温和的设计风格更容易为人所接受。下面是网上的一些设计作品，风格相对温和一些，值得在设计时参考和借鉴。

1、CorkingDesign

2、31Three

3、Mindutopia

4、Snook

5、LePush Mail

6、Kean Richmond

7、Jason Julien

8、Abbey Theatre

9、Web Gab

10、Nathalie Kosciusko-Morize

11、JOBY

六月 4, 2010 -- 如何在Photoshop中创建一个破旧风格的网页设计 (2)

如何在Photoshop中创建一个破旧风格的网页设计

wantfee — Fri, 04 Jun 2010 09:02:07 +0000

Photoshop是做网页设计的非常好的工具，特别是如果你要在设计中使用大量的图片和笔刷效果的话。在这个教程中，我会教给你如何完成一个破旧风格的主页设计。我们将要设计页头、侧边栏、主体、页脚以及所有一切非常有质感和破旧效果的设计。

第一步

这次我们要使用Photoshop创建一个破旧风格的网页设计，需要用到很多的图片。由于这是一个中间难度的教程，我将会略过对于基本步骤的解释。首先创建一个宽950像素高800像素，分辨率为72dpi的新文档。将标尺打开，拖拽出文档的边界，这将会是设计的最佳区域。我计划设计一个固定宽度的布局。

选择图片>画布大小，增加宽度和高度到1200像素和1000像素，这样做是为了宽显示器的分别率设计。然后给你计划添加内容的区域（页首、导航栏、侧边栏、页脚）增加参考线。

让我们假设这个设计最终目的是一个wordpress主题，因此我们需要一个页首，一个在页首中的导航栏以及一个右边的侧边栏。如下图所示。之后将背景色填充为#7A8173。

第二步

现在我们要给页首的背景创建图案。很简单，创建一个50像素宽，300像素高的文档，画出如下图所示的图形。我使用了参考线让图形尽可能的对称。然后选择编辑>定义图案，保存为”Pattern 1″。

第三步

在主设计文件的新图层上，使用矩形工具画出一个300像素高的矩形。打开图层样式，添加图案叠加，选择前面创建的图案。为了达到理想效果，你必须点击贴紧原点按钮。将图层的填充不透明度更改为0%，在这个图层上再创建一个新的图层，将两个图层合并，这种方法可以让你直接给页首增添效果。将这个图层命名为Pattern1。

第四步

选择”Pattern 1″图层，给它添加一些图层样式：投影、渐变叠加以及图案叠加。尝试着得到如下图所示的结果，使用如下值。

第五步

现在我们要添加导航栏背景。画出一个矩形盖住”pattern 1″图层一点点。给矩形应用图案叠加、黑色到黑红色的渐变叠加以及柔和的投影。使用下面图片所示的值作为参考。接下来，添加图层蒙板>隐藏全部，在图层蒙板上画出黑色到白色到黑色的渐变，你将会得到如下图所示的结果。

第六步

现在在”Pattern 1″图层上方画一个椭圆（#691E1B），命名为”Light”，给其应用50个像素半径的高斯模糊。我又创建了一条额外的参考线，方便将椭圆放置于页首的中间。将超出导航栏下方的所有部分都删除掉，更改图层的混合模式为颜色渐淡。

第七步

为了完成布局的第一部分，接下来我们要画出侧边栏的背景。创建一些参考线来给侧边栏划定界限并且调整已经创建好的参考线，使他们适应目前的布局。然后画一个红色的矩形（#3D100B），应用如下图层样式：阴影、颜色叠加以及图案叠加。

这个时候你必须考虑之后如何将图片剪切以适应在HTML和CSS中使用。这也就是为什么我在应用投影时经常将距离设置为0像素的原因，而且只使用水平或者垂直渐变。这个案例中的材质有很多的水平线。在很多区域需要很容易的转换成可重复的背景图片。而且，这个时候也是稍微休息一下，将图层好好组织一下的时候。

第八步

现在开始设计细节，我想将网站名添加到显眼的位置，这就是为什么我会使用这张漂亮的破旧标签图片。很显然，你必须将标签放置到我们这个设计的左上角。试着作出如下图所示的效果。接下来，使用魔术棒工具选择棕色的圆圈，然后使用Ctrl+Shift+I反选选区。使用如下值调整色阶和色相/饱和度。

第九步

现在使用橡皮擦工具和不整齐的画笔，删除标签的一部分边缘。要添加剪纸效果，选择减淡工具，使用和上面相同的画笔形状给标签的边缘应用减淡。

第十步

下面要给标签添加阴影。首先，将”Label”图层复制一遍，更改色相/饱和度中的亮度到-100，在添加10个像素半径的高斯模糊。接下来，将”Label copy”图层的混合模式更改为正片叠底，将不透明度设置为75%。

第十一步

标签的最后一个修饰，将饱和度更改为-40，使其更加灰暗一些。

第十二步

现在我们添加一些图片，找一些符合这个风格的图片，由于我们这个教程主要讲解技术，所以我随便选了一张。这是一张漂亮的玻利维亚高原上的生锈的火车的图片。将火车从图片中提取出来。然后将火车图层的混合模式更改为变暗。

第十三步

我们来添加一些文字，首先是网站名。使用grunge字体键入文字，你可以在这里找到这样的字体。标题文字使用黑色，将图层混合模式更改为叠加，然后将此图层复制一遍，将复制的图层的不透明度更改为75%。为了得到一点点的模糊效果，将复制好的图层向左或者向右移动一个或者两个像素。使用这个技术添加更多的文字，比如标语等等。这个时候我们将导航链接也添加上。

第十四步

现在添加更多的东西，都是破旧风格的东西。我从这里下载了一些Jenn B的笔刷，这些笔刷是有使用上的限制的。使用这些笔刷添加一些数字、边角、胶带等等，在这一步中你可以尽情的发挥。只是要记住添加的所有图层都要在”Label”和”Label copy”图层的下方。

第十五步

现在我们开始添加页面部分。首先，在页首部分我们需要一个搜索框。键入搜索文字。接下来，画出一个红色的（#6A0400）矩形作为搜索表单，然后应用描边和图案叠加图层效果。

第十六步

现在我们在设计中添加主要内容区。首先我们要添加一个放置特别文字的区域。在侧边栏下方的图层中画一个深灰色（#0D0F0E）的矩形。我创建了四个文件夹来组织图层：一个在所有图层之上的”Header”文件夹，一个在”Header”文件夹之下的”Sidebar”文件夹，一个在前面两个文件夹之下的”Content”文件夹，最后一个是”Footer”文件夹。

你可以将这个矩形画到”Content”图层上，也可以给上面的四个文件夹中添加更多的文件夹。当你将矩形放置于合适的位置之后，使用下面的值应用投影和描边效果。

第十七步

从这里下载一些破损的边角和边框，在灰色背景上粘贴一个。将其颜色更改为#171612，图层模式为叠加。再给侧边栏的背景上也添加一个，这次将不透明度降低到25%。

第十八步

让我们来添加一些文字。想象这是类似于由javascript驱动的最新日志，或者特别内容的日志区。我在这里使用的是和导航栏上一样的破损字体，颜色为#4D0D0D，正文部分用的是#3F3F3F色的Arial字体。

给标题应用投影效果，导航栏也一样。当你将这个PSD文件转换成HTML+CSS的时候，你需要将此标题转换成图片，所以这个时候你给它们添加样式是可行的。最后，使用参考线将文字图层放置于合适的位置。

第十九步

我们的特别区域看上去有一些空白，因此我们来添加一些图片。在这个教程中，我使用了一张宝丽莱照片，你可以在这里下载宝丽莱图片。提取宝丽莱图片，将其放置于灰色背景之上的图层中，然后更改色相/饱和度让宝丽莱图片接近棕黑色。（需要勾选彩色化选项）。

给”Label”图层的边缘应用相同的技术（第九步）。将宝丽莱图片的边缘删除一部分并且将颜色渐淡。最后使用在第十步中相同的技术给其添加投影。

第二十步

我将自己的旧照片添加到了设计中。在”Polaroid”图层上添加一个新的图层，将照片放入其中，选择宝丽莱的黑色区域，按下Ctrl+Shift+I反选选区。选择照片图层删除额外的部分。接下来，你可以添加更多的破旧效果，比如照片之上的胶带纸，如下图所示。我还给胶带纸添加了1个像素的投影效果。

第二十一步

是时候给侧边栏添加RSS图标了。画一个圆角的矩形（#99917E），然后给它添加如下效果：内发光、图案叠加和投影，使用下面图片上的值。接下来，在矩形之上画出或者粘贴一个RSS形状，填充为黑色。最后，将”RSS shape”图层的混合模式更改为叠加。

第二十二步

现在将RSS图标放置于侧边栏的左上角。添加类似”RSS FEED”的文字。画出另外一个胶带纸，将订阅者的数字放置其上。记住，我们现在是在”Sidebar”文件夹中工作。

第二十三步

现在给设计中添加日志。随便写一些文字作为标题，另起一行写出日期、类别以及作者。再写出日志内容。这一步中最重要的就是排版。我喜欢给标题应用Serif字体，给正文应用Sans-Serif，这只是我的喜好。你可以选择你喜欢的字体。

第二十四步

为了给日志增加细节，我们需要添加一些图片，就像TUTS网站那样，但是因为这是一个破旧风格的设计，我们需要将图片弄得旧一些。这简单的就像在CSS中增加上下内边距，然后设置一个重复的背景图片。

这个图片是35毫米的胶卷。从胶卷中提取上下两边，使用如下图所示的数值改变它们的色相/饱和度。接下来，使用不规则的橡皮擦删除图片的部分区域。最后，给每一条图片增加投影。完成胶片的效果之后，在胶片图层之下粘贴图片。我使用了一张我旅行时的照片。最后给图片增加描边效果（#2F261D）。

第二十五步

在日志下画一条2个像素宽的线条，增加评论数字。将所有涉及日志的图层放入”Post”文件夹中。之后你可以使用裁切工具给文档增加一些高度，这样做的目的是看看如果有2-3篇日志的设计效果。复制”Post”图层组，如下所示改变文字和图片。

第二十六步

看起来不错，现在给侧边栏增加项目。你可以给每一个项目创建一个文件夹。

第二十七步

现在增加列表图标。你可以使用任意的自定义形状。随意增添一些文字，我使用的是Georgia字体。复制图标，编辑其中的一个表示鼠标悬停状态。其它的项目也这样来做。

第二十八步

我们快要完成了。给侧边栏底部增加一些破旧效果，在侧边栏图层的上方新建一个图层，添加破旧笔刷效果。选择侧边栏背景层，然后选择图层>图层蒙板>显示全部。接下来，使用不规则黑色笔刷隐藏侧边栏背景的左下角。

第二十九步

最后，选择侧边栏背景图层，拷贝它的图层样式。在设计的下方画一个矩形，放入”Footer”文件夹中，粘贴样式。接下来，提取并粘贴这张图片到页脚的背景上。

调整不饱和度让它变得更灰暗一些。你也可以使用步骤10中的技术给它添加投影效果。在这张纸上添加一些文字，可以是标语什么的。添加一些页脚文字，比如导航条和版权信息。

结论

网页设计不是容易的事。但是我希望这个教程能帮助你提高你的技术。现在是轮到你设计你的网页作品的时候了。

原文：How to Create a Grunge Web Design in Photoshop

六月 19, 2010 -- 给照片的说明文字添加亚光背景 (4)
六月 8, 2010 -- 11个温和的破旧风格的网页设计 (0)
五月 19, 2010 -- 带有橙色标题的内容区 (4)
二月 24, 2010 -- 创建一个非常酷的3D网站设计效果 (1)
二月 1, 2010 -- 如何创建一个简洁、光滑的web2.0网站页脚 (0)

飞鱼的声纳

如何创建你的favicon？

一、下载插件

二、开始设计

三、将不同大小的图片打包

四、将图片放入主题包的根目录中

五、测试

六、各种不同样式的漂亮的favicon

相关文章

柳比歇夫的时间事件记录法介绍

相关文章

wordpress主题下载——Green Gaint(绿巨人)

主题信息：

主题预览：

主题捐助：

应用说明：

更新说明：

下载主题：

相关文章

我的时间管理系统

相关文章

手绘风格笔刷

相关文章

设计更人性化的返回顶部链接

相关文章

给照片的说明文字添加亚光背景

最终效果：

第一步

第二步

第三步

第四步

第五步

第六步

第七步

最终效果

相关文章

在Photoshop中创建不规则无缝拼接图案

为什么不能直接将图片平铺？

第一步

第二步

第三步

第四步

第五步

总结

相关文章

11个温和的破旧风格的网页设计

相关文章

如何在Photoshop中创建一个破旧风格的网页设计

相关文章