Noir Noir SHIH's profile

《五行貓膳》貓罐包裝、角色設計、字體設計、排版、網頁插畫全記錄

日前接下了一個有趣的案子,是為罐頭做角色設計與包裝設計,過去的繪製經驗中,畫了大量的貓咪圖庫書,也設計過《郭元益》與《烘烘甜點》禮盒包裝,沒想到這次的案子是結合兩者的混合技!繪製過程實在是太有趣了,於是寫了一份心得筆記與大家分享。

透過友人介紹,我得到了這次的設計機會,客戶想為即將新上市的新款貓罐頭打造全新包裝,並在今年八月份正式募資。客戶公司是由世界獸醫師會會長所創辦,產品也是由專業的獸醫師團隊精心規劃,包括許多貓貓狗狗的專業營養補充品。

和我接洽的客戶本身也是獸醫師,聽著他們講產品的優勢與實在用料,我心裡一直默默覺得當貓真好⋯⋯身為一位貓奴,對於罐頭內容物心動不已,畫起來更有Fu。
角色設計

本次要為產品設計一隻貓,客戶希望是有點搞笑、賤賤的感覺,於是我看著我家肥貓睡癱的臉,隨手畫下這三款⋯⋯,再配上貓界流行三款紋樣,於是長成了這個樣子:
五行貓膳角色設計第一版
這三款看起來爛爛弱弱的,我當然沒交出去!再度詢問了客戶想要讓這隻貓做什麼動作,一問之下不得了了,為了表達食材符合「五行」概念,且對貓身有良好功效,這隻貓必須做點瑜伽姿勢和暢通腸道的意象(放屁的意思),勢必走向擬人化之路,於是寫實的「貓型」不符需求,砍掉重練。
五行貓膳角色設計第二版
最後客戶選了2號設計,確定好角色造型與簡單的顏色之後開始完稿,上完色之後看起來更加呆萌!搭配各種姿勢可愛加分,姿勢也有經過溝通調整,配合貓罐機能,設計出了放屁(暢通腸道)、瑜伽(關節與心血管)、喝飲料(腎臟與泌尿道)、頭好壯壯(活力與肝臟)、冥想(免疫力與呼吸道)五款姿勢,感覺上好像可以再延伸做成貼圖了!
字體設計

「五行貓膳」這四個字給人一種中式感,但我個人偏見覺得中式的東西太過沈重,準備貓皇要吃的膳食雖然要帶著尊敬的心,但一切都要以可愛至上!於是設計了兩款字體,一個比較圓潤,另一個有點像書法又有點作拙拙歪歪的樣子,讓客戶選擇。

兩款不同覺的字體設計
延伸出來的其他字樣
最後客戶選擇了書法手寫字體,正合我意!趁著感覺還沒消失,趕緊繪製其他要用的字!從小大到寫字一直不是我的強項,甚至還被老師說字醜,但換個方向思考,把寫字想成在畫圖,感覺就很不一樣了!
罐頭包裝設計

我本身是位貓奴,平日在購買主子膳食時,也會看看包裝是不是夠水準,那些俗不可耐的一率淘汰(我就是這麼的外貌派),但如果只有包裝炫目,內容成分標示不清且沒什麼營養,華而不實的也不及格。考慮到很多之後,我就開始上網找資料。

角色設計出來之後,我想設計出一款符合角色呆萌感的包裝。由於角色的上色風格屬於卡通、扁平感,罐頭設計也必須貼合這種感覺。這回的設計條件是:80g的扁形貓罐,客戶已經提出需要五種顏色各代表不同的口味,且必須設計「五行貓膳」這四個標準字。

依照客戶要求,我先選定了五個顏色,為了凸顯主角,這五個顏色不能夠太過飽和,彩度、明度篇高的色彩是我選擇的重點。接著畫幾張草稿,把需要放的文字資訊排列上去,做食物的包裝一定要把成分標示清楚,消費者才能安心!我盡可能地把文字都排得很簡單,為了能更讓人一目了然特色成分,再額外將文字圖像化,排列在主角兩旁。設計到這裡,我突發奇想,想加上一些手繪感的材質,來符合「嚴選食材」、「達人挑選」的感覺,於是在整個設計的最底層,畫了很多有點粗粗的手感材質,即便是白色系列的包裝也都能看到!

先選出了五個顏色
客戶希望放上去的文字量相當多,不過罐頭環標本身長寬卻只有23.9c1.09公分而已啊!於是乎字就沒辦法放太大了⋯⋯取捨之下,消費者最在意的營養成分一定要大大的,其他資料就只求肉眼可辨別即可。最後請欣賞一下完成品。
完成的貓罐合成圖。黃罐:腸胃道、毛球控制。紅罐:關節、心血管。綠罐:肝臟、活力。紫罐:腎臟、泌尿道。白罐:免疫、呼吸道。

募資網頁插畫

產品的前置作業做得差不多之後,就開始要準備銷售頁了,很幸運的,又是我負責網頁的插畫,這算是我比較擅長的主場。客戶選擇了「嘖嘖」平台進行募資,於是我開始參考此平台上的寵物食品募資案,並試圖在其中找到一 些突破點。

