在 APP 的日常運營中，我們設計的同學經常會接到主題活動類的設計需求，其中活動頭像框就是一個主要的類型。

主題頭像框能滿足用戶的個性化需求，可以充當活動獎品，提高用戶對活動的參與積極性，也有著一定的活動推廣作用。

那么對于大部分手繪能力并不突出的 UI 設計師，怎樣能在短期內利用素材制作活動主題的頭像框呢？本期文章我將結合以往我做過的主題頭像框，給大家講解我的思路與方法。

相關干貨：

一、素材分析與制作思路

在需求開始前，我們一定要和需求方做好溝通，確定好需求方的想法與要求，提出自己對于元素、顏色、質感等元素大致思路，避免大改。

這里舉例用一張 AI 素材做一個頭像框，主題是冬天雪景，給用戶帶來冬天的感覺，那我們便可以圍繞這點分析這張素材和提取可用元素。

首先是色調的分析，整個 kv 色調以藍白色為主，亮暗分明，上方天空融入五彩的極光，有很好的豐富整體色調的作用，我們可以大致上直接按這種布局給框體配色。同時下方的積雪也可以做冬季的點題，可以加在頭像框底部，剛好之前設想的底部深藍色也能很好的襯出積雪輪廓。

再就是一些裝襯元素的選取，例如空中的飄雪、人物身上的裝飾等，又或者一些圖案紋理、特效等，都可以用來豐富頭像框，一般我會傾向找一些偏三角形的元素去搭配圓形的框體來做一個方圓結合

二、框體的制作

框體制作上首先是框體粗細不宜過細，要記住頭像框始終是應用在界面上很小的一個元素，框體太細會壓不住元素導致整體看上去很散亂，同時看上去也不夠份量，而且框體的內圈最好略微小于頭像（下圖紅色區域），讓框體與頭像產生一些重疊

接下來我們可以用顏色漸變與色塊模糊給框體做亮暗豐富體積，還可以試著添加一點特殊結構，增加趣味性

可以看到框體完整度看起來差不多了，接下來我們可以去疊一些半透明紋理，清晰度不需要太高

最后根據具體情況再做下調整，這里想要給框體增加一些發光的感覺，于是添加了一層白色描邊做高光，以及模糊化的藍色外發光

對比后可以看到框體看上去更晶瑩閃耀，而且更有質感了

三、元素的使用

首先需注意點是元素的大小與位置，所有元素盡量避免相同大小，我們可以以優先級去給每組元素做大小排序，例如標題>ip>配角>其他

然后元素的擺放位置與朝向也可以去做呼應，讓元素之間產生互動感，例如圖中生物望向小人，小人望向標題等，這么做也能讓整體看起來更整體和諧

還有一個元素擺放方法，我們可以復制框體的外圈做蒙版，然后選擇一些元素置入，例如下圖中的積雪、云朵和黑色星球。這么做也是為了豐富整體層次，讓元素與框體產生聯系

最后我們可以給元素添加投影，投影只需要鋪在框體上即可，否則一些半透明模糊化的像素會超出畫板的尺寸，所以我們可以最后確定好所有內容后，再以整個頭像框區域為蒙版做這一步

總結一下，以上做的每個步驟都是為了元素豐富同時更好地融入框體，讓頭像框有整體性，還有很多方法可以繼續優化，但這里就不再贅述了。

四、AI 工具的結合

有時候我們拿到的素材沒什么可用之處時，我們可以用 AI 去煉制元素。目前在 SD 上有模型可以直接煉制整個頭像框，但效果并不是特別好，所以我更推薦大家用 AI 生成元素去做拼貼。

基本的 AI 煉制方法相信大家都會了，這里我們需要強調下畫風的提示詞，以及記得加上 black background，方便摳圖。

后續就是結合上面元素使用的思路去做即可，這里放兩個古風向的頭像框，可以看到 AI 元素的應用效果還是挺不錯的。AI

OK 這期教程就到這里啦，希望對大家有所幫助，歡迎在評論區提出不同的見解

歡迎關注作者微信公眾號：「ASAK」