35

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

Embed Size (px)

Citation preview

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

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

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

pixelperfect.co.iltapdog.co

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

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

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

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

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

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

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

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

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

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

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

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

The formulahas changed!

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

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

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

Multiple Platforms

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

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

The Evolution of code

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

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

Why?

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

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

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

Because!

+

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

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

We need to plan ahead

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

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

We need to plan ahead

We have the tools

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

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

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

We need to plan ahead

We have the tools

We want to have control

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

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

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

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

3 main ways to slice

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

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

PCS

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

PNG CSS SVG

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

פורמט של 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

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

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

Retinize itArtiom Dashinsky

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

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

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

FREE!!!

Super easy - PS Action

Choose: Slice or Retinize

Can define hotkey

Can't "batch" retinize

Retinize itArtiom Dashinsky

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

Cut & Slice Me

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

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

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

פותח לנו תקיה לחיתוכים בצורה אוטומטית כדי שלא נתחיל להגדיר תקיות חדשות ואיפה לשמור. החסרונות הן בעיקר שהוא לא שומר כפול 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

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

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

Slicy

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

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

החסרון הגדול )מלבד למשתמשי 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

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

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

Enigma64

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

התוסף "אניגמה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

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

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

CSScross-browser

liter than ever

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

CSS Hat

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

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

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

Great useful UI

Lightning fast

CSS/ SCSS/ SASS/ LESS/ Stylus

Super clean CSS - even cleaner than Photoshop CC

None!

CSS Hat

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

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

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

SVG Vector

Editable by CSS

Small file size

icon fonts

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

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

שמוטמע באתר.

Icon Fontsimprove your site's performance

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

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

icoMoon

fontastic - another cool service

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

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

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

Boosts site speed

Easy to manage and add fonts of your own

Implementation in the code is a bit complex.

icoMoon

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

Sagi Shrieber

pixelperfect.co.il

dribbble.com/sagishrieber

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

Thank You!

Sagi Shrieber

pixelperfect.co.il

dribbble.com/sagishrieber

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