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

הירשם עכשיו!
  • הוסף לסימניות
  • #1
שאלה למתמצאים.
אני מעצבת דיגיטל. ברגע שהעיצוב של האתר גמור בתוכנה הגרפית (אילוסטרייטור נגיד), סגרתי אותו לPDF -
ועכשיו מה?
איך המתכנת יוצר מזה אתר?
כלומר, איך הוא יודע בדיוק אילו ערכים להכניס בCSS, צבעים מדויקים, מרחקים בין אובייקטים, ריווח בין תווים אפילו?
אני לא אמורה לתת לו את כל המידע הזה ידני, נכון?
אז איך זה קורה? יש איזו תוכנה שממירה את זה?
אודה למידע.
יום טוב!
 
  • הוסף לסימניות
  • #2
אם את מעצבת בדיגיטל את צריכה לייצא לו את זה
את יכולה להשתמש בתוכנות כמו XD פיגמה וכו
לא סוגרים לפידיאף
 
  • הוסף לסימניות
  • #3
נכתב ע"י shirdesign:
אם את מעצבת בדיגיטל את צריכה לייצא לו את זה
את יכולה להשתמש בתוכנות כמו XD פיגמה וכו
לא סוגרים לפידיאף
לחצ/י כדי להרחיב...
זאת אומרת, בתוכנות האלו יש פונקציה שפשוט מייצאת את כל העיצוב כקובץ HTML?
 
  • הוסף לסימניות
  • #4
  • הוסף לסימניות
  • #6
נכתב ע"י Netta:
איזו תוכנה עושה את זה הכי טוב?
לחצ/י כדי להרחיב...
תנסי את XD זו תוכנה של אדובי ממש דומה לאילוס ופוטושופ
יש אפשרות גם לעצב בפוטושופ ואז לייצא באמצעות זפלין למשל
 
  • הוסף לסימניות
  • #7
שימי לב שלא כל התוכנות (כמו זפלין וinvision) תומכות באילוס, צריך לעצב בפוטשופ עם ארטבורדים.
 
  • הוסף לסימניות
  • #8
עיצבתי משהו בXD. איך אני מייצאת אותו כקובץ HTML?
@shirdesign
 
  • הוסף לסימניות
  • #9
נכתב ע"י Netta:
שאלה למתמצאים.
אני מעצבת דיגיטל. ברגע שהעיצוב של האתר גמור בתוכנה הגרפית (אילוסטרייטור נגיד), סגרתי אותו לPDF -
ועכשיו מה?
איך המתכנת יוצר מזה אתר?
כלומר, איך הוא יודע בדיוק אילו ערכים להכניס בCSS, צבעים מדויקים, מרחקים בין אובייקטים, ריווח בין תווים אפילו?
אני לא אמורה לתת לו את כל המידע הזה ידני, נכון?
אז איך זה קורה? יש איזו תוכנה שממירה את זה?
אודה למידע.
יום טוב!
לחצ/י כדי להרחיב...

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

אבל כל אחד ושיטת העבודה שלו, לכן כאמור אני מציעה שתבדקי מול המבצע בפועל.
 
  • הוסף לסימניות
  • #10
בואו נעשה סדר:

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

פיגמה וסקצ' אני לא מכיר, אז אשמח אם מישהו ימשיך אותי מכאן :)
 
  • הוסף לסימניות
  • #11
נכתב ע"י יוסי דויד:
בואו נעשה סדר:

שלב העיצוב
העיצוב יכול להיעשות באילוסטרייטור, אינדיזיין, פוטושופ, 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
 
  • הוסף לסימניות
  • #12
נכתב ע"י סיון:
בפועל באמת יוצא לכם לעבוד עם מתכנתים שמבקשים כל אלמנט בנפרד?
לחצ/י כדי להרחיב...
בינתיים יצא לי לעבוד עם עצמי כמשתמש אלמנטור ;)
אני תמיד מעצב בתוכנת עיצוב ולא מתחיל ישר באלמנטור...
 
  • הוסף לסימניות
  • #13
נכתב ע"י יוסי דויד:
בינתיים יצא לי לעבוד עם עצמי כמשתמש אלמנטור ;)
לחצ/י כדי להרחיב...
הכי טוב תכלס :)

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

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

עניין אותי אם באמת מתחילים להוריד את כל האלמנטים בנפרד, לפעמים מתכון לבלגן,
אבל באמת כדאי לבדוק כל מקרה לגופו.
 
  • הוסף לסימניות
  • #15
איך אני מיצאת מפוטושופ קוד HTML5 למתכנת?
יש אפשרות דרך פוטושופ או ששחייב תוכנה אחרת?
 
  • הוסף לסימניות
  • #16
המתכנת ביקש?
כי אם לא, אין צורך לשלוח לו. בדר"כ המתכנתים יודעים הכי טוב לתכנת את האתרים שלהם... יותר טוב מכל תוכנה אחרת
 
  • הוסף לסימניות
  • #17
כן הוא רוצה קוד HTML 5
 
  • הוסף לסימניות
  • #18
@LEAH PIK
מסתבר שהוא מתכוון שהוא מעוניין לקבל את המידע של הcss
במידה ואכן לכך התכוון, יש להעלות לאתרים כמו ז'פליון/ אינווזין/ סימפלי
 

פרוגבוט

תוכן שיווקי
פרסומת
עליך להתחבר או להירשם כדי להשיב כאן.
למעלה