איך חותכים לוורדפרס

[Splash Design]

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

 

[KingYes]

את כל התמונות שעיצבת לחתוך.. וזהו. את שאר העימודים הבונה האתר, צריך לעשות.

ברוכה הבאה לעולם ה-Web.

 

[Splash Design]

את כל התמונות שעיצבת לחתוך.. וזהו. את שאר העימודים הבונה האתר, צריך לעשות.

ברוכה הבאה לעולם ה-Web.

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

 

[member]

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

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

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

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

בהצלחה!

 

[Splash Design]

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

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

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

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

בהצלחה!

תודה רבה על התשובה המפורטת

 

[נוכחות לעסקים]

2 מאמרים מעולים איך לחתוך עיצוב מפוטשופ
http://www.pixelperfect.co.il/posts/slicing/

http://www.pixelperfect.co.il/posts/create-web-psd/#more-11507

 

[s976]

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

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

 

[wmw]

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

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

[סתם שתדעו שיש אלמנט CSS3 חדש ב BACKGROUND שמאפשר לקבוע אובייקט מסגרת שהאמצע ישכפל את עצמו והשוליים לא... בע"ה נביא את זה באחד המדריכים הקרובים]

 

[chani-studi]

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

תשובה מצוינת רק מוסיפה הערה קטנה
חשוב לשמור את התמונות עם רקע שקוף

 

[member]

תשובה מצוינת רק מוסיפה הערה קטנה
חשוב לשמור את התמונות עם רקע שקוף

רק במקרה הצורך.

 

[Shia]

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