视觉设计思路和技法

《视觉设计思路和技法》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、视觉设计思路和技法目录前言1项目1构思2制作2背景2主界面（普通模式）3歌曲列表10主界面（迷你模式）13均衡器13歌词显示13互联网歌曲库16完成16作业18史上最好的平面设计视频教程http://item.taobao.com/item.htm?spm=2013.1.1000774.68.RTKvys&id=17121795092免费广告学视频教程成功电视广告案例分析和CorelDRAW案例实战全http://item.taobao.com/item.htm?spm=2013.1.31-83

2、14319771.3.RTKvys&id=15918726206武汉大学平面广告设计最新视频教程http://item.taobao.com/item.htm?spm=2013.1.31-8314319771.12.weuVo5&id=16209661249武汉大学广告策划与创意新视频教程前言这是我参与部门技术分享的第三次了，前两次的分享偏重于概念和理论，对于一些实际的设计思路和方法分享的比较少，为了保证部门分享在技术应用层面的有效性和可持续，我计划将一些曾经做过的独特的、有意义的项目进行梳理和

3、总结之后，给大家进行介绍，这里将减少一些理论性的描述，重点会放在界面构思和视觉设计实际的操作，希望大家的工作能够有所收获。项目千千静听皮肤设计，选择这个项目的目的是因为技术类培训相对比较枯燥，而此类皮肤设计有别于通常的系统类界面设计，相对要求界面生动活泼，可自由发挥度高，用它作为第一次的技术类设计分享，目的是希望能够调动大家对于界面设计更深的兴趣，使培训不再那么单调，仅此而已。构思我们要设计一个界面，首先要了解一个界面的应用范围，受众，包括哪些必备元素，哪些元素是可以个性化的，哪些是必须严格遵守

4、规范的。我们知道播放器通常包括主界面（普通模式、迷你模式）、均衡器、歌曲列表、歌词显示、互联网歌曲库5大部分，按应用划分就有6个界面需要设计，我对这个界面设计的定位是温馨的、独特的，在造型方面希望有别于一般的播放器界面，我把日常生活用到的电器、家具等应用在上面提到的6个界面组件中，那么“家”这个概念就已经成型了，具体需要设计的界面分别是：1.主界面(普通模式)—家庭影院2.主界面(迷你模式)—书柜顶部3.均衡器—空调4.歌曲列表—明亮的窗台5.歌词显示—投影布6.互联网歌曲库—书柜前期项目的构思

5、非常重要，他直接影响到后期界面的成型，这个阶段所占用的时间应该不小于整个项目周期的20%。制作背景既然皮肤的定位是“温馨、家的概念”，那么在整体色彩的选择上也要向这一点靠近，在PS中新建一个画布，,1000x600，颜色值#ffe9ae，#fdfcb9，我个人喜欢把画布铺满整个屏幕，这样在视觉上不会受到约束。在图层样式中做线性渐变，由于渐变用到的比较多，在后面除非我特别指出，默认是在图层样式中做渐变，如图：背景完成之后，有了这样环境氛围，开始制作组件界面了。主界面（普通模式）上面提到的6个应用中

6、首先开始制作普通模式的主界面，因为主界面包含的元素较多，完成它对于定义整体界面的颜色样式有很大帮助。既然主界面是以家庭影院为设计目标，那么包括的元素至少应该有电视机、机柜、音响构成。电视机制作如下：用矩形工具绘制一个180x100的矩形，并在图层样式中添加#2d2d2f、#19191b、#000000渐变和1像素的#000000描边，完成后如下图：新建图层绘制一个170x90的矩形屏幕，垂直和横向居中，保持离黑色背景有5个像素，添加渐变值#0085e3、#0057cb、角度102，如图：对屏幕进

7、行修饰，增强屏幕的立体感，方法是对蓝色屏幕进行浅色和深色描边，并新建图层做透明的线性渐变，如图：同样的，对电视机的黑色边框也进行描边和边框的高亮处理，先在边框上绘制一条白线：然后选择矩形工具对白线删除羽化，羽化值设为25px，具体是指根据实际效果修改，如下图：按照上面所讲的方法，完成其他几条边线的绘制，并添加电源显示，整体效果如下：接下就是电视机柜的制作了，按照上面所讲的使用描边和渐变，先绘制一个大概的框架，如图：柜子上面的分割线的构成大家请注意看，，一条深色线和一条相对颜色较浅的线，他们组合在

8、一起就构成了一种立体感，这种方法在界面设计中应用很广泛。现在开始给柜子制作如均衡器的开关了，绘制一个圆角矩形，设置#543007到#7d3809的渐变，#e18e21到#fddca1的外部渐变描边，效果如下：在这个基础上需要添加按钮的说明和柜子抽屉的拉手，绘制一个高宽小于上图2px的椭圆形，设置#f7c975到#bf6408的渐变，然后再旁边的空白处添加文字，如图：歌曲列表的按钮就完成了，接着绘制其他按钮，完成后如图：到这里仍然感觉柜子比较单薄，缺乏质感，有两种方法，一种是采用木纹材质进行叠加渐