视觉设计思和技法.doc

视觉设计思路和技法 目录 前言 1 项目 1 构思 2 制作 2 背景 2 主界面（普通模式） 3 歌曲列表 10 主界面（迷你模式） 13 均衡器 13 歌词显示 13 互联网歌曲库 16 完成 16 作业 18 史上最好的平面设计视频教程 /item.htm?spm=2013.1.1000774.68.RTKvysid 免费广告学视频教程 成功电视广告案例分析和CorelDRAW案例实战全 /item.htm?spm=2013.1.31-8314319771.3.RTKvysid武汉大学 平面广告设计 最新视频教程 /item.htm?spm=2013.1.31-8314319771.12.weuVo5id=16209661249 武汉大学 广告策划与创意 新视频教程 前言 这是我参与部门技术分享的第三次了，前两次的分享偏重于概念和理论，对于一些实际的设计思路和方法分享的比较少，为了保证部门分享在技术应用层面的有效性和可持续，我计划将一些曾经做过的独特的、有意义的项目进行梳理和总结之后，给大家进行介绍，这里将减少一些理论性的描述，重点会放在界面构思和视觉设计实际的操作，希望大家的工作能够有所收获。 项目 千千静听皮肤设计，选择这个项目的目的是因为技术类培训相对比较枯燥，而此类皮肤设计有别于通常的系统类界面设计，相对要求界面生动活泼，可自由发挥度高，用它作为第一次的技术类设计分享，目的是希望能够调动大家对于界面设计更深的兴趣，使培训不再那么单调，仅此而已。 构思 我们要设计一个界面，首先要了解一个界面的应用范围，受众，包括哪些必备元素，哪些元素是可以个性化的，哪些是必须严格遵守规范的。 我们知道播放器通常包括主界面（普通模式、迷你模式）、均衡器、歌曲列表、歌词显示、互联网歌曲库5大部分，按应用划分就有6个界面需要设计，我对这个界面设计的定位是温馨的、独特的，在造型方面希望有别于一般的播放器界面，我把日常生活用到的电器、家具等应用在上面提到的6个界面组件中，那么“家”这个概念就已经成型了，具体需要设计的界面分别是： 1.主界面(普通模式)—家庭影院 2.主界面(迷你模式)—书柜顶部 3.均衡器—空调 4.歌曲列表—明亮的窗台 5.歌词显示—投影布 6.互联网歌曲库—书柜 前期项目的构思非常重要，他直接影响到后期界面的成型，这个阶段所占用的时间应该不小于整个项目周期的20%。 制作 背景 既然皮肤的定位是“温馨、家的概念”，那么在整体色彩的选择上也要向这一点靠近，在PS中新建一个画布，,1000 x600，颜色值#ffe9ae，#fdfcb9，我个人喜欢把画布铺满整个屏幕，这样在视觉上不会受到约束。 在图层样式中做线性渐变，由于渐变用到的比较多，在后面除非我特别指出，默认是在图层样式中做渐变，如图： 背景完成之后，有了这样环境氛围，开始制作组件界面了。 主界面（普通模式） 上面提到的6个应用中首先开始制作普通模式的主界面，因为主界面包含的元素较多，完成它对于定义整体界面的颜色样式有很大帮助。 既然主界面是以家庭影院为设计目标，那么包括的元素至少应该有电视机、机柜、音响构成。电视机制作如下： 用矩形工具绘制一个180x100的矩形，并在图层样式中添加# 2d2d2f、# 19191b、# 000000渐变和1像素的# 000000描边，完成后如下图： 新建图层绘制一个170x90的矩形屏幕，垂直和横向居中，保持离黑色背景有5个像素，添加渐变值# 0085e3、# 0057cb、角度102，如图： 对屏幕进行修饰，增强屏幕的立体感，方法是对蓝色屏幕进行浅色和深色描边，并新建图层做透明的线性渐变，如图： 同样的，对电视机的黑色边框也进行描边和边框的高亮处理，先在边框上绘制一条白线： 然后选择矩形工具对白线删除羽化，羽化值设为25px，具体是指根据实际效果修改，如下图： 按照上面所讲的方法，完成其他几条边线的绘制，并添加电源显示，整体效果如下： 接下就是电视机柜的制作了，按照上面所讲的使用描边和渐变，先绘制一个大概的框架，如图： 柜子上面的分割线的构成大家请注意看，，一条深色线和一条相对颜色较浅的线，他们组合在一起就构成了一种立体感，这种方法在界面设计中应用很广泛。 现在开始给柜子制作如均衡器的开关了，绘制一个圆角矩形，设置#543007到#7d3809的渐变，#e18e21到#fddca1的外部渐变描边，效果如下： 在这个基础上需要添加按钮的说明和柜子抽屉的拉手，绘制一个高宽小于上图2px的椭圆形，设置#f7c975到#bf6408的渐变，然后再旁边的空白处添加文字，如图： 歌曲列表的按钮就完成了，接着绘制其他按钮，完成后如