บทความนี่ไม่อนุญาติให้นำไปเผยแพร่ในที่อื่น

---

วิธีการทำโลโก้เกม แบบหรูๆ

สวัสดีครับ วันนี่จะมาสอนวิธีการทำโลโก้ง่ายๆ ที่เหมาะจะใช้เป็นโลโก้เกมกัน:laugh:

สำหรับโลโก้เกมที่ทำเป็นตัวอย่างอันนี่ ผมตั้งชื่อเกมว่า Omega Code เนื้อหาประมาณ
คร่าวๆที่คิดสดๆตะกี้ ก็คือเป็นเกมRPG ที่ตัวเอกได้รับพลังพิเศษจากตราสัญลักษณ์โอเมก้า จนไป
เกี่ยวข้องกับกลุ่มคนที่ต้องการชิงตราสัญลักษณ์นี่จากตัวเอก เพื่อนำไปใช้เป็นกุญแจในการไขพลัง
แห่งราชา และในระหว่างการเดินทางเพื่อหลบหนีและค้นหาความจริงของพลังที่ได้รับมา ก็ได้พบ
เจอกับผู้ที่ได้รับตราสัญลักษณ์แบบต่างๆ เช่น เบต้า เกมม่า เซต้า อะไรประมาณนี่ ซึ่งไอ้ที่โม้ๆมานี่
ก็ไม่ได้เกี่ยวอะไรมากหรอก แต่จากธีมที่คิดไว้คือโลโก้โทนออกสีแดง และมีสัญลักษณ์โอเมก้า

สำหรับถ้าคิดไม่ออกว่าจะทำโลโก้เกมยังไงดี ก็ลองหาๆไอเดียจาก โลโก้เกมต่างๆดู หรือลองเซฟภาพโลโก้
เกมที่ถูกใจมารวมๆกันแล้วหาดึงไอเดียจากโลโก้ต่างๆมาผสมกันดู แต่ที่สำคัญคืออย่างน้อยมันต้องมีอะไรที่
สื่อถึงเนื้อหาของตัวเกม หรือเข้ากับธีมของเกมที่ทำอยู่
(ตัวอย่างคลังไอเดียของโลโก้ที่ผมถูกใจแล้วเซฟมา)

Show ContentSpoiler:

โปรแกรมกับฟอนต์ที่ใช้
- Photoshop CS3 : จะใช้เวอชั่นอื่นก็ได้ ไม่ว่ากัน
- Font Times new Roman : ฟอนต์เรียบๆนิ่งๆ แต่เฉียบ ฟอนต์สามัญประจำวินโดวส์
- Font Kozuka Mincho Pro : ฟอนต์ภาษาญี่ปุ่น

Sample Logo ดาวน์โหลดไฟล์ PSD โลโก้ตัวอย่างได้ที่ลิงค์ข้างล่างนี่


Logo Reference ดาวน์โหลดไฟล์ตัวอย่างโลโก้แบบต่างๆไว้หาไอเดียได้ที่ลิงค์ข้างล่างนี่


#############################################################


1) สร้างงานขึ้นมาใหม่ ในที่นี่กำหนดขนาด 1600x1200px จะเอาขนาด 640x480 ดั้งเดิมของ RMXPก็ได้
แต่ขอแนะนำให้ทำขนาดใหญ่ๆไปเลย เผื่อจะได้เอาโลโก้ไปประกอบใช้กับงานอื่นๆ เช่นวอลแปเปอร์เกม
หรือภาพโปรโมตเกม อะไรพวกนี่


2) พิมพ์ชื่อเกมลงไปในที่นี่ใช้ชื่อว่า Omega Code ฟอนต์ Times New Roman ขนาดฟอนต์160pt


3) ทำการ Rasterize แปลงเลเยอร์ฟอนต์ตัวหนังสือให้กลายเป็น โดยกด Ctrlค้าง และคลิกเลเยอร์
ตัวหนังสือทั้งสองเลเยอร์ แล้วคลิกขวาเลือก Rasterize


4) ขั้นตอนนี่จะเป็นขั้นตอนการตกแต่งรูปร่างของตัวหนังสือชื่อเกม ซึ่งจะทำหรือไม่ทำก็ได้ ซึ่งผมจะ
แสดงตัวอย่างการตกแต่งรูปร่างของฟอนต์ตัวหนังสือแบบง่ายๆ โดยเพิ่มหางแหลมชี้ยื่นออกมาจากจุด
ต่างๆที่เป็นเหมือน มุมแหลมๆของตัวหนังสือ

