今天我们做一个比上次稍微难点的图标:通讯录比上次第一个图标难一点哦!

如何用PS制作一个简单的扁平化图标?

不知道首先要打开PS的同学统统面壁!和上一课一样,建立一块150*150的画布(不知道可以参考上一期的制作方法,内附详细步骤的图解教程)。

第一步

一样的,首先来画通讯录牛皮本的棕色封面,将前景色颜色选为蓝色(参考颜色值:#a4744d)

如何用PS制作手机中的“通讯录”图标?

如何用PS制作手机中的“通讯录”图标?

和第一课一样,使用矩形工具,在画面上点一下,设置尺寸为150px*150px,在画面上生成一个棕色方块(就是本子的封面)

如何用PS制作手机中的“通讯录”图标?

如何用PS制作手机中的“通讯录”图标?

拽一拽,位置放整齐一点,把背景遮住。

如何用PS制作手机中的“通讯录”图标?

这种反复重复的操作步骤以后就不反反复复的重复了,要不然你们该嫌我唠叨磨叽了。

第二步

接下来给本子订上一圈线,首先选用圆角矩形工具,在画面上点一下,设置一个尺寸140px*140px,圆角半径8px的圆角矩形。

如何用PS制作手机中的“通讯录”图标?

矩形工具是很重要的东西,以后少不了用这个,快捷键是U。

如何用PS制作手机中的“通讯录”图标?

这里的演示用的软件版本是Photoshop CS6 ,旧版本的操作界面可能略有不同,建议大家还是别费劲凑合了,赶紧使用CS6以上的版本吧!我个人认为设计软件一定要使用最新的,否则一些新的技术、新的特效效果做不出来你的设计就落后别人了。

这跟其他的软件不同,像银行里的那种系统与软件稳定与安全是王道,但我们设计师的软件是实用、新颖、潮流才是我们的追求。

回到正题!现在看起来是不是这样?

如何用PS制作手机中的“通讯录”图标?

第三步

接下来,我们把圆角矩形变成一根缝在皮革上的线。首先使用路径选择工具(快捷键A,黑色的箭头,如果现在的是白色箭头就再按一下A,两个是互相切换的兄弟)。

如何用PS制作手机中的“通讯录”图标?

点一下刚才画出来的这个圆角矩形(意思就是选中接下来要操作的对象)看起来是不是这样?

如何用PS制作手机中的“通讯录”图标?

在ps界面左上角找到修改矢量图像属性的地方,先把填充色选为空。(这里调的东西是矢量对象的样式,PS里矢量对象有很多种样式可以选哦)

如何用PS制作手机中的“通讯录”图标?

别急着跑开,再用一样的办法,把右边的描边选为深棕色。(这个色板是Adobe官方配置好的,如果有的同学手头的版本没有这个色板,可以手动把前景色选一个深棕色,然后再最近使用颜色中选取。)

如何用PS制作手机中的“通讯录”图标?

变成这样了,有没有?

如何用PS制作手机中的“通讯录”图标?

第四步

接下来把线框变成细虚线,描边后面输入框,把线的粗细改为“1点”,接着点后面的线段样式,选择第二行的虚线,在选择下面的更多选项,把下面输入框里的虚线数值写上4,间隙写上2,最后点确认。

如何用PS制作手机中的“通讯录”图标?

现在看起来是这样了吧?

如何用PS制作手机中的“通讯录”图标?

我们把圆角矩形位置对齐一下,这里会用到对齐工具。功能位置是在刚才操作的位置后面。

如何用PS制作手机中的“通讯录”图标?

确保矩形处于选中状态的情况下,点一下对齐工具,先勾选下面的对齐到画布,然后分别点击水平居中,垂直居中。

如何用PS制作手机中的“通讯录”图标?

对齐了吧!

如何用PS制作手机中的“通讯录”图标?

 

不过目前的线看起来还是一圈虚线,还不太像是订在皮革上的粗线,为了达到这个效果,我们需要给目前的虚线加上一些样式(和上次做软绵绵的云的思路一样的哦,都是用样式!)这里的处理方式比较简单,只需要家一个投影即可以了。

如何用PS制作手机中的“通讯录”图标?

行了,现在的线段看起来是不是这样的了?

如何用PS制作手机中的“通讯录”图标?

第五步

接下来我们用矩形工具在本子的封面上画一个人,绘制思路与上一课里绘制云朵的方式一致:用一系列的矩形或者椭圆组合成一个最终的形状。但这里要善用Shift(矩形相加)和Alt(矩形相减)。

如何用PS制作手机中的“通讯录”图标?

先看下最终要的效果,其实很简单的跟着我一起来画这个小人吧!

首先我们画头部,选用椭圆工具画一个圆。(按住shift就是画一个正圆,分别按住shift,alt效果是不同的,大家自己试试看吧。)

如何用PS制作手机中的“通讯录”图标?

使用路径选取工具选中圆形,这个时候可以看到矢量图形的节点。

如何用PS制作手机中的“通讯录”图标?

如何用PS制作手机中的“通讯录”图标?

接下来使用直接选取工具(就是黑箭头的好兄弟白箭头)

如何用PS制作手机中的“通讯录”图标?

点一下节点,是不是出现了两个小手柄?操作一下试试,这样一来我们就可以改变矢量图形形状了。

如何用PS制作手机中的“通讯录”图标?

接下来依靠各位灵巧的小手了,拽出一个人的头部来。(同时变形工具:位置在顶部菜单栏种>编辑>自用变换。快捷键Ctrl+T)也是一个能够很好帮助大家修改矢量图形形状的功能,要加以善用。

如何用PS制作手机中的“通讯录”图标?

巧用变形工具+直接选择工具,组合出一个外形不规则的躯干部分。矢量形状多余的部分可以按住alt放置相应矩形减去。(圆角矩形、直角矩形、椭圆是组成简单图形的基本要素!一定要多揣摩多尝试,shift、alt的加减作用非常基础非常重要,不明白就多试试。)

如何用PS制作手机中的“通讯录”图标?

最后把矩形元素图层合层,看起来是不是这样?(如果你能够善用shift和alt的话,你会发现你可以在同一个图层上完成复杂的图案绘制,不信你是是啊可能。另外一定要注意图层顺序,错误的图层顺序,会导致合层的时候出现怪异的效果。)

如何用PS制作手机中的“通讯录”图标?

一个纸片效果当然不足以表达本子上的人像凹槽,我们同样通过图层样式来制作效果吧。(是不是很熟悉了呢?大部分简单的效果都可以通过图层样式来完成。)

如何用PS制作手机中的“通讯录”图标?

另外有一个很重要的地方大家要注意了,这里我们把填充度改为50%,这样一来颜色会和底板的棕色融合到一起,并显示出凹槽的深棕色。而改填充度不会影响到图层的样式,这一点和透明度是很不同的。

现在看起来是不是这样了?

如何用PS制作手机中的“通讯录”图标?

第六步

接下来咱们来做华丽的金属铁圈吧,视觉效果很好,但是很简单!先看一眼做好以后的样子吧

如何用PS制作手机中的“通讯录”图标?

开工,首先,用圆角矩形工具画一个铁环的形状。

如何用PS制作手机中的“通讯录”图标?

接下来制作铁环的样式,想必你也猜到了,继续打开图层样式面板并添加样式。

如何用PS制作手机中的“通讯录”图标?

如何用PS制作手机中的“通讯录”图标?

如何用PS制作手机中的“通讯录”图标?

如何用PS制作手机中的“通讯录”图标?

看起来是不是这样子呢?

如何用PS制作手机中的“通讯录”图标?

在下面放一个图层,用圆角矩形做一个锁孔,这样可以将透明度设置为60%

如何用PS制作手机中的“通讯录”图标?

这样一来,简单的铁环就做好了,复制三个,上下办成一排,然后移动到画布最左侧,看起来像这样(不知道怎么复制图层?在图层中选中需要复制的图层,按住alt拖动,是不是复制出来新的图层来了?同时按住shift就可以平行移动了哦!又学到了shift和alt的新作用了。)

如何用PS制作手机中的“通讯录”图标?

第七步

这样一来,我们的本子已经做的差不多了,接下来就是为了增加一些光影效果了,以增强其质感。首先我们为人像部分制作一个反光(或者底光、环境光随便你叫什么)。首先找到你的人像图层,在上方新建一个图层。

如何用PS制作手机中的“通讯录”图标?

如何用PS制作手机中的“通讯录”图标?

确认选中渐变工具,并确认选中人像上方的空白图层,在人像下边缘位置上,拽一个小白色散射圆出来。看起来是这样的:

如何用PS制作手机中的“通讯录”图标?

修改图层样式,透明度改为50%,样式改为叠加。

如何用PS制作手机中的“通讯录”图标?

效果如下图所示:

如何用PS制作手机中的“通讯录”图标?

然后我们使用遮罩把多余的部分遮挡起来,先确保图层选中的人像图层,然后用路径选取工具选中人像所有路径,点右键 – 建立选区 – 羽化半径0 – 点确定。

如何用PS制作手机中的“通讯录”图标?

如何用PS制作手机中的“通讯录”图标?

效果如下图所示:

如何用PS制作手机中的“通讯录”图标?

如何用PS制作手机中的“通讯录”图标?

最后我们在为整个本子加一个全局的高光就完工了。在线段图层上方新建一个图层“高光”。用刚才绘制人像底光一样的办法,拽一个本子的高光出来,设置图层样式为叠加,透明度为50%。

如何用PS制作手机中的“通讯录”图标?

这样就完工了!一个简单的通讯录图标就制作完成了。

如何用PS制作手机中的“通讯录”图标?

有的时候我们需要图标外轮廓是带圆角的,那么我们需要给整个图层见一个组,并套用刚才给人像底光加蒙版的方式,给整个图层组加一个你需要的圆角矩形蒙版。看起来效果是如下所示:

如何用PS制作手机中的“通讯录”图标?

Tips:图层建组的方式是选中所有图层,选中界面顶部菜单中的图层 – 图层编组。快捷键是Ctrl+G ,是不是在菜单后面写着?其实菜单所有常用操作都有快捷键,而且都在菜单的后面写着。

灵位这里你可以选用圆角矩形工具画一个临时的圆角矩形,选中后对整个图层组做蒙版。

图层关系如下图所示:

如何用PS制作手机中的“通讯录”图标?



属性标签: ,

欢迎留言

页面生成消耗的时间 0.540 秒,此页面一共查询了 107 次数据库!缓存时间:2021-10-27 22:25:03你的IP为:101.69.175.100