视觉设计思路和技法.doc

视觉设计思路和技法.doc视觉设计思路和技法
目录
前言 1
项目 1
构思 2
制作 2
背景 2
主界面(普通模式) 3
歌曲列表 10
主界面(迷你模式) 13
均衡器 13
歌词显示 13
互联网歌曲库 16
完成 16
作业 18
史上最好的平面设计视频教程
http://item./?spm=&id=**********
免费广告学视频教程成功电视广告案例分析和CorelDRAW案例实战全
http://item./?spm=-&id=**********
武汉大学平面广告设计最新视频教程
http://item./?spm=-&id=**********
武汉大学广告策划与创意新视频教程
前言
这是我参与部门技术分享的第三次了,前两次的分享偏重于概念和理论,对于一些实际的设计思路和方法分享的比较少,为了保证部门分享在技术应用层面的有效性和可持续,我计划将一些曾经做过的独特的、有意义的项目进行梳理和总结之后,给大家进行介绍,这里将减少一些理论性的描述,重点会放在界面构思和视觉设计实际的操作,希望大家的工作能够有所收获。
项目
千千静听皮肤设计,选择这个项目的目的是因为技术类培训相对比较枯燥,而此类皮肤设计有别于通常的系统类界面设计,相对要求界面生动活泼,可自由发挥度高,用它作为第一次的技术类设计分享,目的是希望能够调动大家对于界面设计更深的兴趣,使培训不再那么单调,仅此而已。
构思
我们要设计一个界面,首先要了解一个界面的应用范围,受众,包括哪些必备元素,哪些元素是可以个性化的,哪些是必须严格遵守规范的。
我们知道播放器通常包括主界面(普通模式、迷你模式)、均衡器、歌曲列表、歌词显示、互联网歌曲库5大部分,按应用划分就有6个界面需要设计,我对这个界面设计的定位是温馨的、独特的,在造型方面希望有别于一般的播放器界面,我把日常生活用到的电器、家具等应用在上面提到的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的椭圆形,设置#f