這是「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 做這些:
,