CSS : Cursor[2]

posted on 07 Nov 2006 18:28 by lemonice  in TuTorial


เหอ...โรคดองของเรากำเริบตามเคย คราวนี้ก็มาอัพการทำ Cursor ซักกะทีน่ะ อิอิ
ขั้นแรก การทำ Cursor เราจะต้องขอใช้ตัวช่วยก๊าบ..บ.. เพราะฉะนั้นเราต้องหา โปรแกรมที่ใช้ทำตัว Cursor หรือ โปรแกรมแปลงภาพ .ico มา

.ico .cur และ .ani จะเป็นนามสกุลไฟล์ของ cursorอ่ะ
ส่วนข้อแตกต่าง
.ico จะเป็นไฟล์สำหรับ icon
.cur เป็นไฟล์ cursor
.ani จะเป็น Cursor ที่ขยับได้อ่ะนะ
ส่วนที่เราจะเอามาทำ Cursor ใน Blog มันก็ใช้ได้หมดทั้ง 3 อัน ไม่ต้องห่วง


สำหรับตัวโปรแกรมที่จะใช้ทำ มันก็จะมี 3 แบบ คือ

1. โปรแกรมที่ออกแบบเพื่อทำ cursor โดยตรง ซึ่งมีทั้งฟรีและไม่ฟรี แต่ของฟรี ใครๆก็ชอบใช่ป่ะ เออ.. ก็จะเอาของฟรีมาดูกัน

AWicons Lite File Size : 1.53 MB

โปรแกรมนี้หน้าตาดูดีเลยล่ะ ใช้งานง่ายใช้ได้เลยทีเดียว โปรแกรมนี้ทำได้ทั้ง icon , cursorและAnimated Cursor และมีฟังก์ชั่น หลายๆตัวที่ทำให้ง่ายในการทำไอคอน

AWicons Lite File Size : 1.53 MB

2. โปรแกรมแปลงไฟล์ โปรแกรมนี้สำหรับพวกที่ติดการใช้ Photoshop หรืออันอื่นๆ เราก็ Save ภาพ ออกมาตามปกติ เช่น .gif .jpeg .bmp หรืออื่นๆ ที่ โปรแกรมแปลง อยากได้ แล้วก็เปิดโปรแกรม แล้วก็คลิกตามที่มันบอก เราก็จะได้ไอคอนออกมาแล้วหล่ะ

QTam Bitmap to Icon File Size : 0.674 MB.

โปรแกรมเล็กๆ น่ารักนี่ ใช้งานง่าย ๆ คลิกตามที่มันมีบอก ก็จะได้ ไอคอนละนะ Qtam ตัวนี้ มันต้องการ ไฟล์ Bitmap (.Bmp) เวลาเราทำภาพใน photoshop เสร็จแล้วก็ ให้คลิก Save as..น่ะ แล้วsave เป็น .bmp ไม่ต้องเข้าในส่วน save picture as..

QTam Bitmap to Icon File Size : 0.674 MB.

เพิ่มเติมของโปรแกรม Qtam
สำหรับการที่จะใช้โปรแกรม Qtam ถ้าอยากจะให้ภาพโปร่งใส่ ก่อนที่จะ Save ให้ กำหนดพื้นหลังในภาพให้เป็นสีสันที่ต่างจากโดยรวมของภาพอย่างเห็นได้ชัด เช่น

สีแถวบนสุดในหมวดสีของ Photoshop

พอมาถึงหน้านี้มันจะมีฟังก์ชัน 3 ตัวละ เรามารู้จักว่ามีอะไรกันบ้าง
1. Mask icon by "Color" เมื่อเราคลิกที่ปุ่ม 1 แล้วไปเลือก บริเวณสีของภาพ ส่วนของภาพที่จะกลายเป็นโปร่งใส จะเป็นส่วนที่สีเหมือนกันกับที่เราเอาเมาส์จิ้มไป
2. Mask icon by "Pixel" อันนี้มันจะให้เราทำการลากพื้นที่ที่เราจะทำโปร่งใสเอง
3. Auto-Mask มันจะทำโปร่งใสให้แบบอัตโนมัติ โดยจะเอาสีในส่วนพื้นหลังแปร๊ดๆ ออกไปซะ

3 . ตัวเสริมโปรแกรม หรือที่เรียกว่า Plug in ตัวช่วยพิเศษสำหรับโปรแกรมภาพต่างๆ เสริมให้มีประสิทธิภาพมากขึ้น ติดตั้ง Plug in ลงไป ก็จะมีเมนูใหม่ขึ้นมา รองรับการ เซฟไฟล์ ไอคอนของเรา สำหรับ plug in ของ Photoshop

