自製 Facebook 大頭貼特效框 — 「不再恐同當機彩球限時動態」
5月17日,是個讓台灣成為亞洲第一個通過同婚專法國家的日子。同時也是「國際不再恐同日」(International Day against Homophobia, Transphobia, and Biphobia,簡稱IDAHOT)以及將同志從「精神疾病」中除名的日子。
一、故事背景
昨晚半夜回到家後,又敲著電腦不小心睡著了;中午醒來後關了燈,還有點想睡但還是喚醒了 剛買的 MacBook Air 螢幕,看到許多設計圈等同溫層的朋友,在青島東路上群集打卡,也有不少人分享了議場的現場直播。
我想起了中學時期遭到同學霸凌的回憶,以及女友生病後受到歧視的體驗,我雖然是異性戀,但仍在想能做點什麼,曾經閱讀過面對納粹,表以沈默代價的故事:
二次世界大戰以後,德國宗教領袖牧師馬丁.尼莫拉(Martin Niemoller 1892–1984)為了讓世人記住納粹屠殺猶太人這一血腥恥辱,在波士頓樹起了一塊紀念碑,碑上銘刻這樣一段話——
當納粹黨來抓共產黨的時候,我沒有站出來為他們說話,因為我不是共產黨;
當納粹黨來抓猶太人的時候,我沒有站出來為他們說話,因為我不是猶太人;
當納粹黨來抓工會的人的時候,我沒有站出來為他們說話,因為我不是工會的人;
當納粹黨來抓天主教徒的時候,我沒有站出來為他們說話,因為我是基督徒,不是天主教徒;
當納粹黨來抓我的時候,已經沒有人站出來為我說話,因為他們都被抓走了。
二、設計概念
在 UI (User Interface)設計裡頭,只要有會員中心、平台功能,大多都有需要使用者登入的情境,其中 Avatars (大頭貼、頭像)代表的是每一位使用者,通常會是需自行上傳喜歡的照片並進行裁切。
我們每天用的 Facebook 與 Instagram 也是,然後發展到現在,Story (限時動態)也成為注目的焦點,使用者可以更輕鬆地上傳生活當下的情境,像是美食或旅遊照,我們可以更即時地在網路上分享個人的生活。
同時,限時動態也意味著 24 小時候就會自動刪除的系統設定,我想運用這點,來紀念 5/17 這個充滿意義的日子;於是想將常見的特效框彩虹旗 (LGBT) 融入。
但目前大多數的特效框都含有濾鏡,這其實會破壞不少人修好的照片,有一些些可惜。於是我結合了限時動態的外框,把這個精神貫注進去。
再來看一下 Facebook 與 Instagram 的限時動態會長的像是這樣子的:
在這個配色部分,我想再加入一些巧思,我想以 MacOS 的系統彩球來傳達經過遊行、抗議與公投等行動之後,相關法律以及觀念終於得到疏通,不再卡頓當機。
三、製作教學
我們可以在 Adobe Xd 上用鋼筆工具與布林繪圖功能,來製作仿 MacOS 當機時會彈出來的彩球,然後用剪裁遮色片功能將中間挖空,然後再用圓形工具加上白色外框。
因為 Facebook 特效框的機制是疊加圖層在原本的照片上,因是我們這邊要再把 Artboard 背景改成透明的。
然後,輸出 (Export)成 .png 的圖片。
四、上傳 Facebook 特效框
然後,我們到開啟以下連結,開始製作:
https://www.facebook.com/frames
五、使用情境
後記
以上就是這次做 Facebook 特效框的流程囉,現在直接選擇更換也可以找到我的這組「不再恐同當機彩球限時動態」!
如果這篇文章對你有幫助,可以幫忙拍一下手👏🏻👏🏻 並發摟我的 Medium 林育正 Riven。
相關合作聯繫或有任何想法,都可以透過我的 Facebook 聯繫,如果不介意看一些廢文的話,也歡迎追蹤 😃
Adobe Xd 學習型社群與資源
如果在軟體操作或有其他 UI/UX 相關問題,可以加入我們的社團「Adobe Xd Taiwan User Group 台灣交流社群」發文討論交流🥳
若是對 UI 設計有發展興趣的朋友,也可以參考我與 YOTTA 合作的線上課程 《Adobe Xd設計實務|成為UI設計師的8項核心技能》完整學習。