Etsy's Handmade Blog
Skill Share: Making a Banner
Story by daniellexo
Published on June 14, 2007 in How-To

Hi all! I thought I'd show you how I made the new EtsyLabs banner. I'm not a trained graphic artist by any means but I love making banners, avatars, and general photoshopping! So here's the banner and the tips:


Here's the final product. ps click on any of these images to get some more detail!

Tip Alert! Download a fancy font! My favorite place to download free fonts is http://www.dafont.com/. Once you find something you like download it to your desktop and unzip it. Then go to the start menu -> Control Panel -> Fonts and then click "install font" and find that on your desktop. Do this before opening Photoshop.


Step One - Find some sort of background. I suggest a pic that may be floating around your flickr account, scan some fabric or ribbons, or fine something cool and free on the internet (but don't steal! Make sure its for general use.)

Step 2 - Crop this baby. Don't worry about the size yet. Just crop it so you get a good image (as wide as possible). Crop is a tool found on the left vertical toolbar - it looks like a box.

Step 3 - Now lets set the correct width. It should be 760 pixels. On the top horizontal toolbar click Image->Image Size and set the width to 760 pixels and select "OK".
Step 4 - Now lets work on the height. Do this by adjusting the canvas size (Image -> Canvas Size ). The height should be 100 pixels. In the canvas size window you can adjust the anchor if you want the pic to be cropped from the top, bottom, center etc.

Here's what we come up with so far:


Step 5 - Adding text. On the left toolbar you'll see the letter T. Click it! Now click on a space in the pic where you want to add your shop name. Now type in your shop name. Highlight what you just typed. Now you can change the font, color and size (see those options at the top of the horizontal toolbar in photoshop). Play around until you get a good result.



Step 6 - Rasterize text. At the top click Layer -> Rasterize. You've rasterized!

Step 7 - Add some dimension to your text. At the top again click Layer -> Layer style. Play around! For this banner I chose to use a suble "inner glow". Spooky!!


Step 8 - Glowing airplanes! I wanted those paper airplanes to stick out more. So I used the magic wand first. You can find the magic wand on the left hand toolbar. Once you have selected it just click on the items in the picture you want to "glow" (you can adjust the tolerance at the top if when you click on the items they aren't being selected properly). Hold the shift key while clicking away to select multiple items. Once you've selected all the items you want to pop, hover the mouse over any section of the picture and right click on the mouse. Now "Select Inverse". This should select everything EXCEPT the items you want to glow. Therefore any effect you now use will only change the background and not these items.


So now since I want everything BUT the airplanes to look a little less bright I go to Image->Adjustments->Hue/Saturation. I decrease the saturation to make it a little duller. Feel free to play around in this section though! See what other effects you can create.
Step 9 - Save! Select File -> Save As. Save it as a JPG file. Save it somewhere you can find it in a minute.

Step 10 - Upload! Log into your etsy account. On the left side under Shop Setup you'll see "Appearance". Click it! Now in the banner upload box find your new banner! Once you have all you have to do is click "save changes" at the bottom and you are golden!

Tomorrow I'll be following up with a few more photoshop banner tips using actual Etsy members who have requested new banners. So stay tuned!
Tags banners, graphics, HOW-TO, Seller Handbook, selling, shop setup, tutorial, Your Shop 101
All articles in How-To
Related Items
This article was reported by:
Etsy Admin
daniellexo
shop . profile . contact

111 comments     Login to add your own!

Dec. 31, 2007 at 11:17 p.m. bethmosier

This is very helpful. Gives me some confidence! Thanks.

Jan. 4, 2008 at 6:29 p.m. sewcranberry

thank you, thank you! i had so much fun making a banner and even changed it a couple of times. your tutorial was very easy to follow. now i've got to get to work on an avatar....

Jan. 5, 2008 at 2:25 a.m. alkemystic88

100000000000000000000000 blessings to you!!!!

Jan. 6, 2008 at 12:47 p.m. Sweetz

Thanx so so so much!!! It took me like 15 min with your instructions and I'm so happy with my new banner! :-)

Jan. 11, 2008 at 11:40 a.m. dreamtime1

just what i was looking for! can't wait to try it.

Jan. 11, 2008 at 11:21 p.m. maceys

So, what if you don't have Photoshop? lol Maybe I should make the investment, eh?

Jan. 15, 2008 at 8:57 a.m. NorthernChancer

Thanks, you make it easy!

Jan. 21, 2008 at 1:03 p.m. Nanna4Her2Angels

Get my banner code or design your own banner

Thought I would share this banner to see if anyone likes this !

Jan. 24, 2008 at 11:45 a.m. Faerydog1969

This is great advice BUT my version of Photoshop ( still a trial) wont let me save ANYTHING as a JPEG or other accepted Etsy file. I have tried to change this, but can't.

Jan. 24, 2008 at 9:14 p.m. makibeads

Thank you, what great advice, easy to understand tutorial!

Jan. 26, 2008 at 10:34 p.m. daniellexo

Faerydog1969 - Try downloading one of these free programs:

picasa

gimp

They will allow you to save as a jpg.

Feb. 10, 2008 at 10:41 p.m. FirenFusion

Thanks Daniellexo! I just bought photoshop, so this was excellent timing. Kinda like having my own private lesson.

Feb. 12, 2008 at 8:09 a.m. Faerydog1969

Thanks I have used gimp now which works just as well :)

Feb. 20, 2008 at 1:07 p.m. gmjj4

Thanks for the tips. I have to get to work!

Feb. 26, 2008 at 8:22 p.m. ZooBaZu

Yeah! a BIG thanks from me too! Very easy to follow, now I gotta try it!

March 5, 2008 at 9:01 p.m. AtelierChoCho

This might be very helpful for Windows users.
I'm a Mac girl.
Will you help me???

March 8, 2008 at 10:10 a.m. bubblybunksboutique

this is an excellent article. thanks!

March 10, 2008 at 1:16 p.m. beadyize

A really helpful article. Thank you!

March 15, 2008 at 5:18 p.m. raef

this was really really helpful!
i was thinking i would have to
hire someone to help me do this,
but now i don't and it's going to
be a lot of fun.

i'm going to redo my avatar too!

thank you!

March 24, 2008 at 4:43 p.m. SoulPie

Hi. Your tips are super helpful! Though, I seem to be hitting some sort of glitch...yikes! No matter how small I make my pixels (width/height) the banner keeps getting cropped off & very fuzzy (the smaller I go.) I tryed 760x100 & many other small variations. Any help would be appreciated!

Signed
Feeling Croppy

April 6, 2008 at 7:17 p.m. atelierdricka

thanks...I'm new with Etsy, want to make a colorful banner. I too do not have photoshop, though may soon have Photoshop 6; meanwhile am using Faststone as my photo enhancer. I hope I can translate your instructions satisfactorily within that program...it is supposed to be equal to picasa. All this is a learning process...wonder when I will find time to list! dricka

April 17, 2008 at 10:35 a.m. Pantibags

Your instructions on how to place a banner in my etsy shop was extremely helpful.
Thank you!

May 3, 2008 at 10:04 a.m. pbl321

Hope I can follow your directions..I have Picasa, so guess I'll start there..I really want my shop to look attractive !...but now it is pretty dull..(:(

May 17, 2008 at 6:06 a.m. brdavis5057

Hi, I am new at Etsy, not really sure what I am doing. But I need a banner, can you help me, or do I do it myself? I have Picasa, and I want this to be kind of country but showey. Like some bluebonnets in the background because I am from Texas. But my main things are, albums,scrappy, jewelry.
I need help.
thanks
BD

May 17, 2008 at 9:31 a.m. strozzistawzeeh

Im new here too! But i guess i have a bit idea about photoshop or editing... I'd like to help. im not expert but i guess and least i can help a bit...
Just contact me and we'll try to work it that together.... ^_^

May 17, 2008 at 10:31 a.m. Vanessa

This workshop is actually about physical banners, like for a craft fair.

There are a couple tips here for you Shop Banners:
http://www.etsy.com/storque/section/e...

And here's the Bannerator:
http://team.etsy.com/bannerdisplay.php

May 27, 2008 at 1:23 a.m. johnnymint

I too am having quite a bit of trouble adding a simple .jpg within the stated dimensions. It keeps coming out cropped, fuzzy or not at all. help!

May 29, 2008 at 2:26 a.m. HippyStuff

wish I had photoshop!!!

June 7, 2008 at 12:32 p.m. HickoryTreeHouse

Thanks for the article, very helpful and easy to follow.

June 19, 2008 at 6:11 p.m. bouldnart

im having trouble as well do you have to click save before you see the image? i thought it would let me preview it in the little box first but it is showing up as a document and i definetly saved it as a jpeg and every other suggested setting.... help!!!!

June 26, 2008 at 5:09 p.m. summerone

Thanks for doing this!! I found it super helpful. I'm a total noob and your instructions made it seem easier than I thought it would be. Thanks for the confidence boost!Awesome. cant wait to get in there and give it a shot!

June 26, 2008 at 10:34 p.m. alittletouchoflace

I too am getting a little box with nothing in it. I know how to create jpgs so that is not the problem - somebody please help. I even tried creating several different banners, but nothing shows up.

June 28, 2008 at 1:54 a.m. jneale3

Well, I made a living as a web designer and I can't figure this out. There is no "Shop Setup" or "Appearance" showing up on any page. That makes it somewhat difficult to add a banner to my shop.

Any suggestions?

June 28, 2008 at 3:28 p.m. ModestEve

I couldn't find it either then I went to Help, and found lots of useful information. To get to the "Shop Setup" you have to click on "Your Etsy" along the top next to your name. Then click on "Public Profile" along the left side, and you should see it.

June 28, 2008 at 4:22 p.m. anda

Jneale3, you will have register as a seller before you set up your shop. Try clicking the "sell" link at the top of the page to get started.

July 1, 2008 at 12:21 p.m. BellaAntoniosMom

This artical was great b/c I realized that I can buy a cool banner/avatar from one of the fellow etsy designers and hopefuly upload it into my shop....

July 4, 2008 at 12:03 a.m. brokenperception

super helpful.

July 8, 2008 at 5:18 p.m. jewelrybyreshell

Mahalo so much. It's everything I wanted to know and so much more. I plan to use your tips with a new shop I'm planning to open.

July 8, 2008 at 7:55 p.m. inlikealion

Thank you so much! this made my shop set up so much easier and enjoyable! :)

