Nobs Tutorials: Designing Corporate Teaser Graphic, Part 3: Finishing Touches

(Please see the first and the second part of this tutorial before you will read this one)

So, in this tutorial I explain how I made this corporate-ecommerce-style teaser graphic. Here’s the final result:

In this part of the tutorial we will put finishing touches onto our design and make it look completed.

Step 1

First we have to add some depth to our background. With all this realistic card picture our background now looks too plain and boring:

Of course, the best way to add volume to the picture is some lighting simulation. Which is of course basically a change of color from light (yellowish green in our case) to dark (dark saturated green).

Grab the Gradient tool (keyboard G) and lets create a 3-color gradient, I made this colors out of our base green background and ended up with something like this:

Switch to the base layer, that is our green background. Then create a new blank layer (Cmd+Shift+N) and apply the gradient, starting from the lower part of the card and dragging up towards the edge of the teaser:

Nice, eh? I like it!

Step 2

Now I wanted to add even more depth to the picture, so I decided to apply a little ‘inset’ effect to the whole teaser.

Duplicate the base layer – select it in the Layers palette and hit Cmd+J on the keyboard. And now drag the layer all the way up, so that it is no longer inside our teaser group. Why would we need that? It’s now hiding everything we have created! Well, one more cool trick for you to see…

Now apply this layer effect to our green background (that is Inner Shadow and please note that I modified the contour slightly too!):

And now we make the same thing like we did in the first part of our tutorial – set the Fill property of this layer to 0%:

We now have this nice inset over our teaser…

Step 3

Now it’s time to place the text – nothing special here, I decided not to apply any effects. Why? Because every composition needs contrast, and with all this graphically intensive (patterns, 3d objects, etc) picture the best way is to provide something plain and simple. And that is how I chose our text to be.

It’s obvious that it can be a bit hard to read for some people, so I had to apply just a simple and quite subtle drop shadow, like this:

Again, please note that I do not use black for my shadow, that would be thick and dirty, not really what I wanted.

And by the way, this text is Myriad Pro Bold Condensed, Condensed and just Regular – it sometimes gives a very nice effect to vary the weight of the characters.

Step 4

Now we need what I call “an action item”. Something really really clickable, so that any user could tell for sure: “This is where I should click to see more about it”. So of course we need a button saying something like “BIG SALE!”

This button is rather simplistic, I made it with a couple of layer effects and a highlight overlay:

Highlight is basically a black to white gradient set to screen mode with it’s lower half cut off, and then made into the same shape as button, but contracted by 1px. This is not a good explanation of course, but the fact is you can use your favorite button style instead! Or let me know and I will make a separate tutorial on how to make buttons like this.

Step 5

We’re almost finished with this! I decided not to stop on the achieved result and make just one more improvement to the picture.

So I selected the pattern-overlayed world map and gave it a sheer wide shadow, just to enhance the depth of the background a bit more, here’s the “before and after” image: