הכותרת למעלה היא לא התחלה של טור על יחסים, אלא דווקא קשורה קשר הדוק לעיצוב גרפי. בכל מוצר דיגיטלי אותו אנו מכינים, בין אם זה אתר או אפליקציית מובייל, יש שלב מאד קריטי בין העיצוב לפיתוח הנקרא שלב החיתוך.
בשלב החיתוך המעצב לוקח את העיצוב שלו ומכין חלקים ממנו למתכנתים. לדוגמא: רקעים, כפתורים במצב לחוץ/מעבר עכבר, כותרות, מסגרות ועוד. אם יש אלמנטים שניתן לתכנת ב-css (קובץ העיצוב של האתר) על המעצב לדעת לספק הנחיות למתכנתים כיצד לעשות זאת. בימינו, בשל מגוון הרזולוציות של מכשירי המובייל, החיתוך יכול להכיל עבודת נמלים מתישה הדורשת דיוק רב שבה בכל פעם מכינים את הכפתורים והאלמנטים בגודל אחר והכל צריך להעשות תוך שמירה על רמת דיוק מקסימלית. ואיך עושים זאת נכון? טיפים בכתבה שלפניכם
לתכנן מראש
מעצב טוב חייב לקחת בחשבון את שלב החיתוך כבר כשהוא מכין את העיצוב שלו. ולמה הכוונה? להשתמש ככל שניתן באלמנטים ווקטורים ובצורות חכמות, למדוד גדלים של אלמנטים ולמדוד מרחקים בין אלמנטים ולדעת לחשוב על הפיתוח כבר בשלב הזה.
מעצב שלא יודע כיצד לחתוך יתקשה לחשוב ולהכנס לראש של המתכנתים ועשוי להכין אלמנטים עיצוביים שיהיו קשים ליישום. מי שיודע כיצד התכנות נעשה יודע לחשוב על המכשולים האלו ולמצוא להם פתרון כבר בשלב האפיון והעיצוב.
אז מה זה גיידליינס guidelines או specs
שלב הכנת הספקס, או הגיידליינס, הוא השלב שבו אתם שולחים למתכנתים את מבנה העמוד באופן מדוייק, כדי שהמתכנתים יבנו את העמוד כפי שראיתם לנגד עיניכם. אם יש טורים, אז מרווחים מדוייקים ביניהם, אם יש כפתורים, אז באיזה מרחק מהקצה הם יושבים, וכו׳. 
תוכלו לראות בתמונה שצרפתי את העיצוב של הניוזלטר שעיצבתי מחד, ומאידך כיצד נראה ה-guidelines שהמפתח יקבל, בשביל שיבין איך לבנות את הניוזלטר בצורה שתאפשר ללקוח בעתיד להחליף תמונה בקלות, בניוזלטר הבא.
CSS
יש הרבה דברים שאפשר לעשות באמצעות קוד ולא לחתוך אותם כתמונה. לפתח את האתר כך זה יותר נכון, יותר רספונסיבי, יותר מדוייק, ויותר קל משקל. ולכן, צריך להגיש למתכנת את ה״מתכון״ להגיע לתוצאה הרצוייה דרך הקוד. 
לדוגמא, במקום להכין להם כפתור בתור תמונה, לשלוח להם את הקוד של הצבע, הגודל הרצוי של הכפתור, גודל וסוג הפונט שבהם השתמשתם. בתמונה לעיל תוכלו לראות איך אני מצביעה למתכנת על כל אלמנט ע״ג המסך ומפרטת לו את ה״מתכון״ של אותו אלמנט. זה ה-css למעשה.
כלים לייצוא css למתכנתים, וגם לייצוא אסטים assets
אז איך עוזרים למתכנתים לעשות דברים בקוד? ואיך מייצאים מתוך העיצוב שלכם את כל אותם חלקים שהם בכל זאת חייבים להינתן כתמונות/svg/ אייקונים למיניהם?
אני אישית עובדת עם סקצ׳, שזו תוכנה מצויינת, וההנחיות למתכנתים עוברות דרך תוכנה שנקראת זפלין שאליה מטעינים את קובץ המקור. הזפלין יודע להפוך את קובץ המקור לקריא בדפדפן, ובלחיצה על כל אלמנט בעיצוב המתכנת רואה בדיוק כיצד הוא נעשה, מה המימדים שלו, מה המרחקים בינו לבין אלמנטים אחרים על המסך, אילו תכונות יש לו מבחינת צבע, צל, שקיפות, פונט, ועוד. לסקצ׳ יש גם המון פלאגאינים חינמיים שעושים את עבודת הכנת ה-guidelines לקלה ונוחה. אני אוהבת את זה, תראו כמה זה קל להכין ספקס בכמה לחיצות כפתור:
למי מכם שמעצב אפליקציות או ווב בפוטושופ, יש הרבה כלים טובים שניתן להשתמש בהם כמו css hat המצויין וגם Cut and Slice Me הנהדר. הראשון מספק את הצורך בהמרת עיצוב לקוד והשני עוזר לחתוך אלמנטים בגדלים שונים לאנדרואיד,אייפון ומסכים. אבל הכי טוב בעיני מכולם הוא התוסף png express שעושה רושם שהוא מאחד בתוכו את היכולות של שני התוספים בהם התרגלתי להשתמש, כך שאם אין לכם עדיין תוספים שעושים את העבודה הזו הייתי ממליצה דווקא להתחיל ממנו ולראות אולי הוא כל מה שתצטרכו…ואם אתם קונים אותו- אני יותר ממליצה לקנות אותו דרך קריאייטיב מרקט ולא דרך האתר הרגיל שלהם כי המחיר דרכם יותר זול ויש גם מבצעים והנחות.
יש עוד תוספים אבל אני מציינת את שלושת אלו שהכי נראים לי. מאמר מצויין כתב שגיא שרייבר בפיקסל פרפקט על ההבדלים בין התוספים והמלצות שלו- תוכלו לקרוא אותו כאן.
לסיום, הנה וידאו קצר שממחיש כמה קל לעבוד עם התוסף png express שציינתי מקודם בתוך הפוטושופ:
