pixels& OTHER TECH STUFF

Week 01

When you view an image on a digital device (computer monitor, cell phone, projector, etc.), it has a tendency to look continuous. It is Not. It is comprised of tiny dots that blur to create a seamless effect.

A “pixel” is the singular basic unit of color on a computer display.

The name comes from “picture element”. Your average display has thousands (closer to millions) of pixels.

Pixels are dots

The pixels that comprise a digital image or display, work on a grid.

Think of a pixel as more of a conceptual value than a physical thing.

A bitmap is a way of describing the color of each pixel as it sits on the grid.

The grid is called a raster.

“Bitmap” or “raster” can be used interchangeably

Bitmap and raster

The amount of pixels per inch is called “resolution”

Resolution is what gives digital images their clarity.

More dots per inch equals gives an image finer visual display characteristics.

Each pixel can have it’s own color value.

Bitmap and raster

Zoomed in you can see the pixels

Bitmap and raster

We’ll be looking at lots of pixels in Photoshop!

It’s the amount of pixels per inch

“low-res” or screen images, (where the intended output of the finished work is meant to be viewed on screen), are typically 72 dpi.DPI stands for Dots Per Inch

“hi-res” means high resolution. Typically 300dpi

resolution

Have you ever …

seen an HD TV

Wondered what “retina” display is on an iPhone

Been curious to why your Android has really clear pictures

Printed a photo from the internet and noticed how blurry it is compared to on screen.

-- it’s primarily due to resolution.This will become readily apparent when we dive into Photoshop

resolution?

squint

Let’s talk about color

yum

Additive combines

Reflective subtracts

So, if each pixel can be a different color, how does that work?Let’s back up a bit.

Light & the human eyecolor

There are 2 core ways of seeing color. This depends on how the color is generated and from what medium.Additive: the light emanates from source.i.e. a computer displayReflective: the ambient light reflects from a surface and then enters your eye.i.e. printed material

RGBRed Green Blue

CMYKCyan MagentaYellow Black

We will stay primarily focused on additive or “screen” colors for now, as we be working in Photoshop soon.Every pixel on your computer display is a composite of red, green, and blue points.You get the “final” color by a combination of the rgb light.

color

RGB: all colors add up to white CMYK: all colors add up to black (in theory anyway)RGB images are typically used in web design, mobile apps, computer and kiosk displays in stores. Anything that uses a “screen” to see the image.

color

Note the overlap of colors and what is produced

Rule of thumb

RGBscreen

CMYKprint

We will stay primarily focused on additive or “screen” colors for now, as we be working in Photoshop soon.Every pixel on your computer display is a composite of red, green, and blue points.You get the “final” color by a combining the RGB lights.There are over 16 million color possibilities in RGB

color

RGB: all colors add up to white CMYK: all colors add up to black (in theory anyway)Grayscale: the gray values between black and white

blankNote that CMYK is not equivalent to

paint

There are a myriad of other ways to specify colorsHSB: Hue Saturation BrightnessThere’s also LAB and HEX.We will stay focused on RGB and CMYK for this course

images & color thoughtsmore

More color info:http://

helpx.adobe.com/en/photoshop/using/color-modes.html

Color adds life

fin