• 以指代步
社交账号登录
  • 首页
  • 博客
  • 模板
  • 源码
  • 壁纸
  • 视频
  • 软件
  • 文库
  • 学习
  • 创作中心
  • 关于我们
  • 招兵买马
  • 联系我们
  • 法律申明
  • 合作招商
  • 注册
  • 粉丝
  • 关注
  • 创作
  • PS实例教程:设计立体拟物风格APP图标

  • 在路上 2022-03-21 18:57:17 收藏
  • 文章标签: 图层 步骤 样式
  • 在开始制作之前呢,首先确定好自己要做的内容有哪些,大致的一个风格。然后去寻找参考,看看其他作者如何在作品中将自己的想法展现出来。这里我选择相机、天气、日历、相册、设置、信息、视频和地图。

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

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

    先看看效果图

    PS实例教程:设计立体拟物风格APP图标

    教程步骤

    草图

    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图标

    评论
    Artlist模板 广告