How to สร้าง iPhone Mockup แบบง่ายๆ ด้วย Photoshop

สำหรับคนที่ออกแบบ ui การพรีเซนต์ผลงานให้ออกมาสวยงามและดูดี Mockup ถือว่าเป็นสิ่งสำคัญที่ทำให้ผู้ใช้ หรือลูกค้าได้เห็นงานของเราบนอุปกรณ์ต่างๆ ประกอบการตัดสินใจ ก่อนที่จะพัฒนาให้ใช้งานได้จริง ซึ่งตามเว็บฝรั่ง ก็มีให้โหลดไฟล์ psd มาใช้งานกันฟรีๆ ผมก็เลยลองโหลดมาลองใช้และก็คิดว่า ทำไว้ใช้งานเองคงไม่ยาก ซึ่งเราสามารถนำไปประยุกต์กับอุปกรณ์ต่างๆ ตามที่เราต้องการได้ เช่น สมาร์ทโฟน แทบเล็ต แลปท๊อป หรือ PC
สิ่งที่เราจะต้องเตรียมคือไฟล์ภาพต้นฉบับ ที่เราถ่ายเอง อาจจะต้องเน้นความคมชัดกันหน่อย ทำการปรับแสดงปรับสีให้ได้ตามต้องการก่อนที่จะนำไปดีไซน์ต่อใน Photoshop

mockup design

ที่มาภาพ : techcrunch.com

ขั้นตอนที่ 1 เปิดภาพที่เราต้องการ

mockup design (10)
ขั้นตอนที่ 2 ใช้เครื่องมือ rectangle tool สร้างสี่เหลี่ยมขึ้นมา ขั้นตอนนี้สำคัญ เพราะเราจะสร้างขึ้นมาเองลอยๆ ไม่ได้ เพราะจะต้องอ้างอิงจาก Resolution ของหน้าจออุปกรณ์ต่างๆ เพื่อให้ได้สัดส่วนที่แน่นอน อย่างที่ผมเลือกมา เป็น iphone5s Resolution จะอยู่ที่ 640 x 1136px

 

ขั้นตอนที่ 3 ไปที่ layer panel ให้เปลี่ยนสี่เหลี่ยมนั้น เป็น smart object โดยคลิ๊กขวาที่ layer > convert to smart object เพื่อความเนียนก็ใส่ เอฟเฟค เพิ่มได้ inner shadows เพิ่มแสงต่างๆ

mockup design (12)

ขั้นตอนที่ 4 ปรับสี่เหลี่ยมให้เข้ากับภาพต้นฉบับของเรา เทคนิคง่ายๆ เลย คลิ๊กที่ layer สี่เหลี่ยม แล้วกด Ctrl+T แล้วก็ ลากมุมให้กับจอทีละมุม (ตอนลากกด Ctrl ค้างไว้ด้วยนะ)

mockup design (14)

ขั้นตอนสุดท้าย เปลี่ยนรูปสีเหลี่ยมให้เป็นรูป ui ของเรา ง่ายๆ คือ ดับเบิลคลิ๊กที่เลเยอร์ สี่หลี่ยมนั้นเลย จากนั้น คลิ๊ก OK มันจะเปิด ไฟล์ใหม่มาให้ เราก็นำรูปของเรามาใส่ได้เลย กด save หนึ่งที กลับมาดูที่ไฟล์ต้นฉบับ แค่นี้ก็เสร็จแล้ว

mockup design (13)

 

mockup designed by sanya

buttonsource

 

sanyaindy

เป็นเว็บบล็อกเล็กๆ ที่สอนกราฟิก และงานออกแบบพื้นฐาน และนำเสนอผลงานสร้างแรงบันดาลใจในการออกแบบ รวมไปถึงงาน DIY ซึ่ง Blogger เพียงแค่นักศึกษาไอที ที่มีใจรักในงานออกแบบ รักการเป็นบล็อกเกอร์และ ฝันว่าสักวัน จะเป็นเป็นเจ้าของเว็บไซต์ที่ทุกคนรู้จัก

You may also like...