Web template tutorial: Mixing Photoshop and Illustrator | Bypeople

Web template tutorial: Mixing Photoshop and Illustrator

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.

Retro001

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.

Retro002

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.

Retro003

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.

Retro004

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.

Retro005

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.

Retro006

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

Retro007

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.

Retro008

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

Retro009

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.

Retro010

Now select an orange tone to fill our path.

Retro011

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.

Retro012

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

Retro013

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.

Retro014

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.

Retro015

Retro016

Retro018

Retro019

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

Retro020

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.

Retro021

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

Retro022

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

Retro025

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

Retro024

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

Retro026

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

Retro027

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.

Retro028

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.

Retro029

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

Retro030

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

Retro027

This is how the menu looks after the duplication process.

Retro031

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.

Retro007

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

Retro008

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

Retro032

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

Retro033

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

Retro034

Retro035

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

Retro012

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

Retro036

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

Retro037

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

Retro021

Retro038

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

Retro025

Retro014

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.

Retro040

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

Retro041

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.

Retro042

Here are the parameters for this effect:

Retro043

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

Retro044

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

Retro045

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

Retro046

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

Retro047

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

Retro007

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

Retro048

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.

Retro010

Retro049

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

Retro044

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

Retro050

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

Retro051

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

Retro052

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.

Retro053

Icon by Iconshock.

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

Retro054

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.

Retro055

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

Retro056

Retro057

Retro058

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.

Retro059

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.

Retro060

This is the result after completing the clipping mask process:

Retro061

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.

Retro062

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

Retro063

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

Retro055

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

Retro064

Retro065

Retro066

Retro067

Retro068

Retro069

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.

Retro070

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

Retro071

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

Retro078

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

Retro079

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

Retro080

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

Retro081

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

Retro082

Retro084

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

Retro055

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

Retro085

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.

Retro086

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.

Retro087

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.

Retro089

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

Retro088

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

Retro090

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.

Retro091

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

Retro092

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

Retro093

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

Retro094

Retro095

Retro096

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

Retro097

Retro098

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

Retro099

Retro100

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

9. Moving back to Photoshop

Retro101

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.

Retro102

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

Retro103

And done, now our search bar is inside Photoshop.

Retro104

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.

Retro105

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

Retro106

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

Retro107

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.

Retro007

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

Retro108

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

Retro010

Select this color to make your zoom icon look good.

Retro109

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

Retro110

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.

Retro111

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

Retro062

This element will be the main box of our slider.

Retro112

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.

Retro113

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.

Retro114

Retro115

Retro116

Using the pen tool, draw the following figure:

Retro062

Remember that you can make them following the previous tip.

Retro117

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

Retro118

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

Retro119

Retro120

Retro121

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

Retro062

This one will help us generate some volume texture.

Retro122

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

Retro123

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

Retro124

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

Retro062

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.

Retro125

Fill this object with the following color:

Retro126

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

Retro127

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

Retro128

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

Retro062

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.

Retro129

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.

Retro130

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

Retro062

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

Retro131

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.

Retro132

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

Retro062

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

Retro133

Retro134

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

Retro135

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

Retro136

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

Retro101

Icon by Iconshock.

Retro102

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

Retro137

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

Retro138

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

Retro139

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

Retro140

The next effect will be Bevel and Emboss.

Retro141

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

Retro142

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

Retro143

Set up its parameters according to the following screenshot:

Retro144

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

Retro145

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

Retro007

Good, there you have it.

Retro146

Now apply to it a solid color filling.

Retro010

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

Retro147

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

Retro148

These are the parameters for this effect.

Retro149

Now add a Drop Shadow to complete our arrow.

Retro143

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

Retro150

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

Retro151

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

Retro152

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

Retro153

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

Retro007

Good, this is the path we need to do:

Retro154

Apply a solid color to fill it.

Retro010

Retro155

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

Retro102

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

Retro156

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

Retro157

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

Retro008

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

Retro158

Retro159

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

Retro139

And these are the specific parameters for the effect:

Retro160

The next effect is going to be Bevel and Emboss.

Retro141

And customize it with the following values:

Retro161

And finally the last effect, Drop Shadow.

Retro143

Enter the same parameters than the screenshot below.

Retro162

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.



Related Deals


Related Posts