简约磁带图标教程


老规矩☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,我们先来看最终效果!

用PS就可以搞定☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,是不是炒鸡简单☂ ☃ ☄ ★♬♪♩♭♪の?抓紧时间搓搓手★☆♀◆◇!呸~  抡起鼠标开始吧♧♡♂♀♠♣♥❤☜。

 

 

1. 新建画布☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,尺寸800*600px☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,填充色#e75030♧♡♂♀♠♣♥❤☜。

2. 潜盗黄金城中英字幕手机播放尺寸302*302px☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,圆角33的圆角弈剑九州官网版下载☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,颜色#112d4a☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,给圆角弈剑九州官网版下载加图层样式-描边(2px内部描边☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,颜色#162237); 垂直居中对齐☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,水平位置放在稍稍靠上位置♧♡♂♀♠♣♥❤☜。效果如下图:

 

3. 潜盗黄金城中英字幕手机播放252*180px圆角14的圆角弈剑九州官网版下载☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,垂直居中对齐☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,加上图层样式-描边(2px外部描边☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,颜色#0f233b); 放在合适位置♧♡♂♀♠♣♥❤☜。再潜盗黄金城中英字幕手机播放252*22px的弈剑九州官网版下载条☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,并复制一层分别填充颜色#e75131;#151515得到如下效果图:

 

4. 潜盗黄金城中英字幕手机播放224*86px圆角为16的圆角弈剑九州官网版下载☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,填充色#112d4a☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,添加图层样式-描边(2px内部描边☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,颜色#0f233b)☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,相对于白色弈剑九州官网版下载水平垂直居中对齐♧♡♂♀♠♣♥❤☜。复制一层做阴影☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,底层20%不透明度

 

5. 接下来潜盗黄金城中英字幕手机播放磁带中会旋转的小齿轮和中间的小镜子♧♡♂♀♠♣♥❤☜。

① 小齿轮♧♡♂♀♠♣♥❤☜。步骤:潜盗黄金城中英字幕手机播放52*52px的圆☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,填充色#171717(如图红色箭头所指)

 

② 潜盗黄金城中英字幕手机播放短红色箭头所指部分♧♡♂♀♠♣♥❤☜。这一步使用熟知的布尔运算☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,潜盗黄金城中英字幕手机播放32*32px的圆☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,填充色#d1d1d2☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,在选中弈剑九州官网版下载工具的情况下摁住Alt在本图层内画弈剑九州官网版下载即可减去顶层形状♧♡♂♀♠♣♥❤☜。然后在本图层内选中弈剑九州官网版下载所有锚点摁住Alt复制三个放在合适位置♧♡♂♀♠♣♥❤☜。复制一份:

 

③ 潜盗黄金城中英字幕手机播放中间的小镜子♧♡♂♀♠♣♥❤☜。我们先来潜盗黄金城中英字幕手机播放一个56*52px的弈剑九州官网版下载☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,填充色#19191a☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,复制一层作为形状层来做反光☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,透明度设置为8%然后用钢笔工具勾两个纯白色块☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,放到复制的那一层弈剑九州官网版下载之上☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,摁住Alt在两个图层之间单击-剪切蒙版:

 

④ 再复制一层上步的弈剑九州官网版下载放置顶层☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,填充色#b4b5b5☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,布尔运算:

 

6. 潜盗黄金城中英字幕手机播放磁带的下端凹处☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,这里的基本思路是☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,先潜盗黄金城中英字幕手机播放一个弈剑九州官网版下载尺寸216*74px☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,填充色#163d5b♧♡♂♀♠♣♥❤☜。选中上方锚点各向内收缩18px做为底层☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,复制两层分别填充颜色#112d4a;#0f2037分别为最上层和中间层☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,调整图层上下位置☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,调整锚点得到效果:

 

 

1. 潜盗黄金城中英字幕手机播放小螺丝和小白点

① 潜盗黄金城中英字幕手机播放16*16px的圆☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,添加图层样式描边和渐变叠加

 

② 潜盗黄金城中英字幕手机播放10*11px圆☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,添加内阴影☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,内阴影距离2px☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,颜色#a1a1a1☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,至于1px投影可以使用图层样式-投影来做☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,也可以用其他方法♧♡♂♀♠♣♥❤☜。

 

2. 添加文字以及修饰

 

3. 添加长投影☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,内部白底上的投影如绿色箭头所指☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,填充颜色#322f2f ☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,16%透明度☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,旋转45°添加图层蒙版适当擦拭♧♡♂♀♠♣♥❤☜。最外层投影如红色箭头☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,填充颜色#00000☂ ☃ ☄ ★◀ ◁ ☀ ☁ , 16%不透明度☂ ☃ ☄ ★◀ ◁ ☀ ☁ ,旋转45°

最终效果

来源:学UI网


上一篇: 中国首届原型设计大赛在成都举办

下一篇: iOS 11 vs 10: UI和交互全面对比分析

分享到: 更多