Archive for the ‘图形界面欣赏’ category

android 三国杀桌游界面设计赏析

August 2nd, 2010

三国杀软件的上线,无疑让我这个android忠实用户非常兴奋,试玩体验了几场。整体感觉不错,界面设计最大的缺点是,出牌的“确定”和“取消”按钮距离很近,很容易误操作,希望开发团队在后期能够改善用户体验。

以下是界面的大部分截图:

启动LOGO

 登录界面

提示信息

 选择服务器界面

 频道选择界面

 桌游出牌界面

 开场准备界面

 角色选择界面

  操作提示

分享家:Addthis中国

ps 火焰效果教程

August 2nd, 2010

原文:abduzeedo

翻译:icongirl

如转帖,请注明来自www.icongirl.net

前几天,我看过很酷的火焰效果的教程,利用PSD贴图实现一些三维字体。我想先建立做一个像洞的3D文本并从字体洞中生出火焰的效果。

 步骤1:

  你首先要做的是建立三维文字。为了做到这一点,你可以使用Illustrator软件。它有一个很好的3D过滤功能,非常有利于我们的效果的实现。首先,写出我们想要的文字,然后,通过效果>3D >挤压和斜角调整相关参数;然后,旋转X,Y,X轴,直到你达到你想要的结果。如下图所示,仅供参考。提示:选择隐藏表面这是很重要的,否则Illustrator不能实现最终的结果。

Hell of Tutorial in Photoshop

  第2步,
  现在,你将图形扩大3D效果以选择并改变颜色,达到相应的效果,去对象>扩展外观。首先选择的文字面,并移走。然后选择只是其他的面并填充黑色。

Hell of Tutorial in Photoshop

  步骤3 -修改
  在Photoshop创建一个新的文件,背景填充黑色。把三维文字的文字面复制并粘贴在Phothoshop,改变文件的大小。

Hell of Tutorial in Photoshop 

第四步
  用魔棒工具(W)选择黑色的面并删除它们。

Hell of Tutorial in Photoshop

  第5步
  图像> 调整>色相/饱和度,改变字体的颜色为橙色。

Hell of Tutorial in Photoshop

第六步
  确保文件前景色是黑色,背景颜色是白色。然后,滤镜>渲染 >云彩……之后,调整层。让这云彩效果层 覆盖文字,改变混合模式为颜色减淡 。

Hell of Tutorial in Photoshop

第七步
  现在创建一个新的层,填补黑色,然后用画笔工具(B)选择定期刷,非常柔软的,比如0%硬度、白色。然后画些高亮色在效果上,使其效果更亮了。(1-4)。 

Hell of Tutorial in Photoshop

 第8步
  运用层风格的3D字描边1px的黑色,40%的透明度。

Hell of Tutorial in Photoshop

  步骤9
  做一个渐变叠加的背景,为了使一些光效果,渐变使用黑色和#412e1d的颜色。

Hell of Tutorial in Photoshop

第十步
  现在复制 3D层> 滤镜>模糊 高斯模糊   ,使用30px为半径,在这层地狱的位置。

 Hell of Tutorial in Photoshop

第11步
  用椭圆工具创建一个椭圆像下面这张图,然后去滤镜>模糊 >高斯模糊。使用70px为半径。之后,改变混合模式为叠加。

Hell of Tutorial in Photoshop

第十二步
  创造一个新的层次上的背景图层。填补它与白色,滤镜>纹理。使用60%为缩放,15救济和顶部的光。改变混合模式为叠加。

Hell of Tutorial in Photoshop

第13步
  在这里我想加入一个漂亮的纹理到地板上,所以我用木纹理。你可以找到一个我以前在http://www.sxc.hu/photo/947335。或者你可以在http://abduzeedo.com/great-wood-textures大木纹理。
  
  把这个文件粘贴到图像位置,调整图像大小它使它覆盖了文字区。然后去编辑>变换>扭曲,调整透视角度。之后,改变混合模式为叠加。

Hell of Tutorial in Photoshop

