网页设计技巧:追剧如何学会网页设计

很多朋友喜欢看外国电视剧时,英剧美剧都会接触到,但如果大家有细心地留意英美剧的片头设计,会发现这些设计真的令人叹为观止。每套剧的开头,就像电影海报一样深深地吸引着观众,让人瞬间就走进剧集所创造的世界。

但大家有没有想过,其实从英剧美剧中同样学习到网页设计的手法,尤其是有关banner设计。想知道如何「追个剧也可以学会网页设计」,跟着南宁网页集团一起了解下!

EMMYS最佳片头设计奖

片头好与坏,不仅是抓住观众目光的关键,更是让关注对剧情产生想像,激起追剧的慾望。优秀片头设计,不仅是剧集的点睛之笔,更是价值非凡的设计学习素材。

以往片头只是将剧情中的片段简单地进行拼接,缺乏剧集的生命力,观众也因此直接忽略片头介绍。或许制片商逐渐发觉片头的重要性,片头也从简单的片段拼接,逐渐延伸到提取剧情的精华,利用各种呈现手法重新建模,让片头更加吸引,更具艺术感。

另一方面,由於日益精良的片头制作越来越受到观众的喜爱,主要针对影视剧集的EMMYS,将原本的「最佳平面设计奖」改为「最佳片头设计将」,并从1997年开始将其设置为常设奖项。本次文章,将从几部大家所熟知的英美剧片头进行拆解。虽然这些剧集并不全都是大奖得主,但各自都有其值得学习借鉴的地方。

一、动画篇

● 平面插画风——《The Durrells》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

作为一部慢调子的暖心治癒小品,清新复古的平面风插画搭配清爽的配色,用来制作《The Durrells》的片头就再适合不过。动画镜头的运用与精心设计的转场,完美地描绘出美丽的希腊风光与美好惬意的田园生活,和剧集自身一样,自愈力超强!

● 8bit像素风动画——《The IT Crowd》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《The IT Crowd》是一部可以媲美美剧《The Big Bang Theory》的英式喜剧。《The IT Crowd》的片头设计师使用8bit像素动画的形式,与它的剧情非常符合。无论是如电脑开机音乐般魔性的片头音乐,亦或是非常复古的8bit像素动画所展现的Geek相得益彰,彷佛将我们带入一个由虚拟数据组成的互联网世界。

● 复古拼贴风插画动画——《Mad Men》

讲述上世纪六十年代美国广告业黄金时代的年代剧《Mad Men》可谓是广告人的必看剧集,而且《Mad Men》更多次获得EMMYS最佳剧集,甚至在今年英国《卫报》的「21世纪100部最佳电视剧」中获得第3位。

网页设计技巧:追剧如何学会网页设计

网页设计技巧

片头动画一开始是主角Draper步入办公室後,原本身处一片光明的地方,四周开始出现崩塌,自己也坠落到高楼大厦林立的广告世界。设计师利用Draper坠落的镜头,暗喻Draper起起伏伏的人生历程,也可以理解为剧情发展每次都是由逐渐绝望到峰回路转的过程。而复古拼贴风格的动画以及充满想像力的场景设计,不仅符合「广告圈」追求创意的特点,也非常适合设计师去参考和借鉴。

● 剪纸插画风动画——《Feud: Bette and Joan》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《Feud: Bette and Joan》使用剪影插画的手法来做片头动画,十分便於展现(Bette 和Joan把对方当作一生之敌的女演员明争暗斗)的故事情节。此外《Feud: Bette and Joan》的剪影片头还隐喻了故事中不少耐人寻味的情节,如被资本黑手操控如牵线木偶般提起的两位女演员的剪影动画,隐喻「演员的命运从来都不是掌握在自己手中」;又如女演员将对方退下Hollywood的深渊,隐喻着娱乐圈中明争暗斗的情形。

● 水墨动画——《Marco Polo》

可能这部剧存在东西方文化理解上的差异,所以剧集评分并不高,并受到很多非议,但其美轮美奂的水墨动画片头却受到外界一致的好评。

网页设计技巧:追剧如何学会网页设计

网页设计技巧

片头动画以代表东方文化的水墨画作为视觉媒介,向观众展现出一幕幕让人震撼的场景,同时也将剧集中所讲述的贪婪、背叛、权谋竞争等利用水墨画一一呈现。悠扬激昂的片头音乐结合大气磅礴的泼墨动画,极具视觉美感。

● 2.5D风动画——《Silicon Valley》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《Silicon Valley》的动画片头设计是借用3D建模技术,制作的 2.5D风动画片头。看过这部剧的朋友可能会发现,这部剧每一季的片头里面暗藏着很多惊喜细节,如片头会出现某些企业的Logo或APP图标,状态与剧集上映时相对应。它们的命运和变化也会藏在片头当中,增加这部剧的真实性和戏剧性,同时,也增加了这部科技剧集的趣味性。

