สอนออกแบบปุ่ม (ฺButton) อย่างง่าย

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
napharat079
PHP Super Member
PHP Super Member
Posts: 230
Joined: 18/03/2019 10:50 am

สอนออกแบบปุ่ม (ฺButton) อย่างง่าย

Postby napharat079 » 18/04/2019 6:21 pm

การออกแบบหน้าตาของเว็บไซต์เป็นสิ่งสำคัญ โดยการออกแบบต้องคำนึงผู้ใช้เป็นหลัก ผู้ใช้จะต้องรู้สึกว่าการเข้าเว็บไซต์นี้มีเนื้อหาความรู้ที่ต้องการ ใช้งานได้ง่าย รองรับทุกอุปกรณ์สำหรับการเข้าถึง นอกจากนี้องค์ประกอบต่างๆภายในเว็บไซต์จะต้องจัดเรียงเป็นระเบียบ รวมทั้งการเลือกไอคอน สัญลักษณ์ สี ก็เป็นสิ่งสำคัญ จะต้องสื่อความหมายด้วย ดังนั้นวันนี้เราจะมาสอนออกแบบปุ่มอย่างง่ายๆด้วย โปรแกรม photoshop ไว้ใช้ในเว็บไซต์กัน

ขั้นตอนการออกแบบปุ่ม
1. เปิดไฟล์ใหม่ขึ้นมา
2. คลิกที่เมนู Rounded Rectangle Tool
1.png
1.png (35.91 KiB) Viewed 860 times

3. วาดสี่เหลี่ยมสำหรับทำปุ่ม
2.png
2.png (35.19 KiB) Viewed 860 times

4. ลากภาพไอคอนที่ต้องการมาวางไว้บนสี่เหลี่ยม
3.png
3.png (38.09 KiB) Viewed 860 times

5. คลิกที่เลเยอร์ไอคอน กดปุ่ม Alt ให้ขึ้นลูกศรสีดำ จากนั้นคลิกที่เลเยอร์ Rounded Rectangle เป็นการนำภาพไอคอนมาใส่ในสี่เหลี่ยม
4.png
4.png (11.18 KiB) Viewed 860 times

6. ดับเบิ้ลคลิกที่เลเยอร์ Rounded Rectangle ติ๊กถูกที่ Drop Shadow จากนั้นปรับตามความต้องการ
5.png
5.png (19.95 KiB) Viewed 860 times


ตัวอย่างปุ่มแจ้งเตือน
button.png
button.png (13.27 KiB) Viewed 860 times


บทสรุป
ปุ่ม (ฺButton) เป็นองค์ประกอบในเว็บไซต์ที่มีความสำคัญ การออกแบบปุ่มนอกจากจะมีสีสันที่เข้าธีมของเว็บไซต์แล้ว จะต้องคำนึงถึงการใช้งานเป็นหลัก หลังจากได้ปุ่มไปใช้งานแล้วการจัดวางตำแหน่งก็มีความสำคัญมากเช่นกันเพื่อให้สะดวกกับผู้ใช้งานมากยิ่งขึ้น

ช่องทางการศึกษาเพิ่มเติมเกี่ยวกับ : การแต่งภาพ
บทเรียน Photoshop
Share Knowledge
Graphic design

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 12 guests