《视觉设计思路和技法》由会员分享，可在线阅读，更多相关《视觉设计思路和技法（20页珍藏版）》请在金锄头文库上搜索。
1、视觉设计思路和技法目录前言1项目1构思2制作2背景2主界面(一般模式)3歌曲列表主界面（迷你模式)13均衡器13歌词显示13互联网歌曲库1完毕16作业8史上最佳的平面设计视频教程免费广告学视频教程 成功电视广告案例分析和orelDRAW案例实战全武汉大学平面广告设计 最新视频教程 武汉大学 广告筹划与创意新视频教程前言这是我参与部门技术分享的第三次了,前两次的分享偏重于概念和理论，对于某些实际的设计思路和措施分享的比较少,为了保证部门分享在技术应用层面的有效性和可持续,我筹划将某些曾经做过的独特的、故意义的项目进行梳理和总结之后,给人们进行简介，这里将减少某些理论性的描述，重点会放在界面构思和
2、视觉设计实际的操作，但愿人们的工作可以有所收获。项目千千静听皮肤设计,选择这个项目的目的是由于技术类培训相对比较枯燥，而此类皮肤设计有别于一般的系统类界面设计,相对规定界面生动活泼,可自由发挥度高,用它作为第一次的技术类设计分享,目的是但愿可以调动人们对于界面设计更深的爱好,使培训不再那么单调,仅此而已。构思我们要设计一种界面，一方面要理解一种界面的应用范畴，受众,涉及哪些必备元素，哪些元素是可以个性化的，哪些是必须严格遵守规范的。我们懂得播放器一般涉及主界面（一般模式、迷你模式）、均衡器、歌曲列表、歌词显示、互联网歌曲库5大部分，按应用划分就有6个界面需要设计,我对这个界面设计的定位是温馨的
3、、独特的，在造型方面但愿有别于一般的播放器界面，我把平常生活用到的电器、家具等应用在上面提到的6个界面组件中,那么“家”这个概念就已经成型了,具体需要设计的界面分别是：1.主界面(一般模式)家庭影院主界面(迷你模式）书柜顶部.均衡器空调4.歌曲列表明亮的窗台5.歌词显示投影布6.互联网歌曲库书柜前期项目的构思非常重要,她直接影响到后期界面的成型,这个阶段所占用的时间应当不不不小于整个项目周期的%。制作背景既然皮肤的定位是“温馨、家的概念”,那么在整体色彩的选择上也要向这一点接近,在PS中新建一种画布,，100 x600，颜色值#ffe,#fdfb9,我个人喜欢把画布铺满整个屏幕,这样在视觉上不
4、会受到约束。在图层样式中做线性渐变，由于渐变用到的比较多，在背面除非我特别指出,默认是在图层样式中做渐变,如图:背景完毕之后，有了这样环境氛围,开始制作组件界面了。主界面（一般模式）上面提到的个应用中一方面开始制作一般模式的主界面,由于主界面涉及的元素较多,完毕它对于定义整体界面的颜色样式有很大协助。既然主界面是以家庭影院为设计目的,那么涉及的元素至少应当有电视机、机柜、音响构成。电视机制作如下：用矩形工具绘制一种18x10的矩形，并在图层样式中添加# 2ddf、# 19191b、00000渐变和1像素的# 000000描边,完毕后如下图： 新建图层绘制一种170x0的矩形屏幕,垂直和横向居中
5、,保持离黑色背景有5个像素，添加渐变值 08e3、# 007cb、角度102，如图：对屏幕进行修饰，增强屏幕的立体感，措施是对蓝色屏幕进行浅色和深色描边,并新建图层做透明的线性渐变，如图：同样的，对电视机的黑色边框也进行描边和边框的高亮解决，先在边框上绘制一条白线:然后选择矩形工具对白线删除羽化,羽化值设为px，具体是指根据实际效果修改，如下图：按照上面所讲的措施，完毕其她几条边线的绘制，并添加电源显示,整体效果如下：接下就是电视机柜的制作了，按照上面所讲的使用描边和渐变,先绘制一种大概的框架,如图:柜子上面的分割线的构成人们请注意看,，一条深色线和一条相对颜色较浅的线,她们组合在一起就构成了
6、一种立体感，这种措施在界面设计中应用很广泛。目前开始给柜子制作如均衡器的开关了，绘制一种圆角矩形，设立#5007到#d89的渐变，#e18e1到#fd1的外部渐变描边,效果如下：在这个基本上需要添加按钮的阐明和柜子抽屉的拉手,绘制一种高宽不不小于上图px的椭圆形,设立#f7c975到#bf6408的渐变,然后再旁边的空白处添加文字，如图：歌曲列表的按钮就完毕了，接着绘制其她按钮,完毕后如图:到这里仍然感觉柜子比较单薄，缺少质感,有两种措施,一种是采用木纹材质进行叠加渐变，一种是做某些小的修饰，在这里我采用了第二种措施:目前开始制作音响了,一方面仍然是构图,在构图的时候要注意，如果我们对某同样物
7、体比较熟悉的状况下你可以直接绘制图形，例如上面的电视机，尚有一种我们不太熟悉的物体,这时候你需要在百度中找到相应的图片素材做参照，下面的音响是找的是的音响做原型的，基本构图如下：有了形状之后开始制作样式,这里并没有什么特殊的样式，仍然是渐变描边之类的，完毕后如下：接下来要制作音响上的喇叭了，图形设计中看起来是很复杂的东西，只要我们把它拆提成几种元素,那她就很简朴了，如下图,这几种小元素对人们来说画起来应当很简朴，几种大小不一的原型，几种像素点,那么组合起来放在音响上面是什么样子呢，如图：音响上面需要绘制音量控制按钮，绘制一种圆角矩形,设立渐变描边，完毕如下效果:同样的措施绘制音量控制条：音响部
8、分就完毕了,复制一种放在右边，搞成“立体环绕”的效果。播放器中尚有最小化、关闭、固定在顶部等功能,这里我使用电源开关座来表达，开关放在电视机的右边，它的大小取决于电视机和右边音响的距离,绘制正方形,如下图：使用前面所讲的措施,描边制作如下效果：第三个开关的制作要重点考虑立体感的效果,物体的立体感和光线的的角度、强弱明暗有关,开关放大后我们可以清晰的看到渐变和阴影在其中起到的效果:一种看似复杂的图形,仍然是离不开描边、渐变、阴影这些最简朴的PS操作,图形设计不在于工具，在于你的思维方式。目前开始添加播放器的面板信息，如图:面板中的播放、停止等按钮的绘制也很简朴,绘制一种颜色值为a1deff的圆形
9、边框，在S中自定义形状工具中有：并在图层样式中设立外发光：如图:复制出五个光圈，并加添相应的按键，如图：对于上图中的按键如中间的播放按钮是没有锯齿的,我绘制此类小图标的措施是用像素一种一种去画，放大后可看到具体效果：到这里主界面已基本完毕，可是看起来感觉有些单一,那么我们为它在加添某些元素,让界面看起来更丰满真实某些。在家庭影院中CD是必不可少的,我们需要一种放置CD的柜子，规则的构造比较简朴，重要是分格的，里面可以设计某些CD的盒子，小饰品等等,如图先做出简朴的布局,然后添加内容：C柜的背景需要木纹的素材来装饰,然后就是“摆放CD和小饰品”进去了，这部分和软件功能无关,可以自由发挥，但前提是
10、不能脱离家的主题，如图：歌曲列表用房间的窗台来设计歌曲列表传达一种思想，在布满蓝天白云的天空下听音乐不是很惬意的事吗？呵呵，那么开始吧。它应当具有如下功能，增长,删除,歌曲信息，查找,编辑,滚动列表等等,最重要的关闭功能。先绘制一种整体的框架,如图：接下来制作窗户、云彩、光线,云彩用网上的素材来做,这部分的重点是窗户的明亮度和通透感,如图:有窗户固然要有窗帘了，先绘制窗帘的滑竿,如图:接下来的窗帘仍然是用素材来制作，窗帘的颜色不要与主色系差别过大,否则会显得比较突兀,如图:接下来开始制作功能图标了，在这之前先给窗台做一种木板,如图：功能图标的设计也不能脱离家的概念，我使用了花盆、相片、镜子、书
11、籍来相应相应的功能,如下图：图标的制作之前有专门的培训已经为人们解说了，这里不在做描述。接下来制作歌词列表和滚动条,完毕后如图：最后一种功能是关闭，这里强调一下，由于是家的概念,在设计元素的时候不能在简朴的用一种叉来表达了，在这里我使用关闭窗帘的拉手,关闭窗户即代表关闭歌曲列表:主界面（迷你模式）迷你模式的播放器界面同样具有了一般模式播放器的功能,如歌曲类表按钮、音量、播放停止等等,设计的重点在于构思界面的布局和相应功能的摆放,以及各功能按键的图形样式。上图中的每一种组件都是有相应功能的,千千静听的图标采用吊坠的设计，音量控制使用老式的播放器,歌曲属性使用课本加标签的设计，关闭功能使用台灯，功
12、能按钮的构成仍然要家这个概念为主，尽量的采用相应元素进行设计。均衡器均衡器的设计我思考了好久，才决定使用空调的样式来制作,这个界面从技术角度上讲我觉得没有难度,重点在于这个“空调”相对于其她界面的大小比例设立以及界面上面各控件的大小，如果空调的大小和主界面同样大,那么在视觉会感到很不协调。歌词显示歌词显示让我想到了投影布,始终但愿自己有个投影仪在超大的屏幕上看电影，既然买不起那就做一种吧。在这个界面当中有二个设计点需要注意：1. 幕布边框的羽化；一方面绘制幕布的整体框架如图：新建一种图层,描边1px #00选择幕布的整体框架,模糊描边的这个图层，是描边模糊不会超过整体框架的范畴,如图:设立高斯
13、模糊为4.0拟定后效果如图:这样幕布的整体感觉就出来了。2. 幕布支撑的制作。我但愿绘制两个三角支架来支撑幕布，除中间的竖向支架外，斜角的支架我海事用铅笔一种像素一种像素的去构图,这样的好处是不会有边沿虚化。使用矩形工具绘制然后变换到45度，可以看到周边边沿的虚化。最后人们可以看到整体效果如下：互联网歌曲库这个界面从系统功能上来说比较简朴，要做的应用只有一种关闭按钮，中间内容是采用框架载入wb的,为了保持视觉设计上的统一,我使用mini主界面的书柜来做繁衍设计，关闭按钮继续使用台灯部分。完毕所有的界面都已近完毕了,接下来对每个界面场景进行最后一次审核,看看与否有改善或者修改的地方,举个例子，我发目前主界面电视机与电源开关的链接上可以有一点改善，缺少电源线,于是修改后的效果图如下:回忆上面播放器设计，使用的ps技术涉及渐变、描边、投影等,从技术角度来说我把我的设计方式总结为“分解化设计”，把复杂的图形分解为简朴的图形逐渐完毕;从界面本质来说重要的是产品的定位和概念，在进行视觉实际的时候我们要将产品的定位和概念贯穿始终。作业1. 从UI的角度描述此项目界面设计的优缺陷；2. 对某些核心的界面元素进行模仿或重新设计,例如均衡器可以采用其她的方式来设计。