July 9, 2008 at 12:14 p.m. rikkicondon

O this is great..still finetuning my shop. Thank you!

July 11, 2008 at 1:03 a.m. VintageMafia

I just re-did my banner thanks to your tutorial! thank you so much for the tips and step-by-step instructions!

July 11, 2008 at 7 p.m. alteredworks

I can't thank you enough! After searching the web for hours and trying different sites I found you. My store will be up and running in no time. Etsy really is the place for sharing.

July 14, 2008 at 3:23 p.m. rosietoad

I cant get my JPG banner to show up!! very frustrated. Its the correct size but it wont show up! I have followed directions exactly. Whats wrong?

July 14, 2008 at 10:34 p.m. IrisInBloom

I lost my banner by doing something stupid. Can you help me???
Thanks,
Brenda
jherp@bellsouth.net
www.IrisInBloom.etsy.com

July 15, 2008 at 4:06 p.m. MCSDesigns

Thanks for the info it helped.

July 17, 2008 at 3:45 p.m. feltgoods

Hi,
I built my banner in powerpoint because I don't have photoshop. I was able to save it to my pictures but couldn't find how to save it as jpeg. I have picasa but the file won't move from my pictures to picasa and the banner won't upload to etsy the way it is. So, what do I do now? Thanks so much for your help!

July 18, 2008 at 10:50 p.m. rmherbie

What if you don't have adobe?

July 22, 2008 at 12:52 p.m. LinJi

If you don't have adobe photoshop you should check out a couple of alternatives there is a.viary.com and www.gimp.org both are free alternatives and are very powerful tools. Aviary is in the beta stage and uses a web browser such as internet explorer or firefox to run the application where as gimp is a free and open source photoshop alternative that you download to your local computer. I recommend both highly. Hope this helps!

July 22, 2008 at 10:58 p.m. missbrittsperfectfit

My web guy put me on to Gimp and it's been great, very easy to do basic things and free, gotta love that!

July 24, 2008 at 5:10 p.m. dancingbones

A quick note about fonts - dafont.com does host lots of awesome free fonts for download, but please be sure to read any text files that are there when you unzip them, as many of the free fonts specify copyright notices as "for personal use only" and would like a donation or payment when used for anything commercial. A shop banner does qualify as a commercial use.

July 24, 2008 at 7:13 p.m. luvit1

Thank you....The dimensions were just what I was looking for. Saves a lot of time on back and forth.

July 25, 2008 at 4:11 a.m. oliviarevel

thanks...grazie mille

July 26, 2008 at 11:30 a.m. kornkribprimitives

Thank you for all the helpful information. God bless you for sharing.

