How to Create Website Banners
In the following instructions you will be creating banners in Adobe Photoshop Elements
6.0, using different images and fonts. The instructions will consist of finding images, cropping
images, combining them on the banner, and including text. Once you are done with the
instructions, you will be able to create your own banner.
How to Open Adobe Photoshop
1. Click Start, select All
Programs, select
Adobe, select Adobe
Photoshop Elements.
The Adobe Photoshop
Elements Welcome
Screen should appear
2. Click Start from
Scratch icon.
A new file set up screen
should open.
3. Fill in your width and
height dimensions of
desired banner.
Your dimensions will
vary depending on your
website. For our banner
we will be using 800
pixels x 200 pixels.
Note: Make sure you are
saving work after every
section.
Background
How to Color a Background
1. Click the Paint Bucket
icon located on the tool
bar.
The Paint Bucket tool,
fills a particular section
with the selected color
of your choice.
Paint Bucket
Set Foreground Color
2. Click Set Foreground
Color button to choose
color.
The Select Foreground
screen should pop up.
3. Click Ok, after selecting
color.
4. Click the banner, in
order to fill with color
of choice.
How to Use the Gradient Tool
The gradient tool blends two colors together depending on how far you draft the cursor. The
more you drag, the more gradual the change from the first color to the second.
1. Click the Gradient Tool
located on the tool bar.
Gradient Tool
Set Foreground Color (Arrow is
Switch Foreground and
Background Colors)
2. Click Set Foreground
Color button to choose
color.
The Select Foreground
screen should pop up.
3. Click the Switch
Foreground and
Background Colors
button.
This will alternate the
selected colors.
4. Click Set Foreground
Color button to choose
color.
The Select Foreground
screen should pop up.
5. Click and drag the cursor
to preferred length.
The more you drag, the
greater effect of the
gradient.
6. Repeat if desired effect is
not achieved.
You can drag the cursor
both horizontally or
vertically depending on
preference.
Images
How to Add an Image
1. Choose the image you
wish to use.
You may use personal
photos, or download a
photo from a website.
2. Right Click the image,
Select Copy.
3. Right Click the banner
and Select Paste.
Your image should now
appear on the banner.
4. Click image and drag
where desired.
5. Click a corner of the
image and drag to resize
the image (if necessary).
Click the Apply accept
the changes or the
Cancel button to reset
the image
How to Crop Image
Cropping an image is the process of removing unwanted areas of the particular image.
1. Click Zoom icon,
located on the toolbar.
Zoom Tool
Eraser Tool
2. Set the value to 300%,
hit Enter. Setting the Zoom value
Your percentage may
vary depending on image
size.
3. Select Eraser tool,
located on the toolbar.
We will be using 5
pixels. However, it will
vary depending on your
image.
4. Trace along the outline
of desired area of image.
You must hold the Left
Click button and drag
eraser tool on the
unwanted background.
5. Increase size of eraser to
finish cropping the
image.
After this step, your
desired section of image
will only remain.
6. Click the Zoom tool and
reset the value to 100%
7. Repeat this process if
more cropping is needed.
Text
1. Click Horizontal Type
Move Tool
Tool.
Horizontal Text Tool
2. Choose preferred font.
3. Click on the banner.
4. Type desired text.
5. Click on Move Tool.
6. Drag text desired area.
Effects
Applying Outer Glow to Text
Applying an outer glow to the text will emphasize the text and will make the text stand out from
the rest of the banner.
1. Select desired text.
A white dotted outline
around text should
appear.
2. Click Layer Styles
under Effects.
Outer
Glows
Menu
Layer Styles
Various
Outer
Glows
Apply
3. Select Outer Glows
from the Drop Down
Menu.
4. Select preferred glow
from the menu.
5. Click Apply.
Before
The glow should
appear on the text.
After
Apply Lighting to Image
Applying lighting to an image enhances the features and makes the image stand out from the rest
of the banner.
1. Click Image Layer to
select.
2. Click Filter, select
Render, and select
Lighting Effects.
A lighting effects screen
should appear.
Drag Points
3. Drag the edges of the
circle to increase or
decrease the glow of
image.
The wider the circle is,
the more glow the image
has. The narrower the
circle is, the darker the
image will be.
The vertical button that is
attached to the line is
where the light comes
from.
4. Click Ok.
Repeat process if
necessary for desired
results.
5. Select image.
Before
After
6. Right Click Layer 1,
Select Duplicate Layer.
Duplicate Layer Screen
should come up. This
will enhance lighting
effect.
7. Click Ok.
8. Select the Layer 1 Copy.
9. Select Overlay in Drop
Down Menu box, under
Layers.
Drop Down Menu
This is what your
finished banner should
look like.
