今天是09年最后一天了，先祝大家在即将到来的2010年里身体健康，生活幸福。 今天打开博客，看到FF状态栏下PR值是３（用searchStatus插件可以很方便地查看pr值，alexa排名等信息的）,不 会吧，难道元旦google要给站长送礼，在09年最后一天给站长一个惊喜？ 先拿起电话给luya和luckygl通报一下喜讯，哈哈，我们做得不错。 说一下我们博客的现状吧（也就当这个博客的年终总结吧），从注册域名，买空间，然后因为备案花了很多时间，所以正式上线时间到现在才１个月多９天的 时间里，我们达到现在(2009月12月31号）的状况: 1.alexa排名：全球综合排名第 262,843 位，中文排名第 11903 位 2.PR值：3(奇怪，为什么查询www.focusec.cn是１,查询focusec.cn是３,是不是因为我们设置的默 认域名是后者的关系？SEO达人帮忙解释一下） 3.点击次数：8629（这个还真得很少） 4.文章总数：25篇（不包括这篇） 5.文章被转载状况:据我们了解，有12个网站/博客转载了我们的文章（有优艾网，帕兰映象，草根网等几个网站） 6.被转载的文章有８篇，分别是： 2010年网页设计趋势 网络的未来：五年后我们将在哪里？ 09年国外最佳photoshop教程 09年国外最佳免费字体 09年国外最佳免费图标集 79个设计专业的网站 30个出色的苹果产品设计 09年国外最佳CSS设计网站 ——————————————–分割线 —————————————————————– 征集友情链接，我们对对此有意的网站/博客的追求： 1.文章有20篇 2.PR值>=3或者有３篇文章被３个网站转载 3.和前端，电子商务，用户体验，互联网产品，设计有关 最重要的是文章的质量吧，上面所说的也可以不算，有意的请留言 —————————————1月１号补 —————————————————————– 今天起来发现，被转载的最多的文章《2010年网页设计趋势》这个页面的PR值居然是４,比首页的PR值还高，这是什么原因？是不是因为别 的博客/网站转载时都链接到它的原因？对SEO了解的人帮忙一下。

阅读本文之前，最好请你先看《怎样在wordpress 中显示摘要和缩略图》并按它的操作方法在首页显示摘要和缩略图， 这篇文章是基于它的基础之上写得，要用到之前的代码和文件，效果请点本站导航栏中任一个就行了. 1.怎样在wordpress中实现把分类当作导航栏 修改模板里的header.php文件（修改之胶最好备份）：打开后台控制面板，外观–编辑–在主题文件中打开点header.php, 把<?php $pages = wp_list_pages(’sort_column=menu_order&title_li=&echo=0′);中的 wp_list_pages改为wp_list_categories，这样导航栏中导航就是以博客的分类来导航，而不是默认的页面。还有就是不同主题这 句语句不一样，比如说我的主题就是<?php wp_list_pages(‘title_li=’ ); ?>，没关系，也是把它改为wp_list_categories，都一样。 2.怎样在分类页面中实现摘要 后台控制面板–外观,编辑–文章索引模板 (archive.php)，找到 <div class=”entry”> <?php the_content(‘Continue reading…’); ?> </div> 把<?php the_content(‘Continue reading…’); ?>改为<?php the_excerpt(); ?>,这样在分类页面中就可以像主页那样只显示摘要了。 3，在分类页面中实现摘要和缩略图 实现以分类为导航栏后，并且也只显示摘要后，如果也想像首页那样也显示缩略图，一样也得把下面的代码加到刚才我们修改好的<?php the_excerpt(); ?>上面。 <?php  $custom_values = get_post_custom_values(“thumb_source”); if (isset($custom_values[0]))  $image_source= $custom_values[0]; else {$id =$post->ID; $the_content =$wpdb->get_var(“SELECT post_content FROM   $wpdb->posts WHERE ID = $id”); $pattern [...]

这是09年国外最佳photoshop教程中的一个教程，更多教程请这里。 概要：在这个教程里，没有复杂的曲线和绘画，仅仅使用非常容易的步骤和技巧就能设计出一个简单而富有吸引力的房屋图标。教程里需要使用的是形状工具 和图层样式。制作这个图标可以让你更加熟悉色彩和图层样式的有效使用。Ok，现在开始吧！ 最后效果图： 步骤1： 创建一个500px * 500 px的以白色作为背景的文件，用钢笔工具画出下面的形状。 步骤2： 增添颜色和浅白色的条纹。双击图层，然后运用下面的图层样式。 步骤3： 复制该图形，然后执行 编辑>变换>水平翻转 ，移动复制的图形如下图所示 步骤4： 由于相同的色彩，看起来有点单调，有必要再装饰一下，打开复制图层的图层样式，做如下的调整 步骤5： 设置前景色为 “830F00”， 用钢笔工具画出如下图形， 命名为 “左屋顶”。 步骤6： 复制该图形命名为“右屋顶”，然后执行 编辑>变换>水平翻转 ，移动复制的图形如下图所示 步骤7： 用钢笔工具画出如下图形，命名为“主体”。 步骤8： 双击图层，运用下面的图层样式 步骤9： 制作屋顶阴影效果，点击左屋顶图层然后执行shift再点击右屋顶图层，制作出选区，移动选区到合适的位置，然后再新图层上把选取填充颜色 “5F5343”。 步骤10： 执行  滤镜>模糊>高斯模糊，半径像素设为10px 步骤11： 也许阴影可能在房子外了，看起来不是那么准确。点击主体图层，反转选区。在阴影层，按delete键。 步骤12： 制作房子图标的门，用矩形选区创建，然后用黑色填充。 步骤13： 给门制作如下的图层样式 步骤14： 对门进行添加细节， 使用圆角矩形工具画一个黑色的圆角矩形，半径3px。 步骤15： 在混合选项里，做如下设置。 步骤16： 复制该图层，然后向下移动图像，如图所示 步骤17： 用椭圆工具画一个小圆圈作为门的手柄。 步骤18： 制作小圆圈的阴影，然后执行径向渐变 步骤19： [...]

这是翻译来自webdesignledger（WDL）的一个09年最佳系列的一篇文章，原文：the best free icon sets.我们已经翻译了09年最佳免费字体，下面是正文内容： 在2009年我们见证了很多富有天赋和慷慨的设计师创作了许多非常精彩迷人的材料，并且让我们自由使用。我们已经给你展示2009年最佳的免费字体（这个原文是英文的，我们已经把它翻译成中文了，原文地址），现在我们将要今年 最好的围标集展示给你。今年有很多免费的围标，但是从质量和实用性上看，这些图标是出类拔萃的。 Basic Onebit Icon Set 2 Hand Pointer Icons WP WooThemes Ultimate Icon Set Led Icon Set MinIcons Grunge Peeling Stickers Onebit Web Injection Watercolor Icon Pack Finance Flavour Extended Social Media Icons Must Have Icons Social Icons Hand Drawn Weby Icons Quartz 转载请注明本文链接｜来自focusec 另外原文下面还有几个相关文章的链接： 1.http://webdesignledger.com/freebies/the-best-vector-icon-sets-all-in-one-place 2.http://webdesignledger.com/freebies/all-the-small-icons-youll-ever-need 3.http://webdesignledger.com/tutorials/22-extremely-well-written-icon-design-tutorials 4.http://webdesignledger.com/tutorials/how-to-create-a-planet-icon-set-in-photoshop [...]

今天在speckyboy上看到这篇文 章,之前我们翻译了不少09年最佳评选的文章，的确现在这样的评选很多，什么最佳的，十大都有，不过这篇文章个人觉得还是比较 好，所以还是把它翻译过来了。 过去的一个星期一中我们发布了2009年49个最佳photoshop教程。后续那篇文章，今天我们有了最佳的文字效果photoshop教程，这 40个不同效果和独特的技巧会给你下一个设计带来更多的精彩。 给３D文字加上梦幻般的色彩（这个教程国内已经有翻译了） 制作烟气文字 用庄重严肃的文字制作金属片 引人注目的文字效果 水流文字效果 毛皮文字效果 发光文字壁纸 深厚的复古文字效果 很酷的沾湿的文字效果 创作色彩丰富的花边的立体文字效果 细节令人印象深刻的文字 创作一个明亮的花边文字效果 创作2009年的褶边文字 逼真的燃烧火炎文字效果 用photoshop制作复古文字效果 创作出色的3D文字 水晶文字 创 作加工一个很强大的文字效果（请英语强人帮忙一下：Create a Steam Powered Typographic Treatment） 爆炸的3D文字 创作冰雪文字 复古风格的生绣金属纤维文字效果 出色的野火文字效果 复古风格背景下的形状几何递增的文字效果 设计光滑的冰块文字 创作被侵蚀的金属文字 3D文字教程 闪亮的书法文字 冰冻的文字 粉碎的3D文字 战神3创意的破裂文字效果 金黄的燃烧火炎文字效果 绚丽的玻璃文字 冰糖涂料在上的文字效果 牛奶文字 用photoshop制作3D文字场景 云文字效果 装饰丰富华丽的文字样例 12步制作烟气游动的文字 铜文字 制 作3D文字与将其与照片合成（用到illustrator) 转载请注明本文链接｜来自focusec

当谈到漂亮精确的Web设计时，Photoshop是一个功能强大的工具。这款软件提供了很多工具和资源，这些东西允许你随时随刻创造出 合乎逻辑并完美的页面。下面是从web design tutorial精 选出来的20个网页设计photoshop教程。这些教程对不同工具和技术有深入运用。这些工具和技术都可以被用来设计出出色的页面。 1  从零开始设计一个漂亮的网站 详 细教程 2  如何制作一个色彩丰富的布局简洁的网站—Photoshop教程 详 细教程 3  如何制作一个独特的Wordpress主题 详 细教程 4  如何在Photoshop制作一个浅色发光的网页 详 细教程 5  企业/商务/软件Web布局（PSD 模板） 详 细教程 6  从零开始绘制处理纸质纹理，然后用它制作一个杂乱风格的网页 详 细教程 7  如何在Photoshop中设计一个Wordpress主题 详细教程 8  设计一个简洁的，现代风格的模板 详 细教程 9  如何设计一个独特的五彩缤纷的网站 详 细教程 10  制作一个质感的网页 详 细教程 11  在Photoshop制作一个清新时髦的网页 详 细教程 12  从零开始制作一个时髦的、高端的网页 详 细教程 13  设计一个高雅深色系的公事包网页(Porfolio [...]

地铁是一个成本巨大的工程，设计这样的工程必须很谨慎，得安排很科学（如果使用不方便再修改就很麻烦）。个人接触得比较多的是深圳的地 铁，发现地铁在可用性方面做得很好，对网站设计挺有借鉴意义的。 １.把用户最需要的信息放在最容易注意到的地方 坐地铁的人一般对列车到哪个站了，对时间，对进出口这些信息最关注 对于列车的车站和列车到站信息，地铁主要是通过下面三个方法把这些信息呈现给用户： 买票时让用户知道他现在在哪个车站和他/她的目标车站的有几个站（这个和购物流程有点相似，设计购物车时最好让用户知道一下距离成功购物还有几个步骤） 在车厢用户出入的门上呈现地铁的行进状况（和面包屑导航栏相似） 在快到站的时候用声音和大号字通知用户（hulu播放视频前的广告倒计时设计和这个挺像的） ２.指引用户 坐地铁的人追求快捷便利，但是地铁又是一个多出口，人流很大的地方，而且地铁的停站时间也很短，在种情况下，指引用户是一件很重要的事情，从地铁相 关方面的设计来说，这方面做得很不错。 地面附近的路口及交通要地，人流量大的地方一般都有地铁的入口方向的标志（尽量让你的网站链接在互联网各个角落出现和这个是不是有点相似）。 标明每个出入口的信息（鼠标经过导航栏的各个栏目时出现相关的介绍）–不好意思，这个图片找不到了，晚点补上 时钟放在出口和下车的地方 ３.帮助使用不便的用户 现在无障碍网站越来越受欢迎了 帮助弱视者：使用色彩醒目的黄色图标和盲道（有关盲道，请点这里） 在深圳，深大就是牛X 这个图标好像是灯光暗的时候也可以帮助一般人 帮助行动不便者：作用垂直电梯 出口垂直电梯 ４.用好小地方，让用户在停留时间可以放松一下 在门口的地方有一个不大不小的电视机（利用好网站中左边或右边的边栏）

看了一些和用户视线有关的书和文章，自己总结一下： 古腾堡图表： 来自Robert Hoekman.Jr的定义:人们在浏览页面或布局的时候，视线往往趋向于从左上角移动到右下角，就好像页面的布局设计有某种自然引力一样。因为人们通常 都是从左至右,由上往下地阅读，久而久之视线自然会沿着这一路径移动。古腾堡图表简单地描述了这一阅读轨迹规律。 左上角是用户的第一视觉落点区(Primary Optical Area,POA),右下角是用户视线的最终落点区（Terminal Anchor,TA）,右上角与左下角是视觉盲点。 感觉adobe的首页就是采用这种布局设计的。 有意思的是：这与著名的可用性专家杰柯柏.尼尔森Jakob Nielsen的研究有很大的不同。 尼尔森F形状模型： 尼尔森在一次眼球追踪的实验中，记录了232个用户对成千上万个网页的视线的变化。发现他们的阅读行为基本上相同，大多数人的视线的变化很像F形 状： 用户视线首先水平移动阅读内容中的上面部分。 用户视线会下移一点，然后再水平移动阅读内容，不过这次阅读的区域要比第一次短。 最后，用户视线会垂直扫描左边内容。 这是尼尔森得出的三张热点图： 这个一个公司的介绍自己的网页 一个购物网站的网页 这是google搜索结果的页面 红色区域最受关注，黄色次之，蓝色很少被注意到，而灰色部分常常是被忽略。 古腾堡图表与尼尔森F形状模型的对比中可以发现，虽然第一落点都是左上角，但是用户忽视的地方有明显的不同，在古腾堡图表中，右下角是用户的最终视 线落点，但是在尼尔森F形状模型中，右下角是没有被关注的地方。 另外，尼尔森还发现一个有趣的现象：虽然一般人都是眼光扫描网页内容的，但是人们阅读一个网页的速度比阅读一张纸的速度要慢25%。 尼尔森说F形状给我们的三个暗示： 用户很少逐字认真地看你网页文段的内容。 第一，第二段最好包含最重要的信息 多采用小标题，小段落和编号 虽然尼尔森研究的用户只有232人（这个基数还不够大），个人觉得F形状模型还是比较适合一般人浏览网页的习惯的（现在很多网站的布局也在无形中培 养用户形成这种习惯）。 转载请注明本文链接｜来自focusec 参考资料： 向怡宁翻译的《瞬间之美》 Jakob Nielsen的F-Pattern For Reading Web Content Screen reading