สร้างกล่องไอคอนบนหน้าเว็บไซต์

วันนี้ MakeWebEasy มีเทคนิค การทำไอคอน สำหรับนำมาใช้งาน บนหน้าเว็บไซต์ เพื่อเพิ่มความสวยงามของหน้าเว็บของเรา มาแนะนำกันค่ะ  มาเริ่มกันเลยนะคะ …..

1.ดาวน์โหลดและติดตั้งฟอนต์ไปที่เว็บไซต์ : https://fortawesome.github.io/Font-Awesome/
จากนั้นติดตั้งไฟล์ FontAwesome.otf ให้เรียบร้อย

2. สร้างไฟล์ใหม่ เข้าโปรแกรม Photoshop เข้าไปที่ File > New…
ตั้งค่า Width และ Height ตามต้องการ (ขนาดตัวอย่าง Width และ Height 500 pixel)   เลือก Background Contents เป็น Transparent
3.เลือกรูปทรงกล่อง ไปที่ Rounded Rectangle Tool กดค้างเลือกรูปทรงกล่องที่ต้องการ
(ตัวอย่างเลือกทรงกลม Ellipse Tool)

4. เลือกสีของกล่อง คลิกที่ Set Foreground Color เลือกสีที่ต้องการ

 

5. คลิกแล้วลากสร้างรูปทรง คลิกซ้ายค้างไว้แล้วลากในพื้นที่ที่สร้างไว้ (ถ้าต้องการให้รูปทรงมาตรส่วนกว้าง,ยาวเท่ากันกด Shift ค้างด้วย)

 

 

6. เลือกฟอนต์ไอคอนที่ต้องการ จาก Font Awesome
ไปที่เว็บไซต์ :https://fortawesome.github.io/Font-Awesome/cheatsheet/ คลุมฟอนต์ไอคอนที่ต้องการแล้ว กด Ctrl+C เพื่อ Copy

 

7. คลิก เลือก วาง ฟอนต์ไอคอน กลับมาที่โปรแกรม Photoshop
– คลิก Tool เลือก Horizontal Type Tool
– เลือก ฟอนต์ ชื่อ FontAwesome Regular
– กดพื้นที่ ที่สร้างแล้ว วาง (Ctrl+v) ฟอนต์ ที่คัดลอกมา
– ปรับสี ขนาดฟอนต์ และปรับตำแหน่ง (Ctrl+T) ตามต้องการ

8. เซฟไฟล์สำหรับเว็บไซต์
– ไปที่ Export > Save for Web…
– เลือก Save เป็นนามสกุล PNG-24 พื้นหลังจะโปร่งใส
– เสร็จเรียบร้อยกับกล่องไอคอนของเรา

9. เพิ่ม Body Widget
Login เข้าระบบของ MakeWebEasy
ไปที่ Design > Body > Widget > Add Widget   เลือก Customize และเลือก Layout ที่ต้องการ

 

10. ใส่กล่องไอคอนใน Media  ไปที่ Media > Image แล้วเลือกรูปที่เราเตรียมไว้

 

 

 

หากมีข้อสงสัยหรือแนะนำสามารถส่งมาได้ตามช่องทางเหล่านี้