這是「iPad 輕設計」系列的第二篇文章。首先,它是輕量的,不是一個專業設計教程,本教程適合那些沒有設計經驗又渴望設計出賞心悅目內容的普通人。

據說我的上一篇 iPad 設計課 反響不錯,說實話我也不知道好不好,我就只把自己的所感所想寫出來,至於你怎麼看待、怎麼運用我只能說就像照鏡子。

之前的文章是靜態圖片,這次講講動態內容。這篇本質上應該不是一篇教你怎樣操作的文章,而是教你在有限的選項中怎麼掙脫束縛實現一些有高級感的效果。本文製作出來的素材可以輸出 4K,完全可以當作素材插入到自媒體的剪輯當中。

我個人是不太喜歡做視頻類的創作,因爲我一直覺得一方面相比於網絡上大多數個人創作的視頻,圖片反而更有力量,另一方面圖片要做到極致可能更容易,而視頻的極致是電影,數字技術層面的極致是 CGI 特效,然而視頻最大的精髓還不在於圖像,而在於故事,一個人想高標準地實現這兩點幾乎是徒勞無功的。但是我也看到現在視頻自媒體的崛起,粉絲回報大,可能也有一定的受衆,其中也許蘊藏着大量草根創作者,這篇文章就是獻給你們的,讓你們的想法能實現、被看見,稍微提升一點你們的視頻質量,是與你們一樣草根的我寫這個系列的初衷。

本文僅分享一些簡單而基礎的效果,大家可以發散思維,在這些基礎上做出更豐富更有創意的效果。所以我不是很想講解技術和整個流程,我更多的是分享移動端創作的一些思路,怎樣在有限的選項中實現無限的創意,我想這也是移動端創作的有趣之處。

接下來就講講我、一個不是攝影師,更不是設計師的三線城市網管,沒有任何正規培訓,嘗試着用 iPad 這種非專業工具,做出一些具有高級感的動態效果。

溫馨提示:

  • 本教程不詳解 App 功能,需要用戶自己去簡單熟悉一下 App(移動端 App 都容易上手)。
  • 全文用到的 App 其實就三款左右,既有手機端,也都適配了 iPad(推薦,利用 iPad 的大屏更得心應手)。這次也不講複雜的,我更希望用幾個簡單的操作,實現高逼格的效果,大多數效果掏出手機就可以立即做出來,所以小白們完全可以放心食用。
  • 本文主要涉及動態效果。
  • 所有圖片後期製作全程採用 iOS 設備。本文依然是手機客戶端閱讀更美觀哦!

解構:如何實現高級感

先略微講講我個人的分析,爲什麼有些視頻的片頭能一秒抓住觀衆的眼球?有些視頻靠的是講故事,有些則是視覺效果。而視覺效果中的高級感很大程度上與以下兩點有關(不僅適用於視頻,也適用在圖片和攝影):

純淨度

我們生活的世界是一個混亂的大載體,空氣中夾雜着灰塵、光線的漫反射會讓物體呈現的影像有些「髒」,而人類心理有一種本能的、嚮往純潔的訴求,這就好像我們希望皮膚潔白無瑕,希望生活的空間一塵不染。而塑造一個真空無塵的環境,常常會滿足人的這一心理。

然而現實世界的純淨是脆弱、稍縱即逝的,不過網絡視頻本身作爲一個數字化的內容,不會因爲時間而褪色變質,並且可以通過數字化實現模擬和超越現實的「無中生有」和「理想化」,所以數字影像可以達成我們在古代無法達成某種視覺享受:眼前的白是真的白!這也是爲什麼許多產品廣告都不用實物拍攝。

陌生感

純淨是製造陌生感的其中一種,和新鮮感類似。無論如何,如果拿起手機就拍,直播式的視頻被上傳後,若是內容也平淡無奇,那麼就會被視而不見;如果內容優秀但製作粗糙也很難讓人看下去,而製造陌生感往往能讓你的視頻先聲奪人。

