photoshop ui design 1

Photoshop UI Design ตอนท 1By IamUser773

ทำควมเขใจกนกอนวผมไมเคยออกแบบ Android โดยใช

Photoshop มกอน แตผมกไดอนและศกษขอมลมพอสมควร ถผดพลด

ตรงไหนกขออภยดวยนะครบ

กอนอนเรตองเขใจกอนวปกตกรออกแบบนนม 2 วธ

1 .ออกแบบรปทตองกรใชทกขนด DPI

2. ออกแบบรปทตองกรใชทขนด Extra High

หรอ Extra Extra High

โดยวธท 1 จะมควมยงยกกวมกเพระเรตองทำกรปรบขนดรปภพให

เหมะสมกบทกขนดหนจอ เพอใหAndroid สมรถดงรปภพแตละ

ขนดไปใชได วธนอจทำใหขนดของไฟล APK มขนดใหญ ถหกมไฟลภพมกเกนไป แตขอดกคอจะไดขนดรปทเหมะ

สมกบควมละเอยดทก DPI

วธท2คงเปนวธทเหมะกบคนขเกยจ เฮยไมใชคนทไมอยกใหแอปมขนดใหญจนเกนไปหรอวแอปของคณมรปภพเยอะมกจนไมสมรถทำทกขนดได โดยวธนเรจะสรงรปภพทควมละเอยด Extra

High หรอ Extra Extra HighถหกหนจอทมDPIตำ ทำกรเรยกใช resource ตวandroid กจะทำกร

ประมวลผลและปรบขนดใน UI thread โดยอตโนมต

แนนอนววธทผมเลอกคอ !!!! วธท2

แตกอนอนเรตองเขใจหลกในกรออกแบบกอนโดยผมจะขออธบยงยๆนะ

ครบ สมมตผมมโทรศพทอย2เครองมขนดเทกนแตมขนดDPI ตงกน

160 320

เวลทเรนำรปภพทมขนด 100 * 100 px มใชในหนจอทมควมละเอยด DPI ตงกนทำใหรปภพทนำมใชมขนดตง

กนดวย

160 320

ยกตวอยงใหเหนงยๆกคอ ผมไดสรงรปทมขนด

100 * 100 px และนำมกำหนดลงใน android ใหมขนด 200 * 200 px

จะเหนไดชดว เครองแรกทมDPI ตำกวมขนดรปทใหญกวชดเจน และถงแมขนดหนจอของทง2 เครองจะใกลเคยงกนแตดวยขนดของDPI ทตงกนทำใหขนดรปไมเทกน

จงเปนทมของหนวย DP ททง android สรงขนเพอทำใหหนจอทม

ขนด DPI ตงกนสมรถทจะแสดงผลไดใกลเคยงกนทสด

โดยในตวอยงนผมไดปรบขนด รปภพเปนขนด 200 * 200 dp จะเหนวรปภพมขนดใกลเคยงกนมกแตอยลมวรปภพของเรมขนดแค 100 * 100px ทำใหรปภพทใชตองมกรปรบขนดขนเพอใหมขนดพอดกบจำนวนDP ทเรกำหนด จงอจจะทำใหภพเบลอหรอแตกได

เพระฉะนนเรจงตองสรงภพทมขนดDPIทสงเพอทำใหเครองทมหน

จอDPIสงสมรถนำรปทมDPIใกลเคยงกนไปใชได

แลวจะสรงรปภพทเหมะสมกบทกขนดหนจอยงไงด

ถดจกรปขงลงกจะถงบงออกนเลย หลกกรกคอเรตองปรบขนดPX ของภพใหมขนดเทกบ

ควมหนแนนของหนจอแตละขนด

ยกตวเชนรปภพ 100 * 100px ในหนจอปกต(mdpi)

ถหกเรตองกรนำไปแสดงผลในหนจอXXHDPI เรกแคทำกรปรบขนดรปภพใหเปน 300 * 300px กจะได

ขนดรปสำหรบหนจอ XXHDPI เรยบรอย

สำหรบตอนแรกกขอจบเพยงแคนกอน โปรดตดตมตอน