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

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

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

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

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

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

โพสต์ที่ยังไม่ได้อ่าน โดย fern2535 »

:like: :like: :like: :like:
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 60