การออกแบบหน้าตาของเว็บไซต์เป็นสิ่งสำคัญ โดยการออกแบบต้องคำนึงผู้ใช้เป็นหลัก ผู้ใช้จะต้องรู้สึกว่าการเข้าเว็บไซต์นี้มีเนื้อหาความรู้ที่ต้องการ ใช้งานได้ง่าย รองรับทุกอุปกรณ์สำหรับการเข้าถึง นอกจากนี้องค์ประกอบต่างๆภายในเว็บไซต์จะต้องจัดเรียงเป็นระเบียบ รวมทั้งการเลือกไอคอน สัญลักษณ์ สี ก็เป็นสิ่งสำคัญ จะต้องสื่อความหมายด้วย ดังนั้นวันนี้เราจะมาสอนออกแบบปุ่มอย่างง่ายๆด้วย โปรแกรม photoshop ไว้ใช้ในเว็บไซต์กัน
ขั้นตอนการออกแบบปุ่ม
1. เปิดไฟล์ใหม่ขึ้นมา
2. คลิกที่เมนู Rounded Rectangle Tool
3. วาดสี่เหลี่ยมสำหรับทำปุ่ม
4. ลากภาพไอคอนที่ต้องการมาวางไว้บนสี่เหลี่ยม
5. คลิกที่เลเยอร์ไอคอน กดปุ่ม Alt ให้ขึ้นลูกศรสีดำ จากนั้นคลิกที่เลเยอร์ Rounded Rectangle เป็นการนำภาพไอคอนมาใส่ในสี่เหลี่ยม
6. ดับเบิ้ลคลิกที่เลเยอร์ Rounded Rectangle ติ๊กถูกที่ Drop Shadow จากนั้นปรับตามความต้องการ
ตัวอย่างปุ่มแจ้งเตือน
บทสรุป
ปุ่ม (ฺButton) เป็นองค์ประกอบในเว็บไซต์ที่มีความสำคัญ การออกแบบปุ่มนอกจากจะมีสีสันที่เข้าธีมของเว็บไซต์แล้ว จะต้องคำนึงถึงการใช้งานเป็นหลัก หลังจากได้ปุ่มไปใช้งานแล้วการจัดวางตำแหน่งก็มีความสำคัญมากเช่นกันเพื่อให้สะดวกกับผู้ใช้งานมากยิ่งขึ้น
ช่องทางการศึกษาเพิ่มเติมเกี่ยวกับ : การแต่งภาพ
บทเรียน Photoshop
Share Knowledge
Graphic design
สอนออกแบบปุ่ม (ฺButton) อย่างง่าย
Moderators: mindphp, ผู้ดูแลกระดาน
- napharat079
- PHP Super Member
- Posts: 230
- Joined: 18/03/2019 10:50 am
-
- Similar Topics
- Replies
- Views
- Last post
-
- 1 Replies
- 601 Views
-
Last post by mindphp
14/06/2019 3:30 pm
-
-
วิธีสร้างหมวดหมู่ของบทความให้กับ WordPress อย่างง่าย
by M032 » 12/01/2016 4:56 pm » in Wordpress user Guide Knowledge - 0 Replies
- 2510 Views
-
Last post by M032
12/01/2016 4:56 pm
-
-
- 0 Replies
- 92 Views
-
Last post by tsukasaz
29/11/2017 10:36 am
-
-
การสร้างเว็บด้วย Django อย่างง่าย
by theoneozz » 08/01/2019 11:25 am » in Programming - C/C++ & java & Python - 0 Replies
- 633 Views
-
Last post by theoneozz
08/01/2019 11:25 am
-
-
-
CSS สำหรับการสร้าง Blockquote element อย่างง่าย
by thatsawan » 19/11/2020 6:37 pm » in CSS Knowledge - 0 Replies
- 251 Views
-
Last post by thatsawan
19/11/2020 6:37 pm
-
-
- 0 Replies
- 2327 Views
-
Last post by natnicha001
04/09/2017 2:37 pm
-
-
php function แปลงวันที่จากฐานข้อมูล เป็นวันที่ แบบไทย อย่างง่าย
by Ittichai_chupol » 20/09/2018 10:35 am » in Programming - PHP - 0 Replies
- 1320 Views
-
Last post by Ittichai_chupol
20/09/2018 10:35 am
-
-
-
AngularJs : ตัวอย่างการสร้าง Angular autocomplete อย่างง่าย
by thatsawan » 03/05/2016 11:42 am » in Jquery & Ajax Knowledge - 1 Replies
- 1402 Views
-
Last post by konseo
06/05/2016 12:30 pm
-
Who is online
Users browsing this forum: No registered users and 6 guests