发新话题
打印

[经验交流] 世界之窗皮肤大赛获奖作者专访(共访问五名)并附有设计教程

世界之窗皮肤大赛获奖作者专访(共访问五名)并附有设计教程

  世界之窗皮肤大赛获奖作者专访


专访(一)


世界之窗论坛ID:raku获奖作品:涂鸦风格

你是通过那个途径了解本次大赛的信息的?
UIRSS网站的首页banner
您是如何了解到世界之窗软件的?
说实话,没看到比赛前根本就不知道还有这样一款浏览器,看到比赛后才装了一个世界之窗,呵呵。
您是学什么专业的?
艺术类,非工业设计
您是从什么时候开始尝试ui设计的?
从04年吧
您现在从事那方面的工作?
软件界面图标设计
您经常去那些设计类网站?
http://www.cnuii.org
http://www.yellowicon.com
http://www.devaintart.com
http://www.lemoons.com/index.asp
http://stockicons.com/
http://www.blueidea.com/
http://www.zcool.com.cn/
对您影响最大的设计师有哪些?
Rokey, Ricky xu, Brisy, 2S studio, David Lanham及TheSkinFactory团队
本次大赛您最喜欢哪几件作品?为什么?
JJying的Arzo,qqf的维纳斯,iconshop的FreeWord
Arzo论坛链接维纳斯论坛链接FreeWorld论坛链接

本次获奖您有什么感想?
这次获奖对我来说意义重大,因为这是我参加很多设计比赛以来得到的第一个奖,也是对我设计的一种肯定,高兴的同时也在鼓励自己要更加努力的学习来提高自己的技术水平。

请谈谈这次获奖作品的构思过程:
为了做出各种不同的风格,还专门花了大量时间研究了一些优秀的界面设计和收集素材,对于整体风格的把握和细节的完善也是经过反复的思考和推敲做出的选择,这也让我体会到要做出一款优秀的作品是十分的来之不易。

整个制作过程您花了多长时间?
构思3天,制作花了2天时间
制作过程中您使用了那些软件和工具?
Photoshop, Painter, IconWorkshop和数位板
是否愿意交流一下制作心得?(例举一个有代表性的图标制作过程)
从7月12日提交第一款Woodwork作品到8月13日提交最后一款作品的短短1个月左右的时间里我总共做了11款风格不同的作品,平均3天左右一款,现在回想起来都会使我自己感到吃惊。除了有好的构思外,熟练的软件操作也是很重要的,把平时常用的命令设置成快捷键,做起图来事半功倍。
附件: 您所在的用户组无法下载或查看附件
Do you know SoCool skin? check here!

IconsBox‘s Blog

TOP

世界之窗皮肤大赛获奖作者专访(二)

作者:世界之窗 出处:世界之窗

世界之窗论坛ID: QQF获奖作品:维纳斯


你是通过那个途径了解本次大赛的信息的?
最早是从网上看到的,确切的说应该是蓝色理想网站。

您是如何了解到世界之窗软件的?

我先通过蓝色知道比赛,然后到ioage.com主页和论坛了解到世界之窗,这是我第一次接触这款软件。

您是学什么专业的?

装潢设计。

您是从什么时候开始尝试ui设计的?

从2002年开始做ui设计。

您现在从事那方面的工作?

网站建设和界面设计。

您经常去那些设计类网站?

蓝色理想,68design等

对您影响最大的设计师有哪些?

其实我的学习过程都是在看网络教材和网上作品,有很多优秀的设计师,不过印象最深的还是eico,觉得他是中国UI界的领头羊。

本次大赛您最喜欢哪几件作品?为什么?

比较喜欢A版的leefi,配色非常出色,图标的质感也处理得很好,非常有特色的一款皮。
leefi论坛链接

本次获奖您有什么感想?

首先非常感谢主办方的这次大赛机会,其实我发现自己在做皮肤的过程中,学到了不少东西,好比游戏,我自己的经验值增长了。因为大赛的宣传做得好,吸引了很多的高手参赛,在自己和别人的对比时,很容易发现自己的不足,也促使我自己进步了,这就好比你在甲级联赛中踢球学到的东西绝不是你踢低级别联赛能够相比的。总之通过比赛,你会收获一些意外的东西。
请谈谈这次获奖作品的构思过程:
其实也没有很周密的构思,只是在做图标的时候,忽然对色彩、质感有了想法,然后就做出一整套风格来,然后再调整。

