การสร้าง Responsive Web Layout บน Adobe Edge Reflow CC นั้น สะดวกมาก (อย่างไม่น่าเชื่อเลย ต้องลองดู video) แต่หากเราทำการออกแบบ Website แล้ว ส่วนใหญ่จะเริ่มและจบกันที่ Adobe Photoshop CC
แล้วจึง slice ภาพแต่ละส่วนเอามาประกอบกันใน HTML ด้วย Dreamweaver CC (หรือ Editor ต่างๆ) โดย Web developer
แต่ข่าวดีล่าสุด คือตอนนี้เราสามารถ “ดึง” Layer ใน Photoshop ที่เราออกแบบไว้ มาเป็นหน้า Web page ใน Edge Reflow รอการทำ Responsive Layout และใส่ breakpoint ได้เลย! ดูเทคนิคเบื้องต้นในการทำงานต่อด้านล่างครับ
1. ต้องอัพเดต Photoshop CC และ Edge Reflow CC เป็นเวอร์ชั่นล่าสุด
เนื่องจากเทคนิคใหม่นี้ จำเป็นต้องใช้ Photoshop CC และ Edge Reflow CC เวอร์ชั่นล่าสุด (เดือนกันยายน 2013) ถึงจะทำงานได้ ถ้ายังไม่ได้อัพเดตให้อัพเดตจาก Adobe Creative Cloud Manager ก่อน
2. การออกแบบต้องแบ่ง Layer ให้ชัดเจน
ไม่ว่าจะเป็นข้อความ, ภาพประกอบ, หรือ path ต่างๆ จะถูก Adobe Edge Reflow อ่าน และนำไปสร้างเป็น HTML Object ใน Layout แบบ layer ต่อ layer และปัจจุบัน folder ที่สร้างจะไม่ได้ถูกนำไปรวมเป็น group ใน Reflow
3. กำหนด file extension ให้ layer เพื่อเปลี่ยนเป็นรูปภาพที่ต้องการ
เคล็ดลับหนึ่งในการเปลี่ยนไฟล์ Photoshop ให้เป็น Web page บน Edge Reflow คือการกำหนด file extension ให้กับ layer บน Photoshop เพื่อให้ Edge Reflow สามารถเปลี่ยนเป็นไฟล์ภาพได้ตามที่ต้องการ
File extension ที่สามารถกำหนดได้ในปัจจุบันคือ JPG, JEPG, GIF, และ PNG ครับ
UPDATE: ตอนนี้ผมเขียนแนะนำวิธีตั้งชื่อ layer เพื่อให้ได้ไฟล์ที่ต้องการจากการใช้ Adobe Generator ใน Photoshop แล้ว คลิกดูได้ที่นี่
ก่อนไปลอง!
หวังว่าคงได้เทคนิค workflow การออกแบบ Website ด้วย Adobe Creative Cloud ไปใช้งานกันนะครับ ถ้าชอบสามารถแชร์ให้เพื่อนๆ ได้ด้านล่าง และติดตามอัพเดตได้ที่ Nextflow Fan Page หรือลงทะเบียนรับแจ้งวิดีโอและข่าวสารใหม่ๆ ทาง email ที่นี่ครับ