ג'יימס מאי - הידוע גם בשם Smudgethis - פיתח את הסגנון הזה ב-2011 עבור קליפ מוזיקלי לאקט דאבסטפ רוק. הלהיט הראשון של נירו, Me & You - שבו הוא יצר אנימציה כדי להציג משחק ישן שמציג את שני חבריו של נירו. המשחק היה פלטפורמה קצבית דו מימדית עם גרפיקה של 16 סיביות דומה ל-Double Dragon אבל עדיפה בהרבה ממשחקי רטרו קלאסיים של 8 סיביות כמו Super Mario Bros.
כדי ליצור סגנון זה, הדמויות עדיין צריכות להיות חסומות, אך מורכבות יותר ממשחקים ישנים יותר. ולמרות שאתה צריך להשתמש בפלטת צבעים מוגבלת כדי להשיג את המראה, זכור למשחקים האלה עדיין היו 65,536 צבעים.
כאן ג'יימס מראה לך כיצד ליצור דמות מתמונה באמצעות פלטת צבעים פשוטה וכלי העיפרון.
כמו מדריך האנימציה, תצטרך גם תמונה של האדם. ג'יימס השתמש בתמונה של פאנקיסט שנכלל בקבצי הפרויקט עבור הדרכה זו.
לאחר השלמתו, עיין במדריך האנימציה של After Effects ב-16 סיביות שבו ג'יימס יראה לך כיצד לקחת את הדמות הזו ב-AE, להנפיש אותה ולהחיל אפקטי משחק רטרו.
שלב 1
פתח את מדריך האנימציה (16 סיביות) .psd ו- 18888111.jpg (או תמונה לבחירתך) כדי להשתמש בו כבסיס לדמות. תמונת פרופיל באורך מלא תעבוד בצורה הטובה ביותר ותעזור לך לקבל את לוחות הצבעים והסגנונות עבור צורת 16 הסיביות שלך.למדריך האנימציה יש כמה תנוחות בשכבות נפרדות. בחרו את התנוחה המתאימה ביותר לתנוחה בתמונה שלכם - מכיוון שאין לנו רגליים בפריים, הלכתי על התנוחה הסטנדרטית ברמה 1.
שלב 2
באמצעות כלי ה-Retangular Marquee Tool (M), בחר את הראש מהתמונה שלך והעתק (Cmd /Ctrl + C) והדבק אותו (Cmd /Ctrl + V) במדריך ההנפשה (16bit).psd.שנה את התמונה כך שתתאים, באופן פרופורציונלי. תבחין כי מכיוון שממדי ה-PSD קטנים מאוד, התמונה תתחיל לצייר פיקסל באופן מיידי.
שלב 3
צור שכבה חדשה וצייר קו מתאר בעיפרון שחור פיקסל אחד (B), תוך שימוש במדריך האנימציה המצורף בה ובתמונה כבסיס. \ פהמדריך המצורף עוזר לפתח מגוון דמויות מדמויות בוס גדולות יותר או נשים דקות יותר. זהו מדריך גס לחיבור והנפשה של דמויות הגרפיקה הפיקסלים שלי.
שלב 4
השתמש בכלי הטפטפת (I), דגום את אזור גוון העור הכהה ביותר בתמונה וצור ריבוע קטן של צבע. עשה זאת שלוש פעמים נוספות כדי ליצור פלטת גווני עור בארבעה גוונים.צור שכבה נוספת מתחת לשכבת המתאר והשתמש במברשת 1 פיקסל ובפלטת צבעים של 4 צבעים כדי להצליל את התמונה (שוב השתמש בתמונה כמדריך שלך). \ פ
עדיף לשמור את כל האלמנטים של יצירות האמנות שלך, או שכבות שונות, מכיוון שזה מקל על שימוש חוזר בהם בצורות אחרות. זה שימושי במיוחד עבור "רעים" מכיוון שרוב משחקי 16 סיביות משתמשים במספרים דומים מאוד. לדוגמה, לחבר אחד יכול להיות חולצה אדומה וסכין, בעוד שלאחר מכן זהה למעט החולצה הכחולה והאקדח.
שלב 5
חזור על תהליך זה עבור חלקים אחרים של הדמות, הצללת הבד כדי להתאים לאלמנטים אחרים בתמונה המקורית. זכור להמשיך לדגום עם הכלי Eyedropper כדי ליצור תחילה את פלטות הצבעים, מכיוון שזה מספק סט צבעים עקבי שנראה נהדר ומתאים לפלטת הצבעים המצומצמת יחסית של משחקי 16 סיביות.
שלב 6
הוסף נתונים כדי לשפר את הדמות שלך עם גוונים, קעקועים, עגיל ועוד. אכל כאן ארוחת ערב וחשוב כיצד אתה רוצה שהדמות שלך תופיע בסביבת המשחק. אולי הם יכולים להשתמש בגרזן או להחזיק בזרוע רובוטית?
שלב 7
כדי להחיות את הדמות שלך, חזור על השלבים הקודמים באמצעות חמש שכבות מדריך האנימציה האחרות. תהליך זה עשוי לקחת זמן מה כדי לשלוט וליצור תוצאות חלקות, אך ניתן לבצע קיצורי דרך על ידי שימוש חוזר באלמנטים ממסגרות קודמות. לדוגמה, ברצף זה של שש פריימים, הראש נשאר ללא שינוי.
שלב 8
כדי לבדוק שרצף האנימציה תקין, פתחו את החלונית Animation בפוטושופ וודאו שרק הפריים הראשון של האנימציה נבחר כרגע. אתה יכול להוסיף מסגרות חדשות ולהפעיל ולכבות שכבות כדי ליצור את ההנפשה שלך, אבל הדרך המהירה ביותר היא להשתמש בפקודה "צור מסגרות משכבות" בתפריט המוקפץ של החלונית (מימין למעלה).המסגרת הראשונה היא רקע ריק, אז בחר אותו ולחץ על סמל האשפה של הלוח (בתחתית) כדי למחוק אותו.
אם אהבתם לשחק בלגו בילדותכם (או שאתם ממשיכים לשחק בו גם כבוגרים), בוודאי תתעניינו באומנות פיקסלים איזומטרית. זה עשוי להיות תלוי בטכנולוגיה ודומה יותר למדע מדויק מאשר להמחשה. אבל באמנות כזו אין פרספקטיבה תלת מימדית, אתה יכול להזיז את מרכיבי הסביבה בפשטות מירבית.
ניצור את הדמות כנקודת התייחסות הגיונית לאמנות הפיקסלים, מכיוון שהיא תעזור לקבוע את הפרופורציות של רוב הפריטים האחרים שכנראה ניצור. עם זאת, תחילה עליך ללמוד כמה יסודות של אמנות פיקסלים איזומטרית, ולאחר מכן לעבור ליצירת דמויות; אם אינך רוצה ללמוד את היסודות ולצייר קובייה, דלג לשלב 3. כעת נתחיל.
1. קווי פיקסל
קווים אלו הם הבסיס לסגנון הנפוץ ביותר (והמעניין) ביותר של אמנות פיקסלים איזומטרית, הסגנון בו נשתמש במדריך זה:
הם באורך שני פיקסלים עבור כל פיקסל למטה. קווים כאלה נראים רכים יחסית ומשמשים למשטחים מרובעים:
מבני הקווים הנפוצים ביותר (כמו באיור למטה) יעבדו היטב, אך הציור יהפוך זוויתי ומחוספס יותר עם כל עלייה בצעד:
להבדיל, הנה כמה קווים בעלי מבנה לא אחיד:
מאוד זוויתי ולא נראה
יפה. הימנע משימוש בהם.
2. כרכים
הדמות שלנו לא תפעל בדיוק לפי הכללים האיזומטריים, אז בואו ניצור תחילה קובייה פשוטה כדי להבין את הפרופורציות.
צור מסמך חדש בפוטושופ ברזולוציה 400x400 פיקסלים.
אני אוהב לפתוח חלון נוסף עבור אותו קובץ באמצעות התפריט חלון > סדר > חלון חדש/שיעורים.(חלון > סדר > חלון חדש...). זה מאפשר, עבודה בגידול 600% עקוב אחר התוצאה בחלון הזום 100% . השימוש ברשת תלוי בך, אבל לפעמים אני מוצא את זה יותר מעצבן מאשר מועיל.
בואו נרחיב על המסמך וניצור אחת מהשורות 2:1
אני מעדיף להשתמש 5% אפור במקום שחור, כך שבהמשך אוכל להוסיף צלליות (שחור ואטימות נמוכה) ואוכל לבחור כל צבע בנפרד בעזרת שרביט הקסמים.
ישנן מספר דרכים לשרטט קו:
1. באמצעות כלי קו(כלי קו) עם מצב פיקסלים(פיקסלים) לא מסומן הַחלָקָה(אנטי כינוי) ועובי 1 פיקסלים. בזמן שאתה מצייר, קצה הכלי של זווית ההטיה אמור להופיע 26.6 מעלות. למעשה, הכלי Line לא יכול להיקרא נוח, הוא יוצר קווים משוננים אם הזווית לא מדויקת.
2. עליך ליצור בחירה 20 x 40 פיקסלים, ולאחר מכן בחר K עִפָּרוֹן(כלי עיפרון) 1 פיקסליםוצייר נקודה בפינה השמאלית התחתונה של הבחירה, לאחר מכן, תוך לחיצה ממושכת על המקש מִשׁמֶרֶתלחץ בפינה הימנית העליונה. פוטושופ תיצור אוטומטית קו חדש בין שתי הנקודות. בעזרת תרגול, כך תוכלו ליצור קווים חלקים ללא בחירה.
3. צריך לצייר שני פיקסלים בעיפרון, לבחור אותם, ללחוץ Ctrl+Alt, ולאחר מכן גרור את הבחירה למיקום חדש כך שהפיקסלים יתכנסו בפינות. אתה יכול גם להזיז את הבחירה באמצעות מקשי החצים במקלדת תוך כדי לחיצה alt. שיטה כזו נקראת היסט אלט(Alt Nudge).
כאן יצרנו את השורה הראשונה. בחר אותו והזז אותו כמו בשלב 3, או פשוט העתק והדבק, הזז את השכבה החדשה למטה. לאחר מכן, הפוך את השורה השנייה אופקית דרך התפריט ערוך > שינוי > הפוך אופקית(עריכה > שינוי > הפוך אופקי). אני משתמש בתכונה זו לעתים קרובות כל כך שאפילו הכנתי לה קיצור מקלדת!
עכשיו בואו נשלב את השורות שלנו:
לאחר מכן, Alt-Offset שוב, הפוך את העותק אנכית ומזג את שני החצאים כדי להשלים את פני השטח שלנו:
הגיע הזמן להוסיף "מימד שלישי". העבר את המשטח הריבועי ב-Alt והזיז אותו אל 44 פיקסליםמטה:
טיפ: אם תחזיק את מקשי החצים לחוץ תוך כדי תנועה מִשׁמֶרֶת, הבחירה תעבור ל 10 פיקסלים במקום אחד.
כדי שהקוביה תיראה מסודרת יותר, בואו נרכך את הפינות על ידי הסרת הפיקסלים השמאלי והימני ביותר מהריבועים. לאחר מכן, הוסף קווים אנכיים:
כעת הסר את השורות המיותרות בתחתית הקובייה. כדי להתחיל לצבוע את הדמות שלנו, בחרו כל צבע (רצוי גוון בהיר) ומלאו בו את הריבוע העליון.
כעת הגדל את הבהירות של הצבע הנבחר ב 10% (אני ממליץ להשתמש במחווני HSB בלוח הבקרה) כדי לצייר פינות בהירות יותר לאורך החלק הקדמי של ריבוע הצבע שלנו. מכיוון שחתכנו מעט את הקוביה, הקווים הבהירים האלה ייראו יפים יותר על הקצוות השחורים (במקום להחליף אותם) כמו בתמונה למטה:
עכשיו אנחנו צריכים להסיר את הקצוות השחורים. השתמש בטריק משיטת ציור הקו השני עבור המחק (שצריך להיות מוגדר כרגיל כלי מחקמצב (כלי מחק). עִפָּרוֹן(מצב עיפרון), עובי 1 פיקסלים).
בחר את הצבע של הריבוע העליון עם פיפטות(כלי טפטפת). כדי לבחור במהירות בכלי זה, תוך כדי ציור עם עיפרון או מילוי, הקש על המקש alt. השתמש בצבע הטפטפת שהתקבל כדי למלא את הקו האנכי באמצע הקוביה. לאחר מכן, הפחת את בהירות הצבע ב 15% ומלאים את הצד השמאלי של הקובייה בצבע שנוצר. הפחת את הבהירות עוד יותר 10% לצד ימין:
הקובייה שלנו הושלמה. זה אמור להיראות נקי וחלק יחסית כשמקרבים אותו. 100% . אנחנו יכולים להמשיך.
3. הוסף דמות
הסגנון של הדמות יכול להיות שונה לחלוטין, אתה חופשי לשנות את הפרופורציות או האלמנטים כרצונך. ככלל, אני עושה גוף דק וראש מעט גדול. הגוף הרזה של הדמות עוזר לשמור על הקווים ישרים ופשוטים.
זה יהיה הגיוני להתחיל עם העיניים. אם היינו מחמירים עם זוויות איזומטריות, אז על הפנים עין אחת צריכה להיות נמוכה יותר, אבל בקנה מידה קטן נוכל להזניח את התכונה הזו כדי להפוך את הפנים של הדמויות לנעימות יותר. זה יהפוך את הציור למסודר למרות הגודל.
אנחנו הופכים את הדמות לקטן, כי לאחר זמן מה אולי כדאי להוסיף לה מכונית, בית, כיכר שלמה או אפילו עיר. לכן, הדמות צריכה להיות אחד האלמנטים הקטנים ביותר באיור. יש לשקול גם יעילות גרפית; נסו להפוך את הדמות לאטרקטיבית ככל האפשר עם כמה שפחות פיקסלים (גדולים מספיק כדי לייצג תווי פנים). בנוסף, הרבה יותר קל לצייר חפצים קטנים. היוצא מן הכלל הוא כאשר אתה רוצה רק להראות את הדמות, הרגשות שלה, או הדמיון שלהם למישהו.
בואו ניצור שכבה חדשה. העיניים צריכות רק שני פיקסלים - אחד לכל עין, כשביניהם פיקסל ריק. דלג על פיקסל אחד משמאל לעיניים, הוסף קו אנכי:
כעת הוסף שכבה נוספת וצייר פס אופקי של 2 פיקסלים, זה יהיה הפה. השתמש בחצים במקלדת כדי לזוז וכאשר אתה מוצא את המיקום המושלם, הזז את השכבה למטה. עשה את אותו הדבר עם הסנטר, זה צריך להיות רק קו ארוך יותר:
סיים את השיער ואת החלק העליון של הראש, ואז לרכך את הפינות. אתה אמור לקבל משהו כזה:
כעת השאירו פיקסל ריק ליד העין השנייה, הוסיפו פאות (שגם יעזור לצייר את אוזני הדמות) ועוד כמה פיקסלים מעליהם עד לקו השיער. לאחר מכן תשאירו עוד פיקסל אחד ריק, כאן תתחיל האוזן והקו שמסמן את קצה הראש. קדימה ורכך את פינות הקווים:
הוסף פיקסל לחלק העליון של האוזן ועצב מחדש את הראש אם תרצה; ראשים נמשכים בדרך כלל כבר באזור הצוואר:
צייר קו מהסנטר - זה יהיה החזה. תחילת הצוואר תהיה באוזן, כמה פיקסלים למטה וכמה פיקסלים באלכסון כך שהכתפיים של הדמות שלנו יהיו גלויות:
עכשיו במקום שבו הכתפיים מסתיימות, הוסף קו אנכי עם אורך של 12 פיקסלים כדי להפוך את הצד החיצוני של הזרוע, והצד הפנימי יהיה שני פיקסלים משמאל. חבר את הקווים בתחתית עם כמה פיקסלים כדי ליצור יד / אגרוף (במקרה שלנו אין פירוט, אז אל תשים לב לאלמנט הזה) וממש מעל המקום שבו היד מסתיימת, הוסף קו 2:1 , אשר ישמש כמותן, ולאחר מכן לצייר את הקו של החזה ולקבל פלג גוף עליון מוגמר. הזרוע השנייה של הדמות אינה נראית לעין, אבל היא תיראה בסדר כשהיא מכוסה על ידי פלג הגוף העליון.
אתה אמור לסיים עם משהו דומה לזה:
כמובן, אתה יכול להשתמש בכל יחס רוחב-גובה שאתה אוהב; אני מעדיף לצייר אפשרויות שונות זו לצד זו לפני שאני מחליט מה הכי טוב.
כעת עבור פלג הגוף התחתון נוסיף עוד כמה קווים אנכיים. אני אוהב לעזוב 12 פיקסלים בין הסוליות והמותניים. קל מאוד לצייר את הרגליים, אתה רק צריך לעשות רגל אחת קצת יותר ארוכה, מה שיאפשר לדמות להיראות נפח יותר:
כעת נוסיף צבע. תמיד קשה למצוא צבע עור טוב, אז אם אתה רוצה להשתמש באותו צבע כמו במדריך זה, הקוד שלו הוא #FFCCA5. התאמת צבעים לשאר האלמנטים לא אמורה להוות בעיה. לאחר מכן, קבע את אורך השרוולים, מיקום החתך של החולצה, הסגנון שלה. כעת הוסף פס כהה כדי להפריד את החולצה מהגוף. אני מעדיף לעשות את כל האלמנטים הדקורטיביים בהירים יותר משחור (במיוחד כאשר אלמנטים רבים נמצאים באותה רמה, למשל מחולצה ועד עור או מכנסיים). זה מאפשר לך לקבל את הניגודיות הדרושה, בעוד התמונה לא תהיה מחוספסת מדי.
אתה יכול להוסיף אפקטי אור כמעט לכל אזור צבע. הימנע יותר מדי צללים או שימוש בהדרגות. עוד כמה פיקסלים ( 10% אוֹ 25% ) מספיק צבע בהיר או כהה כדי לגרום לאלמנטים להיראות תלת מימדיים ולהסיר את השטיחות של האיור. אם אתה רוצה להוסיף צבע תוסס לאזור שכבר יש 100% בהירות, נסה להוריד את הרוויה שלו. במקרים מסוימים (לדוגמה, בעת ציור שיער), זו יכולה להיות דרך טובה לשנות את הגוונים.
אתה יכול לנסות אפשרויות שיער רבות. הנה כמה רעיונות:
אם תמשיך ליצור דמויות, דברים קטנים כמו סגנון לבוש, אורך שרוולים, אורך מכנסיים, אביזרים, לבוש וצבע עור יהיו שימושיים מאוד לגיוון.
כעת כל מה שנותר לעשות הוא לחבר את שני האלמנטים יחד ולהעריך איך הם נראים באותה הגדרה:
אם אתה רוצה לייצא את היצירה שלך, PNG הוא הפורמט האידיאלי.
זהו, העבודה בוצעה!
אני מקווה שהשיעור הזה לא מבלבל מדי. אני חושב שכיסיתי את המספר המרבי של טיפים וטריקים אסתטיים. אתה יכול להרחיב בחופשיות את עולם הפיקסלים האיזומטרי שלך - מבנים, מכוניות, פנים, חוץ. לעשות את כל זה אפשרי ואפילו מעניין, אם כי לא כל כך קל.
מְתוּרגְמָן:שפובל אלכסיי
4.7 (93.8%) 158 קולות
ציורים לפי תאים או פיקסלים היא צורת אמנות פופולרית מאוד בקרב תלמידי בית ספר וסטודנטים. בהרצאות מייגעות, רישומים ע"י תאים חוסכים אותך משעמום. אב הטיפוס של ציור ע"י תאים היה תפרים צולבים, שבו הוחל דוגמת תפרים צולבים על קנבס, בד מסומן בתאים. כולנו היינו פעם סטודנטים ותלמידי בית ספר והשתעממנו לצייר תמונות שונות בתאים, מה הייתה ההפתעה שלי כשגיליתי שזו למעשה אמנות עם יצירות המופת והגאונות שלה. התחלתי ללמוד את הנושא ביתר פירוט וזה מה שיצא מזה...
מה לצייר ציורים על התאים
אמנות זו זמינה לכל אחד, העיקר לעקוב אחר התאים בבירור. מחברות בית ספר אידיאליות לציור תמונה, גודל הריבועים שלהן הוא 5x5 מ"מ, והמחברת עצמה היא 205 מ"מ על 165 מ"מ. כרגע, פנקסים קפיציים עם גיליון A4 צוברים פופולריות בקרב אמנים בתאים, גודל המחברת הזו הוא 280 מ"מ על 205 מ"מ.
אמנים מקצועיים יוצרים את יצירות המופת שלהם על נייר גרפי (נייר ציור), זה המקום לשוטט בו. החיסרון היחיד של נייר גרף הוא צבעו הירוק החיוור, שאינו מורגש כאשר משרטטים עם עטים צבעוניים.
בבחירת מחברת לציור, שימו לב לצפיפות הנייר, איכות הציור שלכם לפי תאים תלויה בצפיפות שלו, האם הוא יופיע בצד הלא נכון של הגיליון. צפיפות הגיליון האידיאלית היא לא פחות מ-50 גרם/מ"ר.
איך לצייר ציורים לפי תאים
אין צורך בכלים מיוחדים לצביעת ציורים לפי תאים, כל עפרונות ועטים יצליחו. ציורי מונוכרום הם מאוד מגניבים, אבל אני באמת רוצה להוסיף צבעים לחיים שלי. על מנת שהצבעים יהפכו למגוונים, גשו לחנות כלי כתיבה ובחרו בכל מה שחשקה נפשכם, עטי ג'ל, שמן, כדורי.
עטים כדוריים לאמנות פיקסלים
סמנים לציורים לפי תאים
אם אתה אוהב לצייר בטושים, זכותך, הצביעה של טושים עשירה מאוד. כדאי לזכור שטושים מחולקים לשתי קבוצות: אלכוהול ומים, מים בטוחים יותר, אבל הם יכולים להשרות את הנייר. אלכוהול יכול גם להשרות נייר, והריח חזק גם לחובבן.
עפרונות לציורים לפי תאים
עפרונות, סוג נוסף של מכשיר שרטוט. עפרונות אינם יוצאי דופן במגוון הסוגים, הם פלסטיק, שעווה, עץ וצבעי מים. אנחנו מציירים עם עץ מאז ילדות מוקדמת, ואנחנו יודעים שלעתים קרובות הם שוברים את ההובלה. אלה פלסטיק ושעווה נשברים לעתים רחוקות יותר, אבל הם עבים יותר, אשר יהיה פחות נוח בציור. לא יכול להיות שאלה של עפרונות בצבעי מים, שכן לאחר צביעה בעיפרון, אתה צריך לכסות את הציור במברשת לחה, וזה לא מקובל עבור גיליונות מחברת.
צפו בסרטון על כמה קל לצייר ציורים לפי תאים וכמה יפה זה יכול להיות כתוצאה מכך:
עוד כמה תוכניות ציור שאהבתי:
Dot Graphics - טכנולוגיית Pixel Art
הבנו אילו אביזרים דרושים, עכשיו בואו נכיר את הטכנולוגיה. הטכנולוגיה של פיקסל ארט היא פשוטה מאוד, היא גרפיקה נקודות.
לפני שנמשיך לשקול את דרכי אמנות הפיקסלים, בואו נחזור לילדות בשנות ה-80 וה-90. כמובן, מי שגדל בעידן הפוסט-סובייטי זוכר משחקי וידאו של 8 סיביות, גרפיקת משחק, הבנויים על גרפיקת פיקסלים.
הדרך הטובה ביותר לשלוט בכל דבר היא תרגול, בואו ננסה לשלוט באמנות פיקסלים:
ניקח עט שמן שחור ואדום, ודף מחברת משובץ.
נתחיל עם ציור פשוט. בואו נספור את התאים, נגדיר את קו המתאר ונקשט לפי הצבעים.
לדוגמה, בואו נצייר לב:
- אנחנו לוקחים עלה בכלוב ועט עם משחה שחורה, שמים 3 נקודות, כמו באיור, הנקודות מסמנות אילו תאים יצבעו בשחור.
- אנו מציירים קווים המציינים את קווי המתאר של התמונה.
- סמן שלוש נקודות בכל צד, ראה תמונה.
- סמן את השטח של הדמות בשני קווים.
- נניח נקודה נוספת בכל צד ונצייר את הגבולות מתחת לנקודות העליונות.
- צייר 8 נקודות אנכית ו-4 נקודות משני הצדדים, כפי שמוצג באיור למטה.
- על ידי ציור קווים אנכיים, כפי שמוצג באיור, נציין באופן מלא את גבולות הדמות.
- באותו אופן, סמן את החלק התחתון של הלב משמאל ומימין.
- אנו מקיפים את התאים, כמו בתמונה שלנו.
- הדבר הבא שעלינו לעשות הוא לצבוע את החלק הפנימי של הלב בעט אדום, ולהשאיר את גולת הכותרת של האור לא צבוע.
- ולבסוף, הצל את התאים המסומנים בנקודות בעט שחור. עכשיו למדת איך לצייר תמונות 8 סיביות.
אם נראה לכם שתמונות גדולות ונפחיות אינן בשבילכם, כדאי שתנסו לצייר תמונה מהאינטרנט. מפחד? לא שווה את זה.
לקחת
- עט שחור,
- עפרונות,
- מחברת משובצת,
- מַחשֵׁב,
- תמונה או תמונה מהאינטרנט
- תוכנית פוטושופ.
כדי ליישם שרטוטים תלת מימדיים, עלינו לספור את מספר התאים שיצבעו עליהם. די קשה שלא לטעות במספרים גדולים. הקפידו גם לבחור בגוונים של צבעים הדומים לתמונה המקורית.
אז בואו נעשה את זה:
אני אתן עצה אחת שעוזרת לי מאוד, אם יש לך מדפסת צבעונית תדפיס את התמונה, אם לא, זה לא מפחיד. צייר רשת של 10 תאים עם קו מתאר עבה יותר. על הגיליון המודפס, באמצעות סרגל ועט מנוגד, אם אין איפה להדפיס, ניתן לפתוח את התמונה ב-Paint.
הצלחה יצירתית לך.
כיום, תוכנות כמו פוטושופ, אילוסטרייטור, קורל מקלות על עבודת המעצב והמאייר. בעזרתם, אתה יכול לעבוד במלואו מבלי להיות מוסחת על ידי סידור הפיקסלים, כפי שהיה בסוף המאה הקודמת. כל החישובים הדרושים נעשים על ידי תוכנה - עורכים גרפיים. אבל יש אנשים שפועלים בכיוון אחר, לא רק אחר, אלא אפילו הפוך לגמרי. כלומר, הם עוסקים באותו סידור ישן של פיקסלים, על מנת להשיג תוצאה ואווירה ייחודית בעבודתם.
דוגמה לאמנות פיקסלים. רסיס.
במאמר זה, נרצה לדבר על אנשים העוסקים באמנות פיקסלים. תסתכל מקרוב על היצירות הטובות ביותר שלהם, אשר, בשל מורכבות היישום בלבד, ניתן לקרוא ליצירות של אמנות עכשווית ללא הגזמה. עבודות שעוקרות את הנשימה במבט.
אומנות פיקסלים. מיטב העבודות והמאיירים
עִיר. מחבר: זוגלס
טירת אגדות. מחבר: Tinuleaf
כפר מימי הביניים. מחבר: docdoom
גנים תלויים של בבל. מחבר: ליקוי ירח
רובע מגורים. מְחַבֵּר:
Pixel Art פופולרי מאוד למשחקים גם בימינו ויש לכך מספר סיבות!
אז מה שובה את Pixel Art:
- תפיסה. Pixel art נראה מדהים! יש הרבה מה לומר על כל פיקסל בודד בספרייט.
- נוֹסטָלגִיָה. Pixel Art מחזיר תחושה נוסטלגית נהדרת לגיימרים שגדלו לשחק נינטנדו, סופר נינטנדו או ג'נסיס (כמוני!)
- קלות למידה. Pixel Art היא אחת האומנויות הדיגיטליות הקלות ביותר ללמידה, במיוחד אם אתה יותר מתכנת מאשר אמן ;]
אז, אתה רוצה לנסות את היד שלך ב-Pixel Art? אז עקבו איתי ואני אראה לכם איך ליצור דמות פשוטה אך יעילה שניתן לשחק בה שתוכלו להשתמש בה במשחק שלכם! בנוסף, כבונוס, נבחן כיצד לשלב אותו במשחקי אייפון!
ללמידה מוצלחת, תזדקק ל-Adobe Photoshop. אם אין לך את זה, אתה יכול להוריד גרסת ניסיון בחינם מאתר Adobe או מטורנט.
מה זה Pixel Art?
לפני שנתחיל, בואו נהיה ברורים לגבי מה זה Pixel Art, זה לא כל כך ברור כמו שאתם עשויים לחשוב. הדרך הקלה ביותר להגדיר מה זה Pixel Art היא לציין מה זה לא, כלומר: כל מה שבו פיקסלים נוצרים באופן אוטומטי. הנה כמה דוגמאות:
מִדרוֹן: בחר שני צבעים וחשב את צבע הפיקסלים שביניהם. נראה מגניב, אבל זה לא Pixel Art!
כלי טשטוש: זיהוי פיקסלים ושכפול/עריכתם כדי ליצור גרסה חדשה של התמונה הקודמת. שוב, לא תרשים פיקסלים.
כלי החלקה(בעיקר יצירת פיקסלים חדשים בצבעים שונים כדי לעשות משהו "חלק"). אתה חייב להימנע מהם!
יש שיגידו שגם צבעים שנוצרו אוטומטית אינם Pixel Art, שכן הם דורשים שכבה למיזוג אפקטים (מיזוג פיקסלים בין שתי שכבות לפי אלגוריתם נתון). אבל, מכיוון שרוב המכשירים כיום עוסקים במיליוני צבעים, ניתן להתעלם מהצהרה זו. עם זאת, שימוש במספר קטן של צבעים הוא תרגול טוב ב-Pixel Art.
כלים אחרים כמו (קו) או כלי דלי צבע(Paint Bucket) גם מייצר אוטומטית פיקסלים, אבל מכיוון שאתה יכול להגדיר אותם כך שלא יחליק את העקומה של פיקסלים מלאים, הכלים האלה נחשבים ידידותיים ל-Pixel Art.
לפיכך, מצאנו ש-Pixel Art דורשת תשומת לב רבה בעת הצבת כל פיקסל בספרייט, לרוב ביד ועם פלטת צבעים מוגבלת. בואו נתחיל לעבוד עכשיו!
תחילת העבודה
לפני שתתחיל ליצור את נכס Pixel Art הראשון שלך, עליך לדעת שלא ניתן לשנות את קנה המידה של Pixel Art. אם תנסה להפחית את זה, הכל ייראה מטושטש. אם תנסה להגדיל אותו, הכל ייראה מקובל כל עוד אתה משתמש בקנה מידה שהוא כפולה של שניים (אבל, כמובן, לא תהיה בהירות).
כדי להימנע מבעיה זו, עליך להבין תחילה כמה גדול דמות המשחק או רכיב המשחק שלך צריך להיות לפני שתתחיל לעבוד. לרוב זה מבוסס על גודל המסך של המכשיר שאליו אתה מכוון וכמה "פיקסלים" אתה רוצה לראות.
לדוגמה, אם אתה רוצה שהמשחק שלך ייראה גדול פי שניים על מסך אייפון 3GS ("כן, אני באמת רוצה לתת למשחק שלי מראה רטרו מפוקסל!"), שיש לו רזולוציית מסך של 480x320 פיקסלים, אז אתה צריך לעבוד בחצי מהרזולוציה, במקרה הזה זה יהיה 240x160 פיקסלים.
פתח מסמך פוטושופ חדש ( קובץ → חדש...) והגדר את הגודל לגודל מסך המשחק שלך, ולאחר מכן בחר את הגודל עבור הדמות שלך.
כל תא הוא 32x32 פיקסלים! בחרתי ב-32x32px לא רק בגלל שזה נהדר לגודל המסך שבחרתי, אלא גם בגלל ש-32x32px הוא גם כפולה של 2, וזה שימושי עבור מנועי צעצועים (גדלים של אריחים הם לרוב כפולות של 2, טקסטורות מיושרות לכפולות של 2 וכו').
גם אם המנוע שבו אתה משתמש תומך בכל גודל תמונה, אתה תמיד יכול לנסות לעבוד עם מספר זוגי של פיקסלים. במקרה זה, אם יש צורך לשנות את קנה המידה של התמונה, הגודל יחולק טוב יותר, וכתוצאה מכך ביצועים טובים יותר.
איך לצייר דמות Pixel Art
Pixel Art ידוע כגרפיקה חדה וקלה לקריאה: אתה יכול להגדיר תווי פנים, עיניים, שיער, חלקי גוף עם כמה נקודות בלבד. עם זאת, גודל התמונה מסבך את המשימה: ככל שהדמות שלך קטנה יותר, כך קשה יותר לצייר אותה. כדי לגשת למשימה בצורה יותר מעשית, בחר מה יהיה הקטן ביותר בגודל של תכונות האופי. אני תמיד בוחר בעיניים כי הן אחת הדרכים הטובות ביותר להביא חיים לדמות.
בפוטושופ בחר כלי עיפרון(כלי עיפרון). אם אינך מוצא אותו, פשוט לחץ והחזק את הכלי כלי מברשת(Brush Tool) ומיד תראה אותו (הוא צריך להיות שני ברשימה). רק תצטרך לשנות את גודלו ל-1px (תוכל ללחוץ בסרגל אפשרויות הכלים ולשנות את גודלו, או פשוט להחזיק את המקש [).
כמו כן תצטרך כלי למחוק(כלי מחק), אז לחץ עליו (או הקש על מקש E) ושנה את ההגדרות שלו על ידי בחירה מהרשימה הנפתחת מצב:(מצב:) עִפָּרוֹן(עיפרון) (מכיוון שאין דיטרציה במצב זה).
עכשיו בואו נתחיל לפיקסל! צייר גבות ועיניים כפי שמוצג בתמונה למטה:
אי! אני מפוקסל!! אפשר כבר להתחיל עם Lineart (שם הציור נעשה עם קווים), אבל דרך מעשית יותר היא לצייר צללית של דמות. החדשות הטובות הן שאתה לא צריך להיות מקצוען בשלב זה, רק נסו לדמיין את מימדי חלקי הגוף (ראש, גוף, ידיים, רגליים) ואת תנוחת ההתחלה של הדמות. נסה לעשות משהו כזה באפור:
אתה לא צריך להיות מקצוען בשלב זה שימו לב שגם השארתי מקום ריק. אתה לא באמת צריך למלא את כל הקנבס, השאר מקום למסגרות עתידיות. במקרה זה, זה יהיה מאוד שימושי לשמור על אותו גודל בד עבור כולם.
לאחר שסיימתם את הצללית, הגיע הזמן לעשות זאת . עכשיו אתה צריך להיות זהיר יותר עם מיקום הפיקסלים, אז אל תדאג לגבי ביגוד, שריון וכו' לעת עתה. ליתר ביטחון, אתה יכול להוסיף שכבה חדשה כדי שלעולם לא תאבד את הצללית המקורית שלך.
אם אתה מרגיש שהכלי עיפרון איטי מדי לציור, אתה תמיד יכול להשתמש בו (כלי קו), רק זכור שלא תוכל למקם פיקסלים בצורה מדויקת כפי שהיית עושה עם עיפרון. תצטרך להגדיר כמו למטה:
בחר על ידי לחיצה והחזקה כלי מלבן(כלי מלבן)
עבור לחלונית אפשרויות הכלים, ברשימה הנפתחת בחר מצב כלי(מצב ציור מתאר) בחר Pixel , שנה מִשׁקָל(רוחב) ב-1px (אם עדיין לא נעשה) ובטל את הסימון אנטי כינוי(הַחלָקָה). כך אתה צריך להיות:
שימו לב שלא עשיתי את המתאר התחתון לכפות הרגליים. זה אופציונלי, מכיוון שכפות הרגליים אינן חלק כל כך חשוב מהרגליים כדי להבליט אותן, ואתה שומר שורה אחת של פיקסלים על הבד.
החלת צבעים וצללים
עכשיו אתה מוכן להתחיל לצבוע את הדמות שלנו. אל תדאג לגבי בחירת הצבעים הנכונים, יהיה קל מאוד לשנות אותם מאוחר יותר, רק וודא שלכל אחד יש "צבע משלו". השתמש בצבעי ברירת המחדל בכרטיסייה דוגמיות(חלון ← דוגמיות).
צבעו את הדמות שלכם כפי שמוצג להלן (אך אל תהסס להיות יצירתי ולהשתמש בצבעים משלך!)
צבע טוב וניגודי משפר את קריאות הנכס שלך! שימו לב שעדיין לא עשיתי קווי מתאר לבגדים או לשיער. זכרו תמיד: שמור כמה שיותר פיקסלים מקווי מתאר מיותרים!
אל תבזבז זמן בצביעה של כל פיקסל. כדי להאיץ את העניינים, השתמש בקווים עבור אותו צבע, או כלי דלי צבע(כלי דלי צבע) כדי להשלים את החסר. אגב, זה גם יצטרך להיות מוגדר. בחר כלי דלי צבעבסרגל הכלים (או פשוט הקש על מקש G) ושנה סוֹבלָנוּת(סובלנות) ל-0, ובטל את הסימון אנטי כינוי(הַחלָקָה).
אם אי פעם תצטרך להשתמש כלי שרביט קסמים(כלי שרביט קסמים) - כלי שימושי מאוד שבוחר את כל הפיקסלים באותו צבע, ולאחר מכן מגדיר אותו באותו אופן כמו הכלי "דלי צבע" - ללא סובלנות ומניעת היווצרות.
השלב הבא, שידרוש מכם קצת ידע, הוא הבהרה והצללה. אם אין לך את הידע כיצד להראות את הצדדים הבהירים והכהים, אז להלן אתן לך הדרכה קטנה. אם אין לך זמן או חשק ללמוד את זה, אתה יכול לדלג על השלב הזה וללכת לקטע Spice Up Your Palette, כי אחרי הכל, אתה יכול פשוט לגרום להצללה שלך להיראות כמו הדוגמה שלי!
השתמש באותו מקור אור עבור כל הנכס נסו לתת את קווי המתאר כפי שאתם רוצים/יכולים, כי לאחר מכן הנכס מתחיל להיראות מעניין יותר. לדוגמה, עכשיו אתה יכול לראות את האף, עיניים זועפות, מגב שיער, קפלים במכנסיים וכו'. אתה יכול גם להוסיף כמה כתמים בהירים על זה, זה ייראה אפילו טוב יותר:
השתמש באותו מקור אור בעת הצללה ועכשיו, כפי שהבטחתי, מדריך קטן לאור וצללים:
תבליט את הפלטה שלך
אנשים רבים משתמשים בצבעי פלטת ברירת המחדל, אך מכיוון שאנשים רבים משתמשים בצבעים אלו, אנו רואים אותם במשחקים רבים.
לפוטושופ יש מבחר גדול של צבעים בפלטה הסטנדרטית, אבל אל תסתמכו עליה יותר מדי. עדיף ליצור צבעים משלך על ידי לחיצה על הפלטה הראשית בתחתית סרגל הכלים.
לאחר מכן, בחלון בחירת הצבעים, דפדף בסרגל הצד הימני כדי לבחור צבע ובאזור הראשי כדי לבחור את הבהירות הרצויה (בהיר או כהה יותר) ואת הרוויה (עסיסית או עמומה יותר).
לאחר שתמצא את המתאים, לחץ על אישור ו להגדיר מחדש את הכלי Paint Bucket. אל דאגה, לאחר מכן תוכל פשוט לבטל את הסימון בתיבת הסימון 'רציף' וכאשר תצייר עם הצבע החדש, כל הפיקסלים החדשים עם אותו צבע רקע יצבעו גם הם.
זו סיבה נוספת לכך שחשוב לעבוד עם מספר קטן של צבעים ולהשתמש תמיד באותו צבע לאותו אלמנט (חולצה, שיער, קסדה, שריון וכו'). אבל אל תשכח להשתמש בצבעים שונים לאזורים אחרים, אחרת הציור שלנו יהיה צבעוני מדי!
בטל את הסימון של "רציף" כדי למלא את הפיקסלים שנבחרו באותו צבעשנה את הצבעים אם תרצה וקבל צביעה אופי זוהר יותר! אתה יכול אפילו לצבוע מחדש את קווי המתאר, רק וודא שהם משתלבים היטב עם הרקע.
לבסוף, בצע בדיקת צבע רקע: צור שכבה חדשה מתחת לדמות שלך ומלא אותה בצבעים שונים. זה הכרחי על מנת לוודא שהדמות שלך תהיה גלויה על רקע בהיר, כהה, חם וקר.
כפי שאתה יכול לראות, כיביתי את ההנגדה בכל הכלים בהם השתמשתי עד כה. אל תשכח לעשות זאת גם בכלים אחרים, למשל, מרקיזה אליפטית(אזור בחירה סגלגל) ו פְּלָצוּר(פְּלָצוּר).
עם הכלים האלה, אתה יכול לשנות בקלות את גודל החלקים שנבחרו, או אפילו לסובב אותם. לשם כך, השתמש בכל כלי בחירה (או הקש על מקש M) כדי לבחור אזור, לחץ לחיצה ימנית ובחר טרנספורמציה חופשית(המרה חופשית), או פשוט הקש Ctrl + T . כדי לשנות את גודל האזור שנבחר, גרור את אחת מהידיות הממוקמות לאורך מסגרת מסגרת השינוי. כדי לשנות את גודל הבחירה תוך שמירה על יחס רוחב-גובה, החזק את מקש Shift לחוץ וגרור את אחת מנקודות האחיזה הפינות.
עם זאת, פוטושופ מחליק אוטומטית את כל מה שנערך עם ה- טרנספורמציה חופשיתאז לפני העריכה עבור אל ערוך ← העדפות ← כללי(Ctrl + K) ושנה אינטרפולציה של תמונה(אינטרפולציה של תמונה) פועל השכונה הקרובה ביותר(השכן הכי קרוב). בקיצור, ב השכונה הקרובה ביותרהמיקום והגודל החדשים מחושבים בגסות רבה, לא מוחלים צבעים או שקפים חדשים והצבעים שתבחר נשמרים.
שילוב Pixel Art Drawing במשחקי אייפון
בחלק זה תלמדו כיצד לשלב את אמנות הפיקסלים שלנו במשחק אייפון באמצעות מסגרת המשחק Cocos2d. למה אני שוקל רק אייפון? מכיוון שבזכות סדרת מאמרים על Unity, (לדוגמה:, או Playing like a Jetpack Joyride ב-Unity 2D) אתה כבר יודע איך לעבוד איתם ב-Unity, ומכתבים על Crafty (משחקי דפדפן: Snake) ואימפקט (מבוא ליצירת משחקי דפדפן על Impact) למדת איך להכניס אותם למשחקי דפדפן וליצור משחקי דפדפן.
אם אתה חדש ב-Cocos2D, או בפיתוח אייפון בכלל, אני מציע שתתחיל עם אחד מהמדריכים של Cocos2d ואייפון. אם מותקנים לך Xcode ו-Cocos2d, המשך לקרוא!
צור פרויקט חדש iOS → cocos2d v2.x → תבנית iOS cocos2d, קרא לזה PixelArt ובחר iPhone בתור המכשיר. גרור את אמנות הפיקסלים שנוצרה, לדוגמה: sprite_final.png לתוך הפרויקט שלך, ולאחר מכן פתח HelloWorldLayer.mוהחלף את שיטת האתחול בשיטה הבאה:
-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )
אנו ממקמים את הספרייט בצד שמאל של המסך ומסובבים אותו כך שהוא פונה ימינה. הידור, הרץ ואז תראה את הספרייט שלך על המסך:
עם זאת, זכור, כפי שדיברנו קודם במדריך זה, רצינו להגדיל באופן מלאכותי את הפיקסלים כך שכל פיקסל יהיה שונה באופן ניכר מהאחרים. אז הוסף את השורה החדשה הזו בתוך שיטת האתחול:
סולם גיבור = 2.0;
שום דבר מסובך, נכון? קומפיל, הרץ ו... רגע, הספרייט שלנו מטושטש!
הסיבה לכך היא שכברירת מחדל, Cocos2d משטחת את הציור כאשר הוא מרחיב אותו. אנחנו לא צריכים את זה, אז הוסף את השורה הבאה:
השורה הזו מגדירה את Cocos2d לשינוי קנה מידה של תמונות ללא התאמה, כך שהילד שלנו עדיין נראה "מפוקסל" קומפיל, הרץ ו... כן, זה עובד!
שימו לב ליתרונות של שימוש בגרפיקה של Pixel Art - אנחנו יכולים להשתמש בתמונה קטנה יותר ממה שמוצג על המסך, וחוסכים הרבה זיכרון מרקם. אנחנו אפילו לא צריכים ליצור תמונות נפרדות עבור תצוגות רשתית!
ומה הלאה?
אני מקווה שנהניתם מהמדריך הזה ולמדתם קצת יותר על אמנות פיקסלים! לפני הפרידה, אני רוצה לתת לך כמה עצות:
- נסה תמיד להימנע משימוש בנטייה, מעברי צבע או יותר מדי צבעים עבור הנכסים שלך. זה לטובתך, במיוחד אם אתה עדיין מתחיל.
- אם אתה באמת רוצה לחקות סגנון רטרו, בדוק את האומנות במשחקי קונסולה של 8 סיביות או 16 סיביות.
- סגנונות מסוימים אינם משתמשים בקווי מתאר כהים, אחרים אינם לוקחים בחשבון את ההשפעה של אור או צל. הכל תלוי בסגנון! בשיעור שלנו לא ציירנו צללים, אבל זה לא אומר שאסור להשתמש בהם.
למתחילים נראה כי Pixel Art היא הגרפיקה הקלה ביותר ללמידה, אך למעשה היא אינה פשוטה כפי שהיא נראית. הדרך הטובה ביותר לשפר את הכישורים שלך היא תרגול, תרגול, תרגול. אני ממליץ בחום לפרסם את עבודתך בפורומים של Pixel Art כדי שאמנים אחרים יתנו לך עצות - זו דרך מצוינת לשפר את הטכניקה שלך! תתחיל בקטן, תתאמן חזק, קבל פידבק ותוכל ליצור משחק מדהים שיביא לך הרבה כסף ושמחה!
טוען...