整个制作过程您花了多长时间?

第一稿花了约4、5天时间,其后又花了些时间陆续完善。

制作过程中您使用了那些软件和工具?

PhotoShop ,Icon Work shop

是否愿意交流一下制作心得?
好的,简单谈谈制作过程中的一些体会,利用光影效果立体化图标:
现在的图标,从最初的平面化,越来越多的朝立体化发展,而立体化,就需要模拟物体(实体)在环境中的形象。
我们知道,现实世界中的物体在人眼看来都是三维立体的,不可能出现那种平面动画中的场景。一个物体要实现立体化,必然需要光源,没有光源,所有的一切至少在人眼看来都不存在了。在光的照射下,物体会有一些基本的特征,学过素描绘画的同学肯定知道,一般的物体(比如球体),都会有几个部分的明暗关系,同理一个图标的光影效果大致可以分为亮部、暗部、反光、投影。
那么现在以一个球体为例,来说明一下光影效果在图标上的应用,之所以选择球体,是因为它必定具有光影效果的几大特征,而且比较明显,而且大部分图标的外形都近似于球体或可以理解为球体。

第一个球体从圆心向四周渐变,看上去比一个平面的圆好一些,但感觉还是一个几何体。
第二个球体模拟光线从左上打入,符合人类的视觉习惯,感觉像一个球体了,但是不够"圆"。
第三个球体有了反光,感觉真正"圆"起来了,但感觉不着边际,好像漂浮在空中,很孤立。第四个球体有了投影,一下子感觉着陆了,有了空间感。
通过这个例子说明了几大光影效果在图形立体化中各自的作用,它们综合起来可以加强图形的立体效果。那么具体到制作图标,往往很多时候并不是球体,那么怎么把刚才的那一套光影效果应用上去呢?

看图标"侧边栏",其实表现的是一个windows窗口,那么以类似上面的立体化过程来说明,首先构思的是一个窗口,填上基本颜色。
第二步模拟上方不远处有一个光源,那么上面亮一些,下面暗一些。
第三步增加些窗口的厚度,给它的边缘增加一个小小的亮面。
第四步相应的在底部增加反光。
最后加上投影,一个立体感的窗口图标就产生了。

再看一个"首页"图标,表现一个小屋,先勾出一个平面的房子。
第二步,模拟光源,给墙壁和窗户增加渐变的变化,再给屋檐增加亮面。注意屋檐和光线有一个夹角,所以它的渐变并不是和他的边平行的。
第三步,增加反光,给墙面增加些反光,也给屋檐一些反光。
第四步,加上投影,由于屋檐是突出一些的,所以别忘了给屋檐加投影。这里告诉我们很多时候投影也可以在物体上,具体看物体的结构,光影效果会有一些差别。
一些规律:
由于离光源的远近不同,漫反射等关系,同一个面上最好也产生一些变化,比如一个立方体,你看到的三面是有变化的,并不只是三个颜色,所以你的所有面最好都有些变化吧。
阴影代表了物体着陆在一个平面上,但有时也可以出现在物体内部,表现物体的凹凸感。
Do you know SoCool skin? check here!

IconsBox‘s Blog

TOP

世界之窗皮肤大赛获奖作者专访(三)