那麼製造陌生感的精髓在於「使得形式變得困難,增加感覺的難度和時間的長度,因爲感覺的過程本身就是審美目的,必須設法延長」,所以形式上幾乎覆蓋任何層面,可以是變幻的時空,抑或是違反物理法則……只要讓人感到新鮮,都是值得嘗試的。

另外像平滑的運動也是製造陌生感的關鍵。

以下介紹的一些樣例都是基於以上觀點來設計的。

擬態動畫

由於 iPad 的桌面級軟件較少,3D 渲染類軟件較少,這裏我就介紹一種巧妙的方法制作動態的擬態按下按鈕效果。

Keynote 可以是普通人入門動畫的捷徑,一般人都知道 Keynote 是用來做 PPT 的神器,但不知道其實它還可以做一些基礎動畫效果,而且非常實用!

首先按照之前文章中的方法 製作一張凸起的擬態圖,這裏就不贅述了。再製作一張內凹的擬態圖。有兩種效果可以嘗試,具體方法如下:

第一種比較簡單,這種看上去像是按鈕被按壓後形成一個均勻的弧形,我這裏是用Pixelmator:

首先新建一個和前一張凸起的擬態圖相同分辨率的空白圖片,將顏色調到適合的灰色(不要純白,也不要太暗)。

插入前面那張凸起的擬態圖。

依照這張圖中的圓角矩形(非外圈陰影和亮面)大小一致、位置一致的圓角矩形,注意這裏是指中間那個清晰的圓角矩形,然後隱藏凸起的擬態圖圖層。

選擇「工具 - 格式 - 樣式 - 漸變」,將左側的色塊設置爲比背景略深的灰色,右側的色塊設置爲純白,角度設置爲 45° 左右。

第二種,這種看上去像是按壓下去後中間區域是平整的,有按鈕的塑形效果:

首先依照上文的步驟新建一個和前一張凸起的擬態圖相同分辨率的空白圖片,將顏色調到適合的灰色。

插入凸起的擬態圖,依照這張圖中圓角矩形(包含外圈陰影和亮面)做一個剛好覆蓋外圈陰影和亮面的、大小一致、位置一致的圓角矩形,注意這裏不是指那個內圈的圓角矩形。對齊的方法可以通過隱藏圖層和降低透明度來實現。

按照上文的方法選擇「工具 - 格式 - 樣式 - 漸變」,將左側的色塊設置爲比背景略深的灰色,右側的色塊設置爲純白,角度設置爲 45° 左右。

然後在內圈再添加一個圓角矩形,大小大致是凸起擬態圖中間清晰的圓角矩形略小一點,之所以要略小一點,是考慮到按壓後視距變長成像變小。

顏色設置爲畫面背景的灰色。

然後選擇「工具 - 添加效果 - 模糊」,設置合適的模糊程度,此時效果就出來了。

然後是實現按鈕被按下的動態效果,最簡單但也是最關鍵的一步:打開 Keynote,建立一個和圖片一樣分辨率的文檔,按照從上到下:「凸起 - 凹陷 - 凸起」的順序安排圖層。

長按對象,選擇「動畫效果 - 添加構件消失」,將最上面一層和中間一層圖片的動畫效果都選擇爲「漸隱」,持續時間設爲 0.6 秒,這裏太長或太短都可能會略有違和感,然後導出視頻或動圖就可以了。

Keynote 蘋果味動畫

極簡設計動畫

下面來一個有點考驗耐心的動畫。前幾年蘋果發佈會上的一則回顧視頻讓這種風格火了一把,要做的蘋果視頻裏一模一樣 Keynote 應該是不可能,所以我們就做一個片段。

這個效果的製作受 B 站 UP 主 @費德里克 Federico 啓發,在他的作品基礎上改進。複製可能意義不大,我將 Keynote 製作中的一些重點手法和靈感講解一下。

1. 打開閃光

這段視頻中手錶和 iPhone 表面的反光效果增加了高級感,要實現其實也很簡單,「漸變和縮放」裏就有這個選項,注意的是裏面有個「打開閃光」選項。

有個注意點是:如果要實現手錶表面的整面的反光效果,需要將所有表面元素設置成組。

2. 指針的運動

