vsd images en
Post on 04-Apr-2018
228 Views
Preview:
TRANSCRIPT
-
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
emiel.ruis@han.nl
@mastermiel
-
7/31/2019 VSD Images En
2/69
Images
DefinitionsComposition and design
Stock Photography
Trends
-
7/31/2019 VSD Images En
3/69
Definitions
Aspect Ratio
The aspect ratio indicates how the height and width of animage relate to each other.
-
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
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/31/2019 VSD Images En
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 .
-
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
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 -
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
12/69
Definitions
contrast
In photography, this term refers to relationships betweenbright and dark elements in the picture.
-
7/31/2019 VSD Images En
13/69
Definitions
Aliassing
The angular, jagged edges in the display of images with low resolutioncaused by the square shape of pixels.
-
7/31/2019 VSD Images En
14/69
Definitions
-
7/31/2019 VSD Images En
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).
-
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
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.
-
7/31/2019 VSD Images En
21/69
Definitions
X - Y - Zdimensions
-
7/31/2019 VSD Images En
22/69
Composition and design
"Your first 10,000 photographs are your worst"Henry Cartier-Bresson
-
7/31/2019 VSD Images En
23/69
Composition and design
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.
-
7/31/2019 VSD Images En
24/69
Composition and design
Cropping
The reduction and the focusing of an image? By the trimming of theedges.
-
7/31/2019 VSD Images En
25/69
Composition and design
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.
-
7/31/2019 VSD Images En
26/69
Composition and design
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.
-
7/31/2019 VSD Images En
27/69
Composition and design
Horizon
Prefer the air or just ignore it. Somewhere there is a natural balance(rule of third).
-
7/31/2019 VSD Images En
28/69
Composition and design
Dynamic tension
Diagonals create energy, rhythm creates momentum and activity, off-center objects create tension.
d d
-
7/31/2019 VSD Images En
29/69
Composition and design
Perspective and depth
Perspective is experiencing objects in a space, and theirrelationship to each other and the viewer.
-
7/31/2019 VSD Images En
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
-
7/31/2019 VSD Images En
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
-
7/31/2019 VSD Images En
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
-
7/31/2019 VSD Images En
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
-
7/31/2019 VSD Images En
34/69
Spicing classical slideshow patterns
http://www.joshuastearns.com/%23/grid
S i i l i l lid h tt
http://www.joshuastearns.com/http://www.joshuastearns.com/http://www.joshuastearns.com/http://www.joshuastearns.com/ -
7/31/2019 VSD Images En
35/69
Spicing classical slideshow patterns
http://www.coreyfishes.com/%23/fish-work-bering-sea/
S i i l i l lid h tt
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/ -
7/31/2019 VSD Images En
36/69
Spicing classical slideshow patterns
http://www.ciriljazbec.com/
S i i l i l lid h tt
http://www.ciriljazbec.com/http://www.ciriljazbec.com/http://www.ciriljazbec.com/http://www.ciriljazbec.com/ -
7/31/2019 VSD Images En
37/69
Spicing classical slideshow patterns
http://www.bergh.dk/
S i i l i l lid h tt
http://www.bergh.dk/http://www.bergh.dk/http://www.bergh.dk/http://www.bergh.dk/ -
7/31/2019 VSD Images En
38/69
Spicing classical slideshow patterns
http://www.vilamajo.com/
Spicing classical slideshow patterns
http://www.vilamajo.com/http://www.vilamajo.com/http://www.vilamajo.com/http://www.vilamajo.com/ -
7/31/2019 VSD Images En
39/69
Spicing classical slideshow patterns
http://filippasmedhagensund.com/
http://filippasmedhagensund.com/ -
7/31/2019 VSD Images En
40/69
Huge photographs
-
7/31/2019 VSD Images En
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/ -
7/31/2019 VSD Images En
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/ -
7/31/2019 VSD Images En
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/ -
7/31/2019 VSD Images En
44/69
Unusual effects and navigation
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.
Unusual effects and navigation
-
7/31/2019 VSD Images En
45/69
Unusual effects and navigation
http://www.eastphotographic.com/
Unusual effects and navigation
http://www.eastphotographic.com/http://www.eastphotographic.com/http://www.eastphotographic.com/http://www.eastphotographic.com/ -
7/31/2019 VSD Images En
46/69
Unusual effects and navigation
Extraordinary navigation
Besides featured common navigation patterns listed above,we noted many portfolios using totally unique andsometimes gimmicky navigation techniques. Here are somecool examples:
Unusual effects and navigation
-
7/31/2019 VSD Images En
47/69
Unusual effects and navigation
http://www.egofoto.net/
Unusual effects and navigation
http://www.egofoto.net/http://www.egofoto.net/http://www.egofoto.net/http://www.egofoto.net/ -
7/31/2019 VSD Images En
48/69
Unusual effects and navigation
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.
Unusual effects and navigation
-
7/31/2019 VSD Images En
49/69
Unusual effects and navigation
http://www.paultorres.net/
Photo motion
http://www.paultorres.net/http://www.paultorres.net/http://www.paultorres.net/http://www.paultorres.net/ -
7/31/2019 VSD Images En
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
-
7/31/2019 VSD Images En
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/ -
7/31/2019 VSD Images En
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/ -
7/31/2019 VSD Images En
53/69
Big typography
Big type rocks modern web design. It is everywhere, andphotography websites are not an exception.
Big typography
-
7/31/2019 VSD Images En
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/ -
7/31/2019 VSD Images En
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/ -
7/31/2019 VSD Images En
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.
Unusual thumbnail gallery
-
7/31/2019 VSD Images En
57/69
g y
http://www.werkstette.dk/
Unusual thumbnail gallery
http://www.werkstette.dk/http://www.werkstette.dk/http://www.werkstette.dk/http://www.werkstette.dk/ -
7/31/2019 VSD Images En
58/69
g y
http://www.jamesdayphoto.com/
Unusual thumbnail gallery
http://www.jamesdayphoto.com/http://www.jamesdayphoto.com/http://www.jamesdayphoto.com/http://www.jamesdayphoto.com/ -
7/31/2019 VSD Images En
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/ -
7/31/2019 VSD Images En
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
-
7/31/2019 VSD Images En
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/ -
7/31/2019 VSD Images En
62/69
http://www.jansochor.com/
Simplicity & Minimalism
http://www.jansochor.com/http://www.jansochor.com/http://www.jansochor.com/http://www.jansochor.com/ -
7/31/2019 VSD Images En
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.
Simplicity & Minimalism
-
7/31/2019 VSD Images En
64/69
http://album.alexflueras.ro/
Simplicity & Minimalism
http://album.alexflueras.ro/ -
7/31/2019 VSD Images En
65/69
http://www.chrisphelps.com/
Simplicity & Minimalism
http://www.chrisphelps.com/http://www.chrisphelps.com/http://www.chrisphelps.com/http://www.chrisphelps.com/ -
7/31/2019 VSD Images En
66/69
http://www.levonbiss.com/
Paralax scrolling
http://www.levonbiss.com/http://www.levonbiss.com/http://www.levonbiss.com/http://www.levonbiss.com/ -
7/31/2019 VSD Images En
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
-
7/31/2019 VSD Images En
68/69
http://www.manufacturedessai.it/it/
Paralax scrolling
http://www.manufacturedessai.it/it/http://www.manufacturedessai.it/it/http://www.manufacturedessai.it/it/ -
7/31/2019 VSD Images En
69/69
http://www.newzealand.com
http://www.newzealand.com/http://www.newzealand.com/http://www.newzealand.com/
top related