July 28, 2008 at 9:46 a.m. TheKreativeKanvas

This is extremely helpful. Thank you so much!

July 29, 2008 at 11:52 a.m. nomadneedles

This is helpful but I've gotten stuck. I'm using Picasa - does anyone know how to add text over an image in this program? I see how to add a caption, but I'm wanting to the text on the banner as demonstrated here.
Thanks so much for any advice!

July 31, 2008 at 12:01 a.m. oliverhandmade

Hi! I am brand new to this. I am using Picnik to create my banner. No matter what I do to adjust the pixels, my picture gets all stretched out. What am I doing wrong?

Aug. 8, 2008 at 4:58 p.m. aubreypackham

I'm having a problem. I'm pretty familiar with photoshop and did everything you said to do. My image is 760 x 100 pixels and the resolution is at 300 dpi. I then save my image as a .jpg file and I save it in my etsy account. Then, in the preview and on my site page, my image looks grainy. I don't know why, because the jpg image doesn't look grainy on my computer. Do I need to change from RGB to CMYK? I'm just not sure what I'm doing wrong.

Aug. 10, 2008 at 5:04 a.m. leagoldberg

hi!total dunce at this but here goes-regarding the answer as to how to transfer your banner from file to etsy-i did all the things suggested above-but there is no 'shop set up'to click on the screen-i did follow the path toois it becaus i havent put my cc details in yet(still waiting for the bank to pull their finger out!)so as such,i am not able to truly open my shop-even tho i have done a bio...can you help please?

Aug. 10, 2008 at 3:45 p.m. FPDesigns

My banner disappeared, I don't know why. I put into in for another one (hard to find the free ones) and that never came up either.

I know the banner was up there for a while and now it's gone. What am I doing wrong? Could you please help me?

Aug. 13, 2008 at 3:06 a.m. amberellis

Hi, I'm really new. I need help to set up. please

Aug. 17, 2008 at 5:19 a.m. HandyCandy

i don't have photoshop

Aug. 18, 2008 at 10:45 a.m. portoj

I'm pretty sure you can download photoshop elements for free

Aug. 18, 2008 at 2:42 p.m. LCGifts

Will try banner after I process all this. Sounds and looks interesting. All seems helpful. More later. Thanks.

Aug. 23, 2008 at 1:10 p.m. KookooDoll123

thank you very much for your help!

Aug. 26, 2008 at 11:34 p.m. NicoleHarrison

I'm going to give this a try thank you so much!! :)

Aug. 26, 2008 at 11:53 p.m. TaviesDreams

Great instructions!

I'm still wet behind the ears, as my grandmother would say, but a really great place that is free to make banners is called cooltext.com It's also a great resource for free fonts.

Aug. 28, 2008 at 5:59 p.m. mindsofwhaley

a really good place to find free images is http://www.sxc.hu/ it is all stock photos.

Aug. 28, 2008 at 11:25 p.m. mtntop

I hope I can find my way around in the "shop" and once I find out how to find edit...I think I would like to use my Gimp program for a logo...Anyone have a light? Thanks!

Sept. 1, 2008 at 5:44 p.m. becksu

Thanks I hope I can figure this out now. It took me a little while to finally find these instructions. Everyting is still so new to me

Sept. 2, 2008 at 7:24 p.m. wallpaper

AHHH! I can't figure why my banner comes up entirely black every time. I followed the cute tutorial I have a JPEG file it is the correct size what could I possibly be doing wrong? Anyone?

Sept. 6, 2008 at 9:23 p.m. ZandriaLand

I don't have photoshop or anything fancy, but this at least gave me a general idea of how to make a banner of the right size--so thanks. I couldn't find a way to put any text on it though... Oh well.

Sept. 7, 2008 at 2:28 a.m. BunnyInDisguise

