The following article was written and submitted by Hannah, at the Banner Manor - www.zibbet.com/bannermanor

Here is a simple tutorial to show you how you can make your very own Zibbet shop banner.  If you don’t feel comfortable with creating your own banner, visit Banner Manor and get Hannah to design you a custom banner to your liking!

Read below for simple instructions and some helpful hints:

The final product will look something like this and can be applied to your Zibbet shop. Feel free to experiment and create your own work of art.

Step 1 - Find something for your background. You may want to use a photo or a scan of some of your work, or you may just want to use some other interesting images, if you have any experience with Photoshop, Corel draw or any other image/graphics software your options are endless. Whatever you decide, make sure the image is yours or that you have permission to use it, don’t steal.

Step 2 – create a new document in Photoshop by going to the ‘file’ menu at the top of the screen and selecting ‘new’ (PC: ctrl + N; MAC: command + N)

In the window set the width to 640 pixels, the height to 120 pixels, resolution 72 pixels/inch and so on as shown below, then select ok. You will now have your blank canvas to work with which will become your Zibbet banner. Save it by selecting ‘file’ from the top menu and then ‘save as’ (PC: shift + ctrl + S; MAC: shift + command + S) and make sure you save it as a .psd file, so your work will not be flattened and you still have complete control over your layers.
HINT! Here are the main tools that have been used in this tutorial, there are many uses for these tools as well as many other tools that can be used to create something unique so don’t be afraid to try a few different things and explore different possibilities.

Step 3 – open your image in Photoshop and drag it onto your banner. You may need to resize your image to fit it on your banner go to ‘edit’, ‘Transform’ and select ‘scale’
(PC: ctrl + T; MAC: command + T), holding down the shift key, drag one of the corner square anchor points till you have the right size, you can also click on the image and drag it to reposition it how you like and then hit ‘enter’ (PC) or ‘return’ (MAC) on your keyboard.

Save your work so far.

Step 4 - Adding text. Select the text tool which is on the left toolbar and looks like a T. Now click on a space on your banner where you want to add your text and type in your shop name etc. Highlight what you just typed. Now you can change the font, color and size (using the options at the top of the horizontal toolbar in Photoshop). Play around until you get a good result. Don’t forget to save!

HINT! Download an awesome font. A good site offering loads of free fonts is http://www.dafont.com/. Once you find something you like download it to your desktop, double click on the icon to open up to the font file. Open the font folder on your PC by going to the start menu -> Control Panel -> Fonts. Drag the font file ( fontname.TTF or fontname.otf etc) from the icon you opened on your desk top into the fonts folder. If you cant find your new font in the Photoshop fonts menu you may need to close Photoshop and re-open it.

Step 5 - Rasterize your text (this will turn your text into an image and allow you to add loads of interesting effects; you will not be able to edit the text once it has been rasterized. From the top menu select Layer > Rasterize > type.

Step 6 - Add some more character to your text. From the top menu click Layer -> Layer style. And have a play! For this banner I chose to use a subtle “drop shadow” and “outer glow” to help the text stand out from the background and give it some life. I also added a vintage leaf decal and applied the same effects as the text.

Step 7 – you may want to add other details to your banner, to add the block background for the shop description I created a new layer by selecting the “new layer” icon in the “layers” pallet I then drew a rectangle using the rectangular marque tool and then filled the shape by painting with the brush tool (ctrl + b; command + b), I then added another vintage leaf scrolling to the layer, and applied the same effects that I had applied to the text. Add your shop description, tagline, motto, whatever you like.

For the bird graphic I imported a bird silhouette, selected it with the magic wand tool and painted it green with the brush tool. I then added an outer glow and changed the blending mode from ‘normal’ to ‘linear burn’ found next to the opacity setting in the layers pallet.

HINT! If you cant see the “layers” pallet, you can find it under windows in the top Photoshop browser menu, along with many other useful pallets.

Step 8 – Saving your work ready for Zibbet. First we will make sure the dimensions are correct by selecting ‘image’ from the top menu and then ‘image size’ (PC: alt + ctrl + I; MAC: alt + command + I) your pixel dimensions should be 640 pixels width, 120 pixels height and resolution of 72 pixels/inch and then select ‘OK’.

Select ‘file’ from the top menu and then ‘save as’ (PC: shift + ctrl + S; MAC: shift + command + S). Name your file and select either: .PNG, .JPG, .gif from the file type dropdown list. I recommend .png as it generally gives a better result, however the file sizes are usually larger, so if you need something smaller select jpg and control the file size in the jpg dialog that opens once you select save.

Step 9 – Uploading your banner! Log into your Zibbet account. Click “shop front” under shop setup on the right hand side of your account. Find your newly created banner in the banner upload browser and then select “save” at the bottom and you are all set!

Tags: banner, bannermanor, create a banner, make your own banner, Skill Share, Zibbet banner