הדמיה לנייד אינה תמיד מה שהיא נראית
זה הופך נפוץ יותר ויותר עבור מקצוענים גרפיקה לא רק יש את עבודתם מופיעים בדפוס, אלא גם באינטרנט והתקנים כגון מכשירי iPhone, iPad, מכשירי אנדרואיד וטאבלטים אנדרואיד. על פני השטח, זה יכול להיראות כמו "דבר טוב" כמו התקשורת העבודה שלנו מופיע על מתרחב למסכים דיגיטליים. החיסרון הוא המספר העצום של מסכי המספר המבלבל של רזולוציות המסך. זה לא נדיר לשמוע מקצוענים מתובל תוהה מה קרה לימים כאשר ברזולוציה של 300 dpi ברזולוציה TIFF בפורמט CMYK היה הנורמה. הו לימים הטובים!
הימים האלה הסתיימו. עכשיו אנחנו צריכים להתמודד עם העובדה כי 200 על 200 התמונה עשויה להיראות בסדר על מכשיר אחד ובכל זאת מופיעים בגודל רבע על גודל אחר ושלושה רבע על עוד אחד. כל זה באמת מגיע ל "מרוץ נשק החלטה" להיות מנוהל על ידי יצרני המכשיר כפי שהם מנסים ריבה פיקסלים יותר למסך מאשר המתחרים שלהם.
זה מביא אותנו למה שנקרא "עלייתם של הסיומים". הסיומות הן אלה - @ 2x, @ 3x - tacked על שם של תמונה. הם בעצם, למשל, לשים את התמונה הנכונה במקום הנכון על המכשיר הנכון. ואז זה אפילו טוב יותר.
הרבה עבודה שלנו כרוכה בעבודה עם סמלים, עם עליית תנועת עיצוב שטוח, הדברים האלה נוצרים כאלה יישומים ציור וקטור כמו Illustrator ו סקיצה. הבעיה היא התקנים פשוט לא יכול להבהיר .ai או. קבצים. הם צריכים להיות מומר ל Scalable Vector Graphics , ובהתאם ליישום המשמש ליצירת הסמלים, לא יכול להיות אפילו אפשרות SVG.
ואז זה אפילו טוב יותר.
יש סוג חדש של תוכנה - Prototyping יישומים - כי הם הופכים את נקודת ההרכבה לפני התמונות שלך ואת הסמלים הם דחף אל מכשירים ויש להם מוזרויות שלהם גם כן.
הדרכה זו נע בין Photoshop ו Sketch עבור גרפיקה באמצעות Adobe ניסיון עיצוב כדי להדגים כמה נקודות הכאב בין הרעיון שלך ואת הפריסה בסופו של דבר. בואו נתחיל.
Friday of 05
כיצד להכין תמונות עבור התקנים ניידים ב - Adobe
השלב הראשון בתהליך זה הוא לדעת את התקן היעד שלך או התקנים. במקרה זה, אתה תהיה מיקוד iPhone 6 שבו יש שטח מסך של 375 פיקסלים רחב על ידי 667 פיקסלים גבוה. העיצוב קורא לתמונה להיות רוחב המסך.
הדימוי שבו נעשה שימוש נורה בתוך קתדרלת ברן מיניסטר בברן שבשווייץ. לאחר פתיחת התמונה ב- Photoshop, בחר תמונה <גודל תמונה כדי לבדוק את ממדי התמונה ואת הרזולוציה שלה. ברור, תמונה כי הוא 3156 x 2592 עם רזולוציה של 300 ppi ואת גודל הקובץ של 23.4 Mb פשוט לא יעבוד.
בתוך תיבת הדו-שיח 'גודל תמונה', הפחת את הרזולוציה ל -100 ppi . בצע זאת תחילה מכיוון שמידות התמונה ישתנו גם כן. עם הגדרת רזולוציה, לשנות את רוחב ל 375 פיקסלים. אם תבדוק את נתוני Image Size, תבחין שהתמונה הצטמקה מ -23.4 מגה-בייט ל -338 אלף ניידים יותר. לחץ על אישור כדי לאשר את השינוי ולסגור את תיבת הדו-שיח גודל תמונה.
02 מתוך 05
כיצד להשתמש "ייצוא כמו ..." תיבת הדו שיח ב Adobe Photoshop
לאחר שהתמונה מוכנה לייצוא, בחר באפשרות 'ייצא> ייצא כ ...' כדי לפתוח את תיבת הדו-שיח 'ייצוא כ-'.
תיבת דו-שיח זו היא תוספת לאחרונה לפוטושופ ומחליפה את תיבת הדו-שיח "שמירה לאינטרנט" שבה הם משתמשים במשך שנים. אם אתה עדיין צריך את זה, אתה יכול למצוא אותו ייצוא פופ למטה. זה, מסיבות ברורות, עכשיו המכונה "ייצוא עבור אינטרנט (מורשת)". אם זהו ביקורך הראשון בתיבת דו-שיח זו, הנה סיור קצר:
- גודל: עמודה זו קובעת את גודל הפלט של התמונה. היבט מעניין של אזור זה הוא יגדיל את התמונה אבל התמונה לא יופיע כמו "מטושטשת" על המכשיר בגלל המספר העצום של פיקסלים על המסך של המכשיר.
- 1X: לחץ לחיצה ארוכה על זה ואתה תוצג עם מספר גדלים. 1x, 2x ו 3x קטגוריות קשורות באופן מסורתי עם התקנים Hi Dpi מ Apple והם יחד עם כמה אחרים יהיה להכין תמונות עבור מכשירי אנדרואיד.
- סיומת: בחירה זו תציג את הגודל שלך אך היא תוצג כ- @ 2x או שהגודל נבחר. סיומת זו תתווסף לשם התמונה.
- סימן +: לחץ על זה כדי להוסיף גדלים שונים עבור הפלט. במקרה זה, לחץ עליו פעמיים ובחר 2x ו 3x מן pop למטה. זה יכסה כמעט כל מכשיר iOS.
- פח האשפה: לחץ על זה והבחירה מוסרת מההרכב.
- הגדרות קובץ: בחר את הפורמט - jpg, png, gif או svg - המתאים ביותר לתמונה. אם גודל הקובץ הוא חשש אתה יכול גם להפחית את הגדרות איכות.
- גודל תמונה: ניתן לשנות את הממדים הפיזיים של התמונה.
- גודל בד: באפשרותך לשנות את הממדים הפיזיים של בד התמונה.
- מטה-נתונים: תוכל להוסיף זכויות יוצרים ופרטי הקשר שלך למטא נתונים של התמונה.
בסיום, לחץ על הלחצן יצא הכל. תישאל היכן ברצונך למקם את התמונות. הרגל טוב לפתח הוא ללחוץ על כפתור תיקייה חדשה וליצור תיקייה להחזיק את התמונות המיוצאות. כאשר תלחץ על ייצוא, יוצגו לך התמונות בתיקייה.
03 מתוך 05
כיצד להכין תמונות עבור התקנים ניידים ב סקיצה 3 מ בוהמיה קידוד
סקיצה 3, יישום Macintosh בלבד מ Codheming בוהמי, הוא במהירות צובר בולטות בקרב מעצבי UX ו UI בשל המיקוד האינטנסיבי שלה על עיצוב אתרים ואפליקציות. למעשה פוטושופ, במובנים רבים, הוא במצב מוזר של צורך לשחק "להדביק" עם סקיצה.
כדי להכין תמונה לנייד ב- Sketch, בחר את התמונה במשטח היצירה ולחץ על הלחצן הפוך לזמין בתחתית החלונית 'מאפיינים' . פעולה זו תפתח את תיבת הדו-שיח 'ייצוא'. לחץ על סימן + כדי להוסיף את גרסאות 2x ו 3x וגם להוסיף את הסיומות. הפורמטים הזמינים הם PNG, JPG, TIF, PDF, EPS ו- SVG. במקרה זה, בחר JPG. לחץ על הלחצן Export (ייצוא ) ומקד או צור תיקייה כדי להחזיק את התמונות השונות המיוצאות.
04 מתוך 05
למה אתה צריך ליצור שלוש (או יותר) גרסאות של התמונה
במובנים רבים, השוק הנייד הוא "המערב הפרוע" של החלטות גודל אחד בהחלט לא מתאים לכל. בדוגמה לעיל מ- Adobe Experience Design, התמונה ממוקמת על 2 משטחי יצירה ל- iPhone 6 ומשטח יצירה של מכשיר Android. שים לב איך את הגירסה 1x בצד שמאל נראה בגודל חצי. זה בדיוק איך התמונה תופיע על iPhone 6 עם מסך הרשתית שלה. הגרסה 2x מתאים באופן מושלם את גרסת אנדרואיד פועל מחוץ למסך. הבחירה שלך היא גם להגדילה של התמונה או לייצא את התמונה מתוך פוטושופ בגודל שונה.
05 מתוך 05
מבחן מוקדם, מבחן לעתים קרובות, אמון דבר, אמון אף אחד, במיוחד את עצמך
מה שאתה צריך להבין זה רק ההתחלה של התהליך. הצגת העבודה שלך על מכשירים רבים ככל שאתה יכול להיות נחשב חתיכת חיוני של זרימת העבודה. אתה גם צריך להיות מודע זה רק הצעד הראשון בתהליך של יצירת נכסי גרפיקה עבור יישום או פרויקטים אינטרנט סלולרי.
באמצעות יישומים prototyping היא דרך מצוינת לחשוף את נקודות הכאב אבל אלה אותם נכסים יצטרכו להיות פלט לשימוש על ידי היזם. במקרים רבים, הממדים הפיזיים של הנכסים, כולל סמלים, יהיו גדולים פיזית ולא בפורמט svg אבל png. במבט ראשון, זה אולי נראה קצת מעל הדף אבל זוכר את כלל הזהב של קנה המידה של תמונות: עדיף בקנה מידה למטה מ בקנה מידה למעלה.
השורה התחתונה היא לעבוד בצמוד למפתח שלך ולהשתמש בתוכנת אב טיפוס כדרך להראות את כוונת התכנון שלך. בסופו של דבר, עם זאת, אותם נכסים יצטרכו להיות מוכנים למוצר הסופי ואת המפתח שלך יש להתמודד טוב יותר על מה הוא או היא צריכה ממך.