《软件UI设计》实验指导书实验一上.docx

1、软件UI设计实验指导书实验一上实验一（上） UI设计基础-初识Photoshop CC1、实验目的（1）认识 Photoshop CC 2019的操作界面。（2）掌握 Photoshop CC 新建空白文档以及窗口的参数设置；（3）掌握 Photoshop CC 文档窗口的管理；（4）掌握 Photoshop CC 保存文档、关闭文档、打开文档的基本操作。2、实验原理（1）Photoshop CC的界面设置和首选项中的主要配置方法。（2）Photoshop CC的保存、关闭、打开文档操作。3、实验要求（1）新建一个宽度为1920，高度为1080像素，分辨率为72 像素/英寸的Photoshop

2、 CC的文档，命名为你的姓名。按照4.2配置Photoshop CC。（2）对该文档进行4.3、4.4、4.5的操作。4、实验内容及过程实验步骤：Photoshop CC 2019软件安装完成之后，先来认识一下Photoshop CC 2019的操作界面。4.1 认识PS界面1首先，点击Photoshop CC 2019图标打开软件：下面进入软件的启动界面：根据电脑配置，会有不同的等待时间。启动完成之后，就进入了软件的操作界面了。如下图：简单说明一下：上图中：区域简介红色区域软件的菜单栏。包括：文件，编辑，图像，图层，文字，选择，滤镜，视图，窗口，以及帮助菜单。黄色区域当前所选工具的一些属性。

3、比如，目前默认的是【选框工具】，所以，当前是选框工具的一些属性。如果工具发生变化，黄色区域里的属性也是会变化绿色区域软件的工具栏。包括了：移动工具，选框工具，等等，以及拾色器等等。蓝色区域常用的一些浮动窗口。这些窗口，在菜单里的【窗口】按钮中，可以做选择。可以关闭一些不用的窗口，也可以打开一些你喜欢的浮动窗口等。中间黑色区域用来编辑图像的。目前没有打开任何文件，所以没有图像编辑。4.2 PS首选项的配置每一款软件，都有它的一些设置，PS也是一样，可以根据个人的习惯做一些相应的设置。点击菜单栏的【编辑】按钮，找到最下边的【首选项】，点击【常规】。如图：也可以，按快捷键【CTRL+K】弹出首选项设

4、置的对话框，如图：包括：常规，界面，文件处理，性能，光标，透明度与色域，单位与标尺，参考线、网格和切片，增效工具，文字。4.2.1配置颜色然后看一下界面设置，以及性能设置。点击一下【界面】，在外观这里，可以选择喜欢的颜色方案。这里选择的深灰色，如图：其他的外观设置默认就可以了。4.2.2配置性能现在点击一下【性能】。在内存使用情况这里，我把“让 photoshop 使用”增加到了70%，默认的是60%，这个根据你的电脑配置设置就可以。滑动下面的滑块，就可以增加或者减少photoshop 使用的内存了。如图：历史记录与高速缓存，这里需要注意一下。如图：默认的历史记录状态是20，即在你使用PS作图

5、的时候，它只保留20条历史记录，这里建议调整到一个比较大的值，滑动滑块就可以调整。为什么要调到最大？因为当我们使用某些工具时，往往会使用很多次，20条记录往往不够。所以，最好调整到一个比较大的值。4.3 PS窗口设置4.3.1 关闭不需要的选项卡认识了PS操作界面之后，其实我们在以后的使用中，一些窗口是不经常用到的。根据个人经验，经常用到的窗口有：图层，通道，历史记录，路径以及动作。一些不用的窗口如何处理？PS可以根据需要来自己调整。关闭不常用的窗口，比如下方的窗口：那么我们就把它关闭掉。点击右上角的小三角：然后找到【关闭】，如图：点击一下关闭，“学习”面板就没有了，从而只剩下“库”和“调整”

6、色板了。如图：其实“库”和“调整”色板我们也不是经常用到，那么我们就把他们一起关闭。同样点击右上角的小三角，在上一步中，我们选择关闭选项卡组，就可以一起关闭整个选项卡组了。如图：4.3.2 移动选项卡的位置历史记录窗口是我们经常用到的。默认情况下，点击【颜色】窗口左侧的按钮，就会弹出历史记录的窗口了。如图：这样会有点麻烦，我们直接把历史记录窗口放在图层的面板组里是否可行？打开历史记录窗口之后，按住鼠标左键，拖动红色的的区域，拖动到图层面板组的绿色区域的时候，松开鼠标，这时候，历史记录窗口，就跟其他常用的窗口在一起了。4.3.3 恢复误删的选项卡有时候，操作失误，不小心把需要的窗口关闭了，如何处

7、理？如图，图层窗口不见了。这时候，我们找到菜单【窗口】找到图层选项，点击一下。如图：这时候，图层窗口就回来了。如图：或者直接把所有窗口恢复成初始状态，如图：其他的一些窗口也是一样的设置，你可以把你常用的窗口放在一个面板组里，不用的就关闭了。以后偶尔使用的话，可以从菜单的【窗口】按钮里面找到。4.4 PS文档的操作4.4.1 新建文档找到菜单【文件】-【新建】或者使用快捷键 ctrl+N。两种方法都可以，会弹出以下对话框，是新建文档的一些参数设置。如图：下面详细说明一下，这些参数的设置。文档大小下面的预设部分，是photoshop设定好的一些常用的文档大小。我们点击一下旁边的小三角，可以看到一些

