2019-09-20 UI设计培训

UI设计培训 | PS制作Chrome图标教程

UI设计培训像素妹已经迫不及待想要和大家一起学习啦~假期在家吃吃玩玩你们还记得PS界面长啥样吗?就带大家回忆一下布尔运算,制作谷歌浏览器的图标!

先来看完成图:

UI设计培训


大家在拿到图之后,不要着急画,可以先分析一下这个图标是由哪几部分组成的。首先可以看出整个图标大形是个正圆,然后中间有两个同心圆;然后有红黄绿三个不同颜色的形状在大圆里;最后再加上三个阴影就可以了。这样拆分之后是不是觉得思路清晰点了?那就开始吧~

第一步,先把外轮廓画出来

1.新建画布,依旧分辨率是72,画布大小大家随意掌控,选中椭圆工具,按住shift画一个较大的正圆,随意填充一个颜色,如下图;

UI设计培训


2.ctrl+j复制一层,ctrl+t自由变换,同时按住shift+alt,往里缩小,就可以得到一个同心圆,需要注意的是,之前绘制的大圆如果是偶数的,缩小的小圆也必须是偶数的才可以和大圆是同心圆,奇数的亦然。给这个圆填充一个白色,如下图;

UI设计培训



3.ctrl+j再复制一层,重复上一步制作同心圆的步骤,得到一个更小点的同心圆,像素妹填充的颜色是“4c8bf5”,如下图;

UI设计培训


第二步,绘制大圆里的形状

1.用小黑工具选中刚才画好的白色正圆,拉两条横向的参考线,一条放在白色圆的顶部锚点处,一条穿过中间的两个锚点,再拉一条纵向的参考线穿过纵向的两个锚点。用矩形工具绘制一个矩形,颜色填充为“ffce43”,两条边分别对齐顶部的横向参考线和纵向参考线,如下图;

UI设计培训



2.用小白工具选中矩形左下角的锚点,往左移动几个像素,具体移多少根据你画的形状大小来定哦,像素妹的大圆是500*500的,就移动了20个像素,移动完锚点之后,把矩形这个图层放在大圆图层的上面,在矩形的图层上右键,创建剪贴蒙板,矩形就蒙进大圆里啦,如下图;

UI设计培训



3.选中矩形图层,ctrl+j复制一个,颜色填充成“1aa260”,ctrl+t自由变换,把自由变换的中心放在圆的圆心上,也就是咱们刚才拉好的参考线交汇的中心(注意:在做这一步的时候,一定要把视图放大,才会比较准确),接着把顶部工具栏的角度改为120度,再重复做一次剪贴蒙板就可以啦,如下图;

UI设计培训

UI设计培训

UI设计培训

4.同时按下ctrl+shift+alt+t,执行连续复制,就会复制出一个在绿色矩形基础上同样绕圆心旋转120度的矩形啦,把它的颜色换成“dd4d42”,同样剪贴蒙板蒙进大圆里,如下图;

UI设计培训



5.这个时候是不是发现红色矩形多了一块?我们用布尔运算把多出来的地方剪掉就可以啦!选中矩形工具,按住alt键,贴着参考线画出一个矩形,如下图;

UI设计培训



最后,再给这三个矩形分别加上一个阴影就大功告成啦~

第三步,加阴影

1.同样的,贴着参考线绘制一个稍微扁一点的矩形,然后把右下角的锚点往上移动跟右上角的重合,形成一个三角形,填充颜色的时候,用吸管工具吸一下要加阴影的矩形的颜色,然后往深了调节一些,如下图;

UI设计培训


2.给这个阴影的图层加一个图层蒙版,选择渐变工具,不透明度调整为50%,在阴影上横向拉一下,让阴影的边缘稍微虚化一些,如下图;

UI设计培训



3.重复制作绿色矩形和红色矩形时的步骤,ctrl+j复制一层,然后ctrl+t自由变换时把中心放在圆心,角度改为120度,得到剩下的两个阴影,记得改颜色啊~完成如下图。

UI设计培训

是不是很快就做完啦~有的同学可能会问了:为什么阴影的颜色不直接都用黑色然后更改不透明度呢?其实这个方法也不是不可以,但是黑色更改不透明度后放在一些浅色,比如这个黄色上面看起来会有点脏,所以像素妹没有采取这种方式,大家可以动手试验看看哦~新的一年,大家都要更加努力才行呀!



林老师:0371-5556 6060