分享重點:
1. 製作流程建議
2. 畫布尺寸設定建議
3. 圖案排版/設計要點分享
4. 翻譯一下官方難以理解的LINE製作準則(詳細版)
5. 軟體只會用到Procreate
6. 這邊主要會以我個人習慣同時比較單純的做法分享
7. 細節太多,因此每個製作區域都會寫成獨立文章
---------------------------------------
前情提要:
1. 主要參考 LINE製作準則(詳細版):仔細閱讀完後列印(製作過程中會需來回確認規範,
個人認為紙本翻閱速度較快、省力)
2. 官方要求製作區域:
A.主要圖片
B.選單按鍵圖片
C.選單背景圖片
D.密碼畫面圖片
E.個人圖片
F.聊天室背景圖片
3. 我的製作順序:
F-A-B-C-D-E
基本上聊天背景就是主視覺,可以定調整體顏色
和風格,因此我會先製作聊天室背景,其他部分可以拿他去改就好。接下會用我的製作順序依序在個別
文章中介紹製作細節,這篇首先是聊天室背景圖片
---------------------------------------
以下正文:
F.聊天室背景圖片:
● 畫布尺寸設定注意:
雖然官方說:畫布尺寸介於最大最小值之間都
可以使用,但這只是因為這些畫布都「放的下」,
並沒有說可以「填滿」聊天室。太小的畫布反而會在大尺寸裝置上出現白邊(請看圖三失敗版本)
所以:
開最大畫布畫圖最保險(綠框區域為最大畫布)
因為最大畫布可以滿足大部分不同的螢幕大小。
大螢幕被可以滿足,不會有螢幕太大但畫布
太小的問題=白邊問題
(因為不管裝置的螢幕多大都不會比最大畫布大)
也不會有螢幕太小但畫布太大的問題
(因為我們開的尺寸在規定的範圍內)
比較有問題的是聊天室背景圖上的主體被切割,
圖案變得不完整,但這跟畫布大小沒有關係,
跟主體在畫布上繪製的大小及擺放位置有關,
請看以下示意圖與說明:

iOS畫布設定及排版:
1. 先開最大尺寸W 1482px × H 1334px畫布
2. 並把主體(不能被裁切掉、要完整顯現的圖案,
如上圖:蝴蝶、英文字和上下菱形格)
保持在W 1482px × H 1334px畫布中央的
W 640px × H 1334px內!
Android畫布設定及排版:
1. 先開最大尺寸W 1300px × H 1300px畫布
2. Android系統中,聊天室背景圖片會從綠色箭頭上方=「裝置的螢幕底部」開始放
( iOS系統:聊天室背景圖片會從綠色箭頭上方
=「輸入欄上方」開始放)
所以在Android系統中,聊天室背景的底部會有一部分被輸入欄遮住
3.要完整呈現圖案的話,簡單來說就是下面要墊高:
主體畫在畫布中央W 640px × 輸入欄上方
(當然整體高度還是要控制在 1300px)
例:圖二的黑色底就是我用來墊高主體的增高墊
iOS和Android圖案排版建議:
我建議畫主體集中且靠下的圖(雖然我上方有主體)
上方有主體的風險是:
如果用戶的裝置比較短,上方的圖案可能就會被切到
(目前在ios上看起來是沒有被裁切的情況)
而如果是圖案集中在中央的下方那就一定不會有被
截掉的風險。
快速總結:
1. 開最大畫布
2. 注意 iOS和Android系統的聊天室背景圖片位置
3. 主體位置尺寸確認
4. 可以的話,盡量在範圍內做集中靠下的主體
做到以上四點,用戶基本上不會有主體被切割,
或是聊天室背景圖片沒有滿版的問題出現
-----------------------
● 整體設計/顏色注意:
1. 圖案不要花俏、細碎、繁雜
2. 顏色不要太飽和
3. 若有文字,要調低濃度,或是增加點模糊處理
我知道畫面豐富、顏色繽紛真的很漂亮,但還是要以訊息閱讀起來舒服為主;參考圖三失敗版本
-----------------------
● 檔案容量注意:
1. 檔案大小不能超過1MB
若肥大,先刪掉不必要圖層,還是超過的話請壓縮
壓縮網站連結:-----------------------
● 預覽圖注意:
1. 個人覺得看預覽圖不準。
2. LINE的預覽圖偏寬且短和手機長且窄的螢幕不同,
因此在預覽圖可能會沒辦法完整呈現所設計的內容。
3. 但只要確保畫布尺寸及主體位置正確,即使預覽圖看起來尺寸不對,也絕對不是你的問題。
-----------------------
● 其他相關資訊:
1. 其他製作區域會在另外的文章分享
2. 根據官方,創作者自己還是需要花錢購買上架主題
,我花錢買了自己的主題才知道有瑕疵
3. 在其他製作區域的文章出來前,只能先讓大家看看圖片了。希望大家也能順利完成最難的關卡
非常期待大家跟我分享你們的成果和想法呀,有遇到什麼困難我們可以一起討論看看呦ლ(∘◕‵ƹ′◕ლ)