8、预定的大小。如常见的A4，A3，如图：也可以设置成移动设备常用的大小，如图：如果不知道如何设置，也可以采用PS的默认文档大小，如图：也可以不采用预设的文档大小，自定义想要的文档大小，如下图：文档命名下面是文档的宽度，和高度。前面是数值，后面是单位。再向下看，就是分辨率，以及颜色模式了。默认的是像素/英寸。如果文档内容用来打印的话，分辨率一般都是300像素/英寸。如下图：分辨率就是屏幕图像的精密度，是指显示器所能显示的像素的多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多。分辨率的单位有：分辨率的单位简介像素/英寸指屏幕的每一

9、个英寸里，包含的像素多少像素/厘米指屏幕的每一个厘米里，包含的像素多少颜色模式这里，也有一些选择，不过常用的就是RGB颜色了，如果没有特殊需要，这个不用调整。如图：最下面是背景内容：一般的，我们默认白色就可以了。如图：下面的高级，默认就可以了，一般的不用改动。4.4.2 文档窗口排列新建文档之后，我们就可以看到，PS的操作界面里，多出了相应的文档选项卡，多建立几个文档之后，点击相应的选项卡，就可以切换到对应的文档中。如图：现在的文档窗口，是嵌入在PS的顶部的，也可以浮动。把鼠标放在选项卡上，按住左键，拖动鼠标即可浮动出来，如图：当我们把多个窗口，变成浮动窗口之后，觉得有些乱了，可以让这些窗口自

10、动排列，如图：同学们各种排列方式都可以试一下。4.4.3 保存文档建议在操作几分钟之后，就保存一次文档。为了防止软件出错，比如软件崩溃，突然停电，等等。如果没有保存，工作就白做了。保存文件，可以使用菜单【文件】-【存储】，如图：或者使用快捷键CTRL+S 来保存文件。点击存储之后，会弹出保存对话框，如下图：点击一下，可以看到很多photoshop可以保存的格式。建议先把文件保存为PSD格式，也就是photoshop的源文件格式。PSD格式可以保留文件中的图层，以及各种效果。方便以后修改。保存源文件之后，再根据需要，保存所需要的格式，比如保存为JPG，GIF，PNG的图片格式。如图：4.4.4

11、关闭文档文档编辑好了之后，可以对文档进行关闭操作。点击选项卡上的X号就可以关闭了。如图：如果对文档进行了编辑操作，但是没有保存，这时候点击关闭的话，会弹出以下对话框：是：就是对文档保存了之后，再关闭。否：就是不对文档进行保存，直接关闭。取消：就是取消关闭的操作。如果涉及到多个文档，可以一起关闭多个文档，如图：也可以用快捷键：关闭当前文档：ctrl+W关闭所有文档：alt+ctrl+W4.4.5 打开文档打开文档的方式，可以使用菜单：【文件】-【打开】，如图：或者使用快捷键，ctrl+O，或者在编辑区域，双击鼠标，都可以弹出打开文件的对话框，如图：PS的源文件格式。还可以打开各种图像文件，比如B

12、PM，GIF，JPG等等，总之，PS几乎可以打开所有类型的图片文件。还可以使用【文件】-【最近打开文件】，如图：4.5 PS画布的操作4.5.1 屏幕模式的切换默认的情况下，软件是【标准屏幕模式】，也就是打开软件的初始模式状态。也可以进行改变，找到菜单的【视图】-【屏幕模式】，如图：在屏幕模式，这里，有三种模式选择。1，标准屏幕模式，默认的模式。2，带有菜单栏的全屏模式，是软件界面为全屏，但是，菜单栏以及各个窗口，以及工具栏等等都还在。3，全屏模式，没有了菜单，也没有工具栏，以及浮动窗口。使用这个模式的前提是已经掌握了常用工具的快捷键。除了使用菜单选择，我们还可以使用快捷键【F】。按键盘的F键

13、，就可以在三种模式下任意切换了。另外，键盘的 tab键，也有类似的功能。4.5.2 画布的放大与缩小首先，找到【视图】，在视图菜单里，有放大，和缩小的功能。如图：放大快捷键： CTRL+加号缩小快捷键： CTRL+减号或者：按住键盘的alt键，向前滚动滑轮可以把画布放大，向后滚动滑轮，可以使画布缩小。可以利用这个功能，来对画布进行放大和缩小的操作。点击【按屏幕大小缩放】，画布的大小就会根据PS软件窗口的大小，自行调整。看下软件的左下角的位置。如图：红框里的数值，即为画布显示的百分比。也可以调整这里的百分比，来调整画布的大小。百分比越大，画布就越大，百分比越小，画布就越小。4.5.3 画布的平移操作画布放大超出PS的窗口的时候，在窗口的右侧，还有窗口下方，就会出现滚动条。如图：可以用鼠标拖动滚动条，来达到平移画布的操作。左右滚动画布快捷键：按住键盘的ctrl 键，在滚动滑轮。或者点击【抓手工具】，就可以任意的上下左右移动画布了。如图：