如何制作MD风格的图标

最近好多博主的头像或图标都是扁平化的MD风格,再看看我的,就一PS抠出来的小人,一点都不上档次,于是就自己啄么着也去弄个MD风格的logo,折腾了很久,在 @PDC 大佬的帮助下完成了这辈子第一个MD风格的图标 😎 

教程开始~


扁平式:

首先,找一张小人图片把图扣下来,碧如我这张初音的 😳 

把中间的小人完整的扣下来,用什么方式扣就看你自己的了,我用的魔棒

扣完图后把图片先填充成黑色,编辑菜单—定义画笔预设—自己随便取个名字保存即可,等会做长投影要用

然后把图层填上你喜欢的颜色,我用的白色,尽量选择白色,因为PDC是这么说的 ➡ 

之后新建一个图层,同样填上你喜欢的颜色,可以用任何你喜欢的形状来做,我这里用的圆角矩形(矢量图工具那里画的),之后调整图层顺序,就变成了酱紫

扁平式,完成~


投影试:

然后在小人图层上添加图层效果,勾上投影,自己调节投影角度和大小为合适的效果即可,角度可以根据光源调整,

投影试,完成~


长阴影:

将图层效果上的投影距离调整为0,大小和扩展自己琢么这跳,不要太生硬

之后给图层打上标尺线,用钢笔工具在正中间相右下角托一条直线路径

把工具换成画笔,画笔形状选你刚刚保存的画笔预设,然后在画笔窗口调下画笔属性,把画笔间距调成百分之一,勾上平滑,其他不用动

新建图层,换成路径选择工具,在刚刚的直线路径上右键—描边路径—画笔—确定

之后会描边出一些长阴影,调整到合适位置后再图层面板调下透明度,不要调颜色,然后图标就做好了 😉 

长阴影试,完成~


渐变式:

复制一层背景图层,移动到最顶层,填充设置为百分之0,然后打上参考线,用选择工具选择一半图层,加上蒙版

之后在加上图层样式,勾上渐变,混合模式选择正片叠底,其他可以参考我的设置

然后在原背景图层上加上相同的背景样式,同样添加图层样式,设置渐变叠加,除透明度浅一点外其他和刚才一样

渐变式,完成~


484很简单,然而我为了那个长阴影折腾了半天,最后附上四个成品图标 😉 

 

 

然后感谢 @PDC 提供的帮助,一位MD风格图标的开发者(据说都是用手机画的2333)

评论

  1. 兰陵
    Android Chrome 55.0.2883.91
    4年前
    2017-5-08 0:29:05

    不错啊,挺好看的

  2. 无人小站
    Windows Chrome 58.0.3029.96
    4年前
    2017-5-09 19:16:58

    膜拜dalao

  3. 蜜汁路易
    Windows Chrome 58.0.3029.110
    4年前
    2017-6-28 8:24:03

    哇~~~~

    • hazymoon 博主
      Windows Chrome 60.0.3112.7
      4年前
      2017-6-28 12:29:57

      日常膜拜大佬~~

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