![]() +- irpg Community (https://irpg.in.th) +-- Forum: Imperial School of Art, Literature and Design (https://irpg.in.th/forum-41.html) +--- Forum: Literature & Design Library (https://irpg.in.th/forum-14.html) +--- Thread: ![]() |
วิธีการทำโลโก้เกม แบบหรูๆ - LuZi - 05-04-2012 บทความนี่ไม่อนุญาติให้นำไปเผยแพร่ในที่อื่น วิธีการทำโลโก้เกม แบบหรูๆ สวัสดีครับ วันนี่จะมาสอนวิธีการทำโลโก้ง่ายๆ ที่เหมาะจะใช้เป็นโลโก้เกมกัน:laugh: Quote:สำหรับโลโก้เกมที่ทำเป็นตัวอย่างอันนี่ ผมตั้งชื่อเกมว่า Omega Code เนื้อหาประมาณ สำหรับถ้าคิดไม่ออกว่าจะทำโลโก้เกมยังไงดี ก็ลองหาๆไอเดียจาก โลโก้เกมต่างๆดู หรือลองเซฟภาพโลโก้ เกมที่ถูกใจมารวมๆกันแล้วหาดึงไอเดียจากโลโก้ต่างๆมาผสมกันดู แต่ที่สำคัญคืออย่างน้อยมันต้องมีอะไรที่ สื่อถึงเนื้อหาของตัวเกม หรือเข้ากับธีมของเกมที่ทำอยู่ (ตัวอย่างคลังไอเดียของโลโก้ที่ผมถูกใจแล้วเซฟมา)
Spoiler:
โปรแกรมกับฟอนต์ที่ใช้ - 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) ขั้นตอนนี่จะเป็นขั้นตอนการตกแต่งรูปร่างของตัวหนังสือชื่อเกม ซึ่งจะทำหรือไม่ทำก็ได้ ซึ่งผมจะ แสดงตัวอย่างการตกแต่งรูปร่างของฟอนต์ตัวหนังสือแบบง่ายๆ โดยเพิ่มหางแหลมชี้ยื่นออกมาจากจุด ต่างๆที่เป็นเหมือน มุมแหลมๆของตัวหนังสือ
Spoiler:
![]() หากไม่เข้าใจการใช้งานเส้น Path สามารถศึกษาได้ในลิงค์นี่ http://ifreephotoshop.blogspot.com/2010/10/pen-tool.html 5) ขั้นตอนนี่จะเป็นการใส่เอฟเฟกต์ให้กับตัวหนังสือกัน! โดยผมจะใช้โทนสีแดง และไล่ Gradient ที่ตัวหนังสือ คลิกขวาที่เลเยอร์ตัวหนังสือ เลือก Blending Option... ![]() Gradient Overlay
Spoiler:
Spoiler:
Spoiler:
เสร็จแล้วก็จะได้เอฟเฟกต์ของตัวหนังสือดังในภาพ แต่ยังไม่เสร็จแค่นี่ ยังมีต่อ ![]() 6) ต่อมาเราจะเพิ่มเอฟเฟกต์Stroke พร้อม Outer Glow เข้าไปอีกชั้น โดยให้ทำการคัดลอกเลเยอร์ ตัวหนังสือมาอีกเลเยอร์และเลื่อยไปซ้อนใต้เลเยอร์ตัวหนังสือเลเยอร์แรก และตั้งค่าใน Blending Option Stroke
Spoiler:
Spoiler:
เมื่อเสร็จแล้วก็จะได้ตัวหนังสือของโลโก้เกมดังภาพ ![]() หากไม่พอใจแค่ไล่สีก็สามารถใส่ Pattern ลวดลายลงบนตัวหนังสือโลโก้ได้ โดยใน Blending Option ใส่เอฟเฟกต์ Pattern และ ลด Opacity ในส่วนของเอฟเฟกต์ Gradient Overlay ให้จางลงเพื่อให้เห็น ลวดลายของ Pattern ก็จะได้ดังภาพตัวอย่าง ![]() 7) ขั้นตอนต่อไปก็เป็นการใส่ชื่อเกมเวอชั่นภาษาญี่ปุ่นเพื่อความเท่ ขั้นตอนนี่จะไม่ทำก็ได้เช่นกัน สำหรับขั้นตอนนี่เชิญไปใช้บริการ ของ Google Translate เมื่อแปลเสร็จแล้ว ก็จัดแจงพิมพ์ลง ไป โดยใช้ฟอนต์ Kozuka Mincho Pro ในขนาด 24pt และเลือกรูปแบบความหนา เป็นระดับ B ![]() 8) ปรับ Blending Option ของเลเยอร์ตัวหนังสือภาษาญี่ปุ่นดังนี่ Stroke
Spoiler:
Spoiler:
Spoiler:
เมื่อปรับเสร็จแล้วก็จะได้ดังภาพด้านล่าง เท่านี่ส่วนตัวหนังสือชื่อเกมของโลโก้ก็เสร็จเรียบร้อย ![]() 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/10/pen-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
Spoiler:
Spoiler:
Spoiler:
Spoiler:
Spoiler:
Spoiler:
21) เมื่อเสร็จแล้ว ก็มาสู่ขั้นตอนสุดท้าย ลบเลเยอร์ Background สีขาวที่ล๊อกอยู่ ซึ่งอยู่ล่างสุด และทำการ Trim ขอบของภาพให้เหลือเฉพาะพื้นที่ที่ใช้งานโดยไปที่ Toolbar > Image > Trim... เมื่อหน้าต่าง Trim ขึ้นมาให้กด Ok ไปเลย 22) เสร็จแล้วก็เซฟเป็นไฟล์ .psdไว้เพื่อแก้ไขในภายหลัง และเซฟเป็นไฟล์.png เพียงเท่านี่ก็จะได้ โลโก้เกมไว้ใช้งานแล้ว =w=b+
Spoiler:
P.S. สำหรับสไตล์ของภาพพื้นหลังโลโก้เราจะไม่ใส่เอฟเฟกต์ และปล่อยเป็นสีดำล้วนก็ได้ โดยลดค่า Opacity ให้เหลือสัก 70 จะทำให้พื้นหลังของโลโก้โปร่งแสงขึ้น ดูดีไปอีกแบบ (แต่ควรจะใส่Outer Glow สีขาวๆหน่อย เพื่อกันกรณีเอาไปโลโก้ไปใช้บนภาพโทนมืดๆ เดียวจะไม่เห็น พื้นหลังโลโก้เอา)
Spoiler:
เมื่อทำเสร็จลองเอาไปใช้กับสคริปต์ Custom Title ที่แถมมากับระบบ [url="http://irpg.in.th/forum/School/18841-Script-Basic-RPG-Sideview-Battle-System"]Basic RPG Sideview System [/url] ดูก็ได้ แลดูหรูไปอีกแบบ ;w;b ![]() มีอะไรสงสัยหรืองงตรงใหนก็โพสถามได้เลยน่อ /me กลิ้งออกจากกระทู้ RE: [Graphics] วิธีทำโลโก้เกมแบบหรูๆ อย่างง่าย - Jirayu - 05-05-2012 * Jirayu เลิกทำตั้งแต่ขั้นตอนที่ 4 ![]() RE: [Graphics] วิธีทำโลโก้เกมแบบหรูๆ อย่างง่าย - dokibaku - 05-08-2012 ผมแพ้ภัยเส้นพาธครับ ใช้ไม่เคยเข้าใจ ขอยอมแพ้ด้วยคน - -" แถมในตัวอย่างใช้เส้นพาธกระจายเลยอีกต่างหากแน่ะ - -" RE: [Graphics] วิธีทำโลโก้เกมแบบหรูๆ อย่างง่าย - anime13master - 05-10-2012 เทคนิคขั้นเทพจริงๆ จะทำไหวไหมเนี่ยตู... ไว้กลับไปลอง...แต่ก็คาดว่า...เฮ้อ... RE: [Graphics] วิธีทำโลโก้เกมแบบหรูๆ อย่างง่าย - luvikung - 06-21-2012 งามจริงๆครับ =[]=b ขอบคุณมากคร้าบ จะลองเอาไปใช้ดูครับ! RE: วิธีการทำโลโก้เกม แบบหรูๆ - woratana - 08-05-2012 Step 4 นี่โหดมาก =[]=b RE: วิธีการทำโลโก้เกม แบบหรูๆ - skyjackKunG - 12-02-2012 งามแต้ๆ RE: วิธีการทำโลโก้เกม แบบหรูๆ - เนสสึ - 12-23-2012 ผมช้ไม่ค่อยได้เพราะผมใช้PS CS5 แต่พอทำๆไปก็สวยดี |