דילוג לתוכן

מצגות ותרגיל לשעור מס' 7

מרץ 16, 2011
שלום לכולם! 

המצגות של השיעור השביעי (פילטרים) זמינות להורדה כאן:
פווארפוינט
אקרובט PDF


בתרגיל של השיעור השביעי (והשישי) ניישם לראשונה את כל מה שלמדנו עד כה למטרה שלשמה הקורס הוקם!

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

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

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

להלן מספר קישורים של מודעות מרשימות ומעוררות השראה ללמוד מהן:

http://speckyboy.com/2010/11/09/30-powerful-and-compelling-public-awareness-print-ads/

http://speckyboy.com/2009/04/16/55-inspiring-creative-and-potent-ads-from-the-wwf/

http://www.infurmation.com/daf/2010/daf10.php

http://smashinghub.com/25-extremely-creative-advertisements-that-makes-you-look-twice.htm

ניתן למצוא תמונות בחיפוש התמונות של גוגל.

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

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

מצגות ו(ללא) תרגיל לשיעור מס' 6

מרץ 12, 2011

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

להלן המצגות של השיעור השישי, כולל המצגת של דנה שעסקה בטיפוגרפיה:
שיעור 6 בגרסת פווארפוינט
שיעור 6 בגרסת אקרובאט PDF
טיפוגרפיה

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

The Elements of Typographic Style Applied to the Web
Meet your Type: A field guide to typography

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

מצגת ותרגיל לשיעור מס' 5

מרץ 2, 2011

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

אבל קודם כל המצגת של השיעור להורדה:
Powerpoint
Acrobat PDF

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

אבל לפני שאתם ממהרים לשם, יש לנו את התרגיל שלנו לשיעור החמישי!

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

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

אז בתרגיל ניצור ציור על בסיס תמונה. להלן ההנחיות המתומצתות לתרגיל, כשההנחיות המפורטות נמצאות בפוסט נפרד.
1. הורידו ופיתחו את התמונה הזו, שבה תרנגולת ממשק.
2. בשכבה חדשה ציירו קווי מיתאר מסביב לתרנגולת בעזרת כלי ה-Path. צרו אזורים סגורים מסביב לאזורי צבע כדי שיהיה נוח לסמן אותם בעזרת מקל הקסמים או כלים אחרים.
3. מלאו בעזרת כלי הציור או מילוי הצבע את האזורים השונים בצבעים לפי רצונכם.
4. הוסיפו פרטים באמצעות כלי הציור, כגון נוצות, בליטות, הצללות וברקים, או כל פרט אחר שאתם רוצים להוסיף.
5. בשכבה נפרדת צרו גרדיינט של צבע מתאים מאחורי התרנגולת.
6. הוסיפו כל פרט אחר שנראה לכם מתאים או רלוונטי.

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

לגרסה המפורטת (צעד אחר צער) של תרגיל זה.

תרגיל לשיעור מספר 5 (כלי הציור) – גרסה מפורטת

מרץ 2, 2011

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

 

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

החלו לצייר קווי מיתאר מסביב לתרנגולת באמצעות כלי ה-Path.

לאחר שביססתם קווי מיתאר, העזרו באפשרות לצייר קו לפי הנתיב בעזרת אפשרות ה-Stroke Path. צרו קו ברוחב 5 פיקסלים.

וככה זה נראה לאחר Stroke של 5 פיקסלים מסביב לתרנגולת.

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

 

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

בצעו סלקציות בשכבת הקווים, ואז עברו לשכבת הצבע ומלאו אותן בצבע כראות עיניכם. היעזרו בכלי הציור, או שפשוט תמלאו את האזורים המסומנים בצבע באמצעות ה-Bucket fill או בעזרת תפריט Edit –> Fill with FG Color.

צרו שכבה חדשה מאחורי שכבת הצבעים של התרנגולת וקראו לה "Gradient".  בחרו צבעים מתאימים לקידמה ולרקע, בחרו את כלי ה-Blend מתיבת הכלים, ואז לחצו על כפתור הגרדיינט בתפריט שמתחת לתיבת הכלים וביחרו FG to BG . לבסוף מיתחו קו באלכסון על השכבה כדי לצייר אותו.

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

לסיום הוסיפו כל פרט נוסף שנראה לכם מתאים לסצנה, ושימרו שוב את הקובץ כקובץ גימפ (xcf)!

מצגת ותרגילים לשיעור הרביעי – נתיבים, שכבות

פברואר 24, 2011
אחרי השיעור הרביעי, אנחנו כבר יודעים ליצור מסמכים מרובי שכבות, לבצע שינויים ותיקוני צבעים, לסמן, לערוך, לחתוך ולהרכיב מחדש תמונות ויש לנו את היסודות של אמנות עיבוד התמונה! 

הנה המצגות של השיעור האחרון:
Powerpoint
PDF

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

להלן הנחיות התרגיל:
1. הורידו את תמונת הרקע הזו, פיתחו אותה באמצעות גימפ.
ליחצו לחיצה כפולה עם העכבר על השכבה בחלון השכבות, ותוכלו להקנות לה שם חדש. שנו את שמה ל"Base".
שכפלו את השכבה (מקש קיצור Ctrl J), והסתירו את ההעתק התחתון (ליחצו על העין לצד שכבה זו), שישמש כגיבוי לתמונה המקורית.
שנו את שם השכבה החדשה ל"Colors adjusted". ליחצו לחיצה אחת על השכבה כדי לסמן אותה ולהפוך אותה לפעילה.
2. שחקו עם כלי תיקון הצבעים שלמדנו כדי להקנות לתמונה אווירה אפלה וקודרת יותר:
נסו להוריד מעט את הרוויה,
להגדיל את הניגודיות,
להחשיך את את התמונה קלות,
ואולי להוסיף גוון צהבהב \ ירקרק קל לתמונה.
3. שכפלו את השכבה. הסתירו את ההעתק הנמוך יותר, שישמש גיבוי, שנו את שם ההעתק החדש ל-"Sky Erased" ושימרו את המסמך.
4. וודאו שהשכבה העליונה והחדשה ביותר מסומנת, והוסיפו לה ערוץ אלפא בעזרת התפריט:
Layers –>  Transparency –> Add Alpha Chanel
5. סמנו את השמיים בתמונה בעזרת מקל הקסמים, הנתיבים, בחירה לפי צבע וכל כלי אחר שנוח לכם לעבוד איתו. שימו לב לאזורים העדינים לסימון ליד עצי הדקל והעלים שלהם. אם משתרבבים לבחירה שלכם אזורים לא רצויים הורידו אותם מהבחירה באמצעות "הפחתה מבחירה" (מקש Ctrl בזמן הפעלת בחירה).
הוסיפו Feather של 5 פיקסלים ולבסוף מיחקו את השמיים.
6. ביחרו את השמיים הקודרים העדיפים עליכם מבין האפשרויות הבאות:
אפשרות1
אפשרות2
אפשרות3
7. הוסיפו את השמיים שנבחרו כשכבה לתוך המסמך שלכם ע"י גרירה של הקבצים לתוך גימפ, או בעזרת הפקודה בתפריט:
File –> Open as Layers
8. שנו את שם השכבה ל-"Sky", והזיזו אותה למטה כך שייראו את השמיים החדשים מאחורי החלק שנמחק בתמונה הקודמת. אם צריך שנו את הגודל של השכבה באמצעות כלי ה-scale או התפריט Layers –> Scale Layer
9. אם יש בעיה בהתאמת הצבעים בין השמיים ברקע והאלמנטים של המלון והבריכה והיתר בקידמה כך שהתמונה נראית לא הגיונית, בצעו תיקוני צבע על השמיים כדי שיסתדרו טוב יותר עם הניגודיות, הגוון, והבהירות של האלמנטים בקידמה.
10.עכשיו אנחנו מתחילים להיות יצירתיים!
למטה תמצאו מגוון טקסטורות להורדה. חלק מהן מציגות מתכת הרוסה, בקעים, כתמים שונים, לכלוך וקורוזיה. אנחנו נעזר בהן כדי לגרום למבנים ולאלמנטים בתמונה להיראות יותר שחוקים, בלויים, הרוסים ומעניינים.
לכלוך: 1, 2
בקעים: 1, 2, 3
כתמים: 1, 2, 3, 4, 5
קורוזיה

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

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

11. כשהגעתם לתמונה מעניינת שאתם מרוצים ממנה, שמרו את הקובץ כקובץ גימפ (סיומת xcf), ואחר כך גם כקובץ jpg (בחרו export בחלון שקופץ כשמבקשים לשמור כ-jgp) ושלחו לי את תוצאותיכם.

מצגת ותרגילים לשיעור 3: המשך תיקוני צבע ובחירות

פברואר 16, 2011

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

להלן המצגת של שיעור מס' 3 להורדה:
Powerpoint
Acrobat PDF

ראינו איך אפשר להפוך את הצבעים באמצעות פקודת ה-Invert, שנמצאת בתפריט Colors.

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

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

והתרגילים לשיעור 3 מפורטים כאן:

