Helps@Hand

Photoshop
For Beginner & Advanced Adobe Photoshop Enthusiasts.

Simple & Effective

Tutorials for everyone
Differen t Blend Modes explain
e Learn this easy T

ed

xt Warp effect er Filters

Going into Rend

How Gradients add mood

CONTENTS

3 4 6 7 8 10 12
PAGE 2

Tools & Equipment Lens Flare

Learn the basics to your tools and enviroment in Photoshop. Using a combinations of the Lens Flare filter and numerous Layer Masks to create Electrical Orbs!

Pixel Stretch

Using 3 images, learn how to stretch pixels to make an awesome 3D looking, depthy piece in less than 20 minutes!

Web Banners Warping Text

Design an effective and versitile Web Ready style banner for your website! Create a magical looking, text flow to take your hat off too.

Here, There Be Monsters Badges

Combining a mixture of what youve achieved to create a stunning fantasy looking composition! A quick run through of how to create a really slick looking button using the Elipse tool!

Tools& Equipment
In this little run-through, youll get to know your tools better before you go dive head first into the world of Photoshop. The tools youre going to get familiar with are like your arsenal; Without them, you will be nothing, but without you, the tools are nothing but script and code in a programme. So lets get starts: Move Tool (V) The Move tool is the primary tool for moving a layer around after it has been placed. Marquee Tool (M) The RECTANGLE Marquee tool is used to select rectangular areas on images. The Marquee can also be used for Ellipse selections and single row selections. Lasso Tool (L) This tool is used to draw a selection, like that marquee tool, only there is more freedom to what you select. Under this, there is also the Magnetic Lasso tool and the Polygonal Lasso tool. Quick Selection Tool (W) This tool is used to select colour ranges, i.e. it will select a block of colour or transparency, based on wherever you click. Crop Tool (C) The Crop tool will crop your image to a specific size in the value boxes in the options bar at the top Eyedropper Tool (I) The Eyedropper tool works by changing the foreground colour to the colour of a pixel you click on. Spot Healing Brush Tool (J) This tool is used to amend scratches, specs, dust, spots, demishes and such on images. Getting the specific brush size is really important, as not to over-do the image correction. Brush Tool (B) Simply, the Brush tool is as it says it is; a brush tool! It paints on your image/layer in whatever color and brush setting you have selected. Clone Stamp Tool (S) Similar to the Healing Brush Tool, the Clone Stamp doesnt blend at the end, it simply creates a direct copy of information from the first selected area. History Brush Tool (H) In a similar way to the Brush Tool, the History Brush Tool, it paints, but it paints with teh original state of your image. (Window>History & you can see the Histroy palette) Eraser Tool (E) The Eraser Tool works like any other eraserl it erases whatever you click on in the layer. If you erase on the background layer, it will replace it with whichever secondary color you have selected. Gradient Tool (G) This tool lets you make a gradient of colours. It will create a blending of your background and foreground colour. Blur Tool (R) The Blur Tool is fairly self explanatory; it makes parts of the image you click on, blur. Dodge tool (O) Used to lighten up areas you use it on, the Dodge Tool can be set to highlights, midtones or shadows in the options bar at the top of Photoshop. Pen Tool (P) This tool is used to make accurate selections. You use it by click to add an anchor point and if you click and drag, it will change the shape of your path, allowing you to shape and bend the path for accurate selections. Text Tool (T) The Text Tool literally does just create text. Achieved by click and typing, you can edit the text further with the font and size settings. Path Selection Tool (A) This tool is used when working with paths. Rectangle Tool (U) This tool draws shapes layers in the form of rectangles (or, in the menu; ellipses, rounded rectangles etc.) Hand Tool (H) The Hand Tool is used for moving your entire image around inside the window, for example, if youre zoomed inand you need to navigate to a seperate part of the page, the Hand tool would be used. Zoom Tool (Z) This tool literally allows you to zoom in and out of Photoshop. Zooming out requires you to hold down Alt.
PAGE 3