世界之窗论坛ID:iconshop获奖作品:FreeWorld
网名:小鱼   邮箱:888090@gmail.com
你是通过那个途径了解本次大赛的信息的?
回答:我是通过朋友的介绍了解到本次大赛的信息的,这个朋友是之前在遨游皮肤大赛中的奖的iconsbox,也是因为受到他的影响,才有了参加这次比赛的决定。
您是如何了解到世界之窗软件的?
回答:之前也是听朋友介绍过,本身我就喜欢尝试各种软件,特别是可以自定义皮肤的软件,所以我很快安装并仔细的使用了这款软件。
您是学什么专业的?
回答:我大学学的是电脑艺术设计,主要专业方向是UI设计。
您是从什么时候开始尝试ui设计的?
回答:应该在2000年左右就做过一些尝试,但是并没有做过太多完整的作品。
您现在从事那方面的工作?
回答:我现在负责设计部门以及用户体验部门的管理工作,个人主要做用户体验方面的研究。
您经常去那些设计类网站?
回答:chinaui,视觉中国,FWA 。
对您影响最大的设计师有哪些?
回答:这个问题不太好回答,应该有很多,但是说不出对我影响最大的,其实我身边就有好多优秀的设计师,他们每个人身上都有好多东西值得我学习。
本次大赛您最喜欢哪几件作品?为什么?
回答:本次大赛我最喜欢的是Iconboy和Toys , Iconboy一出来给我的感觉就是专业,非常整体,全套图标很漂亮很细致,用色个性但又很和谐,整体包装也不错.Toys则给我眼前一亮,卡通风格的图标做的很漂亮,整个配色非常活泼鲜亮,和图标搭配完美,在我看来它众多作品中最为个性的一款了.我非常喜欢.
iconboy论坛链接Toys论坛链接
本次获奖您有什么感想?
回答:我的参赛作品从整体效果上来说,我还是比较有信心的,但是在很多细节上我觉得还是不够细致,还有不少需要完善的地方。对于获奖还是感觉比较幸运,因为这次比赛的高手很多,出了好多优秀作品。在比赛过程中,每天都能看到一些漂亮的皮肤诞生,这种感觉真的很棒。
请谈谈这次获奖作品的构思过程:
回答:我的作品主要的方向是简洁,美观,实用。所以色调主要以银灰的高调为主,搭配色彩明快的图标,图标的造型希望简单,表意明确。各种按钮操作的相应效果也以轻描淡写的方式,不要强烈的效果,希望用用户用起来根更加舒服。各个区域的尺寸的设定,以及一些线条的表现,目的是为了从空间和视觉上减小各个面板的高度,扩大浏览区域。很多用户使用了这款皮肤,提出感觉好像默认皮肤,其实那就是我的目的和我这款作品追求的方向,或许我还没有达到,但是在我看来,默认皮肤应该是可以考虑到最多用户需求的皮肤,这样的皮肤才可以称得上经典皮肤。
整个制作过程您花了多长时间?
回答:整个作品花了大概1周的时间,因为白天要上班,所以基本上每天晚上花了一些时间来做。我想参赛的大部分朋友应该都只能在业余时间做的,呵呵。
制作过程中您使用了那些软件和工具?
回答:全部制作过程都在photoshopcs2中完成。
是否愿意交流一下制作心得?(例举一个有代表性的图标制作过程)
回答:好的,我就以toolbar上面“主页”的图标为例子简单说一说吧:

1,画布的大小根据你准备做的图标大小来决定,先用矩形工具画出屋顶的基本形状,我是使用一个倾斜45度的矩形叠加出来的,你也可以用自己的方法只要作出这个形状就可以,每条边的倾斜角度最好是45度,这样做出来的边缘会比较平滑。

2,设定屋顶的样式,首先给路径加上渐变叠加做出水晶过渡效果,只需要调整过渡色,我调的颜色是这样的:

填充颜色调整好以后,给这个路径加上一个描边,描边我也是使用过渡颜色,也是上面浅下面深,我的调的颜色是这样的:


然后给路径再加上内发光:


屋顶的样式就做好了,现在可以看看效果:

3,画出房子的下半部分,比较简单,的一个形状,样式只需要加一个由灰色到深灰的描边就行。

4,画出房子门,方法和房子下半部分是一样的,画出形状后,样式加上一个浅蓝到白的渐变填充,和一个灰色到蓝灰的描边就行。

5,最后加上一个投影,小房子就做好了。

6,我们用同样的方法,很简单就可以做出一整套toolbar上面使用的小图标了。在制作的过程中,样式基本上都是使用同样的方法,这样整体效果会比较统一,另外做好的样式最好保存下来,这样会给后面其他图标的制作带来很大方便:

在其他的图标制作中,我只需要选择之前保存好的样式就可以了。
7,完成的图标效果

8,方法虽然简单,但是同样也能实现一些效果或者形状复杂一点的图标制作,例如我做的这个卡车练习,也是用这个方法做出来的:
Do you know SoCool skin? check here!

IconsBox‘s Blog

TOP

世界之窗皮肤大赛获奖作者专访(四)

世界之窗论坛ID:iconboy获奖作品:iconboy
你是通过那个途径了解本次大赛的信息的?
我平时会经常上UIRSS.com上了解一些和UI相关的信息,这次比赛的信息也是通过UIRSS了解的。
您是如何了解到世界之窗软件的?
很早了,我一直就喜欢用多窗口式的浏览器。
您是学什么专业的?
艺术设计。 您是从什么时候开始尝试ui设计的? 早期自己凭兴趣制作的一些游戏时就为自己的游戏做界面了,然后是网页设计。后面通过模仿金山影霸的界面及ChinaUI认识Sky、Rokey、BlueSky时才算是确定GUI设计这条路的。
您现在从事那方面的工作?
目前从事就是GUI方面的设计。
您经常去那些设计类网站?
DeviantArt、UIRSS、Lemoons都是我比较喜欢去的设计网站。
对您影响最大的设计师有哪些?
最早也是受Sky作品的影响,Rokey也是一直影响着我的非常优秀的设计师。
本次大赛您最喜欢哪几件作品?为什么?
我个人比喜欢Aycox的LEEFI、iconshop的FreeWorld,及qqf的江南。LEEFI用起来很舒服,Freeworld的清新和简洁,而江南的细节非常精彩。
leefi论坛链接FreeWorld论坛链接江南论坛链接
本次获奖您有什么感想?
欣慰吧,因为我本身就是从事专业的GUI设计的。不过最大的感想还是和用户间的沟通,因为这次比赛的设计过程中,交流最多的还是世界之窗的用户,没有他们的意见和帮助,这套皮肤不可能这么完善。这和平时工作中的商业设计是不同的。
请谈谈这次获奖作品的构思过程?
我个人总是容易从配色中获得灵感,从开始我的设计就锁定在蓝绿配色上。我承认起初Iconboy这个名字纯粹在偷懒,后来我为了配合这个名字我把一些流行玻璃质感去掉,亚光、深灰蓝的底色配以嫩绿,己及不发散的小图标,最终完成这套设计。
整个制作过程您花了多长时间?
前后大约一周时间吧。
制作过程中您使用了那些软件和工具?
主要在Photoshop完成的大部份设计工作。
是否愿意交流一下制作心得?
好的,不过因为篇幅原因,我就演示一下里面的小图标的制作过程吧。
  不少朋友在接触图标设计时都是直接学习各种矢量软件,主要是不少优秀的图标设计展示都是用超过48x48的大图标来展示的。特别是现在的 Vista,都是用256x256的图标来展示。但实际我们在图标运用中,大尺寸的图标运用非常少,我们每天接触的还是48x48以下尺寸的图标。而对于小图标,非常多的朋友都是直接将其缩小,然后看到缩小消失在有限的像素中的细节抓狂。那么小图标真的有那么强画么?不见得,以下的教程就是我个人在这套皮肤中的小图标设计的过程中的一点经验和心得!
  首先就是要确定一下小图标的尺寸,说到这里,有些朋友就有疑问了:小图标不就是16x16么,还需要确定一下尺寸么。是的,小图标的尺寸默认的确实是16x16,那么我们就先看看下面的效果。

16x16的图标和11x11的文字摹拟效果图

放大后尺寸的差别
  通过上面的图片,我们先整理一些数据:图标尺寸16x16,汉字使用的是宋体12px的点阵字体,但放大后观察得出实际尺寸却是11x11。显然这16x16放在11x11的汉字前比例显得很不舒服。所以我决定使用13x13做为我们图标的尺寸。这时可能也有朋友认为:16x16的尺寸画东西己经够小了,还要变成13x13。先别急,我们慢慢看。

