VI设计报告_vi设计报告

VI设计报告由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“vi设计报告”。

青岛大学

本科课程设计

题

目：UI设计 学

院：电子信息学院 专

业：电子信息工程

2017年

9月

15日

青岛大学

电信互认课程设计

一、设计任务

UI设计：

1.设计软件学习 2.图标和logo设计 3.web页面设计

二、课程知识点详解 1.PS基本概念和操作：

（1）平面设计

平面设计/视觉传达：以视觉为导向，通过图像来传递信息的一门艺术。原则：信息传达清晰准确；画面效果美观。

包含：海报招贴、书籍画册排版、VI（Visual Identity）设计/企业形象设计 等等。

软件：Photoshop（PS）illustrator（Ai）corelDRAW（cdr）indesign（ID）（2）Photoshop Adobe Photoshop，简称“PS”，是由Adobe公司开发和发行的图像处理软件。

Photoshop主要处理以像素所构成的数字图像。版本：

1990——2003 Photoshop1.0——Photoshop8.0(CS)早期的Photoshop 版本。

2003——2013 Photoshop CS——Photoshop CS6 成熟期的Photoshop版本，确立了在位图处理领域的核心地位。2014——2017 Photoshop CC2014——Photoshop CC2017 Photoshop标准版，着重加强了UI开发功能。

青岛大学

电信互认课程设计

（3）位图和矢量图 位图: 亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。如：建筑立面马赛克拼图。常见文件格式：jpg/jpeg png gif tiff Jpg图俗称“勾图”。互联网上我们看到的图片全是位图。矢量图: 矢量图也称之为为向量图，是图形学中基于数学方程的几何图形，由边线和填色组成。如：圆的数学公式：(x-a)²+(y-b)²=r²。常见文件格式：ai eps cdr。矢量图一般作为图片的制作源文件或者印刷喷绘的源文件。

2.PS界面介绍

图1-1 包括菜单栏、工具栏、属性栏、浮动面板、工作区。可以选择更改屏幕模式：使用tab键或f键。还包括两种模式：标准模式或全屏模式（大师模式）。（1）打开图片的方式

文件（菜单）——> 打开（ctrl + O）拖拽

右击——> 打开方式

青岛大学

电信互认课程设计

修改图片的默认打开方式 右击——> 属性

（2）新建文件/画布（ctrl+ N）像素：是构成数码影像的基本单元点

图片尺寸：是指图像的长和宽，单位是mm、cm、英寸······等长度单位

分辨率：是指单位长度内包含的像素点的数量，它的单位通常为像素/英寸（ppi或dpi，区别于平时所说的手机屏幕分辨率）

右击图片——> 属性——> 详细信息

图片总像素=（长*分辨率）*（宽*分辨率）图片总像素= 横向像素数 * 纵向像素数

尺寸一定的情况下，分辨率越大总像素数越多。颜色模式：RGB CMYK 位深度：8位 2的8次方 例：从纯黑到纯白有256（2的8次方）个色阶 保存和另存为：

PSDjpg/jpeg png(可以保存透明底图片)gif（可保存动态图片）（3）图层介绍

移动工具：图层面板：F7 V 新建图层：ctrl + shift + N 点击图层面板新建按钮 复制图层

ctrl + J

拖拽目标图层至新建图层按钮 按住alt 用移动工具拖动图层

删除图层：delete或者backspace 右击——> 删除图层

点击或者拖拽目标图层至删除按钮显示/隐藏图层：

青岛大学

电信互认课程设计

锁定

编组

链接

合并图层 ctrl + E 盖印图层 ctrl + shif + alt + E 图层顺序：向上/下移动1层 ctrl + 【/】

直接移动到顶/底 ctrl + shift +【/】 用鼠标拖动图层到合适的位置

（4）历史记录

历史记录面板 窗口（菜单）——> 历史记录 后退 ctrl + Z 连续后退 ctrl + alt + Z（注：与qq热键冲突）修改默认历史记录步数

编辑（菜单）——> 首选项——> 性能——> 历史记录状态

（5）自定义暂存盘

图1-2

青岛大学

电信互认课程设计

在运行PhotoShop的时候，会产生一个photoshop临时文件，会占用大量的内存空间，如果内存满了临时文件会暂时存放在暂存盘。更改暂存盘的位置（默认是C盘），方法如下：

编辑---》首选项---》性能——》暂存盘（选一个相对较大的盘符）。（6）自定义快捷键（建议使用默认快捷键）

编辑——》键盘快捷键（7）基本选取工具介绍

工具箱：窗口（菜单栏）—> 工具

选区概念： 蚂蚁线 选区隐藏（ctrl + H）

选区布尔运算：加选shit，减选ctrl，交叉选ctrl+alt 取消选择： ctrl + D 选择（菜单）——> 取消选择 全选： ctrl + A 选择（菜单）——> 全部选择 反选： ctrl + shit + I 选择（菜单）——> 反选

自由变换： ctrl + T 编辑（菜单）——>自由变换

填充颜色：填充背景色 ctrl + delete；填充前景色 alt + delete；编辑——>填充 shif+f5(前景色/背景色/内容识别)内容识别：PS会根据填充区域周围的环境计算填充的内容（常用于修图）裁切工具：（可以修改画布大小）

图像大小ctrl+alt+i画布大小 ctrl+alt+c 吸管工具： 吸取颜色，吸取额颜色会显示为前景色 简单抠图：选框 套索 魔棒

载入选区 ctrl + 点击图层缩略图 原位复制 ctrl+J（8）简单修图：修补工具组和图章工具组

仿制图章工具和修复画笔工具要按住alt定义取样点

青岛大学

电信互认课程设计

3.iOS图标设计规范

（1）图标设计：本质上是对现实事物的抽象和概括，以图形语言表达出来，让信息的传递更加简洁优美。

（2）图标设计的原则：可识别性/共性、美观性、差异性/原创性

技术点：概括总结能力、造型能力、色彩搭配能

图标类别：拟物化图标 扁平化图标 剪影图标 线性图标（3）扁平化设计：

扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果（投影、渐变、纹理、立体等）。让“信息”本身重新作为核心被凸显出来。强调了抽象、极简和符号化特征。1.图标设计流程

第一步：寻找隐喻（一类事物的共性或者特点）

图2-1 第二步：抽象概括图像

青岛大学

电信互认课程设计

图2-2 第三步：确定风格

图2-3 第四步：调整细节 第五步：场景测试 由于屏幕分辨率和使用场景和背景的不同，我们需要让设计好的图标再各个环境中做到最好的兼容性。

三、学习效果展示

1、图标和logo设计效果：

青岛大学

电信互认课程设计

图3-1

图3-2

图3-32、web页面设计效果:

青岛大学

电信互认课程设计

图3-4

图3-5

四、设计课程体悟

通过本次课程，我了解了UI设计的基本内容，熟悉了UI设计师的基本职能分类，主要分为图形设计、交互设计、用户测试/研究等方面，具体掌握了图标和logo 的设计、web页面设计的基本流程，强化了对课程的认识。