叛道武士官方网站

话说回来，搞这个《叛道武士》的官网，一开始就是自己手痒，加上之前有个甲方老是说我的设计太“彩色”，不够沉稳。我当时就想，行，那我就搞个黑白的给你看看，什么叫他妈的高级感。

那段时间，我正好迷上了这个游戏。画面那个味儿，完全是老电影的调调。我就拍板了，要用这个风格来练手，给自己整一个拿得出手的案例，免得以后面试老是被问“有没有自己的作品”。

第一步：抄感觉，定基调

我上来就抓住了几个关键点：黑白、胶片颗粒、武士刀的凌厉。这网站就得是水墨画那种感觉。我翻了一堆素材，把游戏里的海报、截图都扒拉下来。字体挑了半天，3敲定一个笔画粗犷的日系风格，看着就稳得住。

• 色彩：全黑白，一点彩色都不要，顶多用点偏红的棕色点缀。
• 布局：不搞花里胡哨，中间大图，上下导航，简单粗暴。

小编温馨提醒：本站只提供游戏介绍，下载游戏请前往89游戏主站，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区



• 动效：加一点点老电影的闪烁颗粒，看着跟电影放映机似的。

第二步：动手干，遇到坎

写代码是真不难，难的是怎么把那个“意境”搞出来。我定下了用最基础的HTML和CSS，没打算上任何框架，就想看看纯手工能搓出个什么样。大白天的，我把屏幕亮度调到最低，逼着自己沉浸到黑白世界里去。

最大的坎儿，就是那个电影颗粒感。一开始我尝试用图片叠加，太死板。然后转用CSS的滤镜，又差点意思。3琢磨出一个笨办法：做一张小的黑白噪点图，用CSS的背景属性平铺，然后设置一个很低的透明度，再让它慢慢地、极其缓慢地移动。那个感觉，一下子就起来了！

对了，说到这个网站，我记得刚开始搞的时候，正好是我丈母娘做大寿。我人在现场，心却在代码上。寿宴上大家觥筹交错，我抱着电脑猫在角落里，手里扒拉着代码，时不时瞄一眼饭桌，生怕错过了红包。那天晚上，寿宴散场，亲戚都走了，我还在那盯着屏幕。我老婆看我那样子，摇了摇头，说我这个人真的是魔怔了。

不过也正是那股子魔怔劲，让我把那些原本觉得麻烦的细节，比如菜单栏的悬停效果，做得比平时细致了三倍。每个菜单项移上去，不是简单的变个色，而是模拟武士拔刀那种瞬间的黑色闪光，一闪而过，那个感觉贼带劲。

第三步：收尾，上战场

等我把所有的页面——故事介绍、人物立绘、背景音乐——全都堆砌并且在不同手机和电脑上都瞧了一遍，没发现大的毛病，我才松了口气。整个过程花了四个晚上。虽然只是个静态网站，但那个黑白的水墨杀气，真是被我给整出来了。

后来那个爱挑刺的甲方看到这个案例，话都少了，直接说“这个感觉对了”。虽然项目还是没谈成，但这个网站现在还躺着我本地文件夹里，时不时拿出来晒晒太阳，证明我这个人，不光会搞花里胡哨，也能把最内敛的东西玩明白。