Photoshop ui design 2

หลังจากครั้งที่แล้วเราได้รู้หลักการในการออกแบบกันไปแล้ว
วันนี้เราจะมาเริ่มต้นการออกแบบโดยใช้ Photoshop กันเลย

สาหรับโปรแกรม Photoshop ของผมใช้ cs6 นะครับ

สิ่งที่เราจะทาก็คือสร้างรูป background 1 รูป สร้าง logo 1 รูป
สร้างButtonก่อนกดและหลังกด โดยตัวอย่างจะเป็นแบบนี้นะครับ

โดยขนาดที่ผมใช้อ้างอิงก็คือขนาด mdpi 320 * 480

ให้เพื่อนๆเลือกรูปที่ชอบมาซักรูปนะครับ
และก็ทาการเปิดขึ้นมา

คลิกที่ move tool
และทาการดึงภาพไปอีกเฟรมนะครับ

กด ctrl + t
เพื่อทาการปรับขนาดรูปภาพ
เมื่อปรับได้แล้วก็กด enter

ต่อมาเราจะทาการเบลอภาพ
เพื่อไม่ให้ภาพbackground เด่นเกินไป
โดยการกดที่ layers
และเลือกที่ Filter

เบลอตามต้องการเลยนะครับ

สาหรับ logo ก็สร้างง่ายๆ
โดยการใช้ Text นะครับ
สาหรับ Font ก็แล้วแต่ชอบเลย

Tip
เวลาที่เราต้องการขยับรูปหรือว่าText ให้เราคลิกที่itemนั้นและ
ก็ใช้ปุ่ม Arrow keys ในการขยับเอานะครับ
(ในกรณีที่ลากเม้าไม่ได้ดั่งใจ)

ต่อมาก็สร้างปุ่ม
และก็ใช้ Text
ในการกาหนดข้อความนะครับ

ต่อมาก็ทาการเลือกlayers
ของปุ่มเพื่อทาการ group
โดยการกด ctrl และก็เลือก
Layers ที่ต้องการ

ต่อมาก็คลิกที่ปุ่มและกด alt ค้างไว้และทาการลากปุ่มลงมา
และก็ทาการปรับความทึบลงมา
เอาไว้ตอนเวลาUser คลิก

เป็นอันเสร็จเรียบร้อย
ต่อไปก็ทาการตัดแต่ละส่วนเพื่อนาไปใช้งาน

สาหรับหน้าจอ MDPI

สาหรับหน้าจอ XXHDPI

สาหรับปุ่ม และLOGO ก็ทาการ
ตัดมันก่อนนะครับ

ปรับขนาดสาหรับ XXHDPI
โดยการนาไปคูณ 3

เรียบร้อยจ้า โปรดติดตามตอนต่อไป

Recommended