Webbildr Design Services
WebbildrHome
Resources
Forums

Dell

If Bree is online you can chat with her here!! If not, leave a message!! She'll get back to you ASAP!!

Tools
Color Table <---NEW
Flash Notes
Flash Pix1
Flash Pix2
HTML Tools
  HTML Editors
  WYSIWYG Editors
  HTMLTagTable <---NEW
HomeSiteNotes
HomeSite Pix
Scanning
WebPalette <---NEW



Shop at Amazon.com!


Tutorials
BannerTutorial
BannerAdTutorial
Formatting Text
The <FONT> Tag
HTML Basics
  HTML
  To Build a Page
  HTML Tags
WebpageTutorial
  Part 1/Background
  Part 2/Buttons
  Part 3/Banner
  Part 4/HTML
  Part 5/ThePage


Borders.com

Script/Code
BannerRotator
DropDownBox
Hide URL
MetaTags Updated!
NoRightClick
PopUpWindow
Rollover
TextScroller

Example Sites
and Misc Sites

Aefornata's GHB
  Example of an info site
Bunny Munchkin
  Example of an affiliate site
Observation Test
  Just for fun
Email



©2000
All Rights Reserved
Webbildr.com
Apex, NC
27502
919.363.0053










Banner ads are everywhere on the net. Learning to cultivate this prime net real estate is a real skill!! Some folks get so good at this, this is the only work they do!!

The typical banner size is 468 pixels wide and 60 pixels high just like the one below for Quark's Place.

Quark's Place

Banner ads are not yet standardized. However, you can use this unofficial size with confidence. Other "standards" are:

  • Half Banner 243x60
  • Small Square 125x125
  • Micro Button 88x31
  • Small Button 120x60
  • Medium Button 120x90
To make a banner:

Step 1: Start up PhotoShop. Create a new file that is 468 pixels wide and 60 pixels high, "contents" should be white.

Step 2: For this tutorial, you should open the file in the Photoshop Samples file that is called "fruit.jpg" Use the lasso tool to select a rose. Once the rose is selected. Copy it.

select a rose

Step 3: Paste the rose into your banner file. The size maybe bigger than you want, so go to Edit--->transform---->scale and scale the rose to the size that appeals to you. Then press enter. You may need to rotate it a bit. You can go to Edit--->transform--->rotate. You may need to do this a few times until you get it where you like. You can use the move tool to move it to where you like. I also copied and pasted a leaf to my banner. I moved the leaf to behind the rose using the layer--->arrange--->send backward.

Step 4: Next I use the Smudge Tool (the one that is a hand with a finger sticking out like it's going to smudge something). In the Smudge options, I make sure "normal" is the setting and that I've enabled "all layers." Also I set the pressure to somewhere around 30 depending on what effect I want. I smudge along the edges of the rose.. not alot just a little to blend in the edge.

Step 5: In this step I choose an appropriate quote about Moms because this is a mother's day banner ad. I choose a font that is easy to read even though it's small. You can experiment with placement.

Step 6: I choose a larger font for the main message. Usually I choose a script for one part of the banner and then something that is more plain for the second half of the message. For extremely tiny print I use arial. You need to be familiar with your fonts and how they appear. The fonts should not compete with each other. Also your background should not compete with your font.

Two fonts

Step 7: To break up the space in the banner in a very subtle way, I create another layer and then create slightly green tinted strip of color at the bottom of the banner and send it backward using layer---->arrange--->send backward.

added a color strip

Step 8: Next I write the name of the website in small print over the colored strip.

Step 9: Finally, I go to Layer--->flatten image. Then I go to File-->save as--> Momsdayad.jpg and here is my banner...

Happy Mother's Day









Webbildr.com . Apex, North Carolina 27502 . (919) 363-0053