ใช้ Illustrator CC 2015 ส่งออกสำหรับหน้าจอคุณสมบัติ

หากมีลักษณะการทำงานร่วมกับ Illustrator อย่างหนึ่งที่ฉันไม่ชอบอย่างแท้จริงก็คือการแปลงสายงานศิลปะเป็นภาพ SVG สำหรับมือถือหรือเว็บ ใช้เมนูส่งออก> เอ็กซ์พอร์ตเป็นรายการและเพื่อความซื่อสัตย์อย่างไร้ความปราณีคุณลักษณะ "บันทึกสำหรับเว็บ" - ส่งออก> บันทึกสำหรับเว็บ - ไม่ง่ายอย่างที่จะใช้

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

ที่มีการเปลี่ยนแปลงทั้งหมดด้วยคุณลักษณะ Export For Screens ใหม่ - Export> Export for Screens - และแผงการส่งออกเนื้อหาซึ่งนำมาใช้กับ Illustrator CC 2015 ในเดือนมิถุนายน 2016 ใน "How To" นี้ฉันจะแสดงวิธีการใช้ทั้งสองอย่างนี้ คุณสมบัติ มาเริ่มกันเลย.

01 จาก 04

วิธีการเข้าถึงการส่งออกสำหรับหน้าจอใน Adobe Illustrator CC 2015

อาร์กิวเมนต์ขาออกโดยใช้กล่องโต้ตอบการเอ็กซ์พอร์ตสำหรับสกรีน

มีผู้ใช้ Illustrator ตั้งแต่ Illustrator 88 ฉันคิดว่าคุณเข้าใจว่าฉันไม่เต็มใจที่จะพิจารณา Illustrator ว่าเป็นเครื่องมือออกแบบที่สำคัญสำหรับอินเทอร์เฟซสำหรับเว็บและอุปกรณ์เคลื่อนที่และโครงการต่างๆ

เมื่อ artboards ถูกนำมาใช้ในรุ่น CS4 2008 ฉันคิดว่านั่นคือสิ่งที่น่าสนใจนอกเหนือจากแอ็พพลิเคชัน เมื่อฉันเห็นคุณสมบัติ Save For Web ใน Illustrator ในตอนนี้ฉันพบว่าน่าสนใจ แต่ฉันพบว่าคุณลักษณะเดียวกันใน Adobe Fireworks สอดคล้องกับกราฟิกบนเว็บมากกว่า Illustrator

ด้วยการถือกำเนิดขึ้นของวิธีการที่ใช้มือถือเป็นครั้งแรกในการออกแบบและความเชื่อมั่นที่เพิ่มขึ้นเกี่ยวกับภาพ SVG สำหรับโครงการบนมือถือ Illustrator เป็นเครื่องมือ "ไปที่" ของ SVG และกลายเป็นจุดสำคัญในเวิร์กโฟลว์ UI Design

อย่างไรก็ตามหากต้องการส่งออกอุปกรณ์สำหรับอุปกรณ์เคลื่อนที่ Sketch 3 และ Photoshop CC 2015 เป็นเครื่องมือที่ฉันเลือก Illustrator ป้อนรายการในเดือนมิถุนายนปี 2016 ด้วยเมนูส่งออกสำหรับหน้าจอที่เยี่ยมยอดจริงๆ

ในตัวอย่างข้างต้นฉันมีหน้าจอสองหน้าสำหรับ iPhone และอยู่ใน Artboards แยกกันซึ่งมีชื่อว่า "บ้าน" และ "สถานที่" เมื่อต้องการส่งออกไฟล์เหล่านี้ฉันเลือกไฟล์> ส่งออก> ส่งออกสำหรับหน้าจอ กล่องโต้ตอบส่งออกสำหรับหน้าจอจะเปิดขึ้น

02 จาก 04

วิธีใช้กล่องโต้ตอบกล่องส่งออกสำหรับสกรีน

นำออก artboards สำหรับ iOS และ Android โดยการเลือกตัวเลือกง่ายๆในกล่องโต้ตอบ Save for Screens

เมื่อกล่องโต้ตอบปรากฏขึ้นให้คลิกที่แต่ละ artboard ที่จะเลือก จากนั้นจะเป็นเครื่องหมายการค้า คุณยังสามารถดับเบิลคลิกที่ชื่อ artboard เพื่อเลือกและเปลี่ยนได้ นี่เป็นสิ่งที่ดีที่จะทราบว่า artboards 1 ของคุณมีชื่อว่า "Artboard 2" ซึ่งตรงไปตรงมาไม่มีอะไรบอกคุณ