I used the bannerator to make my banner, so it's definitely the right size etc., but I can't upload it. When I created it, I saved it as a jpeg (supposedly), but when I try to open it - it says it's a php file. How do I make it be a jpeg??

Sept. 11, 2008 at 10:49 a.m. harandaa

Brilliant guide - bless you, you're a treasure.

Sept. 11, 2008 at 10:51 a.m. harandaa

I have just realised that my comment appears to reply to Bunnyindisguise, but it was really only intended to express my warm feelings for the original how-to guide. Sorry!

Sept. 12, 2008 at 5:26 p.m. KittyKatoure

thank you!

Sept. 16, 2008 at 1:15 p.m. 2smooches

I did it!!!! yippee! Thank you!!!

Sept. 16, 2008 at 10:23 p.m. rabbithorns

i am so confused. once you drag a picture off the web, it's a jpeg. how do you put it into Photoshop to work on?

Sept. 20, 2008 at 8:24 p.m. nori2222

I'm looking forward to working with a group of creative people.

Sept. 21, 2008 at 4:41 p.m. designbyluecella

YES!!(fist closed, elbow bent, quick movement to hips)

Sept. 22, 2008 at 3:15 p.m. Mmeandering

This tutorial helped me so much. I was having so much trouble getting the size right and everything! thanks so much.

Sept. 23, 2008 at 5:10 a.m. RokGear

Nice how-to. thought I would mention for those who might not have access to a photoshop type program there are several great free banner builders on google.com

Sept. 23, 2008 at 5:11 a.m. RokGear

sorry for the double post. dont know why it di that = )

Sept. 24, 2008 at 10:49 p.m. bobbichukran

Thanks! I've been trying to make a banner forever, and after reading your tutorial, was able to make a simple new one in about five minutes. Woohoo! bobbi c.

Sept. 25, 2008 at 6:20 p.m. laughinggoat

Thanks, I need all the help that I can get

Sept. 28, 2008 at 4:29 p.m. marisolmarysol

You made this such an easy process....i wld have never figured it out had it not been for your tutorial!.THanks :)

Sept. 29, 2008 at 4:50 p.m. beadazzleher

You're a godsend!

Oct. 4, 2008 at 9:25 p.m. treasuresinanattic

Thanks!

Oct. 5, 2008 at 5:37 p.m. buellpottery

Thanks so much for sharing!

Oct. 6, 2008 at 6:13 p.m. fahrenheitglass

If I can follow your directions anyone can!!!

Oct. 8, 2008 at 4:18 p.m. DoraArtDesignStudio

This was not as easy as it seemed. Took the better part of my day. The banner(background) loaded easy but the type never showed up! Couldn't get type to be the color black! Ugh! So I have a banner with no type on it. I will try again another day, yikes!

Oct. 16, 2008 at 2:10 p.m. factoryjunkie

wow! thank you for sharing! :O)

Oct. 21, 2008 at 10:57 a.m. MoodyBohemian

Help Mac users! What did you end up doing to create a banner? I am not computer savvy, and don't wish to spend big amounts of time and money on a simple banner....what can we do? Any help MUCH appreciated!

Oct. 21, 2008 at 5:04 p.m. sungazer

If you have Photoshop, here's how I did it (very easy!)

(1) Make sure that Options and Tools are checked (under Windows in the menu bar).

(2) Select the Crop tool from the Tool palette. It's the button that looks like two overlapping t-squares.

(3) In the Options bar (should be at the top) type 760 px for width, and 100 px for height.

(4) Now, when you click and drag to create the crop box in the image, it will be limited to that ratio.

(5) So, click and drag. If you want to move the crop box, you can use the arrow keys.

(6) Select Crop under Image in the menu bar.

Okay, so that's cropping. Now on to adding text.

