第一篇:PhotoShop设计一个圣诞iphone icon图标教程
核心提示:借着圣诞节到来,这次用photoshop制一个简单的圣诞iphone icon,整个过程利用photoshop的矢量功能结合位图功能完成。
相关下载: Photoshop CS5官方正式版 Adobe Photoshop CS4 Adobe Photoshop CS3 Adobe Photoshop CS2
借着圣诞节到来,这次用photoshop制一个简单的圣诞iphone icon,整个过程利用photoshop的矢量功能结合位图功能完成,这篇文章很简单,主要是介绍photoshop中矢量在icon的应用和一些小细节。
最终效果
用圆角矩形工具画出长宽为512px,R值为92px的标准iphone框架
加上1px内阴影效果,使其有立体感
再用图案叠加添加木纹图案,你可以google好看的木纹图案,这里我就用自带的木纹了
效果:
添加一个圆角矩形图层
设置投影、内阴影、内发光效果进一步加强立体感
效果:
添加niigoo主体渐变色和描边,你也可以自已发挥,描边是使外部木边更有立体感,这就是细节的体现了
接着到围脖的部份,新建图层,用钢笔画出围脖,主体选用红色,添加图层阴影效果
围脖图层1
围脖图层2
围脖图层3
注意图层的顺序
再用钢笔画出围脖阴影,画好了用滤镜进行高斯模糊
用毛笔添加亮面和暗面,方法:这里可以在围脖图层1上面新建一图层,右键-创建剪贴蒙板,然后这图层就嵌入围脖图层1里了,再用毛笔画亮面和暗面,不怕出边了
其它围脖块用上述同样方法画出亮面和暗面
添加围脖波点
这里也是使用创建剪贴蒙板的方法,先用椭圆工具画出波点,再把波点图层嵌入围脖图层里
整理好图层,三层围脖完成了
回过头来检查图层,噢~~~一切就是这么整体
再来就是加上“尼果”俩字(出处表明,哈哈)
好了,在底部再添加一个反光图层就完成了
第二篇:设计一个播放进度条图标教程
设计一个播放进度条图标教程
今天带同学们来绘制一个金属质感的进度条,重点依然是图层样式的练习,喜欢的跟着教程一起练习一下。做完记得交作业。PSD参考文件:http://vdisk.weibo.com/lc/2uZbBupjANLPR5E6Ql 密码:UPJW最终效果:新建文档,这里我们用的依旧是800*800像素,我们为背景图层添加一个图层样式。设置完图层样式,我们得到如下效果:下面,我们为背景图层添加一个杂色。执行“滤镜—杂色—添加杂色”,设置数量为“1%”,高斯分布,勾选单色。执行“滤镜—滤镜库—画笔描边—喷溅”,设置喷色半径为6,平滑度为5现在,我们完成了背景的创建,效果如下。www.xiexiebang.com下面,我们开始进度条的绘制。用圆角矩形工具,画一个620*45像素的圆角矩形。将其命名为“外形”,为其添加一个图层样式。设置完图层样式,我们将得到如下效果。www.xiexiebang.com现在轮廓外形已基本呈现,但是质感略嫌不足,我们来改进一下。复制一层“外形”图层,将其更改名为“轮廓投影”,并将其置于“外形”图层下层,清除其图层样式,将填充更改为0,重新设置一个图层样式,设置如下:现在我们得到如下效果。用圆角矩形工具画一个500*30像素的圆角矩形。为这个白色的圆角矩形设置一个图层样式。现在我们得到如下效果:www.xiexiebang.com下面,我们添加一个按纽,用椭圆工具画一个60*60像素的圆。为其添加一个图层样式。到这里,进度条就算搞定了。最后,我又添加了两个按纽,没什么好说的,只是加了点字,加了点外发光,有兴趣的可以下载我们的PSD看看:http://vdisk.weibo.com/lc/2uZbBupjANLPR5E6Ql 密码:UPJW。(贴吧 / P大点S)
第三篇:应用中心图标设计小教程
应用中心图标设计小教程
|阅读原文
应用的时代到来?毋庸置疑的回答是“Yes!”。无论是PC、Web还是移动终端,都迎来自己“应用化”的春天。当然,随着UC8.0各线浏览器产品的发布,UC浏览器的粉丝们不难发现,“应用化”的道路上出现了大家挚爱的UC嘞,可喜可贺呀!
找好自己的风格!这是我们开始图标设计之前需要想好的。平面的?立体的?写实的?卡通的?等等。这个过程也许很长,也许会很短。灵感这东西很难琢磨。当我们想好大体的形状,我们就可以先动手画几个“模拟”图标,这时候的图标画的不必太过复杂,能有个感觉就好。最后咱们UC选择了较为立体的图标风格来进行设计嘞。
今天咱们一起绘制一个简单的“游戏中心”的图标,跟大家分享一下图标绘制过程的一些方法和心得吧。那我们开始!首先我们先用铅笔啦圆珠笔啥的画个草图,找个自己满意的形,哈哈,就定第二个图的了。(画的很丑——||大家将就瞅瞅!)
Stept1:这就是我们今天要一起绘制的“游戏中心”的图标啦。第一步咱们先把图标“宽衣解带”一下。这个图标主要可以分解为两个部分,一个“外框”和一个“游戏手柄”。
Stept2:先用圆角矩形工具画出两个交叠的圆角立体矩形,这个就是我们外框的基本形了。接下来我们对其进行渐变着色。在圆角处添加高光,使得整个立体图形更加自然圆滑,同时在明暗区分较强颜色区隔处增加1px的高光边线,使得图标更显质感。
Stept3:我们开始绘制暗底区域的高光,这边值得注意的是,我们绘制的高光区域要在暗底选中区域的基础上内收缩1px,使得高光区与暗底间存在明显的间隔,同时为了使绘制的高光区更有色感,我们要进行“二次混合模式叠加”,第一次使用“叠加”的混合模式,第二次则使用“滤色”的混合模式。为了使绘制的高光区更富有质感,我们在原有的高光区基础上,添加1px的高光亮边,这么一来,图标就更晶莹剔透咯。
Stept4:接下来我们开始绘制右下角的蓝色游戏标签。简单的蓝色侧45度渐变便可完成基本型配色,但是为了锦上添花,我们需要在蓝色渐变的基础上加上与高光区同向的高光亮边,绘制方法与之前提到的绘制高光区域的方法一致,同样需要“二次混合模式叠加”。接下来添加“GAME”的文字,效果使用渐变+投影即可,值得注意的是,渐变色区隔不要太大,淡淡的即可,投影选择黑色“正片叠底”,距离1px,大小2px即可。同时在暗底上层加上蓝色的高光,便可给图标带来不一样的剔透质感。
Stept5:绘制完外框,我们开始绘制游戏手柄嘞。先用鼠标绘制一个游戏手柄的外形。添加一个简单的线性渐变。然后在手柄的边界处打上阴影,让手柄立体起来。
Stept6:现在我们开始游戏手柄的左侧操作栏的绘制。为了让其更有“凹凸”感,我们选择在暗色渐变的外侧添加与手柄主体渐变色相反的渐变描边。在暗色方向操作盘上绘制上下左右的方向键,注意,渐变色使用时,与背景色不能过于反差,淡淡的区隔即可。
Stept7:至于右侧的操作按钮与左侧操作盘的绘制方法也有异曲同工之处。先绘制四个“凹槽”,然后在里边放置四个按钮,在按钮的图层属性配置上,可以只用纯色加上”斜面浮雕”效果,简单显示高光即可。然后为你的按钮配上不同的色彩即可完工。值得注意的是,每个按钮的外层可以添加一个颜色属性更深的色值,使得产生更为细致的区隔立体效果。
Stept8:接下来绘制的是手柄的底部操作杆了。这部分的处理我们可以简单想像成一个立体按钮的绘制。概括起来就是“两个图形平移”。即先绘制一个圆形,然后复制一个副本,并将其向上平移,简单吧~操作杆的高光部分,我们同样使用简单的“斜面浮雕”效果即可。手柄的主体基本完成,然后我们添加上一些“附属”小物件,游戏手柄搞定嘞!
Stept9:最后一步就是“打包”啦。我们将游戏手柄装进我们之前绘制好的外框中。这里需要注意的是,需要在外框暗色区域的选区内,在手柄四周打上阴影,拉出手柄与外框的距离,使得整体更有层次感。之后我们只需要再增加一些小光点作为点缀,接着拉个倒影,便大功告成了!
结束语:不知道看了这篇文章是否会对大家的图标设计有所帮助嘞,绘制图标是个细致活,大家平时也多多练习,多多绘制图标,孰能生巧嘛~大家都Fighting!
第四篇:Photoshop教程 教你设计恐怖电影海报
Photoshop教程 教你设计恐怖电影海报
发布日期: 2006-10-25 11:09:44 作者: 王伟光 字体:【大 中 小】【打印本页】
先看一下效果:
制作过程:
1、打开一张风景图片,效果如图01所示。
图01
2、选择工具箱中的“多边形套索工具”,将图片中除建筑物以外的部分选中并删除,如图02所示。
图02
3、打开一张天空的图片,如图03所示。
图03
4、将天空放到建筑物的后面,并为天空添加透视变形效果来增加背景深度,效果
如图04所示。
图04
5、如图05所示建筑物的边缘还留有原图片的颜色,下面将其删除。选择工具箱中的“魔棒工具”,将天空层隐藏,然后选择建筑物层的空白部分,然后执行菜单栏中的“选择”“修改”“扩展”命令,如图06所示,在弹出的对话框中设置合适的数值,使选择范围能够包含到需要校色的建筑物边缘。执行菜单栏中的“图像”“调整”“色相/饱和度”命令,调整边缘的颜色,效果如图07所示。
图05
图06
图07
6、新建图层,选择工具箱中的“画笔工具”,在建筑物上涂抹一些颜色,然后将该图层的混合模式变为“叠加”,效果如图08所示。
图08
7、打开一幅恐怖的图片并将其拖拽到最上层,然后将不透明度调整到45%,效
果如图09所示。
图09
8、选择工具箱中的“矩形选框工具”,在画面中框选上下两部分并填充黑色,效果如图10所示。
图10
9、新建图层并填充黑色,然后选择文字工具输入文字并将文字栅格化,再按Ctrl+E键合并。选择菜单栏中的“图像”“旋转画布”“顺时针90度”,效果如
图11所示。
图11
10、选择菜单栏中的“滤镜”“风格化”“风”命令,弹出的对话框设置如图12所示,然后按Ctrl+F两次,效果如图13所示。
图12
图13
11、选择菜单栏中的“图像”“旋转画布”“逆时针90度”,选择菜单栏中的“滤镜”“艺术效果”“塑料包装”命令,在弹出的对话框中设置高光强度为10,细节8,平滑度2,如图14所示,画面效果如图15。
图14
图15
12、选择菜单栏中的“滤镜”“模糊”“高斯模糊”命令,设置半径为1.2像
素,然后复制该图层。
13、选择菜单栏中的“图像”“调整”“色阶”,输入色阶188、1.00、255,效果如图16所示。
图16
14、隐藏副本图层,选择菜单栏中的“图像”“调整”“色阶”,输入色阶62、0.73、205,效果如图17所示。
图17
15、设置前景色为红色,用魔棒工具选择文字,填充文字,然后选择副本图层将混合模式改为“正片叠底”,然后选择文字并反选,将黑色背景删除,最终效果
如图18所示。
图18
第五篇:图标设计心得
东莞生活网: www.hidg.net
图标设计
在这里分享下我对于图标设计的一些心得体会。说的不好,还请各位看客包涵指正。图标在我们日常生活中被 广泛应用,软硬件、网页、社交公共场合无所不在。广义来说,图标就是具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。狭义来说,就 是我们所熟悉的在计算机程序方面的应用。包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。如今图标被广泛的应用,其价值也是显而易 见的。一套好的图标能够为用户直观传达所描述的物体,减轻用户的认知负担,特别是一些抽象的功能和意义。同时增添图标的精美度不仅能提升整个界面的吸引力 和观赏性,还能使产品与用户产生共鸣。
下面以制作电话本和短消息这两个图标为例。
设定风格。通观整个图标设计,设定风格是基础,亦是非常重要的一步。需要对整套图标进行周全的构想,因为这一步为图标设定了一个方向,之后图标设计的造型,上色的深入展开都要以此为基础。在这里我设定的是复古做旧的风格。
绘制草图。这一步骤主要是设计图标的造型。造型在图标设计中有着决定性的影响,他直观的给用户展现其所代表的含义。而草图是最直观,最快速展现设计 构思的一种方法。此时我们可以通过头脑风暴列举出一些能让用户一目了然,又贴合电话本和短消息含义的元素,同时列举的元素又要符合复古做旧的风格。因此,我选取做旧的通讯录来表示电话本,选取羽毛笔和信纸来表示短消息。在绘制草图时,要注意图标造型的统一,方向的一致性,使图标有充分的辨识度。其次要控制 单个图标元素的数量与其他图标相协调,用最少的元素来表达图标的含义。不然过多的元素不仅会使图标臃肿不堪,更会使图标的含义模糊不清,难以琢磨。
东莞汽车频道:auto.hidg.net
东莞生活网: www.hidg.net 上色刻画。在确定造型之后,就需要对图标上色以及深入刻画。
东莞汽车频道:auto.hidg.net
东莞生活网: www.hidg.net
东莞汽车频道:auto.hidg.net
东莞生活网: www.hidg.net
东莞汽车频道:auto.hidg.net
东莞生活网: www.hidg.net
总结
一,设计一套完整的图标要确保其风格的一致性。在造型,透视,大小,色彩,效果处理等各个方面做到统一,以保证每个图标都与其风格相契合。其次,控制图标元素的数量,对一些不必要的元素要果断去除。图标应该是一种能使用户轻
东莞汽车频道:auto.hidg.net
东莞生活网: www.hidg.net 松识别的图形语言,而不是成为用户阅读的负担。更要充分展现各个 图标间的差异程度,提升图标自身的辨识度,从而帮助用户理解阅读。再则还要考虑这套图标所应用的环境。不同国度,不同社会环境,不同文化传统对图形也有不 同的认识理解。同时也要考虑到人们的情感因素,避免使用敏感图形。所以在设计开始就应考虑周详,谨慎使用。最后,画图标要有足够的耐心,对于细节要不怕繁琐,细心揣摩。(详细咨询:东莞论坛——汽车频道)
东莞汽车频道:auto.hidg.net