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


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