On these days, it’s common to see people designing their own websites and also explore the web design field; concepts like jQuery, WordPress and JavaScript have become of regular use among web fans and are now part of every designer’s vocabulary.

But it’s not enough learn to handle all the programming tools, because with them, you can only create a super functional website with a bad looking. It’s on this moment when people like graphic designers are needed, because inspiration is something that you cannot learn after reading several books, design it’s a matter of creativity, which is something that some people have and other don’t.

On this tutorial, we are going to show you an inspirational template based on a stylish retro style, hopefully you can learn the technical part that surrounds the making of something like this and from now on you can spend all the time looking for inspiration and working on your own designs. We will be using Adobe Photoshop and Adobe Illustrator across this entire tutorial, so let’s begin.

Discovering the retro look

For start, we all need to know that the word retro stands for “backwards”, which means of course going back or take a previous step once again. That’s the essence of the whole retro thing, old styles, cultures and stuff that were once great and people takes them and makes them fashionable one more time, you can find plenty of examples, such as the return of the Pop Art aesthetic, the recapturing of the hippie ideals or the nostalgic feeling towards the Windows 95 era, brought back to life through many templates and skins that looks like that old operating system.

Many times the retro look takes inspiration for the modern styles, turning into something new, for example, taking the classic Art Nouveau posters and use them into modern branding commercials has been a great idea, or the 50’s look that has been recaptured into the Pin-up look, and so on, there are many examples that prove the fact that the retro concept is always cool on the design area.

Something really important about the retro image is the color. If you use acid, glossy or similar color palettes, it will be difficult to achieve the result of making a retro website. Take a look at the old magazines and movie posters, you will notice a less saturated color palette, brighter colors and more earth-like tones.

It’s easy to achieve a retro color palette, you only need to use less saturated tones and pay a lot of attention to tonal harmonies. If you want to extend the information regarding the retro style and how to get a color palette that works with it, we recommend you to read “How to Use Retro Colors in Your Designs” at SixRevisions.

1. Create the canvas

OK, we want to make a high quality design, and we’re not willing of risk any pixels for compression issues and stuff, so let’s make it big from the start. Open up your Photoshop, go to File>new and setup a canvas with the following measures and properties: 1547 x 1064 pixels, RGB color mode and 72 dpi.

2. Set up the background

OK, we can spend all this tutorial studying how to design a retro background, but we believe that there are many tutorials and nice textures on the subject to bother you with another article about it. Instead we suggest you to choose a background texture that looks good next to the retro image and does not overwhelm the rest of the color palette you have in mind. In this case we chose a nice texture that looks great when we think about retro.

3. Start with the menu

In Adobe Photoshop, many things work through layer styles and clipping masks, as you’re going to see across this entire tutorial. At first it tends to be annoying but after a while you will be used to it and make it almost unconsciously.

We need to be very organized when working with larger files, so first of all, let’s create a group called txt_menu (you can call it whatever you like), the create group button can be found at the bottom of the layer window.

After the group is done, create a layer inside of it, we are going to make the first item of our website, the new layer button is right to the new group icon.

Having all organized, it’s time to start drawing, select your pen tool and draw the first menu’s object.

Take a look at the upper side of Photoshop and make sure that the path options look exactly like the ones on the following screenshot.

Having this, we must proceed tracing the button’s shape, in Photoshop, you will always make curved turns unless you hold Alt and click on the last anchor point, that way you can make straight turns.

3. Implementing fills on your shapes

Now that we have the path, we need to fill it and, for this purpose, we direct our cursor to the adjustment layer button at the layers section, click on it and then select solid color.

Now select an orange tone to fill our path.

4. Styling our object with effects

There you have it, that’s how we work with fillings in Photoshop, now let’s add some effects to our button. Look for the new effect button on the same bottom area of the layers section, hit on it and then select Stroke.

You’re now at the Stroke window, we need to adjust its parameters exactly like the following screenshot:

What this effect does is to add a nice stroke effect to your objects. Let’s move to the next effect, this time is going to be Gradient Overlay, select it on the same contextual menu where stroke was at and pay attention to the following screenshot to assign the same parameters to your button.

Do not hit OK, because we need to make some additional adjustments to this effect’s gradient, take a closer look to each one of the following screenshots.

Now you got it, so far our menu icon must be looking like this:

