Photoshop ui design 1
Transcript of Photoshop ui design 1
![Page 1: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/1.jpg)
Photoshop UI Design ตอนท 1By IamUser773
![Page 2: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/2.jpg)
ทำควมเขใจกนกอนวผมไมเคยออกแบบ Android โดยใช
Photoshop มกอน แตผมกไดอนและศกษขอมลมพอสมควร ถผดพลด
ตรงไหนกขออภยดวยนะครบ
![Page 3: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/3.jpg)
กอนอนเรตองเขใจกอนวปกตกรออกแบบนนม 2 วธ
1 .ออกแบบรปทตองกรใชทกขนด DPI
2. ออกแบบรปทตองกรใชทขนด Extra High
หรอ Extra Extra High
![Page 4: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/4.jpg)
โดยวธท 1 จะมควมยงยกกวมกเพระเรตองทำกรปรบขนดรปภพให
เหมะสมกบทกขนดหนจอ เพอใหAndroid สมรถดงรปภพแตละ
ขนดไปใชได วธนอจทำใหขนดของไฟล APK มขนดใหญ ถหกมไฟลภพมกเกนไป แตขอดกคอจะไดขนดรปทเหมะ
สมกบควมละเอยดทก DPI
![Page 5: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/5.jpg)
วธท2คงเปนวธทเหมะกบคนขเกยจ เฮยไมใชคนทไมอยกใหแอปมขนดใหญจนเกนไปหรอวแอปของคณมรปภพเยอะมกจนไมสมรถทำทกขนดได โดยวธนเรจะสรงรปภพทควมละเอยด Extra
High หรอ Extra Extra HighถหกหนจอทมDPIตำ ทำกรเรยกใช resource ตวandroid กจะทำกร
ประมวลผลและปรบขนดใน UI thread โดยอตโนมต
![Page 6: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/6.jpg)
แนนอนววธทผมเลอกคอ !!!! วธท2
![Page 7: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/7.jpg)
แตกอนอนเรตองเขใจหลกในกรออกแบบกอนโดยผมจะขออธบยงยๆนะ
ครบ สมมตผมมโทรศพทอย2เครองมขนดเทกนแตมขนดDPI ตงกน
160 320
![Page 8: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/8.jpg)
เวลทเรนำรปภพทมขนด 100 * 100 px มใชในหนจอทมควมละเอยด DPI ตงกนทำใหรปภพทนำมใชมขนดตง
กนดวย
160 320
![Page 9: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/9.jpg)
ยกตวอยงใหเหนงยๆกคอ ผมไดสรงรปทมขนด
100 * 100 px และนำมกำหนดลงใน android ใหมขนด 200 * 200 px
![Page 10: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/10.jpg)
จะเหนไดชดว เครองแรกทมDPI ตำกวมขนดรปทใหญกวชดเจน และถงแมขนดหนจอของทง2 เครองจะใกลเคยงกนแตดวยขนดของDPI ทตงกนทำใหขนดรปไมเทกน
![Page 11: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/11.jpg)
จงเปนทมของหนวย DP ททง android สรงขนเพอทำใหหนจอทม
ขนด DPI ตงกนสมรถทจะแสดงผลไดใกลเคยงกนทสด
![Page 12: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/12.jpg)
โดยในตวอยงนผมไดปรบขนด รปภพเปนขนด 200 * 200 dp จะเหนวรปภพมขนดใกลเคยงกนมกแตอยลมวรปภพของเรมขนดแค 100 * 100px ทำใหรปภพทใชตองมกรปรบขนดขนเพอใหมขนดพอดกบจำนวนDP ทเรกำหนด จงอจจะทำใหภพเบลอหรอแตกได
![Page 13: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/13.jpg)
เพระฉะนนเรจงตองสรงภพทมขนดDPIทสงเพอทำใหเครองทมหน
จอDPIสงสมรถนำรปทมDPIใกลเคยงกนไปใชได
![Page 14: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/14.jpg)
แลวจะสรงรปภพทเหมะสมกบทกขนดหนจอยงไงด
ถดจกรปขงลงกจะถงบงออกนเลย หลกกรกคอเรตองปรบขนดPX ของภพใหมขนดเทกบ
ควมหนแนนของหนจอแตละขนด
![Page 15: Photoshop ui design 1](https://reader035.fdocuments.net/reader035/viewer/2022081515/589f3cb11a28ab490c8b5551/html5/thumbnails/15.jpg)
ยกตวเชนรปภพ 100 * 100px ในหนจอปกต(mdpi)
ถหกเรตองกรนำไปแสดงผลในหนจอXXHDPI เรกแคทำกรปรบขนดรปภพใหเปน 300 * 300px กจะได
ขนดรปสำหรบหนจอ XXHDPI เรยบรอย