วิธีแปลงการออกแบบ Photoshop ของคุณเป็นโค้ด CSS ในเวลาไม่ถึงนาที

นับตั้งแต่การมาถึงของเวอร์ชัน CS6 Adobe ได้ใช้ Photoshop เป็นตัวเลือกที่มีประโยชน์มากในการจัดวางและพัฒนาการออกแบบเว็บ การดำเนินการคือ ง่ายมาก และโดยเฉพาะ รวดเร็ว. ผ่านแอพพลิเคชั่นเราจะสามารถสร้างสไตล์ชีตแบบเรียงซ้อนโดยใช้เป็นข้อมูลอ้างอิงรูปร่างและเลเยอร์ข้อความของเรา ขั้นตอนนั้นง่ายพอ ๆ กับการพัฒนาม็อคอัพคัดลอกโค้ดเวอร์ชันขององค์ประกอบของเราและวางลงในแผ่นงานของเรา

เป็นตัวเลือกที่ดีมากโดยเฉพาะอย่างยิ่งเพราะช่วยให้เราเห็นวิวัฒนาการของการออกแบบของเราในแง่ภาพและแบบเรียลไทม์ ต่อไปนี้เป็นเคล็ดลับในการใช้ตัวเลือกนี้และรับไฟล์ ประสิทธิภาพสูงสุด:

พยายามให้แม่นยำ

เพื่อให้ได้ผลลัพธ์อย่างมืออาชีพขอแนะนำให้คุณคำนึงถึงขนาดและสัดส่วนของไซต์ของคุณ ตั้งค่าความกว้างและความสูงของเทมเพลตที่คุณกำลังออกแบบและนำไปใช้กับต้นแบบของคุณ เมื่อคุณคัดลอกโค้ด CSS เราจะวางแต่ละองค์ประกอบโดยอ้างอิงระยะทางเป็นพิกเซลระหว่างแต่ละองค์ประกอบและขอบของผืนผ้าใบ นอกจากนี้ให้คำนึงถึงขนาดและเหตุผลตามลำดับชั้นที่คุณจะรวมไว้ในการออกแบบของคุณรวมถึงการจัดตำแหน่งของแต่ละองค์ประกอบและระยะห่างระหว่างแต่ละองค์ประกอบเพื่อให้ผู้ใช้ของคุณสามารถอ่านได้สูงสุด

การใช้คำแนะนำและกฎของอินเทอร์เฟซจะช่วยให้คุณสร้างแม่แบบที่เรียบร้อยสะอาดตาโดยมีองค์ประกอบทั้งหมดที่จัดวางอย่างลงตัว

กำหนดค่าคุณสมบัติทั้งหมดของแต่ละองค์ประกอบ

ตัวเลือกในการคัดลอกโค้ด CSS ทำให้เรามีความเป็นไปได้ในการออกแบบไซต์ของเราด้วยความแม่นยำสูงโดยใช้รูปร่างและเลเยอร์ข้อความ เนื้อหาของแต่ละเลเยอร์จะถูกคัดลอกไปยังคลิปบอร์ดและเราสามารถวางลงในสไตล์ชีตของเราได้อย่างรวดเร็ว จากเลเยอร์รูปร่างจับค่าของการตั้งค่าต่อไปนี้:

• ขนาด
• ตำแหน่ง
• สีเส้นขีด
• เติมสี (รวมถึงการไล่ระดับสี)
• เงา

จากเลเยอร์ข้อความเราสามารถจับค่าต่อไปนี้:

• ตระกูลฟอนต์
• ขนาดตัวอักษร
• ความหนาของตัวอักษร
• ความสูงของเส้น
• ซับรายาโด
• ขีด
• ตัวยก
• Subscript
• การจัดตำแหน่งข้อความ

จำไว้และตั้งค่าแต่ละค่าเพื่อให้ได้สไตล์ที่คุณกำลังมองหา

ทำงานกับกลุ่มเลเยอร์

ฟังก์ชั่นนี้แปลงานของเราที่จัดโดยคลาสสองประเภทหนึ่งสำหรับแต่ละกลุ่มที่รวบรวมเลเยอร์ของรูปร่างหรือข้อความและคลาสสำหรับแต่ละเลเยอร์ของประเภทเหล่านี้ คลาสกลุ่มแต่ละคลาสจะแสดงองค์ประกอบ div หลักที่จะมีองค์ประกอบ div ลูกที่จะสอดคล้องกับเลเยอร์ที่แทรกในแต่ละกลุ่ม ด้วยวิธีนี้ค่าด้านบนและด้านซ้ายของคอนเทนเนอร์ลูกจะถูกกำหนดโดยอ้างถึงคอนเทนเนอร์หลัก คุณต้องจำไว้ว่าตัวเลือกนี้ไม่สามารถใช้ได้กับวัตถุอัจฉริยะและจะไม่สามารถใช้ได้กับมากกว่าหนึ่งเลเยอร์พร้อมกันเว้นแต่จะมีการจัดกลุ่ม

ขั้นตอนในการแปลง

เมื่อคุณสร้างจำลองขึ้นแล้วคุณได้ปรับแต่งแต่ละองค์ประกอบและคุณได้จัดกลุ่มตามกลุ่มคุณจะต้องทำตามขั้นตอนเหล่านี้เท่านั้น:

• ไปที่แผงเลเยอร์และเลือกหนึ่งในสองตัวเลือกต่อไปนี้:
  • คลิกขวาที่รูปร่างหรือเลเยอร์ข้อความหรือกลุ่มของเลเยอร์แล้วเลือก คัดลอก CSS ในเมนูบริบท
  • เลือกรูปร่างหรือเลเยอร์ข้อความหรือกลุ่มของเลเยอร์จากนั้นเลือกตัวเลือก คัดลอก CSS ในเมนูแผงเลเยอร์