VSD Images En

7/31/2019 VSD Images En

1/69

Visual Screen Design

Week 5 - Images

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

Susan Sontag

[email protected]

@mastermiel


2/69

Images

DefinitionsComposition and design

Stock Photography

Trends


3/69

Definitions

Aspect Ratio

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


4/69

Definitions

Megapixel

The resolution of a digital camera is shown in megapixels.? A megapixel is 1million pixels (picture element).

Each pixel has a color, which is determined by the amount of green, red andblue (RGB) in the pixel.

You can calculate the number of megapixels by myltiplying the number ofhorizontal 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.


5/69

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 FormatSuitable 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.


6/69

Definitions

File formats

RAW

Contains raw information so that more control over the end result.

GIF - Graphics Interchange FormatUp to 256 colors, suitable for animation and transparency.

PNG - Portable Network Graphic

Larger than JPEG, supports transparency.

EPS - Encapsulated PostScript

Vector graphics.


7/69

Definitions

Colour castWe talk of a color cast when a certain shade of the picturecovers the picture. This is especially common in photostaken in artificial light or scanned photos .


8/69

Definitions

histogram

The histogram is a representation of the distribution oftones in an image. The color intensity is shown at every

level. The horizontal axis goes from dark to light while thevertical axis shows the number of pixels in range.


9/69

Definitions

Backlight

When the subject is between the camera and the lightsource, we speak of backlighting. The subject is backlit and

thus, only the outline of the object is visible.
http://www.google.nl/imgres?hl=nl&biw=1039&bih=704&tbm=isch&tbnid=jViJjJXviHcYTM:&imgrefurl=http://fotocompetitie.upc.nl/seo/foto/574248/tegenlicht/tegenlicht_bos_zon_bomen.html&docid=NgzxYuM0C8EumM&imgurl=http://fotocompetitie.upc.nl/original/574248/tegenlicht/tegenlicht_bos_zon_bomen.jpg&w=3776&h=2520&ei=HD1WT8GGB8WUOq_QgcYI&zoom=1&iact=hc&vpx=337&vpy=338&dur=30&hovh=183&hovw=275&tx=151&ty=123&sig=103370375420116726954&page=1&tbnh=161&tbnw=215&start=0&ndsp=15&ved=1t:429,r:6,s:0http://www.google.nl/imgres?hl=nl&biw=1039&bih=704&tbm=isch&tbnid=jViJjJXviHcYTM:&imgrefurl=http://fotocompetitie.upc.nl/seo/foto/574248/tegenlicht/tegenlicht_bos_zon_bomen.html&docid=NgzxYuM0C8EumM&imgurl=http://fotocompetitie.upc.nl/original/574248/tegenlicht/tegenlicht_bos_zon_bomen.jpg&w=3776&h=2520&ei=HD1WT8GGB8WUOq_QgcYI&zoom=1&iact=hc&vpx=337&vpy=338&dur=30&hovh=183&hovw=275&tx=151&ty=123&sig=103370375420116726954&page=1&tbnh=161&tbnw=215&start=0&ndsp=15&ved=1t:429,r:6,s:0


10/69

Definitions

Skimming light

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

low sun.


11/69

Definitions

fill

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

used to light the face.


12/69

Definitions

contrast

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


13/69

Definitions

Aliassing

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


14/69

Definitions


15/69

Definitions

Aperture

The aperture is a kind of screen, with adjustable openingbetween lens and the shutter. Light falls through the

aperture on the sensor. The larger the aperture, the morelight per time unit hits the sensor. The size of the opening ismeasured in f-numbers (f-stops).


16/69

Definitions

Shuttertime

A shutter is a kind of trap door that opens during therecording for the light to pass through. The time that the

shutter is open and therefore how long the exposure timedepends 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.


17/69

Definitions

Shutter speed or exposure time

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

a certain amount of light.


18/69

Definitions

Lens / Lenses

Standard (50mm)A standard lens is approximately equal to the image that the human eye sees.

Wide ( 100mm)With telephoto lenses you far away subjects closer to you.

