CG毕业课程设计报告.docx
《CG毕业课程设计报告.docx》由会员分享，可在线阅读，更多相关《CG毕业课程设计报告.docx（33页珍藏版）》请在冰点文库上搜索。
CG毕业课程设计报告
（此文档为word格式，下载后您可任意编辑修改！
）
《CG技术》课程设计
报告书
题目：
手机UI设计
插画设计
系别
计算机科学与工程系
专业
数字媒体技术
学号
姓名
指导老师
河南城建学院
2012年6月20日
课程设计的目的1
课程设计题目1
课程设计要求1
操作平台2
课程设计时间安排2
一、手机UI设计项目策划：
2
二、手机UI设计过程：
3
（1）、制作手机待机界面：
3
（2）、制作手机菜单界面：
6
（3）、制作手机音乐界面：
9
（4）、制作手机通话中界面：
11
（5）、制作手机充电中界面：
15
（6）、制作音乐播放界面：
18
三、插画设计项目策划：
25
四、插画设计过程：
26
五、总结31
六、主要参考书及手册31
课程设计的目的
课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的设计制作能力。
提高学生运用所学知识解决实际问题的能力。
通过课程设计，学生在下述各方面的能力应该得到锻炼：
（1）进一步巩固、加深学生所学专业课程《CG技术》的基本理论知识，理论联系实际，进一步培养学生设计创作和软件操作能力。
（2）全面考核学生所掌握的基本理论知识及其实际业务能力，从而达到提高学生素质的最终目的。
根据企业、商品及广告委托人的要求，撰写设计方案，按委托者的要求，利用合适图文素材设计制作符合要求的平面设计作品，会熟练掌握illustrator和数码绘图软件的操作和应用。
课程设计题目
1、UI设计
2、插画设计
课程设计要求
（1）课程设计单人完成，每人之间不得有雷同现象。
（2）课程设计过程中，首先要进行项目调研分析、技术设计分析及创意图与色彩设计。
（3）设计结束时，每人根据项目分析设计的要求，上交所有的ai、jpg文件，文件名按“学号姓名-项目名称”来命名。
（4）作品内容必须要和课程设计报告中的项目内容要一致，设计报告要求在5000字左右，报告内容应有课程设计题目、需求分析、设计制作方案及关键制作技术等内容，必要处需要将图层结构和效果图抓屏后进行插图。
课程设计报告要求用A4纸打印后与作品一同上交，无设计报告者不予评定成绩。
操作平台
1.硬件平台
硬件平台是平面广告设计与制作所需要的硬件环境，主要包括计算机机型及硬件配置。
由于此次课程设计是用AI软件设计平面作品，因此对计算机硬件的要求较高，需要配备1G内存（或以上）、512独立显卡（或更高）、硬盘500G的笔记本或台式机。
2.软件平台
软件平台是程序设计与运行的软件环境。
此次设计利用的是：
（1）AdobeIllustratorCS5软件。
llustrator是adobe的一款专业的出版、多媒体和在线图像的工业标准矢量图形设计制做软件。
一般主要用于网页，标志，手绘和插画等绘制。
软件通过精良的绘图工具、具有表现力的自然画笔、各种省时功能以及与AdobeCSLive在线服务的集成提供精准度和强大功能，为全球设计专业人士青睐。
作为全球著名的图形软件AdobeIllustrator，以其强大的功能和体贴的用户界面已经占据了全球矢量编辑软件中的大部分份额。
（2）ACDSee软件。
ACDSee是一个老牌的图像文件浏览的软件，它支持TIFF、JPEG、BMP、GIF、PCX、TGA等四十种以上的常见图像和多媒体文件格式。
ACDSee打开图片的速度非常快，它提供有缩略图观看方式，并能够为每个目录建立一个索引，此外，ACDSee还内带有图像处理工具，支持图像格式转换、图像增强和编辑以及修改文件时间戳等功能。
课程设计时间安排
（1）设计时间
2012年6月11日——2012年6月21日
（2）设计地点
系实验中心10#教学楼202机房
（3）工作计划
6月11日学习任务书、选题调研
6月11日技术分析及创意图文设计
6月12日素材收集及设计
6月13日——6月18日编辑制作
6月19日测试修改
6月20日——6月21日撰写设计报告
一、手机UI设计项目策划：
手机ui设计是手机软件的人机交互、操作逻辑、界面美观的整体设计。
置身于手机操作系统中人机交互的窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能有所了解。
手机UI设计一直被业界称为产品的“脸面”，好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。
软件设计可分为两个部分：
编码设计与UI设计。
编码设计大家都很熟悉，但是UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。
UI的本意是用户界面，是英文User和Interface的缩写。
从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。
在飞速发展的电子产品中，界面设计工作一点点的被重视起来。
做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。
其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。
一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，为商家创造卖点。
界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。
检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。
所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程
我的设计创意初衷是能找到一款界面更炫丽，更时尚，操作时很舒服的手机交互界面，并且这种界面增添了一些新的功能，使人们的生活更方便，更快捷，让人们真正享受到科技给人们带来的益处。
文献检索大部分是来自于XX中的手机UI设计XX百科，另外参考了一些比较优秀的手机UI设计作品。
作品创新方面，我感觉是交互界面有个性，菜单是旋转出现的，还有就是通话时的界面功能增多，运用世界当今最前沿的视频通话技术，让人们通话时更有面对面的感觉。
主要使用的技术：
渐变，滤镜效果，剪切蒙版等，
二、手机UI设计过程：
（1）、制作手机待机界面：
1、构思设计界面，现在网上找一些优秀的例子，再经过自己的创新，最终确定做什么。
2、开始制作，打开IllustratorCS5，新建文件，创建一个矩形，填上径向渐变色，在建一个矩形，填上线性渐变色，在此矩形上画出两个信号标志，再画一个电池标志，标志如下图：
3、在手机屏幕上写上时间日期和中国移动字样，修改字的颜色和大小，将字移动到合适的位置。
如图：
4、置入参考素材，参照参考素材，制作出一些小图标，分别是通话、电话薄、短信、菜单，图标如下图：
5、修改图标细节，调整布局，给背景加上图片。
最终效果如下图：
图层面板如下图：
（2）、制作手机菜单界面：
1、在待机界面的基础上，首先去掉文字，然后制作菜单
2、先画一个圆环，填上径向渐变色，中间画一个圆角矩形，如图：
3、置入参考图片，参考素材画出一些小标志，分别是：
音乐、设置、文件管理、图片。
标志如下图：
3、画出一个圆，天上渐变色，将画好的小图标放上面，写上汉字，调整他们的位置。
4、给手机加上一个背景，最终界面如下图：
图层面板如下图：
（3）、制作手机音乐界面：
1、在待机界面上加上音乐，画一个矩形，填充上渐变色，建一个列表，写上音乐列表。
2、调整布局，编组列表，最终效果如下图：
图层面板如下图：
（4）、制作手机通话中界面：
1、新建文件，复制待机界面进来，去掉小图标，如图：
2、找一张素材图片，在Photoshop中去掉背景，保存为psd格式图片以备用，如图：
4、在AI中打开处理后的素材，利用剪切蒙版裁剪成合适大小的图片，调整大小，如图：
5、给人加上渐变色背景，如图：
6、制作透明按键，创建一个圆角矩形，调整期透明度，在创建一个矩形，利用对象下的菜单，路径—分割为网格命令，将其分割为两排三列个矩形，调整其间距，修改期透明度，调整位置。
如图：
7、绘制一些小图标，如下图：
6、创建圆角矩形，填充为线性渐变色，打上结束通话四个字，如下图：
7、在屏幕上方打上人名以及通话时间，调整位置，最终界面如下图：
图层面板如下图：
（5）、制作手机充电中界面：
1、在AI中新建文件，复制待机界面进来，去掉中国移动。
2、创建一个正圆，填充上径向渐变色，调整透明度。
3、在创建一个正圆，给其填充上径向渐变色，在创建一个椭圆，同样填充径向渐变色，调整其大小，放在合适的位置。
4、创建发光的圆环，先创建两个圆，利用路径查找器，制成圆环，将圆环填充上径向渐变色，然后给圆环加上外发光的效果。
最终界面如下图：
图片说明：
充电时，屏幕上的光环为三种颜色交替出现。
图层面板如下图：
（6）、制作音乐播放界面：
1、新建文件，将待机界面复制过来，去掉时间日期中国移动等字样，再加上一个背景，结果如下图：
2、用钢笔工具画出播放器的构架，给其填充上颜色，给其加上投影效果，移动图层的位置，结果如下图：
3、制作光盘，创建一个椭圆，在复制出来三个椭圆，修改复制出的椭圆的大小，改变它们的颜色，以便区分它们，选中所有椭圆，利用路径查找器，将椭圆的中心去掉，在改变其他部位颜色，最后用剪切蒙版，剪除想要的部分，调整好位置，给其加上投影效果，结果如下图：
4在网上找几个歌手的图片，将找到的图片置入其中，调整其大小，调整图层的层次关系，给其加上投影效果，结果如下图：
5、制作一些小图标，用钢笔工具勾出图标的轮廓，填上一个颜色，然后创建渐变网格，选中一部分点，给其一个亮一点颜色，其余的给一些暗一点的颜色，使其看着有一种渐变的感觉，然后复制和镜像复制出另外的图标，调整它们的位置，结果如下图：
6、新建一个图层，在新的图层上打上一些文字，调节字体的颜色，然后放在合适的位置，在创建一个圆角矩形，填充上绿色，放在歌曲名的下方，作为歌曲的进度标志，最终界面效果如下图：
图层面板如下图：
三、插画设计项目策划：
插画在中国被人们俗称为插图。
今天通行于国外市场的商业插画包括出版物插图、卡通吉祥物、影视与游戏美术设计和广告插画4种形式。
实际在中国，插画已经遍布于平面和电子媒体、商业场馆、公众机构、商品包装、影视演艺海报、企业广告甚至T恤、日记本、贺年片。
插画的定义：
1、插画，西文统称为「illustration」，源自于拉丁文「illustraio」，意指照亮之意，也就是说插画可
以使文字意念变得更明确清晰。
2、.辞典上的解释，插画是：
（1）插画、图解
（2）例证、实例（3）举例说明《辞海》对“插画”的解释是：
“指插附在书刊中的图画。
有的印在正文中间，有的用插页方式，对正文内容起补充说明或艺术欣赏作用。
”这种解释主要是针对书籍插图作为的定义，是一种狭义的定义。
由于情报时代的来临，现代社会的发展，现代插画的含义已从过去狭义的概念（只限于画和图）变为广义的概念，“插画”就是我们平常所看的报纸、杂志、各种刊物或儿童图画书里，在文字间所加插的图画，统统称为“插画”。
插画，在拉丁文的字义里，原是“照亮”的意思。
望文思义，它原来是用以增加刊物中文字所给予的趣味性，使文字部份能更生动、更具象地活跃在读者的心中。
而在现今各种出版品中，插画的重要性，早已远远地超过这个“照亮文字”的陪衬地位。
它不但能突出主题的思想，而且还会增强艺术的感染力。
插画是一种艺术形式，作为现代设计的一种重要的视觉传达形式，以其直观的形象性，真实的生活感和美的感染力，在现代设计中占有特定的地位，已广泛用于现代设计的多个领域，涉及到文化活动、社会公共事业、商业活动、影视文化等方面。
设计创意初衷是能设计一张具有时尚特色，又很有个性的插画，让人看过之后有一种时尚的气息，并具有美感，并且不失特色。
文献检索大部分是来自于XX中的插画设计XX百科，另外参考了一些比较优秀的插画设计作品。
作品创新方面，没有多大的创新，临摹了一幅插画设计，
主要使用的技术：
渐变，滤镜效果，剪切蒙版等，
四、插画设计过程：
1、新建文件（横向），置入素材图片，先画圆形图标，创建一个正圆，利用等比缩放工具对其进行缩放，修改一下颜色以便区分，重复上一个动作，重复三次。
2、将几个圆中心对其，利用路径查找器工具裁剪，在裁剪后的图形下面衬托一个白底（也为圆形），形如下图：
8、利用同样的方法制作出多个如上图形（颜色和样式加以改变），结果如下图：
9、新建图层，参照素材图用钢笔工具勾出人物的轮廓，勾出的效果如下图（图层面板）：
10、对勾好的线条区域进行填色，结果如下图：
11、对一些细节进行修改，注意图层的层次关系，最终效果如下图：
图层面板如下图：
五、总结
两周的课程设计结束了，在这次的课程设计中不仅检验了我所学习的知识，也培养了我如何去把握一件事情，如何去做一件事情，又如何完成一件事情。
在设计过程中，和同学们相互探讨，相互学习，相互监督。
学会了合作，学会了运筹帷幄，学会了宽容，学会了理解，也学会了做人与处世。
课程设计是我们专业课程知识综合应用的实践训练，着是我们迈向社会，从事职业工作前一个必不少的过程．”千里之行始于足下”，通过这次课程设计，我深深体会到这句千古名言的真正含义．我今天认真的进行课程设计，学会脚踏实地迈开这一步，就是为明天能稳健地在社会大潮中奔跑打下坚实的基础．
通过这次课程设计，使我进一步熟练了IllustratorCS5的一些操作技巧和方法，同时也对CG设计有了更深层次的理解，也对CG设计的兴趣有了极大提高，CG设计未来的就业前景很好，我相信我们专业的学生在此方面一定会有很好的发展和建树。
同时也对相关的软件都有了全面的复习，独立思考的能力也有了提高。
在这次设计过程中，体现出自己单独设计产品的能力以及综合运用知识的能力，体会了学以致用、突出自己劳动成果的喜悦心情，从中发现自己平时学习的不足和薄弱环节，从而加以弥补。
在此感谢我们的姚老师.和白老师，老师严谨细致、一丝不苟的作风一直是我工作、学习中的榜样；老师的教导和不拘一格的思路给予我无尽的启迪；同时感谢对我帮助过的同学们，谢谢你们对我的帮助和支持，让我感受到同学的友谊。
由于本人的设计能力有限，在设计过程中难免出现错误，恳请老师们多多指教,我十分乐意接受你们的批评与指正，本人将万分感谢。
六、主要参考书及手册
《IllustratorCS4中文版从入门到精通》郭圣路 杨红霞 侯鹏志 等电子工业出版社
《IllustratorCS4特效设计与制作实例精讲（中文版）》新知互动 北京希望电子出版社，科学出版社
《IllustratorCS4中文版入门与提高》李瑶清华大学出版社
升级会员 