Thaigraph

 

   

ค้นหา
Thaigraph เว็บบอร์ด Webmaster Tip เทคนิควิธีการสร้างตาราง dot p ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 6154|ตอบ: 0
go

เทคนิควิธีการสร้างตาราง dot pixels (สมาชิกขอมา)

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 6-8-2008 20:26 |แสดงโพสต์ทั้งหมด
มีท่านสมาชิกเมล์มาถามธนาว่าทำตารางแบบเป็นจุดๆ แบบไทยกราฟทำยังไง ธนาจะใจร้ายได้ไง ก็เลยมาเฉลยวิธีการทำโดยทำเป็นบทความซะเลย หมายท่านจะได้วิทยาทานไปด้วยหละ และสามารถ นำไปใช้งานออกแบบเวปได้เลยหละ เอาหละมาลองดูขั้นตอนวิธีการทำกันเลยดีกว่า

 

 

ขั้นตอนที่1. ก่อนอื่นต้องทำการสร้างไฟล์รูปแบบ dot ใน Photoshop ก่อนหละโดยสร้างไฟล์ใหม่ ขนาด 4 * 4 pixels หลังจากได้ไฟล์ใหม่แล้วก็ทำการขยาย (Ctrl+) ประมาณ 1600% จากนั้นสร้าง Layer ใหม่ แล้วใช้อุปกรณ์ Marquee tool สร้าง Selection รูปสี่เหลี่ยนโดยให้แดรกเม้าส์ออกจากจุดศูนย์กลาง (กด Alt+Shift) เมื่อได้ Selectionตามต้องการแล้วจากนั้นให้ทำการ Fill สีดำลงไปโดยมาที่ Edit --> Fill Use,black ดังตัวอย่าง.

 

 

หลังจากนั้นเมื่อทำการ Fill สีลงไปแล้วให้ทำการสร้าง Selection ครอบให้สี่เหลี่ยมอยู่ตรงกลางแล้วมาที่คำสั่ง Image ---> Crop เพื่อให้ได้เนื้อที่ ที่มีความกว้างเท่ากันทุกมุม ดังตัวอย่าง.

 

จากนั้นให้ทำการ Save เป็น dotpixels.gif เพื่อนำมาใช้ในเวป

ขั้นตอนที่2. ในการซ้อน Table ที่มีลักษณะแบบ dot นั้นจะมีสองแบบด้วยกันคือ การซ้อนแบบเป็นกรอบ

เริ่มจากการใส่ table ลงไปตามขนาดที่เราต้องการค่าก็ปรับดังภาพ.

 

 

จากนั้นก็ทำการใส่ BG images ลงไปใน Table โดยใช้ dotpixels.gif ที่เราสร้างใน Photoshop เป็นพื้นหลังก็จะได้ดังภาพ.

 

 

ขั้นตอนที่3. หลังจากนั้นให้ทำการซ้อน Table เข้าไปอีก Table หนึ่งโดยก่อนแทรกต้องให้ เคอเซอร์อยู่ใน Table ก่อนจากนั้นให้ทำการ แทรกโดยการคลิ๊กที่รูป Table จากนั้นให้ทำการปรับค่าต่างดังภาพ.

 

 

จากนั้นให้ทำการใส่พื้นหลังสีตามที่เราต้องการเพื่อจะทำให้บัง dotpixels.gif ไม่ให้แสดง แต่ Cellspace จะกลายเป้นช่องไฟให้มองทะลุเห็นพื้นหลังเอง โดยขนาดของ Cellspade จะเท่ากันความสูงความกว้างของ dotpixels.gif (3*3 pixels) ซึ่งภาพจะต้องมีมุมเท่ากันทั้งหมด ถึงจะดูเป็น Dot Table ออกมาให้เห็นดังตัว อย่าง.

 

 

เมื่อทำการ Preview ใน Dreamweaver

 

 

เมื่อทำการ Preview ใน Borser

ขั้นตอนที่4. การแทรก Dot pixels โดยทำให้เป็นเส้นขั้นของ Table เมื่อท่านทำการแทรก Table มาสาม Table โดยการตั้งค่าต่างๆดังภาพ.

 

 

จากนั้นให้ทำการเลือกใส่ Bg Image เป็น dotpixels.gif Table ใด Table หนึ่ง.

 

 

แล้วให้ทำการแทรก Images dotpixels.gif ลงใน Table อีกทีหนึ่ง (เอาตัวของมันเองเป็นพื้นหลังมันเอง)

แล้วให้ทำการปรับความกว้างของ Table ให้เท่ากับความกว้างของ Images (dotpixels.gif=3*3 pixels)

 

 

Table ก็หดเท่ากับความกว่างของ image (dotpixels.gif = 3*3 pixels) ก็จะได้เส้นขั้น dotpixels ดังภาพ.

 

 

เป็นไงบ้างขอพอจะทำกันได้ไหมขอรับ หลักการนี้เป็นหลักการตายตัวเลยขอรับที่สามารถประยุกต์ ได้ทุกโปรแกรมเลย ในการทำเวป ได้ผลยังไงก็ติชมบทความกันมาได้นะขอรับ ...

 

"ขอปัญญาเกิดแด่ท่าน"

ธนา mastertana

Thaigraph

GMT+7, 30-8-2014 17:12 , Processed in 0.096267 second(s), 19 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.