恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
这个你不看?icon教程,小白必看!
0.0°
2017-08-13 好文转载 教程 原作者: 未知 举报 2490 13 6 3

在学习路上总会遇到各种各样的困难,好的方法是高效的关键。通过学习icon制作基本法则,避开icon制作的那些坑。

开始前先说下:需要学习UI的加群:191299792,Image title进群验证:ui觅李,每天晚上都有课程,最重要,免费!不多说,开始了:

一、制作icon的基本原则

二、让你的icon更加出彩

三、制作icon的经验方法

       01. 使用网格

       02. 使用面板精确控制,为整数像素(完美像素)

       03. 保持厚度一致,尽量让厚度为2的倍数

       04. 用形状表现轮廓

       05. 不要出现断开的路径

一、    制作icon的基本原则

1. 站在“老大”角度思考,为目标受众设计

在制作icon前一定要找到你的目标受众,弄清楚你为谁设计。这样才能解决销售的问题,搞清 需求才是设计的开始。不要单凭自己的感觉来,而忽略的目标受众。

2. icon不必过于复杂

清晰的表达含义,让人一眼就知道其中意思,不需要思考。复杂又表述不清会误导用户。

3. 应用在你的网站或应用中

制作的图标要在实际的网站或应用中进行应用测试,通过icon的不同颜色、选中未选中等相互对比,找到最合适的icon进行设计。

4. 教客户或其他使用者使用你的icon

制作完成的icon,要教会icon使用者充分利用你的icon,让你的icon以最佳方式呈现。让客户觉得效果最好,让你显得更加专业。

一、    让你的icon更加出彩

1. 统一icon风格

icon的漂亮且一致才是关键,在制作前要准备好制作的风格,不要边做边想。一旦决定要制作的风格,就要坚持每一个图标都保持一致。保持整体的魅力和价值。Image title

— 腾讯云icon —

2. 可以使用相同元素在你的每一个icon中

在icon中使用相同元素会让icon看起来更加整体,且具有一定的独特可识别性,例如:你在一个icon中使用了品牌的某一个小元素或是仅仅就画了一个圆,那么你应该在下一个icon需要使用品牌元素或者圆的时候直接复制它。Image title

3. 使用一套色板

当全部icon制作完成时,它的颜色应该出自同一个色板,保存颜色统一相当重要。当然,你可以制作深色与浅色两种来配合在不同背景下的使用,依然要保持颜色统一。不要让你的图标眼花缭乱。Image title

- Justas Galaburda -

一、    制作icon的经验方法

1. 使用网格

合理使用网格制作icon会加快你的速度,同时也能让你更加标准。虽然网格有很多好处,但也不要被网格给限制。在大多数情况下复杂的网格也不是那么重要,合理利用。要记住它只是让你更严格的工具。

2. 使用面板精确控制,为整数像素(完美像素)

Ai使用变换面板,Sketch使用检查器来精准制作你的icon,切记不要使用纯手工调制。当然数位板手绘icon除外。

保持整数像素,从局部查看为整数,从整体查看也应为整数。绘制完成后Ai可使用像素预览来观察icon是否对其像素。之后得到你的完美像素icon。Image title

3. 保持厚度一致,尽量让厚度为2的倍数

让每个图标的厚度保持一致,同时建议厚度尽量使用2的倍数。因为假如你在一个32px*32px的画板绘制一个31px*31px的icon,那么当把画板缩小到16px*16px时,icon变为了15.5px*15.5px。这样违背了我们上面说过的要保持整数像素。应该尽量避免这种情况的出现。

 

4.    用形状表现轮廓

请记住,当你要绘制一个32px*2px厚度时候,应该绘制32px*2px的矩形,而不是绘制一个32px*2px的线或轮廓。

5.   尽量不要出现断开的路径

切记,不要出现断开的路径,想办法把你的路径完全闭合。让它成为一个完美的icon。

接下来导出你的icon吧,它肯定很棒。

文章最后感谢腾讯云,Adobe,Justas Galaburda的图片支持。

更新:2017-08-13

收藏

13人已收藏

ui专家觅李

坚持,唯有坚持,别无选择

  • 20

    作品

  • 49

    粉丝

  • 4

    关注

  • UI标注最高---PxCook3.0 设计师自动标注软件
  • UI设计为什么那么火?
  • 纯干货:PS神器——Camera Raw滤镜使用详解(上集)
  • 《PS写实图标教程》

    猜你喜欢

      2017-08-13 好文转载 教程 原作者: 未知 举报 2490 13 6 3

      这个你不看?icon教程,小白必看!

      0.0°

      你确定要举报这个你不看?icon教程,小白必看!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      13
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录