เพิ่มมูลค่างานออกแบบ
ให้สวยปัง! อลังการ! ด้วย “Mockup”

Graphics Hub , Working Concept April 5, 2016
ในการนำเสนองานกับลูกค้ามีหลายๆ ปัจจัยในการเลือกซื้องาน เช่นเรื่องของเนื้องาน การตอบโจทย์ลูกค้า หรือแม้กระทั่งวิธีการนำเสนอ ซึ่งแต่ละคนก็ต่างมีวิธีการนำเสนอในรูปแบบของตนเอง อาจจะมีเทคนิคของแต่ละที่ในการนำเสนอมากมาย มีทั้งใช้ได้ผลบ้าง ล้มเหลวบ้าง เรียกได้ว่าลองผิดลองถูก แต่ถ้ายังไม่รู้จะทำยังไง หรือเริ่มยังไง ในบทความนี้ขอเสนอวิธีง่ายๆ ที่จะช่วยเพิ่มมูลค่าให้งานของคุณ ให้เตะตา โดนใจ บรรดาลูกค้าทั้งหลายได้ นั่นคือ “การทำ Mockup” ..??!!.. แต่ถ้าจะให้ Mockup ธรรมดาๆ หาโหลดเอาก็ได้ มีเยอะแยะสมัยนี้ เนอะ! แล้วถ้าเราทำเองได้หละ จะเป็นยังไง งานจะดูน่าสนใจกว่าแค่ไหน มาลองดูกัน..

Mockup คืออะไร?

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

AW_Article06_01
AW_Article06_02

แล้วมันน่าสนใจกว่ายังไง?

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

เสียเวลาเกินไปมั้ย?

เสียเวลาแน่นอน .. ตอนแรกก็คิดแบบนั้นเหมือนกัน แค่จะทำงานส่งก็วุ่นวายมากพออยู่แล้ว ลองนึกเล่นๆ ดูว่าลูกค้ามีบรีฟที่ให้เรามามีสิ่งที่ต้องการชัดเจน แล้วถ้าเราให้ได้มากกว่าที่ลูกค้าอยากได้จะเป็นยังไง? การสร้าง Surprise ลูกค้าด้วยงานที่เหนือความคาดหมาย นอกจากจะสร้างความเชื่อมั่นให้ลูกค้าที่มีต่อเราแล้ว ลูกค้าจะเกิดความรู้สึกคุ้มค่ากับงานที่ได้รับ และยังสร้างความประทับใจอีกด้วยนะ

AW_Article06_03

Mockup ทำยังไง เริ่มจากไหน?

สมัยนี้ Mockup แบบต่างๆ มีแจกให้ดาวน์โหลดฟรีมากมาย ลองค้นหา “Mockup PSD” บน Google ได้เลยเยอะมากกกก! สำเร็จรูปแบบแทบจะไม่ต้องทำอะไรกันละเนี่ย .. เอ๊ะ! แล้วทำไมต้องมาเสียเวลานั่งทำเอง โหลดเอาก็ได้ปะ .. ก็จริง 555 แต่ลองคิดดู ถ้า Mockup มีแจก ใครคิดจะทำก็ทำได้ถูกมั้ย? ถ้าเราทำแบบที่ไม่เหมือนใคร ปรับ Mockup ให้เข้ากับงานได้เอง มันน่าจะเจ๋งกว่าเนอะ ที่สำคัญพอรู้วิธีทำแล้ว คราวนี้เราก็จะมีสกิลที่จะไป Mockup อะไรก็ได้ที่อยากจะทำแล้ว เริ่ดมากๆ เริ่ดไม่หยุด!!

สิ่งที่ต้องเตรียม

อุปกรณ์ที่จะใช้ Mockup

อยากจะ Mockup อะไรหยิบสิ่งนั้นมารอไว้เลย อย่าลืมเช็ดให้เรียบร้อยก่อนนะ

กล้องและโลเคชั่นชิคๆ

ภาพที่เราถ่าย จะกลายเป็น Mockup ที่มีชิ้นเดียวในโลกได้เลยนะ

คอมฯ + Photoshop

ถึงมีทุกอย่างครบแล้ว ถ้าขาดไปก็ทำ Mockup ไม่ได้

มาลุยกันเลย!

AW_Article06_04

1. ถ่ายรูปสำหรับทำ Mockup

ขั้นตอนแรก หลังจากที่เลือกสถานที่สวยๆ หรือจะจัดมุมจัดฉากเรียบร้อยแล้ว นำอุปกรณ์ที่ต้องการจะทำ Mockup วางและจัดตำแหน่งให้สวยงาม จัดการถ่ายภาพให้เรียบร้อยสวยงาม จะใช้กล้องมือถือถ่ายก็ได้นะ แต่แหม.. จะทำทั้งที ทำดีๆ ไปเลยได้ก็ดีกว่าเนอะ .. พอถ่ายจนได้รูปภาพที่ต้องการ แล้วไปลุยกันต่อเลย!


AW_Article06_05

2. เปิดไฟล์และสำรวจหน้าจอ