1. נסו לפתור את התרגילים של השיעור הקודם (סעיפים 1-6) באמצעות כלי ה-Levels

2. הורידו את תמונת הנוף הזו.
3. סמנו במרכז השמיים סימון בצורת חור מנעול (שילוב של צורת עיגול ומלבן), שקצותיו מרוככים קלות (feather של 5 פיקסלים).
4. וודאו שצבע הקידמה שלכם שחור (אם שכחתם מה זה, ליחצו כאן), ואם לא, ליחצו על מקש האות "D" במקלדת כדי להחזיר אותו לשחור.
המקש D מחזיר את הצבעים לברירת המחדל (Default), שהיא צבע קידמה שחור וצבע רקע לבן, וזהו המקור לקיצור!
5. עתה מלאו את הבחירה בצבע שחור, באמצעות תפריט Edit –> Fill with FG Color או באמצעות מקש הקיצור Ctrl + ,

6. הורידו את התמונה הזו למחשב שלכם.
7. ביחרו את המעגלים הכתומים בלבד באמצעות כלי הבחירה לפי צבע.
8. בטלו את הסימון באמצעות הקיצור Ctrl + Shift + A, והגדילו את הסף ונסו שוב עד שגם העיגולים האדומים יסומנו כאשר בוחרים את אחד מהעיגולים הכתומים, אך מבלי שגם העיגולים הסגולים ייבחרו.
9. ליחצו על צבע הקידמה וביחרו צבע כלשהו שחביב בעיניכם, ואז מלאו את הבחירה בצבע זה כפי שתואר בסעיף 5.

10. ועתה לתמונה זו!
11. היעזרו בכלי מקל הקסמים ו\או בבחירה לפי צבע כדי לסמן את השמיים בתמונה.
12. רככו את הבחירה באמצעות הפקודה בתפריט Select –> Feather (רצוי לרכך ב-10 פיקסלים לפחות).
13. הקנו לשמיים גוון כחול עמוק יותר באמצעות הכלי Colors –> Colorize, ושינוי בגוון (Hue) ואולי גם ברוויה ובבהירות.
14. עתה ביחרו את כל שאר התמונה מלבד השמיים באמצעות כלי היפוך הבחירה (Invert), בעזרת הפקודה בתפריט Select –> Invert או מקש הקיצור Ctrl + I.
15. הפכו את הצבעים בתמונה באמצעות הפקודה Colors –> Invert.

תודו שזה מגניב 🙂

השיעור ליום ראשון הקרוב (מס 3) נדחה לשבוע הבא!

פברואר 3, 2011
שלום,

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

עקב עומס עבודה חריג ובלתי צפוי שהותרע בפני עליו לקראת יום א' הקרוב, נאלץ לדחות את השיעור הבא (שיעור מספר 3),
שאמור היה להתקיים ביום א' הקרוב, ה-6 בפברואר 2011.

השיעור יתקיים במקום ביום ראשון שאחרי, ב-13 לפברואר 2011.

עמכם הסליחה,

VeggieGraphics

מצגות ותרגילים לשיעור השני!

פברואר 2, 2011
אמנם באיחור, אך מוטב מאוחר :-)למי שפספס\ה, השיעור השני עסק בצבעים.
דיברנו קצת על תאוריית הצבע, ועל מודלים שונים של צבע.
המודל הנפוץ והמקובל ביותר, מודל ה"RGB" שדיברנו עליו גם בשיעור הקודם,
מודל הצבע המקובל בדפוס, CMYK,
מודל הצבע המבוסס על גוון, רוויה ובהירות – HSV,
ועל צבע מפחית וצבע מתסף.

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

ראינו איך אפשר להקליד בגימפ ערכי RGB או HSV,
או לבחור צבע ידנית בעזרת כמה מהאפשרויות הנגישות ב-Color Picker,
ואפילו לבחור בעזרת גלגל צבעים פנימי.

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

והתרגיל לשיעור השני:
1. הורידו את התמונה הזו.
2. לתמונה יש ניגודיות נמוכה ובהירות נמוכה מדי. תקנו את הבעיה באמצעות כלי ה-Brightness-Contrast
3. עתה הורידו את התמונה הזו.
4. תמונה זו חשוכה מדי. נסו לתקן אותה באמצעות הכלי הקודם, ובאמצעות עקומות הצבעים.
5. ועכשיו לתמונה הזאת!
6. הצבעים של התמונה בבירור התקלקלו. נסו לתקן אותם באמצעות כלי ה-Color Balance
7. בנפרד, נסו לתקן את הצבעים באמצעות כלי ה-Hue-Saturation
8. והתמונה האחרונה לתרגיל זה, היא זו.
9. הפעם הבחירה בידיים שלכם, שחקו עם הכלים השונים בתפריט Color עד שיצא לכם אפקט מגניב כלשהו שאתם רוצים לחלוק, ושילחו לי את התוצאה 🙂