Then comes a very subtle effect that gives nice details when is being used properly, it’s called Bevel and Emboss, look for it at the bottom of the layers window within the effects menu.

And adjust its values according to what you’re about to see on the next screenshot.

Finally we need to add a drop shadow effect, it can be found at the same place than the rest (layers window within the effects menu).

Now take a look at the parameters that you need to input.

Those are the effects that you need to apply when making this retro appeal, now take a look at our finished button.

The remaining buttons are easier, because they’re almost replicas of this one. Simply select the button’s layer and right click on it, then select “duplicate layer”.

We only need to execute a couple of changes to our duplicate, first one is hiding the drop shadow from the effects list, you can do that by clicking over the eye icon of the effect layer and hide it.

OK that was the first step, the second thing we need to do is change the color, and that’s even simpler than hiding the Drop Shadow effect. Just double click over the color icon (orange square) at the duplicate layer and the color window will open, then select the new color and you’re done.

There you have it, this is how our menu is looking so far.

Let’s have some fun, make a total of three duplicates of the green object and place them consecutively.

This is how the menu looks after the duplication process.

5. Create the main box

This has been easy so far, now we’re going to take thing a little bit difficult, we will proceed by making the bounding box where these previous buttons will be into. We hid the menu buttons for an instant so you can take a look at the whole bounding box path. The shape will be made out of two different elements, first goes the external shape and then the inside part where we need to make the intersection to prevent the buttons for being covered. Because we’ve already left the path properties adjusted, the intersection will occur naturally.

The right icon on the path options is the one that determines the intersection behavior.

And these are the two paths that you need to draw using the pen tool.

Let the magic begin, go to the layers window and where you found the solid color option you will now select gradient, from the preview itself you can notice the intersection, pretty cool isn’t it?.

As for the gradient, this is how you suppose to customize it.

The bounding box needs also effects, let’s add first Stroke.

Set up this effect’s properties on the following way:

So far our bounding box is looking like this (we turned back on the buttons):

The next effect is Bevel and Emboss, it goes like this:

And finally Drop Shadow, you need to adjust its parameters exactly like the ones on the screenshot below.

Look into your graphics library and see if you have a nice logo on PNG format, we need it to be in PNG because it does conserve the transparency properties. Open it and place it at the left side of your bounding box.

And finally type some names for each button, we used the following words (it could be anything).

I don’t know but I feel like this words look kind of empty, perhaps they need some effects, let’s start with Inner Shadow.

Here are the parameters for this effect:

Great, but I feel that it still needs more detail, let’s give it a try to Drop Shadow.

You need to adjust Drop Shadow according to the following settings:

We’re done with this part, take a look at it.

We have achieved some great textures and volumes using a few effects, we’re also starting to reach the retro look that we want.

Now we must add a large shape where people can place information, blog entries, etc. Grab your pen tool and draw the following path.

As you can see, it’s a simple rounded rectangle, it does not have to bee too complex in order to be great, many times the nicest things are also the simplest

Now use a solid color and fill it, remember that the retro color palette is made out of opaque tones, earth colors and less saturated tonal scales.

And a subtle Drop Shadow effect to make the object fit with the rest of our design, let’s start with it.

Take a look at the parameters that we assigned to our effect:

Great, we have passed the first Photoshop part of this tutorial, take a look at how our retro design is looking so far.

As you can see, the color palette along with the effects are starting to generate the retro look.

6. Switching to Illustrator

Now we need to create the slider and the search bar, it’s a nice task that will give the final touch to our design, it’s time to switch program and open your Adobe Illustrator.

Icon by Iconshock.

Go to File>new and create a 316.9 px X 61.94  px canvas, RGB color mode and 72 dpi.

We need Illustrator to create the slider of our web design, we will try to be as concrete and complete as we can during the explanation. The first thing to do is the search bar that goes below the slider, select the rectangle tool and draw a shape that covers almost the entire canvas.

Fill the rectangle with a 3 color gradient with these specific parameters: Linear type and –90 angle.

7. Using clipping masks on Illustrator

And now we’re going to create a clipping path to our rectangle. Trace the following shape using the pen tool.

Having both objects selected, right click over them and select Make Clipping Mask, this is one of the nicest ways of cropping in Adobe Illustrator.

This is the result after completing the clipping mask process:

I know that many designers will question this part, but come on, this is just one of many ways of doing this, select your pen tool and trace an artificial stroke for our masked object.

The stroke must be made with a basic brush, 1 px stroke.

Make a new layer and trace a large shape over the previous gradient rectangle.

Let’s fill this rectangle with a 6 color gradient, linear type and –90 angle.

Repeat the same clipping process that we did previously. Trace a bounding shape over the green gradient object, select both, right click and select Make Clipping Mask.

This is how our search bar is looking so far, nice isn’t it?.

It’s natural to notice the pixels when zooming in, remember that we’re working at 72 dpi.

And now we need to develop an opacity mask to make a nice glow effect to our search box. First, copy paste the green gradient layer (Ctrl + C, Ctrl + F).

Then copy (Ctrl + C) the clipping path, you can select it by clicking over the circle icon at the right side of the layer.

Paste it (Ctrl + F) in a new layer and switch its fill for the following gradient (radial type, 0 angle and 31 % aspect radio):

Remember that you can adjust the gradient’s position by hitting the key G on your keyboard.

Using the rectangle tool. we need you to draw a large shape on top of our search bar.

The object must be filled with a black and white gradient, radial type, 0 angle and 30.85 % aspect radio.

8. Make an Opacity Mask

Pay attention to the next step, cut this gradient shape and then select the yellow one, after that, go to the transparency window and click on the right button to open the contextual menu, then select Make Opacity Mask, don’t worry if the gradient disappears, we’re going to fix that on this moment.

See the black square that have just appeared over the transparency window?, well that’s the opacity mask, click on the square and press Ctrl + F to insert the black and gray gradient, then move it so it fits exactly in top of the yellow gradient. Now our opacity mask has been completed.

There’s one way to make things easier since Adobe CS5 arrived, let’s see how it will work while making an inner glow effect. Copy paste (Ctrl + C, Ctrl + F) the clipping path that we have been using and fill it with a white color.

After that, add to the shape an inner glow effect, you can look for it at the appearance window.

The values for the inner glow effect are going to be Multiply blending mode, 100 % opacity, 5 px blur and edge.

It looks a little bit blurry, perhaps it needs a stroke, let’s give it one with a 1 px basic brush and a dark tone, maybe crimson.

And finally the simplest thing to do, switch the blending mode to multiply at the transparency window.

The basic search box is ready, the rest are just cute details and stuff, like the sphere we’re going to create right now.

Fill the ellipse with a 3 color gradient, radial type, 0 angle and 100 % aspect radio.

Using the pen tool, trace a large  shape next to the ellipse, leave it with exactly the same fill properties.

Copy paste (Ctrl + C, Ctrl + F) the shape and right click on it, select Transform>reflect and then select vertical.

We are done with this part, now let’s go back to Photoshop.

9. Moving back to Photoshop

Icon by Iconshock.

Now that we’re back on our web design, go to File>place and select the Illustrator file where we saved our search bar.

Leave the parameters on the next window exactly like the ones below.

And done, now our search bar is inside Photoshop.

From Photoshop we can add the details missing, such as the zoom icon and the search name. The search is simple, just use the text tool.

Try to use fonts that play along with the aesthetic that you’re looking for, in this case the retro image.

And the zoom icon can be made with a couple of paths, like the following:

With the ellipse tool we trace the inside part of the zoom icon, remember that you must keep the options like you see them on the screenshot.

And now we have the necessary paths for making our zoom icon.

Go to the bottom of the layers window and add a new solid color for the filling.

Select this color to make your zoom icon look good.

And the search bar is now complete, we can proceed with the next part.

10. Our last return to Illustrator

The next part is probably the most notorious element of our design, we’re talking about the slider. We need to make it big and attractive to complete the whole retro look that we want to create. You need to go back to Illustrator in order to proceed, go to File>new and make a document with the following properties: 1280 px X 573.5 px, RGB color mode and 72 dpi.

It’s time to draw, grab your pen tool and trace the following shape:

This element will be the main box of our slider.

Tip:

If you want to have this object to be perfectly symmetric, you can draw only one half of the object and then copy paste it (Ctrl + C, Ctrl + F), right click on it and select Transform>reflect, choose vertical and place it exactly in front of the original shape, select both elements and using the pathfinder tool, click over the first button at the top row of the window to mix them into a single object.

Let’s fill our drawing with a 3 color gradient, radial type, 0 angle and 100 % aspect radio, also you need to adjust the gradient’s position by hitting the G key.

