לימוד עיצוב גרפי : איך ליצור אנימציות SVG?

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

למדריך זה נצטרך את תוכנת הAdobe Illustrator וגישה לעורך קוד חיצוני כמו Microsoft VS Code, ניתן גם להעתיק את העיצוב כאלמנט HTML עם עיצוב CSS בעורך האלמנטור לוורדפרס.

ראשית ניצור עיצוב חדש בAdobe Illustrator אין צורך בהגדרות מיוחדות.

כעת ניצור צורה בסיסית עליה נבסס את האנימציה הבסיסית שלנו, נבחר צורה בסיסית וניצור אותה.

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

ניצור צורה חדשה בתוך הצורה הראשונה ונבחר באמצעות שיפט אותה ואת הצורה מאחוריה, לבסוף נבחר בpath finder בminus front והצורה תיחתך בהתאם.

לאפקט ה3D נבחר בEffects באופציית ה3D ובה באופציית הExtrude & Bevel ונשאיר את הגדרות הבסיס, ללמידה על עיצוב צורות תלת מימד בAdobe Illustrator היכנסו למדריך “לימוד עיצוב גרפי: עיצוב צורות תלת מימד בAdobe Illustrator”.

נבחר את כל האובייקט ובpath finder נבחר בunite, נאחד את הקבוצה בקונטרול+G וניתן לקבוצה שם, אופציה זו תקטין את הקובץ וגם תקל על עבודתינו בהמשך עם קוד הCSS:

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

לא ניבהל מהמראה ה”מטריקסי” של הקוד ואם נביט בו נראה את הקבוצה שלנו.

נפתח את עורך הקוד שלנו ונפתח בתיקייה ייעודית קובץ בסיס הנקרא index.html וקובץ main.css, לקובץ הindex.html נעתיק את הנוסח הבסיסי לקבצי HTML 5 או בMicrosoft VS Code נלחץ ! ואז נלחץ אנטר.

נוסיף קוד לינק בקוד לקובץ הCSS שלנו.

בחלק הbody נדביק את קוד הSVG.

נגזור מחלק הstyle את התוכן ונעביר אותו לקובץ הCSS ונסיר את חלק זה מקובץ הHTML.

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

בקובץ הCSS נוסיף קוד רפרנס לbody:
(הקוד המתואר כולל הערות המסבירות את שורותיו לעיונכם את הערות אלו עדיף למחוק מן הקוד לאחר העתקתו לקובץ)
"קוד רפרנס לbody”

בקובץ הCSS נגדיר קוד רפרנס לSVG:
(הקוד המתואר כולל הערות המסבירות את שורותיו לעיונכם את הערות אלו עדיף למחוק מן הקוד לאחר העתקתו לקובץ)
“קוד רפרנס לSVG”

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

(הקוד המתואר כולל הערות המסבירות את שורותיו לעיונכם את הערות אלו עדיף למחוק מן הקוד לאחר העתקתו לקובץ)
“קוד אפקט ריחוף עכבר לקובץ הSVG”

בקוד נוסיף את שם הקבוצה מקוד הSVG במקום הטקסט המוצג.

לרשימת אפקטי הCSS השימושיים ביותר ניתן לבקר במדריך “לימוד עיצוב גרפי: אנימציות הCSS הטובות ביותר למעצבים”.

בקובץ הCSS נוסיף קטע קוד המתאר את הפריימים המתארים את האנימציה שתופיע באפקט.

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

מוזמנים ליצור קשר

לקוחות מספרים

מדריכים נוספים

מוזמנים ליצור קשר

לקוחות מספרים

מבצעים

דילוג לתוכן