Banner Tutorial - Photoshop

[BlackKat]

Colouring Techniques
It's for Photoshop 7.0. I don't know how well it will translate to Paint Shop Pro, as I've never used that, but hopefully it'll be some help.

I wasn't sure how much detail to go into, so if you're not sure of anything just ask.

This is the banner I'm going to make:

http://img36.echo.cx/img36/8503/banner3rg.png.
Please don't make this exact banner (even if you use a different picture or text) and then claim you made it, because...well, you didn't did you. images/smilies/smile.gif

The settings and colours I've used here won't work for every image. Play around a bit. Experimenting is half the fun. images/smilies/biggrin.gif

Right, here we go. For this banner, I used this (http://img231.echo.cx/img231/2240/12yc.png) picture. Note: As far as I can remember most of the pictures I use come from Joel Beckett Online, or the official EE website.

1. Improving the image:

Adjust the Brightness/Contrast – for this picture, I put both settings up to about +4%. To adjust the Brightness/Contrast, go to Image >> Adjustments >> Brightness/Contrast. It should look like this (http://img231.echo.cx/img231/5969/1contrast0wg.png).
New Layer - Fill with #0B1E42 (dark blue.) Set the Blend Mode to Exclusion.
Add an Adjustment Layer. To do this, go to the half black circle on your layers panel. Click on Selective Color. These (http://img231.echo.cx/img231/1795/1selectivecolor6ks.png) are the settings I used.
New Layer - Fill with #F4E1BD. Set the Blend Mode to Soft Light, and the Opacity to 50%.
Merge Visible. (Shift+Control+E), and Sharpen the layer -- Filter >> Sharpen >> Sharpen. Depending on what image you used you might not need to sharpen it at all. On some it might need Sharpening, but not as much as the Filter does. If this is the case, then got to Edit >> Fade Sharpen. (Do this straight away after Sharpen. Otherwise, the option will disappear. For this image, I faded the Sharpen by about 50%.)
This (http://img231.echo.cx/img231/8256/1improve5mm.png) is my image now.

2. Making the Banner

Open a new document - mine was 400px width by 256px height. Paste your new and improved image into it.
For this banner, I duplicated the image once, and moved the bottom one around underneath the top, until I finally settled on this (http://img231.echo.cx/img231/1/layout5sg.png) layout.
I selected the bottom layer (the image that's on the left partly hidden) and partly desaturated it. (Image >> Adjustments >> Hue/Saturation). I desaturated by about 75%. (These settings (http://img231.echo.cx/img231/4871/saturation8gq.png))
Still on my now desaturated layer, I went to Image >> Adjustments >> Variations (http://img231.echo.cx/img231/6449/variations6yx.png). I clicked on More Yellow once. (It's also best to click on Original once, and then click on what colour change you want to make ie. before clicking More Yellow. Otherwise, previous settings you've made may apply to this image as well.
New Layer (on top of your previous two). Add a white line where your images meet up.
On your colours panel, set your background colour to White, and your foreground layer to #F4E1BD.
On top of your previous layers, make a new Adjustment Layer. This time, a Gradient Map (http://img231.echo.cx/img231/9074/gradiantmap7ue.png). It should automatically do a Foreground to Background gradient for you. If when Preview is ticked your image looks like a negative, you need to click on Reverse. Set the Blend Mode of this layer to Linear Burn.
New Layer. Fill with #D4EEEF. Set Blend Mode to Color Burn.
New Layer. Fill with #F4E1BD. Set Blend Mode to Soft Light, and Opacity to 50%.
New Layer. Fill with a Gradient. To add a Gradient, right click on your Fill tool, and change it to Gradient Tool. There should be a gradient bar up top of the screen. Click on it to edit the Gradient. This (http://img166.echo.cx/img166/6828/noisegradiant6es.png) is the gradient I used, which is one of the Noise presets, with the settings fiddled with. To put the Gradient on, just drag the tool across your canvas and let go. Set the Blend Mode to Screen.
This (http://img166.echo.cx/img166/4442/sofar1rw.png) is my image so far.
Make the layer with the white line on it, non-visible. (On your layers panel each layer should have a small eye next to it. Click on it, and the layer becomes non-visible. Clicking on it again makes it visible again, lol.)
On top of your previous layers, make a New Layer. Stamp Visible. (Control + Shift + Alt + E).
Add a Gaussian Blur to this Layer of about 9.0px radius. (http://img166.echo.cx/img166/9994/gaussianblur0nx.png).
Set Blending Mode to Screen, and Opacity to 60%.


Finishing Touches

New Layer. Using your Rectangle Marquee tool, select a Rectangle area to the right of your white line. (Which you can now make visible again.) Fill this with #FFA1A7. Set the Blend Mode to Screen. Add a drop shadow to it. (Right click on the layer. Go to Blending Options. Select drop shadow. These (http://img166.echo.cx/img166/8499/dropshadow3rj.png) are the settings I used.
Add your text. Colour - white. Add a drop shadow to it.
At this point I decided I wanted a different colouring. Occasionally, I'm wacky like that, hee. So I inverted the colours on three of my layers - The Gradient Layer (not the gradient map), the layer I Gaussian blurred, and the rectangle layer. To invert colours, select the Layer and Control+I. Alternatively, you can go to Image >> Adjustments >> Invert.
I added a border of about 5 pixels in White, and set the Blend Mode to Soft Light.
I also moved the Layer Order about slightly. This (http://img166.echo.cx/img166/4561/layers9nu.png) was what my Layer panel looked like when I'd finished.


And that's my banner done. I hope this was easy to follow. I picked this banner because it used most of the colouring tools that I use. If anyone wants to know how to blend images together, I'll be happy to do a tutorial on that as well. If you're completely new to Photoshop, I'm also fine with doing a screenshot of it and marking out where all the tools are (fill tool, rectangle marquee tool etc.) Any other questions, feel free to ask.

Feedback appreciated on whether you found this useful, whether it was easy to follow. This is only the second tutorial I've done, so I'm quite new to this, lol.

[Meh]

Thank you for that - I'll stick this thread.

Here's a link to the software that Blackkat is using:Photoshop (http://www.adobe.com/products/photoshop/main.html)

An alternative is: Paint Shop Pro (http://www.corel.com/servlet/Satellite?pagename=Corel3/Products/Display&pfid=1047024307383)

Note than neither are free, but you can download trial versions which will work for around 30 - 60 days.

[.:SpIcYsPy:.]

You're WONDEFUL Kat!! :bow: You're the only one who expleained this to us who need it!! Thank-you so much!! And GhostRider for Links!!

[.:SpIcYsPy:.]

I need help on Paint Shop Pro :crying:

[BlackKat]

Here's a tutorial on how to blend images together in Photoshop.


I use Layer Masks to do this. They're easy to use, and it's simple to go back and correct mistakes.


First of all, I set my images out in a new document like so:

http://img135.echo.cx/img135/8199/maskinglayout1hz.png

The images should all be on seperate layers, and overlap onto each other.
I've already done all the colouring and sharpening I want to do on each individual image, so I'm ready to start blending.

Select your second layer and give it a Layer Mask

The tool for this on the bottom of your Layers panel.

http://img135.echo.cx/img135/4407/layermasktool5fk.png

Make sure your layer mask is selected

When it's selected a white circle in a black square should be at the side of your layer. If it's not selected there's usually a paint brush there instead.

http://img135.echo.cx/img135/701/layermaskselected9nq.png

Use your paintbrush on your layer mask

The layer mask only uses black, white and grey. Black erases the image underneath, white makes it show through. By varying your shades of grey, you can make it partially show through.

Paint black (on the layer masks) the parts of the image you want to erase. In this case, the part that overlaps my first layer.

I end up with:

http://img135.echo.cx/img135/9301/halfmasked4bu.png

Then select your third layer, and do the same thing.

My final blended image is:

http://img135.echo.cx/img135/8521/masked3ak.png

You can now add colouring and text like any other banner. Hope this helps.

[BlackKat]

:lol: Thanks GhostRider. :D

[Layne]

Where did ya get the pics from?
Do you think you could post the pics for me in the Pics forum!!!

And any other pics you have!!!
Thanks!!
xxxx

[BlackKat]

I don't know if I can repost them cos they aren't mine originally, but I got most of them from Joel Beckett Online. :)

[Layne]

I don't know if I can repost them cos they aren't mine originally, but I got most of them from Joel Beckett Online. :)
Ok cheers i'll take a look!

[crazygirl]

how do you change the colour of your pics?

[BlackKat]

how do you change the colour of your pics?


It depends what exactly you want to do.

For colouring, you can use gradients, or fill layers, and mess with the blending mode. Some of them look weird, and on some of my banners I have about 10 different layers for colouring, so it's mostly just experimenting.

If you want to correct the colour of a picture, for example if it's got a weird green tint to it or something, you can use selective colour or colour balence. And again, it's mostly experimenting.

[crazygirl]

thanks i will give it a go

[i_luv_dennis]

how do you get a free trail

[BlackKat]

how do you get a free trail

I don't know, mine isn't a trial one. I assume on Adobe's site there should be one.

[big bro fan]

i still dont get how to blend pictures together please could you say it again

[the_watts_rule]

Can someone please tell me how to get rid of the grid lines?

[Cornishbabe]

Just wondering how do you make avators

[the_watts_rule]

Just wondering how do you make avators

I just make them by inserting 90 x 90 rather than 500 x 100.

[Grant_fan]

cool :angel: they are billiant

[luna_lovegood]

Thats helped me improve my photoshopping skills! Thankyou very much :thumbsup:

I cant wait until I can have a nice signature again...just need to get enough posts!

[Amber]

One question : How do you make text kind of see-through? I did it before but I've forgotten since then :rolleyes:

Thanks
xx

[Perdita]

I am so hopeless at this, I downloaded Photoshop for a free trial period but now don't even know how to start creating a banner. :o Do I open a new folder, document or what? I would be grateful for your advice :bow:

[freckleface]

probably a new document.

I ahve photoshop elements, and when I do my banners, I find that using Photomerge Panorama is goooood.

go to File>new>photomerge panorama.

make sure all the pis you wanna use are saved and the same size height wise.
crop pics before as well.

you can then line pics up etc and overlap them. It isnt the best, but if you click okay, it merges them and does masks etc for you.

then you can go about editing it etc...
its what I use for my banners and I find it quick and easy XD