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:
1 image from Class 6 (Task 2 – applying image adjustment functions the image of Matthew Bridges is below)
2 images from Class 5 (Tasks 1 and 2 – combine image of monkeys with image of window and put new screen onto the computer of the girl)
2 images from Class 4 (Create a banner and create a clipping mask with your initials in front of image of birds)
place a banner of your own work on top or use an image from morgueFile (please state the name of the photographer)
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 (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 hope that today’s class will be extremely useful to you and point out some strong features of Photoshop (that may even win Lucine over – Lucine?)
Today’s Content:
Free Transform
Transform
Layer Style (Blending Options)
Practice of Selection, Refine Selection and Mask Selection
Tasks for today
Image Files to be Used in Class
Again, please refrain from anything that interrupts your learning, and be mature about it. The F_____k word is a dirty word in today’s class – and of cause I am NOT referring to firetruck, but Facebook and the likes…
Free Transform
Free Transform is a function that you will use almost every time when you use Photoshop. The short cut is Ctrl+T (Cmd+T) and it is nested in the Main Menu under Edit>Free Transform. This tool needs little explanation and is fairly easy to get your head around.
Let us start off by starting a new document (Ctrl+N or Cmd+N) with the dimensions 800x600px with 72ppi resolution. Next click on the image of the girl in the turquoise/bluish T-Shirt towards the bottom of this post to open a larger version and right click it to copy the image. Back in Photoshop just paste it: Ctrl+V.
Okay this is a common scenario, that can be avoided by choosing the Place option in Photoshop (File>Place). Let us use the Free Transform now.
Manual dragging with shift – After clicking Ctrl+T you can decrease the size of the large image manually by dragging a visible image corner while holding shift towards the centre. If your image is too large you can press Alt + scroll down to zoom out or hold Space+Alt while left clicking to zoom out. Click on the tick in the options bar or simply press Enter to accept the new size.
Key in the new size – You can instead simply type in the new size. Follow these steps in the options bar: (1)Place the reference point in a position that you want fixed – in our case top left (2)Click on the chain icon between the W and H responsible for the aspect ratio (scale) and last enter a value into the W text box. 37% will give you a good result. (see image below to guide you) Press Enter to accept the new size.
Ctrl and Free Transform – Now, Free Transform becomes really powerful in combination with the Ctrl (Cmd) key. Let us try this: copy Monkey (from the top image) and paste him into the open document. Next hold Ctrl (Cmd) while dragging a corner point of Monkey into the eMac screen. Repeat this with all points. Readjust them before accepting the changes by pressing Enter.
Free Transform and Ctrl – I am loving it!!!
Transform
Transform can be used on its own. Access it from the main menu Edit>Transform>
Screenshot of Transform drop menu
Use Scale to change the size of the image. Use Rotate to rotate the image. Use Skew, Distort or Perspective to play with levels of perspective with the photo. Use Warp to get really creative on a image and achieve a more Psychedelic outcome. The Rotate option is self-explanatory and the two flip options are handy to know.
For 5 mins play around with the different options. Copy your layer (Ctrl+J) and do a horizontal flip on your layer. Move it down and change the opacity settings in the Layers Panel.
Layer Style (Blending Options)
The Layer Styles can be accessed from the Layers Panel Menu (small down arrow at the top right of the Layers Panel) by selecting Blending Modes. The faster way is simply clicking on the blue area around the layer name (not on the name itself though).
Practice Selection, Refine Selection and Mask Selection
Buttons from left to right: standard – add to selection (Shift) – subtract from selection (Alt) – intersect selections (Shift + Alt)
Attempt to select Monkey (see image above) and use a layer mask to separate him from his surroundings. You might need to use a blend of Selection tools available. Try the Quick Selection combined with Elliptical Marquee and Polygonal Lasso (see icons in image). Make sure to add to your selection by holding Shift while selecting or use the buttons in the Options menu (see image to your right for example) or hold Alt to take away from your selection.
After selecting Monkey use the Add a Mask button in the bottom of the Layers panel (or from the Menu pick: Layer>Layer Mask>Reveal Selection).
If you did everything correctly you should now just view Monkey on his own. (Keep this file open)
Mask Mode vs Standard Editing Mode – Please look at your Layer in the Layers panel. A black and white thumbnail next to the layer thumbnail indicates that a layer mask is in place. You all know this from previous classes, but it is extremely important to understand the difference between the normal editing mode and the mask mode. The mask thumbnail should have a black part outline around it to indicate that you are in the mask mode. Please left click on the layer thumbnail (or image thumbnail) to activate the standard editing mode and observe any changes in the interface. Next click back on the Mask thumbnail and again look at the interface. What changes did you observe?
When in mask mode your foreground and background color boxes will be only in shades (black/white standard, tones of grey if you play around). The Mask mode does not need colours! Why do you think masks do not need colours?
Well, the mask mode simply works with masking parts of the image:
you use whiteto show the selected part
you use black to hide the selected part
and you use grey to partly hide/show the selected part
After writing Monkey in Mask Mode
Easy? Well, let’s try it. Make sure you are still in the Mask mode and select the brush tool (short cut: B) use a standard brush tip and a size of 13px and hardness level of 0%. This can be adjusted in the options menu bar (see image to your left). Now with the brush, write the word Monkey 3 times in the masked area: once with white selected, once with black selected and once in grey (click on the foreground colour and shift tone to grey). When writing in white there should not have been a change, in black it should show Monkey in the colours of the background, while the grey should show a faded background. – I hope that this clarifies the use of masks to some extend.
Now change the grey tone back to what it was (we need black and white for the mask mode) NOTE: Benan, I don’t want to hear it…and can every one hide the monkey writing again (an easy way is to increase the brush size to over 100 and the hardness to 100% and go over it with black.
Mask Edge/ Refine Mask
Finally, let us move towards using the Mask Edge/ Refine Mask function. Get there by (layer mask needs to be active) clicking on the Masks tab in the Masks Panel (above the Layers Panel and hidden behind the Adjustments Panel) – see image. Click on Mask Edge and with the Refine Mask window open adjust the Edge as you see fit. Try it against a black background as well as a white background (click down arrow next to View:) Click here for for a detailed tutorial on how to use the Refine Mask window.
Today’s Tasks
Task 1: Use the photos with the window, mask out the background and place the photo with the monkeys into it. Put your first name in one of the bottom corners and apply a layer style of your choice to your name. Save the file as a PNG, with the title: Photoshop_class5_task_1.png. Keep a copy and e-mail the file to me.
Select one of the encircled links for Task 3
Task 2: Open the image of the girl in the bright green T-Shirt in front of the eMac. Next take a screen shot of your computer (Mac: command+shift+3, PC: press PrtScn) and either place or drag that image into the open file. Use Free Transform to place your screen shot into her screen. If it does not look quite right you can place a black or dark blue fill behind the layer with the screen shot and play with the Layer Blending Mode or opacity levels of the Screen shot layer. Put your first name in one of the bottom corners and apply a layer style of your choice to your name. Save the file as a PNG, with the title: Photoshop_class5_task_2.png. Keep a copy and e-mail the file to me.
Task 3: Select one of the links in the Links for Learning section and look for a tutorial on any of the topics that we have covered today: Free Transform, Transform,
Layer Style or
Practice of Selection, Refine Selection and Mask Selection and place a comment with a link to the tutorial in this post! Thank you! 🙂
Today we will look at a lollybag that Photoshop comes with: (tataaaaaaaaaaa) the Layer Blending Modes! Exciting, I know…
I hope to see Benan, Lucine, Michael, Vlad, Adam and all the other happy faces in front of me for class. What? I did not forget about (what’s his name) Rabeeh…
We will focus the majority of today’s time on you practicing Photoshop. After the completion of your tasks I will expect you to stay and practice more. Class time is the time when I will be able to assist and the time for you to experiment with the software.
So, today we will have fun and afterwards will have some more fun until the imaginary bell rings to announce the end of class.
Creative Commons
Creative Commons or the Creative Commons License relates to a way to distribute content, such as photos and other images for free.
Source: Flickr – photographer: Frans Schouwenburg
Creative Commons are generally used for non-commercial and educational purpose. If someone makes a profit with a product they should pay for the image they use.
Generally, the author, creator or owner of the content needs to be mentioned. So, in short, when using images from Creative Commons sources ensure that you mention the source of your image.
This can be done in various ways. One would be to place a tag underneath the image with the source as you see it done in this blog.
This photo was used in last week’s Photoshop Class 3.
Creative Commons on FlickR
There are different forms of Creative Commons and it pays to read the details beforehand. To the right is another example from FlickR:
Examples of Creative Commons Resources
Les us have a look at FlickR, Photo Pin and let us do a Google search on Creative Commons.
Your task find a photo to suit the themes Urban environment and blue skies with each search and download the image. Include the meta data of the photographer and source of website with the photo.
First start a new Photoshop document. Place one of your new photos into it. Place your second photo as well.
The Layer Blending Mode can be accessed through the Layers panel. A small button (Mac) or Text box (Win) with the word Normal indicate the Layer Blending Mode box.
Look at your layer blending mode with the top layer active. Try the layer blending modes below and see how amazingly easy Photoshop lets you change the appearance by creating a blend between two images.
Now click on this link and access the tutorial on Layers TV Episode 105 about how to use the Layer Blending Mode.
Layer Mask
If you completely watched the tutorial in the link above, you will already know how to create a layer mask and can proceed to the task for today.
Last week we looked at clipping masks and today we look at a layer mask. The process is very similar. Make a selection on your active layer and click on the Layer Mask button (add a layer mask) beneath the Layers panel. Your selection is still visible and the rest has disappeared.
You can also create a layer mask from a selection by going to the main menu: Layer>Layer Mask>Reveal Selection. (see image)
Alternatively (press Ctrl+Z or Cmd+Z) you can hide what you have selected: if you use the Layer Mask button press Alt at the same time to hide your selection with the Mask. You can do the same from the main menu: Layer>Layer Mask>Hide Selection.
While the layer mask is selected you will be in the mask mode. You can use the brush to add or take away from your layer mask. If you use the brush (while in mask mode) you can make parts disappear by drawing with black as foreground colour. You can equally make things reappear by drawing with white as foreground colour.
Using Gradient Tool with Layer Mask
A good tool to use is the gradient tool with the layer mask. You can create a gradient mask that way, which means the image will gradually become invisible. See image below.
French Ancient City Banner – Source: Image Base – Free Stock Photography Click the image as a link.
You can see the gradient used on the right part of the image. This is how you do it:
Create a new document (use dimensions below)
Place an image and change size as you see fit (press Enter)
Create a layer mask (click the layer mask button)
Activate the gradient and drag from one part to another within the imageIf white is your foreground colour the image will become invisible in the direction of your dragging.
If black was your foreground colour the image will be invisible on your first point and become visible in your dragging direction.
For a more detailed tutorial on how to use the Layer Mask in Photoshop go to: PhotoshopEssentials.com
Today’s Task
Create a banner for a website using two images that blend into each other (use Layer Blending Modes and Layer masks).
The images must suit the themes:
Urban environment
Blue Skies
Dimensions of banner: 980px(width) x 174px (height) 72ppi (resolution)
Add a title to the banner, that preferably also blends with the background images. Save the file as a PNG file. Keep a copy of this file and the 2 images that you have used. Upload your work onto MyKangan.
Examples of Student Submissions:
Banner by Vlad KBanner by Yong WBanner by Mike TBanner by Fatma Y
Welcome to your third Photoshop class. Be honest: did you practice what you have learnt last week? Make sure to practice Photoshop as much as you can, preferably daily. If you create a habit and make it fun your learning curve will be steep. If you are to busy to practice every day, try more than once a week.
You can see that we will be rather busy. You will also need to provide me with an image as a result.
If you already now all of the tasks above you can do this straight away –
Your Tasks for this class:
Task 1 – Start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Create a clipping mask with a rounded rectangle (fill most of the document space and with a 40px radius) of a photo of geese in Ameland, inthe Netherlands by Frans Schouwenburg. The photo is available under Creative Commons agreement and can be found on Flickr.com. Create a Gaussian blur (7.4px) of the clipping mask and flatten the image. Save as a JPEG with this title: Class3_T1_Your_full_name.jpg (example: Class3_T1_Toni_Varsetti.jpg). Upload the file to MyKangan and keep a copy of the JPEG.
Task 2 – Use the same document from task 1 or start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Type the initials of your name in Impact Regular 200pt. If you have not done so in task 1, download the image of the geese in Ameland (see Task 1 for link). Place the file in your document (File>Place). When excepting the size make sure that the image is larger than the initials.
Finally create a clipping mask (the photos should only appear inside the text now). Save the file as a PNG with this title: Class3_T2_Your_full_name.png (example: Class3_T2_Toni_Varsetti.png). Upload the file to MyKangan and keep a copy of the PNG.
If you are in doubt about Toni Varsetti ask Lucine… 😉
The Layer Panel
The ability to create layers is a central aspect of Photoshop. It works like a collage, you place one photo on top of another and the one on top covers up the photos below it.
Layers Panel – Source: The Graphic Designer’s Digital Toolkit, Alan Wood, 5th Edition, 2011Layer Drop Menu Click image to see larger version
The Layer palette is located in the bottom right-hand corner with a tab called LAYERS. There are two menu items you should be aware of in the drop down main menu: Layers and Window.
Click on Layers to see a lot of actions that you can perform with layers. (See image) You can perform these functions directly from the layers palette as well, by clicking on the Layer Options Tab (small icon in the top right of the layers palette).
Click on Window in the main menu and see Layers ticked. This is were you can activate the Layer palette if you cannot see it on your screen. (If you are using a Windows PC notice the shortcut F7? This allows you to activate or deactivate the layers palette.)
Please read all the options of the image of the Layers panel (above) before advancing.
How to create a new Layer
You can simply click on the small icon in the Layers panel that looks like a sheet of paper (too slow)
You click on the Layer tab in the menu bar: Layer>New>Layer (too slow) or
You use the short cut: Ctrl+Shift+Alt+N (Mac: command+shift+option+N) – Nice! This will immediately create a new layer on top of your active layer.
You can use this short cut: Ctrl+Shift+N. This will open a options panel before the layer is created.
Layers in Photoshop are like a Collage of images stuck on top of each other… Monkey photo by deanjenkins and Green photo by omdur, both on morgueFile
How to move a Layer
Drag the layer in the layer panel into the new position. You can move it up (=on top of other layers in the workspace) or down (it will be partly hidden by layers above.
This is an easy and intuitive way. You will need to sometimes move it right between two layers and wait for a dark line to appear before releasing the layer.
You can also use the shortcuts: Ctrl+[ (or Cmd+[ on Mac) to move the layer up and Ctrl+] (or Cmd+] on Mac)to move the layer down.
You can use the Menu bar: Layer>Arrange>Bring Forward (or Backward)
How to make a Layer active or inactive
A layer needs to be active for you to be able to work with the artwork on the layer. Photoshop allows you to work on one layer at the time.
The active layer is high-lighted or shaded (generally it is the layer with the blue background and white text in the layers panel.)
To activate a layer simply click on the layer in the layer panel
If you want to select numerous layers hold the Ctrl button (Mac: Cmd) while selecting more layers.
How to hide and show a Layer
You can make the content of a layer invisible by clicking on the eye icon in the Layers panel. Clicking it again will make the content visible.
How to link Layers
Linking layers can be done by selecting numerous layers (with Ctrl) and then clicking on the chain symbol in the Layers panel.
How to group Layers
Group layers by selecting numerous layers and then either pressing Ctrl+G (Mac Cmd+G) or create a new group by clicking the Create a new group icon in the Layers panel (it looks like a folder) and drag any layer you want into it.
How to delete Layers
The easiest way is to select the layer and hit Backspace; this happens immediately.
If you are the old school type you might to simply drag the layer into the bin icon or click the bin icon and press enter to delete the layer.
How to draw Shapes
Using the Custom Shape Tool to draw a Rabbit – The rabbit is below the grass
Before you draw a shape place an image in the document (File>Place). In the example I have placed a photo of grass (found on http://www.morguefile.com > Petersphoto)
There are several tools that allow you to draw shapes. They basically draw vector graphic shapes that are linked to a layer. Try the Rounded Rectangle Tool tool. (If the tool is not visible, hold down the Rectangle tool near the bottom of the toolbox.) The shortcut is U – and Shift+U allows you to scroll through the tools options (it should be the second.)
Draw a rounded rectangle with a 25px radius (drag to draw).You will notice that drawing a shape will create a new layer as a default!
Try the other drawing tools as well.
I chose the rabbit custom shape. To find it choose the custom shape tool, it looks like a blob, see the sample images! Then go into the options menu bar and select the down arrow next to the custom shape (most likely a black arrow). This will open all the different custom shapes. Next click on the small outward arrow head in the top right of the box you have just opened. Select all and Ok. This will open all the custom shapes that Photoshop comes with. The rabbit should be in the selection.
How to create a Clipping Mask
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
Keep only one shape layer and delete all the others.
Place an image in the workspace: File>Place. Make sure the image is larger in size than the shape on the layer below. Right-click on your image layer and select Create Clipping Mask.
Male sure that you do this to your image layer and that the image layer is on top!!!
Your image layer has been reduced to the shape of the shape layer below. 🙂
Try to move just the image by selecting the image layer.
Try to move just the shape layer.
What is the difference?
How to use the Gaussian Blur
Make sure your shape thumbnail on your shape layer is selected. Go to the menu bar: Filter>Blur>Gaussian Blur and enter 7.4px for the Radius.
You should be prompted if you want to rasterize the layer. Click yes.
How to merge two Layers
Select two layers (left click + Ctrl) then right click and select Merge Layers.
How to flatten an Image
Right click on any layer and select Flatten Image or press Ctrl+Shift+E (Cmd+Shft+E on Mac)
Tasks
This completes today’s tutorials, please perform the below tasks:
Task 1 – Start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Create a clipping mask with a rounded rectangle (fill most of the document space and with a 40px radius) of a photo of geese in Ameland, inthe Netherlands by Frans Schouwenburg. The photo is available under Creative Commons agreement and can be found on Flickr.com. Create a Gaussian blur (7.4px) of the clipping mask and flatten the image. Save as a JPEG with this title: Class3_T1_Your_full_name.jpg (example: Class3_T1_Toni_Varsetti.jpg). Upload the file to MyKangan and keep a copy of the JPEG.
Task 2 – Use the same document from task 1 or start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Type the initials of your name in Impact Regular 200pt. If you have not done so in task 1, download the image of the geese in Ameland (see Task 1 for link). Place the file in your document (File>Place). When excepting the size make sure that the image is larger than the initials.
Finally create a clipping mask (the photos should only appear inside the text now). Save the file as a PNG with this title: Class3_T2_Your_full_name.png (example: Class3_T2_Toni_Varsetti.png). Upload the file to MyKangan and keep a copy of the PNG.
Naşide Clipping MaskClipping Mask by Lachy CClipping Mask by Brandon M and Anthony WClipping Mask Amelia BClipping Mask Dom UClipping Mask Dejanah PClipping Mask Dylan CSelection by TerranceMcGClipping Mask by Surour D
It is an exciting time to commence something new, so wear the badge Absolute Beginner with pride and get ready for a love affair with one of the best software packages of our time- welcome to Photoshop.
Suddenlylifebrokeout in warmcolors again, so young and beautiful that a lot of people couldn’t stand to look at it.
Quote from the film Absolute Beginners
We will work with Photoshop CS5 on a Mac. Prerequisites: 10 photos of you and 10 photos of a background saved onto your USB and in class (the excuse of the forgotten USB at home is lame) 😉
Today we will look at:
The CS5 Workspace (overview)
Differences between the Mac keyboard and Windows keyboard
Ways to open an image
Selection Tools
Use of Hue/Saturation function (Image adjustment)
Layer overview
Perform a task
Feel free to ask questions throughout class and to slow me down at any time. It is important that you view the instructions on the overhead first and then try them out yourself.
The CS5 Workspace (overview)
Please open this Link –CS5 Overview– of a 10 page PDF file (from Adobe Systems Incorporated 2010) in a new window or simply follow instructions in class.
On your screen find the application bar, the menu bar, the options bar, the document window, the tools panel as well as the other panels or palettes.
Source: Steve-hamlin.com
Activity: Click on Window in the menu bar. (Here are all the panels and palettes that you can activate or deactivate.) Click on Navigator and see the palette becoming active. Next drag the Navigator palette to the very left of the workspace or document window. Do the same with the Character Palette (this one is a bit harder to find and I leave it up to you to figure it out).
Next select New Workspace from the workspace switcher menu, name your workspace and tick the 2 boxes.
You have just created a new workspace for yourself. To get back to the standard workspace layout select Reset Essentials from the workspace switcher menu. Changing the workspace to suit your need can speed up your work and is more fun.
Differences between the Mac keyboard and Windows keyboard
These are the two main differences:
Ctrl (Win) = command (Mac)
Alt (Win) = option (Mac)
Ways to open an image
First ensure that you use a good folder structure. Save your 20 or so images from your USB onto the PC that you are working on into a folder with a short, yet descriptive name, eg images.
Select File>Open – find your images folder and select the image that you want to open. Photoshop will open the image at the image pixel size and at the resolution of the file.
Open the images folder and have Photoshop open and accessible. Now drag the image into the Photoshop window.
Create a New Document in Photoshop and choose File>Place. Next place the image into the document.
There are other options, such as dragging an image directly from a webpage into the Photoshop window or selecting File>Open As Smart Object. Photoshop is a very versatile software package. The most important is to know a way that keeps the resolution high.
Selection Tools
The Selection Tools in Photoshop are one of many strong points of this package. We will work with this slow loading instructions from the Teacherlink site: Selection Tool Instructions
Below is an screen shot of the Selection drop menu with annotations:
Source: The Graphic Designer’s Digital Toolkit, Alan Wood, 5th Edition, 2011
The Rectangular Marquee Tool (Short cut M) – This tool draws square (with the help of Shift) and rectangular selections (freehand). It is important to understand that you are actually not drawing as such, you are simply creating a selection and will be able to do something to that selection only and only on the current layer. Drag the image below into your Photoshop workspace and select a rectangular shapes. Press Ctrl + U and change the colour settings – just play with it. Keep the file active.
Image Source: http://www.photoshopessentials.com
The Elliptical Marquee Tool (Short cut M) – This tool draws circlular selections (with the help of Shift) and elliptical selections (freehand). You can draw the ellipse or circle commencing from the centre by holding Alt (option for Mac) while you draw your selection. Visit this tutorial on PhotoshopEssentials.com to see a good example on how to use the Elliptical Marquee Tool.
For this class select the red cylinder and change the colour as per instruction above.
The Lasso Tool (Short cut L). Basically you draw your selection freehand. It is an early Photoshop tool and has some good uses still (like creating a quick shadow underneath a vehicle with the help of Gaussian Blur). It requires a high level of mouse skills. Try to select the handshake with the Lasso tool and change the colour. Visit this tutorial on PhotoshopEssentials.com to see one good use of the Lasso Tool.
Polygonal Lasso Tool (Short cut L). You draw your selection by dropping points. It is an advanced version of the basic Lasso tool and can be very useful. It requires practice. Try the tutorial from PhotoshopEssentials.com: Polygonal Lasso Tool.
Magnetic Lasso Tool (Short cut L). You draw your selection by clicking once to select the outline of your object and then you simply follow along the outline and the tool does the rest for you. If a mistake occurs use Backspace to go back one step. It requires practice. Try the tutorial from PhotoshopEssentials.com: Magnetic Lasso Tool.
Magic Wand Tool (Short cut W). You make your selection by clicking in the field of what you want to select (eg inside the suit). The Magic Wand selects pixels based on tone and colour. You can change your selection criteria, for example by increasing tolerance your selection will be wider and less affected by tonal variations in the picture. That will result in a larger selection. If you bring the tolerance down it will result in a smaller selection, which means that changes in tone or colour will affect your selection earlier.
Try the tutorial from PhotoshopEssentials.com: Magic Wand Tool.
Quick Selection Tool (Short cut W). This tool is extremely useful as a selection tool. It is similar to the Magic Wand, but it is more advanced and user friendly. You make your selection by clicking in the field of what you want to select (eg inside the suit). The Quick Selection Tool selects pixels based on tone and colour, but it also has the ability to detect similar textures in an image. As a result it is better at detecting the edges of an object.
You can change your selection criteria by changing the size of your brush tip: increasing it will widen your selection and decreasing it will narrow your selection. For a more in detail description please look at this informative tutorial at PhotoshopEssentials.com: Quick Selection Tool.
How to add to or subtract from a selection Hold the shift key to add to an existing selection. Hold the Alt key to subtract from a selection. You will need to hold the key while adding or subtracting.
Use of Hue/Saturation function (Image adjustment)
This is a very quick intro to this function: Press Ctrl + U. 3 sliders allow you to change either the hue (the exact colour), the saturation (the amount of colour) and the lightness (the tone, lightness and darkness). You can also tick colorize to get a nice retro effect, it makes your selection monochromatic.
Layer overview
We will cover this in more detail in the next class. We basically will just have a look at the layers to get a broad understanding in class.
Perform a task – Important
Use the photos that you prepared for this class or simply copy the image of the gorgeous Tammi Terrell and Marvin Gaye below from the provided link and use it to apply your understanding of the Selection Tools. Select various parts using the different tools. Make sure to keep a copy of your final file in JPEG format and upload to MyKangan next week.
Hello and welcome to your first Friday class. This class will be focussing on Adobe Photoshop CS5 and the creation of a PDF file.
You will be expected to work in a blended learning context. You will receive instructions in class and complete tutorials and tasks outside class. Class time will be used to answer your questions and work on projects.
We will commence the class with some information on file formats. Please open the attached PDF file. This file has descriptions on file formats.
On completion of these tasks we will have a break! After the break I will organise you into 4 teams and get you to take a range of portrait/full portrait photos of each other and landscape shots of backgrounds.
There will be 2 Canon 1309 (10Mp) and 2 Canon PowerShot A560 (7.1MP) available from the library in building C. You can also use your mobile phone to take some of the pictures.
Shot List:
10 Full portraits (serious, thoughtful)
10 backgrounds with person in front. (Arrange camera so that the Rule of Thirds applies)
When taking the photos I would like you to consider:
Framing:When framing the picture, try to fill the frame with relevant and interesting elements.
Emphasis: Include a focal point of the photograph, a subject that is emphasized.
Angle of view: Take pictures from the subject’s eye level to capture it realistically, or change the angle to alter the point of view.
Balance: Create a sense of weight for the elements within the frame; some objects will have a large sense of weight and some will have a small sense of weight.
Rule of thirds: Offset your picture to help focus the viewer’s eyes on the subject.
Close-ups: Take close-up pictures to capture details and highlight specific objects.
Tone and sharpness: Use light and shadow to focus attention on or draw attention away from your subject. Have your subject in focus and blur the extraneous elements to draw viewers to the subject.
Arrangement: Remove objects not essential to the composition, or eliminate them by changing the camera’s perspective.
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com
Free Transform and Ctrl – I am loving it!!!
Layers in Photoshop are like a Collage of images stuck on top of each other…
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
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.
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
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
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
ruthworkx -http://ruthworkx.files.wordpress.com
Michael Pointing in GTA V – Courtesy of Rockstar
Photo by agathabrown on morgueFile
Only practice will help you learn! Photo by BreonWarwick on morgueFile
Based on a photo by delboysafa from morgueFile.com
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Photo by frenchbyte on morgueFile
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
Photo by ariadna on morgueFile
Work by Egon Schiele, found at Mom.org
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Photomontage: Amir Ebrahim Photography
Photo by clarita on www.morguefile.com
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)
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)
Source: morgueFile, Photo by matei
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com
Custom Shapes and Custom Shape Icon
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Based on image by hotblack on morgueFile.com – F.Viola
Grassy Rabbits
Massive Attack – The Essential Mix
Photo by hotblack on morgueFile.com
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Image from morgueFile by lemai13
Photo by DTL on morgueFiles
Couple found at http://frenchbydesign.blogspot.com.au
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
Illustration: Jamie McKelvie – Art Brut Record
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
Peace- Swiss International Style Reference – by Maryam Chananeh
Photo by mconnors on morgueFile
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
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
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Jenga, photo courtesy of: Design-Crit.com
“Step into my office” Source: The Age, click image for link
Illustrator unknown – found at: Ephemera – World of Rare Books
Luminescent Lines – Courtesy of: PSDLearning
Illustration by Kate Miller, found on DzineBlog.com
Example of applied changes
Geese in Ameland, Photo by Frans Schouwenburg
Good Morning! Photo: wallyir, from: morgueFile.com
Light Streaks – Courtesy of: PhotoshopEssentials
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/
Found at Inc.com
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)
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Italian movie poster found on Abduzeedo.com
Courtesy of The Art of Mass Effect Universe’, 2012
What Time is it Now? by King_Bobbles
Based on photo by dhester from morgueFile.com
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
Illustration by Jessie Ford, found on DzineBlog.com
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
Image Source: www.photoshopessentials.com
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
Photo by mcconnors on morgueFile
Concept for Gallery Screnshot
Lines and Gradients- Courtesy of: psdtuts+
Based on photo by xandert found on morgueFile
A Beautiful Piece by Aerosol found on his Facebook
Photo by Seemann on morgueFile.com
Image source: Data Center Knowledge
Work by Justin Anderson
Based on photo by hotblack from morgueFile.com
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
Examples of Output and Display for web-content. Image: live.surveyshack.com
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
Illustration by Jessie Ford, found on DzineBlog.com
Photo by dharder on morgueFiles.com
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Photo by matthewbridges on morgueFile.com
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
Courtesy of The Art of Mass Effect Universe’, 2012
Photo by omdur on morgueFile
He loves OHS! – Photo by Karpati Gabor on morgueFile
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
Close-up at Fed Square, Federico Viola 2013
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Illustration by Tavis Coburn found on DzineBlog.com
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
The Face by drfranken found on ChromoArt.de
Uncle Sam Wants You, WWI Propaganda Poster for US Army recruits, Design by James Montgomery Flagg, 1916, image found at: Live Auctioneers
Experimental Photomontage by Robert Heinecken
Constructivism Reference – by Lylah Livingston
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
Work by Jo W
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
![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](https://classoffederico.files.wordpress.com/2014/04/world-war-propaganda_auch-du-sollst-beitreten.jpg?w=269&resize=269%2C344#038;h=344 "world war propaganda_Auch du sollst beitreten")
RAE - Research and Exploration 