אחת הטכניקות "החמים" באינטרנט כיום היא גלילה פרלקסה. כולנו כבר לאותם אתרים שבהם אתה לסובב את גלגל הגלילה על העכבר ואת התוכן בדף נע למעלה ולמטה או על פני הדף תוך כדי לסובב את גלגל העכבר.
עבור אלה חדשים לעיצוב אתרים ועיצוב גרפי, טכניקה זו יכולה להיות קשה מאוד להשיג בשל כמות CSS הנדרש.
אם זה מתאר אותך, ישנם מספר יישומים שעשויים רק לערער על אמנים גרפיים. הם בעצם להשתמש בגישה פריסת דף מוכר דפי אינטרנט, כלומר אין הרבה, אם בכלל, קידוד מעורב. יישום אחד שיש לו באמת rocketed לתוך בולטות הוא Adobe Muse.
העבודה מתבצעת על ידי מקצוענים גרפיקה באמצעות מוזה הוא די מדהים ואתה יכול לראות דגימה של מה שאתה יכול לעשות על ידי ביקור מוזה האתר של היום . למרות מקצועני האינטרנט נוטים לראות את מוזה כמו להיות איזה "צעצוע את הרוח", זה גם בשימוש על ידי מעצבים ליצור אב טיפוס ניידים באינטרנט כי יהיה בסופו של דבר נמסר ליזמים על הצוות שלהם.
טכניקה אחת כי הוא incredibly קל להשיג עם מוזה היא פרלוקס גלילה, אם אתה רוצה לראות את הגירסה הושלמה של התרגיל. כאשר אתה מגלגל את גלגל הגלילה של העכבר, נראה שהטקסט נע למעלה או למטה בדף והתמונות משתנות.
בואו נתחיל.
Friday of 07יצירת דף אינטרנט
בעת הפעלת Muse לחץ על אתר חדש קישור. זה יפתח את מאפיינים חדשים של האתר. פרויקט זה מיועד ליישום שולחן עבודה ואתה יכול לבחור אותו פריסה ראשונית בתפריט הנפתח. ניתן גם להגדיר את הערכים עבור מספר עמודות, רוחב מרזב, שוליים, וריפוד. במקרה זה, לא היינו מודאגים מאוד עם זה פשוט לחץ בסדר.
לעצב את הדף
כאשר אתה מגדיר את מאפייני האתר ולחץ על בסדר לקחו אתכם למה שמכונה תוכנית נוף. יש בית הדף בחלק העליון ו- a דף ראשי בתחתית החלון. אנחנו רק צריכים דף אחד. כדי להגיע לתצוגת עיצוב, הקלקנו פעמיים על דף הבית שפתח את הממשק.
בצד שמאל יש כמה כלים בסיסיים בצד ימין הם מגוון של לוחות המשמשים לתפעל את התוכן בדף. לאורך החלק העליון הם המאפיינים, הניתנים להחלה על הדף, או כל פריט שנבחר בדף. במקרה זה, רצינו לקבל רקע שחור. כדי להשיג זאת, אנו לוחצים על מילוי דפדפן שבב צבע ובחר שחור מתוך בוחר צבע.
03 מתוך 07הוסף טקסט לדף
השלב הבא הוא להוסיף טקסט לדף. בחרנו את כלי טקסט והוציאה תיבת טקסט. נכנסנו למילה "ברוך הבא", ובמאפיינים הגדר את הטקסט Arial, 120 פיקסלים לבן. מרכז מיושר.
לאחר מכן עברנו לכלי הבחירה, לחצו על תיבת הטקסט וקבעו אותה מיקום Y עד 168 פיקסלים מלמעלה. עם תיבת הטקסט עדיין נבחר, פתחנו את יישור החלונית וליישר את תיבת הטקסט למרכז.
לבסוף, עם תיבת הטקסט שנבחרה, החזקנו למטה אפשרות / Alt ו Shift מפתחות ועשה ארבעה עותקים של תיבת הטקסט. שינינו את הטקסט ואת המיקום Y של כל עותק ל:
- כדי, 871
- גרפיקה, 1621
- תוכנה, 2371
תוכלו להבחין, כאשר אתם מגדירים את המיקום של כל תיבת טקסט, את גודל הדף כדי להתאים את המיקום של הטקסט.
04 of 07הוסף את מצייני המיקום של התמונה
השלב הבא הוא לשים את התמונות בין בלוקים טקסט.
הצעד הראשון הוא לבחור את כלי מלבן ולצייר את הקופסה המשתרעת מצד אחד של הדף אל השני. עם המלבן שנבחר, אנו קובעים גובה עד 250 פיקסלים שלה מיקום Y ל- 425 פיקסלים. התוכנית היא שתמיד יש למתוח או להתכווץ לרוחב הדף כך שיתאים לדפדפן הדפדפן של המשתמש. כדי להשיג זאת, לחצנו על רוחב 100% לחצן 'מאפיינים'. מה זה עושה אפור את הערך X ו כדי להבטיח את התמונה הוא תמיד 100% רוחב רוחב התצוגה בדפדפן.
05 מתוך 07הוסף תמונות למצייני מיקום של תמונות
עם מלבן שנבחר אנו לחץ על למלא את הקישור - לא את הצ 'יפ צבע - ולחץ על Iדיו דיו כדי להוסיף תמונה למלבן. בתוך ה הולם אזור, בחרנו קנה מידה להתאמה ולחץ על ידית מרכזית בתוך ה עמדה כדי להבטיח את הגדלת התמונה ממרכז התמונה.
הבא, השתמשנו אפשרות / Alt-Shift-גרור טכניקה כדי ליצור עותק של התמונה בין שני בלוקים טקסט הראשון, פתח את החלונית מילוי והחליף את התמונה עבור אחר. עשינו את זה עבור שתי התמונות הנותרות גם כן.
עם תמונות במקום, הגיע הזמן להוסיף את ההצעה.
06 מתוך 07הוסף גלילה פרלקסה
ישנן מספר דרכים להוספת גלילה parallax ב Adobe Muse. אנחנו הולכים להראות לך דרך פשוטה לעשות את זה.
כאשר החלונית 'מילוי' פתוחה, לחצו על הלחצן גלול לשונית וכאשר הוא נפתח, לחץ על תיבת סימון של תנועה.
תראה ערכים עבור התחלתי ו סופי תנועה. אלה קובעים כמה מהר התמונה נעה ביחס לגלגל הגלילה. לדוגמה, ערך של 1.5 יעביר את התמונה פי 1.5 מהר יותר מהגלגל. השתמשנו בערך של 0 כדי לנעול את התמונות במקום.
ה חצים אופקי ואנכי לקבוע את כיוון התנועה.אם הערכים הם 0 התמונות לא יזוזו ללא תלות בחצים שבהם אתה לוחץ.
הערך האמצעי – מיקום מפתח - מראה את הנקודה שבה התמונות להתחיל לזוז. השורה שמעל התמונה מתחילה, עבור תמונה זו, 325 פיקסלים מהחלק העליון של הדף. כאשר המגילה מגיעה לערך התמונה מתחילה לזוז. באפשרותך לשנות ערך זה על-ידי שינויו בתיבת הדו-שיח או על-ידי לחיצה וגרירה של הנקודה בחלק העליון של השורה למעלה או למטה.
חזור על פעולה זו עבור שאר התמונות בדף.
07 מתוך 07בדיקת דפדפן
בנקודה זו סיימנו. הדבר הראשון שעשינו, מסיבות ברורות, היה לבחור קובץ> שמור אתר. כדי לבדוק את הדפדפן, פשוט בחרנו קובץ> תצוגה מקדימה של דף בדפדפן. פעולה זו פתחה את דפדפן ברירת המחדל של המחשב שלנו, וכאשר נפתח הדף, התחלנו לגלול.
