How to Add Picture to a Banner in Photoshop


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
  • Computer
  • 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.

Related Searches


  • Photo Credit Ciaran Griffin/Lifesize/Getty Images
Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!