יש מספר עצום של תבניות אתרים באינטרנט, אך יש להן חסרון אחד - הן אינן ייחודיות. אם בעל האתר לא רוצה שעיצוב האתר שלו יחזור על עצמו במקום אחר, הוא יכול להזמין תבנית ממעצב מקצועי או לנסות ליצור אותה בעצמו.
זה הכרחי
תוכנית Adobe Photoshop
הוראות
שלב 1
יצירת תבנית משלך אינה משימה קשה כפי שהיא עשויה להיראות במבט ראשון. כדי לעבוד, אתה צריך Adobe Photoshop - כמובן, אתה צריך להיות לפחות הבנה בסיסית בעבודה עם זה. אך לפני שתפעיל את התוכנית ותתחיל ליצור, עליך לחשוב מראש על העיצוב העתידי. הדרך הנוחה ביותר לעשות זאת היא להכיר תחילה לפחות מאה תבניות מוכנות, להעריך את היתרונות והחסרונות שלהן. שימו לב לפתרונות המוצלחים של אלמנטים עיצוביים מסוימים. זה לא אומר שתעתיק אותם, אבל זה די סביר לקחת כמה פתרונות יפים ונוחים כבסיס.
שלב 2
על סמך ניתוח התבניות של אנשים אחרים והיצירתיות שלך, עליך לקבל מושג כיצד ייראה האתר שלך. עדיף לעשות רישומים גסים של העיצוב העתידי עם עפרונות צבעוניים על גיליונות A4 רגילים. אתה צריך להתחיל לעבוד עם פוטושופ רק לאחר שיש לך מושג ברור מה בדיוק אתה מתכוון לצייר.
שלב 3
התחל את Photoshop, צור פרויקט חדש בגודל 1200x1600, הגדר רקע שקוף. הפעל את כלי הסרגל, אם הוא עדיין לא פועל, כדי לעשות זאת לחץ על צירוף המקשים Ctrl + R. אפשר הצמדה: תצוגה - הצמדה.
שלב 4
כעת עלינו לחלק את התבנית עם מדריכים שיציגו את גבולות האלמנטים שלה - צדדים, עמודות וכו '. לדוגמא, ברצונך לפצל את התבנית כך שיש עמודה צרה משמאל, עמודה רחבה מימין לימין התבנית, ויש מקום בחלק העליון לכותרת. המשמעות היא שאתה זקוק לשלושה קווים אנכיים (הגבול השמאלי של התבנית, הימין והקו ביניהם) וקו אופקי המציג את הגבול התחתון של הכותרת. כדי לקבוע קו אנכי, הזז את הסמן לסרגל השמאלי בצד שמאל, לחץ על V ובעוד לחיצה ממושכת על המקש, גרור את הקו למיקום הרצוי. בצע את אותו הדבר בשני הקווים האנכיים האחרים. אופקיים בנויים באותו אופן, משתמשים רק בסרגל העליון.
שלב 5
מצא רקע לתבנית שלך, זה צריך להיות דפוס קטן וחוזר. פתח אותו בפוטושופ, בחר, העתק. ואז הדבק בתבנית כמה פעמים שאתה צריך למלא אותה ברקע. ההדבקה מתבצעת כך: "ערוך" - "הדבק", ואז גרור את אזור הרקע למיקום הרצוי. זה אפילו מהיר יותר להכניס תמונה באמצעות הפקודה Ctrl + V. הוסף רקע לכותרת האתר באותו אופן. אתה יכול להשתמש במילוי שיפוע שונים כדי ליצור רקע.
שלב 6
בעזרת הכלי Pencil, שרטטו את גבולות התבנית, תוך התמקדות בקווים שכבר נמשכו (כלומר, מעליהם). קיבלתם את הבסיס לתבנית הפשוטה ביותר, כעת עליכם להשלים אותה עם הפרטים הדרושים - כפתורי ניווט, שורות תפריטים, אלמנטים לקישוט שונים וכו '. למידע נוסף על אופן יצירת כפתורים ואלמנטים אחרים, קרא את המאמרים המתאימים לעבודה עם Adobe Photoshop.
שלב 7
התבנית נוצרת, כעת עליך לחתוך אותה לחתיכות כדי להכניס אותן לדף ה- HTML. השתמש בכלי Slice לחיתוך. כדי למצוא אותו, לחץ באמצעות לחצן העכבר הימני על הכלי Frame ובחר Cutout מהתפריט שנפתח. עכשיו אתה יכול לקנן את התבנית לפי הצורך, ואז לשמור: "קובץ" - "שמור לאינטרנט". בחלון שנפתח בחר את סוג הקובץ: HTML ותמונות, ציין את שם הקובץ: index.htm ושמור אותו. יהיה לך קובץ index.htm ותיקיית תמונות עם תמונות חתוכות.