第14步-火
  现在让我们创造火焰效果。基本上,我们会用一张火焰照片和使用工具来创造出不同的扭曲的变种的火焰。
  
  在http://www.sxc.hu/photo/985088下载图像,粘贴在文档中。确认它是在前面的其他层。然后用橡皮擦工具(E)删除某些地区。编辑>变换也>翘曲、变形的火焰来获得良好的效果。那就改变混合模式为屏幕。

 Hell of Tutorial in Photoshop

  步骤15
  使用相同的技术创建更多的火焰,你甚至可以使用涂抹工具(R)来改变形式的火焰。

Hell of Tutorial in Photoshop

  步骤16
  创建一个新图层>滤镜 >渲染云层。确保你有选择黑与白的前景和背景颜色。然后你可以调整层稍做烟变小了。用橡皮擦工具(E)删除一些地区和把烟一遍课文。然后改变混合模式为柔和光。

Hell of Tutorial in Photoshop

第17步
  重复同样的事情,因为以前的步骤,这次却难以利用光的混合模式。这一步将创造出一个更有体积的烟雾的形象。

Hell of Tutorial in Photoshop

 步骤18
  让我们创造出裂缝在地板上。那样做让我们用另一sxc.hu图像,你可以下载它在http://www.sxc.hu/photo/995884。把图像的文档和图片盖梯度区。就像我们以前的木材纹理,去编辑>变换>扭曲。扭曲,直到你拿到一个好的形象,然后改变角度的混合模式为叠加。

Hell of Tutorial in Photoshop

  步骤19
  这一步可能看起来很复杂,但其实很简单。复制图层,改变了裂纹的混合模式为正常了。调整> 图像翻转,然后去图像> 调整>饱和度。这将是什么颜色颠倒了这样一次将成为白色、黑色之间。然后图像>色阶 >40,226。
  
  之后,选择正确的魔棒工具(W)和选择黑色部分的形象。然后去选择>相似,Photoshop将选择所有的黑人从层。然后删除黑人,你将有裂缝在白色的。现在先涂上一层风格。去层> 颜色覆盖>层风格,使用# ffba00颜色。

Hell of Tutorial in Photoshop

步骤二十
  选择橡皮擦工具(E)和一个又大又软的笔刷,使用0%硬度。然后删除层。只是一个小面积接近离开的话。之后,去过滤>模糊 >高斯模糊0.5%。最后将底部创造一个好的3D效果。

Hell of Tutorial in Photoshop

 第21步
  在这里你可以复制黄色,另一层裂高斯模糊,这一次用更大的价值和改变混合模式为颜色减淡。如果你愿意,你可以重复这一或两个以上的时间来做效果更好。

Hell of Tutorial in Photoshop

  结论
  你可以添加更多的裂缝,或改变火焰,现在轮到你了。这个教程是为了建立一个图像来自地狱的火,就像一个更深的地方使用三维字体。这基本上是一个混合的教程和技巧。这一切都是在网上玩,有很棒的教程。

Hell of Tutorial in Photoshop

下载:

Click here to download the PSD file for this tutorial

分享家:Addthis中国

14套优质手机应用图标免费下载

August 1st, 2010

电脑和移动设备间的差距正变得越来越小,现在比任何时候更需要移动应用软件的开发——其市场是巨大的,非常有利可图的。 人们对更强大的手机应用的需求日益增长,这又推动了手机应用软件行业的发展。

人们对手机应用的UI设计期望也非常高。手机应用设计不仅要与你所开发的任何一款手机的操作系统保持一致,还要有足够的特色让其看起来独一无二。是的,我们都喜欢设计优良的应用。

这篇文章中我们将与大家分享14套手机应用图标。下面的大部分图标可以用在iPhoneAndroid 手机上,也有一些是可以用在智能操作系统里面的。但是我始终没有找到任何可以用在黑莓手机上的免费图标。有人知道吗?如果有,请留言告诉我。

注:所有图标未特殊说明都可以免费在商业中使用。点击图片点击进入下载页面。

Android 图标

这个压缩包共有30个png格式的图标,另外还为有更深需求的客户提供了矢量文件(.eps)

Android Icons - Mobile App Developer Icons

130 Glyphish iPhone 图标

Glyphish图标非常适合用在于iPhone应用软件的工具栏和标签栏上,不过它也可以完美地用于Android的开发。
这130个png图标用于标签栏的尺寸为30×30px,用于工具栏和导航栏的尺寸为20×20px.

