CG课程设计报告

《CG课程设计报告》由会员分享，可在线阅读，更多相关《CG课程设计报告（37页珍藏版）》请在金锄头文库上搜索。

1、.CG技术课程设计报告书题目： 手机UI设计 插画设计 系 别计算机科学与工程系专 业数字媒体技术学号0824101姓名指导老师河南城建学院2012年 6月20日目录课程设计的目的1课程设计题目1课程设计要求1操作平台2课程设计时间安排2一、手机UI设计项目策划：2二、手机 U I设计过程：3（1）、制作手机待机界面：3（2）、制作手机菜单界面：6（3）、制作手机音乐界面：9（4）、制作手机通话中界面：11（5）、制作手机充电中界面：15（6）、制作音乐播放界面：18三、插画设计项目策划：25四、插画设计过程：26五、总结31六、主要参考书及手册31-.课程设计的目的课程设计为学生提供了一个既

2、动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的设计制作能力。提高学生运用所学知识解决实际问题的能力。通过课程设计，学生在下述各方面的能力应该得到锻炼：(1)进一步巩固、加深学生所学专业课程CG技术的基本理论知识，理论联系实际，进一步培养学生设计创作和软件操作能力。(2)全面考核学生所掌握的基本理论知识及其实际业务能力，从而达到提高学生素质的最终目的。根据企业、商品及广告委托人的要求，撰写设计方案，按委托者的要求，利用合适图文素材设计制作符合要求的平面设计作品，会熟练掌握illustrator和数码绘图软件的操作和应用。课程设计题目1、 UI设计2、 插画设计课程

3、设计要求 （1）课程设计单人完成，每人之间不得有雷同现象。 （2）课程设计过程中，首先要进行项目调研分析、技术设计分析及创意图与色彩设计。 （3）设计结束时，每人根据项目分析设计的要求，上交所有的ai、jpg文件，文件名按“学号姓名-项目名称”来命名。 （4）作品内容必须要和课程设计报告中的项目内容要一致，设计报告要求在5000字左右，报告内容应有课程设计题目、需求分析、设计制作方案及关键制作技术等内容，必要处需要将图层结构和效果图抓屏后进行插图。课程设计报告要求用A4纸打印后与作品一同上交，无设计报告者不予评定成绩。操作平台1.硬件平台 硬件平台是平面广告设计与制作所需要的硬件环境，主要包括

4、计算机机型及硬件配置。由于此次课程设计是用AI软件设计平面作品，因此对计算机硬件的要求较高，需要配备1G内存（或以上）、512独立显卡（或更高）、硬盘500G的笔记本或台式机。2. 软件平台软件平台是程序设计与运行的软件环境。此次设计利用的是：（1)Adobe Illustrator CS5软件。llustrator是adobe的一款专业的出版、多媒体和在线图像的工业标准矢量图形设计制做软件。一般主要用于网页，标志，手绘和插画等绘制。软件通过精良的绘图工具、具有表现力的自然画笔、各种省时功能以及与 Adobe CS Live 在线服务的集成提供精准度和强大功能，为全球设计专业人士青睐。作为全球

5、著名的图形软件 Adobe Illustrator，以其强大的功能和体贴的用户界面已经占据了全球矢量编辑软件中的大部分份额。(2)ACDSee软件。ACDSee 是一个老牌的图像文件浏览的软件，它支持 TIFF、JPEG、BMP、GIF、PCX、TGA 等四十种以上的常见图像和多媒体文件格式。ACDSee 打开图片的速度非常快，它提供有缩略图观看方式，并能够为每个目录建立一个索引，此外，ACDSee 还内带有图像处理工具，支持图像格式转换、图像增强和编辑以及修改文件时间戳等功能。课程设计时间安排（1）设计时间 2012年6月11日2012年6月21日（2）设计地点 系实验中心10#教学楼202

6、机房（3）工作计划 6月11日 学习任务书、选题调研 6月11日 技术分析及创意图文设计 6月12日 素材收集及设计 6月13日6月18日 编辑制作 6月19日 测试修改 6月20日6月21日 撰写设计报告一、手机UI设计项目策划： 手机ui设计是手机软件的人机交互、操作逻辑、界面美观的整体设计。置身于手机操作系统中人机交互的窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能有所了解。手机UI设计一直被业界称为产品的“脸面”，好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。 软件设计可分

7、为两个部分：编码设计与UI设计 。编码设计大家都很熟悉，但是UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和 Interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。 在飞速发展的电子产品中，界面设计工作一点点的被重视起来。做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他

8、需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程 我的设计创意初衷是能找到一款界面更炫丽，更时尚，操作时很舒服的手机交互界面，并且这种界面增添了一些新的功能，使人们的生活更方便，更快捷，让人们真正享受到科技给人们带来的益处。 文献检索大部分是来自于百度中的手机UI设计百度百科，另外参考了一些比较优秀的手机UI设计作品。 作品创新方面，我感觉是交互界面有个性，菜单是旋转出现的，还有就是通话时

