คู่มือการใช้งาน, เทคนิคแต่งเว็บไซต์
คู่มือการใช้งาน, เทคนิคแต่งเว็บไซต์

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

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

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

เทคนิคเว็บไซต์02-2

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

เทคนิคเว็บไซต์02-4

4. เลือกสีของกล่อง คลิกที่ Set Foreground Color เลือกสีที่ต้องการ เทคนิคเว็บไซต์02-5

 

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

 

เทคนิคเว็บไซต์02-6

 

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

 

เทคนิคเว็บไซต์02-7

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

เทคนิคเว็บไซต์02-8

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

เทคนิคเว็บไซต์02-9

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

 

เทคนิคเว็บไซต์02-10

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

 

 

เทคนิคเว็บไซต์02-11

 

เทคนิคเว็บไซต์02-12

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

   

banner-mweonblog03