TIP : การแปลงไฟล์ .PSD เป็น CSS (1)

[thatsawan]

โดย ส่วนใหญ่เเล้วการออกแบบหน้าเว็บไซต์ เราจะเห็นว่า web design หลายๆคนจะทำการออกแบบโดยใช้ photoshop (.PSD)กับ illustrator (AI) ในการทำงาน ที่นี่เเล้วเราจะทำอย่างไรได้บ้างในการนำไปใช้งานกับหน้าเว็บไซต์จริงของเรา ซึ่งมันก็มีหลากหลายวิธีค่ะ อย่างเช่น การติดตั้ง Photoshop plugin ต่างๆ ลงไป โดยที่เห็นก็จะมี CSS Hat ซึ่งตัวนี้เราจะต้องทำการเสียเงินซึ่งมาเพื่อติดตั้ง
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS ซึ่งเป็นความรู้พื้นฐานในการพัฒนา JavaScrip, JQuery หรือเเม้กระทั้ง Ajax ต่อไป ทั้งนี้สามารถดูรายละเอียด TIP ต่างๆ ได้ที่นี่ค่ะ เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับโดยสามารถศึกษาได้จากบทเรียน CSS ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
ส่วนของฟรี ที่เราจะมีเเนะนำในวันนี้ก็คือ css3ps ซึ่งเราสามารถดาวน์โหลดได้จาก http://css3ps.com/Download/ พร้อมกับวิธีการติดตั้งในเว็บเลยการใช้งานก็ง่ายๆค่ะ เมื่อเราทำการติดตั้งเรียบร้อยเเล้วให้ทำการเปิด Photoshop จากนั้นเข้าที่ Menu > Windows > Extension > css3ps เพื่อทำการเปิด เครื่องมือขึ้นมา ดังภาพในตัวอย่างค่ะ

2015-05-03_21-58-36.jpg (38.23 KiB) Viewed 767 times

หลังจากนั้นให้เราทำการเปิดไฟล์ .PSD ที่เราออกเเบบไว้ค่ะ

2015-05-03_21-56-47.jpg (90.1 KiB) Viewed 767 times

จากภาพตัวอย่างนะค่ะ เราต้องการ ปุ๋มสีแดง "Free Consultation" ให้เราทำการเลือก Layers ของปุ๋มสีแดง ที่นี่ให้คลิก css3ps ตามรู้ที่ 3

2015-05-03_21-55-10.jpg (141.11 KiB) Viewed 767 times

รอประมาณ 5 วินาทีค่ะ เราก็จะได้ CSS ของ ปุ๋มสีแดง มาเเล้วค่ะ เราสามารถนำมาประยุกต์ใช้งานได้อีกค่ะ[/color]

[fern2535]