标题: [参赛]Hype高调质感(Blue) by ABEL skin设计简洁不失细节刻画<最后更新：10.14> [打印本页]
作者: abel 时间: 2009-9-29 18:41 标题: [参赛]Hype高调质感(Blue) by ABEL skin设计简洁不失细节刻画<最后更新：10.14>
本帖最后由 abel 于 2009-10-16 08:38 编辑
Hype高调质感(Blue)
http://i412.photobucket.com/albums/pp205/suzihan/hype21.png
皮肤下载：
[attach]81329[/attach] 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
[attach]81318[/attach]
皮肤入围预览图 252x135
[attach]81373[/attach]
作品版本：1.0.0
作品简介：
这一款TW3皮肤的名称是Hype(Blue)高调质感，很简单，突出着重体现的是质感和形式上的高调，标签栏采用不规则形式，当前标签高度和后台标签视觉高度不同，
更能突出在大量标签中哪个是正在浏览，也很直接的解决了很多皮肤当前和非当前不宜区分的弊端。特殊设计的“新建标签”按钮也更能体现出设计中的细节用功之处。蓝色
白色的搭配较为简洁。当然，简洁不代表简单。每个按钮和区域的渐变、描边色值也是经过推敲而选择的。为了降低皮肤对浏览页面内容的干扰，图标和部分小型按钮尽量化
繁为简，给用户一个清爽的用户体验。
皮肤已经过作者多次测试，欢迎大家试用，更欢迎大家提出意见和建议，谢谢。
使用建议：
标签栏紧挨地址栏下方。
排一行按钮（就是默认按钮布局的高度，这样显示效果最好）
不开ctrl B 的收藏夹
栏标签上显示标签分组颜色可关闭(颜色效果做了，只是从我个人角度来说不是很喜欢这个功能)
皮肤Bug联系方式：论坛站内短消息；或Email abel@ourden.net
【多图】 皮肤预览！
[attach]81319[/attach]
[attach]81320[/attach]
[attach]81321[/attach]
[attach]81322[/attach]
[attach]81323[/attach]
[attach]81324[/attach]
[attach]81325[/attach] 这是使用TW3 选项内调色功能实现的。
[attach]81327[/attach]整体效果图 PS 设计过程
[attach]81328[/attach] 分好组和层很关键。对以后的修改有非常大的好处。
作者 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
作者: abel 时间: 2009-9-29 18:45
本帖最后由 abel 于 2009-10-14 14:38 编辑
希望大家多多支持！谢谢
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
二楼写更新日志
2009.10.14
1.0.3版本更新：
1. 制作状态栏按钮，不再使用TW默认按钮样式。
2. 修改隐私浏览模式按钮的效果，增加隐私浏览模式图标一枚。
3. 修正刷新和停止放在地址栏后面时的图标效果，现在不会出现不问题，按钮和地址栏均显示正常。
4. 1.0.3 版本是最终参与比赛评选的版本。皮肤文件最后更新 2009-10-14 14:30
[attach]82621[/attach]
2009.10.10
1.0.2版本更新：
1. 修正多项工具栏按钮以及界面按钮的按下状态样式，更加突出按下按钮时的状态。
2. 提高工具栏按钮的鼠标滑过状态的亮度。
[attach]82620[/attach]
2009.10.09
1.0.1版本更新：
1. 设置地址栏域名突出显示颜色。
2. 修正标签上关闭按钮不够明显的问题。
3. 修正恢复标签按钮样式。
4. 窗口关闭按钮从红色修改为浅色，统一色调，方便用户自行调整皮肤色相。
5. 重新制作搜索框、收藏夹文件夹、工具按钮、查找框按钮等图标。
6. 修改标签滑块背景样式。
7. 其他细节微调。
[attach]81936[/attach]
http://i412.photobucket.com/albums/pp205/suzihan/download_btn1-1.png 点击此升级到 1.0.3 版本
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ABEL14号留言：
明天就是15号。 应该就是提交作品截止日期。希望各位参赛的朋友都有所收获，也感谢那些给众多作品提出宝贵意见的论坛网友。希望TW越做越好～哈！
短期内可能不会再更新Hype1.0.3版本。
如果对此款皮肤有意见和建议，希望大家跟帖留言吧！谢了。我会在比赛结束以后继续完善，或者尝试做新的皮肤。再次谢谢
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
旧版本文件备份：
作者: ming6595 时间: 2009-9-29 18:46
高手啊 支持下
作者: abel 时间: 2009-9-29 18:47
过奖。谢谢支持！ 哈
作者: abel 时间: 2009-9-29 18:52
本帖最后由 abel 于 2009-9-29 18:53 编辑
另外想问一下。参赛的作品都有一个 在线使用下载使用 皮肤的功能。。。这个是不是我要等管理员来更新呢
作者: sailor00 时间: 2009-9-29 18:58
支持下新作品，继续努力
作者: 天衣无缝II 时间: 2009-9-29 19:21
不错，成熟稳健。
作者: 天衣无缝II 时间: 2009-9-29 19:22
本帖最后由 天衣无缝II 于 2009-9-29 19:23 编辑
现在的作品一款比一款上眼，越发成熟。好。
这种有过渡色的蓝正是我想要的。
作者: 天衣无缝II 时间: 2009-9-29 19:27
越看越喜欢，再顶你一下，
字体很清晰可见，这是很多款其它的作品忽略的。
作者: apol 时间: 2009-9-29 19:52
汗，这款皮肤的完成度，最多也就只有50%，楼主还是完成它吧
作者: Nym 时间: 2009-9-29 19:55
过程很详细~~~
作者: 天海无极 时间: 2009-9-29 20:31
专业高人，作品很不错
作者: apol 时间: 2009-9-29 22:19
楼主的标题总给我一种评委评论获奖作品时的感觉。
作者: 天衣无缝II 时间: 2009-9-29 23:22
好皮顶帖的人这么少，怪事，楼主的这款单看展示图没什么特别，但实际应用的时候一看却非常好。
很干净，清晰。
作者: cs703 时间: 2009-9-29 23:25
完全自己设计，这个要支持一下
作者: Dodu 时间: 2009-9-29 23:39
支持一下 顺便下载试用 哈哈
作者: ajker 时间: 2009-9-29 23:43
LZ有点爱现，不过作品还行~
作者: abel 时间: 2009-9-30 08:21
谢谢夸奖
作者: abel 时间: 2009-9-30 08:21
希望指出不足的地方，我尽量补充完全。谢谢！
作者: abel 时间: 2009-9-30 08:22
哈哈哈，我只是看见了很多直接用网络上的png图标拼凑的皮肤，觉得设计皮肤应该稳扎稳打自己来作。
作者: abel 时间: 2009-9-30 08:24
干净，清晰。也是作为一个浏览器皮肤很必要的两个特征。浏览器毕竟是用来上网看页面的，颜色和花式不适合太过于花哨，这样会抢了页面的视觉效果，而且长时间看容易视觉疲劳。
另外TW2 时代的获奖皮肤大多也是简约类型的。
作者: abel 时间: 2009-9-30 08:26
因为前段时间都是在上班，时间不是很多，所以做这个皮用了比较长的时间。谢谢支持
作者: pader 时间: 2009-9-30 08:58
很好玩的样子,哪天我也做一皮,嘎嘎。
作者: abel 时间: 2009-9-30 09:14
耐心画效果图稿子，是挺有意思的。
制作效果图的过程和网页设计的过程也有很大程度的相似
作者: abel 时间: 2009-9-30 09:16
呵呵呵，有点这个倾向。哈“设计简洁不失细节刻画”
作者: 天衣无缝II 时间: 2009-9-30 09:35
有个小问题，响应不如别的皮肤，有时会造成浏览卡住。
作者: abel 时间: 2009-9-30 09:38
哦？皮肤可以造成这种问题？我的图片都是Png24压缩的，图片也全部经过皮肤插件检测了。我个人使用也没发现这个问题。全部大小也控制在125kb。。。
这个问题，我去问一下管理员。。。。
作者: hawaiicool 时间: 2009-9-30 10:20
很好很好！要的就是这种感觉
作者: abel 时间: 2009-9-30 10:27
多谢支持
作者: amaya 时间: 2009-9-30 11:17
“icons和皮肤中的元素均由ABEL制作，并无借鉴互联网作品”
口气不小嘛， 完全不借鉴是不可能的。
另外lz没必要在这里教人做皮肤吧， 这里有新手， 但是高手也不少， 皮肤的做法也绝非一家之言。
连图层和路径也拿出来现， 这样就专业了？谁做皮肤没一个源文件呢
作者: abel 时间: 2009-9-30 11:27
本帖最后由 abel 于 2009-9-30 11:31 编辑
谢谢您的建议和批评
只是看到参赛区太过简单的皮肤作品很多，所以贴图出来吸引一下眼球。而不是拿这些图层向高手“叫板”。呵呵
互相学习.
PS 不恰当的文字已经修改
作者: tytung2020 时间: 2009-9-30 13:21
哇 真的眼前一亮! 果然是专业
个人感觉, 前进后退按钮和标签关闭按钮的按下效果可以更明显?
作者: abel 时间: 2009-9-30 13:47
过奖。
按下的效果一般是很短暂的（比如按下时 按钮是凹陷的效果），这样按完后按钮恢复普通状态时，颜色和形式有较大反差，感觉有点怪。所以也没有过多的在这一帧上做太多的效果。
谢谢建议。以后可能会修改
作者: hblf 时间: 2009-9-30 15:14
配色和按钮我都特别喜欢，唯独两点有点不太符合我的习惯了，提两句给楼主个参考吧算是。
一个是当前标签做的是不是有点大了？当然为了突出当前浏览的目的很明确，不过总觉得当前激活的这个表情和新建标签的按钮，适当的稍微小一点点可能显得不会那么突兀了吧，非专业人士的非专业思维^_^
另一个是前进后退按钮，为什么没做成后面几个按钮的那种风格呢？我觉得后面按钮相当漂亮了~
作者: juneclyne 时间: 2009-9-30 15:16
确是好皮，怎么没有在线安装呢~~~
作者: abel 时间: 2009-9-30 16:11
谢谢支持。
标签较高原因1:可能是制作过程中我使用的电脑分辨率较大。所以我做的标签高度比大多数主题要高一些。
标签较高原因2:现在为了更好表现质感和突出当前标签体现一下实用性，所以还是选择了加高标签栏。因为TW是多标签浏览器，使用过程中操作最多的也是在标签区域。
谢谢您关于按钮的建议
作者: abel 时间: 2009-9-30 16:12
谢谢
http://i412.photobucket.com/albums/pp205/suzihan/download_btn1-1.png
这个按钮就是在线安装使用
我换了个按钮图。
作者: windows1918 时间: 2009-9-30 16:22
整体感觉非常舒服。
个人建议右上角那几个关闭最大化按钮还需要改进一下
作者: abel 时间: 2009-9-30 16:42
和win7的样式有点像吧。但是是自己做的。呵呵呵。谢谢建议
作者: zhuhao 时间: 2009-9-30 16:46
http://bbs.ioage.com/cn/thread-110817-1-1.html
看讨论版的使用方法。
地址如上。
作者: abel 时间: 2009-9-30 17:05
感谢！我发布的时候不知道这个，后来自己找到了。现在已经添加“在线安装”的按钮。谢谢！
作者: apol 时间: 2009-9-30 17:52
你把皮肤文件夹里的东西都从头到尾顺一遍，看看是不是所有的文件自己都重新做过了。
你现在连状态栏图标，工具图标等，都没改呢。
作者: fangwen 时间: 2009-9-30 18:01
支持一下！！！！！！！！
作者: juneclyne 时间: 2009-10-1 00:39
本帖最后由 juneclyne 于 2009-10-1 00:43 编辑
[attach]81452[/attach]
这三个按钮只有关闭有颜色，我个人感觉是不是有点不太协调呢，特别是把皮肤颜色定义成暖色调的时候，那个关闭的颜色会变成冷色调，反差太明显了，索性都不要颜色不知道会不会好点
作者: auroracxy 时间: 2009-10-1 00:52
本帖最后由 auroracxy 于 2009-10-1 00:57 编辑
好皮 必须顶上去。
地址栏的常用工具 那个扳手图标是不是颜色浅了点
作者: easy2010 时间: 2009-10-1 02:06
皮肤做的不错，讲解也不错！我喜欢。
作者: easy2010 时间: 2009-10-1 03:14
是不是要调整下明暗，我感觉有炫晕感
作者: Gzsod 时间: 2009-10-1 08:39
支持！！！
作者: demon0412 时间: 2009-10-1 09:05
图标太宽大了
不精致
作者: tytung2020 时间: 2009-10-1 17:21
33# abel
呵呵 不客气
关于按钮按下效果, 确实是不十分重要..但是有时按了好像感觉还没按, 心里有点不踏实 
作者: yboo.100 时间: 2009-10-1 18:51
哇塞~ 很喜欢这款皮肤 支持楼主！看了一下你的个人网站，里面的东西很不错！
作者: jasonls 时间: 2009-10-1 19:04
不错 支持个
作者: toe 时间: 2009-10-1 19:06
漂亮.
作者: DreamMail 时间: 2009-10-2 16:07
常用工具按钮最好配套做一个哈
还有状态栏的小图标标们
作者: CPU…临界 时间: 2009-10-2 17:10
皮肤质感很不错，不过个人比较喜欢标签栏和前进后退小一点，也许比例呃有一点失调～
作者: abel 时间: 2009-10-2 17:20
是的，状态栏图标是默认icon
我觉得默认皮肤的状态栏图标做的很到位。谢谢指出
作者: abel 时间: 2009-10-2 17:21
唔，是有这个问题。如果调色后，关闭按钮不太好看。
作者: abel 时间: 2009-10-2 17:21
国庆回家休息。时间来得及的话休息结束后试着改进
谢谢！
作者: ming1168 时间: 2009-10-3 11:35
支持，这效果~~赞叹啊~~~
作者: comicbird 时间: 2009-10-3 12:24
已经在使用中，感觉良好
作者: podai 时间: 2009-10-3 12:38
支持！
作者: mbrim 时间: 2009-10-3 12:49
不错的作品。。。
作者: abel 时间: 2009-10-3 20:18
谢谢支持！
作者: 455058874 时间: 2009-10-3 21:37
期待Chrome哟！
作者: abel 时间: 2009-10-5 09:41
谢谢支持 和建议
作者: abel 时间: 2009-10-5 23:24
自己偷着顶一下帖子
作者: carrel 时间: 2009-10-6 03:17
本帖最后由 carrel 于 2009-10-17 01:39 编辑
试用一下先
作者: dobahu 时间: 2009-10-6 09:46
本帖最后由 dobahu 于 2009-10-6 13:08 编辑
的确很有质感～
http://p4.images22.51img1.com/6000/dobahu/42741c981cf886b7e4a2939368caa19d.jpg感觉这个滑块调成激活标签栏的那种灰色，左右的小三角还是背景的深蓝，这样改一下会更有质感。。。
http://p5.images22.51img1.com/6000/dobahu/56b0de2ac8c93aeb85b294328341569c.jpg底下的进度条个人认为太艳太刺眼了，换成未激活标签的那种深蓝色应该会不错。。。
作者: 世界·之窗 时间: 2009-10-6 10:57
好华丽啊！支持一下！
作者: lglgaigogo 时间: 2009-10-6 13:43
希望楼主把标签上的关闭按钮做大一点、明显一点。
现在在当前标签要想关闭其他标签就不太容易。
作者: abel 时间: 2009-10-6 19:47
谢谢建议！
作者: abel 时间: 2009-10-6 19:49
嗯，的确是个问题。因为我当初的初衷就有点忽略关闭按钮。因为完全从我个人角度出发，我习惯右键关闭标签，而且这个设计未激活标签之间故意做的看上去是链接起来的，所以关闭按钮做的不够明显。 谢谢您的建议
作者: tangyi005 时间: 2009-10-6 21:01
楼主的这款不错，整体设计很符合世界之窗的本色
作者: zhuzai 时间: 2009-10-6 21:03
不错的皮肤，支持一下！
作者: tphack 时间: 2009-10-6 21:53
不错 不错 使用中
作者: light202 时间: 2009-10-6 22:14
很是喜欢 支持
作者: vaio8199 时间: 2009-10-7 07:07
really a hype
you good
作者: 丨书生丨 时间: 2009-10-7 10:51
希望有CHROME版本的
作者: 丫头大宝 时间: 2009-10-8 16:07
好看 我很喜欢
作者: hanxue 时间: 2009-10-8 21:13
本帖最后由 hanxue 于 2009-10-8 22:22 编辑
很不错啊！就是有个按键x鼠标放上去的时候不太突出要是颜色再突出点就好了[attach]81836[/attach]
还有就是还有几个按键不怎么协调一样啊 你比较一下这几个[attach]81838[/attach][attach]81839[/attach][attach]81840[/attach]箭头角只有中间一个是圆的其他都是尖
作者: nothingor 时间: 2009-10-8 22:21
在下使用官网下载的3.065版，无论如何点击都显示安装失败。另外在您主页上点击时页面显示我安装的不是世界之窗3
作者: abel 时间: 2009-10-9 09:02
感谢各位支持
作者: abel 时间: 2009-10-9 09:03
细心。这个可能是有点问题。 我尽快修改下。谢谢！
作者: abel 时间: 2009-10-9 09:05
这个我也不知道如何解决。。。
作者: abel 时间: 2009-10-9 09:06
正在根据大家的建议在修改中。谢谢支持。尽量在截止日期之前修改好。谢谢！
作者: abel 时间: 2009-10-9 14:06
已经修改了新一版本。
Hype 高调质感皮肤 1.0.1版本更新：
1. 设置地址栏域名突出显示颜色。
2. 修正标签上关闭按钮不够明显的问题。
3. 修正恢复标签按钮样式。
4. 窗口关闭按钮从红色修改为浅色，统一色调，方便用户自行调整皮肤色相。
5. 重新制作搜索框，收藏夹文件夹，查找框按钮等图标。
6. 修改标签滑块背景样式。
7. 其他细节微调。
谢谢提出建议和意见的各位网友！谢谢！
备注：状态栏按钮（例如页面静音、页面放大缩小等按钮）保留TW3风格默认样式，因为参赛时间不够充裕，另外，这些16px的icon已经有很高的识别性和友好程度，所以也没有进行较大的改动。所以只是在默认样式的基础上调整了颜色。
作者: abel 时间: 2009-10-9 14:28
已经上传 1.0.1新版本。
2009-10-9
作者: 天海无极 时间: 2009-10-9 15:31
高调终于有调整啦
作者: edwu 时间: 2009-10-9 15:42
好皮原来越多了，支持。
作者: DreamMail 时间: 2009-10-9 16:12
本帖最后由 DreamMail 于 2009-10-9 16:26 编辑
在线安装貌似木有更新哈
希望常用工具按钮能自己搞一个和工具栏图标配套的
作者: abel 时间: 2009-10-9 17:09
谢谢关注。 
作者: abel 时间: 2009-10-9 17:10
谢谢提醒！
在线安装有个版本号，我忘记调整了。现在已经改了。
谢谢～～～
嗯。会更新工具按钮
作者: abel 时间: 2009-10-9 18:09
疏忽，已经更新该图标。
还是1.0.1版本 （以免太麻烦。。。呵呵）
您可以重新下载一下。。。不好意思了
作者: tytung2020 时间: 2009-10-9 18:10
几个按钮都没有按下效果: 最大最小化, 关闭按钮, 隐藏菜单栏, 标签列表, 访问, 搜索
前进后退的按下效果也不明显, 个人提议做成立体的按下
也许你觉得按下效果不重要, 但是其实这是浏览器和用户的一种互动, 可以让整个浏览器没有那么平面和沉闷.
作者: abel 时间: 2009-10-9 18:39
谢谢
会尽量在有时间的时候 再进行更新 谢谢您的意见
作者: 上海婚纱摄影 时间: 2009-10-9 22:26
这个不错。下载了。如果有质感黑色就太不错了。。。。。
感谢。。。可以psd给我么。我用来建一个网站。。。
作者: frrrr 时间: 2009-10-9 22:55
牛B的PP
作者: 丨书生丨 时间: 2009-10-9 23:02
希望有CHROME版本的
作者: auroracxy 时间: 2009-10-9 23:03
怎么未选中标签之间的 那个间隔小竖条没有了 颜色是连在一起的了，
作者: abel 时间: 2009-10-10 08:22
啊，就是这么来设计的，没留分割线。
| 欢迎光临 世界之窗论坛 (http://bbs.theworld.cn./) |
Powered by Discuz! 7.2 |