photoshop ui design 1
TRANSCRIPT
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 เรยบรอย
สำหรบตอนแรกกขอจบเพยงแคนกอน โปรดตดตมตอน