UI设计系列——线性,面性图标制作day1-2

UI设计系列——线性,面性图标制作

  • 前言
  • 制作一个用户图标
    • 分析
    • 技巧
  • 制作一个下雨天的面性图标
    • 确定大小层次结构
    • 复制一层
    • 绘制内部图标
      • 绘制一个多角星
      • 修改弯曲度
      • 用椭圆添加弯曲形成雨点
      • 修改颜色再打组
      • 放入外层容器中定义位置
      • 调整背景渐变色
      • 加一点小细节

前言

本身制作图标其实不难
难的是你要有新奇的想法

制作一个用户图标

UI设计系列——线性,面性图标制作day1-2_第1张图片

分析

首先我们看到头部和身体旁边的增加是圆形
UI设计系列——线性,面性图标制作day1-2_第2张图片
然后身体是个三角形
UI设计系列——线性,面性图标制作day1-2_第3张图片
而其他的地方则是线
UI设计系列——线性,面性图标制作day1-2_第4张图片

技巧

双击你要修改的原始图形
像笔一样的是用来直接绘制或钢笔工具
弯曲的那个线条工具是用来使得你选中的边任意弯曲的
UI设计系列——线性,面性图标制作day1-2_第5张图片

双击之后你可以给图像的边上增加结点
UI设计系列——线性,面性图标制作day1-2_第6张图片

然后选择任意结点进行删除来改变图形
UI设计系列——线性,面性图标制作day1-2_第7张图片
利用弯曲工具进行修改弯曲度,形成新的图形
UI设计系列——线性,面性图标制作day1-2_第8张图片

制作一个下雨天的面性图标

确定大小层次结构

UI设计系列——线性,面性图标制作day1-2_第9张图片

复制一层

UI设计系列——线性,面性图标制作day1-2_第10张图片

绘制内部图标

绘制一个多角星

UI设计系列——线性,面性图标制作day1-2_第11张图片

修改弯曲度

UI设计系列——线性,面性图标制作day1-2_第12张图片

UI设计系列——线性,面性图标制作day1-2_第13张图片

用椭圆添加弯曲形成雨点

UI设计系列——线性,面性图标制作day1-2_第14张图片

修改颜色再打组

UI设计系列——线性,面性图标制作day1-2_第15张图片

放入外层容器中定义位置

UI设计系列——线性,面性图标制作day1-2_第16张图片

调整背景渐变色

UI设计系列——线性,面性图标制作day1-2_第17张图片

加一点小细节

UI设计系列——线性,面性图标制作day1-2_第18张图片

你可能感兴趣的:(笔记,前端,UI,html,前端,UI设计)