当前位置: 主页 > 平面设计 > PS教程 > 用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

  • 2021-08-18
  • 来源/作者: 优设/ 吃喝玩乐团团长
  • 36 次浏览

在开始制作之前呢,首先确定好自己要做的内容有哪些,大致的一个风格。然后去寻找参考,看看其他作者如何在作品中将自己的想法展现出来。这里我选择相机、天气、日历、相册、设置、信息、视频和地图。

内容和风格确定了,参考也找的的差不多了,对于自己要做的东西有一个比较清晰的思路之后,先在草图上将自己大致的想法画出来,然后才用软件将想法构建完善。这里做的几个图标都是比较简单的,基本上可以用图层样式来实现所有的效果。

因为是拟物风格,所以在图标制作的过程当中,要注意体积和光影的表达。通过颜色的选择、相似的装饰元素使整体风格看起来更加统一和谐。

先看看效果图

用PS<a href=/design/ target=_blank class=infotextkey>设计</a>拟物风格APP图标的<a href=/photoshop/tubiao/ target=_blank class=infotextkey>图标设计</a>教程

教程步骤

草图

用PS设计拟物风格APP图标的图标设计教程

一、相机图标

步骤 01 建立文档并制作背景

新建文档,大小2000x800px,分辨率72;新建图层,命名背景,填充前景色#d6d6dd

步骤 02 制作底座

新建300x300px的圆角矩形,圆角半径60px,命名底座,添加图层样式制造体积感

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

步骤 03 制作镜头外圆

新建228x228px的圆形,命名【外圆1】,添加图层样式

复制外圆1,修改大小190x19px,命名【外圆2】,添加图层样式

将外圆1,外圆2编组命名【外圆】

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

步骤 04 镜头内部

新建大小162×162 px的圆形,命名【内圆1】

复制3个,大小分别修改为130x130px、90x90px、56x56px

分别命名为【内圆2】、【内圆3】、【内圆4】

再按顺序添加以下图层样式

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

步骤 05 制作玻璃球

新建大小24x24px的圆形,颜色#000000,复制一个备用

添加蒙版,擦去上半部分,添加图层样式

将复制的圆形颜色改为#ffffff,调整不透明度10%,添加蒙版,擦出一个月牙形状

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

步骤 06 制作镜头高光

按住CTRL+左键点击【外圆1】图层缩略图得到圆形选区

新建一个图层,用柔边圆笔刷(大概400px)在圆形选区的上半部分轻轻拍一下,颜色#ffffff,不透明度20%

用布尔运算做出图中图形(三个图层),颜色#ffffff,不透明度30%

添加蒙版将边缘擦的模糊一点,让边缘过渡看起来自然一些

在较大的两个图像上添加图层样式

用PS设计拟物风格APP图标的图标设计教程

步骤 07 添加装饰性元素

新建100×300 px的矩形,颜色#d43131,调整图层顺序使它在底座上方,做剪贴蒙版

选个字体打一些装饰性的文字啥的

至此,相机就做完啦~(做完记得将相机的都编成一个组)

用PS设计拟物风格APP图标的图标设计教程

二、日历图标

步骤 01 制作底座和日历基本形状

将相机底座复制一个,新建228x 224 px大小的圆角矩形,圆角半径24,命名【底页1】,添加图层样式

复制底页1,命名【底页2】,修改投影大小,相对底页1上移2px

复制底页2,命名底页3,相对底页2上移2px。

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

步骤 02 制作主页面上半部分

新建228x114px大小的矩形,将上面两个角的圆角半径调整为24px,命名【上半页】,添加图层样式

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

步骤 03 制作主页面下半部分

复制上半页,垂直翻转,用小白适当调整形状,添加图层样式

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

步骤 04 制作日期

选择一个字体,随便打个数字,将数字转化为形状,添加图层样式,复制一层备用

按住CTRL+左键点击【上半页】图层缩略图,选择数字图层,添加蒙版

为备用数字图层添加图层样式

CTRL+左键点击【下半页】图层缩略图,选择备用的数字图层,添加蒙版

用小白工具对备用图层的形状进行调整,添加图层样式

最后加上月份星期

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

三、相册图标

步骤 01 制作底座和胶片基本形状

新建225×144 px大小的矩形,将右边的两个角的圆角半径修改为10px,颜色#f6f5f5

运用布尔运算做出上下两排小孔(12x16px,圆角半径4px)

新建圆角矩形116×80 px,圆角半径10px;颜色#dad7d7

复制一个,适当调整位置和大小

将三个图层编组,命名【胶片-下】

整组复制,命名【胶片-上】

运用布尔运算将【胶片-上】中的底修改成合适的形状

将两组合起来编成一个新的组命名【胶片】,添加图层样式

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

步骤 02 制作胶片高光和阴影

新建34x155px的矩形,颜色#ffffff,羽化4.6

复制一层,将宽改为9px

两个高光图层居中对齐

新建空白图层,用柔边圆画笔在【胶片-上】左侧边缘画出阴影

调整图层顺序,使高光和暗部图层在【胶片-上】的上方,做剪切蒙版

添加红色装饰物,使整体图标风格统一

用PS设计拟物风格APP图标的图标设计教程

四、设置图标

步骤 01 制作齿轮基本形状

新建180×180 px大小的圆,40×240 px的矩形,将矩形与圆形居中对齐

用钢笔工具在矩形与圆形交点处,为矩形添加四个锚点

用小白调整使新增锚点两边偏移10px,根据情况上下调整,使得四个新增锚点仍为矩形与圆形的交点

复制两层,分别旋转120°和240°

将所有形状合并形状组件

新建80x80px的圆形,与刚刚合并形成的形状居中对齐,减去顶层形状

添加图层样式,得到设置图标的基本形状

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

步骤 02 制作齿轮内部

白色部分:新建160×160 px和100×100 px的圆形,减去顶层形状,添加图层样式

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

红色部分:新建140x140px和100x100px的圆形,减去顶层形状,添加图层样式,最后加上文字就可以了

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

五、地图图标

步骤 01 制作基本形状

创建190×190 px大小的圆形,140×140 px大小的矩形,将矩形旋转45°

用锚点转换工具和小白,将左右两点调整至与圆相切,并且带有下面两条边带有弧度,像是从圆上延申过来的感觉

创建80x80px的圆形,将三个图形合并形状减去小圆,添加图层样式和文字装饰

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程

用PS设计拟物风格APP图标的图标设计教程