banner


Summary:

Simple Banner with Rounded Corners in Photoshop

    ●   Create a Simple Banner with Rounded Corners by following this tutorial in Photoshop.

    ●   Then, insert it in your web page using HTML code.

    ●   Lastly, Center the image using the <center> tag.


Learn About:

Rounded Rectangle Tool Magnetic Lasso Tool Feathering Crop Tool Crop Tool

  •   This tutorial is part of the Fan-Tastic Project.

Other People's Work:

Here are examples of work inspired by this tutorial.

intro oswalds page

Step #1: Open a Blank Document in Photoshop ~

Open Photoshop & create a new canvas. Hit the keyboard shortcut: Cmd(⌘)+N or go to: File > New

… and select Pixels.

Make your canvas 800 x 200 pixels.


Step #2: Set Your Colors ~

Double-Click your colors …

Foreground color picker

… and set the colors to whatever you need.

Set the other color too to another color that matches, just change them both …


Step #3: Rulers ~

Go to: View > Rulers or hit the keyboard shortcut Cmd(⌘) +R and Double-Click the ruler bar.

Set "Rulers" to Pixels …

Then click on the Ruler itself and drag out a line …

… position the line at 25 pixels from the edge, or whatever margin your project requires.

Do that again, only on the other side.

Drag a ruler from the top about 25 pixels down.

Lasly, do one at the bottom so all you guides are the same distance from the edge …

same margin header


Step #4: Rounded Rectangle Tool ~

Select the Rounded Rectangle Tool which is behind the Line Tool …

… make sure Pixels is selected in "Pick tool mode" …

fill pixels

… set the Radius in the menu bar at the top...


Step #5: Draw a Box inside the Guides ~

Draw a Box inside the guides:


Step #6: Gradient Overlay ~

Go to: Layer > Layer Style > Gradient Overlay

… select Gradient Overlay and pick your gradient.

Click OK and check what you got!


Step #7: Stroke, Bevel and Emboss & Inner Glow

Go to: Layer > Layer Style > Blending Options - and try Stroke.

stroke

Set the Stroke Color.

stroke line

Also you can set the stroke thickness if you want …

stroke width

While you're there, try Bevel and Emboss and Inner Shadow, and any others you like.


Step #8: Open a Picture of Your Person, Place or Thing in Photoshop …

What is your site about? A person, place or thing? Find a picture you want on your banner and open it in Photoshop.

image


Step #9: Crop Tool

Get the Crop Tool or hit the keyboard shortcut letter (c) …

crop tool

… and crop your Photo.


Step #10: Lasso Around your Image ~

Now get the Magnetic Lasso Tool

magnetic Lasso tool

… and begin to trace around your image.


Step #12: Feathering ~

Go to: Select > Modify > Feather and set the Feather Radius to approximately 10.

Then go to: Select > Inverse and hit Backspace or Delete.

image


Step #13: Clean up ~

Select the Eraser Tool by hitting the keyboard shortcut letter (e) …

… and click on Brush Preset picker in the Menu Bar.


Step #14: Copy the Image and Paste it on your Banner ~

Copy your cutout image and paste it on your Banner. Then hit the keyboard shortcut: Cmd(⌘)+T to adjust the image to fit:


Step #15: Add Some Text ~

Select the Text Tool or hit the keyboard shortcut letter (t) …

text

… and drag out a box and type something you can use in your Project!


Step #16: Select your Font ~

… click on Font Family in the menu bar and scroll through the different fonts.


Step #17: Blending Options ~

Also apply Blending Options and effects to the Text Layer too.

blending options


Step #18: Save the File in your Web Page Folder~

Then go to: File > Save for Web … and save the document as png-24 format.

Name the document: header.png - IN THE ROOT FOLDER OF YOUR PROJECT - again, make sure you save the file in your web page folder.

save the image


Step #19: Insert a Graphic into a Web Page ~

A graphic is another example of an in-line element.


The code that directs the browser to the location of the image looks something like this:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Hopefully it looks something like this:

image

(View the Presentation insert_graphic_web_page.ppt if you want for more information about images.)


Step #20: Center the Image ~

Everyone wants to know how to center the image in their web site.

Surround the image with <center> tags

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #21: Compress your Folder ~

Now all you have to do is Right-Click the root folder of your site, compress it and attach it.

right click root folder


Last Step: Save and Attach ~

Attach the .zip file with the completed links …

zip file


View the Presentation insert_graphic_web_page if you want for more information.