《项目一 PhototShop CC的基础知识电子课件 网页图片与移动界面（WebApp)的UI设计.ppt》由会员分享，可在线阅读，更多相关《项目一 PhototShop CC的基础知识电子课件 网页图片与移动界面（WebApp)的UI设计.ppt（22页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目一 PhototShop CC的基础知识电子课件 网页图片与移动界面（WebApp)的UI设计网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计项目一目一PhototShop CC的基的基础知知识演讲人：XXX时间：2020.X网页图片与移动界面(Web/App)的UI设计网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计u理解平面设计的基本知识，了解数字图像处理的基本知识；u能够熟练完成软件的安装与启动，以及熟练认识Photoshop CS的界面组成及基本操作；u掌握选择工具，形状工具，颜色选取对象等的使
2、用。教学目标 网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1.1 Photoshop的发展Adobe Photoshop，简称“PS”，由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。2013年7月，Adobe公司推出Photoshop CC版本，自此Photoshop CS6作为Adobe CS系列的最后一个版本被新的CC系列取代，特有功能能：相机防抖动功能、Came
3、ra RAW改进、图像提升采样、属性面板改进、Behance集成一集同步设置等。1.1 Photoshop CC的基本知识网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识1.1.2平面设计1平面设计的概念2平面设计的基本原则思想性与单一性 艺术性与表现性 趣味性与独创性 对比与调和 对称与均衡变化与统一3平面设计的构成要素1.1 Photoshop CC的基本知识网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知
4、识1.2.1 位图与矢量图1.位图位图由点阵像素组成；照片的连续色彩是由许多色彩相近的小方点所组成，当许多不同颜色的点组合在一起后，便构成了一幅完整的图像。像素是组成图像的最小单位，而图像又是由以行和列的方式排列的像素组合而成的，像素越高，文件越大，图像的品质越好。2矢量图矢量图是计算机图像，不是由像素点阵构成，而是由点、直线、多边形等基于数学方法的图形构成。矢量图的清晰度与分辨率的大小无关。1.2 图像处理基础知识网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识1.2.2 像素与分辨率1像素像素是用
5、来计算数码影像的单位，图像无限放大后，会发现图像是由许多小方格组成的，这些小方块就是像素。2图像分辨率指屏幕图像的精密度，指显示器所显示的像素数量；图像分辨率就是位图图像每英寸（或厘米）所包含的像素的数量，其单位为dpi。3显示分辨率显示器上单位长度所显示的像素或点的数目，通常用每英寸的点数来衡量4打印分辨率指由绘图仪或激光打印机产生的每英寸的墨点数。1.2 图像处理基础知识网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识1.2.3 图像的色彩模式1RGB模式RGB颜色被称为真彩色，是Photosho
6、p中默认使用的颜色2CMYK模式CMYK模式是一种印刷模式，由分色印刷的4种颜色组成。CMYK的4个字母分别代表青色（Cyan）、洋红色（Magenta）、黄色（Yellow）和黑色（Black）。3位图模式位图模式的图像又称黑白图像，它用黑、白两种颜色值来表示图像中的像素。1.2 图像处理基础知识网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识1.2.4 常用的图像格式 1PSD2BMP3GIF4JPEG5PNG1.2 图像处理基础知识网页图片与移动界面网页图片与移动界面(Web/App)(Web/
7、App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识1.3.1 任务引入通过Photoshop CC实现对图像的处理，则必须先认识Photoshop CC的界面，然后再通过一定的基本操作以及结合常用工具的使用才能完成图像的有效处理，达到所需要的图像效果。本任务主要利用颜色工具、选择工具及其选项栏的选项设置，实现三个不同形状的图像的制作，如图所示，达到文件的新建、保存，以及常用工具按钮的熟练使用。1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基
8、本知识1.3.2 知识引入1.Photoshop菜单栏与工具箱(1)Photoshop菜单栏菜单栏作为一款操作软件必不可少的组成部分，主要用于为大多数命令提供功能入口。菜单栏包含执行任务的菜单，这些菜单是按主题进行组织的。1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计(2)工具箱工具箱是Photoshop工作界面的重要组成部分。执行“窗口”“工具”可控制工具的显示与隐藏工具箱中存放着用于创建和编辑图像的工具。Photoshop CC的工具箱主要包括选框工具、绘图工具、填充工具、编辑工具、修复工具、快速蒙版工具
9、等，如图1-5所示1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识2控制面板3图像画板编辑区1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识4Photoshop的文件基本操作(1)文件的新建执行“文件”“新建”，在对话框中选择对应的选项卡，实现不同大小编辑区的文件，输入相应的名称、宽高、分辩率、模式等参数完成新建文件的创建。(2)
10、文件的打开与保存执行“文件”“打开”，找到所需要文件的目录和路径。执行“文件”“存储为”，找到所需要保存文件的目录，并输入文件名。1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识(3)图像的基本设置 重置图像尺寸和分辨率执行“图像”“图像大小”，在对话框中设置大小；改变图像画布尺寸执行“图像”“画布大小”，在对话框中设置大小；(4)基本编辑操作 剪切Ctrl+X 拷贝Ctrl+C 粘贴与贴入Ctrl+V 映射Ctrl+Alt+T 复制对称的物体，如对称物品、水中
11、倒影等 取消选择 ctrl+D1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识(5)图像变换操作 旋转整幅画布执行“图像”“图像旋转”，子菜单中的角度；变换选区内的图像选择“编辑”“变换”，在子菜单选择相应的选项；(6)撤消操作“历史记录”面板：“窗口”“历史记录”撤消命令：Ctrl+Z 或者 Ctrl+Alt+Z 恢复单命令：Ctrl+Shift+Z1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)
12、的的UIUI设计设计5常用工具操作(1)颜色设置工具(2)选框工具(3)形状工具1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识(4)按颜色选取对象 魔棒工具 魔棒工具能够依据图像的颜色进行选择。使用魔棒工具单击图像中的某一种颜色，即可将这种与这种颜色邻近或不相邻且在容差范围内地颜色都选中 快速选择工具 该工具是智能的，比魔棒工具的操作更加直观和准确。使用时不需要在选取的整个区域中涂画，快速选择工具会自动调整所涂画区域的大小，并寻找到边缘使其与选区分离。该工具是
13、基于画笔模式的，即可以画出所需要的区域。1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识1.3.3 任务实现-图像的绘制1.任务分析首先在新建的文件中，形成图像编辑区，再利用颜色工具、选择工具及其选项栏的选项设置绘制多个大小不同的圆形选区、不规则的选区，并结合其他选取工具进行修善选区的区域，并创建精确选区，并通过快捷组合键Alt+Delete快速填充不同颜色，形成不规则的图案，最终形成完整简洁三个不同形状的图像，如图所示。1.3 Photoshop界面及基本操作
14、网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计1.1 1.1 Photoshop CC的基本知识2.任务操作(1)文档创建(2)圆形的绘制(3)月亮的绘制(4)五边形/五角星的制作1.3 Photoshop界面及基本操作网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计再利用颜色工具、选择工具及其选项栏的选项设置绘制多个大小不同的圆形选区、不规则的选区，形成图像编辑区，填充不同颜色，实现小花的绘制，如图所示。课后后练习给花的绘制网页图片与移动界面网页图片与移动界面(Web/App)(Web/App)的的UIUI设计设计感谢各位演讲人：XXX