พาดูขั้นตอนการทำธีมไลน์ ไม่มีไอแพดก็ทำได้ค่ะ ^^

 

สวัสดีค่ะเพื่อนๆ วันนี้เราจะมาพาดูขั้นตอนการทำธีมไลน์ขายบนไลน์กัน 
เราเห็นมีคนสอนทำธีมด้วยไอแพดและแอป Procreate มาเยอะแล้ว โพสต์นี้เราขอเจาะลึกไปที่คนที่อยากทำธีมไลน์ขายแต่ไม่มีไอแพดนะคะ 
(ที่จริงคนมีไอแพดก็อ่านได้ค่ะ แต่ขั้นตอนการปรับขนาดภาพแต่ละชนิดอาจจะต่างกันเล็กน้อย) 
ถ้าพร้อมแล้ว เรามาดูขั้นตอนต่างๆ กันเลยดีกว่าค่ะ ^^
 
เครื่องมือ/แอป และเว็บที่ต้องใช้
- ibispaint
- เว็บ Canva (เอาไว้ช่วยปรับขนาดและจัดระเบียบ)
--------------------
 
สำหรับการทำธีมไลน์ ก่อนอื่นเลยเราต้องศึกษารายละเอียดกันก่อนว่าจะต้องวาดภาพอะไรบ้าง เป็นจำนวนกี่ภาพ และแต่ละภาพมีขนาดกว้างxยาว เท่าไหร่ ซึ่งที่จริงทางเว็บไลน์ครีเอเตอร์ก็จะมีรายละเอียดไกด์ไลน์สำหรับการสร้างธีมไว้ให้อยู่แล้ว ซึ่งเราแนะนำให้อ่านนะคะ แต่เราก็เข้าใจดีว่าบางครั้งรายละเอียดตรงนี้ค่อนข้างเยอะ อาจจะทำให้เพื่อนๆ เกิดท้อ พากันถอดใจกันไปเสียก่อน มาค่ะ.. เราจะพยายามอธิบายทีละขั้นให้เข้าใจง่ายๆ กัน ^^
 
**หมายเหตุ: เราจะวาดทุกภาพด้วยแอป ibispaint ก่อน โดยตั้งขนาดหน้าแคนวาสที่ 1300 x 1300 พิกเซล และค่าความชัดเจน 300 DPI หลังจากนั้นเราค่อยเอาภาพเหล่านี้ไปปรับขนาดตามที่ไลน์กำหนดบนเว็บ CANVA ค่ะ
 
ขั้นแรก: คิดธีมไว้คร่าวๆ
ให้เพื่อนๆ คิดแบบคร่าวๆ ขึ้นมาก่อน โดยแบบดังกล่าวควรเป็นแบบง่ายๆ ที่สามารถนำมาต่อยอดในเรื่องขององค์ประกอบได้
ตัวอย่างเช่น แบบธีม "น้องหมีไปปิกนิก" เป็นต้น ซึ่งในธีมนี้เราอาจจะให้มีตัวเอกเป็นน้องหมีหนึ่งตัว และองค์ประกอบอื่นๆ อาจจะมีพวก ตะกร้าปิกนิก, แอปเปิ้ล, ขนมปัง, ขวดน้ำ, แซนวิช, กล้วย, ฯลฯ หรือธีม "สัตว์ทะเล" ก็อาจจะมีตัวเอกเป็น ปลาวาฬน่ารักๆ หนึ่งตัว และองค์ประกอบอื่นๆ อาจจะมี เต่าทะเล,  แมงกะพรุน, ปลาหมึกยักษ์, สาหร่าย, ฯลฯ เป็นต้น 
 
พอได้ธีมแล้ว ให้เราร่างแบบคร่าวๆ เตรียมไว้ก่อนค่ะ
 
ขั้นตอนที่สอง: สิ่งที่ต้องวาด
ขั้นตอนนี้ เรามาดูสิ่งที่ต้องวาดตามภาพด้านล่างกันค่ะ
 
 
 ตามภาพที่เห็นด้านบนคือภาพทั้งหมดที่เราต้องวาดค่ะ คือไอคอน 24 ภาพ, รูปหลัก 3 ภาพ, ฉากหลังเมนู 1 ภาพ, และฉากหลังห้องแชทอีก 2 ภาพ

 
