האתר מעוצב - עכשיו מה?

[Netta]

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

 

[ShirStudio]

אם את מעצבת בדיגיטל את צריכה לייצא לו את זה
את יכולה להשתמש בתוכנות כמו XD פיגמה וכו
לא סוגרים לפידיאף

 

[Netta]

אם את מעצבת בדיגיטל את צריכה לייצא לו את זה
את יכולה להשתמש בתוכנות כמו XD פיגמה וכו
לא סוגרים לפידיאף

זאת אומרת, בתוכנות האלו יש פונקציה שפשוט מייצאת את כל העיצוב כקובץ HTML?

 

[ShirStudio]

זאת אומרת, בתוכנות האלו יש פונקציה שפשוט מייצאת את כל העיצוב כקובץ HTML?

כן, מייצאת קוד למתכנת

 

[Netta]

כן, מייצאת קוד למתכנת

איזו תוכנה עושה את זה הכי טוב?

 

[ShirStudio]

איזו תוכנה עושה את זה הכי טוב?

תנסי את XD זו תוכנה של אדובי ממש דומה לאילוס ופוטושופ
יש אפשרות גם לעצב בפוטושופ ואז לייצא באמצעות זפלין למשל

 

[תמר לב]

שימי לב שלא כל התוכנות (כמו זפלין וinvision) תומכות באילוס, צריך לעצב בפוטשופ עם ארטבורדים.

 

[Netta]

עיצבתי משהו בXD. איך אני מייצאת אותו כקובץ HTML?
@shirdesign

 

[סיון]

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

אני מציעה לך לשאול את מי שהולך לבנות את הפרונט של האתר.
אני אישית מקבלת קבצי PSD, או Sketch וכדו' קבצים שניתן לייצא בזאפלין/אבוקדו וכדו'
ע"מ להבטיח מקסימום דיוק אפשרי,
כמו"כ אני אוהבת לקבל Style guide שמפרט בעיקר על רחיפות עכבר (HOVER) הערות מיוחדות וכדו'
+ גרסת התאמה למובייל וטאבלאט.

אבל כל אחד ושיטת העבודה שלו, לכן כאמור אני מציעה שתבדקי מול המבצע בפועל.

 

[יוסי דויד]

בואו נעשה סדר:

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

שלב מסירת הפרוייקט למתכנת
1. שליחת קובץ סגור של האתר הסופי - לדוגמא
2. שליחת קובץ פתוח של האתר הסופי בתוכנת העיצוב המתאימה, בשביל שיוכל לראות כל אלמנט בנפרד ויסיק מסקנות על ריווחים/גדלים ושאר מידע, ובשביל שיוכל להעתיק את הטקסטים, הצבעים וכו'...
3. שליחת כל אלמנט בנפרד להטמעה באתר, למעט טקסטים וכל מה ש CSS יכול לייצר (צורות גיאומטריות, טקסט ושאר ירקות...)

אופן סגירה למתכנת

אילוסטרייטור
- דרך חלון Assets Export
- באמצעות Artboards נפרד לכל אלמנט

פוטושופ
- בחירת השכבה/קבוצת-שכבות > לחיצה ימנית > Quick Export To PNG. (ניתן לבחור מספר שכבות, והתוכנה תייצא כל שכבה לקובץ נפרד, לכן מומלץ לתת שמות לשכבות, ולקבץ שכבות שאנו רוצים לייצא לקובץ אחד)
- שיתוף המסמך באמצעות Adobe Creative Cloud
- שיתוף המסמך באמצעות Zeplin

חובה לעבוד עם Character Styles, כי המתכנת יקבל את זה כחלק מהמשלוח ויציל אתכם מבלאגן באתר

אינדיזיין
- לסגור ל PNG, ולהעביר לפוטושופ (מומלץ רק לאלו שבאמת נוח להם לעבוד באינדיזיין), ולהמשיך כנ"ל

