Home Seller Tips Shop Front :: Making a simple online shop advert or badge

Shop Front :: Making a simple online shop advert or badge

Last week we told why you might want to make yourself a simple Folksy shop advert – also known as a shop button, or blog badge that can be used on your own or other people’s blogs, as a signature in forum posts or with advertising sites such as Project Wonderful.
Learning how to make a simple advert and knowing how to quickly change its size or change the text to fit in with seasonal promotions or sales is an excellent skill for a Folksy shop owner to have.

Bonnita of ‘It’s all about the Graphics’ has kindly written us these tutorials below to show us how to make a very simple advert using a product shot and text.  The tutorial is broken into two parts, the second part is using Gimp, a free and easily downloadable piece of software that is now incredibly popular. There are regular updates available so if you have already downloaded a copy check on the website to see if you have the latest version.

Shop Advert Tutorial Using Photoshop

A good standard size advert is generally 260×260. It’s a comfortable size and will sit in all blogs without invading space. The same principles here can be used for making a banner – you just make the image size to your preference.

In Photoshop click on File > New and make the image size as shown below. It is important to note that anything for use on screen must be RGB (red, green and blue) otherwise it will go a horrible colour and look over-saturated. 72 dpi is also best for this image size.


Once you have your canvas it’s worth opening any images you want to include in your ad. I have done 2 styles to show you how they can both look.


As you can see the flower I want to use is far too big. Now this is where mistakes are made so pay attention :)

Do not place into the add and squeeze the image size down to fit, it will distort your image and look awful. The trick to it is: In Photoshop click Image > Image size and change the height or width to the size of your ad. My image is not square so I need to make the height the same size – 260px. Make sure constrain proportions is ticked and it will keep the image to scale.


Once you have scaled it you can use the move tool, drag it over to your ad and place it until you are happy.


Now you are ready to type the text you want to include. Keep this short and simple otherwise it is unreadable.

Select the text tool, click on your image and start typing. You can change the colour by selecting the type and clicking on the block of colour found on the top tool bar.



Size is important!!! The smallest readable text for print is 6pt and it is not recommended to go below this. Of course, for our ads we need it to be around 24pt mark, but that all depends on how much text you put on, so have a play around until you are happy.



The finished advert using a photo, and below is one using a graphic.


Have fun!!!

Oh and don’t forget to save it as either jpg or png :)

Shop Advert Tutorial Using GIMP

This a FREE programme to download and is very similar to Photoshop. Did I mention it was FREE!?

Same as with the Photoshop tutorial: Open a new file 260x260px then open the file you want and scale the image

You can now use copy the image and paste it into the advert canvas.


As you can see it doesn’t sit centre but you can move it to where you want using the move tool.



Photobucket Photobucket

Once again click on the text tool and type in the box. You can altar text, font and size afterwards on the tool bar on the left of the screen.



As you can see the quality is no different from Photoshop. It is just a case of remembering the tips I have mentioned about scaling. Get that right and you can’t go wrong!! (Don’t forget to save it as either jpg or png :)

You may also like


amyorangejuice June 17, 2010 - 7:12 am

Oh if only I could afford photo shop! I have picassa, but its not the same! This post is going to help a lot of people do some fab ad’s x

Victoria June 17, 2010 - 8:36 am

Amy you should try Gimp since its free. Also great tutorial thanks : D

Mary Elliott June 17, 2010 - 9:02 am

thanks for the tips- I use gimp so any helpful hints are great :)

AstridsGarden June 17, 2010 - 12:32 pm

Wonderfully clear, I actually may be able to do this all by myself. Thank you very much!

Jenny June 17, 2010 - 1:09 pm

Great tutorial, just tried it, works a treat!

heather aka NiftyKnits June 17, 2010 - 1:27 pm

Picasa is another great free tool. Project wonderful is a good way of placing ads. I have just 2 adspaces on my blog which started at zero price…but they are currently funding no less than 130 ads that I have sprinkled around. The price is determined by what people bid. You need to make square ads in exactly the same way, but 125×125

Hilary June 17, 2010 - 4:18 pm

Thanks Heather – we’re hoping to cover project wonderful in a post soon as we also feel it’s a very good way of targeting blogs and websites that will appeal to your market for very reasonable money or for free.

sam aka zulikastardesign June 17, 2010 - 6:35 pm

Thanks for the info because I am a complete derr when it comes to things like this!
You have made it look easy, I think I will have a go!! although I haven’t got photoshop, but will try the free tools!
Adverts, here we come!!!

Julia June 17, 2010 - 10:00 pm

Such a great step by step…
I can’t afford Photoshop but will certainly give this a try!!!
Thank you so much ♥☀❀♥☀❀♥

Comments are closed.