การทำปุ่มแก้วแบบที่ 1 จัดทำโดย : Mr.GuruZ พิมพ์
 Un title page การทำปุ่มแก้วแบบที่ 1 หลายคนอาจจะสงสัยว่าเว็บต่างๆ เขาทำกันอย่างไร เราน้องใหม่ก็อยากจะทำบ้าง จริงๆ แล้วก็ใช้พื้นฐานที่เราศึกษามาทั้งสิ้นไม่ว่าจะเป็นเรื่อง Gradient หรือแม้แต่การใส่สี เริ่มไม่ยากแล้วใช่ไหม ลองมาดูขั้นตอนการทำ

ขั้นตอนการทำ

1. สร้างเอกสารขึ้นมาโดยให้มีขนาดใหญ่กว่าปุ่มที่เราต้องการ (เช่นเราต้องการปุ่มขนาด 125 x 30 px อาจจะสร้างขนาด 150 x 50 px เพื่อเวลาที่เราทำงานจะได้ไม่ตกขอบ ดังนั้นผมจะสร้างเอกสารขึ้นมาขนาด 150 x 50 px ดังภาพ




2. จากนั้นให้เราใช้เครื่องมือ วาดปุ่มสี่เหลี่ยมตามขนาดที่เราต้องการ ดังภาพ
* ใช้เครื่องมือ info เข้ามาช่วยเช็คขนาดก็ได้ ดังภาพ


ใช้เครื่องมือขณะวาดพร้อมเช็คขนาดจาก info ไปในตัว



3. จากนั้นเทสีโดยใช้เครื่องมือที่เราคุ้นเคย หรือใช้ Key ลัดช่วย Alt + Back Space , Ctrl + Back Space ดังภาพ
* อย่าลืม New Layer ขึ้นมาใหม่ก่อนที่เราจะใส่สีด้วยนะครับ และอย่าเพิ่งยกเลิก Selection เพื่อที่เราจะใช้เทขอบในขั้นตอนต่อไป


สีที่เราทำการเท #FF6600



4. เข้าไปที่เมนู Edit --> Stroke ให้เลือกสีที่เข้มกว่าพื้น ดังภาพ

สีที่เราใช้เทขอบ #BD4C01



5. จากนั้นให้เราใช้เครื่องมือ วาดส่วนของพื้นที่เป็นแก้ว ดังภาพ




6. เตรียมสีเพื่อใช้ในการทำ Gradient ดังภาพ



7. จากนั้นนำสีที่เราเตรียมมาเทใส่ในพื้นที่ๆ เราได้เตรียมไว้ ดังภาพ


หลังจากที่เทสีด้วย Gradient แล้วอย่าเพิ่งยกเลิกเส้น



8. ใส่ Filter --> Blur --> Gaussian Blur ใส่ค่าลงไปประมาณ 1 แล้วยกเลิก Selection จะได้ผลดังภาพ


มาถึงขั้นตอนนี้ได้ผลตรงดังตัวอย่างหรือไม่ จากนั้นตบแต่งใสตัวอักษรให้สวยงาม เราก็จะได้ปุ่มมาใช้ดังภาพ



9. ไม่ยากเลยใช่ไหมครับ แต่ยาวไปหน่อย ^^! ลองนำไปตบแต่งเว็บกันดูนะครับ
คุณอาจสนใจ
การทำเส้นวิ่งเป็นกรอบสี่เหลี่ยม
Mr.GuruZ (95,804 - 04 มิ.ย. 49)
การใช้คำสั่ง DCount สำหรับหาจำนวน
นายจืด (22,269 - 03 พ.ค. 51)
สรุปคำสั่ง Action Script บน Flash MX (ตอนที่ 1)
สหรัถ แซ่ตั้ง (44,887 - 08 ก.ย. 50)
การแต่งภาพ ClipArt
หมูขุน (14,980 - 04 ก.พ. 50)
สร้างข้อความเป็นรูปเรา
langjuko (174,330 - 16 พ.ค. 51)
บั๊กของโน้ตแพดใน Vista
เว็บไทยดีดี (14,341 - 22 ก.ย. 50)
การสร้างไฟล์เอกสารข้อมูล Word 2000
อ้อม (22,168 - 13 ม.ค. 50)
ข้อสงสัยเกี่ยวกับ PHPMyadmin บน server ที่เช่า
Mr.GuruZ (37,043 - 03 มิ.ย. 49)