摄影专区

当前位置:金沙7868com > 摄影专区 > 畅游VC设计师入职半年后的工作经验总结,详细解

畅游VC设计师入职半年后的工作经验总结,详细解

来源:http://www.jilawu.com 作者:金沙7868com 时间:2019-09-25 12:20

金沙7868com 1

当人物和背景的颜色比较接近时,为了增强人物的立体感和空间感,可以在人物上添加光效,拉开人物和背景的距离,形成视觉差异,这样需要强调的人物就瞬间凸显了出来,页面的层次也一下子体现出来了。

上三图中,在色调处理上都运用了冷暖对比的形式,使画面的细节更加丰富,同时,冷暖的对比可以表达出超强的对抗性。运用到网页设计当中如下:

金沙7868com 2

3、 视觉焦点

金沙7868com 3

金沙7868com 4

色彩运用问题

金沙7868com 5

金沙7868com 6

金沙7868com 7

1.经常浏览同行业设计网站。我们平时会浏览大量的设计作品,看到到好的设计或功能截图保存,需要做类似页面效果时方便参考。

金沙7868com 8

添加了火焰的光效,人物显得比较动态鲜活,整个画面更有一种对抗的战火纷飞的感觉,但是现在整个画面结合度还不够高,这个时候我们往往会通过调整人物的色调和对比度等方法来使整个画面更加和谐,但是不要漏掉一个重要的步骤就是环境色,可以通过在人物身上添加环境色来使人物和光效得到更好的结合,而且有质感的光效就像现在用的火焰,可以将材质叠加到人物的明暗面让画面更加真实生动(如图中绿点标示部位)。最后,我们可以添加一些飘动的零散的火光,让火焰的更有动感。

金沙7868com 9

2.建立素材库。自己做了一个特殊效果(比如字体、小装饰、特殊边框等),保存PSD文件方便反复利用。

当人物和背景的颜色比较接近时,为了增强人物的立体感和空间感,可以在人物上添加光效,拉开人物和背景的距离,形成视觉差异,这样需要强调的人物就瞬间凸显了出来,页面的层次也一下子体现出来了。

1、 丰富页面的层次

金沙7868com 10

3.及时总结。养成总结的习惯可以避免自己多次犯同一个错误,也有利于继承自己设计中的优点。

为了展现页面的主题或者是贴近游戏的氛围,常常会看见游戏的页面中运用了许多不同类型的光效的渲染,一个简单的元素有时候加上一点光效就可以化腐朽为神奇。那么光效究竟是如何具体地影响页面的视觉观感的呢?

光效的颜色、形状和出现的位置会对设计表达的气氛产生很直接的影响,就好像现实中的光源一样,浅色暖色调的光效给人光明温暖的感觉,深色冷色调的就给人阴暗冷酷的感觉,同样的素材加上不同的光效,展现的也许就是完全不同的立场。具体到游戏页面设计,不同的势力性格不同,通常都有各自的代表颜色,这时候用对应的光效来表现,很容易就能烘托出这些势力不同的个性来,是非常基本的运用。

金沙7868com 11

通过官网小调查数据看到,换肤后的刀剑官网用户喜欢占58%,一般占28%,不喜欢占14%。多数玩家还是比较认同这组设计。

1、 丰富页面的层次

金沙7868com 12

金沙7868com 13

以前我的设计配色存在很大问题,色彩运用发闷、显脏、花和乱的现象严重。后来逐渐发现,问题的根源是一贯的惰性思维,开始设计之前没有动脑子想,缺乏整体规划。之前的工作中堆素材现象严重,即把需求方提供的素材先往页面上摆,再找一些光效或花纹素材叠加到上面,猛一看挺有视觉冲击力的,造成的结果就是颜色无法把握。其实这种做法出发点就是错误的,用什么样的素材应该根据页面传达信息的需要而定,不能凭个人喜好或者单纯追求某种视觉效果。形式要为内容服务,颜色也一样。

