כיצד ליצור מחוון תמונה באמצעות Photoshop & jQuery

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

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

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

מעוניין יותר באימוץ המחוון תמונה ולהתאים אותו בדרך? הנה הודעות המוקדש לך.

מחוון תמונה: 23 מחוונים jQuery
תמונה המחוון: 18 וורדפרס תוספים

מתחילים

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

26 תבניות דפדוף חוזרות של PSDfreemium.
ספריית jQuery
Nivo Slider plugin
מודרנית
נמצאו נייר מרקמים מ VandelayPremier
(אלטרנטיבי) 13 HQ נייר ישן טקסטורות מ overdosse
Rinjani על ידי Ciaciya
סטופה של אגנס סים
Tally על ידי נינו Satria
הצעות של טימו בלק
Uluwatu-באלי - אריס ווי

חלק I - עיצוב תמונה המחוון

שלב 1: הגדרת רקע

התחל על ידי יצירת קובץ חדש בגודל 1000 × 700 פיקסלים. מילוי הרקע עם צבע # efc89e.

הוסף שכבת תבנית באמצעות תבנית פיקסל חופשית מ- PSDfreemium.

שלב 2: בסיס המחוון

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

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

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

שלב 3

הוסף תמונה והנח אותה מעל בסיס המחוון. לחץ על Ctrl + Alt + G כדי להמיר אותו לתוך מסיכת חיתוך ולהכניס את התמונה לתוך המחוון.

שלב 4: רצועת הכלים

צייר צורת מלבן בצבע # f4e1ae שישמש כסרט.

לחץ פעמיים על שכבת הצורה והפעל את Bevel and Emboss, שכבת מעבר ב- Gradient ו- Overlay Overlay עם ההגדרות הבאות.

זוהי התוצאה לאחר הוספת סגנונות שכבה.

שלב 5

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

שלב 6

בואו נצלם כמה צללים ומדגיש על הסרט. צור שכבה חדשה מעל הסרט. צבע שחור בחלק התחתון של הסרט. להמיר אותו מסיכה מסיכה (Ctrl + Alt + G) ולאחר מכן להפחית את האטימות שלה ל -10%.

שלב 7

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

שלב 8: תפרים

הפעל כלי עיפרון. לחץ על F5 כדי לפתוח את הגדרת מברשת. קבע גודל מברשת ל -1 פיקסלים והגדל את המרווח עד שנקבל קו מקווקו באזור התצוגה המקדימה.

שלב 9

צייר 1 px שורה שחורה על גבי הסרט. צמצם את האטימות שלה ל -20%. שכפל שכבה על ידי הקשה על Ctrl + J. הקש Ctrl + I כדי להפוך את צבעו. הגדל את האטימות ל -50%. הפעל כלי העברה ולאחר מכן לחץ על החץ למטה והחץ השמאלי פעם כדי לדחוק בו.

הנה התוצאה הנצפית בהגדלה של 100%.

שלב 10

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

שלב 11: הוסף צורה מעוטרת

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

שלב 12

בחר את כל השכבות המזוגגות ומזג אותן לשכבה אחת על-ידי הקשה על Ctrl + E. צורה כפולה ולאחר מכן הנח אותה מתחת לצורה המקושטת המקורית. לחץ על Ctrl + I כדי להפוך את צבעו. הפעל כלי העברה ולאחר מכן לחץ על החץ למטה פעם אחת כדי לדחוק אותו 1 פיקסלים למטה.

שלב 13: מידע על התמונה

הקלד נתוני צילום בתוך הסרט.

שלב 14: ניווט

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

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

זו התוצאה. המעגל הופך כעת לחור רדוד.

שלב 15

החזק Alt ולאחר מכן גרור שכבת צורה של שכבה כדי לשכפל אותה.

שלב 16

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

שלב 17

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

שלב 18

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

שלב 19

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

שלב 20

צמצם את אטימות הצל ל -40%.

שלב 21

צבע, צל, רקע, רקע. הפחתת האטימות שלה ל -20%.

שלב 22

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

זוהי התוצאה הנצפית בהגדלה של 100%.

שלב 23

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

שלב 24: התוצאה הסופית של פוטושופ

זוהי התוצאה הסופית שלנו ב- Photoshop. הבא, נמשיך לקודד אותו לתוך המחוון פונקציונלי.

חלק II - המרת לתוך HTML / CSS

שלב 25 - הגדרת קבצים

צור תיקייה חדשה בשם My-Slider צילום. בתוך תיקיה זו, ליצור מסמך HTML ריק חדש (index.html), גיליון סגנונות ריק (style.css), ותיקייה עבור תמונות (img). אנחנו גם צריכים לכלול jQuery הספריה Nivo Slider plugin לתיקייה. כאשר אנו משתמשים בסימון HTML5, עלינו להוסיף גרסת IE כדי לאפשר רכיבי HTML5 ב- IE 8 או למטה. נשתמש בתסריט שנקרא Modernizr כדי להתאים את IE.

שלב 26 - בסיסי HTML Markup

פתח index.html בעורך הקוד המועדף עליך. תגדיר את DOCTYPE (אנו משתמשים ב- HTML5), ראש (כאשר אנו מוסיפים את הכותרת של המסמכים ואת הקישור CSS ו- JavaScript (jQuery הספריה, Nivo Slider, ו Modernizr) .נוסיף גם div מעטפת (למרכז הפריסה), כותרת אלמנט, ועטיפה שקופית.

      שקופיות התמונות שלי

שלב 27 - פרוסת PSD

פתח את mockup PSD ופורסים את כל התמונות הדרושות. עבור התמונה, בואו לתפוס את התמונות הבאות sxc.hu (הכניסה הנדרשת, אם אין לך חשבון עדיין, אתה יכול להירשם בחינם). שנה את גודל כל התמונות ל 920 × 430 פיקסלים. שים את כל התמונות לתוך תיקיית התמונה (img).

Rinjani על ידי Ciaciya
סטופה של אגנס סים
Tally על ידי נינו Satria
הצעות של טימו בלק
Uluwatu-באלי - אריס ווי

שלב 28 - יצירת כותרת

הוסף את הקוד הבא בין

  שקופיות התמונות שלי

עכשיו בואו להוסיף סגנון לכותרת. כמו כן, אנו מוסיפים את הסגנון עבור הגוף ועטיפות אלמנטים. שים את כל הסגנונות לתוך גיליון הסגנונות, style.css.

 / * סגנון בסיסי * / גוף רקע: url שקוף (img / bg.jpg); font: 15px / 2 'Adobe Caslon Pro', גרוזיה, Serif; שוליים: 0; ריפוד: 0;  a outline: 0 none #pagewrap margin: 120px auto; ריפוד: 0; מקומות קרובים גובה: 100%; רוחב: 960px;  כותרת display: block; צף: ימינה; margin-right: 40px; width: 192px; z-index: 52; מקומות קרובים  h1 background: url שקוף (img / separator.png) ללא מרכז חזרה למטה; / * הוסף קו מפריד מתחת לכותרת * / font-size: 18px; מודגש; גובה: 70px; line-height: 1.1; שוליים: 55px 10px 0; text-align: center; טקסט-המרה: אותיות רישיות;

שלב 29 - הוסף תמונה Slider

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

ולאחר מכן להוסיף את הסרט ואת הכיתוב עבור התמונות.

 
  צלם:
 אנריקו נונציאטי
 מקום:
 מדבר נמיב
 Model:
 מת
 תאריך:
 18 מרס 2011 
  צלם:
 לינה דהאמאנרי
 מקום:
 Lombok איילנד, אינדונזיה
 Model:
 הר רינג'אני
 תאריך:
 8 במאי 2008 
  צלם:
 אגנס סים
 מקום:
 בורובודור, אינדונזיה
 Model:
 סטופה גדולה
 תאריך:
 12 ביוני 2008 
  צלם:
 נינו סאטריה
 מקום:
 טמאן ספארי אינדונזיה
 Model:
 ג 'ירפה Tally
 תאריך:
 16 אוגוסט 2009 
  צלם:
 טימו בלק
 מקום:
 Ubud, באלי, אינדונזיה
 Model:
 הצעות
 תאריך:
 20 דצמבר 2009 
  צלם:
 אריס וו
 מקום:
 Uluwatu באלי
 Model:
 חוף יפה
 תאריך:
 20 יולי 2011

עכשיו, אם נפתח index.html בדפדפן, יש לנו משהו כזה:

שלב 30

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

 #slidewrap position: absolute; #slider position: יחסית; גובה: אוטומטי; width: 920px; border: 10px solid #fff; box-shadow: 0 0 5px # 444; שוליים: 10px;  .ribbon background: url שקוף (img / info-bg.png) no-repeat; גובה: 482px; width: 192px; תפקיד מוחלט ימין: 40px; top: -3px; z-index: 50;  #slider img position: מוחלט; top: 0px; משמאל: 0px; אל תציג דבר;

זה מה שיש לנו עכשיו.

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

שלב 31: סגנון המחוון

השלב האחרון הוא הוספת סגנון המחוון.

 / * Nivo Slider סגנונות * / .nivoSlider position: יחסית;  .nivoSlider img position: מוחלט; top: 0px; משמאל: 0px;  / * אם תמונה עטופה בקישור * / .nivoSlider a.nivo-imageLink position: מוחלט; top: 0px; משמאל: 0px; רוחב: 100%; גובה: 100%; border you01; ריפוד: 0; שוליים: 0; z-index: 6; אל תציג דבר;  / * פרוסות ותיבות של המחוון * / .nivo-slice display: block; תפקיד מוחלט z-index: 5; גובה: 100%;  .nivo-box display: block; תפקיד מוחלט z-index: 5;  .nivo-directionNav display: none! important .nivo-html-caption display: none;  .nivo-caption position: מוחלט; right: 20px; text-align: center; top: 130px; width: 192px; z-index: 60;  .nivo-ca p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: מוחלט; bottom: 10px; right: 20px; גובה: 15px; width: 192px; text-align: center; בלוק תצוגה; z-index: 51;  .nivo-controlNav a background: url שקוף (img / button.png) ללא מרכז מרכז חוזר; הצג: inline-block; גובה: 14px; width: 14px; text-indent: -9999px; הסמן: מצביע;  .nivo-controlNav .active background: url שקוף (img / button_active.png);

תוצאה סופית + הורדה

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

לא ניתן להשיג צעד מסוים? להלן התוצאה של קובץ PSD & הפרויקט המלא לך לבדוק ולשחק עם.

תמונה Slider הדרכה PSD קובץ
תמונה Slider הדרכה פרוייקט השלם