ขั้นตอนที่ 3: วาดไอคอน
เรามาดูกันก่อนค่ะ ว่าจะต้องวาดไอคอนทั้งหมด 24 ภาพด้วยกันคืออะไรบ้าง ก็คือจะแบ่งออกเป็น เมนู 14 ภาพ, รหัสผ่าน 8 ภาพ, และโปรไฟล์ 2 ภาพ
 

 
3.1: เมนู 14 ภาพ
เราขออนุญาตใช้ภาพที่เราวาดเองมาเป็นตัวอย่างให้ดูจะได้เข้าใจง่ายๆ นะคะ เพื่อนๆ อาจจะคิดว่าเมนูตั้ง 14 ภาพ อาจจะฟังดูเยอะ  แต่ที่จริงแล้วไม่เยอะค่ะ เพราะเราจะวาดแค่ 7 ภาพก็พอ ให้ตั้งค่ากระดาษบน ibispaint ตามการตั้งค่าที่เรา "หมายเหตุ" เอาไว้ให้ด้านบน จากนั้นวาดทีละภาพจนครบ 7 ภาพ ส่วนอีก 7 ภาพที่เหลือ ให้เราเอาเจ้า 7 ภาพแรกที่วาดไว้แล้วมาแต่งเติมให้อลังการมากขึ้นอีกนิดตามตัวอย่างในภาพด้านล่างค่ะ ^^ พอวาดครบทั้ง 14 ภาพแล้ว ให้เซฟภาพทั้งหมดไว้ในโฟลเดอร์เดียวกัน ตั้งชื่อโฟลเดอร์ว่า "เมนู" ไว้ค่ะ จะได้ไม่งง 

 
พอได้ภาพทั้ง 14 ภาพเรียบร้อยแล้ว ให้เราไปที่เว็บ Canva แล้วทำตามขั้นตอนนี้ค่ะ:
1. ให้สร้างไฟล์ใหม่แล้วตั้งขนาดไฟล์ตามที่กำหนดในภาพ คือ 128 x 150 พิกเซล
2. ให้เราตั้งชื่อโปรเจกต์ว่า "เมนู" 
2. ให้เราอัปโหลดภาพเมนูทั้ง 14 ภาพ
3. จากนั้นให้นำภาพเหล่านั้นไปวางแคนวาสทีละภาพจนครบทั้ง 14 ภาพ ปรับขนาดภาพให้พอดีกับกรอบ
4. กดดาวน์โหลดภาพทั้งหมดลงเครื่องคอมของเราโดยตั้งค่าดาวน์โหลดเป็นไฟล์ PNG 
5. ไฟล์จะดาวน์โหลดลงเครื่องคอมเราในรูปแบบ Zip ไฟล์ โดยไฟล์จะมาเป็นชื่อที่เราตั้งไว้คือ "เมนู" ให้เราแตกไฟล์ออก 
** เท่านี้เราก็จะได้ไฟล์เมนูทั้งหมด 14 ภาพที่มีขนาดถูกต้องตามที่ไลน์กำหนดอยู่โฟลเดอร์เดียวกันพร้อมที่จะให้เพื่อนๆ นำไปอัปโหลดขึ้นระบบได้แล้วค่ะ
 
 
3.2: รหัสผ่าน 8 ภาพ
 
เช่นเดียวกันค่ะ รหัสผ่าน 8 ภาพ เราจะวาดจริงๆ แค่ 4 ภาพเท่านั้น ส่วนอีก 4 ภาพที่เหลือ ให้เราเอาสี่ภาพแรกที่วาดไว้มาลงสีทึบตามตัวอย่าง พอได้ครบทั้งแปดภาพแล้ว ให้เซฟภาพทั้งหมดไว้ในโฟลเดอร์เดียวกัน ตั้งชื่อโฟลเดอร์ว่า "เมนู"
 
พอได้ภาพทั้ง 8 ภาพเรียบร้อยแล้ว ให้เราไปที่เว็บ Canva แล้วทำตามขั้นตอนนี้ค่ะ:
*สำหรับภาพรหัสผ่าน เราต้องทำสองชุด คือ ios และ android นะคะ 
1. ให้สร้างไฟล์ใหม่แล้วตั้งขนาดไฟล์ตามที่กำหนดในภาพสำหรับ ios คือ 120 x 120 พิกเซล
2. ให้เราตั้งชื่อโปรเจกต์ว่า "รหัสผ่าน ios" 
2. ให้เราอัปโหลดภาพเมนูทั้ง 8 ภาพ
3. จากนั้นให้นำภาพเหล่านั้นไปวางแคนวาสทีละภาพจนครบทั้ง 8 ภาพ ปรับขนาดภาพให้พอดีกับกรอบ
4. กดดาวน์โหลดภาพทั้งหมดลงเครื่องคอมของเราโดยตั้งค่าดาวน์โหลดเป็นไฟล์ PNG 
5. ไฟล์จะดาวน์โหลดลงเครื่องคอมเราในรูปแบบ Zip ไฟล์ โดยไฟล์จะมาเป็นชื่อที่เราตั้งไว้คือ จากนั้น ให้เราแตกไฟล์ออก 
 