(a) Select the Text tool from the Tool palette. (It's the button that looks like the letter T.)

(b) In the Options bar, you can choose font, font size, and even color! (A cool thing to do is to use the eyedropper tool to pick a color directly from the picture. Choose the button that looks like an eyedropper from the Tools palette, select the part of the picture you want to color, and click!)

(c) Place your cursor more or less where you'd like the text to go on the banner, and click.

(d) Type your text. If you want to change the font, color, size, etc., highlight it now and use the Options bar to make the changes. When you're happy, move on to the next step.

(e) If you want to move your text around so it looks better, choose the Move Tool from the Tools palette (it looks like an arrow with a cross next to it). Click on your text and drag it around!

(f) Now, you need to make the text part of the main image. Go to the menu bar and choose Merge Layers from the Layers menu. NOTE: Do not do this until you're sure you're not going to want to change the lettering!

(What Merge does is take all the bits - the picture, the text - and mash them up into one image. If you want to edit the parts separately, you have to do it before Merging.)

(g) Save!

Oct. 22, 2008 at 11:45 a.m. MoodyBohemian

thanks, Sungazer, I downloaded the free trial for PhotoShop and will give it a shot!

Oct. 22, 2008 at 12:48 p.m. MoodyBohemian

I guess Adobe PhotoShop Lightroom 2 (the free trial) is quite different, I can't seem to locate the version used in this blog.....hmmm...

Oct. 22, 2008 at 7:41 p.m. sungazer

My version's Adobe Photoshop CS 8.0, if that helps anyone. (It's rather old.)

Oct. 23, 2008 at 3:43 p.m. kathyhancock

Trouble getting .jpg banner to upload onto Etsy site - not sure what I'm doing wrong or how to proceed. Created banner in MS Photoshop on my desktop computer and save first as .png file which also didn't upload; then saved as jpg file...still no luck. Can anyone tell me what I'm doing wrong?
Thanks.
Kathy

Oct. 24, 2008 at 2:19 a.m. bonjourpierre

This seems really helpful. I still don't have a real banner yet because I don't know how to do them. I'm going to give this a shot.

Oct. 24, 2008 at 5:35 p.m. sarasmith317

Thanks so much - these directions were great and I now have a custom banner! I couldn't have figured this out w/o your directions! :-)

Oct. 27, 2008 at 2:23 a.m. TopazosDesigns

Okay, so the banner is made per instructions listed in the tutorial. Thanks for the clarity. It was a breeze for this non-computer saavy girl to follow. But the 'Shop Set Up'? Where on earth is that button? I've tried both >Your Etsy buttons on the top menu bars. ThenSuggestions? Help would be mucho appreciated!

Nov. 3, 2008 at 11:29 p.m. GergaudJewelry

Thank you! I love the font site and your instructions helped a lot.

Nov. 6, 2008 at 12:40 p.m. laurabrownart

thank you thank you thank you! the step by step instructions were so helpful!

Nov. 9, 2008 at 1:23 a.m. gypsycab

thanks! i'll try to make a banner now... i mean i WILL make a banner now!

Nov. 11, 2008 at 4:25 p.m. TheVintageGypsies

Reading all your suggestions makes me feel like yes! I think I can...I think I can, I think I can...and then I remember oh yeah, I don't have photoshop...oh well let's try for photoshop elements and see what happens if not darn it....let's try with gimp!

Nov. 13, 2008 at 12:29 p.m. lala412

I'm wishing I had used my website name as my etsy user name. Sigh. Would have looked better on my banner. But, at least I will have a cool looking banner thanks to this guide! :-)

Nov. 14, 2008 at 9:59 a.m. artbyamylee

I made my banner at bannersketch.com. It was free and I'm really happy with it. Lots of good options out there.

Nov. 17, 2008 at 9:46 a.m. kariusdeparius

takk, Takk, TAKK!!! 1000 TAKK!
Love from Normandy, France.

Nov. 19, 2008 at 3:17 p.m. expressionsbytrudy

thanks very much,,,,i can do this....

Nov. 27, 2008 at 5:38 a.m. cloverlaneuk

Hi everyone. New to this and bowled over by the huge community I seem to have found here. Anyhow, I'm in the process of setting up my shop and need to know what is the best version of Photoshop to use for creating a banner under these instructions (free download if possible please). Many thanks.

Nov. 27, 2008 at 8:44 a.m. cloverlaneuk

Hello again. I've used a prior contributor's suggestion and gone to bannersketch.com. Free and fab and EASY way to make your own customised banner. A bit of trial and error 'cos I'm a total novice but got there in the end and it's made me very happy to have achieved something new! If I can do it, anyone can.

Nov. 28, 2008 at 6:20 p.m. OneSweetLove

Thank you very much for the tips! It was very useful, I will get working on my Banner tonight once the little one goes to bed.

Previous Page | Next Page