任鸟飞网站设计博客 - 关注网站网页设计、网站博客推广优化及赚钱 » 网页美工

Google.com 英文版首页页面设计简洁而不简单

任鸟飞 — Thu, 09 Feb 2012 12:26:18 +0000

Google.com 英文版首页 http://www.google.com/ncr 页面设计相当简洁大方，左侧顶部只有一个Logo，页面中间放置搜索框，能立刻抓住用户的眼球，而在页面底端放置了一些常用链接，整个页面布局主次分明。

不过我发现一个小问题，Google使用的是即时搜索，在搜索框中输入关键字后，会自动跳转到其他页面，问题是搜索框下面的 Google Search 和 I’am Feeling Lucky 这2个按钮还有什么作用？是不是有点多余？

如何设置 WebKit 浏览器滚动条属性

任鸟飞 — Mon, 06 Feb 2012 11:32:00 +0000

为了增加页面的视觉效果，基于WebKit的浏览器可以通过定义伪类 ::-webkit-scrollbar 属性来设置滚动条的属性（大小，颜色，位置，背景等）。注：请使用Chrome浏览器来体验滚动条效果，不支持IE Opera Firefox。

设置 WebKit 浏览器滚动条属性的7条 CSS 伪类：

::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

11种滚动条类型

:horizontal（水平方向）和:vertical（垂直方向）使用的最频繁，其他很少使用。

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

滚动条设置示例：

CSS代码：

/* For the “inset” look only */
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}

/* Let’s get this party started */
::-webkit-scrollbar {
width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}

网页大背景素材下载

任鸟飞 — Thu, 10 Nov 2011 11:04:02 +0000

分享5个精致的网站头部（header）背景素材，效果很炫。

1. 棕褐色的渐变光晕效果背景图片

2. 蓝色渐变光晕效果背景图片

3. 蓝色棕色气泡渐变背景素材

4. 蓝色棕色气泡渐变背景素材

5. 蓝色气泡渐变背景素材

Twitter 首页改版

任鸟飞 — Sat, 23 Apr 2011 00:39:45 +0000

新版 Twitter 首页更简洁，突出强调了登录框和注册框，方便用户快速登录或注册。

改版前

改版后

分享一些网页上常用到特殊字符

任鸟飞 — Wed, 09 Mar 2011 04:45:15 +0000

为了增加页面美观，经常会使用一些小图标，查看源代码你会发现这些图标是用图片做出来，其实有些图标完全可以使用特定的编码来显示，下面是一些常见的，而且很漂亮的特殊字符，可以直接复制粘贴到你需要的位置，比如评论等等。

❝ ❞¥$®©™°

±√‰Ω≈~

½¼¾⇧↩

⁂∴∵※←→

↑↓☜☞☝☟

✔★☆☼☂

☺☹☃✉✿✄

✈✌✎♠♦♣

♥♪♫♀♂

更新博客主题

任鸟飞 — Sat, 05 Mar 2011 10:41:37 +0000

正如电影《手机》中，费墨所说：“在一张床上睡了20年，的确有点审美疲劳”。博客的主题也是，用的时间长了，就产生厌倦心理，为了保持网友的新鲜感，博客主题更换频率控制在一年以内比较好。花了2天时间，我重新设计了任鸟飞网页设计博客的主题，新款主题更注重简洁高效。

任鸟飞网页设计博客之前的主题样式

主题设计过程中着重考虑的问题点

1. 删除大量广告位
刚写博客的时候，带有很大的功利性，主要是以赚钱为目的，所以加了很多广告位，但理想和现实总是遥远的，至今百度联盟还没到最低支付额（100元）。

如果你的博客刚建立没多久，访问人数还在2位数转悠，就别老想着赚钱了，最终可能得不偿失。当然大部分人还是希望依靠博客赚钱的，我建议广告位数量最多不要超过2个，在不影响网站用户体验的同时，也能满足一下自己小小的虚荣心。

2. 化繁为简，突出博客内容
读者关注的是博客的内容，所以博客主题应尽量凸显内容，应删去那些杂七杂八，花里胡哨，无关紧要的东西。

3. 细节设计
之前的主题太紧凑，看时间长了容易造成眼睛疲劳，新版主题增加了大量的空白设计。

评论部分采用了 twentyten 主题的样式，并将发表评论表单样式稍作修改，整个表单中的内容比例更协调，看起来更舒服一点。

每篇文章标题处增加 发表时间，让读者清楚文章发表的日期，以便读者快速判读内容的时效性。

使用主题默认的 页码导航形式。博客的最大特点就是动态性，读者很少去看以前的文章，博主必须经常更新博客内容，而大多数读者能翻2到3页就不错了，所以使用默认的页码导航即可满足要求。

新主题问题点

主题制作的比较匆忙，肯定有很多问题，希望大伙多提提建议。

我不喜欢高朋网

任鸟飞 — Thu, 03 Mar 2011 01:20:46 +0000