เมื่อเราได้รูปที่สวยงามเรียบร้อยแล้ว.. เปิดไฟล์ที่ได้บน Adobe Photoshop ให้เรียบร้อย แต่ก่อนจะทำขึ้นตอนถัดไปเราต้องดูก่อนว่า อุปกรณ์ที่เราเลือกมาทำ คือแบรนด์ใด รุ่นใด ให้เราไปหาขนาดของจอนั้นๆ มาก่อน เช่น จากตัวอย่างที่ถ่ายมาจะใช้ iPhone 6 ซึ่งหน้าจอที่ใช้จะมีขนาด 750 x 1334 px เป็นต้น แนะนำค้นหาจาก Google หรือเว็บไซต์นี้ www.mydevice.io ได้เลย


AW_Article06_06

3. สร้างกล่องบนหน้าจอ

เราจะใช้เครื่องมือ Rectangle Tool เพื่อทำการสร้างกล่องสีเหลี่ยมจำลองหน้าจอขึ้นมา ตามขนาดจอ จากตัวอย่างจะสร้างกล่องขึ้นมาขนาด 750 x 1334 px หากลากมาแล้วไม่เป๊ะตามที่ต้องการ หรือไม่รู้ว่าที่ลากมาขนาดเป็นเท่าไหร่ ให้ดูช่องที่ระบุขนาดบริเวณแถบด้านบน สามารถแก้ไขตัวเลขได้ที่นี่ .. ตัวกล่องที่สร้างแนะนำเป็นสีสดหรือฉูดฉาดไปเลย จะทำให้เวลาเราทำงานสามารถสังเกตขอบและตำแหน่งได้ง่ายขึ้น


AW_Article06_07

4. สร้าง Smart Object

เมื่อเราได้กล่องน่ารักๆ ของเรามาแล้ว จากนั้นคลิกขวาบน Layer ของกล่องที่สร้าง และเลือก Convert to Smart Object หรือไปที่เมนู Layer > Smart Objects > Convert to Smart Object ก็ทำได้เช่นกัน

Smart Object Layer คือ Layer พิเศษ ที่ทำให้เกิดความยืดหยุ่นในการทำงาน สะดวกต่อการแก้ไข โดยที่ไม่ส่งผลกับคุณภาพของภาพต้นฉบับด้านใน

AW_Article06_08

5. ขอบชนขอบ มุมชนมุม

ใกล้จะเสร็จแล้วอีกนิดนึง เลือกที่กล่องเดิมเราจะมาทำให้กล่องที่เราสร้างกลายเป็นหน้าจอเนียนๆ ไปกับภาพที่เราถ่ายมา อ่าว! ทำยังไงหละทีนี้.. กด Ctrl + T (หรือ Cmd + T บน Mac) กล่องจะมีขอบ มีจุดประหลาดๆ เปลี่ยนไปจากเมื่อสักครู่ กด Ctrl (หรือ Cmd ค้าง) แล้วใช้เมาส์ลากจุดของมุมแต่ละด้าน ไปชนกับขอบสีดำของหน้าจอภาพถ่ายที่เราใช้ ทำจนครบ 4 ด้าน ตอนนี้กล่องเรากลายเป็นจอเรียบร้อยแล้ว เย่!


AW_Article06_09

6. มาลอง Mockup กันดู!

เรียกว่าตอนนี้เราได้ Mockup ที่เราสร้างขึ้นมาเองเรียบร้อย เรามาลองทดสอบกันว่าใช้งานได้มั้ย โดยการกด Double-Clicks ที่ Layers ของกล่อง โปรแกรมจะเปิดหน้าต่างขึ้นมา เป็นกล่องขนาดและสีตามที่เราสร้างในข้อ 2. ตรงนี้แหละ เรามีงาน หรือหน้าจออะไรอยากทดสอบ ใส่ลงไปเลย .. เมื่อใส่เรียบร้อยแล้วก็กดเซฟเลย Ctrl + S (หรือ Cmd + S บน Mac) จากนั้นสลับหน้าต่างกลับไปดูภาพ Mockup ได้เลย เท่านี้เป็นอันว่าเรียบร้อย!

อยากให้ลองนำไปใช้

ไม่ยากเลยเนอะ! งานดูดี มีมูลค่าขึ้นมาทันที เทคนิคนี้หลายๆ คนที่ยังไม่เคยทำ Mockup สามารถลองนำไปใช้กันได้ จากนี้เป็นหน้าที่ของคุณแล้วหละ ที่จะใส่ไอเดีย ใส่ฝีมือต่อยอดผลงานให้สุดฝีมือไปเลย .. นอกจากนี้แล้ว Mockup ยังมีอีกหลายๆ รูปแบบ ไม่ว่าจะเป็น บนจอคอมพิวเตอร์ แท็บเบลท ป้าย สมุด หนังสือ กล่องต่างๆ ก็สามารถทำได้ทั้งนั้น ซึ่งในแต่ละรูปแบบอาจจะมีวิธีที่ต่างกัน เอาไว้จะมาสอน  Mockup แบบอื่นๆ ในโอกาสต่อไปนะ ^^

ตัวอย่าง Mockup ในรูปแบบอื่นๆ

Comments

comments

Comments

comments

บทความที่เกี่ยวข้อง