zi强bu息 发表于 2014-8-9 02:19:11

Photoshop设计软件图标教程

      在Photoshop中图层样式是最为直观的东西,所有的效果都能量化,以数值的形式表现出来,就是各种晦涩难懂的等高线也可以用数字来表现。利用图层样式中的混合模式可以得到千变万化的效果,很多的UI和icon绚丽的效果大多数是靠图层样式来实现的。
今天我的临摹的iTunes图标是一个非常经典的icon,不过现在你们看不到了。现在的版本只能说是走火入魔,推崇扁平化,说它漂亮也谈不上,说难看也不至于,下面是我完成的效果图,不过我对它的外轮廓作了一些恶搞性质的变化。这个外形介于正方形和圆形之间,它跟圆角矩形不是一个概念,迎合了现在的审美观。
效果图:

http://pic.16xx8.com/allimg/140809/01354SL3-0.jpg
提示:教程详细步骤在二楼,不用回复也能看到!想下载该教程的可以回复获取下载网址:点击进入下载页教程编号:134161 作者:Projava 出处:百度贴吧

zi强bu息 发表于 2014-8-9 02:19:13

Photoshop设计软件图标教程


下面开始临摹过程,首先我百度了一张原图作为参考

http://pic.16xx8.com/allimg/140809/01354W264-1.jpg

zi强bu息 发表于 2014-8-9 02:19:14

Photoshop设计软件图标教程


新建一个1000X1000的新画布"

http://pic.16xx8.com/allimg/140809/01354WP3-2.jpg

zi强bu息 发表于 2014-8-9 02:19:15

Photoshop设计软件图标教程


粘贴刚才复制的iTunes原图,移动到角落上作为参考

http://pic.16xx8.com/allimg/140809/01354T091-3.jpg

zi强bu息 发表于 2014-8-9 02:19:16

Photoshop设计软件图标教程


按ctrl+r打开标尺,右键标尺选择百分比

http://pic.16xx8.com/allimg/140809/01354Q914-4.jpg

zi强bu息 发表于 2014-8-9 02:19:17

Photoshop设计软件图标教程


快捷键alt+v+e在垂直位置输入50%

http://pic.16xx8.com/allimg/140809/01354S3Z-5.jpg

zi强bu息 发表于 2014-8-9 02:19:18

Photoshop设计软件图标教程


继续横向位置也是50%

http://pic.16xx8.com/allimg/140809/01354S607-6.jpg

zi强bu息 发表于 2014-8-9 02:19:19

Photoshop设计软件图标教程

      
设置好参考后点击图层栏下面的快捷按钮添加一个渐变调节层

http://pic.16xx8.com/allimg/140809/01354SB4-7.jpg

zi强bu息 发表于 2014-8-9 02:19:20

Photoshop设计软件图标教程


选择你认为比较合适的颜色搭配。本来我打算给出颜色的代码,后来想想还是算了,每个人都有自己的独好。我认为好看的你不一定也认同,所以这里你大可不必按照我的选择

http://pic.16xx8.com/allimg/140809/01354Q556-8.jpg

zi强bu息 发表于 2014-8-9 02:19:21

Photoshop设计软件图标教程


在图形工具里选择椭圆根据

http://pic.16xx8.com/allimg/140809/01354V405-9.jpg

zi强bu息 发表于 2014-8-9 02:19:22

Photoshop设计软件图标教程


以参考线的交叉点为中心画一个大小差不多跟画布大小的圆形。至于它的颜色大可不必在意,任何颜色都可以,我只要的是它的形状

http://pic.16xx8.com/allimg/140809/01354UZ1-10.jpg

zi强bu息 发表于 2014-8-9 02:19:23

Photoshop设计软件图标教程


右击“选择工具”,选择“直接选择工具”,也就是白色的箭头。如果你比较熟悉这个工具的话可以结合ctrl建快速转换

http://pic.16xx8.com/allimg/140809/01354R922-11.jpg

zi强bu息 发表于 2014-8-9 02:19:24

Photoshop设计软件图标教程


框选水平方向的两个锚点

http://pic.16xx8.com/allimg/140809/01354TJ3-12.jpg

zi强bu息 发表于 2014-8-9 02:19:25

Photoshop设计软件图标教程


右键选择“自由变换点

http://pic.16xx8.com/allimg/140809/01354TV6-13.jpg

zi强bu息 发表于 2014-8-9 02:19:26

Photoshop设计软件图标教程

      
在"设置水平缩放"里输入80%大小。这时候你看到这个圆形变成一个椭圆

http://pic.16xx8.com/allimg/140809/01354V537-14.jpg
页: [1] 2 3 4
查看完整版本: Photoshop设计软件图标教程