בניית אתרים עם פוטושופ

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

שלב ראשון – הכנת תמונת מסך

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

לדוגמה אני לקחתי את דף הבית של fixing.

שלב שתיים – הכנת חלקי הדף

במהלך בניית אתרים בפוטושופ חשוב לוודא שכל החלקים ההכרחיים בדף אינטרנט קיימים.

חלקי דף אינטרנט הם:

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

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

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

שלב שלוש – חיתוך HTML דרך תוכנת ImageReady

לאחר שסיימתם לערוך את הקובץ, ושמרתם אותו, לחצו על File>Edit in ImageReady

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

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



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



אחרי שחילקנו את הדף לחתיכות(כמובן כדאי שיהיו כמה שפחות חתיכות), נבצע את החלק האחרון. נלחץ על File>Save Optimized As, ונשמור את הדף. כעת נוצר לנו דף HTML עם תמונות בתיקייה נפרדת.

כן, זה אכן פשוט בניית אתרים בפוטושופ. אחרי שתתנסו בבנייה של כמה אתרים זה יהיה אפילו קל יותר!

לפרטים ולמידע נוסף אודות קורס פוטושופ