Think about a typeface suitable for a Ladies’ Cosmetics brand, in the higher price bracket and prestigious. What typeface/fonts can you think of?
Find a typeface that suits:
Ladies’ Cosmetics brand, in the higher price bracket and prestigious
Sport clothing brand for ball sports, to be used on shirts, pants, socks and shoes
Brand of healthy food products from sustainable ethical plantations with a fair trade commitment
Revisiting Tools and Functions:
Open Illustrator at A4 with a landscape orientation and 4 art boards. Copy the words that your teacher writes and play with them as suggested.
Using Effect>Warp>Bulge on the word ExpansionUsing the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
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
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.
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
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/
Concept for Gallery Screnshot
ruthworkx -http://ruthworkx.files.wordpress.com
Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
Illustration: Jamie McKelvie – Art Brut Record
Based on photo by xandert found on morgueFile
Photo by Seemann on morgueFile.com
Only practice will help you learn! Photo by BreonWarwick on morgueFile
Illustration by Tavis Coburn found on DzineBlog.com
Photo by mconnors on morgueFile
Based on photo by dhester from morgueFile.com
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
He loves OHS! – Photo by Karpati Gabor on morgueFile
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
“Step into my office” Source: The Age, click image for link
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
A Beautiful Piece by Aerosol found on his Facebook
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
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
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
Courtesy of The Art of Mass Effect Universe’, 2012
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.
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
Courtesy of The Art of Mass Effect Universe’, 2012
What Time is it Now? by King_Bobbles
Layers in Photoshop are like a Collage of images stuck on top of each other…
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
Photo by mcconnors on morgueFile
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/
Photo by matthewbridges on morgueFile.com
Example of applied changes
Jenga, photo courtesy of: Design-Crit.com
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com
Illustrator unknown – found at: Ephemera – World of Rare Books
Photo by omdur on morgueFile
Based on a photo by delboysafa from morgueFile.com
Michael Pointing in GTA V – Courtesy of Rockstar
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
Geese in Ameland, Photo by Frans Schouwenburg
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
Illustration by Jessie Ford, found on DzineBlog.com
Image source: Data Center Knowledge
Work by Justin Anderson
Photo by DTL on morgueFiles
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
Screenshot from What’s Your Story by Joyce Hostyn
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
Constructivism Reference – by Lylah Livingston
Grassy Rabbits
Photomontage: Amir Ebrahim Photography
Based on image by hotblack on morgueFile.com – F.Viola
Lines and Gradients- Courtesy of: psdtuts+
Experimental Photomontage by Robert Heinecken
Custom Shapes and Custom Shape Icon
Photo by dharder on morgueFiles.com
Based on photo by hotblack from morgueFile.com
Photo by hotblack on morgueFile.com
Illustration by Kate Miller, found on DzineBlog.com
Couple found at http://frenchbydesign.blogspot.com.au
Found at Inc.com
Illustration by Jessie Ford, found on DzineBlog.com
Vista Lighting Effect – Courtesy of: Tutorial9
Close-up at Fed Square, Federico Viola 2013
Photo by frenchbyte on morgueFile
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Italian movie poster found on Abduzeedo.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)
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)
Free Transform and Ctrl – I am loving it!!!
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Massive Attack – The Essential Mix
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
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
Image Source: www.photoshopessentials.com
Uncle Sam Wants You, WWI Propaganda Poster for US Army recruits, Design by James Montgomery Flagg, 1916, image found at: Live Auctioneers
Photo by ariadna 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
Photo by clarita on morgueFile
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Examples of Output and Display for web-content. Image: live.surveyshack.com
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
Work by Egon Schiele, found at Mom.org
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
Good Morning! Photo: wallyir, from: morgueFile.com
Image from morgueFile by lemai13
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
Peace- Swiss International Style Reference – by Maryam Chananeh
Work by Jo W
Photo by agathabrown on morgueFile
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Luminescent Lines – Courtesy of: PSDLearning
Photo by clarita on www.morguefile.com
Light Streaks – Courtesy of: PhotoshopEssentials
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
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)