Download the Photoshop and GIMP files
First thing we’re going to need is an image. I’ve got one of the Xbox Live Community Game, Easy Golf. You can use whatever image you like, although for adding text a couple of hundred pixels wide is the least you should go for. Obviously make sure its relevant!
Next, we need to open up the image in our favourite image editor. If you’ve got Photoshop 4 or above, use that, although I’ll be showing you how to do this in the excellent free image editor, GIMP. You can download it here, and Linux users should already have it installed as part of their distro.
Once you’ve loaded up your image, we need to add a new layer. We can do this by going Layer – New Layer. A dialogue box will appear, and we want a black layer. This will probably be your foreground layer in GIMP.
Next, we need to make the transparent strip for our text. Call up the layers box by pressing CTRL + L, select your new black layer, and make the opacity (or transparency) about 60%. But, we don’t want the whole image to be black, so next, using the select tool, select the whole image, leaving only a small black bar at the bottom where you are going to put your text. Press delete and you’ll be left with your bar for your text.
Finally, all we have to do is add our text, using the text tool. Type in the text you want, and change the colour of the text to white (click on the colour bar, select white). Move your text into position using the move tool, and save your image as a JPEG. If you find your text is below the black bar, open up the layers box again, and move the text so that it is the top layer.
And thats that! All done. I’ve made a template version that you can use, in Photoshop and GIMP formats. Its 900×400, so no matter how big your image is, if you’re putting it on a webpage, then it should fit!
Download the template versions here
You can take this even further, and in conjunction with some jquery, you can create a very cool featured content gallery (see Nometet.com for a working example), but thats a post for another day!
As always, feedback would be much appreciated and please do take a minute to visit my sites here and here. I’m now on Twitter as well! Follow me here.
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
23 Comments
Just an FYI: you do not have to open up Photoshop/GIMP for every post to achieve the same effect. Just need that semi-transparent background to tile in CSS and the text can be defined by you to put on top. You only need to supply the text and the large image that you’re going to use. But good idea, though.
@john: right
Other than not mentioning that, great post Jean
Thanks for the tutorial. Images are very important aspects of every post so making them look nicer is very important. But i think we need something more faster and automated to create those images, because this is time consuming if you have lot of images, something similar that John has mentioned.
@Hayes Potter: Thanks, but it’s a guest post by Alex Denning
@John – hadn’t thought of that – great idea!
@ Catrin W – yes something automated would be great, but I do it a lot of the time and it only takes a minute once you’ve set yourself up with a template. I’ll have a look into it.
Nice tutorial on how to add text on images, But John made a nice point on using CSS to do that. But still great post and thanks for sharing your knowledge.
There is a reason to edit in the text using a Image editor – You can choose ANY cool looking font to use, rather than just using the default 8 (don’t quote me
) web design fonts.
nice post n thanks for sharing.
Thanks
So it’s just like adding a watermark, but it’s not so obtrusive?
@Milo – I suppose you could call it a watermark, but an informative one.
@John and everyone who mentioned it – just an FYI; part 2 using css is coming!
I hate to say it, but this is really elementary. If people don’t know how to do this with Photoshop, they probably don’t have Photoshop. The CSS tutorial should be more useful.
@Scion News – the CSS part 2 of this is here: http://www.catswhocode.com/blog/easily-improve-your-blog-posts-with-high-quality-images-part-2
yikes! this is not necessary for every image. as others have posted you can use css to overlay the text. use the free timthumb script to auto resize images on the fly. doing this manually is crazy!!
I agree, images are very important, and a good one can enhance your site, just as a bad one can ruin it. I love all the graphic design tools and other stuff that are available these days, I just wish they had been there when I was younger (I’m 54) oh how different my career path could have been. Hey ho.
There is no doubt that Photoshop is certainly one of the best things to happen to graphic design in its’ history. Not sure where I would be without it, to be honest.
Thanks for the tutorial. Images have great impact in articles they are important.
With photoshop and some experience you can great nice good looking images to enhance your blog.
Thank you again.
Kind Regards
Alwin Red
I have no idea how to use GIMP. I tried it few days ago to cut ready template for my site but I’m so confused with all these layers. I need to learn more but for now ready and cut templates are the best for my needs.
This is Gimp viewer ? cool, like photoshop preview…
As a photoshop user myself, I wasn’t familiar with GIMP… pretty cool. Anyhow, in regard to your technique as to adding text. It’s very simple yet effect and one that I had not thought of, so I will say I learned something new through this post!
-Charley
I have no idea how to use GIMP, I use Photoshop to makeover image. But thanks for sharing, Now I know, using GIMP it look pretty cool!
Good post. I passed this information my designer friends. Thanks.
Thanks so much for sharing this tutorial. This makes every photo professional looking. I’ve been using GIMP and now I know how to maximize this software.