שיעור ראשון: עבודה עם גריד
ברוכים הבאים למדריך עיצוב האתרים שלי. אני אשדל לספק לכם מידע איכותי ותמציתי שיאפשר לכם להבין בקלות וכמובן ליישם את המידע . כמובן גם אשתדל לספק לכם דוגמאות והשראות לעיצוב אתרים ובתקווה גם קבצי מקור שתוכלו לראות תכלס איך נראים הדברים באמת.
עיצוב אתרים הוא לא עיצוב רגיל. אין פה צורך בידע בציור או צביעה. מדובר ביכולת להנגיש בצורה אינטואיטיבית אובייקטים ולאפשר לגולשים לגלוש בזרימה אל מבוקשם. עקרונות וחוקים של סימטריה, דמיון, קרבה, פרופורציה, תנועה, תגובתיות ועוד... כל הנושאים הללו הם הבסיס לעיצוב אתרים וניגע בשיעורים הבאים. אז יאללה מתחילים
מהו גריד ואיך משתמשים בו?
אפשרות הגריד בפוטושופ או באילוסטרייטור מגיע מקצוות הדף , היכן שמופיע סרגל המידות של הדף. מידות הדף שנפתח יהיו בגודל של 1024 פיקסל. אפשר גם לעבוד על 1280 פיקסל, אפשר גם על פחות. האידאל הוא כמה שיותר גדול בלהתחשב הגודל המסכים שהמשתמשים מחזיקים בביתם. לכן בימינו עדיין יש מסכים עם רזולוציות של 1024 פיקסל ולכן נעצב בגודל זה. (מאמין שאם הזמן יתחילו לעצב על גדלים גדולים יותר). כמובן שאפשר גם לעצב על 1900 פיקסל ולבנות עיצוב רספונסיבי(עיצוב שמשנה את הצורה והגודל שלו בהתאם לשינוי גודל הדפדפן) לכל גודל מסך אבל זה יהיה שיעור אחר . כרגע אני ילמד את הבסיס לפתיחת דף מתאים לעיצוב אתרים וברגע שתבינו את הכללים הבסיסיים יהיה לכם קל ליישם את זה הלאה. אז בשביל לעצב על 1024 פיקסל אנחנו נפתח שני דפים בגדלים שונים שיהיה נוח לעבודה וגם שנראה כיצד התוצאה מתקבלת במסכים גדולים יותר, ככל הנראה גם במסך שלנו.
הדף הראשון שנפתח יהיה בגודל 1024 על 768 :
לאחר שפתחנו את הדף הזה נפתח עוד דף בגודל של הרזולוציה הגדולה ביותר במסכים. אפשר גם רזולוציה קצת יותר קטנה, אבל חייב שיהיה בליד הגיוני לעבודה וגם על מנת לקבל תוצאה מתאימה למציאות. כמו שאתם בטח רואים הכל אתר כמעט יש שוליים לבנים מסיבה שעיצבו אותו בדוגל כלשהו והמסך שלכם רחב יותר. (כפי שכבר אמרתי, בהמשך נלמד איך לעצב אתרים בכל רוחב שזה העיצוב המודרני יותר. כרגע נתעסק בבסיס).
להלן דף בגודל 1600 על 1200 פיקסל:
לאחר שפתחנו את שני הדפי הללו נעביר את הדף של ה 1024 פיקסל אל הדף בגודל 1600. נדאג להפוך את שני השכבות הללו לשכבות פתוחות. עכשיו נדאג למרכז את שניהם בצורה שווה לחלוטין. לאחר שמרכזנו את השכבות כל שנצטרך זה בנות גריד בצידי השכבה בגודל 1024 פיקסל. להלן וידאו שהכנתי שמציג את הפעולה:
יש לך מה להגיד? אשמח לתגובה