การทำ Borderz…เองนะ

Posted: มิถุนายน 10, 2006 in Decorating Blog
หลังจากเก็บเกี่ยวจากชาวบ้านเขามาหลายครั้ง ถึงคราวทำเองเสียที…
 

เ ริ่มจากต้องใช้ Photoshop นะ เปิดรูปที่ต้องการทำเป็นกรอบขึ้นมา สร้างเส้น Guide (เส้นสีฟ้า ลากจาก ขอบบรรทัด) แบ่งรูปออกเป็น เก้าส่วน โดยส่วนตรงกลาง หรือ ส่วนที่ 5 กำหนดให้เป็นพื้นที่ ที่จะใส่ข้อความนะ

  ไปที่เครื่องมือ Slice Tool

 เลือก Slices from Guide (เราว่าวิธีง่ายกว่าการที่เราจะไปทำ สไลซ์ ทีละส่วน

 ภาพของเราจถูกแบ่งเป็น เก้าส่วนตามรูป

 ไปที่ View เลือก Snap แบบ Slice ซะ

  ไปที่เครื่องมือ Rectangle  ทาบวัดกรอบแต่ละส่วนที่เราแบ่งไว้แล้วดูขนาดที่ได้นะ

   ดูจากหน้าต่างที่ชื่อ ว่า Info ถ้าหาไม่เจอไปที่ Windows –> Info

 จากนั้นก็ อัพรูปขึ้นเวปฝากรูป แล้วก็ใช้ code ข้างล่างเปลี่ยนไปตามที่อธิบายแต่ละสี
 
<TABLE height=273 cellSpacing=0 cellPadding=0 width=359 align=center background=http://i75.photobucket.com/albums/i309/mini-cat/fdinga/dinga06.gif border=0>
<TBODY>
<TR>
<TD noWrap width=10 height=39>&nbsp;</TD>
<TD width=179 height=39>&nbsp;</TD>
<TD noWrap width=170 height=39>&nbsp;</TD></TR>
<TR>
<TD noWrap width=10 height=215>&nbsp;</TD>
<TD width=179 height=215>
<DIV style="SCROLLBAR-FACE-COLOR: #F4E5D3; SCROLLBAR-HIGHLIGHT-COLOR: #78461C; OVERFLOW: auto; WIDTH: 179px; SCROLLBAR-SHADOW-COLOR: #F4E5D3; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #F4E5D3; SCROLLBAR-ARROW-COLOR: #78461C; SCROLLBAR-DARKSHADOW-COLOR: #78461C; HEIGHT: 215px" align=center><STRONG></STRONG>
<P style="FONT-SIZE: 12px; COLOR: #998a07" align=center>แก้ไขข้อความ</FONT></P>
<P style="FONT-SIZE: 12px; COLOR: #998a07" align=center>Text Here</FONT></P></DIV></TD>
<TD noWrap width=170 height=215>&nbsp;</TD></TR>
<TR>
<TD noWrap width=10 height=19>&nbsp;</TD>
<TD width=179 height=19>&nbsp;</TD>
<TD noWrap width=170 height=19>&nbsp;</TD></TR>
</TBODY>
</TABLE>
</FONT>


Hight = ความสูง
Widht = ความกว้างนะ


เอาหละ เมื่อได้ตัวเลข พร้อมกับโค้ดแล้วนะ มาดูตรงนี้กัน


สีม่วง
คือ ความกว้าง + สูง ของรูป นะคะ
สีน้ำเงิน คือ URL ของรูปที่ฝากไว้
สีเขียว คือ ความกว้าง+สูง ของทั้ง 9 ส่วนที่เราแบ่งไว้ ไล่ไปตามลำดับ 1-9 โดยส่วนที่ 5 คือส่วนที่จะใช้เขียนข้อความ
สีฟ้า คือ ความกว้าง+สูง ของ ส่วนที่เราแบ่งไว้ตรงกลาง เพื่อใส่ สกอลล์บาร์
สีส้ม คือ โค้ดสกอล์บาร์ (เปลี่ยนสีกันเองนะจ๊ะ ลองมั่วๆดู ว่าอะไรคืออะไรนะ)
สีแดง คือ ส่วนที่ไว้ใส่ข้อความค่ะ

     
 

 

 
     
ความเห็น
  1. Piyavat พูดว่า:

    ไม่มี Photo Shop ใช้ Winamp แทนได้ป่ะครับ ?
     
    กั่กๆๆๆๆ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s