Photoshop ui design 1

1. By IamUser773

2. ทำควำมเข้ำใจกันก่อนว่ำผมไม่เคยออกแบบ Android โดยใช้
Photoshop มำก่อน แต่ผมก็ได้อ่ำนและศึกษำข้อมูลมำ
พอสมควร ถ้ำผิดพลำดตรงไหนก็ขออภัยด้วยนะครับ

3. ก่อนอื่นเรำต้องเข้ำใจก่อนว่ำปกติกำรออกแบบนั้นมี 2 วิธี
1. ออกแบบรูปที่ต้องกำรใช้ทุกขนำด DPI
2. ออกแบบรูปที่ต้องกำรใช้ที่ขนำด Extra High
หรือ Extra Extra High

4. โดยวิธีที่ 1 จะมีควำมยุ่งยำกกว่ำมำกเพรำะเรำต้องทำกำร
ปรับขนำดรูปภำพให้เหมำะสมกับทุกขนำดหน้ำจอ เพื่อให้
Android สำมรถดึงรูปภำพแต่ละขนำดไปใช้ได้ วิธีนี้อำจทำให้
ขนำดของไฟล์ APK มีขนำดใหญ่ ถ้ำหำกมีไฟล์ภำพมำก
เกินไป แต่ข้อดีก็คือจะได้ขนำดรูปที่เหมำะสมกับควำม
ละเอียดทุก DPI

5. วิธีที่2คงเป็นวิธีที่เหมำะกับคนขี้เกียจ เฮ้ยไม่ใช่คนที่ไม่อยำกให้
แอปมีขนำดใหญ่จนเกินไปหรือว่ำแอปของคุณมีรูปภำพเยอะ
มำกจนไม่สำมำรถทำทุกขนำดได้ โดยวิธีนี้เรำจะสร้ำงรูปภำพ
ที่ควำมละเอียด Extra High หรือ Extra Extra High
ถ้ำหำกหน้ำจอที่มีDPIต่ำ ทำกำรเรียกใช้ resource ตัว
android ก็จะทำกำรประมวลผลและปรับขนำดใน
UI thread โดยอัตโนมัติ

6. แน่นอนว่ำวิธีที่ผมเลือกคือ !!!! วิธีที่2

7. แต่ก่อนอื่นเรำต้องเข้ำใจหลักในกำรออกแบบก่อนโดยผมจะขอ
อธิบำยง่ำยๆนะครับ สมมุติผมมีโทรศัพท์อยู่2เครื่องมีขนำด
เท่ำกันแต่มีขนำดDPI ต่ำงกัน

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

9. ยกตัวอย่ำงให้เห็นง่ำยๆก็คือ ผมได้สร้ำงรูปที่มีขนำด
100 * 100 px และนำมำกำหนดลงใน
android ให้มีขนำด 200 * 200 px

10. จะเห็นได้ชัดว่ำ เครื่องแรกที่มีDPI ต่ำกว่ำ
มีขนำดรูปที่ใหญ่กว่ำชัดเจน และถึงแม้ขนำด
หน้ำจอของทั้ง2 เครื่องจะใกล้เคียงกัน
แต่ด้วยขนำดของDPI ที่ต่ำงกันทำให้ขนำดรูป
ไม่เท่ำกัน

11. จึงเป็นที่มำของหน่วย DP ที่ทำง android สร้ำงขึ้นเพื่อทำให้
หน้ำจอที่มีขนำด DPI ต่ำงกันสำมำรถที่จะแสดงผลได้
ใกล้เคียงกันที่สุด

12. โดยในตัวอย่ำงนี้ผมได้ปรับขนำด
รูปภำพเป็นขนำด 200 * 200 dp
จะเห็นว่ำรูปภำพมีขนำดใกล้เคียงกันมำก
แต่อย่ำลืมว่ำรูปภำพของเรำมีขนำดแค่
100 * 100px ทำให้รูปภำพที่ใช้
ต้องมีกำรปรับขนำดขึ้นเพื่อให้มีขนำดพอดี
กับจำนวนDP ที่เรำกำหนด จึงอำจจะทำให้ภำพ
เบลอหรือแตกได้

13. เพรำะฉะนั้นเรำจึงต้องสร้ำงภำพที่มีขนำดDPIที่สูงเพื่อทำให้
เครื่องที่มีหน้ำจอDPIสูงสำมำรถนำรูปที่มีDPIใกล้เคียงกันไป
ใช้ได้

14. แล้วจะสร้ำงรูปภำพที่เหมำะสมกับทุกขนำดหน้ำจอยังไงดี
ถ้ำดูจำกรูปข้ำงล่ำงก็จะถึงบำงอ้อกันเลย หลักกำรก็คือเรำต้องปรับขนำดPX
ของภำพให้มีขนำดเท่ำกับควำมหนำแน่นของหน้ำจอแต่ละขนำด

15. ยกตัวเช่นรูปภำพ 100 * 100px ในหน้ำจอปกติ(mdpi)
ถ้ำหำกเรำต้องกำรนำไปแสดงผลในหน้ำจอXXHDPI เรำก็แค่
ทำกำรปรับขนำดรูปภำพให้เป็น 300 * 300px ก็จะได้ขนำด
รูปสำหรับหน้ำจอ XXHDPI เรียบร้อย

16. สำหรับตอนแรกก็ขอจบเพียงแค่นี้ก่อน โปรดติดตำมตอน