ลำดับตอนที่ #4 : ••Tip บทความ•• มาทำแบนเนอร์กัน! ปรับปรุง (12/09/09)

•• มาทำแบนเนอร์กัน! ••
 

เทมมาแก้ไขบทความอันก่อนนะคะ เพราะอธิบายไว้ไม่ค่อยละเอียดเลย

ทำให้มีหลายคนไม่เข้าใจ เอาหละ มาอ่านคำอธิบายชุดใหม่กันนะ~

………………………………………………………………………………

ข้างล่างนี้เป็นเมนูนะคะ เลือกกดอ่านได้ตามใจชอบเลย J

  แบนเนอร์ คืออะไรหนอ

  ขนาดของแบนเนอร์ที่ชาว Dek-d.com เค้าใช้กัน ^^

  วิธีทำแบนเนอร์ด้วยโปรแกรม Photoshop

  วิธีสร้างโค้ดแบนเนอร์

.............................................................................................................

แบนเนอร์ (banner) คือ ป้ายที่มีลิงค์นำไปสู่เว็บไซต์

เอาแบบง่ายๆ ก็คือ รูปที่ทำหน้าที่โยงลิงค์ไปยังเว็บของเรานั่นเอง

……………………………………………………………………………….

ขนาดของแบนเนอร์ที่ชาวเด็กดีใช้กันมี 2 แบบ คือ

1.    88*31 pixel  :   เป็นขนาดเล็กกะทัดรัด แต่ยังไม่นิยมใช้มากนัก ส่วนใหญ่จะเป็นการติดเพื่อให้เครดิตบทความค่ะ

2.    250*75 pixel   :   เป็นขนาดที่มีคนใน dek-d.com นิยมใช้กันมากที่สุดค่ะ

.............................................................................................................

วิธีการทำแบนเนอร์ด้วยโปรแกรม Photoshop

พอลองอ่านวิธีทำจากเว็บไซต์อื่นแล้ว รู้สึกว่าถ้าเทมไม่มีพื้นฐานในเรื่อง Photoshop มาก่อน ก็คงไม่เข้าในแน่ =_=;; เล่นอธิบายข้ามไปข้ามมา ...

ดังนั้น เทมเลยจะมาสอนเองค่ะ แบบ step by step คนที่ทำเป็นแล้วก็ข้ามไปเลยนะคะ

เปิดโปรแกรม Photoshop ขึ้นมาก่อน

ปล. ใครที่ยังไม่มีโปรแกรม Photoshop ใช้ คลิกที่นี่ ค่ะ -_- (เป็นความลับนะห้ามบอกใคร)

 1. 

 2.   
         เสร็จแล้วกดปุ่ม  

3.     

4.   

5.    คลิกเครื่องมือ  

6.   

7.  

8. 
    เนื่องจากรูปแบบของแบนเนอร์แต่ละคนจะไม่เหมือนกัน 
       และไม่มีแบบแผนในการทำที่แน่นอน เทมก็เลย เสนอวิธีที่ประหยัดเวลา 
       และง่ายมากๆ  นั่นก็คือ การใช้ action ค่ะ ^^ ลองมาดูวิธีทำกันเลยนะ

       ขั้นแรกต้องโหลด Action มาเก็บไว้ในเครื่องก่อนค่ะ
       หาโหลดได้ที่ >> Free •• Action  หรือในบทความ Photpshop ต่างๆ ค่ะ

9.   

10. 

11. 
       เสร็จแล้วกดปุ่ม

12. 
      12.1) คลิกที่ลูกศร (ดังลูกศรสีเหลือง) เพื่อเป็นการเปิดไฟล์ action ออกมา
        12.2) คลิกที่ Action 
        12.3) คลิกปุ่ม Play Selection

13.  หลังจากใช้ action แล้ว แบนเนอร์ของเราจะออกมาแบบนี้ ^^ 
     

14.  ตกแต่งตัวหนังสือ หรือลง texture ตามชอบใจเลยค่ะ 
           (หากใครไม่รู้ว่าจะทำยังไงดี แนะนำว่าให้ลองดูลิงค์ที่เกี่ยวข้องข้างล่างนะคะ จะมีวิธีสอนทำตัวอักษรกระพริบอยู่ค่ะ ^^)
           ทำเสร็จแล้วอย่าลืมเอามาอวดกันบ้างน้า >_<
          

    หมายเหตุ