金沙7868com 14

金沙7868com,3、 视觉焦点

  1. 层次

>结语

金沙7868com 15

不过更多的时候,光效不单单只有上述的一种功能,在页面设计的过程当中,会将三者功能结合到一起。

金沙7868com 16

平时的工作很忙,时间排期很紧,养成良好的工作习惯可以有效帮你节省时间、提高工作效率和工作质量。

2、 烘托气氛

金沙7868com 17

上两图中,左图统一的暖色调彰显了画面的热情激昂,而右图统一的冷色调则表现出画面的冷酷。在处理时切记对画面中所有的元素都要进行统一的环境色处理,运用到网页设计当中如下:

金沙7868com 18

可以看见下面页面中灯光和烟火让整个舞台气氛火热,仿佛可以感受到现场的表演的热情。光影的对比,让舞台看起来有着强烈的空间感。聚光灯的照射引导用户的视线,一眼就能看到重点突出的视觉焦点。

金沙7868com 19

大家在浏览网页时经常可以看优秀的海报设计,这些设计往往可以通过其优秀的颜色处理、场景打造、氛围渲染、排版布局、文字处理以及巧妙的创意等方面来抓住浏览者的眼球。那么我们是不是可以吸收这些优秀的海报视觉,来帮助我们设计其他领域的东西呢?设计是相通的,答案自然也是肯定的。那么今天我们就跟大家分享一下一些优秀的海报设计在网页中的应用。

金沙7868com 20

光效的颜色、形状和出现的位置会对设计表达的气氛产生很直接的影响,就好像现实中的光源一样,浅色暖色调的光效给人光明温暖的感觉,深色冷色调的就给人阴暗冷酷的感觉,同样的素材加上不同的光效,展现的也许就是完全不同的立场。具体到游戏页面设计,不同的势力性格不同,通常都有各自的代表颜色,这时候用对应的光效来表现,很容易就能烘托出这些势力不同的个性来,是非常基本的运用。

为了展现页面的主题或者是贴近游戏的氛围,常常会看见游戏的页面中运用了许多不同类型的光效的渲染,一个简单的元素有时候加上一点光效就可以化腐朽为神奇。那么光效究竟是如何具体地影响页面的视觉观感的呢?

金沙7868com 21

金沙7868com 22

添加了火焰的光效,人物显得比较动态鲜活,整个画面更有一种对抗的战火纷飞的感觉,但是现在整个画面结合度还不够高,这个时候我们往往会通过调整人物的色调和对比度等方法来使整个画面更加和谐,但是不要漏掉一个重要的步骤就是环境色,可以通过在人物身上添加环境色来使人物和光效得到更好的结合,而且有质感的光效就像现在用的火焰,可以将材质叠加到人物的明暗面让画面更加真实生动(如图中绿点标示部位)。最后,我们可以添加一些飘动的零散的火光,让火焰的更有动感。

有时候光效在页面上以光源的形式出现,这样可以很容易抓住用户的眼球,吸引住用户的焦点,页面上需要重点强调的信息,就可以展现在光源附近,这时光效充当的就是引导用户的作用,非常简单,但是很有效。

上左图将书法的武侠二字作为画面主视觉进行处理,而右图则直接将死侍坐在类似3d处理后的电影名字上,很好的融入到了画面中。运用到网页设计当中如下:

金沙7868com 23

不过更多的时候,光效不单单只有上述的一种功能,在页面设计的过程当中,会将三者功能结合到一起。

金沙7868com 24

金沙7868com 25

画面结构和形式

光的特效使用和技巧千变万化,使用恰当可起到画龙点睛的效果,以上只是我在平时常用的一些技巧,在此抛砖引玉,欢迎大家一起讨论。

光的特效使用和技巧千变万化,使用恰当可起到画龙点睛的效果,以上只是我在平时常用的一些技巧,在此抛砖引玉,欢迎大家一起讨论。

