כיצד להשתמש בפוטושופ לעיצוב אתר?

הורד והתקן את Photoshop

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

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

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

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

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

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

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

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

העתק והדבק את אותו דף HTML פעמים רבות כמספר דפי האינטרנט שברשותך, אך היזהר לשנות את שמם לדפים הקשורים (כלומר, home.html, aboutus.html, contactus.html וכן הלאה...).

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