·       Font (แบบอักษร) ที่ใช้ในการทำแบนเนอร์ มักจะใช้เป็น pixel font เนื่องจากมีขนาดเล็กค่ะ ลองไปโหลดกันได้ที่ pixelfonts.style-force.net

มีตัวอย่างมาให้ดูด้วยค่ะ

·       Photoshop ของเทมเป็นเวอร์ชัน CS4 นะคะ ของใครเป็น CS1-2 อาจต่างไปจากนี้ ลองดูวิธีการใส่ action ของ Photoshop CS2 ได้ที่ลิงค์ข้างล่างค่ะ http://www.siamzone.com/board/view.php?sid=964109

แต่เทมเกรงว่ารูปจะหมดอายุ จึงขออนุญาตนำมาไว้ในบทความนี้

เฉพาะตรงที่แตกต่างกันกับเวอร์ชัน CS4 นะคะ

......................................................................................................................

วิธีการสร้างโค้ดแบนเนอร์

คลิกเมนู Start  > All Programs > Accessories > Notepad

ลากคลุมดำโค้ดข้างล่างนี้ แล้วคลิกขวา > copy

ไปวาง (paste) ในโปรแกรม Notepad ที่เปิดไว้

<a href="url ไอดีหรือบทความของเรา" target="_blank"><img border=0 src="url แบนเนอร์" alt="ข้อความอธิบายไอดีหรือบทความ”></a>

การแก้โค้ดแบนเนอร์

* ให้ใส่ url ไอดีหรือบทความที่เราต้องการ ลงไปแทนคำว่า url ไอดีหรือบทความของเรา

** ใส่ url ของรูปแบนเนอร์ที่เราทำเสร็จแล้วอัพโหลดขึ้นไปบนเว็บเรียบร้อยแล้ว ลงไปแทนคำว่า url แบนเนอร์

*** ใส่คำอธิบายไอดีหรือบทความของเราลงไปตามชอบใจ แทนคำว่า ข้อความอธิบายไอดีหรือบทความ ค่ะ ^^ ตรงนี้จะใส่สัญลักษณ์พิเศษด้วยก็ได้

เมื่อแก้โค้ดเสร็จแล้ว ให้ลากคลุมดำโค้ดทั้งหมด ไปวางที่หน้าแก้ไขบทความ ในช่อง แทรกโค้ด HTML ตรงตำแหน่งที่ต้องการค่ะ เท่านี้ก็เสร็จแล้ว >___<
......................................................................................................................

ปล. (ปิดท้าย ^O^)

1.  ใครที่ยังหา url ไม่เป็น มาดูตรงนี้นะคะ

url ของไอดีหรือบทความของเรา หาดูได้โดยเปิดหน้าไอดีหรือบทความของเราขึ้นมา

แล้ว copy ตรงช่อง address หรือช่องพิมพ์เว็บลงไปนั่นแหละค่ะ

 

2.  การหา url ของรูป คลิกขวา เลือก properties

url จะรูปในช่อง address ให้ copy มาให้หมดค่ะ :))

 

3.  การอัพโหลดรูปขึ้นเว็บ มาดูวิธีการได้ที่นี่ค่ะ >> คลิก จ้ะ

4.  ลิงค์ที่เกี่ยวข้องในการทำแบนเนอร์

อักษรกระพริบไล่ตัว เหมือนแบนเนอร์เรา

How 2 •• How 2 •• ทำแบนเนอร์แบบไล่ตัวอักษร

How 2 •• การใส่ไฟล์ .gif ลงในรูป .jpg (100%)

Request •• Banner #แบบที่1

Learn Photoshop :: สอนวิธีทำแบนเนอร์ (Basic)

รูปเยอะไปหน่อย แต่เทมคิดว่า คงเข้าใจกันแหละ เนอะ ^^
สงสัยยังไงก็ถามได้ที่คอมเม้นท์ค่ะ


t