סיכום ותרגילים לשיעור הראשון

ינואר 25, 2011

שלום לכולם!

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

ניתן להוריד את המצגת של השיעור הראשון כאן.

PDF
Powerpoint

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

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

1. ראשית הורידו את התמונה הזו, שימרו אותה על המחשב שלכם ופיתחו אותה ב-GIMP
2. מהי הרזולוציה של התמונה (מספר הפיסקלים לאורך ולרוחב)?
3. הקטינו את גודל התמונה ל- 25% מגודלה המקורי, בעזרת אינטרפולציה מסוג cubic
4. עתה הגדילו בחזרה את התמונה ל-400% מגודלה (מחזיר לגודל המקורי), בעזרת אינטרפולציה מסוג None
5. האם התמונה שמרה על איכותה? האם נוצרו ארטיפקטים בעייתיים כלשהם (בעיות כגון טשטוש, גרעיניות, בעיות צבע וכו')?
6. סובבו את התמונה ב-90 מעלות נגד כיוון השעון
7. בצעו היפוך אופקי של התמונה.
8. סמנו בעזרת כלי הבחירה המלבנית (rectangular selection tool) בתיבת הכלים את העץ הקטן שנמצא במרכז התמונה, וגיזרו (crop) את התמונה כדי שרק החלק המסומן יופיע.

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

רקע בסיסי ומונחי יסוד בעיצוב גרפי

ינואר 25, 2011

להלן כמה מושגי יסוד ונושאי רקע בעיצוב גרפי שדיברנו עליהם בשיעור הראשון:

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

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

ערוצים ועומק צבע (color depth)עם המידע על מיקומם, פיסקלים אוצרים מידע על איך להציג צבעים. מסך מחשב יוצר צבע ע"י מיזוג של אדום, ירוק וכחול. אם פיקסל הוא 100% אדום המעורבב עם 0% כחול ו-0% ירוק, הוא נראה אדום. אם הוא מורכב מ-50% אדום, 50% כחול ו-0% ירוק, הפיסקל ייראה סגול. כשכל הערכים ב-0%, זה יהיה שחור, וכשכולם ב-100%, זה יהיה לבן.

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

תמונת RGB אוצרת מידע על אדום, ירוק וכחול. המידע מחולק ל-3 ערוצים (לכל צבע), וכל ערוץ אוצר את הערכים (או האחוזים) של כל אדום, ירוק וכחול בכל פיקסל. הערך הגבוה ביותר שכל ערוץ יכול לקבל הוא 255 והערך הנמוך ביותר הוא 0.

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

עומק צבע מתייחס לכמה מידע משמש בכל אחד מערוצי הצבע הללו. מחשבים נעזרים בביטים כדי לאגור מידע. תמונת RGB בעומק צבע של 24-ביט מתשמשת ב-8 ביט של מידע לכל ערוץ (3 כפול 8 = 24). כל ערוץ של 8 ביט אוצר 256 גוונים של צבע, וזה מאפשר לתמונה בסה"כ 16 מיליון צבעים. תמונת RGBA של 32-ביט משתמשת בעוד 8 ביט עבור ערוץ האלפא.

במדיות מתקדמות לרוב משתמשים בפי 2 מידע, כלומר 16 ביט לערוץ, או 48-ביט צבע (64 ביט כולל אלפא).

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

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

רזולוציית המסך – זה מספר הפיקסלים המרובעים שמופיעים על המסך, כפי שנמדד לאורך ולרוחב. משמע, מספר הפיקסלים הזמינים לרוחב כפול מס' הפיקסלים הזמינים לגובה. רזולוציות נפוצות הן למשל 640×480, שהתאימה למסכים ישנים; 720×486, שזה NTSC (פורמט הטלוויזיה בארה"ב) ו– 1920×1080 – תקן HDTV.

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

נקודות לאינץ' (DPI) לעיתים משמש לייצג את הרזולוציה של המסמך (לפעמים זה מכונה גם PPI, או פיקסלים לאינץ'). תמונה המוצגת על מסך מחשב ב-100% מהרזולוציה שלה היא לרוב בצפיפות של 72dpi. תמונה שמיועדת להדפסה צריכה להיות ברזולוציה גבוהה יותר, של 300dpi.