火星网校
卡通风格UI图标设计教程
发布时间：2024-01-12 16:43:14 浏览量：121次
第一次出UI教程，把之前参加过比赛的几套风格各异的主题图标拿制作过程出来讲解一下，图标的绘制方法有很多种，主要看你适合哪种，用得方便不，注意技巧跟细节本教程提供源文件psd下载(文章末端左下角有附件可以下载)或者网盘链接下载：
http://vdisk.weibo.com/s/cQKtf42BDhBj，希望大家多多支持！另外欢迎上传交作业啦~
一、卡通风格 -- LYNN Rabbit （联系人图标）
Step01：点击 - 【文件】- 【新建】（快捷键Ctrl+N）新建一个新的图像，命名好并把宽度设置为800px，高度为600px，分辨率为72dpi，然后点击确定，记得顺手保存（快捷键Ctrl+S），以免做一半PS崩溃或者其他原因被关闭了那就悲催了~
Step02：先填充背景，色值为#282828（PS：这步主要是为了方便图标观看，背景色值不定，看着舒服，不影响图标外观即可）；
然后选择【椭圆工具】（快捷键U，可按Shift+U切换），在画布点击【创建椭圆】弹出层，设置宽度为172px，高度为170px，并勾选【从中心】，然后点击确定；
Step03：选中椭圆图层，命名为yuan，右键选择【混合选项】，选择【渐变叠加】，线性渐变，色值从上到下为 #feb5d0 - #ff7fae，角度为90°；
再选择【椭圆工具】创建宽度跟高度都为172px的圆，填充颜色为#c74a78；命名为yuan_di，对齐于yuan图层并放在其下面；
Step04：复制yuan图层（快捷键Ctrl+J）命名为yuan_ban，选择右键清除图层样式，填充颜色为#FFFFFF；不透明度改为30%；
选择【椭圆选框工具】（快捷键M，可按Shift+M切换），按住Shift键，画一个正圆选区（大小自己把握），可对齐图层，然后点击【图层】窗口的【添加图层蒙版】；
再复制yuan图层命名为yuan_bian01，选择右键清除图层样式，填充颜色改为# ffadcb；按住Ctrl键点击图层载入选区，按方向键向上和向左移动一像素，再反向选区（快捷键Shift+Ctrl+I），再点击【图层】窗口的【添加图层蒙版】；
同理复制yuan图层命名为yuan_bian02，填充颜色为#fff2f7，载入选区向下移动两像素，反向选区后添加图层蒙版；
Step05：复制yuan图层命名为nei_yuan，点击【编辑】-【自由变换路径】（快捷键Ctrl+T），缩小80%（记得点击【保持长宽比】），右键清除图层样式，选择【混合选项】设置：
【描边】：大小3px，内部，颜色# d85082，
【内阴影】：颜色# c33c6d，不透明度70%，角度120°，距离5，阻塞2，大小8，
【渐变叠加】：线性渐变，色值从上到下为 # feb8d2 - # ff80af，角度为90°；
Step06：复制nei_yuan图层命名为nei_yuan_ban，清除图层样式，自由变换路径缩小94%（记得点击【保持长宽比】），颜色# FFFFFF，不透明度改为10%；再载入yuan_ban的蒙版选区，点击【图层】窗口的【添加图层蒙版】；
再复制nei_yuan图层命名为nei_yuan_bian，清除图层样式，填充颜色改为# ffb9d3；载入选区向上移动两像素，反向选区，再点击【图层】窗口的【添加图层蒙版】，再把nei_yuan_bian图层向下移动一像素；
再复制nei_yuan图层命名为nei_yuan2，清除图层样式，自由变换路径缩小90%（记得点击【保持长宽比】），颜色# FFFFFF，不透明度改为5%；
Step07：绘制LYNN Rabbit头部部分，用【椭圆工具】创建一个椭圆，设置图层混合选项，再绘制耳朵部分，注意描边细节跟阴影，脸部一一拆分，大多数用是用钢笔工具、椭圆工具、图层蒙版、设置图层混合选项等完成，在这就不一一详细说明，最后加上耳朵阴影和高光，拉个椭圆白色透明渐变，设置不透明度为50%，完成图标的绘制。
END：Duang~ 完成图标后加个华丽丽的背景，再用同样的方法就绘制出一套主题图标啦~
欢迎加入UI设计学习群587751709
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
最新文章
