视觉设计思路和技法.docx

视觉设计思路和技法.docx视觉设计思路和技法目录前言 1项目 1构思 2制作 2背景 2主界面(普通模式) 3歌曲列表 10主界面(迷你模式) 13均衡器 13歌词显示 13互联网歌曲库 16完成 16作业 18刖弓这是我参为部门技术分享的第三次了,前两次的分享偏巫于概念和理论,对于一些实际的设计思路和方法分享的比较少,为了保证部门分享在技术应用层面的有效性和可持续,我计划将一些曾经做过的独特的、有意义的项口进行梳理和总结z后,给大家进行介绍,这里将减少一些理论性的描述,觅点会放在界面构思和视觉设计实际的操作,希望大家的工作能够有所收获。项目千千静听皮肤设计,选择这个项目的目的是因为技术类培训相对比较枯燥,而此类皮肤设计有别于通常的系统类界面设计,相对要求界面生动活泼,可自由发挥度高,用它作为第一次的技术类设计分享,目的是希望能够调动人家对丁•界血设计更深的兴趣,使培训不再那么单调,仅此而已。构思我们要设计一个界面,首先要了解一个界面的应用范围,受众,包括哪些必备元素,哪些元素是可以个性化的,哪些是必须严格遵守规范的。我们知道播放器通常包括主界面(普通模式、迷你模式)、均衡器、歌曲列表、歌词显示、互联网歌曲库5人部分,按应用划分就有6个界血需耍设计,我对这个界血设计的定位是温馨的、独特的,在造型方面希望有别于一般的播放器界面,我把「I常生活用到的电器、家具等应用在上面提到的6个界面组件中,那么“家”这个概念就已经成型了,具体需要设计的界而分別是:1・主界面(普通模式)一家庭影院主界而(迷你模式)•互联网歌曲库一卩柜前期项目的构思非常重要,他直接影响到厉期界面的成型,这个阶段所占用的时间应该不小于整个项目周期的20%o制作背景既然皮肤的定位是“温馨、家的概念”,那么在整体色彩的选择上也要向这一点靠近,在PS中新建一个画布,,1000x600,颜色值#ffe9ae,#fdfcb9,我个人喜欢把画布舖满整个屏幕,这样在视觉上不会受到约束。在图层样式中做线性渐变,由于渐变用到的比较多,在后面除非我特别指出,默认是在图层样式中做渐变,如图:投影□内阴影外发光□内发光斜面和浮離亡等高线叵纹理□光泽颜色叠加不逶明度『):IJmid%渐变:1卜I 反向(R:样式(L):线性 ▼V与圉层对齐(I)角度(N):©90度缩fik(s):• Q-100%滋m倶工12丿:止吊渐变叠加□圉案叠加描边背景完成Z后,有了这样环境氛围,开始制作纽•件界面了。主界面(普通模式)上而提到的6个应用中首先开始制作普通模式的主界而,因为主界面包含的元索较多,完成它对于定义整体界面的颜色样式有很大帮助。既然主界而是以家庭影院为设计H标,那么包括的元素至少应该有电视机、机柜、咅响构成。电视机制作如下:用矩形工具绘制一个180x100的矩形,并在图层样式中添加#2d2d2f、#19191b>#000000渐变和1像索的#000000描边,完成厉如下图:新建图层绘制一个170x90的矩形屏幕,垂直和横向居中,保持离黑色背景有5个像素,添加渐变值#0085e3、#0057cb、角度102,如图:对屏幕进行修饰,增强屏幕的立体感,方法是对蓝色屏幕进行浅色和深色描边,并新建图层做透明的线性渐变,如图:同样的,对电视机的黑色边框也进行描边和边框的高亮处理,先在边框上绘制一条白线:然片选择矩形工具对白线删除羽化,羽化值设为25px,具体是指根据实际效果修改,如下图:「一1•1▼L一」0QP®羽化:25pxmusic.******@100% 22副本,RQ•1•1•1■■•••・・oI2. 卩 4□2■■厂■■■按照上而所讲的方法,完成其他儿条边线的绘制,并添加电源显示,整体效果如下:接下就是电视机柜的制作了,按照上面所讲的使用描边和渐变,先绘制一个大概的框架,如图:柜子上面的分割线的构***家请注意看,I,一条深色线和一条相对颜色较浅的线,他们组合在一起就构成了-•种立体感,这种方法在界而设计中应用很广泛。现在开始给柜了制作如均衡器的开关了,绘制一个圆角矩形,设置#543007到#7d3809的渐变,#el8e21至lj#fddcal的外部渐变描边,效果如下:在这个基础上需耍添加按钮的说叨和柜子抽屉的拉手,绘制一个高宽小丁•上图2px的椭圆形,设置#f7c975到骯彳6408的渐变,然后再旁边的空口处添加文字,如图:歌彩列表的按钮就完成了,接着绘制其他按钮,完成片如图:到这里仍然感觉柜子比较单薄,缺乏质感,有两种方法,一种是采用木纹材质进行叠加渐变,一种是做一些小的修饰,在这里我釆用了第二种方法:现在开始制作咅响了,首先仍然是构图,在构图的时候要注意,假如我们对某一样物体比较熟悉的情况下你可以直接绘制图形,比如上面的电视机,还有一种我们不太熟悉的物体,这时候