首先一根指針是由多個部件組成的,注意要將各部件建設置成組。

長按對象,選擇「動畫效果 - 添加動作 - 旋轉」。

然後旋轉的角度設置爲 90°,順時針,將指針軸心移動到重合處。

點一下運動路徑上的任意一個方塊,此時中間就會出現一個實心方塊,點一下就變成了空心方塊,即創建了一個路徑點;然後點一下它會出現一個菜單,點其中的「製作平滑點」,方塊變成了圓點,這個代表運動路徑可以變成弧線。

然後向外側拉動,可以看到直線變成了弧線。那麼指針的就會繞着軸心旋轉了。

3. 神奇移動的妙用

一開始使用 Keynote 我還沒發現,僅僅將「神奇移動」用作對象的移動,但其實神奇移動是可以變形的,當然只有 App 內建的形狀才能實現這一點。

因爲這個視頻中第三部分是 iPhone,我邊做邊想,是不是能把 iPhone 的圓角矩形收縮成字母「i」的下方的矩形,在神奇移動的第二頁將 iPhone 4 的輪廓收縮變形成與對象重疊,這樣就有一個比較不錯的銜接效果。

點擊左邊欄需要將其作爲開頭的幻燈片,點擊「添加動作」,在菜單中選擇「神奇移動」,會跳出是否需要複製幻燈片的提示,點「複製」後在下一張幻燈片裏修改即可。

然後將 iPhone 4 的圓角改成直角,並且縮放大小和比例,並移動位置,這樣就完成了,機器會自動補充銜接的動畫。

你仔細觀察前面 Apple Watch 到 Apple TV 的銜接,會發現實際上顏色也是可以過渡的。

其他樣例:

綠幕動畫(配合色度工具)

這個效果在許多蘋果廣告裏都有看過,感覺很高大上,其實實現起來非常簡單。

Keynote 先製作一個「向右移動 + 神奇移動」,向左移動很簡單,神奇移動則需要你在第二頁裏將 iPad 拉到屏幕佔滿整個畫面,看過前面的教程應該都會做這一步,這裏我就不贅述了。

拍攝綠幕爲背景的視頻,綠幕儘量選擇沒有反光和摺痕的材質,拍攝出的視頻可以摳得更乾淨,但是像我這個是需要表現屏幕,我想了一下還是用電腦屏幕作爲綠幕背景更符合環境光效,於是我下載了了一張純綠的圖片進行拍攝。

如果家裏沒有綠色幕布,也可以選用其他純色幕布,只要和主體顏色區分開即可。然後用Videoleap 這個 App 的「色度」工具同樣可以摳除背景。

iMovie中選擇需要被添加的視頻後出現的菜單中選擇「…」,然後選擇「綠 / 藍屏」,視頻即添加到上層。

視頻右上角可以調整摳圖強度,我的經驗是前期拍攝一般都存在各種各樣的光線問題,這個功能還是很有必要的。

像這個例子中點亮截屏效果的實現,無非是做兩張黑色(下)和截屏(上)的帶殼截屏重疊一致,然後利用「出現」動畫即可。

最後,iMovie 中的綠幕軌道注意掐準時間在手指點落的時間點對準屏幕點亮的時間點。

其它樣例:

特殊效果的實現

靠運動中的物體轉場,這個也是非常常見的製造陌生感的手法,Keynote 實現橫刷出文字很容易,但是要實現旋轉刷出文字相當困難,這就要看你如何巧用 Keynote 了。

主要由三步驟組成:

第一步,筆前面旋轉 45° 左右,畫面過渡到純白背景。用到的還是上文的「神奇移動」。

第二步,筆繼續旋轉 120°,此時文字被筆的邊緣刷出。第二步的遮罩很關鍵,也是最難弄的部分。以下改爲灰色背景來講解更直觀:

首先將兩段文字放置在筆的圖層之下,並置於筆旋轉結束時分別橫跨筆的兩側,注意這裏以筆爲分割線,你可以用任意工具將超出到筆對面的字體部分抹去。

由於背景爲白色,添加兩個白色色塊(扇形)在適當位置並將其與 Apple Pencil 圖片設置成組。爲什麼是扇形?因爲扇形跟着筆旋轉,在上半部分運動可以遮擋住筆左側的文字,運動到下半部分又不至於擋住筆的右側文字。

然後加兩個適合大小的白色矩形(圖中加陰影部分),高度剛好超過文字,「動畫效果 - 添加動作 - 運動路徑」,運動軌跡大約是分別向外側平移,需要多試幾次以確定合適的運動距離和速度。另外注意,以上兩步對象的動畫效果都設置爲與構件(筆)一起開始。

這個沒有固定套路,需要根據實際情況一點點摸索。如果你仔細看會發現,我做出來的實際上有瑕疵:並沒有完全遮住。如果有更好的方法請在評論區告訴我。

最後,文字進一步移動到構圖平衡的位置,這裏用到的是「動畫效果 - 添加動作 - 運動路徑」。

更簡單的樣例:

巧用 SceneShot App

去年在 Mac 平臺出現了一款叫Design Camera 的軟件,實質上是高度自動化的 3D 模板帶殼截屏,可以生成運動立體的帶殼截屏視頻,但是比較可惜在用戶更多的 iOS 平臺卻沒有這樣的軟件。

近期這款叫SceneShot 的App填補了這一空白,它可能是目前帶殼截屏類App中最高級的了,它提供 3D 模版供你調整,並可以定製背景和環境光線,甚至還有特效濾鏡等等功能。

不過,雖然背景可以替換成任何你想要的,甚至於它還支持視頻背景,但是考慮到剪輯需要踩點,直接將視頻導入背景可能不好掌控時機,然後我想到了另一種方法,既然 SceneShot 可以隨意更換背景,爲什麼不直接利用 iMovie 的綠幕功能呢?

首先將背景調成一個比較接近電影綠幕的綠色。

由於這個 App 存在一些設計上的問題和限制,需要我們巧用它,在運動軌跡上,本來是想讓整個運動在畫面中心,但是設置開始幀和結束幀之後,這個 App 的動畫有一個奇怪的翻轉動作(不太好形容,有這個 App 可以親自嘗試一下),所以我就見機行事,讓手機從左側緩緩拉遠至畫面中心,效果依然很有張力。

另外要記得把界面左上角的「Smooth」開啓,運動更爲平滑自然。

最後以「綠 / 藍屏」的方式導入iMovie進行編輯,將綠幕強度調到合適,基本就完成了。

背景的動畫我是用 iPad 上的 Keynote 做的,很簡單的「跟蹤」效果,這裏就不贅述了。其中在結尾處字體背景簡化成純黑白還用到了 iMovie 的轉場特效(疊化)

其他樣例:

Canva

最後來個輕鬆的。

之前介紹過的 Canva ,最近剛更新了視頻製作功能。我玩了一下,可能是手握大量版權並且母公司來自澳洲的緣故,視頻素材的質量非常高,而且非商用幾乎全部免費。

隨手做的視頻,也是用來製作本文封面的免費素材

不過 Canva 的視頻素材入口藏得比較深,放在了設計界面的左側。由於操作實在傻瓜,這裏就不用我教大家上手了,如果你連本文都不想看,那不妨試試它吧。

總結

最近看到越來越多的設計類自動化工具,可能某種程度上,過去那些需要較高學習成本的工作都可以輕鬆實現,並且精度也越來越接近手動,移動平臺如果不出意外,大有在民間取代傳統個人電腦的趨勢,也讓越來越多的普通人蔘與到設計和攝影當中。

對於藝術創作來說,它變得更混亂了,而這對於許多人來說既是福祉,也是考驗。

最後糾正一下我上篇文章的一句話「設計的核心是創意」,實際上我思考了一下以後覺得設計的核心可能是功能。

下一篇迴歸圖片製作,講講怎麼用 iPad 做這些:

> 下載少數派客戶端、關注 少數派公衆號,第一時間獲取 Apple 資訊 :newspaper:

> 買 iPad、Mac 送 AirPods, 蘋果新學期優惠活動開始了 :computer:

相關文章