Show ContentSpoiler:

- มองหาจุดที่จะตกแต่งรูปร่าง ในที่นี่ผมเลือกตรงตัว C
- เลือกเครื่องมือ Pen Tool และ ปรับโหมดตรงแถว Tool Bar เป็นโหมดเส้น Path เปล่าๆ


- คลิกที่จุดมุมปลายด้านล่างของตัว C และ คลิกในบริเวณด้านล่างเพิ่มเพื่อลากเส้นเพธลงมา ในมุมเฉียงตามลูกศรในภาพ


- คลิกเพื่อลากเส้นเพธไปปิดที่จุดเริ่มต้นของเส้น เพื่อปิดเส้น


- เสร็จแล้ว กดปุ่ม Ctrlค้าง คลิกที่เส้นเพธที่ลากจนปิดเมื่อกี่อีกครั้ง และ คลิกเพิ่มจุดตรงระหว่างกึ่งกลางของเส้นตรง


- กด Ctrlค้างไว้ คลิกค้างที่จุดที่เพิ่มขึ้นระหว่างกึ่งกลางของเส้นเมื่อกี้ ดึงลากลงมาในแนวเฉียง จะเป็นการดัด
เส้นเพธให้โค้งเมื่อดัดจนโค้งเสร็จแล้วก็ปล่อยปุ่ม Ctrl


- ทำแบบเดิมกับเส้นตรงอีกเส้น ให้โค้งขนานกัน


- เมื่อเสร็จแล้ว คลิกขวาบริเวณเส้นเพธเลือก Make Selection แล้วทีนี่ เส้นPath ที่เราลากดัดๆโค้งๆ
เมื่อกี่จะกลายเป็นเส้นประ Selection ทันใด


- เปลี่ยนไปใช้เครื่องมือถังสี Bucket เทสีดำลงไป โดยคลิกซ้ำสองรอบเพื่อเทพทับบริเวณเส้นที่ตัดกัน
เสร็จแล้ว กดCtrl+D เพื่อลบเส้นประออก

- เสร็จแล้วก็ทำกับตัวหนังสือตัวอื่นๆต่อ จนพอใจ แต่อย่าใส่จนลิเกจัด หรือรกอ่านไม่ออกไปละ


หากไม่เข้าใจการใช้งานเส้น Path สามารถศึกษาได้ในลิงค์นี่
http://ifreephotoshop.blogspot.com/2010/...-tool.html

5) ขั้นตอนนี่จะเป็นการใส่เอฟเฟกต์ให้กับตัวหนังสือกัน! โดยผมจะใช้โทนสีแดง และไล่ Gradient ที่ตัวหนังสือ
คลิกขวาที่เลเยอร์ตัวหนังสือ เลือก Blending Option...


Gradient Overlay

Show ContentSpoiler:

Stroke

Show ContentSpoiler:

Inner Glow

Show ContentSpoiler:

เสร็จแล้วก็จะได้เอฟเฟกต์ของตัวหนังสือดังในภาพ แต่ยังไม่เสร็จแค่นี่ ยังมีต่อ


6) ต่อมาเราจะเพิ่มเอฟเฟกต์Stroke พร้อม Outer Glow เข้าไปอีกชั้น โดยให้ทำการคัดลอกเลเยอร์
ตัวหนังสือมาอีกเลเยอร์และเลื่อยไปซ้อนใต้เลเยอร์ตัวหนังสือเลเยอร์แรก และตั้งค่าใน Blending Option

Stroke

Show ContentSpoiler:

Outer Glow

Show ContentSpoiler:

เมื่อเสร็จแล้วก็จะได้ตัวหนังสือของโลโก้เกมดังภาพ


หากไม่พอใจแค่ไล่สีก็สามารถใส่ Pattern ลวดลายลงบนตัวหนังสือโลโก้ได้ โดยใน Blending Option
ใส่เอฟเฟกต์ Pattern และ ลด Opacity ในส่วนของเอฟเฟกต์ Gradient Overlay ให้จางลงเพื่อให้เห็น
ลวดลายของ Pattern ก็จะได้ดังภาพตัวอย่าง


7) ขั้นตอนต่อไปก็เป็นการใส่ชื่อเกมเวอชั่นภาษาญี่ปุ่นเพื่อความเท่ ขั้นตอนนี่จะไม่ทำก็ได้เช่นกัน
สำหรับขั้นตอนนี่เชิญไปใช้บริการ ของ Google Translate เมื่อแปลเสร็จแล้ว ก็จัดแจงพิมพ์ลง
ไป โดยใช้ฟอนต์ Kozuka Mincho Pro ในขนาด 24pt และเลือกรูปแบบความหนา เป็นระดับ B
\

