Css art או: איך בגיל 32 למדתי סוף סוף לצייר

זמן קריאה: 9 דקות

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

יש לכן חברות דוברות אנגלית? הן יכולות לקרוא את הפוסט כאן!

למען האמת, אני כל כך גרועה בציור, שבתחילת הקורונה, כשכולם שיחקו ב-Draw Something אני פתחתי ערוץ בסלאק המשרדי שבו חלקתי את הציורים המזעזעים שלי, למטרות העלאת המורל. a.k.a “אולי אנחנו תקועים בבית ומטפסים על הקירות, אבל לפחות אנחנו מסוגלים לצייר בית”. 
רוב הזמן הרגשתי בסדר גמור עם החוסר הספציפי הזה. לכולנו יש חולשות וחזקות, ואין לי סיבה להתלונן. אבל אז, לפני שבוע, נחשפתי ל-css art.

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

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

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

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

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

אז איך מתחילות?

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

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

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

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

• 

• 

• 

• 

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

1. הדבר הכי חשוב ביצירת css art הוא מיקום נכון של אלמנטים אחד בתוך השני בצורה שתקל עליכן. לדוגמא, במקרה של הפינגווין, האישונים הלבנים הם אלמנטים בתוך העיניים השחורות, ולכן הם ממוקמים ביחס אליהן. כשהעיניים זזות הם זזים איתן. זה מאוד מקל על המשחק עם העיצוב, וחוסך ממך לשנות מיליון אלמנטים כל פעם.
2. אל תתעכבי על העיצוב המושלם של כל פרט ופרט. עדיף לרוץ קדימה ולהשאיר את המשחק עם הפרופורציות והצבעים לסוף, כשיש לך את התמונה המלאה. הרבה יותר קל להבין ככה מה עובד ומה לא.
3. כל האלמנטים בציורי css הם מרובעים או מעגלים. אם את רואה משהו שנראה מורכב – למשל הפרצוף של הפינגווין שלי שנראה קצת כמו לב – זה סימן שהוא משלב כמה אלמנטים. כדאי לחשוב מראש על הצורות הבסיסיות שתרצי להשתמש בהן, ולהבין עד כמה הן מורכבות. שאפתנות זה אחלה, פשוט צריך לדעת מראש שבחרנו בפרויקט שאפתני. 
4. פשוט תתחילי ואל תפחדי, זה כיף וקל יותר ממה שזה נראה!

לסיכום – רעיון לפרויקט

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

• 

• 

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

1. יש פיצ’ר ב-css בשם clip path. שימוש ב-clip path מאפשר ליצור מגוון פסיכי של צורות ב-css, והיה חוסך לי בערך שעתיים עבודה על יצירת המצולע שלי. גל המליץ לי על האתר הזה שהוא משתמש בו, ואני בהחלט אנצל אותו בציור הבא שלי.
   *בדיעבד, ההסבר על clip path הופיע גם בדקות האחרונות של השיעור אליו קישרתי למעלה, ואני פרשתי קצת לפני. אופס 😛 לקח חשוב – תצפו בשיעורים עד סופם.
2. יש בגיטהאב מאגר של לוגואים של חברות שצוירו ב-css. אני חושבת שזה רעיון ממש מגניב, אני כל כך אוהבת שאנשים יוצרים פרויקטים שמעודדים את כולם להיות יצירתיים יותר.
   אני מציעה לכל אחת שקוראת את הפוסט הזה ומחפשת רעיון לציור מעניין ב-css לנסות וליצור את הלוגו של החברה שלה ולהכניס אותו למאגר, יש עוד כל כך הרבה חברות שלא מיוצגות שם!

בהצלחה לכולן!