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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19364
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan » 03/05/2015 10:22 pm

โดย ส่วนใหญ่เเล้วการออกแบบหน้าเว็บไซต์ เราจะเห็นว่า 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
2015-05-03_21-58-36.jpg (38.23 KiB) Viewed 613 times
หลังจากนั้นให้เราทำการเปิดไฟล์ .PSD ที่เราออกเเบบไว้ค่ะ
2015-05-03_21-56-47.jpg
2015-05-03_21-56-47.jpg (90.1 KiB) Viewed 613 times
จากภาพตัวอย่างนะค่ะ เราต้องการ ปุ๋มสีแดง "Free Consultation" ให้เราทำการเลือก Layers ของปุ๋มสีแดง ที่นี่ให้คลิก css3ps ตามรู้ที่ 3
2015-05-03_21-55-10.jpg
2015-05-03_21-55-10.jpg (141.11 KiB) Viewed 613 times
รอประมาณ 5 วินาทีค่ะ เราก็จะได้ CSS ของ ปุ๋มสีแดง มาเเล้วค่ะ เราสามารถนำมาประยุกต์ใช้งานได้อีกค่ะ[/color]

User avatar
fern2535
PHP Super Member
PHP Super Member
Posts: 317
Joined: 04/08/2015 10:18 am

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

Post by fern2535 » 06/08/2015 6:52 pm

:like: :like: :like: :like:

Post Reply

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests