วิธีการทำโลโก้เกม แบบหรูๆ - Printable Version +- 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: วิธีการทำโลโก้เกม แบบหรูๆ (/thread-38.html) |
วิธีการทำโลโก้เกม แบบหรูๆ - 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 แต่พอทำๆไปก็สวยดี |