Photoshop สร้าง Banner


ลองนำไปใช้ดูนะ

การทำหัวบล็อก ก็มีไอเดียการทำตามราศีเกิด  โดยของผู้เขียน  ก็คือ aquarius หรือราศีกุมภ์นั่นเอง เป็นหัวบล็อกที่บ่งบอกถึงตัวผู้เขียนแต่ละคน วิธีการก็คือ การนำรูปประจำราศี รูปใดก็ได้ ที่ชอบแต่ต้องเป็นรูปที่ถูกลิขสิทธ์ ด้วยนะ หรือใครที่มีฝีมือหน่อย ก็สร้างขึ้นมาเองได้เลย  ขั้นต่อมาก็คือการสร้างข้อความประจำราศีเกิด  ตามมาดูวิธีทำ ซึ่งถือเป็นไฮไลท์ ของหัวบล็อกกับโปรแกรม photoshop ที่นี่ ค่ะ

ตัวอย่างที่ทำเสร็จแล้ว    

                                  Code CSS              

<p style="margin: 0cm 0cm 0pt" class="MsoNormal">                     div#title{        </p>      <p style="margin: 0cm 0cm 0pt" class="MsoNormal">                background-image:url("/file/pook_ja/title_rasee.gif");   </p>   <p style="margin: 0cm 0cm 0pt" class="MsoNormal">                background-repeat:no-repeat; </p>   <p style="margin: 0cm 0cm 0pt" class="MsoNormal">                background-position:center center; }  </p> <p style="margin: 0cm 0cm 0pt" class="MsoNormal"></p> <p style="margin: 0cm 0cm 0pt" class="MsoNormal"></p> <p style="margin: 0cm 0cm 0pt" class="MsoNormal"></p>                 div#title span {display:none;} <p style="margin: 0cm 0cm 0pt" class="MsoNormal">             </p> <p style="margin: 0cm 0cm 0pt" class="MsoNormal">                    นำ Banner ที่ทำเสร็จแล้วอัพไฟล์ขึ้น จากนั้น นำ Url ของคุณมาใส่แทนตรง บรรทัดนี้ background- image:url  /file/pook_ja/title_rasee.gif");   เช่น Url   http://gotoknow.org/file/pook_ja/title_rasee.gif ก็ตัดออกให้เหลือแค่  /file/pook_ja/title_rasee.gif แค่นี้ก็ได้ Banner ใหม่สวยสมใจแล้ว</p>

คำสำคัญ (Tags): #css#banner
หมายเลขบันทึก: 60666เขียนเมื่อ 17 พฤศจิกายน 2006 16:05 น. ()แก้ไขเมื่อ 6 กันยายน 2013 17:38 น. ()สัญญาอนุญาต: จำนวนที่อ่านจำนวนที่อ่าน:


ความเห็น (6)
ตัวอักษรหลอดไฟสวยดีค่ะ
แต่งหัว blog ตามราศีเกิด แหม...ไอเดียบรรเจิดนะค่ะ  ^^
น่ารักจังเลยคะ นำไอเดียดีๆมาฝากอีกนะคะ

พี่จอยอยากทำเป็นบ้างค่ะ ทำไงดีค่ะ ทำไม่เป็นค่ะ งงมากเลยค่ะ ช่วยสอนหน่อยน่ะค่ะ

แล้วจะหาภาพกาตูนเกาหลีสวยๆได้ที่ไหนค่ะ

ขอบคุณมากๆค่ะ

สงสัยตรงจุดไหนก็ถามทิ้งไว้ได้นะคะ แล้วจะเข้ามาตอบให้

โ้อ้ๆ มันทำอย่างงี้นี่เอง ขอบคุณค่ะ

พบปัญหาการใช้งานกรุณาแจ้ง LINE ID @gotoknow
ClassStart
ระบบจัดการการเรียนการสอนผ่านอินเทอร์เน็ต
ทั้งเว็บทั้งแอปใช้งานฟรี
ClassStart Books
โครงการหนังสือจากคลาสสตาร์ท