[参赛]Hype高调质感(Blue) by ABEL skin设计简洁不失细节刻画<最后更新：10.14>

参赛, 设计, 皮肤

本帖最后由 abel 于 2009-10-16 08:38 编辑

Hype高调质感(Blue)
http://i412.photobucket.com/albums/pp205/suzihan/hype21.png
皮肤下载：

  http://www.ioage.com/skin.png

http://i412.photobucket.com/albums/pp205/suzihan/download_btn1-1.png

Hype 高调质感皮肤 1.0.3版本更新： 2009.10.14 （感谢开发团队 netac 同学的提示）
1. 制作状态栏按钮，不再使用TW默认按钮样式。
2. 修改隐私浏览模式按钮的效果，增加隐私浏览模式小图标一枚。
3. 修正刷新和停止放在地址栏后面时的图标效果，现在不会出现显示问题，按钮和地址栏均可显示正常。
4. 1.0.3 版本是最终参与比赛评选的版本。皮肤文件最后更新 2009-10-14 14:30

Hype 高调质感皮肤 1.0.2版本更新： 2009.10.10
1. 修正多项工具栏按钮以及界面按钮的按下状态样式，更加突出按下按钮时的状态。
2. 提高工具栏按钮的鼠标滑过状态的亮度。

Hype 高调质感皮肤 1.0.1版本更新： 2009.10.09
1. 设置地址栏域名突出显示颜色。
2. 修正标签上关闭按钮不够明显的问题。
3. 修正恢复标签按钮样式。
4. 窗口关闭按钮从红色修改为浅色，统一色调，方便用户自行调整皮肤色相。
5. 重新制作搜索框、收藏夹文件夹、工具按钮、查找框按钮等图标。
6. 修改标签滑块背景样式。
7. 其他细节微调。

谢谢提出意见和建议的各位网友！谢谢！

皮肤预览图 333x140

皮肤入围预览图 252x135

作品版本：1.0.0

作品简介：
这一款TW3皮肤的名称是Hype(Blue)高调质感，很简单，突出着重体现的是质感和形式上的高调，标签栏采用不规则形式，当前标签高度和后台标签视觉高度不同，
更能突出在大量标签中哪个是正在浏览，也很直接的解决了很多皮肤当前和非当前不宜区分的弊端。特殊设计的“新建标签”按钮也更能体现出设计中的细节用功之处。蓝色
白色的搭配较为简洁。当然，简洁不代表简单。每个按钮和区域的渐变、描边色值也是经过推敲而选择的。为了降低皮肤对浏览页面内容的干扰，图标和部分小型按钮尽量化
繁为简，给用户一个清爽的用户体验。

皮肤已经过作者多次测试，欢迎大家试用，更欢迎大家提出意见和建议，谢谢。

使用建议：
标签栏紧挨地址栏下方。
排一行按钮（就是默认按钮布局的高度，这样显示效果最好）
不开ctrl B 的收藏夹
栏标签上显示标签分组颜色可关闭(颜色效果做了，只是从我个人角度来说不是很喜欢这个功能)
皮肤Bug联系方式：论坛站内短消息；或Email abel@ourden.net

【多图】皮肤预览！

  这是使用TW3 选项内调色功能实现的。

整体效果图 PS 设计过程

  分好组和层很关键。对以后的修改有非常大的好处。

作者 ABEL ：
作者自己也算是设计行业内的一个小小的一员。同时也一直是TW的用户，从2.X版本一直在使用TW，此次升级TW3也是有很大的兴趣，也在慢慢适应TW3的新特性。也感谢TW的制
作团队给网友带来这么好用的IE核心浏览器！
自己主要是做网页设计，插画设计，平面设计的（现在某大型媒体门户网站任职设计师）。对于浏览器皮肤这类软件UI的设计接触的虽然很多，但是自己实践制作确不敢说有
很多经验，所以也希望各位做UI经验较多的高手前辈多多指点指正。谢谢。
第一次接触TW的皮肤制作（早在TW2.X时代就曾有为TW做一款皮肤的想法，但是由于当时自身时间不是很充裕，另外没有专门的皮肤软件可以辅助制作TW的skin，所以这个想法
直到现在才完成。另外赞一下，皮肤制作插件的确不错，容易上手，新人也能制作skin了）
另外也对新手说一下，制作skin并不是找一些漂亮的图标拼凑一下即可。而是需要先做出一副效果图，然后根据皮肤制作插件的提示，分别切图。最终找bug，才能算完成一套
skin的过程。（所写内容如有不当，望高手不吝指教）

icons和皮肤中的元素（除去少数保留TW原版icon）均由ABEL制作。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

我的blog： http://www.ourden.net/abel
网站：  http://www.ourden.net
作品一览： http://www.ourden.net/abel/go.php/component/work

http://i412.photobucket.com/albums/pp205/suzihan/download_btn1-1.png

http://i412.photobucket.com/albums/pp205/suzihan/hype21.png

附件: 您需要登录才可以下载或查看附件。没有帐号？加入我们