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.
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.
