הדרכה: כיצד לפרוס דף אינטרנט עם Adobe Photoshop

יש מגוון עצום של כלים לעיצוב דפי אינטרנט ולעבוד בצורה פשוטה ופונקציונאלית לחלוטין מבלי להזין או לגעת בקוד. הם רבים מספור, המוצעים על ידי יישומים (Adobe Dreamweaver הוא דוגמה) או ישירות על ידי פלטפורמות מקוונות כגון Wix. עם זאת, עבור מעצב אתרים, ידיעת ההליכים הידניים היא חיונית. HTML5 ו- CSS הם עמודי התווך הבסיסיים לפריסת אתרי אינטרנט ודפי נחיתה.

עם זאת, לעתים קרובות יותר ממה שציפית, תצטרך לפנות ליישומים כמו Indesign או Adobe Photoshop כדי להשלים את עבודת הפריסה שלך ולהעניק להם גימור מושלם. היום נראה במדריך נרחב זה, כיצד נוכל לפרוס דף אינטרנט באמצעות Adobe Photoshop. בחלק הראשון הזה אנו נשארים בעבודה שתפתח מפוטושופ, אם כי בתשלומים עתידיים נראה כיצד נוכל ליישם את העבודה ישירות בקוד HTML כדי להפוך אותה לתפקודית.

החל מעיצוב מסגרת החוטים שלנו

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

חשוב מאוד שנקח בחשבון את הממדים שיש לאתר שלנו, אם יהיה לו בקופסא או ברוחב מלא. דף אינטרנט מוסגר יהיה בתוך מיכל קטן ולכן יופיע סביבו רווח. נהפוך הוא, רשת שניה מלאה תפוס את כל המסך של המכשיר המשחזר את הדף. הבחירה בין אופן כזה או אחר מגיבה לשאלות סגנוניות בלבד ותלויה גם בצרכי הפרויקט עליו אנו עובדים. אנו נעבוד בדוגמה זו עם מצב ה- Boxed כך שהוא לא יתפוס את כל השטח שמספק הדפדפן.

כדי ליצור את מסגרת החוטים שלנו, הדבר הראשון שעלינו לעשות הוא להיכנס ליישום Adobe Photoshop ולכלול את הממדים שאנחנו רוצים שיהיה לדף שלנו. בדוגמא זו רוחב הדף שלנו יהיה 1280 פיקסלים. עם זאת, נושא הגודל עשוי להשתנות בהתאם ליעד הסופי או המכשיר שבו אנו רוצים לשחזר את הדף שלנו. אין ספק שכדי שעיצוב אתרים יהיה פונקציונלי ויעיל, זה חייב להיות תגובה והוא חייב להתאים לכל המכשירים בשוק. עם זאת, במקרה זה אנו נעבוד ליצירת אב טיפוס אותו אנו הולכים לשחזר במחשב שולחני. עם זאת, הנושא הרספונסיבי יידון בהמשך, לעת עתה, הנה היררכיה של ממדי המסך לעבודה בדוגמה זו. יש לזכור שבמקרה זה נכין פריסה של דף הנחיתה ב- Adobe Photoshop ואז נעביר אותה ל- HTML5 ו- CSS3. מטרת התרגול הקטן הזה היא להמיר עיצוב שנוצר בפוטושופ לעיצוב אתרים שמיש ואינטראקטיבי המגיב לתנועות המשתמש.

מדידות לטלפונים ניידים

אייפון 4 ו -4 S: 320 x 480

אייפון 5 ו -5 S: 320 x 568

אייפון 6: 375 x 667

אייפון 6+: 414 x 736

נקסוס 4: 384 x 598

נקסוס 5: 360 x 598

גלקסי S3, S4, S5: 360 x 640

HTC One: 360 x 640

מדידות טבליות

iPad לכל הדגמים וכן iPad Mini: 1024 x 768

Galaxy Tab 2 ו- 3 (7.0 אינץ '): 600 x 1024

Galaxy Tab 2 ו- 3 (10.1 אינץ '): 800 x 1280

נקסוס 7: 603 x 966

נקסוס 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

מדידות למחשבים שולחניים

מסכים קטנים (משמשים למשל ב- netbooks): 1024 x 600

מסכים בינוניים: 1280 x 720/1280 x 800

מסכים גדולים: רוחב גדול מ- 1400 פיקסלים, לדוגמא 1400 x 900 או 1600 x 1200.

כדי להתחיל בהפצת האלמנטים ובהקצאת קטעים במדגם האינטרנט שלנו, חשוב מאוד שנקח בחשבון את הפרופורציות כדי להבטיח גימור קריא ומלודי. יהיה זה חיוני שתשתמש באפשרויות הכללים והמדריכים שתוכל למצוא בתפריט העליון תצוגה. לעבוד בצורה פרופורציונאלית ומדויקת, עדיף שנעבוד באחוזים. נלחץ על תפריט התצוגה ולאחר מכן על האפשרות «מדריך חדש» לבחירת שיטת החלוקה. במקרה זה נערוך ארבע חלוקות אנכיות בשיעור של 25% ואנחנו ניקח אותן כהפניה למקם את התמונות שלנו בכותרת התחתונה ואת תמונת הלוגו שלנו בכותרת העליונה.

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

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

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

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

לאחר שהגדרנו את המבנה הבסיסי או השלד של הדף שלנו, נצטרך לעבור לשלב הבא. זה יורכב מעיצוב נכון של כל אחד מתחומי האתר שלנו. במילים אחרות, נתחיל "למלא" כל אחד מהאזורים הללו בתוכן שיוכנס לבסוף לאתרנו. מומלץ שלא נעצב אלמנטים אלה לפני שנעבוד על מסגרת החוטים מכיוון שסביר מאוד שאם נעשה זאת בסדר זה, נצטרך לשנות את הפרופורציות שלהם בהמשך. אנו מסתכנים בעיוות התמונות שלנו וצריך לעשות מחדש את העיצוב של כל אחד מהאלמנטים, שיהפכו לבזבוז זמן או לתוצאה באיכות נמוכה יותר.

במקרה זה, עיצוב האתר שלנו יהיה פשוט ביותר. נשתמש ב- הוראות לעיצוב חומרימכיוון שאנחנו הולכים להשתמש בלוגו של גוגל כדי להדגים את הנוהג הזה. עלי להבהיר כי מטרת הדרכה זו היא המחשת הידע הטכני, כך שהתוצאה האסתטית במקרה זה אינה רלוונטית. כפי שאתה יכול לראות, לאט לאט מילאנו את החלל בכל האזורים שקבענו בעבר בתכנית שלנו. עם זאת, ביצענו שינוי קטן ברגע האחרון. כפי ששמתם לב, צמצמנו את גודל הלוגו שלנו בצורה משמעותית וכללנו קו הפרדה באזור הכותרת התחתונה שמתחבר בצורה מושלמת לתפריט העליון. במקרה זה השתמשנו בכפתורים וחומרים מבנק משאבים. כמעצבים אנו יכולים לעצב אותם בעצמנו, (במיוחד אפשרות זו מומלצת אם נרצה להציג טוניק דומה מאוד לזה שמוצג על ידי תדמית המותג או הלוגו).

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

מבנים 1, 2, 3 ו -4 יהיו חלק מה- רקע של דף האינטרנט שלנו, כך שבמציאות לא יהיה צורך לייצא ככזה מ- Adobe Photoshop, למרות שאנו יכולים לעשות זאת, אין זה הכרחי. כשזה מגיע ל צבעים שטוחים (אחד המאפיינים החיוניים של עיצוב שטוח ועיצוב חומרים, ניתן ליישם אותם בצורה מושלמת באמצעות קוד באמצעות גיליון סגנונות של CSS). עם זאת, את שאר האלמנטים יש לשמור לצורך הכנסה מאוחרת יותר בקוד ה- HTML שלנו. בתרשים הקטן הזה שכפנו גם את האזורים השייכים לרקע העמוד כך שיהיה לנו מושג ברור מה יהיה המראה הסופי של האתר שלנו.

כפי שתוכלו להבין, התחושה של יצירת תוכנית זו באדובי פוטושופ היא להשיג את הממד האמיתי של כל אלמנט, ולהבהיר את הסדר והמבנה של כל אלמנט. כמובן שלתוכן הטקסטואלי אין מקום בשלב זה של התהליך שכן הוא חייב להיות מסופק מעורך הקוד שלנו. עלינו לציין כי בתרגול זה אנו הולכים לעבוד עם כפתורים ואלמנטים סטטיים, אם כי בדרך כלל אלה מיושמים ממסגרות כגון Bootstrap או ישירות מ- Jquery.

לאחר שיצרנו כל אחד מהאלמנטים שירכיבו את דף האינטרנט שלנו, זה הזמן להתחיל לייצא אותם ולשמור אותם בתיקיית התמונות שנמצאת בתוך תיקיית הפרוייקט HTML. חשוב שתתרגל לייצא ממסגרת הקווי שלך, מכיוון שסביר מאוד שתצטרך לשנות חלק מהאלמנטים המקוריים בהתבסס על תצורת השלד. (לדוגמא, במקרה זה שינינו את גודל הכפתורים המקוריים, הלוגו ורוב האלמנטים שהם חלק מהקומפוזיציה, כולל התמונות באזור התחתון).

חשוב שנלמד לשמור כל פריט באופן עצמאי כדי לשמור אותם עם המידות שיש להם ובצורה מדויקת. כל שגיאה, מינימלית ככל שתהיה, יכולה להשפיע על כל האלמנטים שהם חלק מדף האינטרנט שלך. יש לזכור שהם יהיו קשורים זה לזה ועליהם להיות בעלי ממדים מושלמים כדי שניתן יהיה להזין אותם מ- HTML ברשת הסופית. במקרה זה נצטרך לחתוך ולשמור באופן עצמאי את האלמנטים הבאים:

• הלוגו שלנו.
• כל הכפתורים (אלה שהם חלק מהתפריט הראשי והשאר).
• כל התמונות.

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

• ראשית, עליכם לעבור לתיקיה אליה נמצא קובץ ה- PSD שמכיל את מסגרת החוטים שלנו ולשכפל אותה פעמים רבות כמו האלמנטים שאתם הולכים לייצא. במקרה זה יצרנו 12 עותקים מהמקור ושמרנו אותם באותה תיקייה. לאחר מכן, תשנה את שם כל אחד מהעותקים ותקצה לכל אחד מהם את שם האלמנט שהוא מכיל. שמו של 12 העותקים שלנו ישתנה: לוגו, לחצן תפריט 1, לחצן תפריט 2, סרגל חיפוש, לחצן עליון 1, לחצן עליון 2, לחצן עליון 3 וכפתור עליון 4. שאר ארבעת הנותרים ישתנו לשם: תמונה 1, תמונה 2 תמונה 3 ותמונה 4.
• לאחר שהדבר נעשה, נפתח את הקובץ עם שם הלוגו.
• נעבור לפלטת השכבות שלנו ונאתר את השכבה המכילה את הלוגו שלנו. ואז נלחץ Ctrl / Cmd בזמן שאנחנו לוחצים על התמונה הממוזערת של השכבה האמורה. באופן זה הלוגו ייבחר באופן אוטומטי.
• השלב הבא יהיה לומר לפוטושופ שאנחנו רוצים שיגזור את הלוגו בצורה מדויקת. לשם כך נצטרך להתקשר רק לכלי החיתוך מהמקש או מהפקודה C.
• לאחר שעשינו זאת נלחץ על כפתור Enter שלנו כדי לאשר את החיתוך.
• עכשיו נעבור לתפריט הקובץ העליון כדי ללחוץ על שמור כיצד. אנו נבחר את השם, שבמקרה זה יהיה «לוגו» ואנחנו נקצה פורמט PNG, בגלל היותו הקובץ המציע את האיכות הגבוהה ביותר באינטרנט.
• נחזור על התהליך עם כל העותקים והאלמנטים. כשתסיים, וודא ששאר השכבות בפלטה שלנו בלתי נראה או חוסל. באופן זה אנו יכולים לשמור כל אלמנט עם רקע שקוף.

במקרה זה אנו בוחרים את כפתור התפריט 2 מתוך לוח השכבות. תוכלו לראות בצילום המסך כיצד נבחרו אוטומטית גבולות הכפתור שלנו.

ברגע שנבחר בכלי החיתוך ממפתח C, הבד שלנו מצטמצם רק למידות הכפתור שלנו.

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

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

תקציר:

1. תכנן את מבנה של האתר תוך תשומת לב מיוחדת לתוכן שברצונך להעביר ולסעיפים שעליך ליצור באתר שלך.
2. עבוד על השלד שלך או wireframe מתוך Adobe Photoshop המציין באילו אזורים התוכן יופיע ובפורמט שלהם.
3. להסתמך על המדדים והמותגים שפיתחת בעבר, התחל עיצוב את פני השטח של הרשת. כולל את כל האלמנטים (גם צפים וגם קבועים). אל תשכח לכלול את הכפתורים, הלוגו והתמונות המתאימים.
4. גזור את כל האלמנטים שהם חלק מהפרויקט אחד אחד. ודא שיש להם את האמצעים הנכונים ושהם לא יגרמו לך בעיות בהמשך.
5. שמור את כל האלמנטים בפורמט PNG בתיקיית התמונות שבתיקיית הפרויקט HTML.
6. זכור שלפרויקט זה תהיה פלט לחלון האינטרנט ולכן חשוב מאוד לקחת בחשבון את מצב הצבע ולהחיל RGB.
7. קבל השראה מדפי אינטרנט אחרים שאתה מעריץ לפני שאתה מתחיל לעבוד, ואל תשכח לדון בכך עם חברי הצוות שלך. במקרה שמדובר בפרויקט עבור לקוח, נסה לדבוק ב תדרוך רחוק ככל האפשר.