位置:设计主页 > 网站制作 > 前端开发 >

聊聊那些让网站页面更加出彩的小细节(2)

来源:畅游VC 作者:畅游VC 时间:2014-11-07 09:00

下面我们来看一个关于对场景进行一些与游戏主题相呼应的处理的例子。

这是一个游戏的官网,受内容的限制,场景的打造上不像普通专题那么灵活。这里的背景打造用了并不复杂的手法,但是为了呼应游戏激烈热血打斗的风格,设计师在处理的时候给导航的hover效果、banner的边缘处及内容区的部分边缘都做了切割碎片的效果,而且banner的背景也不是通常的矩形,而是下面斜切了一部分,使整体画面动感十足。

还有,在页面底部,设计师还做了一块面积不大的斜三角,与上面呼应这些都是细节的体现。在游戏网站中利用圆、方、三角打造网页框架的方法非常流行,想学习的同学来优设网搜腾讯美女设计师+空格+惊喜就可以看到咯。

你说如果没有这些细节,页面就不行了么。不是,只是缺了这些细节,页面好像就缺了那么几分打斗感。

类似的处理形式我们也可以看看下面这个例子。

相信大家从圈圈的标识应该也能看出来了,喷溅(血迹)效果几乎被应用到了上图的所有元素中,背景的血滴、人物边缘的处理形式、导航条以及切换标签几乎无一例外。

二、文字效果

关于文字效果这块内容,这里主要从字形处理和字效处理两个方面来进行描述。我们来看一些相关的例子:

上图中设计师就是通过结合页面主题对字形做了变形处理,使字体看起来较为锋利且充满战斗感。有的朋友可能会说自己在文字变形这块能力较弱,如果是这样的话大家可以尝试在某一种字体的基础上去进行微变形,如上图通过把文字转化为形状后,给字形增加一些尖角,或者一些刀子的形状,这些如果大家自己多去尝试都还是不算困难的。在效果方面,给字体整体加上了火光,尤其在“火”字的上面加上了一束火焰,使字的整体效果与主题更加贴切。

这个呢用的是比较常用的书法体啦,主要是为了跟游戏的logo质感贴近。这里有一点可取得细节之处就是设计师为了与血染苍穹的主题相匹配,特意给文字加上了溅血的效果,看起来是不是有点杀戮的赶脚啊。

这个例子呢字形上我就不多说了,这里主要讲解的一个细节的地方呢是文字旁边的一堆娃娃,有木有赶脚本来就挺Q挺萌的字体加上这些捣蛋鬼之后,更加生动了呢?

这个跟上面的那个有相同点哦,这边也请了娃娃过来,只是不太温顺,拿大斧子砍字,而且这里设计师还给字做了砍出碎片的感觉,更加生动形象了。这里还有个细节不知道大家注意到没,这里的主标题的字都通过一笔拉丝连接起来了,注意看下面的三个圈。是吧,这些小细节,以后用在自己的作品里,别说是我说的啊!

这个处理手法比较简单,把每个字分离出来,分别做效果,造成一个字压着一个字的赶脚,层次感立马就出现了。这种手法可能平时不太容易想到,但是用过一次也许你就上瘾了。

压轴的出场!这种形式在游戏页面中的出镜率还是蛮高的,把文字放在主体的后面,来拉开层次。这里要注意的是最好文字左右两边的数量能相同,这样能保持平衡啊。另外这里也是对文字做了切割效果,大家有木有发现凡是跟战斗扯上关系的,用切割碎片神马的最贴切了(毛笔字除外)。这个方法很实用,别说我没告诉你啊!