XD
- לייצא באמצעות חלון הייצוא
- לשתף באמצעות Share To Developer (לא לשכוח להגדיר באיזה תכנות מדובר: Web או ios וכו')

פיגמה וסקצ' אני לא מכיר, אז אשמח אם מישהו ימשיך אותי מכאן

 

[סיון]

בואו נעשה סדר:

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

שלב מסירת הפרוייקט למתכנת
1. שליחת קובץ סגור של האתר הסופי - לדוגמא
2. שליחת קובץ פתוח של האתר הסופי בתוכנת העיצוב המתאימה, בשביל שיוכל לראות כל אלמנט בנפרד ויסיק מסקנות על ריווחים/גדלים ושאר מידע, ובשביל שיוכל להעתיק את הטקסטים, הצבעים וכו'...
3. שליחת כל אלמנט בנפרד להטמעה באתר, למעט טקסטים וכל מה ש CSS יכול לייצר (צורות גיאומטריות, טקסט ושאר ירקות...)

אופן סגירה למתכנת

אילוסטרייטור
- דרך חלון Assets Export
- באמצעות Artboards נפרד לכל אלמנט

פוטושופ
- בחירת השכבה/קבוצת-שכבות > לחיצה ימנית > Quick Export To PNG. (ניתן לבחור מספר שכבות, והתוכנה תייצא כל שכבה לקובץ נפרד, לכן מומלץ לתת שמות לשכבות, ולקבץ שכבות שאנו רוצים לייצא לקובץ אחד)
- שיתוף המסמך באמצעות Adobe Creative Cloud
- שיתוף המסמך באמצעות Zeplin

חובה לעבוד עם Character Styles, כי המתכנת יקבל את זה כחלק מהמשלוח ויציל אתכם מבלאגן באתר

אינדיזיין
- לסגור ל PNG, ולהעביר לפוטושופ (מומלץ רק לאלו שבאמת נוח להם לעבוד באינדיזיין), ולהמשיך כנ"ל

XD
- לייצא באמצעות חלון הייצוא
- לשתף באמצעות Share To Developer (לא לשכוח להגדיר באיזה תכנות מדובר: Web או ios וכו')

פיגמה וסקצ' אני לא מכיר, אז אשמח אם מישהו ימשיך אותי מכאן

@יוסי דויד תודה על הפירוט וההשקעה בתשובה,
בפועל באמת יוצא לכם לעבוד עם מתכנתים שמבקשים כל אלמנט בנפרד? וגם את הCSS?

עריכה - קראתי עכשיו שכתבת למעט CSS

 

[יוסי דויד]

בפועל באמת יוצא לכם לעבוד עם מתכנתים שמבקשים כל אלמנט בנפרד?

בינתיים יצא לי לעבוד עם עצמי כמשתמש אלמנטור
אני תמיד מעצב בתוכנת עיצוב ולא מתחיל ישר באלמנטור...

 

[סיון]

בינתיים יצא לי לעבוד עם עצמי כמשתמש אלמנטור

הכי טוב תכלס

בינתיים יצא לי לעבוד עם עצמי כמשתמש אלמנטור
אני תמיד מעצב בתוכנת עיצוב ולא מתחיל ישר באלמנטור...

בהחלט, מצויין כך.

עניין אותי אם באמת מתחילים להוריד את כל האלמנטים בנפרד, לפעמים מתכון לבלגן,
אבל באמת כדאי לבדוק כל מקרה לגופו.

 

[יוסי דויד]

וגם את הCSS

עדיף שלא, כי CSS מתוכנות בדר"כ לא תומך ב Flex
זת'אמרת שהכל שם ממוקם absolute

 

[LEAH PIK]

איך אני מיצאת מפוטושופ קוד HTML5 למתכנת?
יש אפשרות דרך פוטושופ או ששחייב תוכנה אחרת?

 

[יוסי דויד]

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

 

[LEAH PIK]

כן הוא רוצה קוד HTML 5

 

[תמר לב]

@LEAH PIK
מסתבר שהוא מתכוון שהוא מעוניין לקבל את המידע של הcss
במידה ואכן לכך התכוון, יש להעלות לאתרים כמו ז'פליון/ אינווזין/ סימפלי