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

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

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

ภาพประจำตัวสมาชิก
napharat079
PHP Super Member
PHP Super Member
โพสต์: 230
ลงทะเบียนเมื่อ: 18/03/2019 10:50 am

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

โพสต์โดย napharat079 » 18/04/2019 6:21 pm

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

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

3. วาดสี่เหลี่ยมสำหรับทำปุ่ม
2.png
2.png (35.19 KiB) เปิดดู 627 ครั้ง

4. ลากภาพไอคอนที่ต้องการมาวางไว้บนสี่เหลี่ยม
3.png
3.png (38.09 KiB) เปิดดู 627 ครั้ง

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

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


ตัวอย่างปุ่มแจ้งเตือน
button.png
button.png (13.27 KiB) เปิดดู 627 ครั้ง


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

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

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 17 และ บุคคลทั่วไป 0 ท่าน