Example in Century Gothic The second one with a Photo Filter in 25% blue
Metal Texture
This tutorial is about creating a stainless steel texture with a brushed surface (similar to the image above) and apply it to a line of text.
Step 1:
Create a new document (Ctrl+N) and use these settings:
Preset: Web
Size: 1280 x 1024 px (h)
Resolution: 72 ppi
Step 2:
Use the Type Tool (T) and using capitals, type a word that relates to metal (the material) or signifies strength. You could even choose the name of a Metal band. I choose the word: ROYAL.
Font: Pick a Sans Serif, eg Century Gothic
Dimensions: something that fills the page, eg 280 pt, or use the Free Transform (Ctrl+T) to adjust the size.
Step 3:
Select the shape of your word, create a new layer and fill the selection with 50% Grey, then with Noise.
Hold Ctrl and click on the thumbnail of the Text layer (in the layer panel) to select the shape of the text
Create a new layer (Ctrl+Shift+Alt+N)
Fill the selection with 50% Grey – Press Shift+F5, Select Grey at 50%
Fill the selection with Noise: Filter>Noise>Add Noise
Amount: 100%, Distribution: Gaussian, tick Monochromatic
Step 4:
Apply Motion Blur
Apply Motion Blur Filter>Blur>Motion Blur
pick an angle that appeals to you (eg horizontal = angle:0)
Distance: pick a distance that creates long lines (I used 48 px)
Step 5:
Fill the text with 50% Grey. The edge of the text has become a bit see through.
Press Shift+F5
Select Grey at 50%
Select Behind for the Blending Mode
Step 6:
Use Curves to lighten the image up a bit.
Ctrl+M or Image>Adjustments>Curves
Manually adjust the curve
Step 7:
Use Bevel&Emboss to add depth to the text.
Double-click on you Type layer (around the title, not on the title – this should open the Layer Style/Blending Options.
Select Bevel/Emboss and change the settings
Bevel & Emboss – just an example
Step 8:
Save it as a PNG and try the same with a variety of (=5) different fonts.
When complete combine all the fonts on a page for presentation.
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
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Free Transform and Ctrl – I am loving it!!!
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Jenga, photo courtesy of: Design-Crit.com
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
What Time is it Now? by King_Bobbles
Courtesy of The Art of Mass Effect Universe’, 2012
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
Based on a photo by delboysafa from morgueFile.com
Based on photo by xandert found on morgueFile
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Only practice will help you learn! Photo by BreonWarwick on morgueFile
Work by Jo W
Work by Egon Schiele, found at Mom.org
Good Morning! Photo: wallyir, from: morgueFile.com
Photo by dharder on morgueFiles.com
Courtesy of The Art of Mass Effect Universe’, 2012
Grassy Rabbits
Italian movie poster found on Abduzeedo.com
Michael Pointing in GTA V – Courtesy of Rockstar
The Face by drfranken found on ChromoArt.de
Concept for Gallery Screnshot
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
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com
Photo by clarita on morgueFile
Photo by clarita on www.morguefile.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)
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Photo by mcconnors on morgueFile
Screenshot from What’s Your Story by Joyce Hostyn
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.
He loves OHS! – Photo by Karpati Gabor on morgueFile
Experimental Photomontage by Robert Heinecken
Light Streaks – Courtesy of: PhotoshopEssentials
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
“Step into my office” Source: The Age, click image for link
Photo by hotblack on morgueFile.com
Vista Lighting Effect – Courtesy of: Tutorial9
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Photo by mconnors on morgueFile
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
Photo by frenchbyte on morgueFile
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
Photo by Seemann on morgueFile.com
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Based on photo by hotblack from morgueFile.com
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
Constructivism Reference – by Lylah Livingston
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
ruthworkx -http://ruthworkx.files.wordpress.com
Photo by agathabrown on morgueFile
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
Layers in Photoshop are like a Collage of images stuck on top of each other…
Custom Shapes and Custom Shape Icon
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
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)
Geese in Ameland, Photo by Frans Schouwenburg
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
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
Work by Justin Anderson
Illustrator unknown – found at: Ephemera – World of Rare Books
Couple found at http://frenchbydesign.blogspot.com.au
Image source: Data Center Knowledge
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
Photo by ariadna on morgueFile
Example of applied changes
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
Luminescent Lines – Courtesy of: PSDLearning
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
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
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Peace- Swiss International Style Reference – by Maryam Chananeh
Photomontage: Amir Ebrahim Photography
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
Lines and Gradients- Courtesy of: psdtuts+
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
Examples of Output and Display for web-content. Image: live.surveyshack.com
Photo by matthewbridges on morgueFile.com
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
Found at Inc.com
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
Close-up at Fed Square, Federico Viola 2013
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
Based on image by hotblack on morgueFile.com – F.Viola
Photo by DTL on morgueFiles
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/
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)
Illustration by Kate Miller, found on DzineBlog.com
Based on photo by dhester from morgueFile.com
Illustration by Jessie Ford, found on DzineBlog.com
A Beautiful Piece by Aerosol found on his Facebook
Illustration by Jessie Ford, found on DzineBlog.com
x 1024 px (h)
![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=313&h=399 "world war propaganda_Auch du sollst beitreten")
RAE - Research and Exploration 