金沙7868com 26

最后祝大家新年快乐,工作进步、心想事成。

知道了光效作用的原理,我们自然就明白了什么时候在哪里加什么光效,就能达到我们的目的,那么如何来做光效呢,让我们实做一次试试看:

金沙7868com 27

上左图通过人物躲在墙壁破裂的一角来体现画面的神秘感,而右图则通过破碎的玻璃来反射出一些跟男主相关的人物或场景,运用到网页设计当中如下:

这是6月份刚来的时候做的一个专题页,问题很多。视觉重点不突出、层次混乱、画面琐碎。

金沙7868com 28

知道了光效作用的原理,我们自然就明白了什么时候在哪里加什么光效,就能达到我们的目的,那么如何来做光效呢,让我们实做一次试试看:

通过上面的例子可以看出,合理利用一些氛围元素的渲染,例如光、烟雾、云等素材,不仅可以起到烘托页面气氛的作用,而且可以突出主体,同时弱化主体外的其他元素,成功地拉开主体与其他非主体元素之间的层次关系。

这是最近做的一个圣诞专题,形式和上一个类似,标题+人物+标签切换。画面关系和效果上比上一个有较大提升。

金沙7868com 29

2、 烘托气氛

金沙7868com 30

这个案例和上个相似,与主编一起和需求方沟通换了人设,配合人物的动态设计了发散形状的按钮,主体用暗红色和烟花体现狂欢气氛。不足之处是人物脚踩的木板显得突兀,周围环境无法与之配合。

金沙7868com 31

可以看见下面页面中灯光和烟火让整个舞台气氛火热,仿佛可以感受到现场的表演的热情。光影的对比,让舞台看起来有着强烈的空间感。聚光灯的照射引导用户的视线,一眼就能看到重点突出的视觉焦点。

  1. 色调

反面案例:颜色沉闷、显脏。

有时候光效在页面上以光源的形式出现,这样可以很容易抓住用户的眼球,吸引住用户的焦点,页面上需要重点强调的信息,就可以展现在光源附近,这时光效充当的就是引导用户的作用,非常简单,但是很有效。

金沙7868com 32

色调统一

到12月1日,我来到畅游VC整半年了。作为一个网站设计师,能在这样专业的团队里工作和学习,是一段宝贵的经历。感谢领导在专业上对我的指导,同事们在工作中对我无私的帮助。经过半年大量的官网、专题、广告设计,自己也积累了一些经验,改变了以前的设计思路。非常高兴有机会能把自己的经验得失和大家聊一聊。

  1. 创意

暗影之剑的时装专题,主要介绍游戏中的时装,促使玩家充值购买。从UE上看,方方正正结构死板,很难激起玩家的购买欲望。

素材处理

经过和需求方的讨论,换了真实人物,增强页面的冲击力。板式做了变化,使标题人物和按钮结合的更紧密。色调上和刀剑新官网保持一致(需求方要求,个人认为如果换成红色的喜庆色调效果会更好),按钮用大红色增强庆祝的气氛。

海报可以给我们的设计带来很多灵感,其实不止是海报,设计本身就是相通的,所以很多别的领域的设计也可以让我们去学习。本文的讲解更偏重于游戏,而且由于本人水平有限,讲解涉及到的知识并不全面,还望各位看官能够理解。最后送给大家一句话: 设计源于生活,我们应该学会从生活中汲取灵感。

这是一个活动汇总页,如果按UE的板式设计会显得有些死板,人物和标题、按钮之间缺乏关系。需求方提供了一个人物素材,质量不高,个人觉得人物动态也不太适合这个专题。

金沙7868com 33

金沙7868com 34

金沙7868com 35

知道了自己的缺点以后,现在做设计之前都要动脑子想想,什么样的色调能和要传达的信息结合的更紧密。站在用户角度想问题,什么颜色能让用户看着更舒服。主色调、配色、和补色的运用都要提前心里有数。平时再多看一些优秀的专题设计作品,分析一下别人的配色。这样做出来的页面比以前的效果好很多。

