VI设计报告.docx
- 文档编号:4722323
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:9
- 大小:1.52MB
VI设计报告.docx
《VI设计报告.docx》由会员分享,可在线阅读,更多相关《VI设计报告.docx(9页珍藏版)》请在冰豆网上搜索。
VI设计报告
青岛大学
本科课程设计
题目:
UI设计
学院:
电子信息学院
专业:
电子信息工程
2017年9月15日
一、设计任务
UI设计:
1.设计软件学习
2.图标和logo设计
3.web页面设计
二、课程知识点详解
1.PS基本概念和操作:
(1)平面设计
平面设计/视觉传达:
以视觉为导向,通过图像来传递信息的一门艺术。
原则:
信息传达清晰准确;画面效果美观。
包含:
海报招贴、书籍画册排版、VI(VisualIdentity)设计/企业形象设计等等。
软件:
Photoshop(PS)illustrator(Ai)corelDRAW(cdr)indesign(ID)
(2)Photoshop
AdobePhotoshop,简称“PS”,是由Adobe公司开发和发行的图像处理软件。
Photoshop主要处理以像素所构成的数字图像。
版本:
1990——2003Photoshop1.0——Photoshop8.0(CS)
早期的Photoshop版本。
2003——2013PhotoshopCS——PhotoshopCS6
成熟期的Photoshop版本,确立了在位图处理领域的核心地位。
2014——2017PhotoshopCC2014——PhotoshopCC2017
Photoshop标准版,着重加强了UI开发功能。
(3)位图和矢量图
位图:
亦称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。
如:
建筑立面马赛克拼图。
常见文件格式:
jpg/jpegpnggiftiffJpg图俗称“勾图”。
互联网上我们看到的图片全是位图。
矢量图:
矢量图也称之为为向量图,是图形学中基于数学方程的几何图形,由边线和填色组成。
如:
圆的数学公式:
(x-a)²+(y-b)²=r²。
常见文件格式:
aiepscdr。
矢量图一般作为图片的制作源文件或者印刷喷绘的源文件。
2.PS界面介绍
图1-1
包括菜单栏、工具栏、属性栏、浮动面板、工作区。
可以选择更改屏幕模式:
使用tab键或f键。
还包括两种模式:
标准模式或全屏模式(大师模式)。
(1)打开图片的方式
文件(菜单)——>打开(ctrl+O)
拖拽
右击——>打开方式
修改图片的默认打开方式右击——>属性
(2)新建文件/画布(ctrl+N)
像素:
是构成数码影像的基本单元点
图片尺寸:
是指图像的长和宽,单位是mm、cm、英寸······等长度单位
分辨率:
是指单位长度内包含的像素点的数量,它的单位通常为像素/英寸(ppi或dpi,区别于平时所说的手机屏幕分辨率)
右击图片——>属性——>详细信息
图片总像素=(长*分辨率)*(宽*分辨率)
图片总像素=横向像素数*纵向像素数
尺寸一定的情况下,分辨率越大总像素数越多。
颜色模式:
RGBCMYK
位深度:
8位2的8次方例:
从纯黑到纯白有256(2的8次方)个色阶
保存和另存为:
PSDjpg/jpegpng(可以保存透明底图片)gif(可保存动态图片)
(3)图层介绍
移动工具:
V
图层面板:
F7
新建图层:
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-3
2、web页面设计效果:
图3-4
图3-5
4、设计课程体悟
通过本次课程,我了解了UI设计的基本内容,熟悉了UI设计师的基本职能分类,主要分为图形设计、交互设计、用户测试/研究等方面,具体掌握了图标和logo的设计、web页面设计的基本流程,强化了对课程的认识。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- VI 设计 报告
![提示](https://static.bdocx.com/images/bang_tan.gif)