** เท่านี้เราก็จะได้ไฟล์ภาพรหัสภาพสำหรับ ios ทั้งหมด 8 ภาพที่มีขนาดถูกต้องตามที่ไลน์กำหนดอยู่โฟลเดอร์เดียวกันพร้อมที่จะให้เพื่อนๆ นำไปอัปโหลดขึ้นระบบได้แล้วค่ะ
 
พอทำ ios เสร็จแล้ว ให้เราทำรหัสผ่านสำหรับ android ต่อโดยทำตามขั้นตอนเดิม (อย่าลืมตั้งค่าขนาดภาพสำหรับแอนดรอยด์ คือ 116 x 116 พิกเซล และตั้งชื่อโปรเจกต์ว่า "รหัสผ่าน android" นะคะ ^^)
 
 
3.3: โปรไฟล์
 
สำหรับโปรไฟล์มีแค่ 2 ภาพค่ะ ให้เราวาดภาพหนึ่งขึ้นมา (ตามธีมที่เราตั้งไว้) ได้เป็นหนึ่งภาพ ส่วนภาพที่ 2 ให้เอาภาพที่วาดไว้มาแต่งเพิ่มอีกเล็กน้อยตามที่เห็นในภาพ เสร็จแล้วให้เซฟไว้ในโฟลเดอร์ชื่อ "โปรไฟล์"
 
พอได้ภาพทั้ง 2 ภาพเรียบร้อยแล้ว ให้เราไปที่เว็บ Canva แล้วทำตามขั้นตอนนี้ค่ะ:
*สำหรับภาพโปรไฟล์ เราต้องทำสองภาพ คือ ios และ android นะคะ 
1. ให้สร้างไฟล์ใหม่แล้วตั้งขนาดไฟล์ตามที่กำหนดในภาพสำหรับ ios คือ 240 x 240 พิกเซล
2. ให้เราตั้งชื่อโปรเจกต์ว่า "โปรไฟล์ ios" 
2. ให้เราอัปโหลดภาพทั้ง 2 ภาพ
3. จากนั้นให้นำภาพเหล่านั้นไปวางแคนวาสทีละภาพจนครบทั้ง 2 ภาพ ปรับขนาดภาพให้พอดีกับกรอบ
4. กดดาวน์โหลดภาพทั้งหมดลงเครื่องคอมของเราโดยตั้งค่าดาวน์โหลดเป็นไฟล์ PNG 
5. ไฟล์จะดาวน์โหลดลงเครื่องคอมเราในรูปแบบ Zip ไฟล์ โดยไฟล์จะมาเป็นชื่อที่เราตั้งไว้คือ จากนั้น ให้เราแตกไฟล์ออก 
 
** เท่านี้เราก็จะได้ไฟล์ภาพรหัสภาพสำหรับ ios ทั้งหมด 2 ภาพที่มีขนาดถูกต้องตามที่ไลน์กำหนดอยู่โฟลเดอร์เดียวกันพร้อมที่จะให้เพื่อนๆ นำไปอัปโหลดขึ้นระบบได้แล้วค่ะ
 
พอทำ ios เสร็จแล้ว ให้เราทำรหัสผ่านสำหรับ android ต่อโดยทำตามขั้นตอนเดิม (อย่าลืมตั้งค่าขนาดภาพสำหรับแอนดรอยด์ คือ 247 x 247 พิกเซล และตั้งชื่อโปรเจกต์ว่า "โปรไฟล์ android" นะคะ ^^)
 
 
 
 
ขั้นตอนที่ 4: ฉากหลังเมนู
ฉากหลังเมนูจะเป็นเส้นเล็กๆ ให้เราตั้งขนาดกระดาษบน ibispaint เป็น 1472 x 150 พิกเซลแล้วเทสีตามแต่ธีมที่คิดไว้ หรือเพื่อนๆ จะทำเป็นลายเส้นน่ารักๆ ตามภาพก็ได้ค่ะ สิ่งที่ต้องระวังคือเราจะต้องทำให้สองด้านเท่าๆ กัน เหมือนกับว่าถ้าเอาสองภาพมาต่อกันจะต้องให้ต่อกันได้แบบไม่มีรอยต่อ เพราะฉะนั้น เราแนะนำให้เปิดฟังก์ชั่น Symmetry ruler (เครื่องหมายไม้บรรทัดด้านบน) เพื่อให้เวลาวาด ทั้งสองข้างจะเท่ากัน หรือถ้าเพื่อนๆ ไม่แน่ใจ ให้เทสีพื้นลงไปแทนก็ได้นะคะ เสร็จแล้วเซฟเป็นชื่อ "ฉากหลังเมนู"
 
 
ขั้นตอนที่ 5: รูปหลัก 3 ภาพ
ขั้นตอนนี้ คือการวาดภาพปกของธีมนั่นเองค่ะ ซึ่งเพื่อความสะดวก เราจะเอาภาพนี้ไปใช้เป็นพื้นหลังของแชทด้วยในขั้นตอนต่อไป ดังนั้นให้เพื่อนๆ นำเอาภาพธีมหลักที่ร่างเอาไว้คร่าวๆ มาวาดและลงสีให้เรียบร้อยตามต้องการ โดยให้แยกเลเยอร์ของพื้นหลังและส่วนประกอบออกจากกัน (แล้วเซฟพื้นหลังเปล่าๆ แยกกันกับส่วนประกอบต่างๆ เก็บเอาไว้ค่ะ) เพื่อที่เวลานำไปใช้ปรับขนาดภาพปกพื้นหลัง เราจะสามารถทำได้ง่ายขึ้นนั่นเองค่ะ 
 
