12.09.2013

עיצוב מבוסס פיקסל

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

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

דוגמאות לעיצובים מבוססי פיקסל מושלם

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

1. דוגמה ראשונה – צלעות של פינות עגולות


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

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



2. דוגמה שניה – עיצוב כפתורים עם טקסט, בגדלים קטנים


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

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



3. דוגמה שלישית – עיצוב אייקונים קטנים


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

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



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

מאת: מארק אפרים, מעצב גרפי | 12.09.2013
כל המדריכים

מדריכים נוספים

12.08.2014 עיצוב אתר רספונסיב

עיצוב אתר רספונסיב

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

עיצוב אתר מנחה בניה

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

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

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

מעוניינים לקבל הצעת מחיר? נשמח לעמוד לשירותכם!

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

מלאו פרטים ונחזור אליכם

או חייגו 073-7955529