8) ปรับ Blending Option ของเลเยอร์ตัวหนังสือภาษาญี่ปุ่นดังนี่

Stroke

Show ContentSpoiler:

Outer Glow

Show ContentSpoiler:

Gradient Overlay

Show ContentSpoiler:

เมื่อปรับเสร็จแล้วก็จะได้ดังภาพด้านล่าง เท่านี่ส่วนตัวหนังสือชื่อเกมของโลโก้ก็เสร็จเรียบร้อย


Tip : ควรจะ Create New Group และจัดเรียงเลเยอร์แยกประเภทไว้เพื่อให้เป็นระเบียบ
ไม่รกและง่ายต่อการทำงาน และสัญลักษณ์ลูกตาตรงข้างๆเลเยอร์เราสามารถกดเพื่อเปิด/ปิด
เลเยอร์ชั่วคราวได้ ทำให้ง่ายต่อการทำงานภาพพื้นหลัง


9) ขั้นตอนต่อไปคือการทำรูปภาพโลโก้ด้านของตัวหนังสือ ซึ่งภาพนี่ผมจะใช้รูปทรงรูปแบบกลมๆ
และมีสัญลักษณ์โอเมก้าอยู่ตรงกลางของวงกลม โดยวงกลมรอบนอกก็ทีแฉก หรือรูปปีกแยกออกมา
ภาพร่างคร่าวๆ ที่ร่างไว้


ขั้นตอนนี่ สามารถวาดบนกระดาษแล้วสแกนเข้ามาก็ได้ หรือออกแบบมั่วๆจับโน้นจับนี่ใส่ๆให้มันโดนใจ
เราก็พอก็ยังได้(แต่ทางที่ดีควรจะเกี่ยวข้องกับเนื้อหาในเกมสักหน่อยก็จะดีไม่น้อย)

10) กด Ctrl+R บนคีย์บอรด์เพื่อเรียกไม้บรรทัดขึ้นมา และลากเส้นไม้บรรทัดให้อยู่กึ่งกลางของภาพโลโก้
ใช่แล้วนี่เป็นโลโก้แบบทำง่ายๆ โดยการวาดครึ่งหนึ่งและก๊อปสลับด้านข้างแปะอีกด้านนั้นเอง


11) เลือกเครื่องมือ Custom Shape Tool และปรับโหมดเป็น Fill Pixels


12) บริเวณ Toolbar ให้คลิกลูกศรหันลงตรงส่วนเลือกรูปร่าง Shape และเปิดเป็น All เพื่อ
เลือกรูปทรง วงกลม


13) สร้างเลเยอร์ขึ้นมาเหนือเลเยอร์เส้นร่าง กด Shiftค้างไว้และคลิกลากสร้างวงกลามขึ้นมา (เพื่อไม่ให้ทรงกลมเสียรูปร่าง)


14) เลือกเครื่องมือ Path Tool เหมือนตอนที่ตกแต่งรูปร่างตัวหนังสือ และทำการลากเส้นวาดตามเส้นร่าง
โดยพยายามให้มุมปลายดูแหลม และโค้งไม่เบี้ยว หากไม่เข้าใจการใช้งานเส้น Path สามารถศึกษาได้
ในลิงค์นี่ http://ifreephotoshop.blogspot.com/2010/...-tool.html
ให้เราสร้างเส้นเพธวาดตามเฉพาะแค่ซีกใดซีกหนึ่งก็พอ เพราะก๊อปแล้วสามารถกลับด้านเป็นอีกข้างได้


15) เมื่อวาดเส้นเพธเสร็จให้คลิกขวาและเลือก Make Selection และเทสีดำเหมือนเดิม


16) กด Ctrl+D เพื่อลบเส้นประออก แล้วก๊อปเลเยอร์ขึ้นมาอีกเลเยอร์หนึ่ง กดCtrl+A เพื่อเรียกSelection
คลุมทั้งภาพ แล้วคลิกขวาเลือก Free Transform เลือก Filp Horizontal เพื่อกลับด้านของภาพ


