13.12.11

Designing on Photoshop 101 - Making a Banner


Today's blog post is a bit of a tricky one. I was unsure about posting Photoshop how-to's because I know that a lot of you might not have Photoshop, or use other versions like Photoshop Elements... which I don't ever use.  I suppose, however, that if you DO have Photoshop or are planning on getting it, this would be a great start for you.

Firstly, I only use Photoshop CS3. Yes, it's a little older, however the newer versions don't seem to mesh well with my computer. I have yet to figure out why, but CS3 has always been my trusty sidekick.

Today I'll take you through the creation of a simple sidebar banner, that other visitors can copy and paste into their own sidebars. Much like my own over there on the lower right.

The most common sidebar size I find is about 150-200px wide. So, it's best to make a banner with this in mind.  We'll make one that is 180x180.

Open up Photoshop and go to File > New to create a new document.


Enter the dimensions of your new button in the dialog box that appears. Make sure the dropdown is set to pixels, and the width and height are both 180.  Also, very important for graphics that are going to be used on the web... Resolution needs to be 72 and the Color Mode should be RGB.  These are usually set by default, but just double check before creating your document.

Now we have a blank white square to work with.  On the right hand side of your screen, you should see a Layers palette as shown below:



If you don't see a Layers palette on your screen, you can enable it simply by going to Window in the top navigation menu, then choosing Layers so there is a checkmark beside it. Your layers palette is one of the most important things when it comes to Photoshop.

Our background is locked as the main base layer.  Let's change the background colour of our background to a pink shade.


First, you'll choose the Paint Bucket tool from the toolbar. It might also look like a Gradient tool. In that case, hold your mouse button down on it for a second and you'll be able to change it to the Paint Bucket tool.  The toolbar buttons have multiple options, so learning that you can hold your mouse button down on them to swap them around is key.

After you've selected the Paint Bucket tool, you'll need to choose your colour.  Simply do this by clicking on the colour swatch at the bottom of the toolbar.  Photoshop allows you to store two colours here, and you can swap them by clicking on the little arrows directly above the boxes.  Clicking on the black box in our example will bring up the Color Picker dialog.  Choose your colour and click OK.

Now with your Paint Bucket tool still selected, all you need to do is click on your white background to fill it with the colour. Simple.

Now we want to add some text to our banner. Fonts are SUPER important. The wrong font can seriously either mess up or make the best of your image.  You can download a whole bunch of different fonts online. My favourite place to get fonts is dafont.com. Your computer comes loaded with a bunch of standard ones as well (some better than others) so it's not totally necessary to get custom fonts, but it really does help.


To type, simply select the Type tool from the toolbar.  Click back on your pink background and start typing! You can see that your Layers panel just added a new layer for the text. To stop editing the text, you can either click the FAR "enter" button (on the numbers keypad of your keyboard) or click the Move tool (arrow icon at the top of your toolbar).


To change the font and edit the type options, check out the Character palette. If this isn't visible on your screen, just choose Window at the top > Character. Here, we can edit the font face, change the font size (48pt in my example), change the Color (white), and the line height (36pt. "Auto" is standard but playing with these numbers will increase or decrease the spacing between your lines).  Here you can bold your text and italicize it as well.  The Paragraph tab at the top of this panel will allow you to set your text to be aligned left, right, centered, etc.

Alright so now what if we want to add an image to this banner?  Easy!  Go to File > Open and find an existing photo on your computer to open.


The quickest way to get this image into the banner document is to simply grab it and drag it over. You could also do a select all/copy/paste but I like the drag method better.


Select the Move tool which is at the top of the toolbar, and then click and hold the mouse on your photo and drag it into the pink banner box.

The image is obviously too large for this box, so let's resize it.  Click the Rectangular Marquee Tool which is directly below the Move tool you just selected, and right-click on your banner. Choose Free Transform. This will make a bounding box appear around your image with dragable corners.

Here's a tip for you: To make sure you resize the image in its correct proportions, hold the SHIFT key while grabbing one of the four corners and shrink that image!


I'm not very happy with the placement of my text, so let's move it!  Click on the text layer on your Layers palette to select it. Whichever layer you select in your Layers panel is the one that you will be working on.  So, to move my text down, I select my text layer, and grab the trusty Move arrow tool once again to move the text to the bottom. I also decided to make my text on a single line and decreased the size slightly. To do that, just select the Type Tool again and click on your text. Use the Character panel we used earlier to modify your text.


If you wanted to place the text on TOP of your photo, all you would have to do is grab the text layer in the Layers panel and drag it above the "Layer 1" photo.  Think of the Layers palette as layers in a cake. The layers appear in the order they are shown in the panel, from top to bottom.

I think that's enough for the basic Photoshop lesson today!  Let's save this image for the web!  Go to File > Save for Web and Devices.


Choose your save settings. On the right, choose the JPEG option. Set the quality to "Very High" so it looks good on the web. Saving any lower than "Very High" usually compromises your image.  Very High automatically sets the Quality to 80. You can save it at a higher rate than this is you like, but this should be standard.  Then just click Save and name your file!