「五行貓膳」的設計方向是算比較俏皮可愛的,本身有一隻呆萌貓,配上各式對身體有益的蔬果成分,主打年輕族群,朝這個風格繼續設計,繪製出別於其他主打高級尊貴、色調沈穩或者有沒有插畫趣味的設計。
嘖嘖募資首頁圖
剛開始繪製了草稿,如同剛剛提到的設計理念,做了簡單清楚的編排。截圖嘖嘖任一頁面,將草圖合成上去,我合成了主視覺頁、分類頁、募資內容頁,在繪製過程中,我挑選鮮豔活潑的橙黃色作為整個頁面的主打色,希望營造一股與理念吻合的活氣年輕氣氛!
草圖,和完稿沒什麼差異
繪製內容也和客戶討論過,針對忙碌的現代人會遇到的困境,以及養貓人的生活,轉化為插圖更讓人一目瞭然。

.左圖:每天都好忙碌,想好好照顧貓咪卻力不從心⋯⋯。這張重點放在右後方的怨念貓,眼神絕對要夠不爽,彷彿在說著:「奴才你到底在幹麻?沒看見我餓著了嗎⋯⋯」

.中圖:網路資訊太雜亂,努力做功課還是一頭霧水⋯⋯。如同字面上的意思,將所有流言蜚語都畫出來。

.右圖:精心為貓咪準備各類保健品,貓咪卻一點也不領情⋯⋯。這我想是很多貓奴的痛吧!如同玩具一樣,花大錢購買了一堆炫目的玩具,你家主子可能只鍾意你的拖鞋或一個破紙箱,說到底你才是他的玩物!食物又何嘗不是如此呢(苦笑)?這隻呆萌貓的姿態,宛如坐在龍椅上的太上皇,翹著腳跟你說:「這東西進不了我的口!」
於是乎經過獸醫師調配的營養配方「五行貓膳」解決了以上種種的窘境,主子吃得開心,奴才才能放心!這圖主角當然是呆萌貓津津有味的樣子,因為他被設計的手腳靈活,所以可以使用湯匙。奴才也能在後頭樂得輕鬆!橘色色塊內寫了罐罐的厲害之處,再加上一行草寫的標語 ” Happy cats happy life! “ 所言不假!
結合羅馬勇士與黃金比例圖
這張圖其實是客戶要求的內容,為了符合「五行」概念,強調此系列能夠顧及到喵喵的五臟六腑功能,且具有保護力,所以結合了拿著盾牌的羅馬勇士與達芬奇的黃金比例圖。是不是看起來很勇健的樣子呢?最一開始的設定還真的要畫一隻貓的內臟圖呢⋯⋯

「貓主子飲食健檢表」排版
前文有提到,這款貓罐罐是由專業的獸醫師為貓咪量身打造,貼心的他們專門設計了這款「貓主子飲食健檢表」的星海羅盤,貓奴們可以依照上面指示的步驟,轉動羅盤輸入貓皇體重,進而得知自己長期奉養的主子是否過重或過輕,當然,像我家主子的肥胖程度已經不需要什麼羅盤就能輕易從肉眼判斷,但胖也要胖的有尊嚴!接下來漫漫長的貓生,至少要知道怎麼控制才不能再更胖下去吧!

知道數據是有必要的!

這份羅盤的設計初衷是相當好的,不過,介面實在讓人有看沒有懂呢⋯⋯於是乎,我針對整個使用步驟重新設計了一番,就變成這個樣子:
羅盤設計後(輸出稿)
對第一次接觸的使用者來說,知道每一步驟要做什麼很重要吧!所以我將步驟1、2、3、4放到最大,使用者只要跟著步驟,把框框內的數字轉到貓主子的體重,就可以得知理想體重了!另外還有建議攝取卡路里數量,建議喝水C.C.數等等(以前一直以為多喝水最棒,居然不是這樣⋯⋯)

設計過程中,當然也是會遇到一些困難,例如:客戶已經將羅盤大致架構都做好了,包括字體大小以及打洞的位置,所以我在設計的時候,是不能變更打洞位置的,這也是為什麼有些地方沒辦法對齊⋯⋯,有些洞擠在一起,有些則分得很開,這會是一個很需要挑戰的地方!

為什麼洞不能換位置?
在羅盤下方還有另一張讓使用者轉動的紙,是這羅盤的精髓所在,裡面有密密麻麻的數字,關乎到貓主子的測驗出來的所有數據,如果要變更打洞位置,勢必會牽涉到最原始的遊戲設計,那就要回朔到最源頭去了呢⋯⋯所以,我在不變更任何原始設計的條件下努力生出了這款排版。

由於目前我還沒達到實體,所以只能以設計稿呈現,之後有照片會再進行更新。


結語

很少有機會這麼完整地將接案過程寫下來,也很感謝廠商同意分享~根據一個說法,養貓人身邊必定有數個養貓人,而且很多喜愛設計、藝術、插畫的人都會養貓!我曾經算過,插畫家養「黑白貓」的機率相當高!(無聊的觀察)。於是我向廠商爭取了:暖暖粉絲優惠8.8折499元(原價567元),限量200組,如果你恰巧也養了貓,不妨看看我設計的罐罐實體與羅盤,順邊當一個稱職的貓奴吧!​​​​​​​
Thank you!
If you like my works please follow me on social media

如果你喜歡中文閱讀,也歡迎訂閱我的《暖暖包》電子報

《五行貓膳》貓罐包裝、角色設計、字體設計、排版、網頁插畫全記錄
Published:

《五行貓膳》貓罐包裝、角色設計、字體設計、排版、網頁插畫全記錄

Published: