Introduction to Photoshop: Tutorial 2

Mini Project

Ok, just to put a few things into practice we’ll have a go at designing what I call a ‘mock-up’ design. Often when doing web design for a client they will want to see a number of different designs. I tend to throw some ideas on a block level together in Photoshop, to help me visualise how a layout will work in reality, so we’ll have a go at putting one together.

I’ll warn you now, this is not going to be the next Sistine Chapel, but if your very new then it may help to reinforce what tools are used where etc, etc; so without further ado head for Photoshop.exe :D

So Photoshop is open, head to File – New (CTRL + N), the new project dialog box will open, w00t!. We can set the starting dimensions, project name and whether we want a transparent or white background. Lets live fast and hit Transparent shall we? As far as Resolution and Color mode go default is fine (72ppi and 8bit RGB). My dimensions were 460px width and 200px height, but choose what you like . .

Next thing I’ll do is give it a white background, so select the visible layer and fill it with white (remember the default colours trick? [Hotkey: D], then the fill trick? [CTRL + Backspace to fill with background colour, ALT + Backspace to fill with foreground colour]

I’ve decided the company I’m designing for is an IT company, so I’ve found a nice, ROYALTY FREE image of a ‘doodah’ (see right), I’ll go to File – Open, (CTRL + O) and open the image of me ‘doodah’, and it will open it up in its own lil window (note if you want the image then right click and ‘save as’ (or if your ‘l33t’ head to the includes folder ;) ). Now note how the new image is in its separate window, and in the layers pallate the only layer will probably be called “Background”, so double click that layer to change its name to “Layer 0” (we are doing this so we can edit the image”, then hit enter.

Then select the move tool (Hotkey: V) and whilst holding ALT click and drag the image into your project canvas. Alternatively, CTRL click the “Layer 0” with the ‘doodah’ on it and then hit CTRL+C to copy it, then head into your project canvas and hit CTRL+V to paste it in. Either way the ‘lil beut should be on our project canvas now. What’s more Photoshop should of kindly put it on its own layer for us!, so with that layer selected, and the move tool still active we can position the image where we want it, check the image below to see what I have so far.

So I can see a line at the right edge of the ‘doodah’ on my image, which I want to quickly remove, also i'd like to soften the image into the background a little . .guess what, I’m going to use a mask!!! So with the image layer selected apply a mask (see above :P), I took my gradient tool and dragged from the top left to the bottom right, creating a gradient flowing from white (top-left) the black (bottom-right), note how the image is now blended in much better . .if you suffer (as I do) from tourettes of the mouse finger, then you can always go back a step on the history channel and re-do your gradient until you’re quietly delighted with it.

Ok, we need a title! So, create a new layer (Layer – New Layer, SHIFT + CTRL + N, or the ‘new layer’ button), and select the type tool (Hotkey: T) then select your desired font, size from the options bar, and type away, then hit enter . .you can place the font anywhere, then move it afterward with the move tool. You can also amend it, by again selecting the type tool and clicking on the text, or even, again with the type tool active, double clicking on the text layer.

Now I want to add an underline to the title . .so, again, new layer, then select the single pixel row tool, (in the marquee tool section), then click on the canvas to add the selection, after this you will need to fill the selection with the colour of your choice (I chose black), after filling deselect the row (CTRL + D) and you can now move it if you wish by selecting the move tool and dragging it around (the benefit of putting the line on its own layer ;) ). See below for what I have so far.

Ok, the underline is . .well, oppressive to say the least; so I know . . I’ll fade it in! Apply a mask to the underline, I then selected the gradient tool, made sure I was working on the mask, then dragged from right to left (white to black) so that the line faded out nicely . . .beautiful!

Well, we’re getting there, next thing I want to add is a box area where the content will go, so you know the drill! New layer, then to make the box I selected the rectangular marquee tool and drew a selection onto the canvas . . .then filled it with a nice shade of grey. It looks ok, but it’s a little harsh, so I’ll use a technique called ‘Feathering’. Go back a history step until before we drew the selection, now draw it again (on its separate layer), and before we fill it, head to Select – Feather (CTRL + ALT + D) and enter a value (I entered 7px, but feel free to experiment . . again the history panel is your friend!), after you’ve done this, now fill your selection and see how the edges are now faded? Neat huh! I also lowered the opacity of the layer, using the opacity slider on the layers tool bar as well, just to soften the box yet further (too around 15% or so). See what I have so far . .

And for now that’s about that, I added where I wanted the navigation to go above the ‘doodah’ using text on a path I created (which I’ll demonstrate in the next tut, when we cover vectors *shudders*), I also added a footer, and tweaked the overall appearance a little, see below for my finished piece.

Summary

Ok, so there was a little overuse of the mask function . . I admit . . but it just demonstrates how frequently you can use it to achieve a quick result. Hopefully the whole project has shown you that the more familiar you become in working with Photoshop, the quicker you can produce these little pieces and how useful a program it is for a variety of uses.

In your early stages, there really is no substitute for practice with the basic tools . . such as the move tool, the marquee tools etc etc, these are the building blocks and the more familiar you get with these the easier and quicker you will work . . Filters, specific techniques will come later, and can be picked up from any of a million sites offering click-by-click guides on how to produce a specific something . . .These are great for developing different techniques . . but until you have the basics, even these click by clicks can lead you down the wrong path.

In the next tut I hope to cover vectors ..and the use of the pen tool specifically, again people tend to be scared of it, but its probably the most powerful tool that Photoshop has, and its uses knows no boundaries! AND, it’s actually really really easy to use!