Visual Screen Design

Week 5 - Images

Instead of just recording reality, photographs have become the norm for the way things appear to us, thereby changing the very idea of reality and of realism Susan Sontag

emiel.ruis@han.nl @mastermiel

Images

Definitions Composition and design Stock Photography Trends

Definitions

Aspect Ratio

The aspect ratio indicates how the height and width of an image relate to each other.

Definitions

Megapixel
The resolution of a digital camera is shown in megapixels.? A megapixel is 1 million pixels (picture element). Each pixel has a color, which is determined by the amount of green, red and blue (RGB) in the pixel. You can calculate the number of megapixels by myltiplying the number of horizontal lines with the number of vertical ones. A camera taking pictures with a resolution of 2000 x 1500 pixels thus has a resolution of 3 megapixels.

Definitions

File formats JPEG - Joint Photographic Experts Group The higher the quality, the larger the file. Files are compressed with loss. TIFF - Tagged Image File Format Suitable for storing your original (unedited / uncompressed) photos. PSD - Photoshop Suitable for edited photos to save; channels, layers, paths, text, and sound clips. PDF - Portable Document Format By virtually anyone using free Adobe Acrobat Reader to open.

Definitions

File formats RAW Contains raw information so that more control over the end result. GIF - Graphics Interchange Format Up to 256 colors, suitable for animation and transparency. PNG - Portable Network Graphic Larger than JPEG, supports transparency. EPS - Encapsulated PostScript Vector graphics.

Definitions

Colour cast We talk of a color cast when a certain shade of the picture covers the picture. This is especially common in photos taken in artificial light or scanned photos .

Definitions

histogram

The histogram is a representation of the distribution of tones in an image. The color intensity is shown at every level. The horizontal axis goes from dark to light while the vertical axis shows the number of pixels in range.

Definitions

Backlight

When the subject is between the camera and the light source, we speak of backlighting. The subject is backlit and thus, only the outline of the object is visible.

Definitions

Skimming light

Skimming light is light that is skims from the side on the subject. The light usually has a low position like a setting or low sun.

Definitions

fill

A fill flash is a flash output used to light up a dark part of a picture. In a portrait with backlighting a fill flash can be used to light the face.

Definitions

contrast

In photography, this term refers to relationships between bright and dark elements in the picture.

Definitions

Aliassing
The angular, jagged edges in the display of images with low resolution caused by the square shape of pixels.

Definitions

Definitions

Aperture

The aperture is a kind of screen, with adjustable opening between lens and the shutter. Light falls through the aperture on the sensor. The larger the aperture, the more light per time unit hits the sensor. The size of the opening is measured in f-numbers (f-stops).

Definitions

Shuttertime

A shutter is a kind of trap door that opens during the recording for the light to pass through. The time that the shutter is open and therefore how long the exposure time depends on the film speed. The shutter speed is calculated in (Fractions of) seconds: 5 seconds, 1/4 second, 1/60 second, 1/1000 second, etc.

Definitions

Shutter speed or exposure time

It is the amount of time that describes how long a lightsensitive plate or other light-sensitive element is exposed to a certain amount of light.

Definitions
Lens / Lenses Standard (50mm) A standard lens is approximately equal to the image that the human eye sees. Wide (<28mm) With a wide angle lens (wide angle), you can capture much of the area. Fish-eye With a fish-eye lens you can take a picture when everything at an angle of almost 180 degrees to see. Tele (> 100mm) With telephoto lenses you far away subjects closer to you.

Macro With a macro lens you subject very close to capture.

Definitions

Depth of Field

The distance between the closest object and the most distant object in a picture that still acceptable sharpness. The depth depends on the chosen aperture and focal length of the lens.

Definitions

Close up For a close up photo a specific part of the subject is brought forward very strongly. The rest of the area is ignored and only the subject is strongly zoomed mapped.

Definitions

X-Y-Z dimensions

Composition and design

"Your first 10,000 photographs are your worst" Henry Cartier-Bresson

Composition and design

Composition Planning of parts to a whole. The composition is a key concept for making beautiful pictures. It refers to how the various elements in the picture relate to each other and to the frame.

Composition and design

Cropping
The reduction and the focusing of an image? By the trimming of the edges.

Composition and design

Plaatsing
Bij het plaatsen van een beeld is bewust kijken belangrijk. Op het moment dat men rest ruimte toepast, wordt de plaatsing van een voorwerp een factor van belang.

Composition and design

Rule of thirds
Divide the composition into thirds. Aligning a photograph with these points, surfaces or lines creates more tension, energy and attention in the composition than simply centering.

Composition and design

Horizon

Prefer the air or just ignore it. Somewhere there is a natural balance (rule of third).

Composition and design

Dynamic tension
Diagonals create energy, rhythm creates momentum and activity, offcenter objects create tension.

Composition and design

Perspective and depth

