搜索
    微元素»资源 › CG资源 › 2D素材_UI_平面 › 平面设计 › UI图标设计:炫酷的彩色格子图标
    平面设计 [APP网站] UI图标设计:炫酷的彩色格子图标
    发布于
    2016-4-18
    3827
    39

    您需要 登录 才可以下载或查看，没有账号？注册

    x
    UI图标设计:炫酷的彩色格子图标

    8e3277085feb167cb4b60d79db2307e6.jpg
    第1步：
    打开Photoshop，Ctrl+N新建一个文档，文档尺寸可自定义。
    02a450e39d23d1316beffb136fa7cfaf.jpg 第2步：
    按住Alt键双击背景图层，使其转换为普通图层。然后再次双击，打开图层样式面板，为其添加颜色叠加样式，颜色为#262523。
    继续为其添加渐变叠加，数值如下：
    再利用内发光中的杂色功能来给背景添加一些杂色，当然你也可以使用滤镜中的添加杂色功能。
    此时的背景：
    第3步：
    新建一层，用白色大号柔边画笔在画布中心点击出白色亮光。
    Ctrl+T将其拉宽压扁，如下图所示。
    将图层不透明度调整为10-30%，这里可以根据自己的感觉来调整。
    第4步：
    接下来我们创建icon主体。利用圆角矩形工具在画布中心点击，在弹出的对话框中设置数值如下：
    第5步：
    在圆角矩形上方随意绘制一个比其尺寸大一些的形状，因为我们后面会将其转换为剪贴蒙版，因此形状可随意绘制。
    为创建的形状添加角度渐变。
    然后按住Alt键在角度渐变与圆角矩形中间点击鼠标左键，将其转换为剪贴蒙版。然后在图层名称上点击右键，将其转换为智能对象。
    第6步：
    利用马赛克滤镜(滤镜>像素化>马赛克)对其进行分块处理。
    第7步：
    将执行了马赛克滤镜的图层Ctrl+J复制一层，同样转换为剪贴蒙版。然后点击滤镜>风格化>照亮边缘。
    将其图层混合模式设置为线性减淡(添加)，图层不透明度设置为30%。此时每个格子间都被细线分割开了。
    第8步：
    将上一步创建的图层Ctrl+J再次进行复制。将图层混合模式设置为减去，图层不透明度设置为20%。
    选择移动工具，利用键盘上的方向键将其位置向下方与右方分别移动1像素。这样格子的间隔部分便形成了凹槽的效果。
    第9步：
    利用椭圆工具在icon中心绘制出一个正圆形。
    然后为其添加角度渐变。
    继续添加内阴影
    为了表现立体感还要为其添加投影
    我们来看一下此时的圆形样式
    第10步：
    利用椭圆工具在icon中心再次创建一个较小的正圆形。
    为其添加颜色叠加样式。此处颜色选择接近黑色的深灰色。
    继续添加内发光。与第2步相同，我们这里利用内发光来添加杂色。
    然后为其添加内阴影。
    再来个内部描边以使其轮廓更加明显。
    来看看我们处理后的结果。
    第11步：
    下面我们来添加文字。
    然后为文字添加渐变。这里我就不给出具体数值了，你可以根据自己的感觉来。当然你也可以使用其他色系的颜色。
    添加内阴影以模拟边缘的高光。
    当然了，要表现立体感，阴影还是不能缺少的。
    第12步：
    做到这里，总觉得icon平平淡淡，缺少点感觉。好吧，使出我们的杀手锏，添加发光!你立刻就会感受的奇迹的发生了。
    把第4步创建的圆角矩形图层按住Alt键向上拖动复制一份，把填充调为0，这样我们就可以不受这个图层本身颜色的控制了，而可以对图层样式进行为所欲为的调整，嘿嘿。
    来吧，给它添加内发光!
    还有内阴影
    来看看效果，怎样样?是不是好看了很多。
    你是不是正要庆祝终于完工了?等等，icon右上角那一片白是怎么回事?木有细节了，亲。
    第13步：
    好吧，苦逼的设计师，继续调整。
    双击图层，打开图层样式面板。在混合选项中，将“图层蒙版隐藏效果”勾选上。
    然后为图层添加蒙版，用黑色画笔将细节擦出来。
    第14步：
    最后添加上倒影。Oh，my god!终于完了!

    资源地址: http://cg.silucg.com/ui/jichu/12543.html（分享请保留)
    参与人数 1 元素币 +3

    本帖被以下画板推荐:

    使用道具 举报 登录

    回复 <
    试试起个中文名  发表于 2016-4-18 18:44:49  
    2#
    谢谢分享
    回复 收起回复
    使用道具
    mote  发表于 2016-4-18 19:17:57  
    3#
    首发必需微元素，荣耀加身装备酷！
    回复 收起回复
    使用道具
    5彭2彭0  发表于 2016-4-18 22:05:55  
    4#
    谢谢分享
    回复 收起回复
    使用道具
    郁郁誉  发表于 2016-4-18 23:25:49  
    5#
    首发必需微元素，荣耀加身装备酷！
    回复 收起回复
    使用道具
    xs21212121  发表于 2016-4-18 23:30:32  
    6#
    瞧瞧看看
    回复 收起回复
    使用道具
    Magic茵  发表于 2016-4-19 00:26:59  
    7#
    谢谢分享！受益匪浅~~
    回复 收起回复
    使用道具
    不破大地  发表于 2016-5-3 20:43:29  
    8#
    很高兴楼主的分享
    回复 收起回复
    使用道具
    shijian  发表于 2016-5-10 09:42:42  
    9#
    zan
    回复 收起回复
    使用道具
    薅秃咒  发表于 2016-5-26 15:45:06  
    10#
    这个教程真心赞啊
    回复 收起回复
    使用道具
    wang4585  发表于 2016-9-10 14:00:00  
    12#
    我们先定一个能达到的小目标，先赚它一亿元素币
    回复 收起回复
    使用道具
    m.neuhS  发表于 2016-9-29 22:32:20  
    14#
    元素帖子强，满满正能量！
    回复 收起回复
    使用道具
    m.neuhS  发表于 2016-9-29 22:32:23  
    15#
    资源哪里好，肯定元素找！
    回复 收起回复
    使用道具
    m.neuhS  发表于 2016-9-29 22:32:25  
    16#
    从业不识微元素，做遍项目也枉然
    回复 收起回复
    使用道具
    Drucker  发表于 2016-9-30 09:14:18  
    17#
    从业不识微元素，做遍项目也枉然
    回复 收起回复
    使用道具
    失意召唤师  发表于 2016-10-15 10:42:58  
    18#
    大神
    回复 收起回复
    使用道具
    奥特倩  发表于 2016-11-30 14:16:14  
    19#
    这世上没有什么是元素币搞不定的，如果有，那就用更多！
    回复 收起回复
    使用道具
    大头熊  发表于 2016-12-5 09:58:20  
    20#
    立刻提起了精神。
    回复 收起回复
    使用道具
    123下一页
    回复

    快来发表你宝贵的意见吧！

    素材推荐
    Metrop 实名

    通过了实名认证的内容创造者

      

    + 关注 695 发私信
  • 【漫威】绘画类作品收录

    【漫威】绘画类作品收录

    • 主题
    33
    精华
    0
    超神
    0
    扩散
    0
    微金
    10
    智慧
    0
    余额
    0
    在线时间
    30 小时

    长枪

    提醒
    0
    快速回复 返回顶部 返回列表