高朋网是由Groupon和腾讯出资组建，注定是个宠儿，一出生就吸引了足够的关注，但关注高朋的群体大多都是IT从业者，而身边普通网民都还没听说过高朋网。

高朋第一次上线仅持续一天，腾讯便把网站服务器的电源给拔了；而第二次上线，也就是现在看到的模样，鄙人实在是不敢恭维现在的页面设计，下面是个人的一些愚见，仅当抛砖引玉。

1. 网站名称不好听

高朋这名字听起来很生硬，还是糯米团之类的听起来舒服，同时也能拉近与网民的距离。

2. 页面跳转没必要

打开gaopeng.com后，页面跳转到http://www.gaopeng.com/gaopeng/lp/gaopeng/gaopeng.php，不知他们是怎么想的.

3. Logo设计的真难看

4. 字体选择搭配真差劲

中文字体一般不适合使用斜体样式，看起来很不舒服。

5. 展示图片选择不恰当

虽然外国女人很漂亮，但这是在中国，而且是大陆，放个外国妞是什么意思呢？

6. 图片无连接

页脚的图片连个链接都不加，放个广告图片好玩吗？

7. 其他页面设计不正式

联系我们服务条款隐私申明页面做的实在是太不正式了。

总之，高朋网页面设计太仓促，很多细节不到位，我估计高朋网的页面设计来自一个初出茅庐的设计师之手。

中国设计师个人博客大全

任鸟飞 — Fri, 07 Jan 2011 10:17:09 +0000

关注设计,跟随设计师的步伐，寻找设计的灵感。这里收集整理了有关网页设计、WordPress、UI设计、视觉设计、平面设计、创意设计、工业设计、室内设计等领域的设计师博客，希望一起关注，一起分享创意设计。

网页设计

创意设计

工业设计

Icecream 冰淇淋
 Since 1984
椅子壹仟
 LED灯光之家
 Design4Bread
创意产品 – 玩意儿
 奇趣发现
 乐新土
 至美创意主题家居
 赵丽萍 | 为设计而生
 设计师-任鸿飞

室内设计

60designwebpick.com
ibbs | 室内设计资讯
 云*空间 | 专注室内设计
 丽局生活 | livege.com
室内设计师之路
 木智工坊
 中国设计资讯
 木偶走天涯 – 分享優秀生活家居
 谷德设计网

利用 Photoshop 制作 Beveled 坡口效果

任鸟飞 — Wed, 10 Nov 2010 14:48:43 +0000

点线面是一切美工设计的基础，之前介绍过边框和线条美工设计的5个技巧，这里详细讲解如何利用 Photoshop 制作 beveled 坡口效果。

最终效果图：

制作原理:

通过在图层样式中设置投影、内阴影、渐变叠加、描边来实现上述效果。

制作步骤：

1. 制作圆形矩形框

直接利用“圆角矩形工具”画出一个圆角矩形框，然后“栅格化图层”（可省略）。

2. 设置图层样式

具体设置参考源文件，实现这个效果最主要的设置是 “内阴影”，“设置阴影颜色”为白色，然后根据需要将透明度减小到30%左右，投影角度设置为 90度。

源文件下载

详述 Illustrator 描边功能

任鸟飞 — Fri, 22 Oct 2010 08:47:57 +0000

描边是Illustrator中最简单也是最常用的功能。利用描边功能可以制作虚线、圆角、倒角、倾斜、旋转等。

首先打开描边窗口，步骤：窗口/描边，快捷键 Ctrl+F10，描边窗口如下图右所示：

下面详细说明一下描边窗口中各个设置项的含义

粗细：20 pt 平头端点圆头端点方头端点。

平头端点的含义就是线段的端点的形状为平头，其他类推，示意图如下。

斜接限制：5倍斜接连接圆角连接斜角连接。

斜接限制试制拐角处的连接方式，示意图如下：

对齐描边：使描边居中对齐使描边内侧对齐使描边外侧对齐。
（说明：对齐描边只适用于封闭曲线，其他情况显示灰化样式。）

对齐描边的含义是指描边宽度位于曲线的哪一侧，示意图如下：

虚线：虚线长度间隙长度虚线长度间隙长度 ……，示意图如下所示：

您可能也喜欢：
超强山寨版 Google Logo 标志	Google.cn已转向到Goolge.com.hk	Google网页加速Page Speed	Google+如何退出登录？	Ebay和淘宝开始出售Google社交网络Google+注册邀请码
来自无觅网络的相关文章：
Google 费马大定理 Doodle (@buicaa)	Google推出Google Books下载器 (@internet2share)	我在桃源，google的广告亮了 (@shrekwang)	wordpress博客如何添加Google+1按钮 (@isongxia)	Google推出iPad购物应用Google Catalogs (@internet2share)
无觅

