איך חותכים עיצוב כמו נינג'ות בשנת 2013

היי, אני שגיא. חלקכם מכירים אותי מפיקסל פרפקט מגזין, אבל למי שלא יודע יש לי גם סטרטאפ בשם טאפדוג שם אני מעצב את חווית המשתמש של האפליקציה ועובד בצמוד למתכנתים שלנו.

http://www.flickr.com/photos/jonathanbeard/3323527515/

pixelperfect.co.iltapdog.co

בעצם בין תהליך העיצוב לתהליך התכנות - ששניהם מוכרים לנו מאוד, יש גם את תהליך החיתוך. חלקנו נוטים להתעלם מקיומו, אבל הוא שם, והוא חלק סופר חשוב בתהליך המוצר.

כל עיצוב שאנחנו מעצבים בפוטושופ )או בכל תוכנה אחרת( צריך בסופו של דבר לעבור למתכנת. בשביל זה יש לנו גם סטיילגייד שזה מסמך בו אנו שומרים את כל האלמנטים הגרפיים שאנו משתמשים בהם כרפסרנס למתכנתים. אנחנו שומרים שם את כל המצבים של הכפתורים, את כל האייקונים, ומציינים גם צבעים, גדלי פונטים ועוד נתונים שאנחנו רוצים

שלא יהיה ספק לגביהם בתהליך התכנות.

סטיילגייד מ"מולטה" - הסטרטאפ הקודם שלי ושל השותפים שלי

ישנם הרבה כלים שם בחוץ לצורך ביצוע של משימות מסויימות.

אבל לכל מקצוען יש את הכלים שלו, ואני פה אציג את הכלים שאני משתמש בהם.ההמלצה שלי - תתנסו בכולם. בסוף תמצאו מה הכי מתאים ונוח לכם.

אז בואו נדבר קצת על הנושא שלנו - חיתוך העיצוב. בשנים האחרונות הפורמולה לחיתוך עיצובים השתנתה.

The formulahas changed!

בשוק כיום יש המון פלטפורמות, מכשירים ורזולוציות מסך.העיצוב הגמיש והרספונסיבי הוא כבר דרישה שיש לכל לקוח. לכן עליכם לדעת להתאים את העיצובים שלכם לצפייה בפלטפורמות

שונות ומרובות.

Multiple Platforms

בנוסף, היום ניתן לעשות דברים מדהימים עם קוד, דברים שלא היו אפשריים פעם. ואנו יכולים לנצל את זה לטובתינו.

The Evolution of code

אז למה אנחנו צריכים לדעת לחתוך?

Why?

כי ככה. זה כבר לא ממש ניתן לויכוח. זאת כבר נהייתה דרישה של כמעט על לקוח וסטודיו.

מעסיקים מחפשים מעצבים שיודעים לחתוך, והם מצפים מהם לחתוך את העיצובים למכנתים.אבל בכל זאת... למה כדאי לנו לדעת לחתוך?

Because!

+

כיום יש לתכנן את החיתוכים עוד בתהליך העיצוב עצמו.החלטות לגבי הטכנולוגיה בה ישתמשו המתכנתים בבניית האתר מתקבלות עוד על ידינו בתהליך העיצוב.

We need to plan ahead

רוב הכלים לחיתוך נמצאים אצלינו בתוכנות פוטושופ ואילוסטרייטור שאנו יודעים לתפעל. לא בסביבת העבודה או בגדר הידע והנסיון של המתכנתים.

We need to plan ahead

We have the tools

שליטה. זאת הסיבה העיקרית. אנחנו רוצים שליטה בעיצובים שלנו.

חשוב שאנחנו נהיה אלו שנכתיב איך העיצובים שלנו יחתכו ויופיעו באתר/ אפליקציה.

We need to plan ahead

We have the tools

We want to have control

עוד יתרון של לדעת לחתוך זה הכסף. שלא תשכחו לקחת על זה כסף. זה תהליך ארוך שלוקח זמן ודורש מיומנות ושווה ערך לכל תהליך קריאייטיבי או תכנותי.

ישנן 3 סוגים של פורמטים לווב שאותם אנחנו מייצאים מהעיצובים שלנו מפוטושופ.

3 main ways to slice

PCS, כמו Pics )תמונות(

PCS

PNG CSS SVG

פורמט של PNG או JPG הוא הפורמט הידוע. הוא גם נקרא על ידי כל דפדפן או מכשיר אייפון או אנדרויד.2x@ זה הסיומת שנותנים לקבצים שתומכים במסכי רטינה. כיום כל עיצוב שנעשה צריך להשמר גם בגודל הרגיל שלו, וגם כפול 2

בגדול על מנת לתמוך במסכי רטינה.

מתי נשתמש בתמיכה ברטינה? 1. אם אנחנו רוצים שאנשים עם המקים החדשים יוכלו להינות מהאתר שלנו. 2. אם אנחנו מעצבים אתר רספונסיבי ורוצים שאנשים עם אייפון 4 ומעלה יוכלו להינות מהאתר שלנו. 3. עיצוב אפליקציות אייפון

Pngalso JPG

cross-browser

@2x & script*

* Links to scripts can be seen in the post at Pixel Perfect

הכלי הראשון שאני רוצה לדבר עליו הוא סט האקשנים המצויין Retinize it מאת המעצבים הישראלי ארטיום דשינסקי.

Retinize itArtiom Dashinsky

דבר ראשון הסט אקשנים הוא חינמי שזה מצויין. אפשר לבחור שם בין לחתוך רגיל או לחתוך גם לרטינה )כלומר מגדיל את העיצוב ב100%(. גם אפשר כמו כל אקשן בפוטושופ לתת לו מקש קיצור דרך.

החסרון הוא שצריך לעשות את זה לכל שכבה בנפרד ואי אפשר להריץ את האקשן על כל החיתוכים בעיצוב.

FREE!!!

Super easy - PS Action

Choose: Slice or Retinize

Can define hotkey

Can't "batch" retinize

Retinize itArtiom Dashinsky

Cut & Slice Me

תוסף מעולה לפוטושופ. ממש יעיל לחיתוכים לאייפון ואנדרויד.

היתרונות הם דבר ראשון שזה תוסף חינמי. יש בו אפשרויות לחתוך קבוצה מסויימת או לחתוך הכל בבת אחת אם קראתם לקבוצות שלכם כמו שצריך )אם הוספתם @ אחרי השם של כל קבוצה שתרצו לחתוך(. הוא תומך בחיתוך לאנדרויד שזה מצויין, והוא גם

פותח לנו תקיה לחיתוכים בצורה אוטומטית כדי שלא נתחיל להגדיר תקיות חדשות ואיפה לשמור. החסרונות הן בעיקר שהוא לא שומר כפול 2 בגודל לרטינה, אלא מכווץ מרטינה לגודל רגיל )downscale only(, ובנוסף הוא לא

חותך שכבות בודדות, רק קבוצות וזה טיפה מעצבן לשים את כל השכבות שרוצים בתוך תקיה רק בשביל לעבוד עם התוסף.

FREE!!!

Slice some/ all/ single group

Cuts fast

Android/iphone/screen

Opens folder automatically

@2x --> 1x only

Groups only

Opens folder automatically

Cut & Slice Me

זאת אפליקציה מדהימה! אני אישית משתמש בה המון.Slicy הינה אפליקציית מק, אז משתמשי PC - מצטער אבל זה לא רלונטי אליכם.

Slicy

יש לאפליקציה הזאת המון יתרונות. בעיקר שהיא יכולה להגדיל או לכווץ אוטומטית הכל או רק חלקים נבחרים, וגם היא מאזינה למסמך ותחתוך מחדש את העיצוב שלנו ברגע שהעיצוב משתנה )אם נרצה(.

החסרון הגדול )מלבד למשתמשי PC( היא שאי אפשר לייצא איתה שכבה אחת בלבד. סלייסי עושה כל פעם את כל המסמך.

1x --> @2x or @2x--> 1x

Can choose only some layers for export as @2x

Auto track and update slices

Choose any folder

Useful and fun UX and UI

Mac Only

Application and not a plugin

Only batch slicing

Slicy

תוסף מעולה ויעיל לייצוא של העיצובים שלנו וגם לחיתוך מהיר.

Enigma64

התוסף "אניגמה64" מייצא לנו בצורה מהירה ונוחה. כמו Save for Web מהיר. גם ניתן לבחור בתוכו בין אם לחתוך את כל הקנבס .)Copy Merged כתמונה, או רק שכבה או קבוצה, או אפילו רק בחירה מתוך העיצוב )כמו

החסרון שלו הוא שהתוסף אינו זוכר איפה הוא שומר בהתאם לכל מסמך אז צריך כל פעם מחדש להגדיר לו איפה לשמור. גם הוא אינו חותך לרטינה.

Great useful UI

A one button "Save for Web"

Choose between selection/entire doc/ specific layer or

selected layers

Base64 support

Doesn't remember per file so you have to choose each time where

to save according to what file

Doesn't slice @2x

Enigma64

היום אפשר לעשות כמעט כל אלמנט או אנימציה ב-CSS בלבד. זה גם הרבה פעמים יותר קליל כי הדפדפן לא צריך להעלות תמונה שתופיע והעיצוב שלנו יכול להיות חלק מהקוד.

CSScross-browser

liter than ever

CSS Hat

התוסף הזה הוא חובה. פשוט חובה לכל מעצב או מתכנת.

אין לי מה לפרט פה. תוסף מושלם, ולא רואה את הפיצ'ר החדש של פוטושופ ממטר.

Great useful UI

Lightning fast

CSS/ SCSS/ SASS/ LESS/ Stylus

Super clean CSS - even cleaner than Photoshop CC

None!

CSS Hat

.SVG הוא ישן אבל השימוש בו בבניית אתרים הוא ממש חדש כי עד לא מזמן דפדפנים לא הצליחו לקרוא SVG הפורמט של כיום זה קריא בכל הדפדפנים חוץ מ-ie8 ומטה.

SVG הוא קובץ וקטורי לחלטין, שאפשר ליישם עליו חוקים של CSS כמו גודל שונה, צבע, אנימציות ועוד.

SVG Vector

Editable by CSS

Small file size

icon fonts

באמצעות SVGs אפשר לבנות icon fonts לאתר שלנו.השימוש באייקון פונט הוא יעיל לשיפור ביצועי האתר. מדובר בתהליך של לקחת את האייקונים באתר ולהפוך את כולם לפונט

שמוטמע באתר.

Icon Fontsimprove your site's performance

איקומון זה שירות חינמי ליצירת אייקון פונטס וממש קל להשתמש בו.

icoMoon

fontastic - another cool service

השירות הזה הוא טוב, כי בקלות אפשר להרכיב בו אייקון פונטס משלכם, ואחרי זה לערוך את הפונט הזה. זה משפר ביצוים על אתר מבחינת רספונסיביות וזמני טעינה.

הבעיה היא שלהטמיע אייקון פונטס בצורה טובה זה טיפה מסובך לנו כמעצבים, אבל למתכנתים זאת לא אמורה להיות בעיה.

Boosts site speed

Easy to manage and add fonts of your own

Implementation in the code is a bit complex.

icoMoon

Sagi Shrieber

pixelperfect.co.il

dribbble.com/sagishrieber

תודה רבה :(את כל הקישורים, הסרטונים ועוד המון חומר יעיל תוכלו למצוא בפוסט בפיקסל פרפקט שמסכם את ההרצאה.

Thank You!

Sagi Shrieber

pixelperfect.co.il

dribbble.com/sagishrieber

http://pixelperfect.co.il/posts/slicing