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

Netta

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

Netta

משתמש מקצוען
מנהל קבוצה
הנדסת תוכנה
אם את מעצבת בדיגיטל את צריכה לייצא לו את זה
את יכולה להשתמש בתוכנות כמו XD פיגמה וכו
לא סוגרים לפידיאף
זאת אומרת, בתוכנות האלו יש פונקציה שפשוט מייצאת את כל העיצוב כקובץ HTML?
 

ShirStudio

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
UX UI
D I G I T A L

ShirStudio

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
UX UI
D I G I T A L
איזו תוכנה עושה את זה הכי טוב?
תנסי את XD זו תוכנה של אדובי ממש דומה לאילוס ופוטושופ
יש אפשרות גם לעצב בפוטושופ ואז לייצא באמצעות זפלין למשל
 

תמר לב

משתמש מקצוען
D I G I T A L
שימי לב שלא כל התוכנות (כמו זפלין וinvision) תומכות באילוס, צריך לעצב בפוטשופ עם ארטבורדים.
 

Netta

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

סיון

המניפה
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
UX UI
D I G I T A L
שאלה למתמצאים.
אני מעצבת דיגיטל. ברגע שהעיצוב של האתר גמור בתוכנה הגרפית (אילוסטרייטור נגיד), סגרתי אותו לPDF -
ועכשיו מה?
איך המתכנת יוצר מזה אתר?
כלומר, איך הוא יודע בדיוק אילו ערכים להכניס בCSS, צבעים מדויקים, מרחקים בין אובייקטים, ריווח בין תווים אפילו?
אני לא אמורה לתת לו את כל המידע הזה ידני, נכון?
אז איך זה קורה? יש איזו תוכנה שממירה את זה?
אודה למידע.
יום טוב!

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

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

יוסי דויד

מהמשתמשים המובילים!
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
מוזיקה ונגינה
D I G I T A L
בואו נעשה סדר:

שלב העיצוב
העיצוב יכול להיעשות באילוסטרייטור, אינדיזיין, פוטושופ, 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 וכו')

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

סיון

המניפה
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
UX UI
D I G I T A L
בואו נעשה סדר:

שלב העיצוב
העיצוב יכול להיעשות באילוסטרייטור, אינדיזיין, פוטושופ, 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
 

יוסי דויד

מהמשתמשים המובילים!
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
מוזיקה ונגינה
D I G I T A L
בפועל באמת יוצא לכם לעבוד עם מתכנתים שמבקשים כל אלמנט בנפרד?
בינתיים יצא לי לעבוד עם עצמי כמשתמש אלמנטור ;)
אני תמיד מעצב בתוכנת עיצוב ולא מתחיל ישר באלמנטור...
 

סיון

המניפה
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
UX UI
D I G I T A L
בינתיים יצא לי לעבוד עם עצמי כמשתמש אלמנטור ;)
הכי טוב תכלס :)

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

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

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

LEAH PIK

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

יוסי דויד

מהמשתמשים המובילים!
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
מוזיקה ונגינה
D I G I T A L
המתכנת ביקש?
כי אם לא, אין צורך לשלוח לו. בדר"כ המתכנתים יודעים הכי טוב לתכנת את האתרים שלהם... יותר טוב מכל תוכנה אחרת
 

LEAH PIK

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
כן הוא רוצה קוד HTML 5
 

תמר לב

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

אולי מעניין אותך גם...

הפרק היומי

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


תהילים פרק קיט ב'

ט בַּמֶּה יְזַכֶּה נַּעַר אֶת אָרְחוֹ לִשְׁמֹר כִּדְבָרֶךָ:י בְּכָל לִבִּי דְרַשְׁתִּיךָ אַל תַּשְׁגֵּנִי מִמִּצְוֹתֶיךָ:יא בְּלִבִּי צָפַנְתִּי אִמְרָתֶךָ לְמַעַן לֹא אֶחֱטָא לָךְ:יב בָּרוּךְ אַתָּה יְהוָה לַמְּדֵנִי חֻקֶּיךָ:יג בִּשְׂפָתַי סִפַּרְתִּי כֹּל מִשְׁפְּטֵי פִיךָ:יד בְּדֶרֶךְ עֵדְוֹתֶיךָ שַׂשְׂתִּי כְּעַל כָּל הוֹן:טו בְּפִקֻּדֶיךָ אָשִׂיחָה וְאַבִּיטָה אֹרְחֹתֶיךָ:טז בְּחֻקֹּתֶיךָ אֶשְׁתַּעֲשָׁע לֹא אֶשְׁכַּח דְּבָרֶךָ:
נקרא  5  פעמים

לוח מודעות

למעלה