Analyse Information + Assign Meta Tags – Week 6

Photo by dhester on morgueFile.com
Photo by dhester on morgueFile.com

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6

Content:

  1. Complete a Tutorial
  2. Lines in Photoshop
  3. Feedback

Complete a Tutorial

Select a tutorial from below, complete it, add meta-data to the PSD file. Save as a JPEG and email a copy to me(with all relevant meta-data).

Lines in Photoshop

As we saw last week working with lines can be a lot of fun and create very dynamic results. Photoshop has many interesting options on using lines. Particularly the many effects that are part of Photoshop can lead to stunning results.

Windows Vista Aurora Effect – a good and reasonably easy to follow tutorial by a favourite site of mine: Tutorial9.

Vista Lighting Effect - Courtesy of: Tutorial9

Vista Lighting Effect – Courtesy of: Tutorial9

Luminescent Lines – this tutorial from a great Photoshop tutorial site – PSD Learning – looks at customising brush dynamics. Fun to do and an interesting start: use a photo to create a suprisingly abstract and attractive background. A good tutorial to try on your own.

Luminescent Lines - Courtesy of: PSDLearning

Luminescent Lines – Courtesy of: PSDLearning

Gentle Curves of Pure Light – follow the tutorial from PhotoshopEssentials in class to create gentle curves with the pen tool and turn them into bright light.

Light Streaks - Courtesy of: PhotoshopEssentials

Light Streaks – Courtesy of: PhotoshopEssentials

Abstract Background – this is a more basic tutorial from YourPhotoshopGuide. It is good to introduce the Lens Flare filter and makes good use of the Free Transform and copy layer options.

Luminescent Twirls- Courtesy of: YourPhotoshopGuide

Luminescent Twirls- Courtesy of: YourPhotoshopGuide

Wavy Blackberry Style Wallpaper – this is a great tutorial from psdtuts+. It consists of 16 steps, but the result is convincing and you will learn a few good techniques on how to work with gradients and how to add depth to your work.

Lines and Gradients- Courtesy of: psdtuts+

Lines and Gradients- Courtesy of: psdtuts+

Lines Tutorial – follow the in-class instructions to create an image like the one below. I basically used the Brush tool and drew straight lines. Next I multiplied layers (Ctrl+J) and changed the layer blending mode.

I added a photo, in the example a photo of Grace Kelly and masked selections.

Study - Lines and Grace Kelly - by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com

Study – Lines and Grace Kelly – by Federico Viola
photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com

Other links with many excellent tutorials:

40 Cool Abstract and Background Photoshop Tutorials – by Hongkiat Lim

25 Useful Photoshop Background Tutorials | Vandelay Design Blog

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Advertisements

Photoshop Class 4

Link to Class 5     Link to  Class 3     Link to Class 2     Link to Class 1

Today we will look at a lolly bag 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…

This is what we will cover today:

  • Creative Commons
  • Examples of CC: Photo Pin, FlickR, Google
  • Layer Blending Modes
  • Layer Masks
  • Gradient Tool and Layer Mask
  • Today’s Task

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

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.

CConFlickR

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.

FlickR  – Photo Pin  –  Google Search

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.

Try this link for more Creative Commons information.

Layer Blending Mode

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)

Layer_Mask

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

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:

  1. Create a new document (use dimensions below)
  2. Place an image and change size as you see fit (press Enter)
  3. Create a layer mask (click the layer mask button)
  4. 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)

Task_New Document

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:

Layer Blending  Masks Banner

Banner by Vlad K

Banner by Yong Wu

Banner by Yong W

Banner by Mike T

Banner by Mike T

Banner by Fatma Y

Banner by Fatma Y

Photoshop Class 3

Link to Class 5     Link to Class 4     Link to Class 2     Link to Class 1

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.

Only practice will help you learn!Photo by  BreonWarwick on morgueFile

Only practice will help you learn!
Photo by BreonWarwick on morgueFile

In today’s class we will look at:

  • the Layer panel
  • how to create a new layer
  • how to move layers
  • how to make a layer active
  • how to hide and show a layer
  • how to link layers
  • how to group layers
  • how to delete layers
  • how to draw shapes
  • how to create a clipping mask
  • how to use the Gaussian Blur
  • how to rasterize a layer
  • how to merge two layers and
  • how to flatten an image

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, 2011

Layers Panel – Source: The Graphic Designer’s Digital Toolkit, Alan Wood, 5th Edition, 2011

layer_drop_menu

Layer 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...

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

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.

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.

—–

Here is a link to a Clipping Mask tutorial on SalinStudio.com

Student Submissions:

Yong - Clipping Mask

Yong – Clipping Mask

Justin Clipping Mask

Justin Clipping Mask

Naşide Clipping Mask 1

Naşide Clipping Mask 1

 

Naşide Clipping Mask

Naşide Clipping Mask

Clipping Mask by Lachy Carter

Clipping Mask by Lachy C

Clipping Mask by Brandon M and Anthony W

Clipping Mask by Brandon M and Anthony W

Clipping Mask Amelia B

Clipping Mask Amelia B

Clipping Mask Dom U

Clipping Mask Dom U

Clipping Mask Dejanah P

Clipping Mask Dejanah P

Clipping Mask Dylan C

Clipping Mask Dylan C

Selection by TerranceMcG

Selection by TerranceMcG

Clipping Mask by Surour D

Clipping Mask by Surour D