Perspective is experiencing objects in a space, and their relationship to each other and the viewer.

Stock Photography vs. photographer

Advantages and disadvantages

Many stock sites Speed / accessibility / retrievability Aloof / cold / Unique and exclusive / multiple users Expensive / cheap Limited possibilities of application time Factor Cost Model / Make-up / Styling / Studio or location / Props

Stock Photography
RM Rights managed RF Rights free Cost is determined by: Purpose / placement / amount / home abroad / duration Getty (http://www.gettyimages.nl) Spring (www.veer.com) Corbis (www.corbis.com) Masterfile (www.masterfile.com) Fotolia (www.fotolia.com) Phovoir (http://www.phovoir.com/collector.php) Shutterstock (http://www.shutterstock.com) Flickr (http://www.flickr.com/) StockXchng (http://www.sxc.hu/) Free digital photos http://www.freedigitalphotos.net/ English (http://www.vertalen.nu/) Synonyms (http://synoniemen.net/)

Images

"Which of my photographs is my favorite? The one I'm going to take tomorrow. Imogen Cunnigham

Spicing classical slideshow patterns

Such navigation effects as carousel or grid are probably the most common patterns in photography portfolios. They enable users to quickly skim through all available photos without digging the whole website over. Although simple slideshows are the most common work showcasing techniques, many photographers make them look unique by mixing effects and adding some featured elements to them.

Spicing classical slideshow patterns

http://www.joshuastearns.com/%23/grid

Spicing classical slideshow patterns

http://www.coreyfishes.com/%23/fish-work-bering-sea/

Spicing classical slideshow patterns

http://www.ciriljazbec.com/

Spicing classical slideshow patterns

http://www.bergh.dk/

Spicing classical slideshow patterns

http://www.vilamajo.com/

Spicing classical slideshow patterns

http://filippasmedhagensund.com/

Huge photographs

Images are the main content on photography websites. More and more photographers prefer not to waste the space on featured background and big layout elements making the photos dominate on the screen, in some cases website is loaded full screen automatically.

Huge photographs

http://www.evaankheraj.com/

Huge photographs

http://www.brook-pifer.com/

Huge photographs

http://www.timothy-hogan.com/

Unusual effects and navigation

Non-typical alignment This is not completely a trend as we found just a few galleries with right/left aligned photographs, but this is a quite interesting practice worth to be mentioned.

Unusual effects and navigation

http://www.eastphotographic.com/

Unusual effects and navigation

Extraordinary navigation Besides featured common navigation patterns listed above, we noted many portfolios using totally unique and sometimes gimmicky navigation techniques. Here are some cool examples:

Unusual effects and navigation

http://www.egofoto.net/

Unusual effects and navigation

Accordion Accordion is perfect for designing a minimalist contentoriented website (which photography portfolio certainly is), still only a handful of photographers use this technique for their personal galleries.

Unusual effects and navigation

http://www.paultorres.net/

Photo motion

The effect of slight photo movement is among the recent trends. It is good for viewing large images and in many cases user can turn off the movement to see the static shot.

Photo motion

http://www.carlosalonsobodas.com/

Photo motion

http://www.smetana.net/

Big typography

Big type rocks modern web design. It is everywhere, and photography websites are not an exception.

Big typography

http://www.javierferrervidal.com/

Big typography

http://www.tomnagy.com/

Unusual thumbnail gallery

Our research shows that thumbnail gallery is one of the most popular site areas where designers implement their creative ideas. Adding some unique style to thumbs zone makes the website more attractive and interactive without accessibility sacrifice.

Unusual thumbnail gallery

http://www.werkstette.dk/

Unusual thumbnail gallery

http://www.jamesdayphoto.com/

Unusual thumbnail gallery

http://www.seohiroshi.com/

More text

Naturally, photos are the main content filling on photography websites, but we noticed that more photographers now use verbal form along with visual to communicate with the visitors. Blogs, tutorials, comprehensive descriptions of photo categories and single shots became quite popular in photo portfolio design. The more text on the website, the better it is for SEO and profile building, probably these are the main reasons for this trend.

More text

http://timothyallen.blogs.bbcearth.com/

More text

http://www.jansochor.com/

Simplicity & Minimalism

This trend can be called eternal, as minimalist style has already become classical in photography website design. Clean layout, quick access to the content, easy navigation are crucial to this kind of personal portfolios and the lions share of photographers stay loyal to this style.

Simplicity & Minimalism

http://album.alexflueras.ro/

Simplicity & Minimalism

http://www.chrisphelps.com/

Simplicity & Minimalism

http://www.levonbiss.com/

Paralax scrolling

The Parallax effect or parallax scrolling in web design is the technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion. We gathered some examples of websites using the parallax effect to inspire you. This effect certainly makes scrolling around websites an interesting experience.

Paralax scrolling

http://www.manufacturedessai.it/it/

Paralax scrolling

http://www.newzealand.com