Once you have your button saved, you can upload it to a place like Photobucket, or another image hosting site. To add the button to your sidebar, you'll need to create an HTML code that people can copy and paste to their own sites. First, add the image to your sidebar by creating a new HTML/Javascript sidebar widget and entering the code. It should look something like this:

<img src="http://www.FULLURLOFYOURPHOTO.com/yourimageurlhere.jpg">

Then, add the copy/paste code below it:

<textarea><a href="http://www.YOURSITE.com" target="_blank"><img src="http://www.FULLURLOFYOURPHOTO.com/YOURIMAGEURLHERE.jpg" border="0"></a></textarea>

The "textarea" bit tells the site to create a text box, and anything inside of the textarea parts will be displayed inside of the text box.

I hope this helped you learn Photoshop a little bit and make your very own banner ad!  I'll go into more detail in future posts... but there is a LOT of stuff that could be covered, so if you want to learn about something in particular, PLEASE leave a comment and let me know!!!

23 comments:

  1. This is a great tutorial. You spelled everything out so easily for me. I think the next time, I'll be making my own!! Thanks. :)
    Emily at Amazing Grapes

    ReplyDelete
  2. I just made my own - not super fancy but now I know how to do that! Thank you so much for the tutorial!

    ReplyDelete
  3. There is a very good online photoshoop. I started using it since I broke my computer 3 times with my cs4.
    http://pixlr.com/editor/

    ReplyDelete
  4. I loved this! My vote is for more tips like this :)

    ReplyDelete
  5. I'd love to know how you edit your photos on Photoshop!

    ReplyDelete
  6. thank you for posting this! i hope to get Photoshop next year.

    ReplyDelete
  7. Thank you so much for the tutorial! One question though, what size should you use for the actual header of a blog? I'm pretty new to photoshop and can only do some basic editing with photos, so I would love any more tutorials you'd like to share.

    ReplyDelete
  8. @Abby Walker

    It's up to you! Generally you shouldn't really go move than 1200px in width. The height is up to you... depending on how much space you want it to take up!

    ReplyDelete
  9. this is super helpful, thanks for the great tutorial!

    ReplyDelete
  10. Great Tutorial! Just one question though... in step two, the font, when I click onto my 180 x 180 colored box to type, the font is set to 72 but the font looks like it's an 8! It's super tiny... What am I doing wrong? What didn't' I click? I've gone back and back again to figure it out... Hmm... Any idea would be appreciate!

    XO - New time photoshopper :)

    ReplyDelete
  11. SO HELPFUL!!! Thank you!

    Also, is there anyway to create a button without having photoshop??

    ReplyDelete
  12. dana, you are awesome! THank you for sharing ;)

    ReplyDelete
  13. I totally LOVE it I just created my banner jst to see if I can do it. :)
    Could yoz do a tutorial about maybe how to create a layout?? I know it maybe will take a lot of time for you to do it if you would do a blog but I would like to have a wonderfull layout but don't know how to do it really :)
    xx

    ReplyDelete
  14. Hiya love,
    It#s me again *smile* I just wanted to say that I used this blog tip for one of my LOTD-Blog Post's :)

    xx

    ReplyDelete
  15. I'm curious to know how you got the clickable buttons up in your header. That's a pretty cool trick!

    ReplyDelete
  16. Dana I really confuse, I still can't make it true TT__TT what's wrong with me ?
    I already copy the url and my site but it they tell it deleted from tinypics TT__TT

    ReplyDelete
    Replies
    1. Try another photo hosting site. Tinypic will delete your images after a period of time. Photobucket works well.

      Delete
    2. thankyou dana, u help me a lot, I tried skydrive & it really works :)
      by the way I miss to see your photo with the background nature, hope ur next post with the nature background :)
      i'm your followers from bali since a years ago
      if u have a spare time, take a peek at my blog : http://hatta-shani.blogspot.com/
      I recommended u as my inspired blog ^^

      Delete
  17. Great tutorial, thank you veeeery much : D
    I´m defintly going to use this directions to design a new banner for my own blog.
    Love ♥ Abby
    Everyone whos reading this please check out my blog : one-dollar-milkshake.blogspot.com/
    XOXO ♥

    ReplyDelete
  18. Great tutorial :D
    I´m defintly going to use these directions to create a banner for my own blog!!!
    Thank you veeeery much : D

    Everyone whos reading this, please check out my blog!!! I write about fashion& beautystuff and a diary of my band called "One Dollar Milkshake"( What else XD)
    Thank you sooo much
    one-dollar-milkshake.blogspot.com/
    Love & Greetings ♥
    Abby

    ReplyDelete
  19. Thank you! Amazing post, and some great tips! I'm completely incompetent when it comes to photos-editing, so this as really helped! Cheers!

    ReplyDelete
  20. Found your tutorial through Pinterest and found it SUPER helpful for my very first photoshop creation. Thanks for the walk through!

    ReplyDelete

 photo prev_02.jpg  photo next.jpg  photo home.jpg
Back to Top