photoshop ui design 2

Photoshop UI Design ตอนท 2By IamUser773

หลงจากครงทแลวเราไดรหลกการในการออกแบบกนไปแลว วนนเราจะมาเรมตนการ

ออกแบบโดยใช 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

เรยบรอยจา โปรดตดตามตอนตอไป