คุณมีสามทางเลือกในพื้นที่เลือก:

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

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

เมื่อคุณเลือก iOS หรือ Android รายชื่อจะเปลี่ยนเพื่อรวมความละเอียดทั้งหมดที่มีอยู่บนแพลตฟอร์มดังกล่าว รายชื่อ iOS จะแสดง ปัจจัยการปรับ สำหรับการแสดงผล Retina และการเลือกแอนดรอยด์จะมีเครื่องชั่งตั้งแต่. 75x ถึง 4x ซึ่งรองรับอุปกรณ์ Android ทุกเครื่องที่มีอยู่

หากมีรูปแบบที่คุณต้องการนำออกให้คลิก "x" หากมีคุณต้องการเพิ่มให้คลิกปุ่ม + เพิ่มระดับ

เมื่อเสร็จแล้วคลิกปุ่ม Export Artboard และแถบความคืบหน้าจะแสดงให้คุณเห็นเมื่อกระบวนการเสร็จสิ้น

03 จาก 04

การใช้ไฟล์ The Export For Screens จาก Adobe Illustrator CC 2015

ไฟล์ที่ส่งออกจาก Illustrator สามารถเพิ่มลงในแอพพลิเคชันต้นแบบได้อย่างง่ายดายเช่น Adobe Experience Design

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

ถ้าคุณย้อนกลับไปและคิดทบทวนสักครู่นี่เป็นสิ่งที่คุณต้องการเพราะคุณสามารถใช้ผลลัพธ์นี้ในแอปพลิเคชันต้นแบบเช่น Adobe Experience Design , Principleformac, Atomic.io , UXPin หรือแอพพลิเคชันต้นแบบอื่น ๆ

ในตัวอย่างนี้ฉันใช้ Adobe Experience Design (XD) เพื่อสร้าง click-thru แบบง่ายๆ ขั้นตอนแรกในกระบวนการคือเลือก iPhone 6 ขนาดที่ตรงกับขนาดของ Illustrator Interface

เมื่อเปิดอินเทอร์เฟซฉันเลือกเครื่องมือ Artboard และคลิกหนึ่งครั้งบนกระดาษแข็งเพื่อเพิ่ม artboard อื่น จากนั้นผมตั้งชื่อว่า "บ้าน" และ "สถานที่" เลือกแต่ละ artboard และนำภาพ png จาก Illustrator ไปไว้ใน artboard

ในการสร้าง "ฮอตสปอต" สำหรับการคลิกผ่านฉันได้วาดสี่เหลี่ยมผืนผ้าผ่านปุ่มสำรวจบนหน้าจอหลักและตั้งค่าการเติมและเส้นขอบให้เป็น None โดยยกเลิกการเลือกคุณสมบัติเหล่านั้นในแผงควบคุมคุณสมบัติ ฉันทำสิ่งเดียวกันกับปุ่มย้อนกลับในหน้าสถานที่

เมื่อต้องการเพิ่ม Interactivity ฉันเลือกโหมดต้นแบบแล้วคลิกที่ "ฮอตสปอต" จากนั้นฉันลากลูกศร - เรียกว่าสาย - ไปยังหน้าสถานที่และตั้งเป้าหมายการเปลี่ยนผ่านที่สถานที่การเคลื่อนไหวเพื่อผลักดันไปทางซ้ายการผ่อนคลายเพื่อให้ง่ายขึ้นและระยะเวลาของการเปลี่ยนไปเป็น. 6 วินาที

ฉันทำซ้ำขั้นตอนนี้กับฮอตสปอตในหน้าสถานที่ ข้อแตกต่างเพียงอย่างเดียวคือ Transition ได้รับการตั้งค่าให้ Push Right เมื่อฉันคลิกปุ่มเล่นฉันทดสอบต้นแบบของฉัน

04 จาก 04

วิธีการใช้แผงสินทรัพย์ส่งออกใน Adobe Illustrator CC 2015

ไอคอนที่กำหนดเองสามารถส่งออกเป็นไฟล์ SVG ได้โดยใช้แผงการส่งออกเนื้อหา

พร้อมกับเมนู Save for Screens (บันทึกสำหรับหน้าจอ) Adobe ยังได้เพิ่มแผงใหม่ - Asset Export ซึ่งทำให้จุดอ่อนในเวิร์กโฟลว์ UI Design ลดลง

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

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

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

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

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