זה Adobe Photoshop הדרכה יציגו לדון ואת אופן השימוש Photoshop לעצב אתר אינטרנט זה יהיה כמו שייצאת html ותמונה פרוסות. זה יכול להיות מאוחר יותר הביא לתוך html עורך התוכנית כגון Adobe Dreamweaver. זהו Adobe Photoshop עיצוב אתרים הדרכה מראה כיצד ליצור דף אינטרנט שלם ישירות Photoshop.
אברהם chaffin CreativeCow.net, Cambria, קליפורניה, ארה"ב
ישנן דרכים רבות ושונות להתקרב את העיצוב של האתר. כ בחר לעצב כל דבר Dreamweaver, או ליצור סקיצה מהירה על נייר ולאחר מכן לבנות את האתר, בעוד אחרים מעדיפים עיצוב גרפי גישה ושימוש Photoshop בתור כלי עיצוב. ליצור את האתר שלך בתור Photoshop הקובץ הראשון עושה את הקמת האתר שלך מאוחר יותר הרבה יותר קל מסיבות שונות.
ראשית כל בעיצוב הרעיון הוא לקבל השראה מן משהו טוב, כי אתה כבר יכול לראות. כמו הצייר מקבל השראה מהעולם סביב אותם, מעצב אינטרנט גם לקבל השראה ממה שהם רואים. לפעמים, כי הוא קיים באתר, אתר תבניות, או מתוך תמונה, גרפיקה, או לוגו.
בנוסף השראה טובה היא לזהות את קהל היעד ואת תכנון סביב מה שהם בנוח עם. את המתווה והסגנון אמור להיות בחלק תואמנות עם מה קהל היעד שלך הוא כבר משתמש על. רזולוציית המסך חייב להיות גם בחשבון בעת תכנון אתר אינטרנט. את רוחב הדף ואת הראשון של לקפל את הדפים החשובים של הצלחה האתר שלך. (לקפל את האזור הוא רואה את הצופה לפני שהם נאלצים לגלול את הדף למטה.), בעוד accommodating רק רזולוציות מסך גדול עשוי לעשות את העבודה קלה יותר אתה גיוץ החוצה חלק את קהל היעד שלך. מרבית משתמשי האינטרנט כיום להשתמש רזולוציות מסך גדול יותר מתמיד ובעתיד אתרי אינטרנט קטנים הבנויים עבור רזולוציות מסך יהיו פחות גורם, אך לעת עתה היא עדיין חייבת להיחשב.
ייתכן גם עבור האתר שלך להיות גמיש רוחב כך שהוא מתרחב וכן חוזים המבוססים על משתמשים גודל חלון, זה אופטימלי כאשר היא מנסה ליצור אתר זה יהיה להתאים את כולם. האתר תוכנן כדי להתאים את גודל החלון של לפחות 750 פיקסלים רחב הוא אופטימלי. המינימום הפתרון המשמש את רוב האנשים כיום היא 800 x 600.
את השלבים של יצירת אתר האינטרנט שלך באמצעות Photoshop הם:
1. להשתמש Photoshop כדי לעצב את המראה והפריסה של האתר שבו אתה חפץ.
2. נתח את התמונה למעלה Photoshop, מייצא את פרוס תמונות או כקובץ html. הבנה html העיצוב עוזר הרבה עבור למתורגמנות כיצד לפרוס את התמונה להיכנס html.
3. ליצור את html כדי להתאים את התבנית Photoshop עיצוב האתר ו להחזיר את מפולח תמונות או להשתמש Dreamweaver כדי להתאים את html קובץ Photoshop נוצר על ידי PSD פרוסות.
את העיצוב של האתר הזה של מורה יהיה בנוי מ תמונה של Bessie שלה לרעות.
זה צריך להיות שמח באתר = O
יצירת כותרת גרפי
חלקו הראשון של עיצוב אתר אינטרנט ב Photoshop היא יצירת כותרת גרפי לאתר שלך. הכותרת הגרפית היא חלק הגרפי הראשי של האתר שלך כי שנראה תחילה ויהיה המרכז הכולל המראה והתחושה של האתר שלך. לקבל את הכותרת סיימו גרפי כאן.
השלבים הבאים אחריו:
1. הזכות לחץ כאן כדי לשמור את התמונה. שמור את התמונה בתיקייה חדשה.
2. לפתוח את הקובץ שהורד Photoshop.
3. לחתוך את התמונה עד 745 x 320 עם הלוגו של פרה הימני של התמונה. לשם כך בחר את הכלי אפריון מלבני (ז), לאחר מכן, תחת סגנון הנפתחת בחר גודל קבוע. לשים על 745 פיקסלים רוחב ו 320 פיקסלים גובה עבור. המיקום שלך אפריון כדי ליצור את הכותרת ואת לחתוך את התמונה (התמונה תפריט היבול).
4. ליצור קטן נוצה 10 פיקסל בחלק העליון של התמונה. לבחור את צבע הכלי (G), לחץ על מדרון של הדף כלי צבע החלון, בחר את ההתחלה והסיום צבעים על לבן, בחר את אטימות כדי להתחיל ו 0% עד הסוף עכירה 100%. לעשות שכבה חדשה וגרור וליצור את הרמפה בראש מחזיק המשמרת כדי לעשות את הרמפה ישר.
5. להאיר את הגרפיקה על ידי יצירת אחרת הרמפה מעל התמונה בעת הפעלת בתחתית ו lightening לכיוון הדף (להחזיק משמרות כדי לשמור על הרמפה ישר). את נקודת הסיום של הרמפה צריכה להיות בערך 300 פיקסלים מעל לתת תמונה טובה על מנת לטשטש את הגרפיקה. זה נותן את המראה של יום מואר של פרה בחווה.
6. סוף סוף אנחנו חוזרים כדי להאיר את הכותרת Graphic עוד יותר על ידי יצירת אחרת אנכי כבש בכיוון ההפוך כמו הקודם. נקודת ההתחלה צריכה להיות גם עם הדף של פרה הסמל התחתונה צריכה להיות מעל 1 פיקסל התחתון של גרפיקה.
7. שמור על הכותרת גרפי לתוך התיקייה שבה אתה הולך ליצור את אתר האינטרנט שלך באמצעות Save for Web (ALT + SHIFT + CTRL + S). שמירה כ jpg, אופטימיזציה, בשעה 70 איכות.
את הכותרת גרפי יש כעת נוצר. לגרפיקה ניתן להשתמש בדרכים שונות בתוך תבנית האתר. להשתמש בו בבית זה בהיקף מלא או לעטוף את הניווט ואת גוף הטקסט שסביבו, או לצמצום גודל ולהגדיר אותו לתוך תבנית עיצוב מודרני יותר פריסת.
עיצוב אתר פריסה ב Photoshop
את העיצוב של האתר שלך צריך להיות לפחות שלושה לייחודיים חלקים ספציפיים הכוללים אלמנטים:
1. כותרת
לוגו החברה
Graphic באנר
קישורים / כפתורים של דף הבית, על, וכן את תוכן הדף
2. גוף
תוכן עבור אזור טקסט בדף
תמונות או גרפיקה Incorporated עם תוכן
3. תחתונה
מידע על זכויות יוצרים
קישורים מדיניות / תנאי שימוש, לראש הדף ואת הקישור
בעת יצירת מתווה עיצוב ב Photoshop הקפד להשאיר מקום פרטים ניווט, טקסט, והאתר ההרחבה בעתיד או שאתה עשוי למצוא את עצמך לחלוטין צורך לעצב מחדש את האתר שלך, כי אתה לא משאיר מקום ליותר קישורים לדפים שלך עיצוב. השלבים הבאים הם השתמשו כדי ליצור את המתווה של Photoshop באתר האינטרנט של מתווה זה יכול להיות הורד כאן.
השלבים הבאים אחריו:
1. צור חדש PSD קובץ פיקסלים 745 x 600 פיקסלים ולשמור עליו כעל פריסת.PSD
2. מקום הכותרת גרפיקה למסמך. (לפתוח את הקובץ כותרת (g_header.JPG), לסמן אותה (Ctrl + A), העתק (Ctrl + C), להפעיל את פריסת.PSD חלון, הדבק (Ctrl + V).)
3. המעבר לשימוש בכלי (V) כדי להזיז את כותרת הדף של פריסת מחזיק המשמרת לתת אותו נשיכה לתוך מקום בראש.
5. לשנות את הלוגו (Ctrl + T) והעבר אותו אל הפינה השמאלית העליונה של מבנה האתר.
6. באמצעות הכלי סוג אופקית (T) חלק קטן ליצור קישורי טקסט ב בשמיים בין שני סמלים על הדף של המדריך. הקלד את המילה "דף הבית", 4 רווחים, "צור קשר", אחר 4 רווחים, ולאחר מכן "אודות". הטקסט צריך להיות בערך 12 PT, Arial גופן, באמצעות צבע # a6ff94 של כיף שעה צבע ירוק.
7. לתת את הטקסט של dropshadow (שכבה סגנון שכבה dropshadow) עם מרחק של 2 ו 3 מידות של.
8. המיקום של הטקסט באמצעות הכלי ועל המעבר במקשי החיצים כראוי לצד השמאלי העליון של הלוגו.
9. מתחת קטן פרה הלוגו ניצור חלק גדול ניווט / תמונה קישורים:
באמצעות הכלי סוג אופקית (T) מסוג "דף הבית דף 1 דף 2 דף 3 דף 4" באמצעות arial, 17 PT גופן עם טקסט שחור. לשים בערך 4 או 5 רווחים בין המילים לתת את הכפתורים קצת שטח.
ליצור שכבה חדשה
וגרור אותו מתחת טקסט שזה עתה יצרת
עם כלי מלבני אפריון (ז) בחר רק על שטח גדול סביב ניווט.
בחר את הכלי דלי צבע (G) ולמלא את האזור הנבחר החדש של שכבת עם ריק (a6ff94 #) את הצבע הירוק.
להפוך שכבה זו נראית כמו כפתור על ידי לחיצה על התפריט של שכבה סגנון שכבה שפוע ו לתבלט. להשתמש בהגדרות ברירת המחדל ידי לחיצה על אישור
באמצעות כלי יחיד בעמודה אפריון מחק עמודה של פיקסלים בין כל מילה של איתן גרין רקע שכבת עתה יצרת. זה יהיה לשבור את שפוע ולהפוך כל מילה נראית כמו כפתור נפרד. ייתכן שיהיה עליך להתמקד להגיע ממש בין המילים.
8. לשכפל את השכבה על ידי כפתור ירוק לגרור אותו על גבי שכבת לחצן חדש או עבור אל התפריט שכבה שכבת כפולים.
9. בחר את הכפתור הירוק בתחתית שכבת ו להוסיף ההצעה כדי לטשטש את שכבת עם מרחק של כ 150 פיקסלים על ידי לחיצה על התפריט המסנן לטשטש Motion לטשטש.
10. להעביר את השכבה למטה blurred לגבי 10 פיקסלים ולהפחית את אטימות עד 20%. זה נותן קו עדין מתחת לחצני לעזור לחלק העליון של תוכן.
12. ליצור שכבה חדשה מאחורי Copyright טקסט זה יהפוך את הרקע מאחורי הטקסט תחתונה, לוודא את השכבה מסומנת.
13. להשתמש בכלי מלבני אפריון (ז) כדי לבחור את פני השטח התחתון של הדף, אבל רק קצת יותר גבוה מזה של זכויות יוצרים טקסט.
14. להשתמש בכלי דלי צבע (G) ולמלא את המקום עם ירוק בהיר (# a6ff94).
15. נוצה החוצה את קצה באמצעות שכבה פנימית יוחנא סגנון (שכבת תפריט סגנון שכבה פנימית יוחנא) לקבוע את מצב כדי למזג בדרך כלל, צבע כדי לבן (# FFFFFF) ואת הגודל ל 10 פיקסלים.
שמנו כעת מתוכנן פשוט, כיף, אתר האינטרנט Photoshop עם כותרת או כותרת תחתונה. הלבן מקום בין כותרת תחתונה ואת תהיה כל תוכן טקסטואלי ותמונות אשר ימלא בפועל את אתר האינטרנט.
פלוח תמונות Photoshop for the Web
עכשיו שאנחנו תכננת פשוט עם אתר Photoshop אנו לפלח אותו לתוך חתיכות ולייצא את חתיכות כקובץ html קובץ זה יכול להיות מאוחר יותר השתמשו ב ו ששונו Dreamweaver. כאשר אתר האינטרנט שלך פלוח עיצוב לזכור שכל פרוסה יהפכו נפרד נייד של שולחן ותמונה כדי לנסות לשמור על פרוסות כמו כמה מהם יהיה פשוט ככל האפשר. ודא ולהתחיל וסיום את פרוסות מחוץ ככל שניתן את העיצוב כל כך Photoshop לא טעות אחת פיקסל אתה אולי הפסידו כ פרוסה. לפתוח את העיצוב של אתר האינטרנט עשינו לפני כן, בחר את הכלי פרוסה (K) ו הבה נתחיל. (להדליק snapping עבור תוצאות טובות יותר - תפריט תצוגה חפוז (CTRL + SHIFT +;), פקיעה כדי לוודא השכבות מופעלת.) להוריד את מפולח PSD הקובץ כאן.
השלבים הבאים אחריו:
צור אחד פרוסה בכל רחבי גרפי. מחוץ התחלה וסיום Graphic מחוץ גרפי. זה יעזור להגיד Photoshop כדי לא ליצור גרפיקה פיקסל בודד איפשהו, כי אנחנו לא רוצים.
נתח את תחתונה גרפי החל ואת הסוף של גריי מחוץ פריסת. תן למצוא את snapping העליון של שכבת בשבילך.
נתח הכותרת כל הדרך על פני הדף הפעלת מעל גרפי של גריי ואת הסוף, ממש מתחת גדול ניווט. זה צריך להפחיד את נתח בשני (או לא! ). כעת אתה אמור לקבל 3 פרוסות עבור כותרת מנה, התוכן שלך, ואת הכותרת התחתונה.
נתח את כל הכפתורים, נסה לוודא שאתה snapping לאותו המיקום עבור כל כפתור, כך גובה הלחצנים זהים. עבור התחתון, לחצנים גדול אתה יכול לחכך את החלק התחתון של הסביבה פרוסה.
שלך Photoshop עיצוב אתרים יש עכשיו פרוס ומוכן לשמור for the Web.
יצוא / שמירת Photoshop פרוסות כדף אינטרנט
בגרסאות מוקדמות יותר של Photoshop שמירת התמונה מפולח עבור האינטרנט יכול להתבצע רק עם imageready, אבל עכשיו הכל מובנית Adobe Photoshop CS3. להלן חלק של מורה יראה לכם כיצד לשמור על העיצוב של אתר האינטרנט פרוס עשינו ב Photoshop כקובץ html קבצים המקושרים עם תמונות.
השלבים הבאים אחריו:
עם פרוס גרפי בחר לפתוח תפריט קובץ Save for Web & ההתקנים (ALT + SHIFT + CTRL + S). זה מביא את שמור ליותר אינטרנט & התקנים חלון.
תחת מראש הנפתח בחר JPEG גבוה של איכות ושל סוג קובץ. (זה פשוט ההעדפה.)
לחץ על תפריט מותאם על החץ כדי לפתוח את תפריט המשנה ולחץ על ערוך הגדרות פלט...
אנחנו לא נכנס לפרטי פרטים על הגדרות הפלט כאן. בחר את הגדרות ברירת המחדל של הגדרות הנפתחת. שימוש קודם וליד להסתכל על כל ההגדרות.
לחץ על אישור ולאחר מכן שמור. ודא שאתה שומר את במיקום תוכל לאתר בקלות.
בחר שמור כסוג: html ותמונות (*.html )
הגדרות: הגדרות ברירת המחדל
פרוסות: כל פרוסות
לחץ על שמור
מזל טוב עכשיו אתה כבר מתוכנן בהצלחה עם אתר Photoshop, פרוס את זה, בהצלחה ולאחר מכן לייצא את זה כקובץ html קובץ! יש כמה שינויים פשוטים זה צריך להיעשות יחד עם זאת, לפני העיצוב יכול להיות מלא המשמש דף אינטרנט או אתר אינטרנט התבנית, אבל אני מתכוון להשאיר את זה לעוד הדרכה.
עכשיו שאנחנו תכננת פשוט עם אתר Photoshop אנו לפלח אותו לתוך חתיכות ולייצא את חתיכות כקובץ html קובץ זה יכול להיות מאוחר יותר השתמשו ב ו ששונו Dreamweaver. כאשר אתר האינטרנט שלך פלוח עיצוב לזכור שכל פרוסה יהפכו נפרד נייד של שולחן ותמונה כדי לנסות לשמור על פרוסות כמו כמה מהם יהיה פשוט ככל האפשר. ודא ולהתחיל וסיום את פרוסות מחוץ ככל שניתן את העיצוב כל כך Photoshop לא טעות אחת פיקסל אתה אולי הפסידו כ פרוסה. לפתוח את העיצוב של אתר האינטרנט עשינו לפני כן, בחר את הכלי פרוסה (K) ו הבה נתחיל. (להדליק snapping עבור תוצאות טובות יותר - תפריט תצוגה חפוז (CTRL + SHIFT +;), פקיעה כדי לוודא השכבות מופעלת.) להוריד את מפולח PSD הקובץ כאן.
חלק קטן ליצור קישורי טקסט ב בשמיים בין שני סמלים על הדף של המדריך. הקלד את המילה "דף הבית", 4 רווחים, "צור קשר", אחר 4 רווחים, ולאחר מכן "אודות". הטקסט צריך להיות בערך 12 PT, Arial גופן, באמצעות צבע # a6ff94 של כיף שעה צבע ירוק.
וגרור אותו מתחת טקסט שזה עתה יצרת
