2 THEME 4 FUN,,สอนทำธีม{2}

ลำดับตอนที่ #23 : ☀ สอนทำ ☀ กรอบเลื่อนน่ารักๆ Complete >w

สอนทำ กรอบเลื่อนน่ารักๆ

ใครที่รอทำตอนนี้อยู่มาร์ขอให้ไปทำรูปกรอบเลื่อน่ารักๆไว้ก่อนได้เลยจ้า
หรือจะเอากรอบตัวอย่างที่มาร์ทำไว้ๆไปใช้ก่อนก็ได้น้าา

ในรูปนี้มาร์จะทำกรอบเลื่อนๆ ที่พิมข้อความได้ตรงวงกลมสีขาวจ้าาา

ขั้น 1 เปิดโปรแกรม photoshop cs..อะไรก็ได้ขึ้นมาจ้าา หรือใครจะใช้ ImageReady ก็ได้น่ออ

ขั้น 2 เปิดไม้บรรทัดขึ้นมา สำหรับบ้านใครที่ไม่มี ให้ไปที่แถบ View(อยู่ข้างบนสุดอ่ะ) --> Rulers
แล้วมันจะเป็นแบบนี้ **สังเกตตรงรอบจะมีขีดๆแล้วตัวเลขกำกับ

ขั้นที่ 3 เอาเมาส์ไปกดค้างตรงแถบไม้บรรทัด(ตรงสีขาวๆขีดๆ) แล้วลากเป็น 3*3 ช่องแบบรูปข้างล่างนี้น่ออ
**สังเกต มาร์จะทำช่องตรงที่เราจะทำเป็นกรอบเลื่อนพิมพ์ข้อความได้ไว้ใหญ่หน่อย

ขั้น 4  เลือกเครื่องมือ Rectangular  Marquee Tool

มาคลุมครอบตารางในช่องที่ 1 แล้วอ่านค่าความ กว้าง(w) สูง (h) ที่ Info

สำหรับคนที่หา Info ไม่เจอ ให้ไปที่ Window --> Info (F8)

จากนั้นก็จดค่าไว้ แล้วก็คลุมที่ช่องที่ 2-9 แล้วก็จดค่าแต่ละช่องไว้

สำหรับกรอบที่มาร์จะทำนี้มีขนาดเท่านี้ค่ะ

W::151 H::53	W::113 H::53	W::56 H::53
W::151 H::230	W::113 H::230	W::56 H::230
W::151 H::97	W::113 H::97	W::56 H::97

ขั้น 5 หลังจากที่จดค่าทั้ง 9 ช่องแล้วเราจะทำการลงโค้ดกันเลย

<TABLE height=ความสูงของภาพ cellSpacing=0 cellPadding=0 width=ความกว้างของภาพ align=center background=Urlของภาพ border=0>
<TBODY>
<TR>
<TD noWrap width=ช่องที่-1 height=ช่องที่-1>&nbsp;</TD>
<TD width=ช่องที่-2 height=ช่องที่-2>&nbsp;</TD>
<TD noWrap width=ช่องที่-3 height=ช่องที่-3>&nbsp;</TD></TR>
<TR>
<TD noWrap width=ช่องที่-4 height=ช่องที่-4>&nbsp;</TD>
<TD width=ช่องที่-5 height=ช่องที่-5>
<DIV style="SCROLLBAR-FACE-COLOR: #โค้ดสี; SCROLLBAR-HIGHLIGHT-COLOR: #โค้ดสี; OVERFLOW: auto; WIDTH: ช่องที่-5px; SCROLLBAR-SHADOW-COLOR: #โค้ดสี; COLOR: #โค้ดสี; SCROLLBAR-3DLIGHT-COLOR: #โค้ดสี; SCROLLBAR-ARROW-COLOR: #โค้ดสี; SCROLLBAR-DARKSHADOW-COLOR: #โค้ดสี; HEIGHT: ช่องที่-5px" align=center><STRONG></STRONG>
<P style="FONT-SIZE: 12px; COLOR: #000000" align=center>พิมพ์ตรงนี้นะจ๊ะ</FONT></P></DIV></TD>
<TD noWrap width=ช่องที่-6 height=ช่องที่-6>&nbsp;</TD></TR>
<TR>
<TD noWrap width=ช่องที่-7 height=ช่องที่-7>&nbsp;</TD>
<TD width=ช่องที่-8 height=ช่องที่-8>&nbsp;</TD>
<TD noWrap width=ช่องที่-9 height=ช่องที่-9>&nbsp;</TD></TR>
</TBODY>
</TABLE></FONT>

เมื่อลงแล้วก็ทำการกดแทรกโค้ดเป็นอันเสร็จ *0*

	พิมพ์ตรงนี้นะจ๊ะ . . . Test!! แจกโค้ดด้วยน่ออ <TABLE height=380 cellSpacing=0 cellPadding=0 width=320align=center background=http://image.ohozaa.com/ig/work1112.jpg border=0> <TBODY> <TR> <TD noWrap width=151 height=53>&nbsp;</TD> <TD width=113 height=53>&nbsp;</TD> <TD noWrap width=56 height=53>&nbsp;</TD></TR> <TR> <TD noWrap width=151 height=230>&nbsp;</TD> <TD width=113 height=230> <DIV style="SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH:113px; SCROLLBAR-SHADOW-COLOR: #fdc2c4; COLOR: #fdc2c4; SCROLLBAR-3DLIGHT-COLOR: #fdc2c4; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR:#fdc2c4; HEIGHT:230px" align=center><STRONG></STRONG> <P style="FONT-SIZE: 12px; COLOR: #000000" align=center>พิมพ์ตรงนี้นะจ๊ะ</FONT></P></DIV></TD> <TD noWrap width=56 height=230>&nbsp;</TD></TR> <TR> <TD noWrap width=151 height=97>&nbsp;</TD> <TD width=113 height=97>&nbsp;</TD> <TD noWrap width=56 height=97>&nbsp;</TD></TR> </TBODY> </TABLE></FONT>

ไม่เข้าใจตรงไหนถามได้จ้าา
เดี๊ยวว่างๆจะมาสอนทำกรอบเลื่อนแบบง่ายๆกว่านี้นะ
เอาแบบยากๆไปทำก่อนเด้ออ 555+

ตอนนี้กำลังเร่งอัพแก้โค้ดธีมอ่ะ