עיצוב ממשק אינטרנט 2.0 ב - Photoshop
הבנת הדרכה להלן היא הבנה של הטכניקה, עם זה אתה יכול לצייר את עצמך כמה ממשק המשתמש הגרפי עבור אתר אינטרנט. ניווט בצד, כפתורים, כותרות, לדוגמה. כל סגנון Web 2.0.
הפעל בד חדש; כל מידה. משהו גדול מ 450x300px יהיה טוב. בחר את כלי מלבני מעוגל ולצייר מלבני גדול כמוצג בתמונה לעיל.
לחץ פעמיים על שכבת מלבני מעוגל להשיק את אפשרויות ערבול. שנה את ההגדרות עבור הסגנונות הבאים.
זרוק צל
אטימות: 31% מרחק: 1px מורחים: 0% גודל: 5px
שפוע ו הבלטה
עומק: 100% גודל: 0px מרכך: 0px
כיסוי גרדיאנט
לחץ פעמיים על Gradiant ולהגדיר את נקודות העצירה הבאות. מיקום: 0%, # 1378cd מיקום: 100% # 4da5f0
שבץ
גודל: 5px מיקום: צבע פנימי: # 54abf6
בואו להוסיף טקסט, שורת תיוג, כתובת אתר או משהו. האם זה באמצע וליישר נכון כל כך הלוגו יכול לגור בצד שמאל מאוחר יותר. בואו נסמן את הטקסט. אני משתמש ב- Lucida Sans Unicode; 55pt; חלק; -120 עבור מעקב תווים (ריווח אות). לחץ פעמיים על שכבת טקסט ולהגדיר את הבא אפשרויות ערבול.
שכבת על
לחץ פעמיים על Gradiant ולהגדיר את נקודות העצירה הבאות. מיקום: 0%, # 9ec7eb מיקום: 100% ecf6ff
לאחר מכן תצטרך להוסיף את הלוגו בצד שמאל של הטקסט. אני אשתמש מלבני מעוגל עם רדיוס 5px לייצג את הלוגו. הנה ה אפשרות מיזוג הגדרות עבור מלבני מעוגל.
צל פנימי
אטימות: 45% מרחק: 0px גודל: 43px;
שפוע ו הבלטה
עומק: 100% גודל: 0px מרכך: 0px הדגשת מצב אטימות: 50% ShadowMode אטימות: 100%
כיסוי גרדיאנט
לחץ פעמיים על Gradiant ולהגדיר את נקודות העצירה הבאות. מיקום: 0% # 0e2f4a מיקום: 47% # 001a31 מיקום: 48% # 002545 מיקום: 100% # 0f4b7f
שבץ
גודל: 5px לחץ פעמיים על Gradiant ולהגדיר את נקודות לעצור הבאה. מיקום: 0% # 1468af מיקום: 100% # 50abf8
בואו לתת לזה קצת מבריק אפקט. החזק CTRL ואת שמאל לחץ על מלבני מעוגל תמונה ממוזערת של שכבה. כאשר כל מלבני מעוגל נבחר, שונה ל כלי מלבן מלבני, להחזיק ALT ו שואבת את המחצית השנייה של האזור הנבחר; בדיוק כמו התמונה לעיל.
יצירת שכבה חדשה; גרור אותו כך שהוא יושב על גבי כל השכבות; למלא את החלק שנבחר עם לבן [#ffffff]; לשנות את האטימות ל -15%.
המדריך יסתיים כאן. איך אתה הולך לעשות שימוש בעיצוב זה תלוי אך ורק בך. על ידי שינוי קל של גודל וצבעים, זה יכול לשמש כותרת אינטרנט או כפתורים. הנה דוגמה.
כותרת האתר
לחצני אתר
