לפני כשנה רכשנו בעבודה את התוסף CSS HAT על מנת להקל על תכנות ה UI באתרים שלנו והבאת האתר למראה זהה לקובץ PSD.
לאה שלחה לי עוד 2 כלים דומים שהיא נתקלה בהם והיא הציעה שאכתוב פוסט מסכם – אז הנה 🙂
ברחבי הרשת ישנם הרבה כלים והבטחות להפוך את קובץ ה PSD שלנו במטה קסם ל HTML ו CSS. חלק מהאתרים מייצגים שירות שמאחוריו עומדים מתכנתים שמיישמים את העיצוב לתכנות וחלק אוטומטיים.
נתקלתי בחיפושי בכמה אתרים שמבטיחים המרה פשוטה של עיצוב לקוד, ומה גדולה הייתה אכזבתי שהתוצר שלהם היה אוסף של גזירי תמונות שנשמרו בפורמט PNG וה HTML כלל רשימה של תמונות מצורפות. לא זאת הייתה הכוונה בכלל 🙁
מצד שני, יש כמה כלים שכן עשו את העבודה ועליהם ראוי לדבר:
CSS HAT
תוסף לפוטושופ, הגרסה הראשונה שלו נתמכת בגרסאות פוטושופ: CS4, CS5, CS6 ו CC. עולה כמעט 35$
אחרי ההתקנה של התוסף מתווסף לסרגלי הכלים אייקון של כובע.
אופן השימוש: עמידה על אחת השכבות הרצויות בקובץ ופתיחה של חלון התוסף שם מופעים כל הסטייל של השכבה.
מאוד נוח לעבודה. מאפשר העתקה קלה של הקוד, מותאם לדפדפנים אחרונים וגם תומך אחורנית. מאפשר ביטול של הצגה של פרמטרים כמו רוחב וגובה שעדיף בדר"כ לא להגדיר כקבועים.
מאפשר ייצוא ל CSS, LESS, SASS ועוד פורמטים.
לא מאפשר ייצוא של כל השכבות בבת אחת (בעייני זה לא חיסרון אבל יש שיחלקו עלי)
CSS3PS
תוסף חינמי לפוטושופ. נתמך מ Photoshop CS3. אמנם בגרסאות חדשות של פוטושופ (cs ו CC) היישום שלו בתוך הפוטושופ עצמו (מופיע ככפתור) אבל התוצאה הסופית זהה.
בניגוד ל css hat שמאפשר ייצוא של שכבה אחת – css3ps מייצא את כל השכבות של ה PSD לקובץ CSS אחד. בעייני זה חיסרון כי אם אין שמות משמעותיים לשכבות ואם יש הרבה שכבות זה לא כל כך נוח.
חסרון נוסף בתוסף הוא העובדה שהוא לא מתפקד טוב עם תיקיות ותתי תיקיות. היות ובדרך כלל בעיצוב מאגדים שכבות לתיקייה זה בעיה גדולה.
Project Parfait
כלי מבית אדובי. הפעם זה לא תוסף לפוטושופ אלא כלי כחלק מה creative cloud. מאפשר שימוש גם למי שאין את כל החבילה המורחבת אבל מצריך שם משתמש של אדובי וכמובן – מצריך העלאה של הקובץ PSD לענן.
לצערי project parfait לא קורא קבצים של גרסאות ישנות של הפוטושופ וההתרשמות שלי היא מקובץ הדמו שלהם בלבד:
כמה דברים טובים שיש לו לומר עליו:
- גם פה ניתן להוציא CSS לכל שכבה בנפרד – שאת זה כבר ציינתי קודם – אני אוהבת 🙂
- נותן מידות של אלמנטים גם באחוזים – שזה מאוד נוח בשביל תכנות למובייל
- מאפשר שליטה יפה על הפונטים ואם הבנתי נכון גם ייצוא שלהם (בדוגמא יש פונטים של אדובי אז הוא מעביר לעמוד source שלהם)
- במעבר על טקסט ניתן גם להוציא את הסטייל שלו וגם להעתיק את המלל עצמו
- מאפשר מעבר על תמונות ושמירה שלהם – גם בפורמט SVG שזה ממש אחלה ובעצם אחד הייתרונות הגדולים של הכלי על פני 2 התוספים האחרים.
החסרון המאוד גדול שלו הוא חוסר התמיכה בפורטים ישנים של פוטושופ.
פה ניתן לקרוא סקירה מורחבת על הכלי
הערה חשובה לגבי שימוש בכלים – כתנאי מקדים לעבודה, קובץ ה PSD צריך להיות בנוי באופן בו התוסף יוכל לתרגם אותו כמו שצריך ל CSS. זאת אומרת – שאם יש גראדיאנט – הוא צריך להיות בשכבת אפקטים ולא שטוח על השכבה. להשתמש בצורות וקטוריות בשביל פינות עגולות ועוד. זוהי הדרך הנכונה לעבוד עם פוטושופ בכל מקרה אבל במיוחד אם רוצים להשתמש בכלים לייצוא CSS. דבר נוסף – אף אחד מהכלים לא התמודד עם smart object (שכבה מורכבת בפוטושופ אשר יכולה להכיל שכבה אחת או יותר או אפילו הדבקה מאילוסטרייטור) ואת זה צריך לקחת בחשבון.
יתכן וישנם עוד כלים דומים לאלו שהצגתי בפוסט – עימם הסליחה.