MacroWith a macro lens you subject very close to capture.


19/69

Definitions

Depth of Field

The distance between the closest object and the mostdistant object in a picture that still acceptable sharpness.

The depth depends on the chosen aperture and focal lengthof the lens.


20/69

Definitions

Close upFor a close up photo a specific part of the subject is broughtforward very strongly. The rest of the area is ignored andonly the subject is strongly zoomed mapped.


21/69

Definitions

X - Y - Zdimensions


22/69

Composition and design

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


23/69


CompositionPlanning of parts to a whole. The composition is a keyconcept for making beautiful pictures. It refers to how thevarious elements in the picture relate to each other and to

the frame.


24/69


Cropping

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


25/69


Plaatsing

Bij het plaatsen van een beeld is bewust kijken belangrijk.

Op het moment dat men rest ruimte toepast, wordt de plaatsingvan een voorwerp een factor van belang.


26/69


Rule of thirds

Divide the composition into thirds.

Aligning a photograph with these points, surfaces or lines creates moretension, energy and attention in the composition than simply centering.


27/69


Horizon

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


28/69


Dynamic tension

Diagonals create energy, rhythm creates momentum and activity, off-center objects create tension.

d d


29/69


Perspective and depth

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


30/69

Stock Photography vs. photographer

Advantages and disadvantages

Many stock sites

Speed / accessibility / retrievabilityAloof / cold /Unique and exclusive / multiple users

Expensive / cheap

Limited possibilities of application

time Factor

Cost Model / Make-up / Styling / Studio or location / Props

S k h h


31/69

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/)

I


32/69

Images

"Which of my photographs is my favorite?

The one I'm going to take tomorrow.Imogen Cunnigham

S i i l i l lid h


33/69

Spicing classical slideshow patterns

Such navigation effects as carousel or grid are probably themost common patterns in photography portfolios. Theyenable users to quickly skim through all available photos

without digging the whole website over. Although simpleslideshows are the most common work showcasingtechniques, many photographers make them look uniqueby mixing effects and adding some featured elements to

them.

S i i l i l lid h tt


34/69


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

http://www.joshuastearns.com/http://www.joshuastearns.com/http://www.joshuastearns.com/http://www.joshuastearns.com/


35/69


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

http://www.coreyfishes.com/http://www.coreyfishes.com/http://www.coreyfishes.com/http://www.coreyfishes.com/http://www.coreyfishes.com/http://www.coreyfishes.com/http://www.coreyfishes.com/http://www.coreyfishes.com/http://www.coreyfishes.com/http://www.coreyfishes.com/


36/69


http://www.ciriljazbec.com/

http://www.ciriljazbec.com/http://www.ciriljazbec.com/http://www.ciriljazbec.com/http://www.ciriljazbec.com/


37/69


http://www.bergh.dk/

http://www.bergh.dk/http://www.bergh.dk/http://www.bergh.dk/http://www.bergh.dk/


38/69


http://www.vilamajo.com/

http://www.vilamajo.com/http://www.vilamajo.com/http://www.vilamajo.com/http://www.vilamajo.com/


39/69


http://filippasmedhagensund.com/
http://filippasmedhagensund.com/


40/69

Huge photographs


41/69

Huge photographs

http://www.evaankheraj.com/

Huge photographs
http://www.evaankheraj.com/http://www.evaankheraj.com/http://www.evaankheraj.com/http://www.evaankheraj.com/


42/69

Huge photographs

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

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


43/69

Huge photographs

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

Unusual effects and navigation
http://www.timothy-hogan.com/http://www.timothy-hogan.com/http://www.timothy-hogan.com/http://www.timothy-hogan.com/http://www.timothy-hogan.com/http://www.timothy-hogan.com/


44/69


Non-typical alignment

This is not completely a trend as we found just a fewgalleries with right/left aligned photographs, but this is aquite interesting practice worth to be mentioned.



45/69


http://www.eastphotographic.com/

http://www.eastphotographic.com/http://www.eastphotographic.com/http://www.eastphotographic.com/http://www.eastphotographic.com/