13x13的图标和11x11放在一起看起来很和谐
  或许是现在各样风格的图标作品的影响,图标的造型是越来越复杂。但是很多人忘了图标最基本的意义,那就是代表一定含义的易识别的图形。所以说,无论是什么样的图标,都要满足代表一定含义、易识别、图形这三个部份。
  那么制作工具呢?Illustrator?CorelDraw?不,我们都不用。即然最后是要在13x13上显示,那么我们就用位图制作软件Photoshop来画吧。
  说了这么多,下面我们就开始我们的范例吧,就拿这个图标来演示吧:)
  打开Photoshop,新建一个16x16的画布,虽然我们要画的图标是13x13,但是我们实始需要制作成16x16的图标格式,所以我们在设计过程中,保持上侧和左侧有两个像素的边距,右侧和下侧有一个像素的边距,那么中间的绘画区域就是16-2-1=13
   我们使用圆形选择框画一个13x13的圆形并填充。
  

然后我们用选择框画一个11x11的圆形框并反向

选择菜单:图像>调整>亮度/对比度,将亮度调成-60

我们再选择一个9x9的圆形,将亮度调成-40

同样的方法选择一个7x7的圆形,将亮形调成60

到了这一步,我们按Q键进入快速蒙板模式,从上到下用渐变工具拉一个从黑到白的渐变,然后按Q键退出快速蒙板模式

选择菜单:图像>调整>色相/饱和度,将色相调到-123左右

到这里,我们新建一个图层,画一个11x11的圆形,并填充一个c9c9c9的灰色,将选择框下移一个像素,按Del把下面部份删掉.

打开图层模式,选择"叠加"

我们可以看到一条很细的高光出现了。

下面就是用渐变来画指针了

最后一步我们给底层用图层样式做层描边

然后这个图标就算是完成了

下面图片中有其它几个图标的制作过程,但是细节就靠大家在实践中去体会了。
Do you know SoCool skin? check here!

IconsBox‘s Blog

TOP

世界之窗皮肤大赛获奖作者专访(五)

[url=http://www.chinaui.com/manage/UpLoadFolder/Images/200710/images/p_toys[1].jpg][/url]
世界之窗论坛IDV0932获奖作品Toys
如何知道这次比赛的?
是在UIRSS的站点里知道这次比赛消息的,UIRSS是一个很不错的设计平台类网站。我很感谢世界之窗给我们这个锻炼交流的机会。

您是如何了解到世界之窗软件的?

之前有听说过世界之窗的浏览器,当然主要就是在网络上了解,真正的了解还是通过这次比赛。

您是学什么专业的?

我的专业是网络相关的,不过现在看来并没有派上用场:)

您是从什么时候开始尝试UI设计的?

其实早在两年多以前就开始接触UI设计,当我第一次看到UI作品的时候就非常喜欢,也非常羡慕这些设计师制作出来的一个一个诱人的ICON,当时完全停留在欣赏和羡慕的状态,并没有想去设计一下相关的东西,感觉那离我很遥远。但随着时间的推移我发现我真的是已经爱上了UI设计,所以决定了要动手来制作它,所以就在大约一年前的时候开始了我的UI探险,可谓艰难重重呵呵,但是我并没有后悔这个选择也并没有动摇我对UI的热衷,要知道我并没有美术基础,只是从事了几年的网页设计,UI综合了很多的技术而成,我认为首先就是绘画基础,然后就是色彩的认识,再就是质感的把握,这每一点都不是那么简单的,对我来说,事在人为,我只有努力,努力,努力…同时欢迎大家来我的blog(www.iconhouse.cn) 交流。

您现在从事那方面的工作?

我现在在青岛的一个网络公司从事网页设计和一些简单的GUI制作,青岛的IT业不是很好可以说基本上没有需要UI的工作岗位,这让我真的很头疼。

您经常去那些设计类网站?

经常去的基本上就是UIRSS ChinaUI 视觉中国 这里很感谢我的朋友小鹏他总是会给我分享一些好的设计站点,他真的是收藏了很多呵呵..

对您影响最大的设计师有哪些?

