עיצוב פריסת בלוג נקי ואלגנטי ב Photoshop CS6

במדריך זה אני הולך להראות לך את התהליך של ביצוע בלוג עיצוב פשוט ונקי באמצעות Photoshop האחרונה. אנחנו הולכים להשתמש החדש סגנונות תו ו סגנונות פסקה כדי לסייע לנו לייעל את התהליך.

כדי לעקוב אחר הדרכה זו, תזדקק למשאבים הבאים:

• חינם גופן סנסציה מ ברנד מונטג.
• 26 דפוס פיקסל חוזר מ PSDfreemium.
• חינם מדיה חברתית סמלים מאת דניאל Selvitella.

• הדגמה

הכנת הבד

שלב 1

בתכנון זה, אנחנו הולכים להשתמש 960 גרם כמסגרת שלה. הורד את התבנית מהדף הראשי שלה ובתוך קובץ ה- zip, חפש את קובץ ה- Photoshop. פתח את הקובץ '12 Column Grid 'ב- Photoshop.

לחץ על סמל העין עבור 12 שכבת רשת Col כדי להסתיר אותו; אנחנו לא צריכים את זה עכשיו.

שלב 2

גודל הבד הנוכחי קטן מדי. לחץ על תמונה> גודל בד (או Ctrl + Alt + C). הוסף גודל גדול יותר והקפד להגדיר נקודת עוגן למרכז.

שלב 3

לחץ על Ctrl + R כדי לחשוף את השליט. לחץ על הצג> חדש מדריך כדי להפוך את המדריך החדש שיעזור לנו לעצב במדויק. בחר אנכי ובאותו תפקיד: 185 px כדי להפוך את המדריך האנכי 185 פיקסלים מן הפינה השמאלית העליונה בד.

שלב 4

צייר מדריך אנכי נוסף במיקום 150 px, 1095 פיקסלים ו 1130 פיקסלים.

להלן המדריך הסופי שלנו בתוך הבד.

הכנת נושא צבע

שלב 5

עבור עיצוב זה, אנחנו הולכים להשתמש בשילוב צבע נחמד מ Colorlouver. לחץ על הקישור תצוגה מקדימה כדי לפתוח את שילוב הצבע כקובץ jpeg.

שמור את שילוב הצבע והכניס אותו לקובץ Photoshop. על ידי הצבת התמונה ישירות בתוך הבד אנו יכולים מדגם צבע מהר יותר וקל יותר.

הכנת הרקע

שלב 6

בחר רקע כללי שכבה ולחץ על סמל המנעול בראש החלונית 'שכבות' כדי לבטל את הנעילה. לחץ פעמיים על התמונה הממוזערת כדי לשנות את צבעה.

לחץ על הצבע השני, # 948371, כדי לבחור אותו.

שלב 7

צייר צורה מלבנית על גבי הבד. זה יהיה הרקע השני.

שלב 8

השאר את הצורה שנבחרה. בתוך ה בר אפשרות, פתוח למלא צבע ולאחר מכן לחץ על סמל גלגל הצבעים. כאשר תיבת הדו-שיח 'בחירת צבע' נפתחת, לחץ על הצבע הראשון כדי לבחור בה. עבור שלה שבץ בחר צבע אף אחד.

שלב 9

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

שנה את תערובת מצב ל מסך ולהקטין את שלה אטימות ל 37%.

שלב 10

ליצור שכבה חדשה בשם "צל".

צייר בחירה מלבנית בתחתית הרקע המשני כמוצג. לחץ על ערוך: מילוי. הגדר להשתמש ל שחור. לחץ על בסדר כדי למלא את הבחירה עם שחור.

שלב 11

לרכך אותו באמצעות טשטוש גאוס. לחץ על מסנן> טשטוש> טשטוש גאוסי.

שלב 12

החזק Alt ולאחר מכן הצב את הסמן בין צל ו הרקע העליון שכבה. מבלי לשחרר את מקש Alt, לחץ על כדי להמיר את השכבה כדי מסיכה מסיכה. על ידי המרת אותו מסכה קליפ, הצל עכשיו הולך בתוך הרקע העליון.

שלב 13

תביא צל אטימות ל 50% כדי להפוך אותו מתוחכם. להלן, ניתן לראות את התוצאה בהגדלה של 100%.

שלב 14

זה תמיד רעיון טוב לשים את השכבות האלה בקבוצה אחת. כדי לעשות זאת, בחר את כל השכבות ולאחר מכן לחץ על Ctrl + G.

כותרת

שלב 15

צייר מלבן על הבד העליון כמוצג.

שלב 16

בתוך ה בר אפשרות, בחר שבץ צבע ל # af9f8e.

שלב 17

עבור שלה למלא צבע, בחר שיפוע ליניארי מ # d0c4b9 to # a89c91.

להלן התוצאה בתצוגה של 100%.

שם האתר

שלב 18

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

תפריט

שלב 19

צייר תפריטים בצד השני של שורת התפריטים. השתמש בגופן Sansation 14 pt. שוב, שים לב למיקומים.

שלב 20

עבור התפריט הפעיל, הגדר את סוג הגופן שלו להדגשה.

שלב 21

הפעל כלי מצולע ולהגדיר צדדים ל 3. צייר צורת משולש עם מילוי: # 3d3123 ו שבץ: אף אחד. הוסף סגנון שכבות > צל צל.

שלב 22

בואו נדגיש את התפריט הפעיל על ידי הוספת שורה מתחתיו. הפעל את כלי קו ולהגדיר את משקלו 5 px. בחר # f76b6a עבור מילוי שלה, ללא שבץ.

הצב את הקו מתחת לתפריט הפעיל והוסף רווח של 1 פיקסלים לתחתית שורת התפריטים.

באמצעות סגנונות תו

שלב 23

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

לחץ פעמיים על סגנון התווים החדש והשתמש בהגדרה הבאה.

שלב 24

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

שלב 25

חזור על השלב הקודם כדי ליצור סגנון תו חדש עבור התפריט הפעיל.

שלב 26

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

שלב 27

צור שכבה חדשה והנח אותה מתחת לסרגל התפריט. הקש Ctrl על שורת התפריטים כדי לבצע בחירה חדשה על פי צורתה. מלא אותו שחור.

שלב 28

הסר את הבחירה באמצעות Ctrl + D. לרכך אותו על ידי הוספת טישטוש גאוסיאני, מסנן> טשטוש> טשטוש גאוסי.

מחוון

שלב 29

צייר צורה מלבנית עם רוחב של 10 עמודות (ראה להלן).

עבור שלה צבע מילוי בחר # dfd1c2. עבור שלה שבץ בחר # c8baac עם גודל 10 נק '. לחץ על החץ הנפתח הקטן שליד התצוגה המקדימה של הקו וודא ישר בתוך נבחר.

שלב 30

הדבק תמונה על גבי המסגרת. להמיר אותו מסכה על ידי הקשה על Ctrl + Alt + G. התמונה תלך באופן אוטומטי לתוך מסגרת המחוון. במידת הצורך, תוכל להזיז ולשנות את גודל התמונה מבלי להשפיע על המסגרת.

שלב 31

צייר צורה מלבנית נוספת מאחורי המחוון עם אותו צבע. הקפד להצמיד אותו אל המדריך החיצוני. הוסף סגנון שכבה> שכבת על באמצעות דפוס פיקסל מ PSDfreemium. טון למטה אטימות כדי להפוך את מתוחכם.

שלב 32

צייר צורה מלבנית מעל הצורה עם מילוי: # b3aca5 ו ללא שבץ. הקש Ctrl + T ולאחר מכן לסובב אותו 45 °. המרת צורה שכבה ל מסכה.

שלב 33

שכפל את הצורה ואת גודל אותה. שנה את למלא אל צבע כהה יותר. המרת צורה שכבה ל מסכה.

שלב 34

חזור על אותו צעד כדי לצייר חץ נוסף בצד השני.

שלב 35

הקש Ctrl על מסגרת השקופית כדי לבצע בחירה חדשה. הפוך שכבה חדשה ולהמיר אותו מסכה. מלא את הבחירה באמצעות שחור.

שלב 36

בטל את הסימון (Ctrl + D) לרכך זה באמצעות טישטוש גאוסיאני.

אתה יכול להקטין את אטימות צל אם יש צורך.

שלב 37

צייר מלבן מעוגל על ​​פינה של המחוון עם מלא # c8baac.

שלב 38

צייר עיגול בתוך הצורה. הגדר שבץ ל שחור עם גודל 1 pt ו הסר את המילוי.

שלב 39

בחר את מעגל נתיב באמצעות בחירת נתיב כלי. Shift + Alt- גרור את הנתיב כדי לשכפל אותו.

חזור על זה כדי לצייר מעגלים נוספים.

שלב 40

בחר נתיב מעגל אחד. לחץ על Ctrl + Shift + J כדי לחתוך אותו לשכבה חדשה.

שלב 41

בתוך ה בר אפשרות, להסיר שלה שבץ ולשנות שלה למלא כדי רדיאלי מעבר מ # e38989 # bb5c5c. הוסף סגנון שכבה> זוהר חיצוני ו זרוק צל.

שלב 42

צייר בחירה אליפטית מתחת למחוון. צור שכבה חדשה ומלא אותה שחור.

שלב 43

בטל סימון (Ctrl + D). לרכך את זה באמצעות טישטוש גאוסיאני.

הרקע התחתון

שלב 44

צייר צורה מלבנית נוספת עבור הרקע התחתון. השתמש באותו למלא ו שבץ צבע כמו הצורה המחוון.

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

הוסף סגנון שכבה> שכבת על.

להלן התוצאה של הגדלה של 100%.

שלב 45

בחר את אזור העזר באמצעות הכלי מלבן מלבני.

שלב 46

הפוך שכבה חדשה, למקם אותו מאחורי הצורה. מלא את הבחירה באמצעות שחור. לחץ על Ctrl + T, לחץ לחיצה ימנית ובחר פרספקטיבה.

גרור את הפינות העליונות כלפי חוץ.

לחץ לחיצה ימנית שוב ובחר קנה מידה. גרור את הידית העליונה כלפי מטה.

לחץ לחיצה ימנית ובחר עיוות. גרור את הקטע שמאלה וימינה פנימה.

לרכך את זה באמצעות טישטוש גאוסיאני.

טוני למטה אטימות ל 20%.

שלב 47

צייר מלבן לבן בתוך הרקע. זה הולך להיות רקע התוכן הראשי של האתר.

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

שלב 48

הוסף מדריך חדש, 25 פיקסלים מהצד העליון של הצורה.

כותרת הסעיף

שלב 49

הוסף סגנון תו חדש עבור כותרת קטע הדף ותיאורו.

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

שלב 50

צייר קו 5 פיקסלים תחת תיאור האתר עם מילוי: # 938270 ו שבץ: אף אחד.

פוסט בבלוג

שלב 51

צור סגנון תו נוסף עבור כותרת ההודעה.

שלב 52

הוסף כותרת רשומה והחל סגנון תווים קודם.

שלב 53

צייר צורת מלבן מתחת לכותרת עם 4 עמודות רוחב. הגדר לבן J למלא ו #bebebe J שבץ. הוסף סגנון שכבה> שבץ.

שלב 54

הדבק תמונה על גבי הצורה. המר אותו ל מסיכת חיתוך (Ctrl + Alt + G).

שלב 55

צייר מלבן מעוגל עם מלא: # 8e8380 ו שבץ: אף אחד. להמיר אותו מסכה.

שלב 56

צור סגנונות תווים חדשים עבור המטא נתונים של הבלוג.

שלב 57

הוסף טקסט של מטא נתונים על גבי הצורה והחל את סגנון התווים שעשינו קודם לכן.

שלב 58

הפעל הקלד הכלי ולחץ על גרור כדי ליצור תיבת טקסט. הגדר את הרוחב ל -4 עמודות. לחץ על סוג> הדבק לורם Ipsum כדי למלא את זה עם שנוצר אוטומטית לורם Ipsum מ Photoshop.

שלב 59

צור סגנון פסקה חדש עבור תוכן התווים. לחץ על הסמל החדש בחלונית 'סגנונות פסקה'.

לחץ פעמיים על סגנון הפסקה והשתמש בהגדרה הבאה.

שלב 60

החל סגנון זה על תוכן הפוסט. ניתן גם להתנסות עם הגדרות הכניסה והריווח.

עבור עיצוב אתרים, בטל את מיקוף.

שלב 61

צייר מלבן מעוגל עם מלא: # 8e8380 ו שבץ: אף אחד. הוסף סגנון שכבה> שכבת על. לקבלת עקביות, השתמש באותה תבנית כמו במחוון.

שלב 62

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

שלב 63

הלחצן הקודם הוא במצב רגיל. בואו לשכפל אותו ולשנות את הצבע שלו # f76b6a. כמו כן, הגדר את סוג התווית שלה למודגש.

שלב 64

הצב את ההודעה בתוך קבוצה ולאחר מכן הקש Ctrl + J כדי לשכפל אותו. הקישו Alt כדי לשכפל את הקבוצה.

חזור על אותו צעד כדי ליצור עוד הודעות. זכור לשנות את התמונה ואת הכותרת של כל הודעה.

שלב 65

שכפל קרא עוד כפתור ולשנות את התווית שלה למספר. אנחנו הולכים להשתמש בו עבור ניווט בדף. זכור להגדיר את אחד הכפתורים כדי לעבור למצב.

שלב 66: כותרת תחתונה

בואו נתחיל לעבוד על הכותרת התחתונה. הוסף כותרת ווידג'ט ותיאורה.

שלב 67

הוסף קישור וצייר קו 1 פיקסלים מתחתיו. הגדר מילוי: אין ו שבץ: # 8e8380.

שלב 68

לחץ על אפשרויות נוספות לחץ על ובחר קו מקווקו.

שלב 69

הוסף עוד קישורים אל הווידג'ט.

שלב 70

שכפל את הווידג'ט.

שלב 71

אנחנו גם צריכים להוסיף את מצב ריחוף. הגדר אחד מהקישורים למודגש.

מתחת לקישור הפעיל הזה, הוסף שורה של 5 פיקסלים. הגדר את צבעו # f76b6a. לקבלת עקביות, המראה של קישור זה דומה לתפריט הפעיל בשורת התפריטים.

שלב 72

הוסף מלבן נוסף באזור התחתון. הגדר למלא ל # 3d3123.

מידע על כותרת תחתונה

שלב 73

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

רשת חברתית

שלב 74

הוסף כמה סמלי מדיה חברתית מאת Daniele Selvitella. הוסף סגנון שכבה> זוהר חיצוני.

שלב 75

כוונן את הסמל הרגיל אל 50%. עבור מצב ריחוף, בואו פשוט לשמור על שלה אטימות ב 100%.

שלב 76

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

תוצאה סופית

זוהי התוצאה הסופית שלנו. אתה יכול לראות את הגרסה האחרונה של Photoshop יש כמה תכונות מעניינות לעיצוב פריסת אינטרנט. סגנונות תו וסגנונות פסקה הוא שיפור משמעותי עבור כל מעצב אינטרנט.

• הדגמה
• הורד מקור