Create a Banner for a Card

 

This is a Basic Photoshop Tutorial

  • I used CS5, but this tutorial will work on all recent versions
  • The tutorial is written for IBM PCs, if you are using a Mac convert the short cuts:
    • Ctrl becomes command
    • Alt becomes option
Based on photo by kconnors from morgueFile.com

Final product! Based on photo by kconnors from morgueFile.com

In this tutorial you will learn to

  • create a file for the Web,
  • place an image,
  • place a semi-transparent layer on top,
  • adjust the size of an object,
  • add text,
  • group layers,
  • make text ‘punch through’ a background
  • save a file for web purpose

Step 1 – New Document

Create a new document (Ctrl+N or File>New…) and use these settings:

  • Preset: Web
  • Size: 620 (w) x 411 px (h)
  • Resolution: 72 ppi

This is a fairly small size and you can go for a larger size if you wish (eg 800 x 530px). I chose a small size to keep the file size small.

Insider joke: do not use Ctrl+End, but Ctrl+N (Feray and Cliff will understand)…

Step 2 – Save Image

Click the image of Sydney Harbour Bridge (by kconnors and found on morgueFile.com) for this tutorial and save it to your computer or USB. Preferably you want to get a large enough file to work with. So, click on the image and follow the link, select Download Image on morgueFile.com.

Photo by kconnors on morgueFile.com

Photo by kconnors on morgueFile.com

Step 3 – Place Image

Place the photo in your document (File>Place and find the file).

After placing adjust the size to fit in your image window. Make sure to hold Shift while adjusting the size (by shifting the corner points). Hit Enter to except.

Drag from corner points and hold shift to maintain same ratio.

Step 3 – Drag from corner points and hold shift to maintain same ratio.

Step 4 – Create a New Layer and Fill With White

Create a New Layer

  • Press Ctrl+Shift+Alt+N (yes this is a looooooooooong shortcut) or click on the icon for New Layer in the Layers panel.

Fill the layer with white

  • Press Shift+F5
  • Select White at 70% Opacity

You can change the opacity in the Layers panel later.

Step 5 – Change Size of White Layer to Small Banner

Use the Free Transform function (Ctrl+T or Edit>Free Transform). Follow the instructions in step 3 in regards to changing the size. Reduce the opaque white background to the size of a banner and press Enter. (See image)

Drag the centre points down and up to be left with a banner, next press Enter.

Step 5 – Drag the centre points down and up to be left with a banner, next press Enter.

The underlined text and insertion point at end of the word indicates that you are still in the type mode.

Step 6  – The underlined text and insertion point at end of the word indicates that you are still in the type mode.

Step 6 – Type the Title

Use the Type Tool (T) and using capitals, type ‘SYDNEY HARBOUR BRIDGE’.

  • Font: Pick a Sans Serif, eg Century Gothic
  • Dimensions: something that fills the page, eg 46 pt.
  • Click on the tick on the top right hand side of the page or click on the move tool to exit the type mode.
  • Now you can use the , or use the Free Transform (Ctrl+T) to adjust the size.

Step 7 – Group the Layers

  • Click on your Type layer to select it
  • While holding Shift click on the layer with the banner (most likely Layer 2) – this should select both layers.
  • Press Ctrl+G to group the selected layers.

Step 8 – Blending Options

  • Access the Blending Options by double clicking on the Type layer. Click on the blue, high lighted area around the title. It should open the Blending Options/Layer Style window.
  • Change the Fill to 0% and the Knockout to Shallow.
  • Press OK.
Change the Fill to 0% and the Knockout to Shallow.

Step 8 – Blending Options – Change the Fill to 0% and the Knockout to Shallow.

Step 9 – Save the File

Save it as a PNG and select interlaced. Finito! Benissimo!

Create Texture in Photoshop

 

Photo by photojock on morgueFile.com

Photo by photojock on morgueFile.com

Content for Today’s Tutorial

  • Create Metal Texture
Example in Century Gothic  The second one with a Photo Filter in 25% blue

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 (w) 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

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.

Typography Class 4

Link to Class 5       Class 3      Class 1

Finally we will get started in using Adobe Illustrator. We will be working with Illustrator CS5.

Today’s class will cover a basic Illustrator introduction:

Note: All shortcuts for the Mac need to use command for Ctrl and option for Alt

  • Basic Shape Tools – Rectangle (M), Ellipse (L), etc
  • Selection Tool (V)
  • Direct Selection Tool and how to move Anchor points
  • Fill and Stroke (X) and how to swap colours, change colours etc
  • Type Tool (T) and the Character Panel (Ctrl+T)
  • Outline Text (Shift+Ctrl+O)
  • How to Align (Shift+F7) and Distribute
  • Pathfinder (Shift+Ctrl+F9) and particularly Unite and Minus Front

Task on paper and in Illustrator:

Afterwards you will receive a task that will focus on creating, manipulating and morphing a word according to its meaning.
During this exercise concentrate on and carefully consider the word. What is its meaning and how can you use typography to convey it?

Step 1: Choose two words from the list below:

Compression
Transition
Contraction
Addition
Subtraction
Disruption
Repetition
Elimination
Migration
Expansion

Step 2: 

Brainstorm the meaning, synonyms, visual ideas and any concepts that explain the word. Do this on paper and spend a minimum of 10 mins on a word and really dig deep in regards to how to visualise the meaning and feel.

Example: Organisation might be related to grid, rhythm, same colour, repetition, stacking, clusters, military, direction, unity, lack of individuality, mathematical, number related, folders, drawers, etc.

Step 3:

Create the word image in Illustrator. Call the document Type_Class4_yourname_word1 ( Type_Class4_FedericoViola_word1).

Dim: A4, Landscape, 3 Artboards

Task_New Document

Step 4/ Homework:

Create a new word! Make it up and give it a meaning that only you know. Give the word visual meaning. The other students will have a try at understanding the meaning from your visuals.

Exercise has been inspired by exercise in Graphic Design School, David Dabner, Sheena Calvert and Anoki Casey, 4th edition 2010