เราต้องวาดแค่ภาพเดียวค่ะ พอวาดเสร็จแล้ว ให้เพื่อนๆ เปิดเลเยอร์ใหม่ขึ้นมาเพื่อเพิ่มชื่อของธีมบนภาพให้สวยงาม จากนั้นเซฟไว้ก่อนค่ะ เดี๋ยวค่อยเอาไปปรับขนาดเป็น 3 ขนาดตามที่กำหนดไว้ในภาพ (สำหรับ ios, android, และ line store) บน Canva กันต่อทีหลัง
 
พอได้ภาพหลักแล้ว ให้เราไปที่เว็บ Canva แล้วทำตามขั้นตอนนี้ค่ะ:
*สำหรับภาพหลัก เราต้องทำสามภาพ คือ ios, android, และ Line store นะคะ 
1. ให้สร้างไฟล์ใหม่แล้วตั้งขนาดไฟล์ตามที่กำหนดในภาพสำหรับ ios คือ 200 x 284 พิกเซล
2. ให้เราตั้งชื่อโปรเจกต์ว่า "ภาพหลัก ios" 
2. ให้เราอัปโหลดภาพหลักที่ทำไว้
3. จากนั้นให้นำภาพไปวางแคนวาส ปรับขนาดภาพให้พอดีกับกรอบ
4. กดดาวน์โหลดภาพลงเครื่องคอมของเราโดยตั้งค่าดาวน์โหลดเป็นไฟล์ PNG 
5. ไฟล์จะดาวน์โหลดลงเครื่องคอมเรา
 
** เท่านี้เราก็จะได้ไฟล์ภาพหลักสำหรับ ios ที่มีขนาดถูกต้องตามที่ไลน์กำหนดพร้อมที่จะให้เพื่อนๆ นำไปอัปโหลดขึ้นระบบได้แล้วค่ะ
 
พอทำ ios เสร็จแล้ว ให้เราทำตามขั้นตอนเดิมสำหรับ android และ Line store ได้เลยนะคะ 
 
 
 
ขั้นที่ 6: ฉากหลังห้องแชท
สำหรับฉากหลังห้องแชท เพื่อความสะดวก เราแนะนำให้ใช้ภาพเดียวกันกับภาพหลักเลยค่ะ โดยให้ตั้งค่าขนาดกระดาษบน ibispaint ตามขนาดที่บอกไว้ในภาพด้านล่างได้เลย (ภาพฉากหลังไม่ต้องใช้ Canva ค่ะ^^) คือ ios = 640 x 1334 พิกเซล และ Android = 1300 x 1300 พิกเซล โดยแต่ละภาพ ให้นำเอาภาพพื้นหลังเปล่าๆ ที่เราเซฟแยกไว้มาวางให้เต็มพื้นที่ จากนั้นนำเอาภาพส่วนประกอบต่างๆ มาวาง กะให้ไม่ใหญ่มากและให้อยู่ประมาณตรงกลางภาพ (เหมือนเวลาเรามองจอมือถือ) จากนั้นให้เซฟทั้งสองขนาดโดยตั้งชื่อกันลืมไว้ ตัวอย่างเช่น "ฉากหลังios" และ "ฉากหลังandroid" เป็นต้น
 
 
*******************************************
ตอนนี้เราก็ได้รูปภาพทั้งหมดที่ต้องใช้ ตามขนาดที่กำหนดแล้วนะคะ หวังว่ารายละเอียดจะไม่ซับซ้อนจนเกินไป ^^"
เราขอพักนิดนึง เดี๋ยวจะกลับมาพาทำขั้นตอนต่อไปคือการอัปโหลดภาพของเราขึ้นระบบ Line Creator กันค่ะ  
 
 
ปล. เราขอฝากผลงานธีมไลน์ไว้ในอ้อมใจด้วยนะคะ เพื่อนๆ สามารถเลือกชมเลือกโหลดกันได้ที่ลิงก์นี้: https://store.line.me/themeshop/author/453097
 
แสดงความคิดเห็น
โปรดศึกษาและยอมรับนโยบายข้อมูลส่วนบุคคลก่อนเริ่มใช้งาน อ่านเพิ่มเติมได้ที่นี่