用Photoshop画一个千千静听的图标

上次教大家用ps画了一个real的图标,不知道大家试过没,学会没。我还说要教大家画一个千千静听的图标来着,这次就兑现啦,想学ps的同学和我一起动动手吧~

其实这个图标很久以前就完成了,只是刚开学,我的事情很多,没太多时间更新我的博客,就把以前的东西翻出来写写。言归正传,千千静听大家应该不陌生吧,一个很流行的播放器,虽然有很多人喜欢Foobar和Airplay这样的软件,但千千的用户依然不在少数。我画这个图的原因还是一样,因为vista下的图标最大支持256×256大小的图标,看着小图标和系统不配,我改。

首先准备一张512×512的画布,背景设置为白色(#FFFFFF),然后用椭圆工具在画面的中央画一个橙色的圆形,颜色为#E56008,再选择一下这个圆形的路径,然后复制路径,新建一个图层,把复制的路径粘贴在新建的图层上,建立矢量蒙板,把画布的颜色改成#E97B00,并且按下Ctrl+T快捷键,把圆形的路径缩小,缩小的同时按下alt和shift键,目的是保持正圆形不变,而且和原来的大圆同心,如下图:

同样的,再新建一个图层,把那个缩小的圆形路径再使用一次粘贴在新的图层上,然后选中路径的状态下按下Ctrl+T快捷键,然后在菜单下的属性栏上面点击一下靠右边的放弃按钮左边的扇形按钮(在自由变换和变形模式之间切换),这样就可以扭曲路径了,按照下图的方式扭曲一下。

扭曲到合适的形状的时候,在图层上创建矢量蒙板。然后在按住Ctrl键的情况下,单击一下矢量蒙板,创建一个路径形状的选区。使用渐变工具,把渐变的两种颜色都设置为白色(#FFFFFF),然后一个设置为透明,也就是白色过渡到透明的渐变。拉一下渐变,可以反复试一下,直到产生适当的光泽感。然后另外一个高亮区也如法炮制。这样,我们的图层面板里面看起来应该这样:

继续。选择钢笔工具,先创建一个耳机的上半环,然后再创建两边的小听筒的小边沿,如下图,并为它上蓝色(#005386):

再用钢笔工具画两个耳机听筒的主要部分,上深蓝色(#130041),要注意的是,其中涉及到矢量蒙板的操作类似于上面,我就不啰嗦了。图中的 step7和step8调换一下位置,处理图片时弄反了……不好意思……再拿钢笔画波形的部分,应该很简单吧~

这样我们的图层面板里面看起来就像这样, 然后选中耳机部分的四个图层,按下Ctrl+G快捷键,合并到一个新组里,免得图层面板看起来乱糟糟的,要注意的是,把耳机这个图层组放到两个高亮图层的下面以便一起产生光泽感:

然后你看看,是不是千千静听的图标就出来了?别收工,再画上阴影吧,让它有立体感。先在最最下面的一层建立一个新图层,然后用椭圆工具画一个椭圆,再创建选区,用灰色到无色的渐变拉一下,放射状的渐变,中间深,旁边浅。至此,千千的图标就画好了。

那么已经到这一步了,就再画一张文件关联的图标吧。先取出一张windows系统自带的空文件类型的图像(下载里面已经提供),然后为它加上图层效果,参数如图:

 

然后在白色的图像的右上角的三角形和右下角部分创建两个三角形的选区,用淡蓝色(#C3E5F9)到白色的渐变拉一下,这样,这个空文件图标就有点立体感了。然后把我们已经画好的千千的主图标复制过来,放到合适的地方,这样我们的图层面板看起来就像这样:

最后文件关联图标就做好了,看看

以下的图是我的系统里面音乐的图标的样子,用的是vista里面大图标的效果:

怎么样,学会了吗?自己来试试吧!

下载本文提到的PSD源文件

目前已经有 24 条回复,欢迎继续就座

  1. 23:17@2009年08月31日 [回复]

    找你的做法学习一下先,我会photoshop只为了和女朋友去痘痘 :mrgreen: :mrgreen:

  2. 12:28@2009年09月1日 [回复]

    8-O 楼上的太强了..

    话说ZH也很强, 居然做得这么真, 说不定千千就是这样做的… PS高手啊

  3. 22:11@2009年09月1日 [回复]

    又是技术帖, 继续赞, 可以用这种方法做一些原创的图标.

  4. 08:10@2009年09月2日 [回复]

    好玩…以后做什么logo找你了。

  5. 10:22@2009年09月2日 [回复]

    好厉害。。看不出是自己做的 :wink:

  6. 15:28@2009年09月2日 [回复]

    @Alex:我还不会用ps处理照片呢 :oops:
    @bwskyer:我不是高手,只是个刚刚开始学的新手 :lol:
    @Todd:我再学学才能灵活运用
    @leehow:等我水平再高一些再说吧,呵呵
    @A.shun:谢谢 :lol: 我还在继续学习中

  7. 16:14@2009年09月3日 [回复]

    我就觉得拿些软件自己折腾东西有时候确实比较有意思………

  8. 18:27@2009年09月3日 [回复]

    @小猪vs蛋挞:嗯嗯,大家一起折腾吧 :lol:

  9. 11:28@2009年09月4日 [回复]

    一看到你PS教程我就想到了我没着落的LOGO。咋办泥… :)

  10. 12:20@2009年09月4日 [回复]

    @dreamfree: :-x 你别刺激我~~~~~

  11. 20:50@2009年09月4日 [回复]

    先整理好你的“毕业群”在整理这个 我是这样想滴!

  12. 22:17@2009年09月4日 [回复]

    @会律博客:文章发表在前,此事发生在后,你又错了 :-P

  13. 23:12@2009年09月12日 [回复]

    不介意我偷走了你底下twitter图标吧 :lol:

  14. 00:47@2009年09月13日 [回复]

    @derek:当然不要紧,这个也是我在国外的网站上找的,呵呵

  15. 18:58@2009年09月25日 [回复]

    真漂亮,赞一个 :-|

  16. 19:36@2009年09月25日 [回复]

    @neekey:谢谢,呵呵,只是学习的时候自己练习的,还是有不完美的地方,我要继续学习 :lol:

  17. 19:57@2009年10月9日 [回复]

    继续剽窃主题。 8)

  18. 20:09@2009年10月9日 [回复]

    @别用鼠标点我:剽吧,哈哈,研究清楚了对css学习一定有帮助 :mrgreen:

  19. 17:22@2009年10月18日 [回复]

    哦也 以后不用自己乱画了 :mrgreen:

  20. 17:31@2009年10月18日 [回复]

    @章鱼:加油啊,强大的小朋友 :-|

  21. 21:32@2009年10月18日 [回复]

    @ZH CEXO:
    我的 意思是 以后让你做了 :-P

  22. 21:34@2009年10月18日 [回复]

    @章鱼: :oops: 阴险~

  23. 22:42@2009年10月28日 [回复]

    牛哇。仰慕。

  24. 22:52@2009年10月28日 [回复]

    @shuil:其实我只是新手,还在学习中,这些东西看上去难,动动手就不难了

Post a Comment

编辑资料

我保证不会公布邮件地址,带有 * 号的为必填内容

*
*
:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

注意: 如果您是第一次在本站留言,可能评论会因为待审核而消失,请耐心等待。
Notice: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!
回到顶部