46/69


Extraordinary navigation

Besides featured common navigation patterns listed above,we noted many portfolios using totally unique andsometimes gimmicky navigation techniques. Here are somecool examples:



47/69


http://www.egofoto.net/

http://www.egofoto.net/http://www.egofoto.net/http://www.egofoto.net/http://www.egofoto.net/


48/69


Accordion

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



49/69


http://www.paultorres.net/

Photo motion
http://www.paultorres.net/http://www.paultorres.net/http://www.paultorres.net/http://www.paultorres.net/


50/69

Photo motion

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

Photo motion


51/69

Photo motion

http://www.carlosalonsobodas.com/

Photo motion
http://www.carlosalonsobodas.com/http://www.carlosalonsobodas.com/http://www.carlosalonsobodas.com/http://www.carlosalonsobodas.com/


52/69

Photo motion

http://www.smetana.net/

Big typography
http://www.smetana.net/http://www.smetana.net/http://www.smetana.net/http://www.smetana.net/


53/69

Big typography

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

Big typography


54/69

Big typography

http://www.javierferrervidal.com/

Big typography
http://www.javierferrervidal.com/http://www.javierferrervidal.com/http://www.javierferrervidal.com/http://www.javierferrervidal.com/


55/69

Big typography

http://www.tomnagy.com/

Unusual thumbnail gallery
http://www.tomnagy.com/http://www.tomnagy.com/http://www.tomnagy.com/http://www.tomnagy.com/


56/69

U b g y

Our research shows that thumbnail gallery is one of the

most popular site areas where designers implement theircreative ideas. Adding some unique style to thumbs zonemakes the website more attractive and interactive withoutaccessibility sacrifice.



57/69

g y

http://www.werkstette.dk/

http://www.werkstette.dk/http://www.werkstette.dk/http://www.werkstette.dk/http://www.werkstette.dk/


58/69

g y

http://www.jamesdayphoto.com/

http://www.jamesdayphoto.com/http://www.jamesdayphoto.com/http://www.jamesdayphoto.com/http://www.jamesdayphoto.com/


59/69

g y

http://www.seohiroshi.com/

More text
http://www.seohiroshi.com/http://www.seohiroshi.com/http://www.seohiroshi.com/http://www.seohiroshi.com/


60/69

Naturally, photos are the main content filling onphotography websites, but we noticed that morephotographers now use verbal form along with visual to

communicate with the visitors. Blogs, tutorials,comprehensive descriptions of photo categories and singleshots became quite popular in photo portfolio design. Themore text on the website, the better it is for SEO and profilebuilding, probably these are the main reasons for this

trend.

More text


61/69

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

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


62/69

http://www.jansochor.com/

Simplicity & Minimalism
http://www.jansochor.com/http://www.jansochor.com/http://www.jansochor.com/http://www.jansochor.com/


63/69

p y

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 navigationare crucial to this kind of personal portfolios and the lionsshare of photographers stay loyal to this style.



64/69

http://album.alexflueras.ro/

http://album.alexflueras.ro/


65/69

http://www.chrisphelps.com/

http://www.chrisphelps.com/http://www.chrisphelps.com/http://www.chrisphelps.com/http://www.chrisphelps.com/


66/69

http://www.levonbiss.com/

Paralax scrolling
http://www.levonbiss.com/http://www.levonbiss.com/http://www.levonbiss.com/http://www.levonbiss.com/


67/69

The Parallax effect or parallax scrolling in web design is thetechnique that features layered images that move aroundthe website in different speeds/perspectives creating a niceand interesting 3D illusion. We gathered some examples ofwebsites using the parallax effect to inspire you. This effectcertainly makes scrolling around websites an interestingexperience.

Paralax scrolling


68/69

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

Paralax scrolling
http://www.manufacturedessai.it/it/http://www.manufacturedessai.it/it/http://www.manufacturedessai.it/it/


69/69

http://www.newzealand.com
http://www.newzealand.com/http://www.newzealand.com/http://www.newzealand.com/

Documents

VSD Images En