Using the pen tool, draw the following figure:

Remember that you can make them following the previous tip.

As for the color aspect, first you need to apply a 12 pt stroke with a basic brush.

Then we apply a 3 color gradient, radial type, 0 angle and 100 % aspect radio.

Select once again the pen tool and draw this little shape that you can see below.

This one will help us generate some volume texture.

First of all, fill it with black, then change its blending mode to multiply and reduce the opacity to 30 %.

We’re now going to play with a Gaussian blur effect, perhaps a 5 px value is more tan enough.

We are done with this, the next object is also a blurred one, let’s start by tracing it.

Unlike Photoshop, when you’re vectorizing on Illustrator, you can make rounded turns usually but, if you want to take straight turns, you must click over the last anchor point before continue the drawing.

Fill this object with the following color:

Now change the blending mode to multiply, do not modify the object’s opacity.

Finally the Gaussian blur, with 3.0 px is probably just enough.

Now we should add a glow to play along with the two shadow shapes that we just did.

So far we’re doing great, you may want to take a nap before we continue, it’s not funny when you try to make long tutorials like this one in a single sitting.

We’re going to use opacity colors, which is very simple, just apply a 2 color gradient and from the same window you can alter any color’s opacity. The other fill properties that you need to consider are radial type, 0 angle and 40 % aspect radio, also remember to adjust the gradient’s position with the G key.

We’re almost done with this part, the next object goes like this:

It’s this tiny elements the ones that makes a web design to outstand in front of others.

The gradient is exactly like the object behind it, 3 tones, radial type and 100 % aspect radio. The only thing we need to do is changing the blending mode to screen.

Finally we need to make a clipping mask, start by drawing it with the pen tool.

Take a closer look, this is how the drawing is supposed to look:

You got it, now select everything, make sure that the path that’s going to be the clipping mask is on top of the rest, then right click and select “Make Clipping Mask”.

And this is how our object looks after we’re done with it:

It’s time to go back to Photoshop, place yourself over your design file and import the Illustrator file that we just did.

11. The final step, Photoshop

Icon by Iconshock.

And as we did before, just leave everything exactly like the screenshot below and place your AI file.

And now our design is looking like this, make sure to place it on the right part of the canvas.

I don’t know, it looks kind of odd, maybe we must add it some effects, let’s start with Stroke.

Take a look at the following screenshot to find out the stroke values that we used on our design.

The next effect will be Bevel and Emboss.

Check out the effect’s parameters on the next screenshot.

And finally, let’s add a Drop Shadow effect.

Set up its parameters according to the following screenshot:

Oh yeah, much better, take a look at our improved slider box.

The rest of the design are small objects and details, like the following scrolling arrow.

Good, there you have it.

Now apply to it a solid color filling.

Nice, this is how our arrow is looking so far:

Maybe some effects will look good on our arrow, let’s start with Inner Shadow.

These are the parameters for this effect.

Now add a Drop Shadow to complete our arrow.

And these are the effect’s values on this occasion.

Great, you can tell that our arrow looks nicer with those two effects.

Copy paste the arrow’s layer, then select the path and go to Edit>transform>flip horizontal.

Move it to the right side of your slider, make sure that is aligned with the original arrow.

Use the pen tool to draw the next shape, we’re just at 3 layers from the end.

Good, this is the path we need to do:

Apply a solid color to fill it.

Let’s place a random picture to emulate your slider, we choose one from the Iconshock’s library.

Remember that we’re working on a retro design, so the image that you’re placing must be according with that style.

And the final layer, let’s make a frame for our slider, grab your pen tool and trace these next 2 paths.

Remember that the pen tool must be set up with these parameters:

Then select a gradient and fill our slider’s frame.

Just 3 effects and we’re done with our design, first one is going to be Stroke.

And these are the specific parameters for the effect:

The next effect is going to be Bevel and Emboss.

And customize it with the following values:

And finally the last effect, Drop Shadow.

Enter the same parameters than the screenshot below.

We’re finished, our retro web design is now complete, take a look at it:

(Click on the image to enlarge).

And that’s all for today’s tutorial. As you can see, Illustrator and Photoshop are amazing tools that can easily work together, now that you have learned how to integrate these two Adobe products, you can start making your own web designs and interfaces, see you on our next tutorial.