Thread Rating:
  • 3 Vote(s) - 4.67 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Graphic วิธีการทำโลโก้เกม แบบหรูๆ
#1
บทความนี่ไม่อนุญาติให้นำไปเผยแพร่ในที่อื่น


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

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

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

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

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

Sample Logo ดาวน์โหลดไฟล์ PSD โลโก้ตัวอย่างได้ที่ลิงค์ข้างล่างนี่
[Image: DownloadButton.jpg]

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

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


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

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

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

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

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

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

Gradient Overlay
Show ContentSpoiler:
Stroke
Show ContentSpoiler:
Inner Glow
Show ContentSpoiler:

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

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

Stroke
Show ContentSpoiler:
Outer Glow
Show ContentSpoiler:

เมื่อเสร็จแล้วก็จะได้ตัวหนังสือของโลโก้เกมดังภาพ
[Image: 21.jpg]

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

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

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

Stroke
Show ContentSpoiler:
Outer Glow
Show ContentSpoiler:
Gradient Overlay
Show ContentSpoiler:

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

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

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

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

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

11) เลือกเครื่องมือ Custom Shape Tool และปรับโหมดเป็น Fill Pixels
[Image: 33.jpg]

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

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

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

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

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

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

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
[Image: gametitle.jpg]

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


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

ทำหน้าเหยาหมิง
[Image: 76561198011764062.png]

[Image: graphic.png]
[-] The following 3 users say Thank You to Jirayu for this post:
  • luvikung, sanakakung, TheMoo2000
Reply
#3
ผมแพ้ภัยเส้นพาธครับ ใช้ไม่เคยเข้าใจ ขอยอมแพ้ด้วยคน - -"

แถมในตัวอย่างใช้เส้นพาธกระจายเลยอีกต่างหากแน่ะ - -"
[Image: 14RmtA1]
Reply
#4
เทคนิคขั้นเทพจริงๆ จะทำไหวไหมเนี่ยตู...

ไว้กลับไปลอง...แต่ก็คาดว่า...เฮ้อ...
Reply
#5
งามจริงๆครับ =[]=b ขอบคุณมากคร้าบ จะลองเอาไปใช้ดูครับ!
Reply
#6
Step 4 นี่โหดมาก =[]=b
คิดถึง แพนด้าจ๊าก
Reply
#7
งามแต้ๆ
Reply
#8
ผมช้ไม่ค่อยได้เพราะผมใช้PS CS5 แต่พอทำๆไปก็สวยดี
[Image: 76561198204825131.png]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)