Pixel art למתחילים: הוראות שימוש

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

Фон

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

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

Metal Slug 3 (ארקייד). SNK, 2000

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

באופן כללי, הזהרתי אותך.

ועכשיו קצת על הסגנון שלי: אני מצייר בעיקר פיקסלים למשחקי וידאו ומוצא בהם השראה. במיוחד, אני מעריץ של Famicom/NES, קונסולות 16 סיביות ומשחקי ארקייד משנות ה-90. ניתן לתאר את אמנות הפיקסלים של המשחקים האהובים עליי בתקופה בהירה, בטוחה ונקייה (אך לא נקייה מדי), במקום חדה ומינימליסטית. זה הסגנון שאני עובד בו בעצמי, אבל אתה יכול בקלות ליישם את הרעיונות והטכניקות מהמדריך הזה כדי ליצור דברים שונים לגמרי. חקור את עבודותיהם של אמנים שונים וצור אמנות פיקסלים שאתה אוהב!

תוכנה

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

צבע (חינם)

אם יש לך Windows, ה-Paint המובנה היא תוכנית פרימיטיבית, אבל יש לה את כל הכלים לאמנות פיקסלים.

פישקל (בחינם)

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

GraphigsGale (בחינם)

GraphicsGale הוא העורך היחיד ששמעתי עליו שתוכנן במיוחד לאמנות פיקסלים וכולל כלי אנימציה. הוא נוצר על ידי חברת HUMANBALANCE היפנית. זה זמין בחינם מאז 2017 ועדיין מבוקש, למרות העלייה בפופולריות של Aseprite. למרבה הצער, זה עובד רק על Windows.

אספרייט ($)

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

סטודיו GameMaker 2 ($$+)

GameMaker Studio 2 הוא כלי דו-ממדי מצוין עם עורך Sprite טוב. אם אתה רוצה ליצור פיקסלים למשחקים שלך, זה מאוד נוח לעשות הכל בתוכנית אחת. עכשיו אני משתמש בתוכנה הזו תוך כדי עבודה עב"מ 50, אוסף של 50 משחקי רטרו: אני יוצר ספרייטים ואנימציות ב-GameMaker, וערכות אריחים בפוטושופ.

פוטושופ ($$$+)

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

אחר

ערכת הפיקסלים שלי. הכל שחור, רק עכשיו שמתי לב לזה.

טאבלט גרפי ($$+)

אני ממליץ על טאבלטים גרפיים לכל עבודת המחשה דיגיטלית כדי להימנע מתסמונת התעלה הקרפלית. הרבה יותר קל למנוע מאשר לרפא. יום אחד תרגישו כאב והוא רק יגבר – שמרו על עצמכם כבר מההתחלה. מכיוון שפעם ציירתי עם עכבר, אני מתקשה לשחק במשחקים שדורשים ממני ללחוץ על מקשים. אני משתמש כרגע ב-Wacom Intuos Pro S.

תמיכת פרק כף היד ($)

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

96 × 96 פיקסלים

קרב סופי. קאפקום, 1989

בואו נתחיל! נתחיל עם ספרייט דמויות בגודל 96x96 פיקסלים. כדוגמה, ציירתי אורק והנחתי אותו על צילום מסך מ-Final Fight (תמונה למעלה) כדי שתוכלו להבין את קנה המידה. זֶה большой ספרייט עבור רוב משחקי הרטרו, גודל צילום מסך: 384x224 פיקסלים.

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

1. בחר פלטה

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

עבור הדרכה זו אשתמש בפלטת 32 הצבעים שיצרנו עבורה עב"מ 50. עבור פיקסל ארט הם מורכבים לרוב מ-32 או 16 צבעים. שלנו מיועד לקונסולה בדיונית שתופיע איפשהו בין Famicom לבין PC Engine. אתה יכול לקחת את זה או כל אחר - ההדרכה לא תלויה בכלל בפלטה שנבחרה.

2. קווי מתאר גסים

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

3. שכלול קווי מתאר

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

אי סדרים

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

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

דוגמאות:

ישיר

עיקולים

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

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

4. החל את הצבעים הראשונים

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

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

5. הצללה

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

צורה ונפח

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

אנטי-aliasing (anti-aliasing)

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

פיקסלים אפורים מרככים את ה"הפסקות" בקו. ככל שקטע הקו ארוך יותר, קטע ה-AA ארוך יותר.

כך נראה AA על כתפו של אורק. זה נחוץ כדי להחליק את הקווים המציגים את עקומת השרירים שלו

אסור להרחיב את ה-anti-aliasing מעבר ל-sprite שישמש במשחק או על רקע שצבעו לא ידוע. לדוגמא, אם תחיל AA על רקע בהיר, ההגנתי ייראה מכוער על רקע כהה.

6. מתאר סלקטיבי

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

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

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

7. נגיעות אחרונות

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

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

יצירת רעש (שיטוט, שיטוט)

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

שיפוע הכהה לבהיר העליון משתמש במאות גוונים שונים של כחול.

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

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

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

אם אתם רוצים לראות דוגמה לדיטה בקנה מידה גדול ואיכותי, בדוק את המשחקים של The Bitmap Brothers, אולפן בריטי משנות ה-80, או את המשחקים במחשב PC-98. רק זכור שכולם NSFW.

Kakyusei (PC-98). Elf, 1996
בתמונה זו יש רק 16 צבעים!

8. מבט אחרון

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

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

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

32×32 פיקסלים

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

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

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

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

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

כל הצוות מורכב!

פורמטים של קבצים

תוצאה זו יכולה לגרום לכל אמן פיקסל לעצבן

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

כדי לשמור תמונה סטטית מבלי לאבד איכות, השתמש בפורמט PNG. לאנימציות - GIF.

כיצד לשתף כראוי אמנות פיקסלים

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

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

טויטר

כדי לשמור על קובץ PNG ללא שינוי בטוויטר, השתמש בפחות מ-256 צבעים או לוודאשהקובץ שלך הוא פחות מ-900 פיקסלים בצד הארוך ביותר. הייתי מגדיל את גודל הקובץ ל-512x512 פיקסלים לפחות. וכדי שהקנה מידה יהיה כפולה של 100 (200%, לא 250%) ונשמרים קצוות חדים (Nearest Neighbor בפוטושופ).

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

אינסטגרם`

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

מקור: www.habr.com