יצירת אייקוני מוצר אינה קשה כפי שהיא עשויה להיראות במבט ראשון. גלה עוד על עיצוב סמל אפליקציית Android הראשון שלך מאפס!
לא משנה באיזה שוק או שירות אפליקציה מופצת, סמל האפליקציה שלה הוא הדבר הראשון שמשתמש פוטנציאלי ישים לב. רושם ראשוני הוא בעל חשיבות עליונה כאשר מנסים להכניס משתמשים חדשים, מה שאומר שסמלים הם מרכיבי מפתח בכל אפליקציה. ובלי קשר לכוונת האפליקציה, יצירת אייקון אפליקציה יפה צריכה להיות חלק חשוב בשלב הפיתוח של כל אפליקציה. למרות שמפתחים רבים של יישומים טכניים משאירים את הגרפיקה למעצבים ייעודיים, מבינים את יסודות העיצוב והיישום שלהם הם משהו שכל אחד יכול לעשות, בהינתן כישרון להתנסות אָנָלִיזָה. סמלי אפליקציה אינם יוצאי דופן!
מדריך זה עובר על יצירת אייקון מסתגל לאפליקציית אנדרואיד לדוגמה באמצעות תוכנת קוד פתוח. למרות שהתוצאה הסופית אולי לא תהיה בפורמט שאתה עשוי לדרוש, הרבה מעצות העיצוב שנדונו כאן יתקיימו במספר פלטפורמות.
לאחר שחרורו של "סמלים אדפטיביים" עם אנדרואיד אוראו, סמל אפליקציה יכול להיות מורכב משלוש שכבות בסיסיות: שכבת רקע אטומה
ניק בוצ'ר מגוגל מדבר על מעגל של 66 dp במרכז האייקון שאף מסכה לא יכולה לגזוז ממנו, הנקרא "אזור בטוח". זה המקום שבו האלמנטים העיקריים של עיצוב האייקונים שלנו יישבו בהמשך, כשנגיע לעיצוב בפועל. ייתכן שכל דבר מעבר לרדיוס של 33 dp לא יהיה גלוי בסמל כאשר יש לו מסיכת צורה.
מכיוון שעדיף שסמלים יהיו תמונות וקטוריות בגלל קנה המידה של ממשק המשתמש, נצטרך עורך גרפיקה וקטורית כדי ליצור את הסמל שלנו. Inkscape הוא קוד פתוח ואלטרנטיבה מצוינת לתוכנה יקרה יותר, כך שזו תהיה הבחירה שלנו למטרות הדרכה זו. עיצבתי גם קובץ פרויקט זמין פה עם האזור הבטוח וקו המפתח העיצובי של גוגל מסומן, ומסיכת שכבה נחמדה המאפשרת לנו לצפות בתצוגה מקדימה של צורת הסמל.
עם קובץ הפרויקט פתוח ב-Inkscape וב- מילוי ושבץ (Shift+Ctrl+F), ייצוא תמונת PNG (Shift+Ctrl+E), ו שכבות (Shift+Ctrl+L) נפתחות, אנחנו מוכנים להתחיל. לוח השכבות הוא המקום שבו שוכן הבשר של הפרויקט, עם ה- חֲזִית ו רקע כללי שכבות שנועדו לשכן את הרכיבים הטיטולאריים שלהן, ו הנחיות ו מסכה נועדו להפעיל ולכבות (על ידי לחיצה על סמל העין הקטנה לידם) לעיון.
אייקון הוא ביטוי לזהות של אפליקציה. ככזה, עליו לשלב גם את אופי האישיות של האפליקציה וגם הנחיות עיצוב ספציפיות לפלטפורמה, כמו אלו של אנדרואיד לשפה העיצובית החומרית יש להציע. למטרות הדגמה, הבה נניח שאנו עובדים על אפליקציית מזג אוויר המשתמשת ברכיבי חומר. נוכל להשתמש במוטיב השמש והעננים הקלאסי כדי להודיע למשתמש על מטרת האפליקציה, ולשים מעט הסתובב על העיצוב הבסיסי הזה באמצעות צללים וגיאומטריה כדי לגרום לו להשתלב היטב בסביבת האנדרואיד שלו.
רקע כללי
נתחיל בהגדרת הרקע, שיורכב משמים כחולים ושמש צהובה במרכז. חֲרִיטָה מסכה בלתי נראה, אני בוחר והופך את ה- שכבת רקע, מלאו את כל הקנבס עם צור מלבנים ומרובעים כלי (F4), והגדר את צבע המילוי של המלבן מילוי ושבץ ל-64B5F6FF (תכלת) בהתאם ל- פלטת צבעים של חומרים. לאחר מכן אני בוחר את צור עיגולים, אליפסיס וקשתות כלי (F5), והחזקת Shift ו-Ctrl, צייר עיגול ממרכז קו המפתח למעגל השני בגודלו, והגדר את צבעו ל-FFEE58FF, מה שנותן לנו שמש קטנה וחמימה. תמיד טוב להיצמד לגיאומטריה בסיסית בכל סוג של עיצוב, ושפת העיצוב של אנדרואיד במיוחד מעודדת פשטות. כדי לעמוד בהנחיות החומר, אני גם נותן לשמש צל טיפה עדין מסננים ← צללים וזוהרים ← טיפת צל.
חֲזִית
מגיע ל חֲזִית, אני מצייר קבוצת עננים מסביב לשמש על ידי ציור עיגולים מהיקפים של עיגולים אחרים, ונותן לכולם צבע מילוי של EEEEEEFF. לאחר מכן אני מקבץ את המעגלים כראוי על ידי לחיצה ימנית על מספר אובייקטים ובחירה קְבוּצָה, ולהפעיל את מחולל הצלליות על שתי הצורות הסופיות שאני משיג בסופו של דבר. חֲרִיטָה הנחיות בלתי נראה ומתחלף חֲזִית ו רקע כללי לחלופין, ניתן לראות את השכבות המרכיבות את הסמל של אפליקציית מזג האוויר שלנו. אם אייקון האפליקציה ייגרר על פני מסך ביתי, העננים יזרמו אל מול שמש נייחת!
תוֹצָאָה
מסכה כעת ניתן להפוך לגלוי ולשנות בעזרתו ערוך נתיבים לפי צמתים (F2) כדי לנסות ולדמות מסכות צורות שונות. כמו כן, ניתן לייצא את שתי השכבות בנפרד באמצעות ייצוא תמונת PNG פאנל לשימוש ב-Android Studio, ויחד במשך א סמל Google Play.
בזמן בניית סמל מוצר, זה תמיד תרגול טוב לנסות לקחת את מטרת היישום, לזקק אותו לצורתו הוויזואלית המופשטת ביותר, ולייצג זאת באמצעות גיאומטריה פשוטה. ככל שכל רכיב בעיצוב פשוט יותר, כך הוא בדרך כלל עובד בצורה טובה ואמינה יותר, וזה נכון גם בעיצוב גרפי. לרוב המטרות, צורת אובייקט בחזית וצבע אחיד או דוגמה ברקע (או להיפך) עובד מצוין, אבל כמו במקרה שלנו לדוגמה, ניתן להשתמש בשכבה נוספת של חפצים אם מרגישים נחוץ; יותר מדי ערימה או שימוש בצלליות רק יסבך את עיצוב הסמל.
אתה יכול לקרוא עוד על עיצוב אייקונים בממשקי חומרים ברשימה אתר חומר, ותפוס אייקוני מערכת בחינם לשימוש בעיצוב אייקונים מ אותו אתר.