Photoshop ui design 2
Transcript of Photoshop ui design 2
![Page 1: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/1.jpg)
Photoshop UI Design ตอนท 2By IamUser773
![Page 2: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/2.jpg)
หลงจากครงทแลวเราไดรหลกการในการออกแบบกนไปแลว วนนเราจะมาเรมตนการ
ออกแบบโดยใช Photoshop กนเลย
![Page 3: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/3.jpg)
สำาหรบโปรแกรม Photoshop ของผมใช cs6 นะครบ
![Page 4: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/4.jpg)
สงทเราจะทำากคอสรางรป background 1 รป สราง logo 1 รป
สรางButtonกอนกดและหลงกด โดยตวอยางจะเปนแบบนนะครบ
![Page 6: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/6.jpg)
![Page 7: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/7.jpg)
![Page 8: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/8.jpg)
ใหเพอนๆเลอกรปทชอบมาซกรปนะครบและกทำาการเปดขนมา
![Page 9: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/9.jpg)
![Page 10: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/10.jpg)
คลกท move tool และทำาการดงภาพไปอกเฟรมนะครบ
![Page 11: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/11.jpg)
![Page 12: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/12.jpg)
กด ctrl + t เพอทำาการปรบขนาดรปภาพเมอปรบไดแลวกกด enter
![Page 13: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/13.jpg)
ตอมาเราจะทำาการเบลอภาพเพอไมใหภาพbackground เดนเกนไปโดยการกดท layers และเลอกท Filter
![Page 14: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/14.jpg)
![Page 15: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/15.jpg)
เบลอตามตองการเลยนะครบ
![Page 16: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/16.jpg)
สำาหรบ logo กสรางงายๆโดยการใช Text นะครบสำาหรบ Font กแลวแตชอบเลย
![Page 17: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/17.jpg)
Tip เวลาทเราตองการขยบรปหรอวาText ใหเราคลกทitemนนและกใชปม Arrow keys
ในการขยบเอานะครบ(ในกรณทลากเมาไมไดดงใจ)
![Page 18: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/18.jpg)
ตอมากสรางปม และกใช Text ในการกำาหนดขอความนะครบ
![Page 19: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/19.jpg)
ตอมากทำาการเลอกlayersของปมเพอทำาการ group โดยการกด ctrl และกเลอกLayers ทตองการ
![Page 20: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/20.jpg)
ตอมากคลกทปมและกด alt คางไวและทำาการลากปมลงมา
และกทำาการปรบความทบลงมาเอาไวตอนเวลาUser คลก
![Page 21: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/21.jpg)
เปนอนเสรจเรยบรอย ตอไปกทำาการตดแตละสวนเพอนำาไปใชงาน
![Page 22: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/22.jpg)
![Page 23: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/23.jpg)
![Page 24: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/24.jpg)
สำาหรบหนาจอ MDPI
![Page 25: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/25.jpg)
สำาหรบหนาจอ XXHDPI
![Page 26: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/26.jpg)
สำาหรบปม และLOGO กทำาการตดมนกอนนะครบ
![Page 27: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/27.jpg)
![Page 28: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/28.jpg)
ปรบขนาดสำาหรบ XXHDPIโดยการนำาไปคณ 3
![Page 29: Photoshop ui design 2](https://reader035.fdocument.pub/reader035/viewer/2022062522/589f3cb11a28ab490c8b554f/html5/thumbnails/29.jpg)