Icon Plugin for PhotoShop 2.0 File Size : 0.7 MB.



Icon Plug in for PhotoShop 2.0

ใครชอบตัวไหนก็ไปโหลดมาใช้ ส่วนเรื่องของการออกแบบนั้น มันก็ต้องแล้วแต่แต่ละ คนนะ แป่ว..ว (ไม่สอนซะงั้น) อืม ลักษณะการทำไอคอนแบบนี้ มันก็คล้ายๆกับการปัก ครอสติสอ่ะหล่ะ ถ้าพูดกันแนวArt แล้ว ไอ้การทำลักษณะนี้เค้าจะเรียกว่า "Pixel Art"
หลายๆคน คงจะได้เห็นงานแนวๆนี้มาแล้วบ้าง ลอง Search หาดูใน Google ก็จะมี
หลายเว็บที่มีสอนอยู่แล้ว ลองไปดูเอาน่ะ อิอิ

ปล. Exteen ไม่สามารถอัพ .ico ก็ต้องหา hosting มาอัพขึ้นไป

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

ขอบคุณนะครับ ขอโหลดเอาไปใช้มั่งครับ
โอ้โห อยากทามเปงมั่ง 555+
แบบว่า สมองบ่อำนวยนะเค๊อะ งิงิ

ขอบคุณนะคะ เอาความรู้ สาระดีๆมาเผยแพร่อยู่เรื่อยเลย

#2 By FaCeEloN on 2006-11-07 18:33

ขอลองทำก่อนละกันนะคราบ

#3 By ۞ RECCA۞ on 2006-11-07 18:35

โอ้ ความรู้ดีแท้ๆ ขอบคุณค้าบบบ
เอาไปลองใช้มั่งดีก่า
ขอบคุณค่ะ อยากทำจัง แต่ขี้เกียจโหลด อิอิ

#5 By BESTZ ||O◞ O on 2006-11-07 18:53

โอ้วววววววววววว
ของฟรี!!!!!!!!!!!!!!
เพิ่งจะเคยเห็นโปรแกรมทำเคอเซอก็วันเนี้ย เหอๆ
เป็นบุญตาโคด
ขอบคุณนะคร้าบที่เอามาลง

#6 By .-: [N]_oTT:-. on 2006-11-07 19:12

ขอบคุณสำหรับความรู้+โหลดฟรีนะ
มันอเมซิ่งมากเลย เราเพิ่งรู้

ว่าแต่ hosting นี่มีเว็บไหนใช้ได้บ้างอะ
เผื่อเลิกขี้เกียจจะได้ลองทำcursorใช้เองดูมั่ง
เออ..มันมีหลายทีอะน่ะ
www.geocities.com ก็ได้น่ะ

#8 By :: LeMOnIcE :: on 2006-11-07 20:13

เป็นประโยชน์มากๆค่ะ
ขอบคุณที่เอามาลงนะคะ ^^

#9 By ~himawari~ on 2006-11-07 21:32

เยี่ยมครับ ขอบคุณมาก

#10 By เจ้าชายน้อย on 2006-11-08 01:07

อยากทำ อยากทำ

โหลดโปแกมก่อนค้าบบบ

#11 By cii³ on 2006-11-08 08:54

อยากได้โค้ดทำบล็อกแบบนี้อ่ะคับ

ผมลองจิ้มจะเอาโค้ดจากหัวข้อ
มาทำ blog สไตล์เรา Episode 3
การต่อสู้กับ CSS style
มาแล้วคับ แต่มันไม่มีอ่ะ TT^TT
งือ~

#12 By KaOruN * Bz on 2006-11-08 11:08

โอ้ว ของเล่นใหม่อีกแล้น Thx ฮะ...ท่าน อ.
อยากทำมั่งเดี๋ยวลองไปโหลดโปรแกรมมาทำมั่งดีกว่า......

ขอบคุณที่สอนค่ะ

#14 By ~*[- KORzy -]*~ on 2006-11-09 21:05

แบบว่ากำลังหาวิธีทำบล็อกใสๆอะ แต่หาไม่เจอ ทำไงหรอค่ะ ช่วยบอกที ขอบคุณค่ะ

#15 By dogdak^O^ on 2006-11-11 19:17

เก่งจังเลยคุณ

#16 By นายฉิม on 2006-11-14 21:54

ขอบคุณนะสำหรับวิธีการทำบลอกสวย ๆ เราลองทำดูแล้ว ใช้ได้เลยยังไงก็ขอบคุณมาก ๆ นะ

#17 By ♥ »- midorijung »- ♥ on 2006-11-14 21:57

โอ้....น่าสนใจอย่างยิ่ง
ขอบคุณนะคะ
ทำแล้วปัญหาคือหาที่ ที่ยอมให้อัพไฟล์ . ani .cur ไม่ได้อ่ะค้าบบบบ ทำไงดี

#19 By sai (58.64.126.52) on 2006-11-23 19:45

ขอบคุณมากๆค่ะ
ว่างๆเข้าเว็บเราบ้างนะ
http://www.thaicheat.com
เก่งจัง

#21 By kid0ka0ru88 on 2006-12-30 09:35

น่าจะยากแฮะ

#22 By Aris on 2007-01-04 10:14

แอบมาส่งงานให้ท่านอาจารย์รับไปพิจรณา แฮะๆ (จิ้มชื่อเลยค่ะ)
บล็อคสวยโว้ยๆๆๆๆๆ อิจฉาๆๆๆ
ใจนะที่สอน
Google is the best search engine

#25 By FIGucZlje (85.255.113.78) on 2007-03-02 19:55

สุดยอด >O<
อีแดร์กราบงามๆ
ฮ่าฮ่าฮ่าฮ่า
ขอบคุณสำหรับความรู้ดีๆนะคะ
ต้องฝึกทำซะแระ...

#26 By + DareCrim + on 2007-03-26 18:30



คือว่า ลองทำดูแล้วอ่ะค่ะ
แล้วเวลาลง ตัวเมาส์ อ่า...

ลงยังไงง่ะ จะเอา url ก็ไม่ได้... T T

#27 By T•siidz (125.26.44.191) on 2007-04-04 11:33

ขอบคุณดรับ

#28 By (58.9.84.214) on 2007-05-05 13:44

ขอบคุณค่า

#29 By •.★*...Dear...*★.• on 2007-05-13 17:25

จาโหลดนะ
แต่ม่ายรู้จะเปนมั๊ย
ยิ่งโง่อยู่ด้วย

#30 By G-yoncSu++TonF[.i.]NE on 2007-05-20 12:17

น่า สนุก จัง

#31 By กาดำ (125.25.206.91) on 2007-06-03 11:52

ขอบคุณนะค่ะ ขอสูบไปใช้ด้วยค่ะ ^ ^

#32 By sassy (203.130.145.68 /172.31.185.167) on 2007-06-12 07:39

ชอบอะคับขอบคุณเลย ใจดีจัง =๐^-^๐=

#33 By zensu (58.10.102.248) on 2007-08-06 18:15

ขอบคุณค่ะ

#34 By *--~Aon Ang Na~--* on 2007-08-10 15:11

พึ่งจะรู้ว่ามีโปรแกรมทำเคอร์เซอร์ด้วย ขอบคุณะ เว็บที่เขียนไว้เป็นเว็บของเราไปดู cusur ที่เราทำด้วยนะ บาย

#35 By นิยุ ((ผู้หาโค้ดเมาส์)) (158.108.208.207) on 2007-08-19 19:13

พึ่งจะรู้ว่ามีโปรแกรมทำเคอร์เซอร์ด้วย ขอบคุณะ เว็บที่เขียนไว้เป็นเว็บของเราไปดู cusur ที่เราทำด้วยนะ บาย
((ให้อีกที กด!! http://my.dek-d.com/niyu/story/view.php?id=281117))

#36 By นิยุ ((ผู้หาโค้ดเมาส์)) (158.108.208.207) on 2007-08-19 19:14

#37 By (203.146.63.182) on 2007-09-09 00:29

#38 By (203.146.63.182) on 2007-09-09 00:31

ขอบคุณมากๆ เลยนะคะ
จะพยายามทำให้ได้เลยค่ะ

#39 By POOK (58.8.203.62) on 2007-09-15 01:37

ขอนำความรู้นี้ไปใช้บ้างนะ ขอบคุณมาก ๆ แล้วจะแวะมาบ่อย ๆ

#40 By since'50 on 2007-09-15 18:35

หุหุ ขอบคุณมากๆจ้า
งาม จังเลยอยากทำมั้ง แวะมาดูของเรามั้งนะ
ขอแอดไว้ด้วยเลยนะคับ

#43 By ~“Z♥PASC”~ on 2008-02-27 20:57

#44 By (202.129.49.43) on 2008-03-17 16:21

เก่งอีกแระ อิอิbig smile

#45 By (222.123.94.4) on 2008-05-25 09:07

bdfa383ff5589a1da2efc4e6c7e1ebd4

#46 By John Doe (64.28.187.69) on 2008-06-09 06:46