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

מה אני אמור בסופו של דבר לצפות לקבל מהמעצב?

תודה

זה תלוי מה הם סיכמו בינהם בחוזה ו/או בעל פה.

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

בברכה, מתן.
www.MatanNarkiss.com

בדיוק מה שNarxx אמר, אך כמובן שאם תצטרך תמונות מסויימות מהעיצוב אתה יכול לבקש מהמעצב, או שיעביר לך PSD וממנו תוציא...

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

על החיתוכים האלה הוא בדיוק מדבר.

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

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


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

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/list.png]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/?https://2010-uploaded.fresh.co.il/2010/09/21/52868411.gif,http://www.boredpanda.com/blog/wp-content/themes/mimbo2.2/images/subscribe-panda-605px.png]

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

עד כמה שאני מבין - מעצב לא מבין בתכנות ולא מבין ב CSS.. הוא פשוט יושב מול הפוטושופ שלו ומחליט איך האתר יראה בפועל...
מה אכפת לו איך תממש את זה?

בברכה, מתן.
www.MatanNarkiss.com

ציטוט:

זה לא באמת כ-זה נורא... צריך לדעת CSS, אבל זה חלק מהיותנו מתכנתים (או בוני-אתרים), לא ככה?

לא, זה חלק מהסכם העסקה.
אם עובדים לפי שעות - פנאן.
אם לא, אין שום סיבה להשקיע כאן עבודה נוספת.

ציטוט:

עד כמה שאני מבין - מעצב לא מבין בתכנות ולא מבין ב CSS.. הוא פשוט יושב מול הפוטושופ שלו ומחליט איך האתר יראה בפועל... מה אכפת לו איך תממש את זה?

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

אני יודע שאני מקבל סקיצה בצורת JPG של אתר, שלצורך העניין עבר את אישור הלקוח, ואז הוא מגיע אלי.
אני צריך לבנות את האתר ע"י CSS כדי שיראה כמו ה JPG שהמעצב הביא לי.
אני מצייר לעצמי את החיתוכים ומתחיל לבנות DIVים בהתאם לפי מה שהמעצב שלח לי...
ככל שאני אהיה מנוסה יותר, זה יקח לי פחות זמן, ואז העבודה שלי פר שעה תרוויח יותר.
חשבתי שככה זה בכל מקום (בו המעצב ובונה האתר אינו אותו אדם)

בברכה, מתן.
www.MatanNarkiss.com

המעצב צריך לתת PSD שבו יש חיתוכים, לא קובץ JPEG גולמי.
בחלק גדול מהמקרים, לצערנו, יש PSD בלי שום קשר למציאות.

ציטוט:

חשבתי שככה זה בכל מקום (בו המעצב ובונה האתר אינו אותו אדם)

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

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

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

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

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

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

חולק עליך - אם הוא הצליח לקשקש את זה בפוטושופ אתה יכול ליישם אותו כאתר אינטרנט.

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/list.png]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/?https://2010-uploaded.fresh.co.il/2010/09/21/52868411.gif,http://www.boredpanda.com/blog/wp-content/themes/mimbo2.2/images/subscribe-panda-605px.png]

נראה שלא ממש קראת מה שכתבתי.
זה לא משנה מה אני יכול או לא לעשות, משנה מה שילמו לי לעשות.
אם לא שילמו לי לבצע slicing, אני לא אבצע slicing.

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

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

בברכה, מתן.
www.MatanNarkiss.com

הממם.
הסלייס הוא לא ליצור HTML, אלא לחלק את התמונה למספר תמונות קטנות...
מה תעשה עם התמונות אחר כך, זה ה-CSS

אה, הבנתי אותך עכשיו... (:

בברכה, מתן.
www.MatanNarkiss.com

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

ציטוט:

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

לא, לפחות לא דרך טובה.
פשוט לבנות את זה לפי התמונה... כאן נכנס המתכנת שאחראי על הHTML לפעולה.

זה לא מסובך מדי...
אם יש לך את התמונה כולה, אתה תצטרך להחליט איפה לחתוך כל איזור ולמדוד את הפיקסלים של כל איזור ואיזור (גובה + רוחב) וליצור בקובץ ה css שלך, הגדרה לכל איזור שכזה עם גובה ורוחב מתאימים.
במידה והוא הביא לך כבר תמונות חתוכות, אז אתה חוסך לעצמך את בדיקת הגדלים ידנית, כי יש לך את זה כבר בקבצים החתוכים... תוכל מיד להתחיל לכתוב ב css את הגדרות כל ה divים לפי הגדלים הללו.
דוגמא לחלק מקובץ css שאני בניתי לאתר פעם:

זהירות - ספויילר!

קוד PHP:

 body
{
    background-color: black;
    background-image: url(images/main_background.png);
    background-repeat: repeat-x;
}

div#wrapper
{
    width: 995px;
    margin: 100px auto;
    direction:rtl;
    position:relative;
    /*border: green 1px solid;*/
}

div#topwrapper
{
    


}

div#headerlogo
{
    background-image: url(images/logo.png);
    width: 130px;
    height: 107px;
    float: right;
    margin-bottom: 20px;
}

div#headertitle
{
    padding-top: 40px;
    float: right;
    /*border: pink 1px solid;*/
    text-align: center;
    font-size: 24px;
    font-family: tahoma;
    color: white;
    width: 860px;
    height: 67px;
    margin-bottom: 20px;
}

div#headermenu
{
    width: 100%;
    height: 33px;
    /*border: white 1px solid;*/
    background-image: url(images/headmenu_bg.png);
} 


בהצלחה! :-)

בברכה, מתן.
www.MatanNarkiss.com