首页
限免课
实战课
免费好课
课程库
经验
问答
会员课程
首页 |经验 |ui |经验详情

APP导航图标设计教程

更新时间:2023-11-26

想人陪望树叶

ui

2492

智能手机上的各种APP已经成为我们生活的一部分,每个APP图标都是唯一且独特的,很多小伙伴都很好奇APP的图标是怎么设计的,今天就给大家带来一些APP导航图标设计教程 ,小伙伴们一起来看看吧!

第一步,以上面的fork图标为例,先画一个120*120的圆,加上样式的渐变叠加,颜色值分别为#ffc62d和#ffb034,得到按钮的底部。

APP导航图标设计教程

第二步:在按钮上画出刀叉,用笔画或矩形相交切割,就可以画了。

APP导航图标设计教程

第三步:用我喜欢的钢笔路径画一个大概的形状,然后把形状填充设为渐变,透明度为0%,透明度为10%,颜色值都是纯黑色#000000.然后,在缩小到合适的尺寸后,创建一个裁剪遮罩,并将其放在刀叉图标上.Dalla~最简单的内角阴影图标制作!!

APP导航图标设计教程

这种图标的好处是,原来普通的图标按钮,稍加改动,就能立刻变得与众不同,这就让APP页面增加了不少分.以此类推,我们可以利用创意根据图标画出各种不规则的形状进行剪切粘贴,也可以给形状添加颜色等变化,利用你的创意为你的APP页面设计加分。

APP中常用的导航按钮之一:“椭圆矩形图标”,下面开始教你如何制作下图中圆形和圆角矩形之间的“椭圆力矩”图标按钮,其实很简单,只需要两步。

第一步:在形状工具中找到多边形工具,然后设置如下图所示的参数:边4,检查光滑角,然后按住shift键画一个120px*120px的圆,看到了吗?这个圆不同于我们平时看到的完美圆和矩形椭圆。

APP导航图标设计教程

第二步,放上面说的刀叉,侧面放一个正常的圆圈.比较哪个更好玩?这就是传说中的椭圆形长方形。其实还有其他的方法可以画出来,但是通过我的实验,用上面的方法做出来的椭圆矩形更好看,也最方便。

APP导航图标设计教程

APP中常用的导航按钮之一:“平板水晶图标按钮”,非常简单,也是两步完成。

第一步,像往常一样画一个120*120的图标库.这里我用一个椭圆形的长方形作为基础.然后重点来了!只有特定的图标才适合做这种图标按钮.(1)要求有表面图标.(2)图标可以一分为二,如下图所示。

APP导航图标设计教程

第二步:将分割的较小部分的透明度设置为60%,将较大部分的形状渐变设置为60%透明度和100%透明度.颜色值都是纯白#FFFFFF(如果是下载的图标,将填充透明度改为0%,然后添加渐变叠加样式).Dalla~最简单的平板水晶图标就做出来了。

APP导航图标设计教程

这个图标的优点是操作简单,精致美观,透明扁平如水晶,大家都可以有创意,加上我之前教程提到的漫反射阴影效果让图标更精致,或者加上红包图标之类的小斜线等等.,符合APP的实际应用。

APP导航图标设计教程

这篇文章可以带大家入门.画图标要有技巧,用的上的图标才是好图标,快去试着把你之前设计稿里的图表改成上面的样式,看看是否更美观吧。

上一篇 下一篇

相关课程

ONLINE COURSES
  • 女生学计算机可以从事什么职业

    女生学计算机可以从事什么职业

    讲师:JennyZ

  • 设计类前景较好的专业有哪些

    设计类前景较好的专业有哪些

    讲师:奇思无止境

  • UI作品集怎么做

    UI作品集怎么做

    讲师:行动者帆帆

  • 元宇宙对设计师有哪些影响

    元宇宙对设计师有哪些影响

    讲师:奇思无止境

免费好课

FREE GOOD COURSES
MORE
  • Stable Diffusion - 2024全新AI绘画系统教学

    Stable Diffusion - 2024全新AI绘画系统教学

    1小时40分钟49秒

  • AI动画设计课-Stable Diffusion

    AI动画设计课-Stable Diffusion

    1小时32分钟15秒

  • AutoCAD施工图深化课

    AutoCAD施工图深化课

    3小时35分钟15秒

  • 品牌物料设计课

    品牌物料设计课

    3小时57分钟38秒

  • 人体动态结构表现

    人体动态结构表现

    3小时20分钟5秒

  • ComfyUI插件推荐与使用技巧

    ComfyUI插件推荐与使用技巧

    1小时13分钟5秒

Copyright © 2015 - 2021北京云创科讯软件有限公司

京ICP备16013396号-1

经营许可证京ICP证161220号

课程咨询电话 18516802937

  • 在线咨询
  • 插件下载
  • 职业测评
  • 素材下载
  • 微信咨询
学习在线解答