文档介绍：青岛大学
本科课程设计
题 目: UI设计
学 院: 电子信息学院
专 业: 电子信息工程
2017年 9月 15日
设计任务
UI设计:
１．设计软件学****
２．图标和ｌｏgo设计
3．web页面设计
课程知识点详解
1．PS基本概念和操作:
(1)平面设计
平面设计/视觉传达：以视觉为导向,通过图像来传递信息的一门艺术。
原则:信息传达清晰准确;画面效果美观。
包含:海报招贴、书籍画册排版、VI(Viｓｕaｌ Iｄenｔiｔy）设计／企业形象设计 等等。
软件：Pｈoｔｏsｈop(ＰS) illuｓtｒａtor(Ａｉ） coｒｅlDRAＷ（cdr) inｄesign(IＤ)
（2）Phoｔoshｏp
Ａdoｂe Photoｓhｏp，简称“PS”,是由Aｄoｂe公司开发和发行的图像处理软件。
Phｏtoｓhoｐ主要处理以像素所构成的数字图像。
版本:
1990——200３ Phｏtosｈｏp1．0——（CS）
早期的Pｈoｔｏｓhop 版本。
2003——２０13 Photosｈop ＣＳ——Ｐhotoshｏｐ CＳ6
成熟期的Phｏtoshｏp版本，确立了在位图处理领域的核心地位。
2０1４——20１7 Phoｔosｈop CＣ2014——Ｐhotosｈoｐ CＣ2017
Phoｔoｓｈop标准版，着重加强了UＩ开发功能。
位图和矢量图
位图:
亦称为点阵图像或绘制图像,是由称作像素(图片元素）的单个点组成的。如：建筑立面马赛克拼图。常见文件格式:jｐｇ/jｐeg ｐng gｉf tiff Jpg图俗称“勾图”。互联网上我们看到的图片全是位图。
矢量图:
矢量图也称之为为向量图,是图形学中基于数学方程的几何图形，由边线和填色组成。如：圆的数学公式:(ｘ-ａ）²+(ｙ-b)²=r²。常见文件格式:ai eps cｄｒ 。矢量图一般作为图片的制作源文件或者印刷喷绘的源文件。
图1-1
包括菜单栏、工具栏、属性栏、浮动面板、工作区。可以选择更改屏幕模式:使用tａb键或f键。还包括两种模式：标准模式或全屏模式(大师模式)。
(１)打开图片的方式
文件（菜单)——> 打开（ctrl + Ｏ)
拖拽
右击——＞ 打开方式
修改图片的默认打开方式 右击——> 属性
新建文件/画布 (ｃtｒl＋ N)
像 素:是构成数码影像的基本单元点
图片尺寸:是指图像的长和宽,单位是ｍm、cｍ、英寸······等长度单位
分 辨 率:是指单位长度内包含的像素点的数量,它的单位通常为像素/英寸(pｐｉ或dｐi,区别于平时所说的手机屏幕分辨率)
右击图片——> 属性——> 详细信息
图片总像素=(长＊分辨率)*(宽*分辨率)
图片总像素= 横向像素数 * 纵向像素数
尺寸一定的情况下,分辨率越大总像素数越多。
颜色模式:RGB CMYＫ
位 深 度:８位 2的８次方 例:从纯黑到纯白有２56（2的８次方）个色阶
保存和另存为:
ＰSD jpg/jpeg pｎg（可以保存透明底图片) giｆ（可保存动态图片)
图层介绍
移动工具： Ｖ
图层面板:Ｆ７
新建图层:ｃtｒl + shift + Ｎ
点击图层面板新建按钮
复制图层ﻩctrl + J
拖拽目标图层至新建图层按钮
按住ａlｔ 用移动工具拖动图层
删除图层:deｌete或者ｂackｓpaｃｅ 右击——＞ 删除图层 ﻩ
点击或者拖拽目标图层至删除按钮
显示/隐藏图层:
锁定
编组ﻩ ﻩ
链接 ﻩﻩ
合并图层 cｔrl + E
盖印图层 ctｒｌ ＋ sｈif ＋ alt + Ｅ
图层顺序: 向上/下移动1层 ctｒl + 【/】
直接移动到顶/底 ｃｔrl + ｓhift +【/】
用鼠标拖动图层到合适的位置
(４）历史记录
历史记录面板 窗口（菜单)——> 历史记录
后退 ctrl + Z
连续后退 ｃｔrl ＋ aｌｔ + Ｚ (注:与qq热键冲突)
修改默认历史记录步数
编辑(菜单)——＞ 首选项——＞ 性能——> 历史记录状态
(５）自定义暂存盘
图1－２