130 Glyphish iPhone Icons - Mobile App Developer Icons

160 iphone 工具栏图标(The Working Group)

这里有160个特别为iPhone设计的简洁、清晰的工具栏图标。

160 iphone Toolbar Icons (The Working Group) - Mobile App  Developer Icons

iPhone工具栏图标(app-bits)

这64个iPhone工具栏图标使用了漂亮的阴影使其看起来更有厚度和立体感。 这套图标获得Creative Commons Attribution-No Derivative Works 3.0 许可.所以,未经允许不能对其进行任何修改,不过你可以免费在商业或非商业工作中使用。

iPhone Toolbar Icon Set (app-bits) - Mobile App Developer Icons

Android 开发者常用图标

这些图标的设计风格是基于Android SDK的. 总共有24个png图标,有以下尺寸可以选择:16×16, 24×24, 32×32 and 48×48 px.
不用管缩略图的限制,这些图标全是免费的。

Android Developer Common Icon Set - Mobile App Developer Icons

Android开发者常用图标II

这套图标可以用于菜单、列表、标签(选中和未选中)或者对话框等。

Android Developer Common Icon Set II - Mobile App Developer Icons

免费iPhone工具栏图标(像素图标)

这套图标是专门为iPhone开发者设计的, 免费提供给任何遵从Creative Commons Attribution 2.5 Canada l许可的人。你可以使用或修改这饿图标,只要你信任www.pixelpressicons.com.

Free iPhone Toolbar Icons (PixelPressIcons) - Mobile App Developer  Icons

108 单色图标 (迷你图标)

尺寸:32×32 px,png格式.虽然这108个图标是灰色的,不过你可以很容易的更改它们的颜色。在Photoshop里使用图层混合模式添加颜色就可以了。

108 Mono Icons (Minimal Icons) - Mobile App Developer Icons

30个免费的矢量图标(Dezinerfolio)

这里有为苹果触摸和手机应用设计的30个免费的矢量图标。下载包里包含了psd文件。

30 Free Vector Icons (Dezinerfolio) - Mobile App Developer Icons

TOKEN图标

TOKEN图标包含了128个独一无二的图标设计,有深色和浅色两套。共有ico格式的三种尺寸(256×256, 32×32 ,16×16)和png格式的(128×128). 也有psd源文件。

TOKEN Icon Set - Mobile App Developer Icons

网站界面与按钮图标

这套图标不是专门为手机设计开发设计的,不过也很容易使用。

Web UI & Button Set - Mobile App Developer Icons

手机图标

这套手机图标包含了电话呼叫,照片,信息,计算器,设置,注释和地图等功能,尺寸有: 128, 64, 48 和32px.
可以在商业或非商业工作中免费使用。

Mobile Icon Set - Mobile App Developer Icons

478个SVG矢量图标– The “Seven” Icon Pack

这套图标我下载了但是用AI打不开,下载需要解压密码:zomggimmeyoicons

svg好像是可升级的矢量文件格式,如果有人能打开欢迎告知我下。

478 Free SVG Vector Icons – The Seven Icon Pack - Mobile App  Developer Icons

多点触摸手势图标

这个用得可能不太多,全部是免费使用的。

Gesturecons - Multi-Touch Icons - Mobile App Developer Icons

原文:http://speckyboy.com

翻译:绿豆晶

转载请注明出处:http://www.lvdoujing.com/?p=274

分享家:Addthis中国

Happy Car site界面设计欣赏

July 31st, 2010

分享家:Addthis中国

善于发现,善于创造

July 31st, 2010

生活中不无缺乏美好之物,只是我们过于匆忙,忽略了许多。德国设计师Lisa Rienermann在杜伊斯堡-埃森大学求学时,在城市建筑物下挑选合适的角度拍摄出来的字母集合。这是一件很有创意的事,要在身边找齐任意形状的字母并不难,但是要找齐同一题材的字母绝非易事。

Lisa Rienermann_aufbau2

3_q72dpi

Lisa Rienermann_schuber72dpi

Lisa Rienermann_willyou

分享家:Addthis中国