graphicool graphicool
  • Home
  • Portfolio
  • Blog
  • Bio
  • Contact
  • Home
  • Portfolio
  • Blog
  • Bio
  • Contact
We WordPress
צריך לדעת איך לחתוך
ראשי » בלוג » צריך לדעת איך לחתוך
1 במרץ 2015

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

לתכנן מראש

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

אז מה זה גיידליינס guidelines או specs

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

CSS

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

כלים לייצוא css למתכנתים, וגם לייצוא אסטים assets

אז איך עוזרים למתכנתים לעשות דברים בקוד? ואיך מייצאים מתוך העיצוב שלכם את כל אותם חלקים שהם בכל זאת חייבים להינתן כתמונות/svg/ אייקונים למיניהם?

אני אישית עובדת עם סקצ׳, שזו תוכנה מצויינת, וההנחיות למתכנתים עוברות דרך תוכנה שנקראת זפלין שאליה מטעינים את קובץ המקור. הזפלין יודע להפוך את קובץ המקור לקריא בדפדפן, ובלחיצה על כל אלמנט בעיצוב המתכנת רואה בדיוק כיצד הוא נעשה, מה המימדים שלו, מה המרחקים בינו לבין אלמנטים אחרים על המסך, אילו תכונות יש לו מבחינת צבע, צל, שקיפות, פונט, ועוד. לסקצ׳ יש גם המון פלאגאינים חינמיים שעושים את עבודת הכנת ה-guidelines לקלה ונוחה. אני אוהבת את זה, תראו כמה זה קל להכין ספקס בכמה לחיצות כפתור:
sketch-mesure

למי מכם שמעצב אפליקציות או ווב בפוטושופ, יש הרבה כלים טובים שניתן להשתמש בהם כמו css hat המצויין וגם Cut and Slice Me הנהדר. הראשון מספק את הצורך בהמרת עיצוב לקוד והשני עוזר לחתוך אלמנטים בגדלים שונים לאנדרואיד,אייפון ומסכים. אבל הכי טוב בעיני מכולם הוא התוסף png express שעושה רושם שהוא מאחד בתוכו את היכולות של שני התוספים בהם התרגלתי להשתמש, כך שאם אין לכם עדיין תוספים שעושים את העבודה הזו הייתי ממליצה דווקא להתחיל ממנו ולראות אולי הוא כל מה שתצטרכו…ואם אתם קונים אותו- אני יותר ממליצה לקנות אותו דרך קריאייטיב מרקט ולא דרך האתר הרגיל שלהם כי המחיר דרכם יותר זול ויש גם מבצעים והנחות.
יש עוד תוספים אבל אני מציינת את שלושת אלו שהכי נראים לי. מאמר מצויין כתב שגיא שרייבר בפיקסל פרפקט על ההבדלים בין התוספים והמלצות שלו- תוכלו לקרוא אותו כאן.

לסיום, הנה וידאו קצר שממחיש כמה קל לעבוד עם התוסף png express שציינתי מקודם בתוך הפוטושופ:

 

אהבתם? Sharing is Caring
  • Pin It
« הקודם
הבא »
קטגוריות
  • black friday
  • ui
  • בלוג
  • הדרכות
  • השראות
  • חינמים
  • כללי
  • סקירת מוצרים ומבצעים
  • עיצוב אתרים
  • עיצוב גרפי
  • קהילת המעצבים בפייסבוק
לא תשתוק
Advertising Materials – PlainId
Branding Materials for PlainId
email template series
StudioKa- Responsive Website
On-Boarding Tutorial- Fusion 360 App
Do On Spot- Android App design
Studioka – Branding
A360 Introduction Tutorial
checkout form
Hot Deals
נרשמים ומקבלים כסף בחזרה על קניות באינטרנט: Ebates Coupons and Cash Back
תוכנות שימושיות למעצבים/מתכנתים/אנשי תוכן ומאפיינים:
גלילה לראש העמוד