TuTorial

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 มาอัพขึ้นไป