A simple banner, especially one with a picture, provides more visual interest for your online visitors than a simple text link to your latest vacation pictures or newest culinary creation. With a few minutes and a cursory understanding of Photoshop, you can create a simple picture banner for your website.
Things You'll Need
- Photoshop software
- Digital image (optional)
Open or create the banner image in Photoshop. If you haven’t already created the banner, do so by opening the File menu and selecting “New.” Enter the desired height and width in pixels, and click "OK" to create the new document. Add text, background colors or other styling you would like for the banner, as well.
Open the picture in Photoshop. If necessary, adjust the image size to match the banner. You can change the size of the image by opening the Image menu, select “Image Size” and enter the desired height and width.
Select the picture. Use the Rectangular Marquee found under the Photoshop Tools toolbar as a square with dashed sides, to select the desired portion of the image. To choose a square, hold the Shift key while you make your selection.
Copy the picture. Click the “Ctrl” and “C” keys at the same time to copy, or open the Edit menu and select “Copy.”
Paste the picture into the banner. Open the window that contains the banner. Click the “Ctrl” and “V” keys, or open the Edit menu and select “Paste” to insert the picture into the banner. The image will appear as a new layer under the Layers pane.
Adjust the location of the picture. Ensure the picture’s layer is highlighted in the Layers pane. Move the picture to the appropriate location with the Move Tool (the arrow with a cross next to it) by clicking and dragging the image or using the arrow keys on your keyboard.
Save a PSD version of the banner. Open the File menu and select "Save as." By default, Photoshop saves the banner as a PSD (Photoshop Document). Save the document to the same location as the web-ready image, so you can easily edit the existing layers, such as any text or other designs in the future, without needing to recreate the image.
Save the banner. Open the File menu and select "Save for Web & Devices," which will "flatten" or combine all the layers into a single image. Select the file type in the menu. For webpages, select "GIF" (to save storage space) or "PNG-24" (for an image with a transparent background). Click "Save" and select the location on your hard drive to save the file. If you already have a folder for your website, save the banner to that folder; otherwise, create a new folder on your Desktop, in My Documents or any other location you choose.
Tips & Warnings
- Common banner dimensions include: 120 pixels by 60 pixels (small rectangle), 125 pixels by 125 pixels (small square), 300 pixels by 300 pixels (medium square), 468 pixels by 60 pixels (standard web banner size - large rectangle).
- Ensure the banner is at least three pixels smaller (on all sides) than the space it will sit in, to provide adequate separation from the rest of the page.
- Photo Credit Ciaran Griffin/Lifesize/Getty Images
How to Make a Banner in Photoshop CS3
A form of website promotion that you cannot overlook is banner advertising. Banners are eye-catching and can quickly draw people to your...
How to Make a Scrolling Picture Banner
Picture banners can be used for all sorts of things on a website. They can serve as advertisements, links to other pages...
How to Create Banners With Photoshop
The horizontal banner is the first thing a visitor sees on the home page of a web site. The banner sets the...
How to Make a Photo Banner
Being able to create an engaging and colorful photo banner for a website or blog will save your small business the expense...