Photoshop web banner

by Design Workshop Sydney

Creating web banners in Photoshop is a simple step-by-step process. We discuss it in full in our Adobe Photoshop courses.photoshop-web-banners
The web banner here was created by first choosing a web size from the File > New document dialog box. Choose the Web the drop-down list, and see various common banner sizes in pixels. If you have a different banner size, just punch in the width and height into the fields. Ask your web people what size they prefer.
The resolution will be 72 ppi (pixels per inch) by default, but note that with the increase in high resolution devices this may change to 150 ppi in future. Colour is RGB of course (Red, Green, Blue). If this is a size you would use on a regular basis, hit the Save Preset button. then hit OK to create the empty banner. You could also save this as a template for future use.
We then copied the image of the underwater kid into the file, and rescaled it to fit better. We also copied in the Swimsafe Australia logo. The blue mask was created by clicking and dragging with the Elliptical Selection tool, pressing Shift to keep it perfectly circular. A small Feather value was also chosen to blur the edges slightly. We then inverted the selection and hit the FX button at the bottom of the Layers panel, and chose Fill Colour to add the blue. We then turned down the layer opacity for a more subtle effect.
Finally we added text with the Type tool. And performed the Save for Web function from the File menu. More on this feature in another blog. As you can see, making web banners is an easy process if you follow a simple procedure.
Many more tips and techniques can be found at the Adobe website. And see many examples of our clients’ work on our Facebook page.
Other related Photoshop Blog Posts: