איך חותכים עיצוב כמו נינג'ות בשנת 2013
TRANSCRIPT
![Page 1: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/1.jpg)
![Page 2: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/2.jpg)
היי, אני שגיא. חלקכם מכירים אותי מפיקסל פרפקט מגזין, אבל למי שלא יודע יש לי גם סטרטאפ בשם טאפדוג שם אני מעצב את חווית המשתמש של האפליקציה ועובד בצמוד למתכנתים שלנו.
http://www.flickr.com/photos/jonathanbeard/3323527515/
pixelperfect.co.iltapdog.co
![Page 3: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/3.jpg)
בעצם בין תהליך העיצוב לתהליך התכנות - ששניהם מוכרים לנו מאוד, יש גם את תהליך החיתוך. חלקנו נוטים להתעלם מקיומו, אבל הוא שם, והוא חלק סופר חשוב בתהליך המוצר.
![Page 4: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/4.jpg)
כל עיצוב שאנחנו מעצבים בפוטושופ )או בכל תוכנה אחרת( צריך בסופו של דבר לעבור למתכנת. בשביל זה יש לנו גם סטיילגייד שזה מסמך בו אנו שומרים את כל האלמנטים הגרפיים שאנו משתמשים בהם כרפסרנס למתכנתים. אנחנו שומרים שם את כל המצבים של הכפתורים, את כל האייקונים, ומציינים גם צבעים, גדלי פונטים ועוד נתונים שאנחנו רוצים
שלא יהיה ספק לגביהם בתהליך התכנות.
סטיילגייד מ"מולטה" - הסטרטאפ הקודם שלי ושל השותפים שלי
![Page 5: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/5.jpg)
ישנם הרבה כלים שם בחוץ לצורך ביצוע של משימות מסויימות.
![Page 6: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/6.jpg)
אבל לכל מקצוען יש את הכלים שלו, ואני פה אציג את הכלים שאני משתמש בהם.ההמלצה שלי - תתנסו בכולם. בסוף תמצאו מה הכי מתאים ונוח לכם.
![Page 7: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/7.jpg)
אז בואו נדבר קצת על הנושא שלנו - חיתוך העיצוב. בשנים האחרונות הפורמולה לחיתוך עיצובים השתנתה.
The formulahas changed!
![Page 8: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/8.jpg)
בשוק כיום יש המון פלטפורמות, מכשירים ורזולוציות מסך.העיצוב הגמיש והרספונסיבי הוא כבר דרישה שיש לכל לקוח. לכן עליכם לדעת להתאים את העיצובים שלכם לצפייה בפלטפורמות
שונות ומרובות.
Multiple Platforms
![Page 9: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/9.jpg)
בנוסף, היום ניתן לעשות דברים מדהימים עם קוד, דברים שלא היו אפשריים פעם. ואנו יכולים לנצל את זה לטובתינו.
The Evolution of code
![Page 10: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/10.jpg)
אז למה אנחנו צריכים לדעת לחתוך?
Why?
![Page 11: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/11.jpg)
כי ככה. זה כבר לא ממש ניתן לויכוח. זאת כבר נהייתה דרישה של כמעט על לקוח וסטודיו.
מעסיקים מחפשים מעצבים שיודעים לחתוך, והם מצפים מהם לחתוך את העיצובים למכנתים.אבל בכל זאת... למה כדאי לנו לדעת לחתוך?
Because!
+
![Page 12: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/12.jpg)
כיום יש לתכנן את החיתוכים עוד בתהליך העיצוב עצמו.החלטות לגבי הטכנולוגיה בה ישתמשו המתכנתים בבניית האתר מתקבלות עוד על ידינו בתהליך העיצוב.
We need to plan ahead
![Page 13: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/13.jpg)
רוב הכלים לחיתוך נמצאים אצלינו בתוכנות פוטושופ ואילוסטרייטור שאנו יודעים לתפעל. לא בסביבת העבודה או בגדר הידע והנסיון של המתכנתים.
We need to plan ahead
We have the tools
![Page 14: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/14.jpg)
שליטה. זאת הסיבה העיקרית. אנחנו רוצים שליטה בעיצובים שלנו.
חשוב שאנחנו נהיה אלו שנכתיב איך העיצובים שלנו יחתכו ויופיעו באתר/ אפליקציה.
We need to plan ahead
We have the tools
We want to have control
![Page 15: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/15.jpg)
עוד יתרון של לדעת לחתוך זה הכסף. שלא תשכחו לקחת על זה כסף. זה תהליך ארוך שלוקח זמן ודורש מיומנות ושווה ערך לכל תהליך קריאייטיבי או תכנותי.
![Page 16: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/16.jpg)
ישנן 3 סוגים של פורמטים לווב שאותם אנחנו מייצאים מהעיצובים שלנו מפוטושופ.
3 main ways to slice
![Page 17: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/17.jpg)
PCS, כמו Pics )תמונות(
PCS
![Page 18: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/18.jpg)
PNG CSS SVG
![Page 19: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/19.jpg)
פורמט של 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](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/20.jpg)
הכלי הראשון שאני רוצה לדבר עליו הוא סט האקשנים המצויין Retinize it מאת המעצבים הישראלי ארטיום דשינסקי.
Retinize itArtiom Dashinsky
![Page 21: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/21.jpg)
דבר ראשון הסט אקשנים הוא חינמי שזה מצויין. אפשר לבחור שם בין לחתוך רגיל או לחתוך גם לרטינה )כלומר מגדיל את העיצוב ב100%(. גם אפשר כמו כל אקשן בפוטושופ לתת לו מקש קיצור דרך.
החסרון הוא שצריך לעשות את זה לכל שכבה בנפרד ואי אפשר להריץ את האקשן על כל החיתוכים בעיצוב.
FREE!!!
Super easy - PS Action
Choose: Slice or Retinize
Can define hotkey
Can't "batch" retinize
Retinize itArtiom Dashinsky
![Page 23: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/23.jpg)
היתרונות הם דבר ראשון שזה תוסף חינמי. יש בו אפשרויות לחתוך קבוצה מסויימת או לחתוך הכל בבת אחת אם קראתם לקבוצות שלכם כמו שצריך )אם הוספתם @ אחרי השם של כל קבוצה שתרצו לחתוך(. הוא תומך בחיתוך לאנדרויד שזה מצויין, והוא גם
פותח לנו תקיה לחיתוכים בצורה אוטומטית כדי שלא נתחיל להגדיר תקיות חדשות ואיפה לשמור. החסרונות הן בעיקר שהוא לא שומר כפול 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](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/24.jpg)
זאת אפליקציה מדהימה! אני אישית משתמש בה המון.Slicy הינה אפליקציית מק, אז משתמשי PC - מצטער אבל זה לא רלונטי אליכם.
Slicy
![Page 25: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/25.jpg)
יש לאפליקציה הזאת המון יתרונות. בעיקר שהיא יכולה להגדיל או לכווץ אוטומטית הכל או רק חלקים נבחרים, וגם היא מאזינה למסמך ותחתוך מחדש את העיצוב שלנו ברגע שהעיצוב משתנה )אם נרצה(.
החסרון הגדול )מלבד למשתמשי 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 27: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/27.jpg)
התוסף "אניגמה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](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/28.jpg)
היום אפשר לעשות כמעט כל אלמנט או אנימציה ב-CSS בלבד. זה גם הרבה פעמים יותר קליל כי הדפדפן לא צריך להעלות תמונה שתופיע והעיצוב שלנו יכול להיות חלק מהקוד.
CSScross-browser
liter than ever
![Page 30: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/30.jpg)
אין לי מה לפרט פה. תוסף מושלם, ולא רואה את הפיצ'ר החדש של פוטושופ ממטר.
Great useful UI
Lightning fast
CSS/ SCSS/ SASS/ LESS/ Stylus
Super clean CSS - even cleaner than Photoshop CC
None!
CSS Hat
![Page 31: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/31.jpg)
.SVG הוא ישן אבל השימוש בו בבניית אתרים הוא ממש חדש כי עד לא מזמן דפדפנים לא הצליחו לקרוא SVG הפורמט של כיום זה קריא בכל הדפדפנים חוץ מ-ie8 ומטה.
SVG הוא קובץ וקטורי לחלטין, שאפשר ליישם עליו חוקים של CSS כמו גודל שונה, צבע, אנימציות ועוד.
SVG Vector
Editable by CSS
Small file size
icon fonts
![Page 32: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/32.jpg)
באמצעות SVGs אפשר לבנות icon fonts לאתר שלנו.השימוש באייקון פונט הוא יעיל לשיפור ביצועי האתר. מדובר בתהליך של לקחת את האייקונים באתר ולהפוך את כולם לפונט
שמוטמע באתר.
Icon Fontsimprove your site's performance
![Page 33: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/33.jpg)
איקומון זה שירות חינמי ליצירת אייקון פונטס וממש קל להשתמש בו.
icoMoon
fontastic - another cool service
![Page 34: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/34.jpg)
השירות הזה הוא טוב, כי בקלות אפשר להרכיב בו אייקון פונטס משלכם, ואחרי זה לערוך את הפונט הזה. זה משפר ביצוים על אתר מבחינת רספונסיביות וזמני טעינה.
הבעיה היא שלהטמיע אייקון פונטס בצורה טובה זה טיפה מסובך לנו כמעצבים, אבל למתכנתים זאת לא אמורה להיות בעיה.
Boosts site speed
Easy to manage and add fonts of your own
Implementation in the code is a bit complex.
icoMoon
![Page 35: איך חותכים עיצוב כמו נינג'ות בשנת 2013](https://reader036.vdocuments.net/reader036/viewer/2022062406/55c7581bbb61eb4d778b46a7/html5/thumbnails/35.jpg)
Sagi Shrieber
pixelperfect.co.il
dribbble.com/sagishrieber
תודה רבה :(את כל הקישורים, הסרטונים ועוד המון חומר יעיל תוכלו למצוא בפוסט בפיקסל פרפקט שמסכם את ההרצאה.
Thank You!
Sagi Shrieber
pixelperfect.co.il
dribbble.com/sagishrieber
http://pixelperfect.co.il/posts/slicing