הפוסט הבא הוא סיכום + הרחבה של ההרצאה שלי מכנס דיגיטל פליי. אני אשתף ואדריך על הכלים בהם אני משתמש לחיתוך העיצובים שלי מפוטושופ, אכתוב על הסיבות שבגללן אנחנו כמעצבים צריכים לדעת לחתוך את העיצובים של עצמנו, ואספק מקורות תוכן וכלים פרקטיים לעשייה.
עדכון (ספטמבר 2013): הג'נרטור החדש של פוטושופ
ישנם 2 שלבים (מתוך כלל השלבים לבניית מוצר דיגיטלי) שאנחנו מכירים היטב בעבודה השוטפת שלנו בתעשייה.
עיצוב <—> ותכנות
בעצם בין תהליך העיצוב לתהליך התכנות – ששניהם מוכרים לנו מאוד, יש גם את תהליך החיתוך.
חלקנו נוטים להתעלם מקיומו, אבל הוא שם, והוא חלק סופר חשוב בתהליך המוצר.
מה זה חיתוך בכלל?
כל עיצוב שאנחנו מעצבים בפוטושופ או בכל תוכנה אחרת צריך אחרי להיות מפורק לגורמים להיות מורכב מחדש בתהליך התכנות.
בשביל זה יש לנו גם סטיילגייד שזה מסמך PSDבו אנו שומרים את כל האלמנטים הגרפיים שאנו משתמשים בהם כרפסרנס למתכנתים.
אנחנו שומרים שם את כל המצבים של הכפתורים, את כל האייקונים, ומציינים גם צבעים, גדלי פונטים ועוד נתונים שאנחנו רוצים שלא יהיה ספק לגביהם בתהליך התכנות.
למי שלא עובד עדיין עם סטיילגיידים – מומלץ להתחיל.
המצב בשוק כיום
בשוק כיום יש המון פלטפורמות, מכשירים ורזולוציות מסך.
העיצוב הגמיש והרספונסיבי הוא כבר דרישה שיש לכל לקוח. לכן עליכם לדעת להתאים את העיצובים שלכם לצפייה בפלטפורמות שונות ומרובות.
בנוסף, היום ניתן לעשות דברים מדהימים עם קוד, דברים שלא היו אפשריים פעם. ואנו יכולים לנצל את זה לטובתינו.
אז למה אנחנו צריכים לדעת לחתוך?
כי ככה. זה כבר לא ממש ניתן לויכוח. זאת כבר נהייתה דרישה של כמעט כל לקוח וסטודיו.
מעסיקים מחפשים מעצבים שיודעים לחתוך, והם מצפים מהם לחתוך את העיצובים למכנתים.
אבל בכל זאת… למה כדאי לנו לדעת לחתוך?
1. תכנון מראש
כיום יש לתכנן את החיתוכים עוד בתהליך העיצוב עצמו. החלטות לגבי הטכנולוגיה בה ישתמשו המתכנתים בבניית האתר מתקבלות עוד על ידינו בתהליך העיצוב.
2. הכלים לחיתוך הם שלנו – לא של המתכנתים
רוב הכלים לחיתוך נמצאים אצלינו בתוכנות פוטושופ ואילוסטרייטור שאנו יודעים לתפעל. לא בסביבת העבודה או בגדר הידע והנסיון של המתכנתים.
3. הסיבה הבאמת חשובה – שליטה!
שליטה. זאת הסיבה העיקרית. אנחנו רוצים שליטה בעיצובים שלנו. חשוב שאנחנו נהיה אלו שנכתיב איך העיצובים שלנו ייחתכו ויופיעו באתר/ אפליקציה.
* בונוס חשוב
עוד יתרון של לדעת לחתוך זה הכסף. שלא תשכחו לקחת על זה כסף. זה תהליך ארוך שלוקח זמן ודורש מיומנות ושווה ערך לכל תהליך קריאייטיבי או תכנותי.
3 דרכים ראשיות לחתוך עיצוב לרשת:
ישנן 3 דרכים עיקריות לחתוך את העיצובים שלנו לאלמנטים אשר יוכלו להיות מורכבים בתהליך התכנות:
הכנתי מראש PSD שאיתו אדגים איך לחתוך בשיטות השונות. תוכלו להוריד אותו על מנת להיעזר בו להבנה של הכלים השונים.
קובץ המקור לדמו (PSD) להדגמת חיתוך מפוטושופ באמצעות כלים שונים (1996 downloads)1. PNG (או JPG)
אם נייצא את כל העיצובים שלנו בצורת PNGs או Jpgs כמובן שכל הדפדפנים יתמכו בפורמט הזה. אבל עכשיו צריך לעשות משהו כדי שמסכי הרטינה יראו את זה גם.
מה זה רטינה? מסכי רטינה הם מסכים שכמות הפיקסלים שלהם היא בעצם כפולה ממסך רגיל.
באילו מצבים אנחנו צריכים לעצב למסכי רטינה?
1. אם אנחנו מעצבים אפליקציית אייפון/אייפד או אם אנחנו מעצבים אתר רספונסיבי ורוצים שאנשים עם אייפון 4 ומעלה יוכלו להינות מהאתר שלנו.
2. אם אנחנו רוצים שהעיצוב שלנו יתמוך במקים החדשים.
כיום בעיצוב לווב אם אנחנו חותכים PNGs או JPGs אז רצוי שנחתוך גם את גרסת ה-2x@ שלהם כדי להתאים את תצוגת האתר למובייל ולמסכי רטינה אחרים שמתחילים להציף את השוק.
למה קוראים לזה 2x@? כי ככה אפל מכתיבים בעת תכנות אפליקציות iOS. צריך לשים באותה התקיה עם החיתוכים הרגילים את החיתוכים כפול 2 בגודל ועם הסיומת 2x@ בשם הקובץ. משם הטכניקה גם ייושמה בעולם הווב.
איך נדע באיזה סוג מסך המשתמשים באתר שלנו גולשים? מתכנת האתר שם סקריפט (כמה שורות קוד) אשר מזהה אם המבקר באתר גולש במכשיר עם מסך רטינה, ולפי זה יודע למשוך את התמונה הנכונה. הנה סקריפט להצגת התמונות (2x@ או גודל רגיל) באתר שלכם לפי רזולוציות מסך.
עוד טיפ בעת חיתוך תמונות PNG או JPG: רצוי גם לכווץ את התמונות עוד יותר אחרי שייצאתם אותם מפוטושופ.
את זה אפשר לעשות בקלות אם אחד הכלים במאמר הבא על מכווצי תמונות יעילים (אני אישית עובד עם ImageOptim למק).
והנה רשימת כלים בה אני משתמש על מנת לייצא PNGs או JPGs:
Retinize it – אקשנים לפוטושופ מאת ארטיום דשינסקי
איך משתמשים ב-Retinize it?
יתרונות:
– חינמי!
– סופר קל לתפעול, סה"כ אקשנים לפוטושופ.
– אפשר להגדיר כפתור f1-12 (כמו לכל אקשן) וכך אפשר לעשות לעצמינו חיים קלים בייצוא שכבות כ-PNG.
– 2 אקשנים מוצעים לנו – אחד להגדלה ל-2x@ ושמירה גם של הגודל המקורי, והשני אקשן לחיתוך רגיל של השכבה הרצויה.
חסרונות:
– אי אפשר לייצא מספר שכבות בו זמנית. רק שכבה אחת כל פעם.
– אי אפשר להגדיר איזור לייצא. זה השכבה עצמה עם Trim.
לדף הבית של הורדת האקשנים Retinize it.
למאמר על Retinize it בסמאשינג מגזין
[sep]
Slicy – $29
זאת אפליקציה מדהימה! אני אישית משתמש בה המון.
Slicy הינה אפליקציית מק, אז משתמשי PC – מצטער אבל זה לא רלונטי אליכם.
איך משתמשים ב-Slicy?
יתרונות:
– מייצא אוטומטית גם ל-2x@ וגם מרזולוציה גבוה של כבר 2x@ ל-1x.
– מעקב אוטומטי ועדכון חי של הסלייסים בתקיה שלכם
– אתם יכולים לבחור באיזה תקייה הוא ישמור את הקבצים
– הממשק פשוט אדיר. כיפי ושימושי.
חסרונות:
– מדובר באפליקציית מק בלבד. אין להם תוכנת PC.
– זאת אפליקציה חיצונית ולא פלאגאין (לא שזה כל כך רע, אבל בכל זאת צריך לפתוח משהו מלבד הפוטושופ).
– אפשר לעשות איתה אך ורק ייצוא קבוצתי של כל המסמך. אי אפשר לייצא שכבה ספציפית.
מאמר הדרכה מעולה לשימוש בסלייסי
[sep]
Cut and Slice Me – חינם
תוסף מעולה לפוטושופ. ממש יעיל לחיתוכים לאייפון ואנדרויד.
איך משתמשים ב-Cut & Slice Me?
יתרונות:
– חינמי!
– ביצועים מהירים
– אפשר לייצא איתו אלמנט בודד, או קבוצות של אלמנטים מתוך העיצוב.
– אופציות חיתוך לאנדרויד, אייפון ומסכים.
– פותח לכם תקייה אוטומטית בעת שמירת הקבצים שממוקמת איפה שאותו PSD ממוקם.
חסרונות:
– הוא עושה downscaling בלבד. כלומר רק מ-2x@ ל-1x. זה אומר שבעיצוב אתרים צריך לעבוד כפול שניים מהרזולציה הגם ככה גבוהה וזה לא נוח. לכן זה ממש מעיק לבוד איתו לווב אם רוצים חיתוכי רטינה. באייפון אין בעיה כי גם ככה מעצבים בדרך כלל ברזולציה של 2x@.
– אפשר לייצא איתו קבוצות בלבד, ולא שכבות בודדות. מה שיוצר הרבה עבודה להכניס כל שכבה לתוך קבוצה משלה רק בשביל לחתוך עם התוסף הזה.
– פותח לכם תקייה אוטומטית בעת שמירת הקבצים שממוקמת איפה שאותו PSD ממוקם. אין שליטה על תקיות פה.
קישור לאתר הבית של התוסף Cut & Slice Me
מדריך מפורט לשימוש בתוסף Cut & Slice Me
מדריך נוסף של WebdesignTuts+ שמסקרים את התוסף.
[sep]
Enigma64 – $19.99
תוסף מעולה ויעיל לייצוא של העיצובים שלנו וגם לחיתוך מהיר.
איך משתמשים ב-Enigma64?
יתרונות:
– ממשק נוח ושימושי.
– שמירת העיצוב כ-png או jpg בלחיצת כפתור!
– אפשר לבחור לייצא רק שכבה בודדת/ את השכבות המסומנות / כל המסמך כתמונה / איזור בחירה.
חסרונות:
– לא שומר 2x@.
– לא זוכר לכל קובץ בנפרד איפה לשמור אותו, אז אם אתם עובדים על כמה פרוייקטים במקביל צריך להגדיר מחדש כל פעם איפה לשמור את הקובץ.
כתבה על התוסף Enigma64 שהתפרסמה כאן בפיקסל פרפקט
[sep]
עדכון לתוסף חדש: PNG Express – $30
עדכון: כמה מעצבים המליצו לי לא להשתמש בו, שהוא לא עובד טוב. אז אני אישית לא הורדתי אותו בסוף. אבל אתם מוזמנים לנסות בעצמכם.
תוסף חדש יחסית. נראה כמו אחלה של תוסף. הנה הסרטון מהאתר שלהם:
יש יתרון שנראה ממש טוב פה שאין באף תוסף אחר: ניתן להציג מרחקי גדלים בין אלמנטים בעיצוב שלנו (!!!) זה מעולה ליצירת סטיילגיידים ללקוחות.
עדכון (ספטמבר 2013): כלי הייצוא החדש – "Generator" של פוטושופ CC
בעדכון שיצא לאחרונה לפוטושופ CC הושק הפוטושופ Generator, אשר באמצעותו ניתן (בין השאר) לייצא קבצים ישירות מהפוטושופ ובאופן אוטומטי (ממש כמו בסלייסי).
מבדיקה ראשונית שלי הוא אשכרה עובד יותר טוב מסלייסי מבחינת גודל התמונות שיצאות.
הנה הסרטון של איך להשתמש ב-Generator:
והנה דף שבו תוכלו למצוא את ה-syntax של איך לייצא באמצעותו קבצים בצורה מסודרת עם Dos ו-Donts.
[sep]
*לא לשכוח – להשתמש בכלי להקטנת תמונות כל פעם לפני שמגישים את ספריית התמונות הלאה לתכנות
אני אישית משתמש באפליקציית ImageOptim המדהימה והחינמית למק להקטנת תמונות. אבל גם אפשר להשתמש בשירותים חינמיים online כמו TinyPNG ו-Yahoo! Smush.it.
והנה עוד כמה כלים להקטנה ואופטימיזציה של קבצי PNG ו-JPG:
- Kraken – כלי אונליין לקיווץ תמונות, ויש להם גם מוצר מורכב ומתקדם יותר שמתקינים באתר שלכם למי שמעוניין.
- Dynamic Drive Optimizer – אתר לקיווץ תמונות
- Riot לווינדוס – אפליקציה להורדה
- מאמר עם עוד כמה כלים ב-SixRevisions
2. CSS
היום אפשר לעשות כמעט כל אלמנט או אנימציה ב- CSS בלבד. זה גם הרבה פעמים יותר קליל כי הדפדפן לא צריך להעלות תמונה שתופיע והעיצוב שלנו יכול להיות חלק מהקוד.
CSS Hat – $29.99
התוסף הזה הוא חובה. פשוט חובה לכל מעצב או מתכנת.
בואו נראה איך CSS Hat עובד:
יתרונות:
– לא רואה את פוטושופ CC ממטר (הנה השוואה).
– ממשק שימושי ונוח ממש.
– מהיר בטירוף. רק לוחצים על שכבה וה-CSS שלה מופיע בתיבה.
– מייצא קוד גם ל- SASS, SCSS, LESS, Stylus ו- Stylus CSS. אם אתם עובדים אם אחד מאלו אין מצב שאתם לא רצים לקנות את התוסף הזה עכשיו. אצלינו בסטרטאפ אנחנו לא יכולים בלי זה (עובדים עם SCSS).
חסרונות:
– כלום! לא מצאנו חסרונות לתוסף המעולה הזה.
כתבה על התוסף שהייתה בפיקסל פרפקט
מצגת ומאמר על ההשוואה בין פוטושופ CC והפיצ'ר החדש לייצוא CSS ובין CSS Hat.
אלטרנטיבה חינמית ל-CSS Hat -נקראת CSS3PS. זה גם תוסף פוטושופ רק שהוא מייצא את הקוד של שכבה מסויימת לדפדפן ואתם צריכים לחכות כל פעם שזה יטען את הדף וגם אין תמיכה בכל השפות SCSS/LESS/SASS וכדומה. בקיצור זה no brainer. התוסף הזה חובה לכל מעצב ולכל מתכנת פרונט אנד בארסנל.
3. SVG
הפורמט של SVG הוא ישן אבל השימוש בו בבניית אתרים הוא ממש חדש כי עד לא מזמן דפדפנים לא הצליחו לקרוא את הפורמט הזה. כיום SVG נתמך על ידי כל הדפדפנים חוץ מ- ie8 ומטה.
SVG הוא קובץ וקטורי לחלטין, שאפשר ליישם עליו חוקים של CSS כמו גודל שונה, צבע, אנימציות ועוד, ובגלל שהצורה היא וקטורית – לא צריך לדאוג בכלל לגבי רזולוציות.
איך יוצרים SVG מתוך אלמנטים בפוטושופ בדקה?
בגדול:
1. קופי פייסט של האלמנט הוקטורי מפוטושופ לאילוסטרייטור
2. שמירה כ-SVG על ידי אילוסטרייטור. לא לשכוח להיכנס לקוד מקור של הקובץ ולנקות שם את ה"לכלוך" ואת הגובה ורוחב אם אתם רוצים דינאמיות מלאה.
——- סרטון ——-
– מאמר ממש טוב על איך יוצרים ומטמיעים SVG באתר שלכם.
– טבלת עדכון התמיכה ב-SVGs בדפדפנים השונים.
– סקריפט שדרכו ניתן ליצור Fallback לתמונות איפה שאין SVG.
אייקון פונטס
באמצעות SVGs אפשר לבנות icon fonts לאתר שלנו.
השימוש באייקון פונט הוא יעיל לשיפור ביצועי האתר. מדובר בתהליך של לקחת את האייקונים באתר ולהפוך את כולם לפונט שמוטמע באתר.
יתרונות: ממש מאיץ את ביצועי האתר – קל לעריכה עם הכלים הנכונים.
חסרונות: ההטמעה טיפה מסובכת למי שאין לו רקע טכני. אבל למתכנתים לא תהיה בעיה.
IcoMoon – כלי לעריכת אייקון פונטס בקלות. ניתן להעלות SVGs חיצוניים.
הנה הדגמה של יצירת אייקון פונט באמצעות icoMoon:
Fontastic – נראה כלי שזה גם אחלה שירות אבל עוד לא ניסית אותו.
[sep]
עוד כלים ושיטות ששווה להזכיר
תמונות רספונסיביות
מאמר מעולה שהתפרסם לאחרונה בסמאשינג מגזין מדבר על האופציות השונות שלנו בשילוב תמונות בעיצוב רספונסי.
ספרייטים
למי שעוד לא קרא את המאמר שלנו בנושא, אז פרסמנו במגזין מאמר על ספרייטים (CSS Sprites) – מה זה בכלל, השיטה לייצורם וכלי עזר מעולים למעצבים.
הנה עוד קישור שיכול לעזור:
– Spritepad – כלי ליצירת ספרייטים ב-css
קטע בונוס: איך פותחים בכלל מסמך חדש שמעצבים לווב?
באיזה גודל ורזולוציה פותחים את המסמך?
גודל טוב לפתיחת מסמך חדש לעיצוב לרשת הוא דבר ראשון ב-72DPI, ברוחב של 1140px מינימום עם מרווח בצדדים. הגובה לפי כמות הגלילה אבל אפשר להתחיל מ-900px. היום כבר אין הרבה משמעות ל-above the fold אבל עדיף תמיד מן הסתם שה-CTA (Call to action) הראשי שלכם יהיה הדבר הראשון והכי בולט שהמשתמש רואה שהוא מגיע לאתר.
איך קובעים גריד?
הרבה שואלים אותי איך קובעים את הגריד במסמך חדש לרשת. ובכן הגריד שלנו יכול לקבל שתי צורות בעת תצוגה במסכים צריך יותר – הוא יכול להתכווץ, והוא יכול להשבר למספר עמודות קטן יותר. אבל בכל אופן את העיצוב הראשוני למסכים הרחבים תעשו באיזה גריד שרק תרצו, ותנסו לחשוב איך תרצו שהגריד יהיה במסכים צריך כמו במובייל וטבלטים.
תבנית להורדה והרשימות המלאות של רזולוציות וגדלים למסכים רגילים וגם למובייל וטבלטים
לא אשאיר אתכם גם בלי רשימות של שאר המכשירים הפופולראים בשוק והרזולוציות השונות שצריך לעצב אליהם: רשימת רזולוציות לעיצוב למכשירי מובייל רשימת רזולוציות לעיצוב לטאבלטים רשימת רזולוציות לעיצוב למסכי מחשב.
סיכום וכמה מילים לגבי הכנס
דבר ראשון הנה המצגת עצמה:
למי שהיה בהרצאה – מקוה שנהנתם, ומי שלא, מקוה שנהנתם מהסיקור המקיף פה. היה סה"כ כנס מאוד מוצלח, וכל הכבוד לנטקראפט על הארגון הזה.
למי שמעוניין הנה סיכום וסיקור עוד מההרצאות שהיו בכנס מאת העורכת שלנו דנה פרויד.
אהבתם? קיבלתם תועלת מהפוסט הזה? אז לחצו על ה"לייק", שתפו אותו ו/או כתבו תגובה.
