View Full Version : .::Feraligatr Grid Banner Tutorial::.

Gem N Ems
01-27-2009, 05:10 AM
Note: This was made in Photoshop CS3 - Other versions may differ.

Okay, so I've noticed a lot of people don't know how to make grids or such in Photoshop.

Well look no further! This tutorial will show you how to do that and end up with a banner that'll be looking like the Vaporeon one in my sig.

1. So, first thing's first. Set your document to these specs:


2. Next you should find a nice render online. I suggest Deviant Art or just search through google if you don't want to do that. You can also make one yourself by all means.

I'm going to use a grunge style effect for this banner. Just open the file and either copy/paste or drag it into the banner file. (Or you can just copy and paste the picture directly. Saves me explaining the next part) Just as a warning, make sure the layer is unlocked first before you try to move it, otherwise it won't work.

Like this:


Okay, so now you have a render in your banner file. I'm going to add a couple more just for a nice effect. I'll show you what I mean.

NOTE: If you want to resize an image, just press control + T. This allows you to use the tool 'free transfrom', which can also be selected with a right-click or in the tools window.

You can also drag a layer above or below another layer to move it either underneath, or over the top. This is a very handy technique.

3. This is where it gets fun. I'm going to blend my renders together to create a nice grunge background.

Okay, under the layers menu, up the top is a drop down menu that right now probably says normal. Like this:


So now I'm going to click on that and set it to 'overlay'.

It now turns from this:


Into this: (Note that I did move around my layers before I set it to overlay ^^')


Neat, huh? Now I'm going to do it again to the other layer below. But this time I'm going to select 'hard light' because it looks better.

If you want to, you can just go over the layers with a soft eraser to get rid of anything you want. Just make sure you set the opacity at the top to something low, like 10 or 20%, otherwise you'll just end up erasing whole parts of the layer. Unless that's what you want.

Go ahead and give it a try. Also feel free to mix and match the layers around if you want to. This is my end result:


4. Okay, now I'm going to add a render of the Pokemon Feraligatr. I chose this because it goes with my blue background.

So now I have something like this:


5. I'm going to now set the Feraligatr layer to 'hard light' because, again, overlay doesn't really work here. Experiment with other blending modes if you wish.

Since Feraligatr looked too dark on hard light, I'm going to erase some more of the layers to make him look better. Now this is what he looks like:


I'll just use a soft eraser to go around Feraligatr so he looks like he's more blended. This is an extra step; you don't have to do it.

6. I bet it's starting to look good now. So it's time for me to add a grid to the banner.

First you need to create a new file with these specs (control + N or File > New). Or if you want, you can alter it for a different effect.


NOTE: Make sure you set the layer to 'transparent'. Otherwise you'll just have to get rid of the background.

7. Okay, now draw two lines on the page like this:


You can either do this with the pencil tool or the brush tool. If you don't know where they are, they're both located in the tools window to your left. Just scroll over the tools to see what they are.

8. Now we want to define this as a pattern. So we go up to Edit > Define Pattern. like this:


A screen should come up saying 'Pattern Name'. For now, let's just call it grid. Enter and hit ok.

9. Right, now we don't need that file anymore, so you can get rid of it. Or save it if you want.

Before you do anything else, create a new layer above all your others. I called mine grid, but you don't need to name it. Make sure you select that layer.

Now you need to go up to Edit > Fill. This will allow you to chose a fill for your page.

And it comes up with this screen:


10. Now from the drop down menu at the top, make sure you select 'pattern'.

Then under 'custom pattern', scroll down until you find the grid pattern you just made. Okay that's fine. Hit okay or press enter.

You should have something that looks like this:


11. Now we're going to add a layer mask so that we can play around with it a bit. So down the bottom in the layers window, there will be an icon for layer mask. Hit that.


A white rectangle should appear next to your layer like this:


12. Alright, still on that layer, we're now going to select the gradient tool, which is this one:


If you see the paint bucket tool, just right-click or hold down the left mouse button. This allows you to change to the gradient tool.

13. Now still on that layer, drag the gradient tool across the page. Experiment a bit if you want. In the end you should have something like this:


Voila! Now we're almost done. It's time to add some text.

14. Select the text icon from the tools window to the left.

Type something in. Whatever you want. I'm using the font called 'Conrad Veidt' which I downloaded from http://www.dafont.com/. If you need any fonts, they'll have it.

Change the size, colour (the colour boxes are the two black and white squares near the bottom of your tools window) and whatever, until you have what you want. Now I'm going to select hard light from the layer blend menu, but overlay works just as well. You should have something like this:


15. You probably can't even see it! But that's okay. In your text layer, double click on the layer iteself, or click the 'add layer style' icon down the bottom where you found the layer mask icon. That should open up 'Layer Style' menu, like this:


16. Go ahead and click on 'stroke' down the bottom. Here you can change the size and colour of the stroke if you want. Then hit ok. You should now have something like this:


Add some more text if you want, or just leave a heading. I'm going to add something else.

17. Now I'm going to rasterize the text so I can play around with it. So I'm going to click on the eraser tool and then on the page. It should come up with this:


18. Click ok. That will rasterize the text, or in other words, turn it into an image. Now I'm going to erase some of the outside to blend it in more. You should end up with something that hopefully looks like this:


19. Almost there! Now to add the border. I'm going to make a pixel border like on my Vaporeon banner.

But before we do that, I need you to go back to your layers window and select the arrow on the top right hand side.


Click on 'merge visible'. That should merge all your layers into one. Handy, right?

20. Now you're going to need to double click that layer again to unlock it. Once you've done that, we can begin the border.

You can probably do this tonnes of ways, but this is just how I do it.

21. Go up to image > image size. It will show up with this screen:


22. Now type in the width and height 2 pixels below your current size. This will shrink the image slightly. Hit ok.

23. Using the rectangular marquee tool (the one below the arrow at the top) drag it across the page to select the whole banner. Press control + c to copy it.

24. Now press control + N to create a new document. Set its width and height to your original size.


25. Hit ok. Now press control + v to paste the image into your new document. Look! You should see that it's 1 pixel smaller on each side!

26. I want you to go to that little arrow again and choose 'merge visible'. Now unlock the layer by double clicking on it.

27. Now repeat like before. Go to image > image size and set it to 2 pixels below the current size.

28. Use the marquee tool again to select the banner and press control + c to copy it.

29. Now repeat with the document. Hit control + N and enter your original size. Paste the image into that document with control + v.

30. This time though, I want you to select the 'background' layer and the paint bucket tool. Make sure your colour is set to black. Fill in the background layer.

31. Look! You have successfully created a pixel border! Now just go to 'merge visible' again and hit that. Voila! If you've done it correctly, you should end up with something that looks like this:


Well done! I hope that was easy enough to follow. If you have any questions, tips or anything else, please feel free to ask.

And don't you just love your new banner? ^^