外国的话我比较喜欢的设计师是David Lanham,我想大家也都有看过他的作品,风格我真的很喜欢,不过对我来说那是一个需要几光年才能到达的地方呵呵..国内的话 iconboy Rokey, Hiboo,Dexter.Ren等一些设计师们,首先谢谢他们为中国UI带来了很多伟大的作品,让广大UI爱好者学到了很多东西。
但是要说到影响我要特别的说一下Iconboy 他是中国一流的UI设计师,并在skyUI担任设计师,对于我来说能与他这个层次的设计师交流是一件很奢求的事情呵呵,但是后来发现并不是这样的。 Iconboy他真的很平易近人,我的所有问题他都是一一的给我讲解,并没有表现出大牌的感觉呵呵,他会像一个老师教导学生一样告诉我该如何如何,从中对我的启发还是很多,所以我会叫他师父呵呵,以后应该还会经常打扰他的,在这里先谢谢了
我认为在中国像他这样的设计师并不在少数,但是我认为需要更多这样的人来带领更多热衷于UI设计并且水平并不是很高的人们,只有这样UI行业才会在中国蓬勃发展。

本次大赛您最喜欢哪几件作品?为什么?

本次比赛中passony的AquaBlue 以及iconboy的作品是我非常喜欢的,当然raku的涂鸦风格真的很有意思呵呵
passony的AquaBlue 虽然看上去参照了苹果的风格,但是整体的配色和细节的处理非常的到位非常的漂亮,尤其在配色上的功底可见一斑,是这次比赛中我最喜欢的作品。
Iconboy不用多说无论是整体还是用色都是非常的老道,不过我感觉刷新部分的按钮处理的稍微欠缺一些,如果能换一种方式会变的很完美,这只是我的拙见,呵呵,不知道说的是不是到位。
其实参赛的每一个作品都有其发光点,这让我学到了很多,谢谢所有参赛的设计师。
AquaBlue论坛链接iconboy论坛链接涂鸦风格论坛链接
本次获奖您有什么感想?
Hi 大家好 我是Toys的作者LEON 生活在貌似很美丽的城市青岛,这次参加比赛也是比较偶然,当然很高兴参加了这次比赛,让我学到了很多东西,认识了很多朋友,也谢谢那些支持过我的网友们,因为有你们的支持才会让我更加努力的在UI的路上探险。之前没有参加过设计类的比赛,也是因为感觉自己的能力不足以去获得一个奖项,其实参加这次比赛并没有想去获得什么奖项,只是为了学习和锻炼自己,结果让我很意外呵呵,获得了创意奖,在高兴的同时我更感到了压力,但是我想不管这是不是上帝跟我开的玩笑,我只能用时间去证明,用自己不断的努力去证明。我可以成为一名GUI设计。
请谈谈这次获奖作品的构思过程:
这次比赛我一共做了两个方案。其实我更看好另外一个作品HaHo 。因为Toys是第一个作品,大家反映颜色上过于刺眼,后来我在LCD的显示器上观看确实有这个缺陷,我认为这可能是我在制作时用的是CRT显示器的缘故,所以我重新的制作了HaHo..
大家其实可以从这两个作品中看出我的风格是偏向于卡通的,这也就是我这次的主题,就是童趣,这个我认为在Toys里面表现的更为突出,我把每个图标都作成了塑料玩具的感觉,使人非常容易接近,感官上非常可爱,主要就是想在这繁忙的生活中可以通过这个来激发一下大家的童趣,那样是不是会会心一笑呢呵呵

整个制作过程您花了多长时间?

制作时间应该是在1天多

制作过程中您使用了那些软件和工具?

PS和AI

是否愿意交流一下制作心得?

Do you know SoCool skin? check here!

IconsBox‘s Blog

TOP

顶一个顶一个
让我纵欲而死

TOP

开眼界了~~~实在是不错!~~

TOP

都是国内小有名气的```哈哈 开眼

TOP

第一个怎么不太认识

TOP

值得参考与学习!!

TOP

这些心得太好了

TOP

恩恩 深感体会

顶下
You cannot appreciate happiness unless you have known sadness too.

TOP

真是不错!学习学习!

TOP

发新话题