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

วันนี้ 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

ข้อมูลบริการเพิ่มเติม
website : https://www.makewebeasy.com
โทร : 02 217 7999
Line : @makewebeasy
Facebook : facebook.com/makewebeasy
Twitter : twitter.com/makewebeasy
Instagram : instagram.com/makewebeasy

Related Post

Comments

comments