G_3


想製作個性獨特的主題卻不知道怎麼做嗎?
看完主題製作準則還是黑人問號霧煞煞嗎?
跟著小編一步一腳印,製作主題就跟一塊蛋糕一樣簡單!

相關內容貼心小整理,

原創市集帳號申辦流程教學製作準則簡單版製作準則詳細版
如果你懶人體質滿表,直接Follow以下正文吧!

進到主題前,你必須先有一個強而有力的夥伴——Photoshop
再來,有了魚竿還必須要有誘餌,模板傳送門點我下載*,難度瞬間少一半 
解壓縮打開資料夾後,請打開“creators_theme_template.psd”檔案
並顯示所有圖層,尤其是第一個“guide”圖層喔。  
  
H

環境系統都設定好後,我們正式進到主題   
首先,盤點 LINE 原創市集所要求的內容,包含:

螢幕快照 2020-05-13 下午6.14.43
雖然要求的數量看起來很多,但其實是 Android 和 iOS 系統不同的緣故,
所以實際上只需要一半的力氣 
接下來,就請你一邊使用我們提供的“creators_theme_template”,
一邊看著說明和小編一起完成主題創作吧~

主要圖片(3張)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
需準備三種尺寸的圖檔,分別使用在 iOS 系統、 Android 系統以及 LINE Store上。
建議圖案距離邊框有20%餘白,在視覺上較佳。
背景圖片不可去背,請務必製作未去背的圖片。

a


選單按鍵圖片(32張 = iOS 16張 + Android 16張)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
選單按鍵圖片將顯示在此處
選單

要提醒的是依國家不同,所顯示的選單也有所不同,因此請準備「好友」、「主頁」、「聊天」、「貼文串」、「通話」、「TODAY」、「其他」及「錢包」共 8 組選單圖片,並根據功能 OFF 或 ON 設計不同圖案。
請依照藍色輔助線,每一張圖片必須有約 10px 左右的留白。

B_1
iOS系統選單範例
B_2
Android系統選單範例

選單背景圖片(2張 = iOS 1張 + Android 1張
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

選單背景可選擇自行製作或由系統顏色排版中挑選使用,
因選單背景較為複雜,若選擇自行製作此部分,請注意以下說明

 iOS 系統(圖片大小:101〜150px 之間)
圖片 H 0~100px 範圍處請勿去背(101~150px的範圍則可去背),
另由於背景圖片將會重複顯示,請進行調整使左右兩端的圖樣可自然銜接。
 Android 系統(圖片大小: H 112px × W 640px)

由於背景圖片將會重複顯示,請調整圖片使兩端的圖樣可自然銜接,
在部分Android裝置上,背景無法去背**。
在 iOS 與 Android 系統上,圖片請均靠左顯示

為圖片去背時,去背的部份有可能顯示為黑色。請務必再三確認無誤再進行申請。 
   
c_1
iOS系統選單範例:圖案高130px,去背部分高20px。
c_2
Android系統選單範例

密碼畫面圖片(16張 = iOS 8張 + Android 8張
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

位密碼欄位可使用同一圖片或使用 4 種圖片顯示,
每組密碼欄位
各需設計 OFF 和 ON 的圖樣。
請依照藍色輔助線,每一張圖片必須有約 10px 左右的留白。

D
左半為 iOS 系統示範;右半為 Android 系統示範

個人及群組圖片(4張 = iOS 2張 + Android 2張
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

請設計未裁切的方形圖檔,但注意最終呈現是圓形,因此可根據 “guide” 圖層提示的紅色區塊做調整。
 
E
左半為 iOS 系統示範;右半為 Android 系統示範

聊天室背景圖片(2張 = iOS 1張 + Android 1張
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

聊天室背景圖片可選擇自行製作或由系統顏色排版中挑選使用。
圖片尺寸請介於 min 及 max 之間,區間內可選擇任意大小製作,
圖樣可選擇去背或未去背,若為前者,插圖將以圖層方式顯示於所選之顏色排版的基本背景上。
插圖的位置必須維持在中央下方位置,但請注意不同系統呈現方式有異(見下圖)。

 iOS 系統
max:W 1482px x H 1334px;min:W 60px x H 60px
※縱向使用時的顯示尺寸為W 640px x H 1334px。

 Android 系統
max:W 1300px x H 1300px;min:W 60px x H 60px

F
左半為 iOS 系統示範:圖樣從訊息輸入欄位上方開始顯示;右半為 Android 系統示範:底端圖樣與訊息輸入欄位重疊,因此設計時請考量輸入欄位的高度(100px左右)。

*聊天室背景色
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

💡注意!此部分為新增的功能唷
在部分螢幕裝置上因尺寸較大緣故,聊天室背景圖片可能會缺少上半部而露出顏色排版,為避免背景圖片看似缺損,建議採用指定背景色配合顏色排版製作去背的背景圖片之方法避開問題產生,如以下圖示說明。

螢幕快照 2020-05-13 下午6.31.02

這項新增的設定項目,讓創作者們可以為聊天室背景圖片搭配顏色排版之顏色,並使其在部分大螢幕裝置上呈現更完整自然的主題畫面。

設定的方法為上傳完圖片壓縮檔後,於顏色排版分頁中的「指定背景色」處,勾選欲指定的項目(聊天室畫面/啟動畫面),可透過色碼或滴管指定顏色,接著透過預覽畫面進行確認後儲存。

螢幕快照 2020-05-14 上午9.59.03

指定背景色的色層將優先顯示於顏色排版之上。
若登錄適用全螢幕尺寸的背景圖片,有可能無法預覽您指定的背景色。

啟動畫面圖片(1+1張)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

此部分包含 1 張背景及 1 張Logo+插圖(去背),前者將套用於整個介面;
後者請將Logo放置於指定區塊內,並將插圖放於中央。


G_3
此範例背景為粉色方形以及LOGO和插圖(即右圖紅色框框內圖片)。

*啟動畫面背景色
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

同樣的在部分大尺寸螢幕的裝置上,須留意有可能缺少上半部,因此建議可採取其中一種方法:指定背景色配合顏色排版其設定方法與聊天室背景色相同。

螢幕快照 2020-05-14 上午10.35.29


到這邊就已經邁向成功了呀!!最後來個圈叉自我檢查~
ox

如果每個步驟都做對了,
恭喜恭喜距離申請完成不遠了
一起製作主題,讓自己的 LINE 介面換裝吧!

___________________________________________________________________
*LINE官方主題模板
此檔案是使用Adobe PhotoshopCC 2017所製作,
若您是使用Photoshop CS6 或更舊版本,將無法相容,敬請見諒。

**選單背景重要通知
在低於LINE 9.6.0的版本中,Android的背景圖片無法去背。
由於系統設定的緣故,LINE 9.6.0以上版本的選單背景圖片將套用iOS的圖片,且背景圖片將去背。
然而,販售所需的相關圖片檔案規格仍與以往相同。
※由於系統設定的緣故,在部分Android裝置上,圖片兩端可能會出現邊線,或無法完整顯示。
主題的預覽畫面可能與實際顯示畫面不同

___________________________________________________________________

▼掌握第一手原創貼圖資訊! 
「LINE 原創市集」官方帳號 (LINE ID: @linecmtw)
a0b34488-s
  好友人數 

「LINE 貼圖」粉絲團