היי חברים,
היום נלמד איך ליצור עיצוב פשוט אך מרשים לדף בית של אתר אינטרנט בעזרת Photoshop.
העיצוב בסיסי, אבל נותן תוצאה נקייה ומודרנית מצוין למי שרוצה להתחיל לעצב אתרים בעצמו.
שלב 1
פתחו את Photoshop וצרו מסמך חדש בגודל 1600×3000 בפורמט אופקי.
שמרו אותו בשם Homepage.psd.
מומלץ לעבוד עם רשת (Ctrl + “) כדי לשמור על דיוק בפיקסלים. אין צורך לדאוג לגובה בשלב זה — תמיד אפשר לחתוך בסוף.
שלב 2
הוסיפו תמונת רקע (Bg_image) והגדירו אותה כרקע של הדף.
שלב 3
בחלק העליון יישאר אזור ריק מלאו אותו בגוון אפור בהיר (#e3e3e3) שנדגם מהתמונה.
מקמו את שכבת הצבע מתחת לתמונת הרקע ומחקו את החלק העליון של התמונה כך שהרקע יתמזג בצורה חלקה.
שלב 4
מזגו את שכבות הרקע ושכפלו אותן.
שנו את מצב המיזוג ל־Multiply כדי להעשיר את המראה.
שלב 5
הוסיפו לוגו (למשל “Design Optimal”).
השתמשו בפונט Roboto בגודל כ־75px, ושמרו על מרווח של 50px מהקצוות.
שלב 6
הוסיפו תפריט ניווט עליון:
הדרכות | אודות | בלוג | יצירת קשר
השתמשו באותו פונט בגודל כ־25px, ושמרו על ריווח נכון בין האלמנטים.
הדגישו את הקטגוריה הראשית (למשל “הדרכות”) בצבע כחול (#07a5e7).
שלב 7
לפני הוספת התוכן, טשטשו מעט את הרקע עם Gaussian Blur (כ־7.2px) כדי להבליט את האלמנטים מעליו.
שלב 8
צרו מלבן במרכז הדף שישמש כרקע לתוכן.
הגדירו צבע #262626 והורידו אטימות לכ־50%.
הוסיפו קווים דקים (1px) כדי לחלק את האזור לגריד מסודר.
שלב 9
הוסיפו קווים נוספים גם לרוחב, ליצירת מבנה של קטגוריות.
כעת הוסיפו את שמות הקטגוריות, כמו:
וקטור, פוטושופ, אילוסטרייטור, עיצוב, כלים וטיפים, עיצוב לוגו, ציור חופשי, עיצוב אתרים ועוד.
הקפידו למרכז כל טקסט בתוך התא שלו.
שלב 10
הקטינו את גודל הטקסט לכ־30px והוסיפו מסגרת (1px) סביב כל קטגוריה, ללא מילוי זה ידגיש את האלמנטים.
שלב 11
הוסיפו צבע שונה לכל מסגרת כדי לבדל בין הקטגוריות.
לבסוף, הוסיפו אזור תחתון (Footer) עם רקע כהה (#323232) וטקסט זכויות יוצרים.
שלב 12
זהו קיבלתם עיצוב דף בית נקי ומסודר.
אם תרצו לשדרג, אפשר להוסיף אייקונים, תמונות, פונטים שונים או רקעים נוספים הכול תלוי ביצירתיות שלכם.
לסיום, השתמשו בכלי החיתוך (Crop) כדי להתאים את גובה הדף לתוצאה הסופית.