การออกแบบหน้าตาของเว็บไซต์เป็นสิ่งสำคัญ โดยการออกแบบต้องคำนึงผู้ใช้เป็นหลัก ผู้ใช้จะต้องรู้สึกว่าการเข้าเว็บไซต์นี้มีเนื้อหาความรู้ที่ต้องการ ใช้งานได้ง่าย รองรับทุกอุปกรณ์สำหรับการเข้าถึง นอกจากนี้องค์ประกอบต่างๆภายในเว็บไซต์จะต้องจัดเรียงเป็นระเบียบ รวมทั้งการเลือกไอคอน สัญลักษณ์ สี ก็เป็นสิ่งสำคัญ จะต้องสื่อความหมายด้วย ดังนั้นวันนี้เราจะมาสอนออกแบบปุ่มอย่างง่ายๆด้วย โปรแกรม photoshop ไว้ใช้ในเว็บไซต์กัน
ขั้นตอนการออกแบบปุ่ม
1. เปิดไฟล์ใหม่ขึ้นมา
2. คลิกที่เมนู Rounded Rectangle Tool
3. วาดสี่เหลี่ยมสำหรับทำปุ่ม
4. ลากภาพไอคอนที่ต้องการมาวางไว้บนสี่เหลี่ยม
5. คลิกที่เลเยอร์ไอคอน กดปุ่ม Alt ให้ขึ้นลูกศรสีดำ จากนั้นคลิกที่เลเยอร์ Rounded Rectangle เป็นการนำภาพไอคอนมาใส่ในสี่เหลี่ยม
6. ดับเบิ้ลคลิกที่เลเยอร์ Rounded Rectangle ติ๊กถูกที่ Drop Shadow จากนั้นปรับตามความต้องการ
ตัวอย่างปุ่มแจ้งเตือน
บทสรุป
ปุ่ม (ฺButton) เป็นองค์ประกอบในเว็บไซต์ที่มีความสำคัญ การออกแบบปุ่มนอกจากจะมีสีสันที่เข้าธีมของเว็บไซต์แล้ว จะต้องคำนึงถึงการใช้งานเป็นหลัก หลังจากได้ปุ่มไปใช้งานแล้วการจัดวางตำแหน่งก็มีความสำคัญมากเช่นกันเพื่อให้สะดวกกับผู้ใช้งานมากยิ่งขึ้น
ช่องทางการศึกษาเพิ่มเติมเกี่ยวกับ : การแต่งภาพ
บทเรียน Photoshop
Share Knowledge
Graphic design
สอนออกแบบปุ่ม (ฺButton) อย่างง่าย
Moderator: mindphp, ผู้ดูแลกระดาน
- napharat079
- PHP Super Member
- โพสต์: 230
- ลงทะเบียนเมื่อ: 18/03/2019 10:50 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ สอบถามวิธีนำค่าจาก radio button บันทึกลงฐานข้อมูลค่ะ
โดย Tookta » 02/02/2023 2:06 pm » ใน Programming - PHP - 2 ตอบกลับ
- 612 แสดง
-
โพสต์ล่าสุด โดย Tookta
02/02/2023 4:26 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 64