5/14/11

How to Create a Transparent Banner

Creating a Web banner allows you to spread the word about your website or service using images, text and even animation. One of the simplest ways to integrate your banner into a website is to create background transparency instead of using a matte background color. While both the PNG and GIF file formats support transparency, PNG is more commonly used in 2010 due to the higher image quality and better color support than GIF. Three popular image-editing programs that support transparency are Adobe Photoshop Elements, GIMP and Paint.NET.
  • Banner Transparency in GIMP

    • 1

      Go to "File > New" to create a new image. Designate the size of your image; this is done in pixels by default, but you can change it to inches, millimeters, points or picas.

    • 2

      Click "Advanced" on the "Create New Image" window. Choose "Transparency" from the "Fill with" drop-down menu. Click "OK."

    • 3

      Create your banner image based on what you want your banner to look like. Go to "File > Save" and select either the PNG or GIF file formats from "Select File Type." You can also designate the file type by putting the extension in the filename, i.e. "my_banner.png" or "my_banner.gif."

    Background Transparency in Adobe Photoshop Elements

    • 1

      Create a new image by going to "File > New."

    • 2

      Select the "Transparent" radio box from below "Contents" on the New file window. Click "OK."

    • 3

      Once you've created the banner to your specifications, go to "File > Save for Web" and select GIF, PNG-8 or PNG-24 as the optimization format. You can choose a Web background color from the Matte menu, if you know the background color that you need.

    Background Transparency in Paint.NET

    • 1

      Create a new image in Paint.NET. Unlike other image-editing programs, Paint.NET does not offer the option to set transparency upon creating the image.

    • 2

      Create a new layer on the layer palette menu--located by default in the lower right corner of the screen--and delete the default background layer. This should leave you with a transparent background.

    • 3

      Once your image is created, go to "File > Save" and select "GIF (*.gif)" or "PNG (*.png)" from the "Save as type:" menu. Click save.

  • No comments: