graphicool graphicool
  • Home
  • Portfolio
  • Blog
  • Bio
  • Contact
  • Home
  • Portfolio
  • Blog
  • Bio
  • Contact
We WordPress
pixel perfect – על כמה מורכב יכול להיות אייקון קטן אחד
ראשי » בלוג » pixel perfect – על כמה מורכב יכול להיות אייקון קטן אחד
21 בינואר 2016

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

לפניכם שני אייקונים. האחד ״יושב על הפיקסל״ והשני לא. הפיקסלים הם המשבצות הקטנות שבגריד מאחורי האייקון. אם תשימו לב, האייקון האדום הוא דוגמא לאייקון שלא יושב על הפיקסל. ניתן לראות לפי הגריד שהוא לא מתחיל בנקודת פיקסל שלמה ולא מסתיים בנקודה שלמה. התוצאה של זה הוא אייקון שנראה מטושטש כאילו עשו לו קצת blur בקצוות. לעומתו, האייקון הירוק יושב על הפיקסל בצורה מדוייקת. כשיוצרים אייקונים ש״יושבים על הפיקסל״, נמנע המצב הזה שהקצוות של האייקון מטושטשות בצבע אחר, חצי שקוף כזה, מה שיוצר את ה-blur. שימו לב כיצד האייקון נראה בהגדלה:
pixel-perfect_2
אז איך מגיעים לתוצאה הרצויה?
צריך לעבוד בתוכנה שמאפשרת דיוק של הווקטור ברמת הפיקסל. אני מוצאת את סקצ׳ הכי נוחה, אבל גם אילוסטרייטור, אינדיזיין או פוטושופ מסוגלות להגיע לדיוק הזה. חפשו את הכלי snap to pixel.

רגע, מה עושים אם יש לי עיגול? הרי ברור שלא נצליח למקם עיגול על פיקסל שלם! – מדייקים את מה שכן ניתן. עובדים במספרים שלמים, גם עיגול מלא יכול לשבת על הפיקסל. אם גודלו שגודלו הוא 10 על 10, והוא יושב על גריד של 12 על 12 נניח, ומתחיל מהנקודה x=1 y=1. לעומת זאת, אם תיצרו עיגול שקוטרו 9.78 פיקסל, ותמקמו אותו בנקודה x=1.5 y=0.34 אז הוא ייצא יותר מטושטש בקצוותיו.

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

אהבתם? Sharing is Caring
  • Pin It
« הקודם
הבא »
קטגוריות
  • black friday
  • ui
  • בלוג
  • הדרכות
  • השראות
  • חינמים
  • כללי
  • סקירת מוצרים ומבצעים
  • עיצוב אתרים
  • עיצוב גרפי
  • קהילת המעצבים בפייסבוק
לא תשתוק
Advertising Materials – PlainId
Branding Materials for PlainId
email template series
StudioKa- Responsive Website
On-Boarding Tutorial- Fusion 360 App
Do On Spot- Android App design
Studioka – Branding
A360 Introduction Tutorial
checkout form
Hot Deals
נרשמים ומקבלים כסף בחזרה על קניות באינטרנט: Ebates Coupons and Cash Back
תוכנות שימושיות למעצבים/מתכנתים/אנשי תוכן ומאפיינים:
גלילה לראש העמוד