● 手稿与影像结合动画——《Da Vinci\\’s Demons》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《Da Vinci\\’s Demons》是结合达芬奇本人的手稿和剧集中的影像合而为一,制作成动画片头。虽然这部剧情饱受争议,奇幻构想与真实历史重合的片头,却获得非常一致的好评。

● 综合视觉动画——《Manhattan》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《Manhattan》的片头设计,巧妙地借用设计图纸、演算草稿、绝密档案等信息量,将故事背景和剧情巧妙地呈现出来。片头结尾使用人模仿原子呈现核裂变和原子弹爆炸的场景,隐喻上乘又高级且富有时代感,点题非常到位。

二、3D篇

● 冰冷的赛博朋克感——《Westworld》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《Westworld》不仅剧情细致考究,片头设计也毫不逊色。片头透过3D建模动态演示机器制造机械人的过程,模拟人的肢体结构等,都非常真实细致。片头结尾处隐晦地致敬了《攻壳机动队》中草薙素子诞生的场景,以赛博朋克风格,讲述「人与机器之间的关系」,在精神内核上产生了呼应。

● 强反差的胶片光影——《The Man in the High Castle》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

这部美剧的片头使用3D建模渲染,制作成老实胶片投影电影的光影效果。整个片头被细致渲染出原本应当成为战胜国的美国,被日德两个瓜分的过程。残酷的局面,配上经典柔美的《雪绒花》唱腔,形成强烈的对比,强化了紧张压抑的感觉。

● 奇幻的粒子特效——《His Dark Materials: The Golden Compass》

《His Dark Materials: The Golden Compass》是改编经典小说《His Dark Materials》三部曲的美剧,整部作品来自圣经和《失乐园》中的诸多隐喻,并混合着蒸汽朋克和奇幻元素。

网页设计技巧:追剧如何学会网页设计

网页设计技巧

其片头视觉设计也没有采用写实的设计,而是围绕「尘埃」大玩粒子特效,无论是人物角色、精灵,亦或是神秘的黄金罗盘,都使用粒子特效呈现,凸显作品中那股神秘的感觉。

● 迷离冷硬的科技感——《Fringe》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

谜团是《Fringe》最为核心的元素,而解密则是其剧集的主题,这在《Fringe》的片头中就有体现。片头没有任何一个角色出现,全都是奇异的符号,(包括每集的名字都会有相应的特殊符号)穿插在剧集的转场当中。如果你是侦探迷,就会发现整部剧集里面都隐藏着很多有趣的秘密。

● 哲学德味的视觉艺术——《Counterpart》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

这部剧的片头设计同样精妙而令人心醉,使用3D建模动画呈现,整体质感非常包豪斯,同时带有奇妙哲学思考和二元对立的思想属性。表现的介质就是我们非常熟悉的「围棋」,剧情诡谲的局面如同棋局,两个世界的人则彷佛是黑白棋子,泾渭分明,让观众一眼就get到其中隐喻。在视觉美学中,东西方文化属性又和谐地融为一体,非常精巧且协调。

三、现实篇

● 属於爱情的剪影——《Modern love》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《Modern love》除了拥有打动人心的剧情,它的片头同样让人印象深刻。一张张不同场合下的情侣们亲吻拥抱的照片,伴随着轻快的片头曲。这一切都与剧情所表达的宗旨非常一致。

● 古典优雅的玄机——《Downton Abbey》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

片头虽然并没有直接出现人物或剧情介绍,却运用一组长镜头将乔治五世时期英国上层贵族的精致生活一一呈现在我们眼前,伴随充满英伦风情的古典弦乐,彷佛暗喻着这看似宁静的城堡却暗藏玄机。而一个家族的兴衰成败也在这首主题曲中展现得淋漓尽致。

● 侦探的上帝视觉——《Sherlock》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

片头运用「移轴摄影」的手法将都市远景的宏观世界,逐渐移向显微镜下的微观世界结束,宛如查案中抽丝剥茧的侦办过程。各种案件相关线索片段与车水马龙的都市场景,都被蒙太奇处理,营造出符合侦探片的神秘感与喜剧感。

● 精致的成长嬗变——《Great Expectations》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

片头通过多个角度及大量局部特色,完整地呈现蝴蝶破茧成蝶的全过程,用意象电梯,表达出主人公成长蜕变的主题。片头的视觉设计充满优雅的气质与让人惊艳的美感,简单却极具视觉张力。

● 闪现的森冷与惊悚——《Mindhunter》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