Lens Flare
First things first, go to these two links and download the brushes and image: http://www.sxc.hu/browse.phtml?f=view&id=640917 http://r0man.de/free_photoshop_brushes.html

Step 1

Adobe Photoshop > File > New, then enter the following information: Width: 2048px Height: 1536px Resolution: 300px/ inch Colour Mode: RGB

Radial Mode: Normal Opacity: 100 Reverse: Selected Dither: Selected Transparency: Selected

Step 2

Source and open up the original image of the child. Then, select all (CMD+A). Making sure your Select Tool (V) in enabled, click and drag the selected image into the blank canvas you just created.

Next, draw your gradient OUT from the lens flare. Next, change the Blend Mode (Just above the layers) to Hard Light. You should end up with something that looks like this:

Step 3

Step 5

Create a new layer and title this Light 1. Fill (G) this layer in black and well now create the first energy orb!

Step 4

To create the basis for the light you need to go to Filter > Render > Lens Flare, and make sure you select the 105mm Prime. Now, to isolate the light from the black background you need to create a layer mask, like a layer this is really similar but you can mask out colours. Next, select the Gradient Tool (G) making sure you have the following settings enabled:

To add some flare to the orb, select the Brush Tool (B) and select one of the brushes we downloaded earlier. Create a new layer, and change the blend mode to Overlay. Make sure your brush colour is black, then paint on your brush! Now, open up the layer style by either double clicking the layer itself or right clicking and selecting Blending Options Then, select Outer Glow and make sure your settings are: Blend Mode: Screen Opacity: 75% Colour: #80a0f3 Spread: 0% Size: 5px Then select Colour Overlay; Blend Mode: Normal Opacity: 100% Colour: White.

PAGE 4

Step 6

Now, following the same steps again, you need to create another orb, & youll have something that looks like this: Now, were going to add the electrical field around the 2 orbs and our fierce little warrior. Firstly, you want to draw a circle, using the Eclipse tool (U), making sure both the Orbs are inside the circle. Duplicate this layer twice! Youll see why momentarily! Next, go to your brush tool (B) and select a soft brush with a hardness of 0% and change the size to 5px. Next, select the Pen tool (P) and right click on the circle and click Stroke Path. Make sure the tool is set as the Brush and that Simulate Pressure is selected. Then hit OK. Now we need to bulk up the light!

Step 7

To create the ripples in the surrounding field, you need to make sure the newly merged group is selected and go to Filter > Liquify or by holding down Shift+CMD and pressing X. Select a smallish brush size, I prefer 16px and just play around until you get an electric feel from your picturesee what I did there? Next, go to Filter > Distort > Ripple and change the Amount to 50% keeping the Size on medium. If you then click Filter, at the very top, youll see the last effect you used, in this case its the Ripple. Apply this effect two more times and you should get a fairly good-looking wavy effect. Next, group the first set of eclipses so you now have two individual layers for the field, then you want to move the two layers so theyre just above your background layer of the subject. Next, take the eraser tool (E) and rub out most of the field that is behind the subject. Now all this is complete, your image should look like this:

So, doing this two more times, well use some different brush settings; The second brush, I used a 45px brush and the third one at 100px. Next, change the blend mode of the top most layer to Linear Dodge (Add) and the opacity to 35%, then the middle layer to Overlay and the bottom layer to Linear Dodge (Add). Then put these layers in a group; You can either click the folder icon on the bottom of the layers panel, or go to Layer > New > Group. For the electric ripple effect you then need to duplicate this group of circles by right clicking and hitting Duplicate Group. Then you want to merge the layers in the group by right clicking on the new group and pressing Merge Group.

PAGE 5

firstly, go ahead and download these images, youll be using these to stretch in this tutorial: http://tutorial9.s3.amazonaws.com/uploads/2008/06/ photo1.jpg http://tutorial9.s3.amazonaws.com/uploads/2008/06/ photo2.jpg http://tutorial9.s3.amazonaws.com/uploads/2008/06/ photo3.jpg http://www.sxc.hu/photo/1005874

Pixel Stretching
Create a new document: Height: 500px Width: 500px Resolution: 300px/inch Background Colour: White Then fill it in this colour: #152935 Next, get the Brush Tool (B) and using a large brush, about 500px, hardness 0%, paint a black circle in the middle of the canvas. Hold Ctrl/Cmd and click and drag the top middle handle again so that the top of the layer being transformed is offset from the bottom of said layer. Finally, Hold Ctrl/Cmd+Alt+Shift and click and drag one of the top outer handles inwards so they meet in the center. This will give the illusion of a 3D box moving back into space.

STEP 1

STEP 4

STEP 2

Open up the first image you downloaded and select the Single Row Marquee Tool (Underneath the Marquee Tool). Now, select a fairly colour vivid section of the image and copy this (Edit>Copy or Ctrl/Cmd+C) and paste it into the original canvas in a new layer.

STEP 3

PAGE 6

Now were going to stretch this pixel out! Firstly, you need to make sure youre using the Transform Tool, simply click Edit>Free Transform or Ctrl/Cmd+T and stretch this set of pixels out enough to have a kind of front to the stretch. Next you want to duplicate this layer and stretch this new layer so its higher than the oiginal, were going to use this to create the 3-D effect; First, align the bottom pixels of your new layer with the top pixels of your first pixel stretch layer. Go into Free Transform Mode (Ctrl/Cmd+T). Grab the top middle handle, and drag it downwards to shrink the layer vertically.

Now youre going to create some shading around the image. Firstly youre going to shade around the front box. Get a soft brush about 100-200px in size and create a selection around the first set of stretched pixels. Using the black brush paint around one edge of the box to give the illusion of lighting. Try to avoid painting with the centre of the brush; focus on using the edge so you dont have clumps of black in the image. Now move the original pixel layer so it is ABOVE the diagonal layer, select the contents of the diagonal layer (Ctrl/Cmd+Click the thumbnail of the layer) and Expand this selection by one pixel (Select>Modify>Expand) With the layer still selected, paint a shadow towards the top of the stretch to make it look like its descending into 3D space.

STEP 5

Using the other two images, repeat the previous steps you just went through using different sizes of stretch and widths. You should also vary

the angles slightly to give it a more artsy feel. Next, merge the block layers (Select the pixel layers and right click and Merge Layers) and apply a Gaussian Blur(Filter>Blur>Guassian Blur) of 0.9px and change the Blend Mode to Colour Dodge. Finally, you can add a texture by placing in the last image you downloaded and setting the Blend Mode to Overlay and the Opacity to about 60 then you need to Desaturate the image (Image>Adjustments>Desaturate)

STEP 2

For this step, youre going to be adding the gradient fill. Go and select the layer blending options and select the Gradient Overlay setting. Using the colours; # 1291bb (The blue) and #000000 for the black, you should have something similar to this: Now create a new layer and, using the Marquee Tool, select a section of the bottom part of the layer. Then go into the Blending options and input the following: Drop Shadow; Blend Mode: Muliply Opactiy: 75% Angle: 94 Distance: 2px Spread: 0 Size: 5 Gradient Overlay Colour 1: #14222b Colour 2: #0e1319 Once this is all done, got and add some text for the navigation bar! I used Helvetica Neue on UltraLight.

STEP 3

Go ahead and select the Rectangluar Marquee Tool (M) and select around the first word you put in the navigation bar. Make it about this big: Now you want to go to remove the selected, so go Edit>Clear and you should have a nice little select looking effect going on!

STEP 4

Web Banners
STEP 1
Firstly, youll need to create a new document. For this piece, Id suggest something around about: Width - 1000px Height - 216px Resolution - 300 px/inch This will give you enough room for a navigation bar, a status bar and the splash of color in the middle with the company name.

