09实验_界面设计.pdfVIP

《平面设计基础》实验指导 / 实验09：界面设计 《平面设计基础》实验指导 管理科学与工程学科 / 共 11 页,第 1 页 《平面设计基础》实验指导 / 实验09：界面设计 实验九 界面设计 一、实验目的 1、理解UI 设计的相关理论知识； 2 、掌握界面设计的原则； 3、掌握界面的布局方式。 二、实验学时 4 学时 三、实验类型 设计性 四、实验需求 1、硬件 多媒体计算机 2、软件 Windows 7 操作系统 Photoshop CS4 软件 3、网络 校园网支持 4、工具 无 五、实验理论与预备知识 1、UI 设计概念；； 2 、界面设计基本原则； 3、界面的布局方式。 六、实验任务 1、实验构思（实验前完成） 根据实验1 要求，依据界面设计的原则，用铅笔在草稿上划出实验内容1 的设计草图，以备实 验课制作使用。 根据实验2 要求，依据界面设计的原则，用铅笔在草稿上划出实验内容2 的设计草图，以备实 验课制作使用。 2 、根据实验内容1 的提供的班级登陆界面，进行界面设计 （按实验步骤制作）； 3、设计班级网站后台登陆页面。 管理科学与工程学科 / 共 11 页,第 2 页 《平面设计基础》实验指导 / 实验09：界面设计 七、实验内容与结果 1、演示：参考所提供的班级登陆界面设计，制作出班级网站后台登陆界面。 （1）设计要求 文件名称：班级后台登陆界面 文件大小：宽1280 像素×高1024 像素 分辨率： 72 像素 设计效果：时尚 现代 （2）实验素材 图9-1 （3）实验步骤： ①打开photoshop cs4,执行 【文件】 【新建】，打开【新建】对话框，新建一个1280 像素×1024 像素，分辨率为72 像素/英寸的RGB 图像，命名为“班级网站后台登陆界面”，如图 9-2 所示。 管理科学与工程学科 / 共 11 页,第 3 页 《平面设计基础》实验指导 / 实验09：界面设计 图9-2 ②打开素材1，使用 污点修复画笔工具，将素材中的文字去掉，如图9-3。 图9-3 ③裁减素材，并将其移动至画布中，如图9-4。 管理科学与工程学科 / 共 11 页,第 4 页 《平面设计基础》实验指导 / 实验09：界面设计 图9-4 ④ 选择椭圆选框工具 ，设置羽化值为6，画长椭圆，并填充颜色，调整不透明度，然 后再复制该图层，如图9-6。 图9-6 ⑤将上图中的椭圆移动至合适的位置，使登陆框具有立体效果，如图9-7 所示。 管理科学与工程学科 / 共 11 页,第 5 页 《平面设计基础》实验指导 / 实验09：界面设计 图9-7 ⑥点击【创建新组】 图标，将其命名为登陆口，选择文本工具 ，输入班级网站后台登陆 系统，设置其参数，如图9-8 所示。 管理科学与工程学科 / 共 11 页,第 6 页 《平面设计基础》实验指导 / 实验09：界面