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

[napharat079]

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

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

1.png (35.91 KiB) เปิดดู 626 ครั้ง

3. วาดสี่เหลี่ยมสำหรับทำปุ่ม

2.png (35.19 KiB) เปิดดู 626 ครั้ง

4. ลากภาพไอคอนที่ต้องการมาวางไว้บนสี่เหลี่ยม

3.png (38.09 KiB) เปิดดู 626 ครั้ง

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

4.png (11.18 KiB) เปิดดู 626 ครั้ง

6. ดับเบิ้ลคลิกที่เลเยอร์ Rounded Rectangle ติ๊กถูกที่ Drop Shadow จากนั้นปรับตามความต้องการ

5.png (19.95 KiB) เปิดดู 626 ครั้ง

ตัวอย่างปุ่มแจ้งเตือน

button.png (13.27 KiB) เปิดดู 626 ครั้ง

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

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