17) คลิกขวาเลือก Free Transform อีกรอบแต่คราวนี่ให้เลือก Filp Vertical เพื่อกลับด้านบนลงล่าง
แล้วเคลื่อนย้านภาพให้ตรงตำแหน่งของภาพร่างตอนแรก ซึ่งถ้าเราลากเส้นไม้บรรทัดไว้เราก็จะรู้ได้ว่า
ตรงใหนคือกึ่งกลางของภาพ


18) กด Ctrlค้างไว้และคลิกที่เลเยอร์ภาพที่วาดจากเส้นเพธทั้งสองเลเยอร์ และคลิกขวาเลือก Merge Layer
เป็นการรวมเลเยอร์เป็นเลเยอร์เดียว

19) สร้างเลเยอร์ขึ้นมาใหม่ ในขั้นตอนนี่จะเป็นการสร้างรูปทรงสัญลักษณ์โอเมก้า ที่เราออกแบบร่างไว้
ใช้เส้นพาธสร้างขึ้นเช่นเดิม และใช้วิธีก๊อปเลเยอร์ แล้ว Free Transfrom > Filp Horizontal เพื่อกลับ
ด้านเป็นอีกข้าง เพียงแต่ไม่ต้อง Filp Vertical แล้วเพราะรูปทรงมันสมมาตรกัน เมื่อทำเสร็จแล้วก็ทำการ
Merge Layer รวมกับเลเยอร์ในขั้นตอนก่อนหน้านี่

20) ต่อไปเป็นขั้นตอนการใส่เอฟเฟกต์แก่ภาพโลโก้ ในBlending Mode

Stroke

Show ContentSpoiler:

Pattern Overlay

Show ContentSpoiler:

Gradient Overlay

Show ContentSpoiler:

Inner Glow

Show ContentSpoiler:

Outer Glow

Show ContentSpoiler:

Inner Shadow

Show ContentSpoiler:

21) เมื่อเสร็จแล้ว ก็มาสู่ขั้นตอนสุดท้าย ลบเลเยอร์ Background สีขาวที่ล๊อกอยู่ ซึ่งอยู่ล่างสุด
และทำการ Trim ขอบของภาพให้เหลือเฉพาะพื้นที่ที่ใช้งานโดยไปที่ Toolbar > Image > Trim...
เมื่อหน้าต่าง Trim ขึ้นมาให้กด Ok ไปเลย

22) เสร็จแล้วก็เซฟเป็นไฟล์ .psdไว้เพื่อแก้ไขในภายหลัง และเซฟเป็นไฟล์.png เพียงเท่านี่ก็จะได้
โลโก้เกมไว้ใช้งานแล้ว =w=b+

Show ContentSpoiler:

P.S. สำหรับสไตล์ของภาพพื้นหลังโลโก้เราจะไม่ใส่เอฟเฟกต์ และปล่อยเป็นสีดำล้วนก็ได้ โดยลดค่า
Opacity ให้เหลือสัก 70 จะทำให้พื้นหลังของโลโก้โปร่งแสงขึ้น ดูดีไปอีกแบบ
(แต่ควรจะใส่Outer Glow สีขาวๆหน่อย เพื่อกันกรณีเอาไปโลโก้ไปใช้บนภาพโทนมืดๆ เดียวจะไม่เห็น
พื้นหลังโลโก้เอา)

Show ContentSpoiler:

เมื่อทำเสร็จลองเอาไปใช้กับสคริปต์ Custom Title ที่แถมมากับระบบ [url="http://irpg.in.th/forum/School/18841-Script-Basic-RPG-Sideview-Battle-System"]Basic RPG Sideview System [/url]
ดูก็ได้ แลดูหรูไปอีกแบบ ;w;b


มีอะไรสงสัยหรืองงตรงใหนก็โพสถามได้เลยน่อ /me กลิ้งออกจากกระทู้

* Jirayu เลิกทำตั้งแต่ขั้นตอนที่ 4

ผมแพ้ภัยเส้นพาธครับ ใช้ไม่เคยเข้าใจ ขอยอมแพ้ด้วยคน - -"

แถมในตัวอย่างใช้เส้นพาธกระจายเลยอีกต่างหากแน่ะ - -"

เทคนิคขั้นเทพจริงๆ จะทำไหวไหมเนี่ยตู...

ไว้กลับไปลอง...แต่ก็คาดว่า...เฮ้อ...

งามจริงๆครับ =[]=b ขอบคุณมากคร้าบ จะลองเอาไปใช้ดูครับ!

Step 4 นี่โหดมาก =[]=b

งามแต้ๆ

ผมช้ไม่ค่อยได้เพราะผมใช้PS CS5 แต่พอทำๆไปก็สวยดี