היי, אני שגיא. חלקכם מכירים אותי מפיקסל פרפקט מגזין, אבל למי שלא יודע יש לי גם סטרטאפ בשם טאפדוג שם אני מעצב את חווית המשתמש של האפליקציה ועובד בצמוד למתכנתים שלנו.
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
היתרונות הם דבר ראשון שזה תוסף חינמי. יש בו אפשרויות לחתוך קבוצה מסויימת או לחתוך הכל בבת אחת אם קראתם לקבוצות שלכם כמו שצריך )אם הוספתם @ אחרי השם של כל קבוצה שתרצו לחתוך(. הוא תומך בחיתוך לאנדרויד שזה מצויין, והוא גם
פותח לנו תקיה לחיתוכים בצורה אוטומטית כדי שלא נתחיל להגדיר תקיות חדשות ואיפה לשמור. החסרונות הן בעיקר שהוא לא שומר כפול 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
התוסף "אניגמה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
אין לי מה לפרט פה. תוסף מושלם, ולא רואה את הפיצ'ר החדש של פוטושופ ממטר.
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