扁平化彩虹图标教程

用户头像
北京/UI设计师/10年前/822浏览
扁平化彩虹图标教程
用户头像
韩雪峰

诶! 康忙 艾瑞拔地来此购!

让我们H起来

我特么到底在干吗?

我不禁陷入了沉思

                   诶! 康忙   艾瑞拔地来此购!

                     让我们H起来                      

我特么到底在干吗?

4a845783a9630000012e7e0d8407.jpg

我不禁陷入了沉思     

哦 我想起来了 我今天要教大家

《扁平化小图标制作》

6df15783aa660000018c1bc9e1d0.jpg

那么好,咱们言归正传(我根本不知道正传在哪)

我本身是一个小渣渣 但是在临摹某人扁平化图标教程的时候 

激动的我 打开了电脑 关好了门 拉好了窗帘 准备好纸巾

打开 快播  不 不是这样的 我打开了屁挨史 也就是PS

但是我发现 他\她 的这个教程真的是让我崩溃 气炸了

整个气到我盆骨开裂 

ca565783acd20000012e7e4bef8a.jpg

我跟你讲 开始的尺寸、颜色都跟结尾

完全不一样

所以偷师学艺成功的我 决定自己写一篇大家都看得懂 

并且我昨晚是这个样子 你按我说的做完也是这个样子的

扁平化图标教程 其实并没有什么卵用 那我们开始

c9635783ad970000018c1bbd0d3b.jpg

先来一个彩虹吧 毕竟你我都是祖国的花骨朵 是吧

我们先创建一个600×600的画布 快捷键Ctrl+N7aa75783ae750000018c1bbf25a5.jpg酱婶的

然后 重点来啦重点来啦 我们调出标尺 快捷键Ctrl+R 

找到画布横竖的中心点 

04b45783af200000012e7e0898ff.jpg我  不想 写了   好累啊      好吧   还是继续吧

先创建一个新图层

8d635783b1440000012e7e454ac8.jpg

然后 用椭圆工具 或者  快捷键U 来画一个 410×410px的圈

记住 刚开始画的时候 鼠标最好放到两条标尺的中心点 然后按住

Shift+Alt+鼠标左键 再开始拉 这样会拉的比较均匀 比较美观

比较舒服 没错 老湿我就是 有史以来 拉的最好的

51075783b1dd0000012e7e67a15b.jpg

然后就象这样 怎么看着像某国国旗?好吧 不要在意细节 颜色#e6234c

  这样还没完 我们要调出第一道彩虹

填充色去掉 描边改成24px 其他不用改

d2345783b26c0000018c1ba0a2e0.jpg这样我们就拉出了第一个 我们接下来拉第二个

复制这个图层 快捷键Ctrl+J 然后 在选择新图层 按Ctel+T

来自由变换  按住Shift+Alt 把它拉小 并且把颜色改成 #f0be37

99355783b3bf0000018c1b4588ce.jpg

会了把?很简单的 接下来 的两个 也是这个步骤 记得要缩放 和改颜色哦!接下来的 颜色分别是#72c8eb蓝色#9677d5紫色  太麻烦我不想写了 

51215783b5760000012e7ebe029a.jpg

2e235783b4e80000018c1b1efe18.jpg

最后就成了这样 注意到 蓝色的外圈有黑色的描边 想要弄没 

快捷键是Ctrl+Sift+H


再然后我们就 把这四条彩虹 都选上 多选图层按Ctrl

432a5783b65d0000012e7eae836a.jpg

全选后我们按 Ctrl+G 来把他们打组 然后右键打好组的图层

转换成智能对象 再右键 转换成栅格化图层

31285783b7800000018c1b3da82e.jpg

 这样我们才可以

用矩形选框工具来框选我们不要的下半部分  按Delete删除


然后 我们新建一个图层 在新图层上 用椭圆工具 来画一个圆 

按住Shift 才能画出正圆哦  颜色填充成 #d2ebff09e55783b9130000018c1bc05527.jpg

我们再来复制两个这个可爱的小蛋蓝色 圆球

60165783b95c0000012e7e331e22.jpg

自行调整位置 并把中间的 放大 放大时记得按住Shift+Alt哦

然后 我们把他们打组 按住Alt向右拖拽 复制一个出来 放到右边

然后 我们按Ctrl+T 右键右面的云彩 水平翻转

7b455783ba240000018c1bb65c25.jpg

我们就得到了 两朵云 神不神奇?好不好玩?厉不厉害? 还有更厉害的呢 


我们再新建一个图层 用椭圆工具 来拉出一个545 x 545 px 的圆

注意把图层放到其他图层的底下

9a275783bb760000012e7e8e8d76.jpg

自行调整一下彩虹的位置 你自己看着舒服就行

接下来 观众朋友们 终于到了激动人心的最后一步了

1e2c5783bbb20000018c1b856dc0.jpg

终于要完成了 累死我了

然后新建一个图层 刚刚的绿色圆的上面 用矩形工具 做一个

W370 H690px的矩形 #b0d549

并且 按Ctrl+Shift+T 来旋转到这个位置

9f805783be870000012e7ee7033f.jpg

现在我们需要把露在圆外面的正方形剪掉。 用移动工具选中圆形图层后切换到钢笔工具(P),在圆上单击鼠标右键,选择建立选区。 关闭建立选区的窗口,保持默认的设置就好。在选择菜单中选择反向。(选择>反向)

现在我们回到图层面板找到阴影图层,删除键删除圆外那些我们不需要的部分。(应该把阴影图层栅格化,原文没有写,包括下文用橡皮擦出也是栅格化之后才可以的)

现在我们用橡皮工具(E)擦掉图标上没有用的阴影。

81845783bed70000018c1b725b19.jpg

OK 最后我偷懒引用了原文 因为 我好困  我需要休息  不知道有没有下一期了  那么 我们 江湖再见吧



10
举报
|
15
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI界面 组件
【新年UI图标】30个图标
我的钱包-UI界面设计-app
手表表盘UI系列
UI 登录界面设计模板包
拟物风质感写实UI卡片合集源文件
UI通用设计素材1
钱包ui模板
户外旅行飞机情侣假日出行
高级表盘系列UI源文件
科技医疗透明柜UI界面设计
新能源APP应用UIKit
新拟态风格 UI设计组件库
【新年UI图标】积分icon
【新年UI图标】活动icon
智能家居中心 简约 UI设计组件库
【新年UI图标】体育icon
盲盒APP UI设计
3D卡通UI界面图标可爱插画免扣素
3D渐变流体抽象矢量UI背景图
【新年UI图标】珠宝icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】礼物/活动icon
你可能喜欢
大家都在看
登录注册