For this step, were going to add an Apple style menu bar. First create a layer and make a selection with the Marquee Tool (M) that looks similar to this: next, open the Layer Style and select Gradient Overlay and input the following: Blend Mode: Normal Opacity: 100% Style: Linear Angle: 90 Scale: 100 Colour 1: #c0c1c3 Colour 2: #FFFFFF

STEP 5

This step is just about adding the logo as well as the tag line and the company name which I just used a brush for and two seperate Helvetica fonts.
PAGE 7

Warping
So, first things first, youll need to go download the only image file for this piece; the hat. This can be found here: http://images.buycostumes.com/mgen/ merchandiser/36436.jpg

Text
STEP 1
Youre going to want to open up a new Photoshop canvas, File > New... or Ctrl/Cmd + N. Preferably at: Width - 1280px Height - 720px Resolution - 150px/inch

STEP 3

STEP 2

So to start this off, youre going to need that funky looking background! Go over to the Gradient Tool (G) and input the follow setting in the Gradient Editor: Colour 1- #411530 Colour 2 - #000000 Making sure both the Opacitys are at 100% and that the Gradient is set to Radial. Next youre going too need to drag out from one side of your canvas with the gradient tool. To get the straightest and smoothest looking gradient, hold down Shift when you do this.
PAGE 8

Now youve got the basis down for what were working ON, youll need something to work WITH! Go and find the Hat image you downloaded and Place (File>Place...) it in onto the canvas. When it is placed, youll see it has a wire frame around it. Just hit enter and that will mean its ALMOST ready to have its background removed. Next, right click on the layer and select Rasterize Layer. This has now made the layer editable! So now you want to head over to the Quick Selection Tool (W) and select all of the white part of the image. Now head over to the Refine Edge button and change the following settings: Smooth - 1 Feather - 0.8px Then just hit the delete key and deselect your layer; Select > Deselect or Ctrl/Cmd + D. Then you just want to simply scale the hat down to a usable size.

STEP 4

Youre now going to want some text to warp, right? So select the Text Tool (T) and type in anything you like. The font settings youll want are: Font - Helvetica Neue Setting - Ultra Light Size - 10px Colour - White works best for this kind of thing. Now all of this is done, head over to the Select Tool (V), hit Ctrl/Cmd + T and rotate your text to an offset, upright angle. Once this is done right click on the layer and Rasterize Type.

STEP 5

Now youve got the basic text set up, you need to warp it about! To do this go to Filter > Distort > Wave... Depending on what youve got in your text box could deter how the next few steps pan out. Becuase I used a fair bit of text, I used my settings as: Number Of Generators - 5 Wavelength - Min. 50 + Max. 120 Amplitude - Min. 5 + Max. 35 Scale - Horiz. 100% + Vert. 100% Type - Sine Undefined Area - Wrap Around

STEP 9

STEP 6

So for this step youll be adding a glowy effect to the text. Go ahead and open up the Layer Style and select the Outer Glow option and input the following settings: Blend Mode - Color Dodge Opacity - 100% Colour - #faf5c1 Spread - 6% Size - 59px

The next step is one of the trickier steps in this tutorial, but lets give it a try! Create yourself a new layer and select your Brush Tool(B) set the size to 200px, the hardness to 0% and the colour to white. Then simply draw in a light. Next, open up the Layer Style and go to the Outer Glow setting and input the following configurations: Blend Mode - Screen Opacity - 75% Colour - faf5c1 Spread - 3% Size - 10px Once all this is done you need to select the Smudge Tool: Size - 35px Hardness - 0% Strength - 50% Just running over the painted on circle to give it a smokey looking effect, potentially rubbing out some parts with the eraser(E) if you think theres too much too get a descent enough looking effect with.

STEP 10

STEP 7

In this step youre going to add the fade at the top of the text. This is going to make the picture look more realistic once we add the light source to the hole in the hat. Firstly, go over and add a Layer Mask then select the Gradient Tool (G), making sure the gradient is set to Linear and the colors are Black & White. Then, from the top, draw downwards to the hat enough so only the first 7 or so letters fade out. Once this is all complete and your happy with how it looks, go ahead and right click and Duplicate this text layer and put these two layers in a Group. Now, with the second layer, go and rotate it slightly in another direction so you have two different looking warps.

STEP 8

For the next step, firstly, just turn off the layer effects on both the text layers then duplicate them and Merge them together so you now have one layer, for the two texts. Now go to the Gaussian Blur filter(Filter>Blur>Gaussian Blur) and set the Radius to 2.5pixels. Once this is done go over to the Eraser(E) tool and rub out a little section in the middle of the text. Feel free to turn the other text group back on now.

For this last step, well add a funky little particle effect to make it look a bit more magical. Select the Brush Tool(B) and choose the rough round bristle brush and set it to; Size - 100% Opacity - 100% Colour - White then just simply single click a lots of different particles around the hat keeping it toward the base. Once youve got this open up the Layer Style and apply the following: Outer Glow: Blend Mode Colour Dodge Opacity 75% Colour - faf4c1 Spread 6% Size 21px Inner Glow: Blend mode - Normal Opacity 75% Choke 2% Size 1px I added a simple cloud effect in the background for this image using a combination of the Marquee tool and Clouds filter and this is the result I got, and you should have something similar too:

PAGE 9

Here

ThereBe Monsters
Go ahead and download the files as descripted from this website: http://photoshoptutorials.ws/photoshop-tutorials/photomanipulation/how-to-create-an-out-of-this-world-medievalfantasy-themed-photo-manipulation.html

STEP 2

STEP 1

To begin open up a new file (File>New...) and input the following settings: Width: 1920px Height: 1080px Resolution: 300pixels/inch Color Mode: RGB Color; 8 bit Background Contents: Transparent Then you want to open up your Sea image and cut out the ocean using the marquee tool and paste it in the new document you just opened. Then rotate this using the free transform tool (ctrl/cmd+T) until it looks as it does here. Once this is done open up the Sky image you downloaded and rotate and flip this until you get the desired effect.

Create a new layer then you want to add the rain from the Brush Tool (B) option. Click on the brush options, then click the drop down arrow and click Load brushes and select the rain brushes. Then select this brush and draw in the rain with these settings applied: Brush size: 2500px Hardness: Default Opacity: 100% Flow: 100% #: ffffff Then Transform(ctrl/cmd+T) this and Flip Horizontally. Create a new layer and paint in the rain again with a different brush size: 2000px. Then, like before, Transform (ctrl/cmd+T) and Flip Horizontally. Create 3 new groups and name them appropriately, then in your Ship group place the first ship stock image you downloaded. After this, you want to change the Brightness and Contrast (Image>Adjustments>Brightness/ Contrasts): Brightness: +5 Contrast: +3 Next, select tthe Eraser Tool (E), with these settings: Brush size: 10px Hardness: 0% Opacity: 100% Flow: 100% and erase the bottom part of the ship like this:

STEP 3

PAGE 10

Once this is done, you want to give the lamp on the ship a glow, so select the Brush Tool (B) and use these settings: Brush size: 40px Hardness: 0% Opacity: 60% Flow: 100% #: fffee8 Now, to create the waves; Create a new layer and go Load-in the wave brush pack and select this brush and use these settings: Brush size: 400px Hardness: Default Opacity: 100% Flow: 100% #: ffffff Paint this just under the ship and rotate it so its in line with the boat under the part you erased. Now rub out any extra wave you dont need at the end and change the opacity to 70%.

Elements: Technique: Softer Spread: 0% Size: 70px

STEP 5

STEP 4

