全文 2200 字，預(yù)計(jì)閱讀時(shí)間 6 分鐘 |
文末免費(fèi)領(lǐng)取賽博朋克靈感包 |
————————
最近有沒有經(jīng)常聽說賽博朋克這個(gè)詞？
隨著攻殼機(jī)動(dòng)隊(duì)、銀翼殺手、戰(zhàn)斗天使：****阿麗塔、頭號(hào)玩家等一眾電影的上映，賽博朋克在近兩年逐漸火熱。
今天圍繞賽博朋克，我們聊聊：
1、什么是賽博朋克
2、賽博朋克風(fēng)圖片的特點(diǎn)
3、制作賽博朋克風(fēng)圖片
4、超簡(jiǎn)單的故障風(fēng)制作
5、福利
————————
01
- 什么是賽博朋克 -
我從維基百科中找到以下信息
賽博朋克（Cyberpunk）是“控制論”（Cybernetics）與“朋克”（Punk）的結(jié)合詞，為科幻故事的分支之一。其背景大都建立于“高等科技與低端生活的結(jié)合”（combination of lowlife andhigh tech），通常擁有先進(jìn)的科學(xué)技術(shù)，再以一定程度崩壞的社會(huì)結(jié)構(gòu)做對(duì)比；其情節(jié)經(jīng)常關(guān)于，社會(huì)秩序受到政府或財(cái)團(tuán)或暗中勢(shì)力的高度控制，而角色利用其中的漏洞做出了某種突破。
賽博朋克的常見元素大致有以下幾類
· 黑客（Hacker）
· 數(shù)位空間（信息空間）（Cyberspace）
· 虛擬現(xiàn)實(shí)（Virtual reality）
· 人工智能（ArtificialIntelligence）
· 控制論（Cybernetics）與仿生人（Androids）
· 半機(jī)器人（Cyborg）
· 都市擴(kuò)張（Urban Expansion）與貧民窟（Ghetto）
· 反英雄（Anti-Hero）
· 大型企業(yè)（Mega Enterprise）
· 基因工程（Genetic Engineering）
· 人類增強(qiáng)（Human Augmentation）
· 生物工程（Bio-engineering）
· 恐怖主義（特別是計(jì)算機(jī)恐怖）（Terrorism）
這些從電影中都可以看到：
- 戰(zhàn)斗天使阿麗塔
- 攻殼機(jī)動(dòng)隊(duì)
- 銀翼殺手
賽博朋克還有一個(gè)很重要的元素，是廢墟。
賽博朋克起源于上世紀(jì)80年代的美國(guó)，彼時(shí)，蘇聯(lián)尚未解體，正是美蘇爭(zhēng)霸最白熱化的時(shí)刻。整個(gè)美國(guó)都籠罩在蘇聯(lián)核威脅的鐵幕下。對(duì)戰(zhàn)爭(zhēng)強(qiáng)烈的不安，反映在了賽博朋克世界中。
對(duì)抗、廢墟，至今都還是賽博朋克影視作品的核心要素，美好的城市下掩藏著破敗的廢墟，廢土之上的年輕人為了自由而戰(zhàn)，這個(gè)透露出強(qiáng)烈反烏托邦色彩的世界，就是賽博朋克。
————————
02
- 賽博朋克風(fēng)圖片的特點(diǎn) -
與影視作品不同，在靜態(tài)設(shè)計(jì)中，無論是平面設(shè)計(jì)還是3D設(shè)計(jì)，都無法像視頻一樣承載大量信息，賽博朋克風(fēng)的圖片和電影有著不小的差別。
賽博朋克最具代表的元素是就是都市、機(jī)械化科技。賽博朋克的都市離不開霓虹。
通過對(duì)上千張圖片的瀏覽，幾乎所有的作品都圍繞著這5個(gè)關(guān)鍵因素進(jìn)行體現(xiàn)：
1、灰暗的背景色調(diào)，以藍(lán)紫等色調(diào)最為常見
2、現(xiàn)代化的都市
3、鮮艷的霓虹燈
4、人類（機(jī)械人、仿生人）
5、高科技機(jī)械單位（無人機(jī)、飛行汽車）
總的來說，后現(xiàn)代工業(yè)科技和低生活這條主線，貫穿始終。
節(jié)選的幾張最具代表性的作品。
<figcaption class="" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; letter-spacing: 1.5px;">
by：Sergii Golotovskiy
<figcaption class="" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;">
by：XuTeng Pan
</figcaption>
<figcaption class="" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;">
by：Artur Sadlos
</figcaption>
</figcaption>
<figcaption class="" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; letter-spacing: 1.5px;">
by：Vitaliy Art
</figcaption>
<figcaption class="" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; letter-spacing: 1.5px;">
by：Daniel Liang
</figcaption>
————————
03
- 制作賽博朋克風(fēng)圖片 -
有了要素，就到操作時(shí)間了。借用behance一位大佬的過程圖來舉個(gè)栗子：
第一步，找到合適的背景素材；
第二步，添加更豐富的城市/大樓模型素材；
第三步，添加細(xì)節(jié)，霓虹光效；
還有些作品會(huì)加上人和機(jī)械等，再進(jìn)行調(diào)色、添加濾鏡。
by：Chris Bjerre & Chris Bjerre
除了圖像，你還可以對(duì)一些字體元素進(jìn)行加工，像這樣
by：R▲
by：賽博朋克2077
無論是金屬化、機(jī)械化的風(fēng)格，還是常見的科幻字風(fēng)格，對(duì)賽博朋克來說都是百搭。如果能在效果中加上故障風(fēng)，整個(gè)風(fēng)格，這很賽博朋克。
————————
04
- 超簡(jiǎn)單的故障風(fēng)制作 -
故障風(fēng)，起源于賽博朋克，制作簡(jiǎn)單、視效突出的特點(diǎn)，讓故障風(fēng)廣受歡迎。
這張寡姐的攻殼機(jī)動(dòng)隊(duì)海報(bào)，是我認(rèn)為故障風(fēng)最為經(jīng)典的平面作品之一。這幅海報(bào)不僅效果爆炸，更是第一次大范圍將故障風(fēng)帶入了主流審美的視線內(nèi)。
那么，如何制作一張故障風(fēng)圖片？
傳統(tǒng)的故障風(fēng)圖片制作方法，是通過對(duì)圖片的錯(cuò)位、色彩重疊等操作，通過線條或者色塊的疊加，造成拉伸、扭曲、甚至抖動(dòng)等視覺效果。
這是我們的設(shè)計(jì)師嘉文隨手做出的效果。
除了傳統(tǒng)工具，故障風(fēng)還可以更簡(jiǎn)單！
PHOTOMOSH
這是 **Airtight Interactive Inc. **團(tuán)隊(duì)開發(fā)的一個(gè) web 小工具，可以快速對(duì)圖像添加特殊特效，比如，故障。
網(wǎng)址先抄下來：
photomosh.com
輸入網(wǎng)址，進(jìn)入工具首頁
點(diǎn)擊 Load File ，加載本地文件。
或者直接拖拽文件到頁面上直接完成加載。
點(diǎn)擊底部 MOSH ，可以一鍵隨機(jī)特效。
右側(cè)控件欄自由調(diào)整，簡(jiǎn)單的故障風(fēng)，只要記住“抖動(dòng)”這個(gè)特效就OK辣。
————————
05
- 福利 -
為了研究賽博朋克，我花了近一周時(shí)間搜集各類資料，瀏覽了上千幅賽博朋克風(fēng)格的作品，幾乎翻遍了全球各大設(shè)計(jì)類網(wǎng)站，包括 Behance、Pinterest等。
我將質(zhì)量較高的，或?qū)ξ耶a(chǎn)生較大啟發(fā)的圖片整合為“賽博朋克”設(shè)計(jì)靈感包，其中不只有完整作品，還有更為珍貴的過程稿。
隨便挑選幾張給你們看一下：
而這樣的圖片一共有** 466 張**。
——————————
我將這些資料都打包整合給你——后臺(tái)回復(fù)「賽博朋克」即可領(lǐng)取。
- 如果想要更多靈感，悄悄地說，我們的香港和日本東京這兩座城市，總能給予設(shè)計(jì)師們足夠的賽博朋克靈感。
