עיצוב אתר מעריצים שלב אחרי שלב

הפוסט הזה היה במחשבותיי והוכן במשך זמן רב. במקור הוא היה אמור לצאת כהמשך לסדרת מאמרים על "יצירת אתר מעריצים" (הראשון והשני). אז מה עושה המאמר הזה בבלוג של Fable 3? התשובה פשוטה: במקרה של עיצוב, ללא דוגמה קונקרטית, קשה להסביר משהו. אין עיצוב сферיות בוואקום. לכן, כאשר לפני זמן מה החלטנו להחזיר לאחד מאתרי המעריצים שלנו הקשורים לסדרת המשחקים Fable, החלטתי שזהו הדוגמה שתשמש לי ל"שיתוף חוכמות".

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

מכינים את כן הציור והבד

במקרה שלנו כן הציור יהיה, כפי שאתם כבר יכולים לנחש, Photoshop CS4, והבד הוא הקובץ החדש שלנו, שעוד ריק. מעבר ל"פוטו-שופ", יש גם תוכנות אחרות, כמו Gimp. יש אנשים שמצליחים לעבוד בCorel Draw. אבל כך או כך, האנושות עדיין לא המציאה תוכנה טובה יותר לפיתוח אתרי אינטרנט. זהו הכלי הראשי של מעצב אתרים. אותו Corel Draw או Adobe Illustrator יכולים לשמש ליצירת אלמנטים בודדים בעיצוב שלכם, אבל "להרכיב" את המוקד הכי נוח לעשות בפוטושופ.

עזבנו את הכן, הגיע הזמן לבד. כאן כדאי להזכיר את רזולוציות המסך. לפני חמש שנים, בכל מקום שלטו רזולוציות 1024x768, ורזולוציות 1280x960 רק התחילו לכבוש את דעת הקהל. לפני כמה שנים, 1680x1050 ו-1600x1200 נחשבו לרזולוציות גבוהות. היום במסכים בהגדרות Full HD הופכים להיות יותר ויותר נורמה, כלומר, עלינו להתמקד ברזולוציה מקסימלית של 1920x1080. עם זאת, 1024x768 אינה ממהרת להתקדם לפנסיה, וזו התחתית שלנו. למעשה, הדגש הוא בעיקר על הרוחב, בגלל שהאתר שלנו יהיה ארוך, כמו 90% מהאתרים ברשת.

בעבר היה אופנתי ליצור אתרים "מתארכים". כלומר, אלמנטים בודדים בעיצוב נוצרו מאלמנטים חוזרים, כך שהאתר התארך לרוחב של רזולוציית המשתמש. אבל עם הגעת ה-Full HD שיטה כזו הפכה לאסתטית פחות. העין האנושית בנויה כך, שהמידע הממוקם במרחק של יד מתפרש היטב מהרוחב הדומה לדף A4. כל דבר שהוא רחב יותר – כבר לא ממוקד. ולכן בעשורים האחרונים, מקובל לעצב את החלק התוכני כך שיהיה צר יותר, ושמקום שנשאר משמאל ומימין יתמלא בעיצוב רקע כלשהו. כך, גם הכבשים שבעות, גם הזאבים שלמים :) אז, החלק התוכני שלנו יתפוס 1000 פיקסלים (אל תשכחו, שבדפדפן справа יש שורת גלילה, שמ"אכילה" 24 פיקסלים מתוך 1024). אז השטח שלנו מתחת ל"שוליים" עם המרכבות היפות יהיה (1920-1000)/2=460 פיקסלים משמאל ומימין. כדי לא לסטות בטעות מהאזור הזה אני משתמש במנחים. במצב של סרגלים מופעלים, אני פשוט מעביר בעכבר "ומעבר" מנחים למקומות הנדרשים. ניתן גם לציין מיד את המרכז של הבד שלנו. אני גם סימנתי בערך את המקום שדחפתי לאזור של הלוגו של האתר, בעתיד הוא יזוז, אבל "סימן" עשיתי לי. הכל, העבודה המקדימה הושלמה. נעבור להכנה :)

ההכנה המקדימה הושלמה

שואבים השראה

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

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

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


הארט הראשון היפה שנמצא עבור חלק השלישי

וזהו השני. זהו, יותר בעיצוב הנדרש לא מצאנו דבר

ואל הארט הזה מיד לקחתי רקע. הוא לא מושלם, אבל לא נמצא טוב יותר.

הארט לחלק השני היה שימושי כבר בסוף העבודה

ולא חסר לוגו?

מתחילים בעבודה

עכשיו אפשר להתחיל בעבודה. אני אגלה לכם טקטיקונת קטנה, אני שומר באופן קבוע את תוצאות העבודה בשמות שונים בעקביות על היסטוריית גרסאות. כברירת מחדל, התוצאה הראשונה היא גרסה 0_1, אחר כך יהיו 0_2, 0_3 וכדומה. גרסה 1_0 מגיעה כאשר אתם סבורים כי עשיתם הכל, שאתם רוצים וניתן להציג את העבודה למבקרים/חברים/לקוח. סביר להניח שהעיצוב ידרוש תיקונים. אז יופיעו גרסאות 1_1, 1_2 וכן הלאה. זה נוח לעקוב אחרי ההתקדמות שלכם, ואפילו במקרה הצורך להיות מסוגלים לחזור לרעיונות מהגרסה הישנה יותר או לקחת משם איזה אלמנט, שמגורס בו נעלם או השתנה עד כדי כך שלא ניתן לזהות.

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

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

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

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

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

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

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

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

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

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

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

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

והנה הרגע האמת! חזרתי צעד אחורה, שיחקתי עם האלמנטים שלנו, ובסופו של דבר יצא מסך צפייה, שכבר קרוב למדי לגמרי. כל האלמנטים המשמעותיים נוטלים את מקומם: התפריט הראשי, הבלוקים הצדדיים, החלק התוכני, הלוגו והתחתון. אם מתבוננים בזה מקרוב, אפשר לראות שלחלק מהסיבוב הקודם באמת השתמשתי. את המידע טקסטואלי לקחתי ממקום במדריך דרגון אג', רק כדי להעריך את המיקום של הטקסט. כפונט עיקרי נבחר Palatino Linotype. זהו פונט יפה סטנדרטי, וזה חשוב מאוד. במקרה הזה אתר שלכם לא תהיה בעיה להיות מוצג אצל כל משתמשי Windows. יש דרך, כמובן, להשתמש בפונטים שלכם, שהאתר טוען למשתמש, אבל זה יגרום לטראפיק נוסף ובעיות בעיצוב הפונט בדפדפנים שונים. אני ממליץ לא להיכנס לזה. באינטרנט יש טבלה מעולה לפונטים סטנדרטיים של Windows. אני בעצמי משתמש בזה וממליץ גם לכם. ובחלק התחתון, אפשר ואפילו צריך להשתמש בפונטים דקורטיביים. באשר לשם האתר, בשלב הזה מצאתי פונט מהמם שנקרא Algerius Caps. הרגישו את ההבדל לעומת מה שהיה!

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

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

הקו האחרון

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

ההערה הראשונה והחשובה - לארדי שלנו גם חסר חברה בחלק העליון של האתר. הנערה צריכה חברה. לצערי, לא מצאתי שום עבודה לנערות בגרסה השלישית, אבל התמונה הגיעה מהחלק השני. היא מתאימה. זה לא רק בפסים של החלק השלישי. על יד הנערה של ארדי במשימה הסכמתי להפסיק. הוא היה явно משוכנע.

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

www.Fable-game.ru

לאחר המילים

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

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

*המעצב וכותב הטקסט אני, Ksandr\_Warfire

החומר הוכן במיוחד עבור GAMER.ru