Open the image of the dragon stock image up and, using the Polygonal Tool (L), select around the top right dragon. Select the Move Tool(V) and click and drag the select area to the canvas. Now, using the transform tool, skrink the image to a reasonalbe size and rotate it until it looks fairly similar to this: Finally, change the Brightness and Contrast on this layer too: Brightness: -30 Contrast: -50 Once youve done this, go load-in the fire brush pack like you did for the other two packs and select this brush with these settings: Brush size: 400px Hardness: 0% Opacity: 100% Flow: 100% #: deec5e then change the Blending Style to the following: Styles: Outer Gow Blend Mode: Lighten Opacity: 50% Noise: 0% #: ff6000

Now were going to add some Adjustment layers to the image to give it more feel. First, click on the Create NewFill or Adjustment Layer and select Solid Colour and use this color: #00002d. Then change the Blend mode to: Exclusion and the Opacity to 50%. Create another Solid Colour using this colour: #52341a and this Blend Mode: Soft Light. Opacity: 40%. Next, create a New Colour Balance fill/adjustment layer and use the following settings: Color Levels: -41, 0 , -28 Tone Balance: Midtones Preserve Luminosity: Check Color Levels: +15, 0, 0 Tone Balance: Shadows Preserve Luminosity: Check Color Levels: 0, 0, -10 Tone Balance: Highlights Preserve Luminosity: Check Now create a New Gradient Map Fill/adjustment layer and select the black and white gradient, then change the Blend Mode to Colour and the Opacity to 60% Next open up a new Photo Filter Fill/ adjustment layer and use these settings: Filter: Warming Filter (85) Density: 25% Preserve Luminosity: Check Then create another Photo filter Adjustment layer and use these settings: Filter: Warming Filter (LBA) Density: 25% Preserve Luminosity: Check Next, create a new Brightness/ Contrast Fill/adjustment layer and input the following: Brightness: +10 Contrast: +15 Followed by another Solid Colour Adjustment layer using this colour: #ffe081 and change the Blending Mode to Colour and the Opacity to 20% Next, create a new Black and White Adjustment Layer and set the Black to 0 and the White to +3. Finally, create one more gradient map and choose Black and White and change the Blending Mode to Luminosity and the Opactiy to 80%. Now right click on any layer and click Flatten Image.
PAGE 11

STEP 6

To give the image a traditional paintinglike feel, we need to add some textures. Open up the Canvas texture and Rotate (Image>Image Rotation>90cw). Then Select All (ctrl/cmd+A) and select the Move Tool and click and drag to the Original. Now change the Blending Mode to Multiply and the Opacity to 70%. Finally, Open up the Grungy Paper texture and, like the Canvas texture, rotate and drag it into the image and use the following settings: Blending Mode: Hard Light Opacity: 30% Fill: 30%

STEP 2

Next, using the Ellipse Tool (U) draw a circle in the middle of the canvas and fill it in with any colour you like. I went for #F05528.

STEP 3

Now you want to Rasterize the circle! This is an important part of this tutorial, then you need grab your Polygonal Lasso Tool (L) and select the corner of the shape.

STEP 4

Right click the selection and click Layer Via Cut. You should now have this shape in a new layer. Rotate the peel effect layer (Edit > Transform > Rotate 180) and adjust its position until youve got it in the right place.

Badges
STEP 1
Firstly, go download a background. Any background. Go to Google and just search for Wood and download a fairly large image. Then open up the newly downloaded image in Photoshop.
PAGE 12

STEP 5

Next, you want to open up the Layer style of the orange shape and, in the Gradient Overlay setting, input the following settings: Blend Mode - Multiply Opacity - 41% Gradient - Black to White Style - Linear Angle - 131 degrees Scale - 29%

STEP 6

Now its time to add the text! Put in whatever you feel its right, for this, I put in FREE TODAY so I could put it on the front of this magazine, clever eh? Then simply rotate it to make everything flow and thats it! It really is that simple!