אם יש היבט אחד של עבודה עם Illustrator כי אני באמת לא נהנה זה המרת אמנות קו svg תמונות עבור הנייד או האינטרנט. באמצעות התפריט 'ייצוא'> 'ייצא בתור', וכדי להיות אכזרית, התכונה 'שמירה לאינטרנט' - ייצוא> שמירה לאינטרנט - לא הייתה קלה לשימוש.
המרת ציור לפורמט .svg פתחה תיבת דו-שיח מאיימת למדי, אשר עבור אנשים חדשים לתהליך עבודה זה, הציעה מגוון מבלבל של אפשרויות שלא לדבר על העובדה שהיו מספר פורמטים. Svg ורק אחד מהם היה המתאים פוּרמָט. ברגע שהתרגלת לזרם העבודה הזה זה לא היה עניין גדול, אבל עקומת הלמידה היתה תלולה.
זה השתנה עם כל תכונה חדשה לייצא את התכונה - ייצוא> ייצוא עבור מסכים - ואת פאנל ייצוא הנכס אשר הוצגו Illustrator CC 2015 ביוני 2016. זה "כיצד" אני הולך להראות לך איך להשתמש בשני מאפיינים. בואו נתחיל.
01 מתוך 04
כיצד לגשת ייצוא עבור מסכי ב Adobe
לאחר שהייתי משתמש Illustrator מאז Illustrator 88 אני חושב שאתה יכול להבין את חוסר הרצון שלי לשקול Illustrator ככלי עיצוב רציני עבור ממשקי אינטרנט ומכשירים ניידים.
כאשר artboards היו הציג את CS4 גירסה 2008, חשבתי שזה היה תוספת מעניינת ליישום. כשראיתי את התכונה 'שמור לאינטרנט' שהוצגה כעת ב- Illustrator, שוב, מצאתי אותה מעניינת, אבל מצאתי את אותה תכונה ב- Adobe Fireworks הייתה מיושרת יותר עם גרפיקה לאינטרנט מאשר Illustrator.
עם הופעתה של הגישה הראשונה ניידים לעיצוב ואת ההסתמכות הגוברת על תמונות SVG עבור פרויקטים ניידים, Illustrator היה שלי "ללכת" כלי עבור SVG והפך לעצור חשוב בתכנון עבודה UI.
ובכל זאת, אם הייתי צריך לייצא נכסים לנייד, סקיצה 3 ו- Photoshop CC 2015 הם כלי הבחירה שלי. Illustrator נכנסו לרשימה ביוני 2016 עם התפריט הייצוא באמת עבור מסכים.
בדוגמה לעיל, יש לי שני מסכים המיועדים iPhone והם על Artboards נפרד בשם "הבית" ו "מקומות". כדי לפלט אותם, בחרתי קובץ> ייצוא> ייצוא למסכים. תיבת הדו-שיח 'ייצוא למסכים' נפתחת.
02 מתוך 04
כיצד להשתמש ייצוא תיבת הדו שיח דיאלוג
כאשר מופיעה תיבת הדו-שיח, לחץ על כל משטח יצירה לבחירה. זה יהיה ספורט אז סימן. תוכל גם ללחוץ פעמיים על שם משטח יצירה כדי לבחור אותו ולשנות אותו. זה דבר טוב לדעת אם artboards שלך נקראים "Artboard 1" ו "Artboard 2" אשר, בכנות, אומר לך כלום.
יש לך שלוש אפשרויות באזור בחר:
- הכל: בחירה זו מייצאת כל משטח יצירה במסמך כקובץ נפרד.
- טווח: הזן טווח של משטחי יצירה לייצוא. זה שימושי במיוחד עבור פרויקטים עם כמה עשרות artboards.
- מסמך מלא: בחר באפשרות זו וכל כל משטח היצירה ישתטח למסמך יחיד.
אזור 'ייצוא אל' מאפשר לך לבחור את תיקיית היעד עבור הפלט. תיקיית ברירת המחדל תהיה המיקום הנוכחי של מסמך Illustrator.
פורמטים הוא המקום שבו "הקסם קורה. אתה שם לב ישנם שלושה סמלים, iOS. אנדרואיד וציוד. שני הראשונים הם מובנים מאליהם. סמל גלגל ההילוכים פותח את 'הגדרות עיצוב', המאפשר לך לקבוע כיצד ייעשה אופטימיזציה של כל אחד מתבניות הקבצים ברשימה. הגדרות אלה הן "ספציפיות לפורמט" וברגע שביצעת את השינויים, לחץ על הלחצן שמור הגדרות ושינויים אלה יחולו על הפורמטים שיוצגו.
לאחר שתבחר ב- iOS או ב- Android, הרשימה תשתנה כדי לכלול את כל הרזולוציות הזמינות בפלטפורמה זו. רשימת ה- iOS תציג את גורמי קנה המידה עבור התצוגה Retina ואת הבחירה אנדרואיד יהיו קשקשים החל .75x ל 4x אשר מתאים כמעט כל מכשיר אנדרואיד שם בחוץ.
אם יש פורמט שמוצג שברצונך להסיר, לחץ על "x". אם יש אחד שברצונך להוסיף, לחץ על הלחצן + הוסף קנה מידה.
בסיום, לחץ על הלחצן 'ייצא משטח יצירה' וסרגל התקדמות יראה אותך כאשר התהליך יסתיים.
03 מתוך 04
שימוש ביצוא עבור קבצי מסך מ Adobe Illustrator CC 2015.
כאשר אתה בודק את התוצאות של ייצוא עבור מסכים, תגלו כי Illustrator יש פלט גרסה שטוחה של כל מסך. על פני השטח, זה אולי נראה קצת חלש במיוחד אם אתה מצפה Illustrator יש לייצא את כל חתיכות וחלקים כמו תמונות.
אם אתה צעד אחורה וחושב על זה לרגע, זה בדיוק מה שאתה צריך, כי אתה יכול להשתמש בפלט זה ביישום prototyping כגון Adobe Experience Design , Principleformac, Atomic.io , UXPin או יישום דגימות אחרים
בדוגמה זו, אני משתמש Adobe ניסיון עיצוב (XD) כדי ליצור לחץ פשוט דרך. השלב הראשון בתהליך היה לבחור את iPhone 6 גודל אשר מתאימים את ממדי ממשק Illustrator
כשהממשק נפתח, בחרתי את הכלי 'לוח יצירה' ולחץ פעמיים על לוח הקרטון כדי להוסיף משטח יצירה נוסף. אז קראתי להם "בית" ו "מקומות", נבחר כל משטח היצירה מיובאים תמונה png מ Illustrator לתוך משטח היצירה.
כדי ליצור את "נקודות חמות" עבור קליק- thru, ציירתי מלבן על כפתור חקירה במסך הבית ולהגדיר את הערכים מילוי הגבול לאף על ידי ביטול הסימון של מאפיינים אלה בחלונית מאפיינים. עשיתי את אותו הדבר עם הלחצן 'הקודם' בדף 'מקומות'.
כדי להוסיף את האינטראקטיביות, בחרתי מצב אב טיפוס ולאחר מכן לחצת על "נקודה חמה". אחר כך גררתי את החץ - שנקרא חוט - לדף 'מקומות' וקבעתי את יעד המעבר במקומות, את התנועה לדחיפה שמאלה, את ההקלה כדי להירגע ואת משך המעבר ל -6 שניות.
חזרתי על שלב זה עם הנקודה החמה בדף 'מקומות'. ההבדל היחיד היה המעבר נקבע לדחוף ימין. כאשר לחצתי על כפתור Play בדקתי את אב הטיפוס שלי.
04 מתוך 04
כיצד להשתמש בלוח נכס ייצוא ב Adobe Illustrator CC 2015
יחד עם התפריט שמור עבור מסכים Adobe גם הוסיף פאנל חדש - נכס ייצוא - כי הסיר נקודת כאב ענקית של זרימת עבודה עיצוב ממשק משתמש.
נקודת הכאב היתה סמלים. Illustrator הוא יישום ציור וקטור גדול אבל כדי פלט, נניח 10 סמלים, על דף עם 40 או 50 מהם נדרש כל אחד נשמר כתמונת SVG. זה בהכרח נדרש יותר זמן מהרגיל הודות לטיולים רצופים לפאנל SVG. נקודת הכאב הזאת היא עכשיו נחלת העבר.
לוח חדש זה נמצא בחלון> ייצוא נכסים. כאשר הפאנל נפתח, בחר את הנכס שברצונך להמיר ל- SVG או לתבנית אחרת וגרור לתוך החלונית. כאשר אתה משחרר את העכבר תמונה ממוזערת של הנכס מתווסף ללוח. תן שם לנכס. שמור על גרירת חפצים לחלונית עד שתסיים.
בחר כל פריט באזור 'הגדרות ייצוא', או בחר את כולם על-ידי לחיצה ארוכה על המקש Shift ולחיצה על כל אחד מהם. בחר את הפורמט שלך - בדוגמה זו, בחרתי SVG- ולחץ על הלחצן יצא. הפריטים שנבחרו יוצגו כקובץ SVG לאותו מיקום כמו הקובץ Illustrator.
איפה כל התהליך הזה מקבל אפילו מסודר הוא שאתה לא צריך להשתמש בלוח ייצוא הנכס. אם תלחץ על הלחצן שמור למסכים בתחתית החלונית, תיפתח תיבת הדו-שיח.
לעומת זאת, באפשרותך ללחוץ על הכרטיסייה נכסים בחלונית 'שמירה על מסכים' כדי לגשת לחלונית 'ייצוא נכס'. לדוגמה, אם יש לך סמל מותאם אישית במשטח יצירה, תוכל לפתוח את החלונית 'ייצוא פריטים' בתיבת הדו-שיח 'שמירה למסך' וגרור את הפריט לחלונית 'ייצוא נכס'.