Design Web Ads Graphic in Photoshop

- - Photoshop

Ads that blend into a website’s design or that try to pack in too much information will usually have the lowest click-through rates. In this web ads graphic tutorial, you will learn how to create a standard sidebar ad graphic in Photoshop CS5 that is eye-catching, simple and effective. You will use beginner-to- advanced techniques for creating dimension, light and strong type. Here is a glimpse of the finished graphic:

ad_graphic_tutorial_byv

 

Step 1

Launch Photoshop and create a new document (File > New Document). Give it a name and choose “Web” from the Preset drop-down menu. Choose “Medium Rectangle, 300 x 250″ from the Size drop-down menu and click “OK.”

1

Step 2

Right-click the Paint Bucket in your left-hand toolbar and choose the Gradient. Click the Radial Gradient option in the Gradient toolbar and then click on the gradient to change colors.

2

Choose the first preset for a two-color gradient. Click the left marker, or “stop,” and then click the color swatch to change the color to #431335. Repeat with the right stop and choose #e80d74.

Step 3

Zoom in on your graphic a bit and line up your crosshair with the 150px width mark and 30px height mark. If your rulers are not visible, hit Cmd+R (MAC) or Ctrl+R (PC).

Hold down your left mouse button and drag a line downwards to about 100px shy of the bottom of the document. Release to great your gradient.

3

Step 4

Open your Layers Panel (Window > Layers), create a new layer and call it “lights.” Click on “File > Place,” choose your light texture and click “Open.” Use the handles to reposition and scale the texture.

4a

Choose “Soft Light” from the Layer effect menu and set the Opacity to 42%.

4b

Step 5

Select the Ellipse Tool by right clicking the Rectangle Tool button in your left-hand toolbar. Create a new layer and call it “oval.”

5a

Set the foreground to white and draw an oval across the top of your image. Use the Move Tool to position the oval so it is just peeking out from the top:

5b

Double-click the “oval” layer and click on “Color Overlay.” Click the color swatch and set the color to # d2147b.

5c

Select “Drop Shadow” and turn the Opacity down to about 29%. Set the angle to 122 and click “OK.”

5d

Step 6

Create another new layer and call it “bottom oval.” Using the Ellipse Tool, draw another oval that is slightly wider than your image. Use the Move Tool to position it off the bottom edge, aligning the right side with your image:

6a

Double-click on the “bottom oval” layer and select “Inner Shadow.” Set the Blend Mode to “Normal” and turn the Opacity down to 19%.

6b

This technique gives your oval an elegant edge to add dimension.

6c

Step 7

Our ovals need a little bit more depth to appear 3-dimensional. To achieve this effect, we will use the Gradient Tool inside an oval selection. Create a new layer and name it “overlay ovals.”

Choose the Elliptical Marquee Tool by right clicking the Marquee button.

7a

Place your crosshair about 100 pixels below the bottom of your image, and slightly inside the right border. Hold down your left mouse button and drag your selection upwards and to the left until it comfortably fits within your bottom oval. Release to create the selection:

7b

Choose the Gradient Tool and click the gradient in your Gradient options toolbar to select the Neutral Density gradient. It should be set to a light grey by default. Click the “Reverse” option.

Place your crosshair at about 75px from the top and centered with your oval selection. Hold down the left mouse button and drag downwards to about 475px. Release to get a soft grey gradient.

7c

Repeat this step to create a gradient oval selection within your top oval. Choose the Move Tool if you need to reposition or transform your ovals to get them lined up properly.

7d

Step 8

Create a new layer and call it “magic hat.” Click on “File > Place” and locate the magic hat icon found inside the “Photo manipulation” folder of the free icon pack. Use the Move Tool to scale it down and position it on the left side of your bottom oval.

8

Step 9

Now it’s time to fill our graphic with some text! Choose the Text Tool from your left-hand toolbar and drag a text area across the top for your tagline text. Choose a clean sans-serif font at about 18 pt with a medium weight and set the foreground to white. I used Sansus Webissimo, which you can download here.

9

Continue to add your title text above the hat and a couple of features off to the right. Experiment with the size or transform the text with the Move Tool until the scale looks balanced. I used Lobster Two in Bold Italic. You may download it free here.

Step 10

Double-click on your top text layer and select “Gradient Overlay.” Since the light is coming from below, click on “Reverse,” reduce the Opacity to about 20%, and click “OK.”

10a

Double-click the title text layer and select “Drop Shadow.” Reduce the Distance and Size to 1px. Select “Gradient Overlay” and reduce the Opacity to 37%, then click “OK.”

Add a drop shadow to both of your feature text layers. To get a softer shadow, reduce the Distance to 1px and leave the rest of the settings default.

10b

10c

Step 11

You could simply place your price or call to action in the remaining space, but it wouldn’t get the attention it deserves. To draw the eye to what this ad is advertising – a drastically reduced price – we need to make it pop.

Choose the Custom Shape Tool by right clicking the Rectangle Tool button.

11a

Click the Shape button from the tool options bar and choose the default Starburst.

11b

Select your “magic hat layer” and then create a new layer called “burst,” which should insert itself below your text layers.

Set your foreground to a nice bright color that compliments your overall palette. I used #db176a for this exercise. Draw a starburst in the center of your image and use the Move Tool to move it into the lower right corner and scale it if needed.

Step 12

To add dimension to the burst, double-click it and select “Gradient Overlay.” Click the Gradient to choose the Neutral Density gradient. Select the Radial style, check “Reverse” so the center receives the light and reduce the Opacity to about 47%.

Right-click your burst layer and choose “Duplicate.” Double-click the bottom burst layer, deselect the Gradient Overlay and select Color Overlay. Choose a darker version of your burst color. For this example, I used #720d38.

Choose the Move Tool and click the corner of your burst to enable the transform tool. Right-click and choose “Rotate” and rotate the burst a bit to the left to create an offset shadow. Finish by turning the layer opacity down to 15%.

12c

Step 13

Click the top burst layer and then use the Text Tool to add a price and currency symbol in the center of your burst using Lobster Two in Bold Italic. Right-click on your title text layer and choose “Copy Layer Style.” Right-click on your price and currency symbol layers and choose “Paste Layer Style.” This is a handy shortcut to keep your type uniform. Finish by adding a final “only” text layer, just above the price, using your sans-serif font. Experiment with the layer effects to achieve the look I have in the example.

13

Step 14

To balance out the white in this image, add a layer just above your oval layers, set your foreground to a dark color that compliments the background, and use the Rectangle Tool to draw a bar along the bottom of the image.

Choose the Elliptical Marquee Tool and set your starting point off the image to the left and just above the magic hat. Drag downwards until your oval hits the right edge. The objective is to create a curving line that is proportional to the top of your “bottom oval.”

Click “Edit > Cut” to remove the color inside the oval and create your bottom border.

14b

Step 15

To inject a little magic into the image, we need to add a final touch. Create a new layer and call it “stars.” Choose the Brush Tool and select the “Flowing Stars” brush, which is one of the default brushes.

step15a

Use varying sizes to create a modest scattering of stars coming out of the hat and extending up towards the “features” text. Double-click the layer and select “Outer Glow.”

Your finished graphic should look something like this:

web ads graphic

And you’re done!

Subscribe Our RedFox Magazine Newsletter

Get the latest designs, giveaway, SEO tutorials, tips and tricks plus lots of more.

Subscribers Count: 5,282

Sandeep Verma

Sandeep, is a web designer and programmer and he is working on software industry. He have much knowledge on blog posting. Mostly he spend his time on daily blog posting and finding useful information to share on internet. Thanks to sandeep who join RedFox Magazine and want to contribute some his work with us!..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>