לשיעור האחרון שלנו, אנחנו הולכים להסתכל על איך להשתמש בפוטושופ כדי לפרוס וללעוג לעיצוב אתרים מאפס.
אם אי פעם היה שיעור פוטושופ שדרש את רכיב הווידאו, זה השיעור הזה. בשיעור זה אנו מסתכלים על שימוש בכלי Shape ו-Text כדי ליצור עיצוב אתר מאפס. אף אחד מהמושגים האלה לא באמת יכול להיכתב החוצה, ולכן יש מעט מאוד טקסט נלווה לשיעור זה. כבר למדת את רוב הכלים בשיעורים קודמים ולכן זה רק מראה לך איך להשתמש בהם ליצירת אתר. עם זאת, יש כמה דברים חדשים לדון בהם, והם מטופלים להלן.
אם תרצו לעקוב בסרטון או לראות איך נראה המוצר הסופי בפוטושופ, תוכלוהורד את קובץ עיצוב האתר והנכסים כאן. זו דרך טובה לחקור ולראות איך דברים עובדים. הקבצים נוצרו ב-Photoshop CS5 אז תזדקק לזה כדי להציג אותם.
שימוש במדריכים
קווי עזר הם קווים אופקיים ואנכיים כחולים קטנים בפוטושופ שעוזרים לך ליישר דברים על הבד. אתה יכול ליצור אותם על ידי הפעלת סרגלים (Command + R ב-Mac או Control + R ב-Windows), לחיצה על הסרגל ולאחר מכן גרירת השורה למטה אל הדף שלך. כדי להתאים מאוחר יותר את כל המדריכים שאתה יוצר, השתמש בכלי Move (V במקלדת שלך) בחלק העליון של סרגל הכלים.
יצירת צורות
כבר בדקנו יצירת צורות בעבר, אבל כאן תגלו שצורות חיוניות במיוחד לפריסה שלכם. מכיוון שהן תמונות וקטוריות (ולא רסטר), ניתן לשנות את גודלן מבלי לקבל פיקסלים. זה יכול להיות מאוד מועיל כשאתה מתאר דברים, אבל אולי תרצה לבצע שינויים מאוחר יותר. כמעט תמיד עדיף לך לשמור את הכל במודלים שלך מבוסס וקטור, אלא אם זה משהו שלא יכול להיות מבוסס וקטור (כמו תמונה).
אִרגוּן
ארגון דגמי האתר שלך הוא מאוד מאוד חשוב. אתה תמצא את עצמך יוצר המון המון שכבות, אז אתה רוצה להמשיך לתת שמות לשכבות האלה ולקבץ אותן יחד בתדירות גבוהה ככל האפשר. ככל שתשקיעו יותר מאמץ בארגון השכבות שלכם, כך יהיה קל יותר לנווט בעיצוב שלכם מאוחר יותר. זה מועיל במיוחד למפתחים שאולי יקבלו את העיצובים שלך בהמשך. אם הם יצטרכו לעבור ולחפש אלמנטים, אתה תעשה את חייהם הרבה יותר קשים. מפתחים כועסים זה לא נעים (הייתי אחד ועבדתי עם כמה). התחל את הקשר הזה בנימה טובה על ידי מתן מסמך מאורגן יפה. זה גם לטובתך, אז כולם מרוויחים.
שמירה לאינטרנט
בין אם אתה המפתח או לא, מישהו יצטרך ליצור גרסאות ידידותיות לאינטרנט של התמונות המשמשות בעיצוב שלך. כיום ניתן ליצור הרבה אפקטים וסגנונות עם CSS ו-JavaScript, כך שאתה לא צריך לדאוג ליותר מדי דברים. אם יש לך לוגו קבוע, למשל, תצטרך לשמור אותו לאינטרנט. אמנם ישנן דרכים רבות שבהן אתה יכול ללכת על זה, הדבר הקל ביותר לעשות הוא פשוט להעתיק את השכבה שמחזיקה את הגרפיקה, להדביק אותה במסמך חדש, ואז להתחיל את תהליך השמירה לאינטרנט. אתה יכול למצוא "שמור עבור אינטרנט והתקנים..." בתפריט קובץ. כשתעלה את זה, תקבל חלון חדש גדול שקודם לכן תיראה הגרפיקה שלך לאחר שהיא נדחסה באמצעות ההגדרות שאתה מספק. בדרך כלל "JPEG - High" או "PNG 24" הן אפשרויות טובות, בהתאם לגרפיקה. אם הגרפיקה פשוטה מאוד בצבע ובגוון, או אם אתה צריך רקע שקוף, קבצי PNG של 24 סיביות הם הפורמט שאתה רוצה. אם יש לך גרפיקה מורכבת יותר, "JPEG - High" היא בדרך כלל ההגדרה הטובה ביותר. אתה יכול להשתטות עם כמות הדחיסה והגדרות אחרות עד שתשיג את מה שאתה רוצה, אבל יוגש לך מספיק טוב על ידי היצמדות להגדרה מראש. לאחר שתלחץ על שמור תוכל לתת שם לקובץ. אינך צריך לדאוג לגבי מתן שם בטוח לאינטרנט. דבר אחד נחמד שפוטושופ עושה עבורך הוא להוסיף מקפים במקום רווחים כדי שיהיה לך שם קובץ בטוח באינטרנט כשתסיים.
זה מסכם את סדרת היסודות של פוטושופ שלנו. מחר נעשה סיכום קטן ולאחר מכן נספק כמה משאבים נוספים, אבל סיימתם עם השיעורים שלכם - מזל טוב! אני מקווה שעכשיו אתה יכול להתחיל להשתמש בפוטושופ כדי לשפר את התמונות שלך, לצייר כמה תמונות מגניבות וליצור אתר אינטרנט כדי להשוויץ בעבודות שלך.