9、的界面功能增多，运用世界当今最前沿的视频通话技术，让人们通话时更有面对面的感觉。主要使用的技术：渐变，滤镜效果，剪切蒙版等，二、手机 U I设计过程：（1）、制作手机待机界面：1、 构思设计界面，现在网上找一些优秀的例子，再经过自己的创新，最终确定做什么。2、 开始制作，打开IllustratorCS5，新建文件，创建一个矩形，填上径向渐变色，在建一个矩形，填上线性渐变色，在此矩形上画出两个信号标志，再画一个电池标志，标志如下图：3、 在手机屏幕上写上时间日期和中国移动字样，修改字的颜色和大小，将字移动到合适的位置。如图：4、 置入参考素材，参照参考素材，制作出一些小图标，分别是通话、电话薄、

10、短信、菜单，图标如下图：5、 修改图标细节，调整布局，给背景加上图片。最终效果如下图：图层面板如下图：（2）、制作手机菜单界面：1、在待机界面的基础上，首先去掉文字，然后制作菜单2、先画一个圆环，填上径向渐变色，中间画一个圆角矩形，如图：3、置入参考图片，参考素材画出一些小标志，分别是：音乐、设置、文件管理、图片。标志如下图：3、 画出一个圆，天上渐变色，将画好的小图标放上面，写上汉字，调整他们的位置。4、给手机加上一个背景，最终界面如下图：图层面板如下图：（3）、制作手机音乐界面： 1、在待机界面上加上音乐，画一个矩形，填充上渐变色，建一个列表，写上音乐列表。 2、调整布局，编组列表，最终效

11、果如下图：图层面板如下图：（4）、制作手机通话中界面： 1、新建文件，复制待机界面进来，去掉小图标，如图： 2、找一张素材图片，在Photoshop中去掉背景，保存为psd格式图片以备用，如图：4、 在AI中打开处理后的素材，利用剪切蒙版裁剪成合适大小的图片，调整大小，如图：5、 给人加上渐变色背景，如图：6、 制作透明按键，创建一个圆角矩形，调整期透明度，在创建一个矩形， 利用对象下的菜单，路径分割为网格命令，将其分割为两排三列个矩形，调整 其间距，修改期透明度，调整位置。如图：7、 绘制一些小图标，如下图：6、 创建圆角矩形，填充为线性渐变色，打上结束通话四个字，如下图：7、 在屏幕上方打

12、上人名以及通话时间，调整位置，最终界面如下图：图层面板如下图：（5）、制作手机充电中界面： 1、在AI中新建文件，复制待机界面进来，去掉中国移动。 2、创建一个正圆，填充上径向渐变色，调整透明度。 3、在创建一个正圆，给其填充上径向渐变色，在创建一个椭圆，同样填充径向渐变色，调整其大小，放在合适的位置。 4、创建发光的圆环，先创建两个圆，利用路径查找器，制成圆环，将圆环填充上径向渐变色，然后给圆环加上外发光的效果。最终界面如下图：图片说明：充电时，屏幕上的光环为三种颜色交替出现。图层面板如下图：（6）、制作音乐播放界面：1、新建文件，将待机界面复制过来，去掉时间日期中国移动等字样，再加上一个背

13、景，结果如下图：2、用钢笔工具画出播放器的构架，给其填充上颜色，给其加上投影效果，移动图层的位置，结果如下图：3、制作光盘，创建一个椭圆，在复制出来三个椭圆，修改复制出的椭圆的大小，改变它们的颜色，以便区分它们，选中所有椭圆，利用路径查找器，将椭圆的中心去掉，在改变其他部位颜色，最后用剪切蒙版，剪除想要的部分，调整好位置，给其加上投影效果，结果如下图：4在网上找几个歌手的图片，将找到的图片置入其中，调整其大小，调整图层的层次关系，给其加上投影效果，结果如下图：5、制作一些小图标，用钢笔工具勾出图标的轮廓，填上一个颜色，然后创建渐变网格，选中一部分点，给其一个亮一点颜色，其余的给一些暗一点的颜色

14、，使其看着有一种渐变的感觉，然后复制和镜像复制出另外的图标，调整它们的位置，结果如下图：6、新建一个图层，在新的图层上打上一些文字，调节字体的颜色，然后放在合适的位置，在创建一个圆角矩形，填充上绿色，放在歌曲名的下方，作为歌曲的进度标志，最终界面效果如下图：图层面板如下图：三、插画设计项目策划：插画在中国被人们俗称为插图。今天通行于国外市场的商业插画包括出版物插图、卡通吉祥物、影视与游戏美术设计和广告插画4种形式。实际在中国，插画已经遍布于平面和电子媒体、商业场馆、公众机构、商品包装、影视演艺海报、企业广告甚至T恤、日记本、贺年片。插画的定义：1、插画，西文统称为illustration，源自于拉丁文illustraio，意指照亮之意，也就是说插画可 以使文字意念变得更明确清晰。 2、.辞典上的解释，插画是： （1）插画、图解（2）例证、实例 （3）举例说明 辞海对“插画”的解释是：“指插附在书刊中的图画。有的印在正文中间，有的用插页方式，对正文内容起补充说明或艺术欣赏作用。”这种解释主要是针对书籍插图作为的定义，是一种狭义的定义。