Tech&Tips

วิธีทำ Favicon ให้กับบล็อค

      หลาย คนคงสังเกตเห็นว่าตรงแถบ url ของ browser จะมีไอค่อนเล็ก ๆ กิ๊บเก๋ บางแห่งจะเป็นรูปคล้าย ๆ โลโก้ของเว็บ แต่บางแห่งอาจเป็นรูปหน้า page เปล่า ๆ หรือว่าเป็น� าพไอค่อนมาตรฐานที่มากับ Browser เจ้าไอค่อนเล็ก ๆ นี้เราเรียกมันว่า Favicon หรือแฟ้บไอค่อน (เขียนเป็นไทยแล้วดูแปลก ๆ แฮะ)


โดย� าพ Favicon ที่จะมาโชว์ข้างชื่อ url ของเราได้นั้น เราต้องมีไฟล์ที่ชื่อ favicon.ico ใส่ไว้ในเว็บเราด้วย โดยเราต้องเก็บไฟล์นี้ไว้ในที่เดียวกับที่ไฟล์หน้า index (หน้าแรก) ของเว็บเราอยู่นั่นเอง
เมื่อเราต้องการเริ่มต้นทำ favicon สำหรับบล็อกของเราเพิ่มความกิ๊บเก๋ ผมมีวิธีง่าย ๆ มาแนะนำครับ
  1. สร้างไฟล์กราฟฟิคขนาด 16 x 16 พิกเซลในโปรแกรมกราฟฟิค เช่น photoshop หรือโปรแกรมอื่น ๆ ตามถนัด
  2. เมื่อได้รูปที่ต้องการแล้ว เซฟไฟล์เป็นชื่อ favicon โดยให้มีนามสกุลเป็น gif , jpg, bmp หรือ png ก็ได้
  3. หลังจากนั้นให้แวะไปที่เว็บ FavIcon Generator
  4. ในเว็บ FavIcon Generator ให้ browse รูป� าพที่เราเพิ่งทำ ใส่ในช่อง Image to create icon from
  5. กดปุ่ม Create Icon
  6. เซฟไฟล์ที่ระบบสร้างมาให้ เก็บไว้ในชื่อ favicon.ico
  7. upload รูป favicon.ico ไว้บนเว็บเรา ในโฟลเดอร์เดียวกับหน้าแรกของเว็บ
เท่านี้เองครับ ไม่ยากเลย


เทคนิคการทำ SEO website

     

      การ ทำ SEO หรือ Search Engine Optimizer นั้นเป็นการทำให้โครงสร้างข้อมูลภายในเว็บของเราที่บรรจุอยู่ใน HTML ของเรา และพวก URL ของเรานั้น มีความหมายและทำให้ Crawler (ซึ่งต่อไปจะขอเรียกเป็น Search Engine เพื่อให้เข้าใจตรงกัน) นั้นสามารถเข้ามาเก็บข้อมูลในเนื้อหาของเราได้ง่าย และตรงกับความต้องการให้ได้มากทีสุด

      ซึ่งโดยปกติแล้วจะแนะนำให้ใช้ XHTML ร่วมกับ CSS โดยที่ XHTML นั้นเป็นส่วนที่ใช้สำหรับใส่ข้อมูลและมี Tag พวก XHTML ต่าง ๆ เข้ามายุ่งเกี่ยวกับเนื้อหาให้น้อยที่สุด โดยมีแต่ส่วนที่กำหนดพื้นที่สำหรับแสดงผลต่าง ๆ เป็นชื่อที่สื่อความหมาย โดยใช้พวก <div> และ <span> แล้วกำหนดพื้นที่ของ Layout ด้วยชื่อที่กำหนดใน id หรือ class และโยนหน้าที่การกำหนด Layout ต่าง ๆ ไปที่ CSS ทั้งหมด เพื่อลดขนาดของไฟล์ HTML ที่ตัว Search Engine จะดึงไปเพื่อทำการ Parse ข้อมูลออกมา ทำให้ Search Engine ใช้เวลาประมวลผลต่าง ๆ ลดลงได้มากด้วย แถมลด B/W ลงไปได้เยอะมาก ๆ ในกรณีที่เว็บของเรานั้นมี Priority ในการเข้ามา index ข้อมูลของ Search Engine สูง ๆ