您可能也喜欢：
利用CSS设置透明效果-兼容所有浏览器	如何设置百度搜索结果显示更多条数	解决Chrome最小字体限制	HTML5 新增标签响应事件浏览器支持一览表	如何编写兼容多浏览器的CSS代码
来自无觅网络的相关文章：
CSS屏蔽Webkit浏览器input高亮和textarea缩放 (@tcreator)	艾瑞调查，手机QQ浏览器成最常使用手机浏览器，但用户更多用UC浏览器访问手机网页？ (@internet2share)	35个横向滚动的网站欣赏 (@sudasuta)	MobiUS：全球第一款HTML5移动浏览器？ (@internet2share)	百度推出Windows Phone 7手机浏览器 (@internet2share)
无觅

您可能也喜欢：
精美PSD格式网页图标	情人节 iPhone4(4S) 手机高清壁纸墙纸背景桌布下载	草绘在网页设计中的精彩运用	任鸟飞首款免费WordPress主题 — 网页美工	利用CSS3制作无背景图片特效按钮
来自无觅网络的相关文章：
17套极好的无缝图案下载 (@sudasuta)	网站背景在线制作及漂亮网页背景素材分享 (@shejidaren)	最新融图背景素材分享 (@sudasuta)	11套网页常用小图标集免费下载 (@sudasuta)	54个迷人的背景图案免费下载 (@sudasuta)
无觅

您可能也喜欢：
网页设计的12种颜色	任鸟飞首款免费WordPress主题 — 网页美工	草绘在网页设计中的精彩运用	分享一些网页上常用到特殊字符	最新-Google发布网站字体目录服务-Web Font Directory
来自无觅网络的相关文章：
CSS网页布局的常用规范 (@admpub)	如何制作一个以绿色为主题的干净的网页效果图-1 (@sudasuta)	在photoshop中创建一个简洁风格的网页效果图 (@sudasuta)	在photoshop中创建一个干净的充满色彩的网页效果图1 (@sudasuta)	在photoshop中创建一个干净的充满色彩的网页效果图2 (@sudasuta)
无觅

您可能也喜欢：
精美PSD格式网页图标	微软雅黑字体的是是非非	50个最受欢迎的的社交媒体矢量图标	草绘在网页设计中的精彩运用	如何在浏览器的收藏夹和地址栏里显示个性图标-favicon.ico
来自无觅网络的相关文章：
21个极好的网页设计用图标 (@sudasuta)	11套网页常用小图标集免费下载 (@sudasuta)	5套页面用图标免费下载 (@sudasuta)	30个专业的网页效果图教程分享 (@sudasuta)	终极黑暗与光版的GUI网页元素 (@99psn)
无觅

您可能也喜欢：
任鸟飞首款免费WordPress主题 — 开发概述	任鸟飞首款免费WordPress主题 — 正式发布	任鸟飞网页设计博客WordPress主题大调	任鸟飞首款免费WordPress主题 — 预览调试	任鸟飞首款免费WordPress主题 — 使用说明
来自无觅网络的相关文章：
WordPress 主题：Side Blog (@citydog)	FoodPress食谱博客WordPress主题 (@99psn)	WordPress主题BrandNew 10合1 博客/组合 (@99psn)	Dispatch 博客商业wordpress中文汉化主题 (@99psn)	wordpress主题模板TSOV (@99psn)
无觅

您可能也喜欢：
任鸟飞首款免费WordPress主题 — 网页美工	简洁且富有创意的平面设计赏析	广告布局优化	15组国外超有创意墙体广告	国外超有创意的性暗示广告
来自无觅网络的相关文章：
网页配色大全告诉你网页如何配色？ (@admpub)	阿卡家招聘网页设计师（北京） (@sudasuta)	网页设计灵感 6个社区网站欣赏 (@sudasuta)	50个以黄色为主色调的网页设计欣赏 (@sudasuta)	30个富有创意的带有插画元素的网页设计欣赏 (@sudasuta)
无觅

您可能也喜欢：
如何在Photoshop中精确指定图形元素的大小尺寸	Photoshop 曲线调整	利用Photoshop制作立体的折叠图	Photoshop 快速制作线条颜色渐变	利用 Photoshop 制作具有近距效果的图片
来自无觅网络的相关文章：
45个高级photoshop特效照片处理教程 (@shejidaren)	设计师的photoshop速记参考表快捷键表记忆图卡收集 (@shejidaren)	在photoshop中创建一个干净的充满色彩的网页效果图1 (@sudasuta)	5,000+Photoshop渐变图层样式 (@shejidaren)	在photoshop中创建一个干净的充满色彩的网页效果图2 (@sudasuta)
无觅

您可能也喜欢：
Illustrator中的数学运算	插画形式的欧美酷站收集	任鸟飞首款免费WordPress主题 — 网页美工	草绘在网页设计中的精彩运用	分享一些网页上常用到特殊字符
来自无觅网络的相关文章：
50套Adobe Illustrator笔刷免费下载 (@sudasuta)	Adobe Illustrator渐变和图案的素材收集 (@sudasuta)	怎样在Illustrator中制作脏兮兮的喷溅效果 (@sudasuta)	在illustrator中绘制一个下雨的窗户壁纸 (@sudasuta)	Illustrator 出现了未知错误 (@jackchen)
无觅