金沙7868com 36

正面案例:颜色明快、主题突出。

小结

画面层次关系

金沙7868com 37

金沙7868com 38

金沙7868com 39

金沙7868com 40

这张海报其实更接近于咱们生活中的实景拍摄,而且是那种有明显对焦主体,毫无疑问是图中拿着竹竿的美女。那这时,虽然前景的花草离我们更近,但是因为它们偏离我们的对焦点(我们的视线并没有直接去看这些花草),所以,这时候前景的花草我们也是去做模糊处理的,甚至有的时候模糊度比远处的场景还要明显。这个是需要了解的。那我们再看下海报中的虚实关系在网页中的应用。

在以前的工作中,我每天也会接到不同的设计需求,一般都是根据UE或文档开始堆素材,只是根据自己的审美把页面做得好看。造成的结果就是视觉关系混乱,重点不明确,传达信息不到位。

画面的层次感,说白了其实就是画面的内容有主次之分,有空间感和距离感,有虚实之分,光影层次清晰,这样的画面才起来才真实、丰富,而且通过一些特殊的处理手法,可以进一步拉开画面中不同元素的层次,使得主体更加突出。(因本部分的讲解不涉及到色彩方面的知识,为了更便于大家观察,所以对海报进行了去色处理)

做设计不是搞艺术,设计的目的是准确的传达信息给目标用户。接到一个需求后,第一步我们应该做什么呢?下面分享一下我的工作思路,首先考虑这个页面要表达什么,要达到什么目的。然后看看UE结构能不能明确表达这个问题,有什么可以优化的地方,什么样的素材更能突出这个出题,板式、色调、字体。。。在心里有一个初步的设想,这时候从重要程度做一个排序。我想这样做至少可以保证做出的成品可以达到需求目的,逻辑和层次是清晰的。

金沙7868com 41

通过大量集中的页面设计工作,半年中我也取得了一些进步。比如颜色、形式感、细节处理上,比之前有所提高。

冷暖对比

画面整体氛围

上左图中按箭头所示方向依次由实到虚变化,满足正常情况下近实远虚的道理,层次感很强;在上右图中,实景和远处的虚景想必大家都可以理解,但为什么离我们最近的下方的人也是虚的呢?我们看下下面这张图可能更容易理解。

金沙7868com 42

金沙7868com 43

在制作细节上有所提高。优点:字体设计完成度高,较满意。缺点:专题现代感太强,和游戏的背景有所冲突。

那么氛围关系运用到网页设计当中如下:

>养成良好的工作习惯

金沙7868com 44

有时候我们习惯了策划同学提供的UE图,只是把UE线稿图形化。我也经常重复着这样的工作,后来发现效果不好。因为作为设计师,在画面结构和形象思维方面应该有更多的想象空间,毕竟页面设计是在设计师手中完成的,设计师自己更了解什么样的形式更能增加画面的表现力。当然这些要建立在对需求充分的了解上,所以我觉得在和策划同学充分沟通的前提下,按照自己的思路对UE搞做调整是非常可行的。以下是我在工作中遇到的一些例子:

丰富的海报创意不仅可以抓人眼球,而且可以很巧妙地表达出主题。大到整体的形式,小到文字或素材的细节处理,都是可以学习并且运用到网页设计中的。

刀剑英雄官网换肤。配合决战落雁谷版本,背景采用中国传统的山峰云雾,色调运用纯度较低的暗金色,试图营造出决战前夕的感觉。标题用中国水墨艺术字结合溅血效果。人物部分叠加动感模糊和光效,主题色块用了暗红色增强战争感。

金沙7868com 45

金沙7868com 46

金沙7868com 47

思路的转变