เทคนิดง่าย ๆ แต่ได้ผลนั้นผมสรุปจาก Best and Worst practices for designing a high traffic website อีกทีครับ
  1. ใส่ Keywords หลัก ๆ ลงบน Title เพราะเป็นพื้นที่ที่ระบบ Search Engine ใช้ในการเข้ามา index ข้อมูลอันดับแรก ๆ
  2. ใช้ tag Heading (พวก <h*></h*> ต่าง  ๆ) ให้เป็นประโยชน์เพื่อให้ Search Engine นั้นเข้าถึงข้อมูลสำคัญ ๆ ในส่วนนี้ก่อนเสมอ เพราะ Search Engine จะมองว่า Heading เป็นเหมือนหัวหลักของเนื้อหาเพื่อนำไปใช้สรุปเนื้อหาตอนค้นหาต่อไป
  3. ใช้ alt, title, id, class และพวก caption ต่าง ๆ ที่ใช้อธิบายข้อมูลนั้น ๆ เพราะ Search Engine ไม่เข้าในว่ารูปภาพ หรือข้อมูลพวก Binary ต่าง ๆ ว่ามันคืออะไร
    เช่น <img src=”dog.jpg” alt=”Dog jumping into the air” />
  4. ใช้ META Tag ถึงแม้ว่า META Tag จะเป็นเทคนิคเก่า ๆ นับตั้งแต่มี WWW แต่ก็เป็นการดีที่เราควรจะมีไว้ เพราะ Search Engine ยังคงใช้ข้อมูลนี้เพื่อการจัดอับดับข้อมูลของเรา ในกรณีที่ข้อมูลในหน้านั้น ๆ มีมากเกินไป
  5. ใช้ Sitemap โดยการสร้าง Sitemap นั้นมีเครืองมือให้ใช้อยู่มากมาย และยิ่งใช้พวก CMS/Blogware ต่าง ๆ พวก Drupal, Wordpress, XOOP, Joomla/Mambo, PHP-nuke ฯลฯ ก็มี module/component/plug-in เข้ามาช่วยสร้าง Sitemap ให้แทบทั้งนั้น โดยประโยชน์ของ Sitemap นั้นช่วยให้ตัว Search Engine นั้นไม่ต้องวิ่งไต่ไปตามลิงส์ต่าง ๆ ของเว็บของเราเพื่อเข้าถึงข้อมูลทั้งหมด และยิ่งเว็บมีขนาดใหญ่และซับซ้อนมาก ๆ ยิ่งทำให้หน้าที่อยู่ในส่วนของรากลึก ๆ ต้นไม้ที่เป็นลำดับของลิงส์นั้นเข้าถึงยาก การมี Sitemap จึงช่วยในการบ่งบอกกับ Search Engine ได้ว่าเว็บของเรามีหลายอะไรอยู่บ้าง เพื่อให้ตัว Search Engine เข้ามา Index ข้อมูลได้รวดเร็วและสะดวกขึ้น
  6. ทำ URL Friendly หรือ Rewrite URL การทำ URL Friendly นั้นช่วยให้ Search Engine เข้าใจ URL ของเราและทำให้การเก็บ URL และแสดงผล URL เพื่อลิงส์กลับมาหน้าต่าง ๆ ของเว็บเรานั้นทำได้ง่ายมากขึ้น

 

 

เทคนิคการแต่งภาพ CHARACTERIZE ด้วย Photoshop


    1.ลบริ้วรอยบนใบหน้าที่เป็นจุด ๆ ด้วยเครื่องมือ Spot Healing Brush ปรับขนาดของหัวแปรงให้ใหญ่กว่ารอยเล็กน้อย แล้วจิ้มลงไปเลย

    2. ลบตัวหนังสือทิ้งด้วยเครื่องมือ Patch Tool โดยใช้เครื่องมือนี้ลากรอบตัวหนังสือที่เราต้องการลบ แล้วลากส่วนที่นี้ไปยังส่วนที่เป็นพื้นเรียบ ๆ โปรแกรมจะทำการก๊อบปี้ส่วนนั้นให้โดยมีการปรับให้ขอบให้เรียบเนียนกลมกลืนไป กับพื้นเดิมอีกด้วย ส่วนพื้นที่เล็ก ๆ บริเวณผม ต้องใช้เครื่องมือ Clone Stamp เข้าช่วย

    3.เปิดภาพที่มีตัวอักษรที่เราต้องการขึ้นมาลบรอบ ๆ ตัวอักษรด้วยเครื่องมือ Patch Tool แล้วก๊อบปี้ตัวอักษรมาไว้ในเลเยอร์ใหม่
    4.นำตัวอักษรมาเรียงกันให้เป็นคำที่ต้องการ เลือกเลเยอร์ตัวอักษรทั้งหมด แล้วลากไปวางไว้ที่ภาพที่เราต้องการทำ แล้วจัดการหมุนตัวอักษรให้ตรงกับภาพต้นฉบับ ใช้คำสั่ง Colour Balance และ Replace Colour ปรับสีพื้นของตัวอักษรใหญ่ให้ตรงกับของเดิม

   5.ปรับโทนสีของภาพด้วยคำสั่ง Level แล้ว ใช้คำสั่ง Merge Visible (Shift+Ctrl+Alt+E) แล้วใช้คำสั่ง Filter>Brush Strokes>Angled Strokes เปลี่ยน Blending Mode ของเลเยอร์นี้ให้เป็น Soft Light

   6.ก๊อบปี้เลเยอร์เมื่อกี้ขึ้นมาอีกเลเยอร์นึง เปลี่ยน Blending Mode ให้เป็น Multiply ภาพจะดูเข้มขึ้น ให้เพิ่ม เลยเยอร์มาสค์บังในส่วนที่ต้องการให้มีความสว่างเท่าเดิม ใช้คำสั่ง Merge Visible อีกครั้งหนึ่ง 


แล้ว ใช้คำสั่ง Image>Adjustments>Desaturation ภาพจะกลายเป็นขาวดำ ใช้คำสั่ง Colour Balance กับเลเยอร์นี้ เพื่อให้ได้ภาพมีสีอมม่วง จากนั้นจึงเปลี่ยน Blending Mode ให้เป็น Muitiply ลด Opacity ลง ใช้ยางลบขอบฟุ้ง ลบส่วนที่ต้องการเน้น ซึ่งก็คือใบหน้าของตัวแบบและตัวอักษรข้างตัวแบบเป็นขั้นตอนสุดท้าย

 


สมัครสมาชิก: บทความ (Atom)