片头主要画面以探员组装经典的开盘式录像机的过程,质感极强。为了渲染影片的惊悚悬疑的分为,画面不断闪现犯罪现场,配上略显诡谲的配乐,让人知道它的存在,却无法抓得住,这种感觉非常到位。

● 老照片里的惶然躁郁——《Homeland》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《Homeland》的片头透过晃动、翻转、负片甚至错位的视频效果,搭配低饱和度甚至黑白的画面,以及冷感的音乐,营造出极其强烈的不安感和疏离感,也隐喻着主人公起伏波动的精神状态,以及波谲云诡的剧情走向。

● 宏大叙事下的权谋诡计——《House of Cards》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《House of Cards》的片头剪辑素材大多是华盛顿街头的景象,加速播放的镜头,光影变化,暗示着白宫里的人不断变化,但这座建筑与政治斗争确实白宫里永远不变的东西。

此外,《House of Cards》的片头开始有更为清晰的时间感,从昂扬变为深沉,暗喻白宫的政治斗争即将开始,为阴谋设好舞台,给诡计一片天地,

● 推向极致的双重曝光——《True Detective》

网页设计技巧:追剧如何学会网页设计

网页设计技巧

《True Detective》借用大量的双重曝光的影响技术,将当前角色和场景重合、叠加,也将角色的情绪、精神和隐喻都藏在这些叠加的场景和姿态当中,悄无声息地呈现,以一种缓慢弥漫的氛围,坚定地包围每一个观者。

很多剧集的优秀片头设计给我们带来震撼的同时,也给我们带来不少设计灵感。而事实上很多设计灵感都是源自生活,因此各位设计师不妨从生活发掘美,创造更多设计灵感,给我们带来更多优秀的设计。

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/42845.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2022年6月25日 23:41
下一篇 2022年6月25日 23:41

相关推荐

  • 觉得搜索设计简单?看大厂如何把搜索功能玩出花。

    编者按:在搜索功能上,天花板级别的设计师还能玩出什么花样?本文梳理了众多大厂的搜索设计细节,一次性看个够!搜索的本质是什么?无疑是内容的召回和信息的推荐。可随着时代的发展和行业公司的内卷,不少公司...

    2023年3月2日 SEO操作
    02
  • 界面的动效需要呈现哪几点特徵?

    1、 响应:能够迅速、精确地对用户的操作行为进行响应。一般来说,移动端的界面设计大约是300-400ms,短的动画在150-200ms。 2、 自然:动效元素的设计需要通过对真实世界和物理规律的参考和模仿,无论是造型还是...

    2022年6月14日
    0132
  • 现今流行的极简网站案例之一

    黑白灰:禁欲主义 不可否认,合理的黑白灰使用是大气而难忘的,很轻易就呈现出质感。也就是很多页面设计师信手拈来的配色方案。但是就如今的扁平化火热程度,再盲目的使用黑白灰反而缺失了亮点。再者,不合理的运...

    2022年6月9日
    0152
  • 单选框设计是怎提升用户体验的?

      1、整个标签选项都可被用户点击:单选框虽然占据页面的尺寸并不多,但是局限也在这里,难以被用户点击。但现在最好的方式已经出现,能够被用户点击整个标签的选项。 2、单选框代替下拉的列表方式:很明显...

    2022年6月25日
    0122
  • 用一个公式,从3个方面教你搞定场景化设计。

    之前我们讲了用户画像,让大家可以通过构建用户画像,去深入了解用户的行为、态度、痛点和需求。(构建用户画像本身并不是目的,而是手段,用户画像可以让大家把前期的用户研究和洞察可视化,为之后的产品设计提...

    2023年3月2日 SEO操作
    02
  • 我来分享网页设计中怎么配色。

    对于刚开始学习制作网页的人来说,往往不容易驾驭好网页的颜色搭配。除了学习各种色彩理论和方法之外,多学习一些著名网站的用色方法,对于我们制作美丽的网页可以起到事半功倍的作用。总结了一些著名网站的颜色...

    2023年6月16日
    00
  • APP设计规则:关於APP界面设计的思路

    智能手机不仅已成为我们生活中的一部分,也在生活中的不同地方帮了我们很多。随着用户对APP的需求不断变化,设计师在界面设计上也提供很多新功能,以满足用户的需求,以及在使用过程中让用户更加愉悦满意。 但APP...

    2022年6月25日 建站资讯
    0439
  • 做网页设计如何给公司定位?

    大多数的公司在进行网页设计的过程当中,一定要综合实际情况来给公司定位,只有这样才能够制作出最适合公司的网站项目,才能够更好的做线上线下的运营推广,那么如何给一个公司设定好相关的定位,其实在这其中我...

    2019年9月21日
    0276

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息