08 มกราคม 2009

ทำ Web 2.0 Badges ติด Blog กันดีกว่าาาา


วันนี้ผมได้ปรับแต่งโลโก้ของ blog นิดหน่อยครับเนื่องจากยังเป็น บล็อกใหม่ ในวงการอยู่ก็เลยนึกขึ้นได้ว่าน่าจะทำเป็น badges แบบเว็บ 2.0 ขึ้นมาใช้กะเค้าบ้าง จะได้ไม่เฉย อิอิ Badge มันคืออะไร? มันก็คือเข็มกลัดที่ติดอยู่กะเสื้ออะไรพวกนี้แหละครับ แล้วจะเอาไปติดกับเว็บไซต์เพื่ออะไรละก็จุดประสงค์หลักของมันก็เพื่อให้เป็นจุดเด่นของหน้าเว็เพจนั้นๆครับ ซึ่งที่เห็นกันส่วนใหญ่ มักจะเจอคำว่า Free หรือ New หรืออะไรก็แล้วแต่ที่เค้าอยากจะให้มันเด่น ผมก็เลยจัดการทำการสาธิตวิธีการทำแบบง่ายๆกัน โดยใช้เจ้า Photoshop นี้แหละครับ ไม่ต้องไปไหนไกลตัวเลย หน้าตาก็ออกมาเป็นแบบ ตรงแบบเนอร์หัว บล็อกของผมนี้แหละครับ มาลองดูวิธีการทำกันเลยดีกว่าครับ


1.สร้างไฟล์งานขึ้นมาใหม่ครับ ขนาดใหนก็ได้
2.สร้างเลเยอร์ใหม่ขึ้นมาในที่นี้คือ เลเยอร์ 1 นะครับ
3.ทำการเลือกสี ข้างหน้าและด้านหลัง ตามนี้นะครับ หรือแล้วแต่ท่านจะชอบสีใหนแต่ด้านหน้าจะต้องเป็นสีที่อ่อนกว่าด้านหลังเสมอครับ
4.เลือก Polygon Tool แล้วตั้งค่าตรง Tool Bar คือ Sieds เป็น 20 ครับ
5.ทำการลาก ลงบนเฟรมครับ โดยกดปุ่ม Shift+Alt ครับ เลือกกึ่งกลางของเฟรมจะทำให้ได้ส่วนกันครับ

6.เมื่อลากเสร็จให้ปล่อยเมาส์ครับ แล้วคลิกเมาส์ขวาที่เฟรม 1 ครั้ง จากนั้นเลือก คำสั่ง Make Selection จะมีหน้าต่างโผล่ มาให้คลิกเลือก Ok ครับ โดยที่ ช่อง Feather Radius = 0 ครับ

7.จะได้ Selection ขึ้นมาตามรูปครับ
8.เลือกเครื่องมือ Gradient Tool ตั้งค่า ที่ Option Tool Bar เลือก Radial Gradient แล้วทำการลากเพื่อลงสีที่เราเลือกไว้ในตอนแรก ลากจากกึ่งกลางภาพนะครับจะได้ตามรูป เสร็จแล้วกด Ctrl+D เพื่อลบSelection ออก

9.สร้างเลเยอร์ขึ้นมาใหม่อีก 1 เลเยอร์ ในที่นี้ชื่อ Layer 2 ครับ
10.เลือก Pen Tool ตั้งค่าเป็น Paths จาก Property Tool Bar แล้วทำการลากเส้นเพื่อจะสร้างเงาตามรูป โดยแบ่งเป็นครึ่งในลักษณะเฉียง เมื่อเสร็จแล้วก็ให้ คลิกเมาส์ขวา แล้วเลือกคำสั่ง Make Selection จะได้เส้น Selection มาจากนั้นกดปุ่ม Ctrl+Del ครับเพื่อเติมสีพื้นหลังให้กับ เส้น Path ที่เราสร้างไว้

11.เลือกที่ Layer 1 ครับแล้วทำการกด Ctrl+คลิกซ้าย เพื่อเป็นการสร้าง Selection ของรูปทรงที่อยู่ในเลเยอร์นั้นครับ
12.เลือกทำงานใน Layer 2 ครับ จากนั้นกดปุ่ม Ctrl+Shift+i เพื่อสลับการเลือก Selection ครับ
13.กดปุ่ม Delete เพื่อลบ ชิ้นงานส่วนเกินที่เราไม่ต้องการออก จากนั้นกด Ctrl+D เพื่อลบ Selection ออกครับ ก็จะได้ตามภาพ

14.เลือกทำงานใน Layer 2 ครับ จากนั้นไปที่ ตั้งค่า Set The Blending Mode For The Layer เลือกเป็น Soft Light ครับ

15.เลือกทำงานใน Layer 1 นะครับ แล้วเลือก Add a Layer Style เลือกที่ Stroke ครับ

16.ปรับตั้งค่าง่ายๆตามนี้ครับ Size 5 px(หรือตามความชอบและเหมาะสม) ตั้งค่า Color ตามสีของ Background หรือเลือกสีที่ใกล้เคียงกันมากที่สุด โดยเน้นให้มีความเข้ม อีกนิดนึงครับ แล้วก็ OK ได้เลย

17.เลือก Type Tool ครับแล้วพิมพ์ตัวหนังสือตามที่ต้องการ
18.เลือกสี ForeGround เป็นสีขาวครับ แล้วกดปุ่ม Alt+Del เพื่อเติมสีขาวให้ตัวหนังสือ

19.เลือกที่ Add a Layer Style แล้วปรับตามนี้ครับ Size 3 px, Color เลือกตามสีของ Back Ground ครับ หรือสีอะไรก็ได้แล้วแต่ความเหมาะสม เลือก Opacity เป็น 70% ครับ
นอกเหนือจากที่กล่าวมาแล้วนั้น นอกจากที่จะเป็นรูปดาวอย่างเดียวแล้วนั้น ยังมีอีกหลายรูปทรงครับ เช่น รูปดอกไม้เป็นต้อน ทั้งนี้ก็ต้องอยู่ที่ใครจะมาประยุกต์เป็นแบบใหนแล้วนะครับ.......

1 Comments, แสดงความคิดเห็นที่นี้:

  1. ขอบคุณครับ น่าจะพอทำตามได้ เดี๋ยวจะลองดู ผลเป็นประการใดจะมารายงานให้ทราบครับ
    เอ..แล้ววิธีนำไปแปะล่ะครับ ทำไง ผมก็ยังไม่ได้ป้ายแดงด้วยซ้ำนะนี่..
    รบกวนๆๆๆ ขอบคุณอีกครั้งครับ

    ตอบลบ

สามารถแสดงความคิดเห็นได้ที่นี้!!