אחת הטכניקות "החמים" באינטרנט כיום היא גלילה פרלקסה. כולנו כבר לאותם אתרים שבהם אתה לסובב את גלגל הגלילה על העכבר ואת התוכן בדף נע למעלה ולמטה או על פני הדף תוך כדי לסובב את גלגל העכבר.
עבור אלה חדשים לעיצוב אתרים ועיצוב גרפי, טכניקה זו יכולה להיות קשה מאוד להשיג בשל כמות CSS הנדרש.
אם זה מתאר אותך, ישנם מספר יישומים שעשויים רק לערער על אמנים גרפיים. הם בעצם להשתמש בגישה פריסת דף מוכר דפי אינטרנט, כלומר אין הרבה, אם בכלל, קידוד מעורב. יישום אחד שיש לו באמת rocketed לתוך בולטות הוא Adobe Muse.
העבודה מתבצעת על ידי מקצוענים גרפיקה באמצעות מוזה הוא די מדהים ואתה יכול לראות דגימה של מה שאתה יכול לעשות על ידי ביקור באתר Muse של היום . למרות מקצועני האינטרנט נוטים לראות את מוזה כמו להיות איזה "צעצוע את הרוח", זה גם בשימוש על ידי מעצבים ליצור אב טיפוס ניידים באינטרנט כי יהיה בסופו של דבר נמסר ליזמים על הצוות שלהם.
טכניקה אחת כי הוא incredibly קל להשיג עם מוזה הוא גלילה פרלקסה, ואם אתה רוצה לראות את הגירסה הושלמה של התרגיל אנחנו נלך דרך, הצבע הדפדפן שלך לדף זה. כאשר אתה מגלגל את גלגל הגלילה של העכבר, נראה שהטקסט נע למעלה או למטה בדף והתמונות משתנות.
בואו נתחיל.
Friday of 07
יצירת דף אינטרנט
בעת הפעלת Muse לחץ על הקישור ' אתר חדש' . פעולה זו תפתח את מאפייני האתר החדש . פרויקט זה מיועד ליישומי שולחן עבודה וניתן לבחור אותו בתפריט הנפתח ' פריסה ראשונית' . ניתן גם להגדיר את הערכים עבור מספר עמודות, רוחב מרזב, שוליים, וריפוד. במקרה זה, לא היינו מודאגים מאוד עם זה פשוט לחץ על אישור .
02 of 07
לעצב את הדף
כאשר אתה מגדיר את מאפייני האתר ולחץ על אישור לקחו מה שנקרא תצוגת תוכנית . יש דף הבית בראש הדף מאסטר בחלק התחתון של החלון. אנחנו רק צריכים דף אחד. כדי להגיע לתצוגת עיצוב, הקלקנו פעמיים על דף הבית שפתח את הממשק.
בצד שמאל יש כמה כלים בסיסיים בצד ימין הם מגוון של לוחות המשמשים לתפעל את התוכן בדף. לאורך החלק העליון הם המאפיינים, הניתנים להחלה על הדף, או כל פריט שנבחר בדף. במקרה זה, רצינו לקבל רקע שחור. כדי להשיג זאת, אנו לוחצים על שבב צבע מילוי צבע ובחר שחור מתוך בוחר צבע.
03 מתוך 07
הוסף טקסט לדף
השלב הבא הוא להוסיף טקסט לדף. בחרנו את כלי הטקסט וציירתי תיבת טקסט. נכנסנו למילה "ברוך הבא", ובמאפיינים הגדר את הטקסט ל- Arial, 120 פיקסלים לבנים. מרכז מיושר.
לאחר מכן עברנו לכלי הבחירה, לחצו על תיבת הטקסט וקבעו את מיקום Y ל- 168 פיקסלים מהחלק העליון. כאשר תיבת הטקסט עדיין נבחרה, פתחנו את החלונית Align ומיישר את תיבת הטקסט למרכז.
לבסוף, עם תיבת הטקסט שנבחרה, החזקנו את המקשים Option / Alt ו- Shift ועשינו ארבעה עותקים של תיבת הטקסט. שינינו את הטקסט ואת המיקום Y של כל עותק ל:
- כדי, 871
- גרפיקה, 1621
- תוכנה, 2371
- @ About.com, 3181
תוכלו להבחין, כאשר אתם מגדירים את המיקום של כל תיבת טקסט, את גודל הדף כדי להתאים את המיקום של הטקסט.
04 of 07
הוסף את מצייני המיקום של התמונה
השלב הבא הוא לשים את התמונות בין בלוקים טקסט.
הצעד הראשון הוא לבחור את הכלי מלבן לצייר תיבת שלנו המשתרעת מצד אחד של הדף על השני. עם המלבן שנבחר, אנו מגדירים את הגובה ל -250 פיקסלים ואת המיקום Y ל- 425 פיקסלים . התוכנית היא שתמיד יש למתוח או להתכווץ לרוחב הדף כך שיתאים לדפדפן הדפדפן של המשתמש. כדי להשיג זאת, לחצנו על כפתור רוחב 100% במאפיינים . מה זה עושה אפור את הערך X ו כדי להבטיח את התמונה הוא תמיד 100% רוחב רוחב התצוגה בדפדפן.
05 מתוך 07
הוסף תמונות למצייני מיקום של תמונות
עם המלבן שנבחר לחצנו על הקישור מילוי - לא צ 'יפ צבע - ולחץ על הדיו אני קוסם כדי להוסיף תמונה המלבן. באזור ה - Fitting , בחרנו Scale To Fit ולחץ על הידית המרכזית באזור המיקום כדי להבטיח את הגדלה של התמונה ממרכז התמונה.
לאחר מכן, השתמשנו בטכניקת Option / Alt-Shift-Drag כדי ליצור עותק של התמונה בין שני בלוקי הטקסט הראשונים, פתחו את החלונית מילוי והחלפנו את התמונה עבור תמונה אחרת. עשינו את זה עבור שתי התמונות הנותרות גם כן.
עם תמונות במקום, הגיע הזמן להוסיף את ההצעה.
06 מתוך 07
הוסף גלילה פרלקסה
ישנן מספר דרכים להוספת גלילה parallax ב Adobe Muse. אנחנו הולכים להראות לך דרך פשוטה לעשות את זה.
כאשר החלונית 'מילוי' פתוחה, לחצו על הכרטיסייה Scroll ( גלילה ) וכאשר היא נפתחת, לחצו על תיבת הסימון Motion .
תוכלו לראות ערכים עבור תנועה ראשונית וגמרית . אלה קובעים כמה מהר התמונה נעה ביחס לגלגל הגלילה. לדוגמה, ערך של 1.5 יעביר את התמונה פי 1.5 מהר יותר מהגלגל. השתמשנו בערך של 0 כדי לנעול את התמונות במקום.
החצים האופקיים והאנכיים קובעים את כיוון התנועה. אם הערכים הם 0 התמונות לא יזוזו ללא תלות בחצים שבהם אתה לוחץ.
הערך האמצעי- מיקום מרכזי - מציג את הנקודה שבה התמונות מתחילות לזוז. השורה שמעל התמונה מתחילה, עבור תמונה זו, 325 פיקסלים מהחלק העליון של הדף. כאשר המגילה מגיעה לערך התמונה מתחילה לזוז. באפשרותך לשנות ערך זה על-ידי שינויו בתיבת הדו-שיח או על-ידי לחיצה וגרירה של הנקודה בחלק העליון של השורה למעלה או למטה.
חזור על פעולה זו עבור שאר התמונות בדף.
07 מתוך 07
בדיקת דפדפן
בנקודה זו סיימנו. הדבר הראשון שעשינו, מסיבות ברורות, היה לבחור קובץ> שמור אתר . כדי לבדוק את הדפדפן, בחרנו פשוט קובץ> תצוגה מקדימה של דף בדפדפן . פעולה זו פתחה את דפדפן ברירת המחדל של המחשב שלנו, וכאשר נפתח הדף, התחלנו לגלול.