这里通过对原画的再次处理,加强了画面的对比度,进一步加强了冷暖对比,对距离远近不同的人物也通过模糊、调色、添加烟雾及火光等素材进行了层次上的进一步区分,同时添加了下雨及火炮等氛围元素。页面的部分内容元素相对于人物做了一个前后的处理,使得页面整体的层次得到了进一步的加强。

>设计技巧上的提高

金沙7868com 48

经过思考,看了一些淘宝天猫的电商页面,对UE结构作出调整。用红色斜条做背景增强页面的动感,主要按钮配合也作成斜的,说明文字挪到了标题下方,增强可读性。色调延续暗影之剑红白色系,可以点击的按钮都用了黄色加以突出。

金沙7868com 49

金沙7868com 50

形式创新

金沙7868com 51

金沙7868com 52

标题字体设计

金沙7868com 53

网页设计是一个动手动脑相结合的职业,工作中有苦也有乐。我相信只要平时认真工作、勤于思考、善于总结,每个人都会有所进步。有时翻过头来看看一年或者半年前的作品,觉得那时候做的怎么那么差啊,大家肯定都有这种体会。这是一件好事,说明我们在不断的进步、成长。在做出一件自己满意的作品时,也会有成就感。当掌握了所有的设计技巧和理论后就能做出完美的设计作品吗?我想也不是,设计还需要创造和灵感。可能设计的终极技巧就是对生活的观察、体验和感悟。

金沙7868com 54

字体设计比以前更加自然,比划穿插和谐。

画面的色调,是传达画面所要表达情感的有效途径。不同的色调可以给人带来不同的体验,正是因为有了不同的色彩,才使得我们的设计更加丰富。

上两图中按箭头所示方向由近及远,画面纵深感强,远近景层次明显,画面感很强。运用到网页设计当中如下:

图1通过烟雾来拉开女主与远处机器人的层次,烟雾既弱化了远处机器人,同时突出了女主,让两者有一个明显的层级关系;图2中人物本身颜色较暗,背景也是暗色,这时候如果直接把人物置入,人物就会与背景融为一体,这里利用人为添加的光效、碎片等氛围元素,凸显了人物的边缘轮廓,背光的效果使人物从黑暗中分离出来;图3也是同理,只不过它通过光影和烟雾一起来区分众多人物之间的层次关系。

我们主要通过层次、色调和创意三个方面来跟大家进行讲解。

大家在浏览网页时经常可以看优秀的海报设计,这些设计往往可以通过其优秀的颜色处理、场景打造、氛围渲染、排版布局、文字处理以及巧妙的创意等方面来抓住浏览者的眼球。那么今天我们就跟大家分享一下一些优秀的海报设计在网页中的应用。

金沙7868com 55

金沙7868com 56

金沙7868com 57

上面几个例子中,为了更进一步的融入大环境中,设计师都对原始素材进行了色调上的二次处理,整个网页的风格在色调上保持统一。

远近关系

金沙7868com 58

通过上面的例子可以看出,冷暖的对比在网页的场景打造过程中,可以用来很好的表现对抗和战斗方面的主题,另外,整个冷调的场景中适当加入些暖调,也可以起到突出主体的作用。

通过上面的例子可以看出,把握好画面中的虚实层次,结合网页的内容,可以使页面看起来更加接近真实场景,视觉体验上来说更加逼真。

金沙7868com 59

金沙7868com 60

氛围关系

文字烘托

金沙7868com 61

通过上面的例子可以看出,远近层次清晰的画面,搭配上网页中的内容,可以使页面看起来更加透气,在浏览内容的同时,也能够通过场景传递出很强的代入感。

金沙7868com 62

  1. 实例

上左图对中间的复联英雄进行了类似剪影的处理,而右图则对人物的边缘进行了颗粒化的处理,运用到网页设计当中如下:

虚实关系

金沙7868com 63

金沙7868com 64

本文由金沙7868com发布于摄影专区,转载请注明出处:畅游VC设计师入职半年后的工作经验总结,详细解

关键词: