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