UI自学入门笔记1-软件设计基础-图形图像基础

自学麦子学院UI设计课程,第一阶段:软件设计基础-图形图像基础

有一些我认为重要的理论作如下笔记,希望能共享和复习的作用。

 

图片

设计配色

主流:

  1. 色相
  2. 色调
  3. 明度
  4. 纯度
  5. 其他

UI自学入门笔记1-软件设计基础-图形图像基础

 

其他配色方式

  • 渐变
  • 强调
  • 分离反复
  • 自然
  • 人工

UI自学入门笔记1-软件设计基础-图形图像基础UI自学入门笔记1-软件设计基础-图形图像基础

 

图片参数设置

PS保存时的图片参数设置,

开始学习可以设置成默认,后期有需要可以尝试改变寻找区别。

UI自学入门笔记1-软件设计基础-图形图像基础

 

常见图片格式

位图

  1. JPG  有损压缩
  2. PNG 无损压缩
  3. TIF
  4. GIF
  5. BMP

矢量图

AI

CDR

UI自学入门笔记1-软件设计基础-图形图像基础

PNG8和PNG24

颜色的丰富度

UI自学入门笔记1-软件设计基础-图形图像基础

 

总结

  • 照片和图片一般是位图,由像素组成;矢量图一般由点线组成。
  • 有损压缩图片会越来越不清晰,无损压缩图片清晰度不变:jpg有损,png无损;PNG24比PNG8色彩丰富。
  • 常见图片格式:jpg、png、AI、gif... TIF\BMP\CDR

UI自学入门笔记1-软件设计基础-图形图像基础

 

尺寸

Web常用尺寸

UI自学入门笔记1-软件设计基础-图形图像基础

 

APP常用尺寸

UI自学入门笔记1-软件设计基础-图形图像基础

 

纸媒常用尺寸

UI自学入门笔记1-软件设计基础-图形图像基础

 

总结

UI自学入门笔记1-软件设计基础-图形图像基础

 

色彩

色彩的三个属性

色相:色彩的相貌

明度:色彩的明暗度

纯度/饱和度:色彩的鲜亮度

 

UI自学入门笔记1-软件设计基础-图形图像基础

 

色彩模式

显示屏主要使用RGB,印刷品适应CMYK。

UI自学入门笔记1-软件设计基础-图形图像基础

 

 

色彩的心里效果

  • 暖色让人感觉很近,冷色距离感远。
  • 膨胀色与收缩色:明亮显得更大,灰暗显得更小
  • 色相影响冷暖;明度影响轻重;纯度(饱和度)影响华美与质朴。
  • 色彩的诱目性:红黄橙的诱目性高。

UI自学入门笔记1-软件设计基础-图形图像基础UI自学入门笔记1-软件设计基础-图形图像基础

 

UI自学入门笔记1-软件设计基础-图形图像基础UI自学入门笔记1-软件设计基础-图形图像基础

 

UI配色原则

最多四种颜色:主色,辅色,底色和强调色。

UI自学入门笔记1-软件设计基础-图形图像基础

 

色相配色

  1. 同一色
  2. 邻近色
  3. 类似色 -- 色相差为2         -- 既有共性又有变化
  4. 中差色 -- 色相差为3~5     -- 既明快又不冲突 
  5. 对比色 -- 色相差为6~7     -- 大气
  6. 补色    -- 色相差为8         -- 醒目

UI自学入门笔记1-软件设计基础-图形图像基础

UI自学入门笔记1-软件设计基础-图形图像基础UI自学入门笔记1-软件设计基础-图形图像基础UI自学入门笔记1-软件设计基础-图形图像基础UI自学入门笔记1-软件设计基础-图形图像基础UI自学入门笔记1-软件设计基础-图形图像基础