Making a colourful banner for a website or a slideshow

Hi there,

Some of you might like to know how to make a banner like this one … without all the clutter. 🙂


You can use Gimp (which is a free photo-editor) or Photoshop Elements / CC.
The following is for Photoshop Elements 11 in Windows 7.  In Macs, use the Command key instead of the Control key.

First of all, make a white background for yourself – Ctrl + the letter N. Chose a white colour and a resolution of 72 px/ins.
Save this for future use … Shift + Ctrl + the letter S … at maximum quality (12).
Next: click on each colour box on the left hand side, and choose colours you like.
Select the Gradient tool, set as above, and make a sloping swipe across the lower half of your image.
If you’d like to try again, get up the History menu (via Windows on the top toolbar), and go back in time. 

Perhaps now you’d like to change the lightness / darkness of what you’ve done, or have a play with the colours on the
image. Select “Enhance” on the top toolbar, and adjust the lighting or colours to your taste. Save your work again,
with a different title, for future re-use. 

Time now to add some text. Click on T for text in the left hand toolbox, and have a go with a font type, size and colour
to your liking. I like Segoe Script and Print, which is less formal than Arial / Tahoma / Times New Roman. You can
move your text around, and re-size it afterwards. To embed the text in your banner, use Ctrl + the letter E to merge
the text layer with the background. Save your work with a different title – Shift + Ctrl + the letter S. (In Gimp, I think
you have to use the letter E instead – E for export, and I’ve found adding text more fiddly in Gimp than in PE).

Another simple method I use is to create a pale rectangular strip across the middle of one of my reduced-sized photos
(1024px across). To reduce photo size, use Ctrl + Alt + the letter I, to get up the image re-size menu. You just have to
enter the 1024 px value in the width box, and PE will automatically add the height value for you.

Use the Rectangular Marquee tool to create the strip, and then go to Enhance > Adjust Lighting > Levels.
Shift the centre small triangle below the histogram to your right, to lighten the strip to your liking. To remove the
“marching ants” around your selection, use the keys: Ctrl + the letter D  (D for deselect).  Add some text as above,
and repeat the embedding and saving process as above. To try again, use the History menu to go back in time.

For your website, you will probably have to reduce the image size down further. The size for this WordPress theme is
768 px across, but if you’re thinking of making your website mobile-friendly, you should use a lower width, say about
450 px across, to fit a mobile phone screen. On Flickr, I use 1024 px width, so I can share better quality pics with
everyone (well those of you with computer monitors of this size and upwards).

Hope you got all that, as there will be a short test next period!  🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: