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.
✓ 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.
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 …
✗ … 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 …
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" …
✗ … 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.
✗ Set the Stroke Color.
✗ Also you can set the stroke thickness if you want …
✗ 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.
Step #9: Crop Tool
✗ Get the Crop Tool or hit the keyboard shortcut letter (c) …
✗ … and crop your Photo.
Step #10: Lasso Around your Image ~
✗ Now get the 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.
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) …
✗ … 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.
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.
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:
✓ Hopefully it looks something like this:
✓ (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
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.
Last Step: Save and Attach ~
✓ Attach the .zip file with the completed links …
View the Presentation insert_graphic_web_page if you want for more information.