STEP 1: In Photoshop or Illustrator create a PDF portfolio page like the sample. Dim: 1024 px x 1645px x 150 ppi (resolution). (These dimensions are more a guideline and you can vary it if you have a different idea for your layout)
Include:
6 images from previous classes and your own work
add descriptions of the images: what tools and techniques did you use?
place a banner of your own work on top
a title (Portfolio of Work)
your name
save the file as a Photoshop PDF or Illustrator PDF
STEP 2: Create text fields in Adobe Acrobat Pro and add descriptions to your work. The descriptions need to state what tools and functions you used.
STEP 3: Save the final PDF and upload to MyKangan.
Follow the in-class instructions on how to use the Crop Tool or follow the tutorial below the image.
The crop tool works on two basic levels:
free-hand – simply select the crop tool (Shortcut C) [Visit Shortcutworld for more Photoshop Shortcuts] and drag a window over your image. You can adjust the size of the crop selection by dragging the edges and corners. You can even rotate your crop selection (with CS4 or higher). Hit Enter to complete the crop action and accept the new size.
key in dimensions – after activating the crop tool enter the width: 500 (in px for web), the height: 600 (in px) and the resolution: 150 (72 is suitable for web)- the values need to be entered in the options bar (also called properties bar). See image below as an example. Next drag the crop window and press enter to except the change.
Note that the window is restricted in its scale.
See the dimensions of the Crop Tool: 450px x 400px with 72ppi resolution.
Follow the in-class demonstration. A nice and basic function, it allows you to change the brightness and correct the contrast. Move the slider to change the values.
Image>Adjustments>Brightness/Contrast
Tick and untick the Preview box to observe the changes before accepting it.
Use the sliders. It is self explanatory.
Levels
With the Levels function you can adjust problems with tone (eg a photo that is very grey and does not show enough dark and light aspects) or colour related problems (eg too much blue).
The Short Cut: Ctrl+L (Cmd+L) or use: Image>Adjustments>Levels
Overview: follow my in-class introduction to how to use the Levels in simple steps. Use the attached photo by Matthew Bridges of the old house at a lake.
The easiest and most basic way to apply the Levels function is by moving the sliders for the highlight (white) and shadows (black) below the graph of the input levels inwards. Moving the highlight will brighten the image up and moving the shadow will darken the shadows.
This is a good basic function to start of with and it is useful for the majority of your photos, may they be basic shots or more sophisticated and at higher resolution.
Follow this tutorial to learn how to use the Level Adjustment more detailed and how to create an Adjustment Layer:
Follow the in-class demonstration (shortcut: Ctrl+M or: Image>Adjustments>Curves). The Curves function is similar to the Level function, but the graph is a lot more visual and intuitive. You can manipulate it with your mouse. See image:
Try the presets and see how it affects your image, and then manipulate the curve yourself.
The short cut is Shift+Ctrl+L (or: Image>Auto Tone). Follow the in-class demonstration. The Auto Tone function readjusts tonal settings in your image and in most cases this results in a crisper image with the click of a button. The Auto Tone option looks for the darkest and lightest points in an image and resets them to pure white and black, resulting in clearer tones.
Because Auto Tone adjusts each color channel individually, it may remove color or introduce color casts.
Auto Contrast
Follow the in-class demonstration.
The short cut is Alt+Shift+Ctrl+L (or: Image>Auto Contrast). Auto Contrast adjusts image contrast automatically, at the click of a button. Unlike Auto Tone it will not affect colours. It clips the shadow and highlight values in an image and then maps the remaining lightest and darkest pixels in the image to pure white and pure black . As a result the image will have lighter highlights anf darker shadows and a crisper contrast.
Auto Color
Follow the in-class demonstration.
The short cut is Shift+Ctrl+B (or: Image>Auto Color)
Auto Color adjusts the contrast and color of an image. It is able to search images for shadows, midtones, and highlights. It then neutralizes the midtones using a target color of RGB 128 grey and clips the shadow and highlight pixels by 0.5%. Personally, and from experience it effects images less and Auto Contrast and Auto Tone bring more convincing changes in image quality.
Vibrance
Follow the in-class demonstration. Click: Image>Adjustments>Vibrance
As the name suggests this function will help you making a photo look more vibrant. Colours can be shown more intensely with higher saturation. It is easy to grasp this function, simply move the sliders to the right to increase vibrance or move them to the left to decrease vibrance.
Follow the in-class demonstration. (Ctrl+U or Image>Adjustments>Hue/Saturation)
Using Hue/Saturation Adjustment Layer with a mask showing the original (yellow) below.
Photo Filter
Photo Filter
Follow the in-class demonstration. Press: Image>Adjustments>Photo Filter.
One of the best image adjustment options, you can select from a set of preset filters: use a warming filter to create a lighting sense that you would encounter indoors, in autumn (fall) or during a sunset when there are more yellow, orange and red colours around. Use a cool filter to create a typical outdoor setting or a winter atmosphere. You can tick the Color box and select your own colour or select a colour from the image itself (simply click on the part of the image).
You can also change the amount of density, more density results in a stronger impact of your filter. Find a level that you like – try to be more conservative and chose a little less density than you like for a print).
Shadows/Highlights
Follow the in-class demonstration. Click: Image>Adjustments>Shadows/Highlights.
With the shadows and highlights you can easily lighten up an underexposed, dark image. Use the functions sparsely to not overdo the changes, which can easily create an unrealistic look. The image shows the changes on a dark photo.
All the image adjustments that we have looked at above can be done directly to an image or in from of an adjustment layer. It is far better to create an adjustment layer, this allows you to create changes in form of a layer. You can always delete or hide the layer and your original image remains unaffected.
How do you create an adjustment layer?
With your original layer selected click on the Create a new fill or adjustment layer button and select what type of adjustment layer you want to create. Next do all the adjustments to it.
Alternatively you just click on the Adjustments tab and select the Adjustment Layer that you want to create.
(See image)
Create an Adjustment Layer
Task in Class
Perform these two tasks to show that you understood today’s class ( If you have missed this class you need to do this!!!)
Use the image by Matthew Bridges (or select an alternative image). Use the crop tool and resize to 500px x 600px at 150ppi (resolution). Apply 6 different image adjustment layers and mask them off in strips (see examples of student work). Add titles to your strips. E-mail the file to me as a PNG (not PSD) and keep a copy for yourself.
In your second task I would like you to use Matthew Bridges’ image only. The photo is very grey and it looks foggy. I would like you to improve the image using any of the image adjustment functions that you have learnt about. When you are happy with the improved image e-mail me a PNG version of it (no need to crop the image).
Create a before and after version of the image.
Student Submissions:
Work by Benan ÜWork by Michael TWork by Tristan SWork by Vlad KWork by Jo WWork by Justin A
Follow the in-class instructions on how to use the Crop Tool or follow the tutorial below the image.
The crop tool works on two basic levels:
free-hand – simply select the crop tool (Shortcut C) [Visit Shortcutworld for more Photoshop Shortcuts] and drag a window over your image. You can adjust the size of the crop selection by dragging the edges and corners. You can even rotate your crop selection (with CS4 or higher). Hit Enter to complete the crop action and accept the new size.
key in dimensions – after activating the crop tool enter the width (in px for web), the height (in px) and the resolution (72 is suitable for web)- the values need to be entered in the options bar (also called properties bar). See image below as an example. Next drag the crop window and press enter to except the change.
Note that the window is restricted in its scale.
See the dimensions of the Crop Tool: 450px x 400px with 72ppi resolution.
Follow the in-class demonstration. A nice and basic function, it allows you to change the brightness and correct the contrast. Move the slider to change the values.
Tick and untick the Preview box to observe the changes before accepting it.
Use the sliders. It is self explanatory.
Levels
With the Levels function you can adjust problems with tone (eg a photo that is very grey and does not show enough dark and light aspects) or colour related problems (eg too much blue).
The Short Cut: Ctrl+L (Cmd+L)
Overview: follow my in-class introduction to how to use the Levels in simple steps. Use the attached photo by Matthew Bridges of the old house at a lake.
The easiest and most basic way to apply the Levels function is by moving the sliders for the highlight (white) and shadows (black) below the graph of the input levels inwards. Moving the highlight will brighten the image up and moving the shadow will darken the shadows.
This is a good basic function to start of with and it is useful for the majority of your photos, may they be basic shots or more sophisticated and at higher resolution.
Follow this tutorial to learn how to use the Level Adjustment more detailed and how to create an Adjustment Layer:
Follow the in-class demonstration (shortcut: Ctrl+M). The Curves function is similar to the Level function, but the graph is a lot more visual and intuitive. You can manipulate it with your mouse. See image:
Try the presets and see how it affects your image, and then manipulate the curve yourself.
The short cut is Shift+Ctrl+L. Follow the in-class demonstration. The Auto Tone function readjusts tonal settings in your image and in most cases this results in a crisper image with the click of a button. The Auto Tone option looks for the darkest and lightest points in an image and resets them to pure white and black, resulting in clearer tones.
Because Auto Tone adjusts each color channel individually, it may remove color or introduce color casts.
Auto Contrast
Follow the in-class demonstration.
The short cut is Alt+Shift+Ctrl+L (maybe not that short after all). Auto Contrast adjusts image contrast automatically, at the click of a button. Unlike Auto Tone it will not affect colours. It clips the shadow and highlight values in an image and then maps the remaining lightest and darkest pixels in the image to pure white and pure black . As a result the image will have lighter highlights anf darker shadows and a crisper contrast.
Auto Color
Follow the in-class demonstration.
The short cut is Shift+Ctrl+B.
Auto Color adjusts the contrast and color of an image. It is able to search images for shadows, midtones, and highlights. It then neutralizes the midtones using a target color of RGB 128 grey and clips the shadowand highlight pixels by 0.5%. Personally, and from experience it effects images less and Auto Contrast and Auto Tone bring more convincing changes in image quality.
Vibrance
Follow the in-class demonstration.
As the name suggests this function will help you making a photo look more vibrant. Colours can be shown more intensely with higher saturation. It is easy to grasp this function, simply move the sliders to the right to increase vibrance or move them to the left to decrease vibrance.
Using Hue/Saturation Adjustment Layer with a mask showing the original (yellow) below.
Photo Filter
Photo Filter
Follow the in-class demonstration. One of the best image adjustment options, you can select from a set of preset filters: use a warming filter to create a lighting sense that you would encounter indoors, in autumn (fall) or during a sunset when there are more yellow, orange and red colours around.
Use a cool filter to create a typical outdoor setting or a winter atmosphere. You can tick the Color box and select your own colour or select a colour from the image itself (simply click on the part of the image).
You can also change the amount of density, more density results in a stronger impact of your filter. Find a level that you like – try to be more conservative and chose a little less density than you like for a print).
Shadows/Highlights
Follow the in-class demonstration. With the shadows and highlights you can easily lighten up an underexposed, dark image. Use the functions sparsely to not overdo the changes, which can easily create an unrealistic look. The image shows the changes on a dark photo.
All the image adjustments that we have looked at above can be done directly to an image or in from of an adjustment layer. It is far better to create an adjustment layer, this allows you to create changes in form of a layer. You can always delete or hide the layer and your original image remains unaffected.
How do you create an adjustment layer?
With your original layer selected click on the Create a new fill or adjustment layer button and select what type of adjustment layer you want to create. Next do all the adjustments to it.
Alternatively you just click on the Adjustments tab and select the Adjustment Layer that you want to create.
(See image)
Create an Adjustment Layer
Task in Class
Perform these two tasks to show that you understood today’s class ( If you have missed this class you need to do this!!!)
Use the image by Matthew Bridges (or select an alternative image). Use the crop tool and resize to 450px x 400px at 72ppi (resolution). Apply 6 different image adjustment layers and mask them off in strips (see examples of student work). Add titles to your strips. E-mail the file to me as a PNG (not PSD).
In your second task I would like you to use Matthew Bridges’ image only. The photo is very grey and it looks foggy. I would like you to improve the image using any of the image adjustment functions that you have learnt about. When you are happy with the improved image e-mail me a PNG version of it (no need to crop the image).
Student Submissions:
Work by Benan ÜWork by Michael TWork by Naşide SWork by Tristan SWork by Berna KWork by Vlad KWork by Jo WWork by Justin A
I Want You – Emily Strange, The lovable Emily Strange came to life in 1991, designed by Nathan Carrico for Santa Cruz Skateboards. She is referred to as a counterculture icon. I would just call her a sceptic. Image found at: Kollectable Kaos
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com
Photo by dharder on morgueFiles.com
Italian movie poster found on Abduzeedo.com
Work by Jo W
Image Source: www.photoshopessentials.com
Text and Shapes – This design lends itself to an interactive use – found at: Smashing Magazine (click image for inspiring article on table of content design)
Photo by Seemann on morgueFile.com
Photo by clarita on www.morguefile.com
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
ruthworkx -http://ruthworkx.files.wordpress.com
Courtesy of The Art of Mass Effect Universe’, 2012
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
Work by Justin Anderson
Photo by omdur on morgueFile
Setting the grid up.
Light Streaks – Courtesy of: PhotoshopEssentials
Geese in Ameland, Photo by Frans Schouwenburg
Photo by mcconnors on morgueFile
Multimedia Production Cycle – This image is under the Creative Common Agreement, you can use it but will need to reference this site: www.classoffederico.wordpress.com
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
Illustrator unknown – found at: Ephemera – World of Rare Books
Work by Egon Schiele, found at Mom.org
Photo by ariadna on morgueFile
Table of Content from Textbook – This design lends itself to an interactive use – found at: Smashing Magazine (click image for inspiring article on table of content design)
Vista Lighting Effect – Courtesy of: Tutorial9
Examples of Output and Display for web-content. Image: live.surveyshack.com
Peace- Swiss International Style Reference – by Maryam Chananeh
Concept for Gallery Screnshot
Found at Inc.com
Layers in Photoshop are like a Collage of images stuck on top of each other…
Screenshot from What’s Your Story by Joyce Hostyn
Photo by clarita on morgueFile
Photo by frenchbyte on morgueFile
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Grassy Rabbits
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
Lines and Gradients- Courtesy of: psdtuts+
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
Couple found at http://frenchbydesign.blogspot.com.au
Image from morgueFile by lemai13
Text-based Table of Content – Very Graphic and Black and White- found at: Smashing Magazine (click image for inspiring article on table of content design)
Uncle Sam Wants You, WWI Propaganda Poster for US Army recruits, Design by James Montgomery Flagg, 1916, image found at: Live Auctioneers
Illustration by Tavis Coburn found on DzineBlog.com
Illustration by Jessie Ford, found on DzineBlog.com
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Based on photo by hotblack from morgueFile.com
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
Massive Attack – The Essential Mix
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
“Step into my office” Source: The Age, click image for link
Illustration by Jessie Ford, found on DzineBlog.com
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Photo by hotblack on morgueFile.com
What Time is it Now? by King_Bobbles
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Illustration by Kate Miller, found on DzineBlog.com
Based on a photo by delboysafa from morgueFile.com
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
Photo by mconnors on morgueFile
Typographic with Colours and Photos – The use of large numbers is effective and the low opacity of the boxes works, personally, I find it looks a bit dated- found at: JuxtaPost.com
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
Based on image by hotblack on morgueFile.com – F.Viola
Experimental Photomontage by Robert Heinecken
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
Custom Shapes and Custom Shape Icon
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
This is a template for a business website found at TemplateMonster. It is interesting in the sense that it breaks up the main image as part of the navigation. The sound it comes with is annoying.
Based on photo by dhester from morgueFile.com
He loves OHS! – Photo by Karpati Gabor on morgueFile
Based on photo by xandert found on morgueFile
The gentle curve of the river and the light green tones of the grass give this image a calming feel. The montains and the clouds have a less calming effect. Image: courtesy of Icon Photography School – http://www.photographyicon.com/line/
Photo by agathabrown on morgueFile
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
The concept was used on the German side as well with this ‘Auch du sollst beitreten zur Reichswehr’ [You too should join the German Army], design by Julius Engelhard, Image: courtesy of mental_floss
Image source: Data Center Knowledge
Example of applied changes
Photo by matthewbridges on morgueFile.com
Close-up at Fed Square, Federico Viola 2013
Constructivism Reference – by Lylah Livingston
Photo by DTL on morgueFiles
Courtesy of The Art of Mass Effect Universe’, 2012
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
Free Transform and Ctrl – I am loving it!!!
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/