Illustrator web template tutorial | Bypeople

Illustrator web template tutorial

Hello folks, welcome to a great new tutorial. Today we will guide you across the making of a beautiful and elegant template, ideal for all your business and company applications; we will take a look over every single element that is part of this template and will fully explain it, from gradient properties to the effects, you will find all the necessary information to complete this great template, we suggest you to prepare a lot of coffee and gather many bags of chips, also prepare all your favorite artists tracks to pass the time. OK now that we are all set it’s time to begin, so please open your Photoshop.

1. Plan your design

elegance01 It’s important to make an initial mockup or sketch of how your template is going to look like, it’s just a diagramming of the structure, so there’s no need to make any complex illustrations or things like that.

2. Create your Photoshop file

When you make a web template, it’s important to always respect the minimum width of 960 pixels, beyond that you can use any proportions you want, on this case our file is going to have a working space of 1547 x 1516 pixels, RGB color mode and 72 dpi. elegance02

3. Start making the background

For start our design, we will begin with the creation of the background, to do that you need to go to the Layers window and insert a gradient fill. elegance03 And follow the next parameters in order to fulfill the gradient: elegance04 elegance05 This background will work as the main layer where we will be placing everything else from now on. elegance194

4. Design the header and footer

Select the rectangle tool and trace the following shape so we can mask our next fill. elegance06 elegance07 Having this set, let’s add a solid color fill from the Layers window. elegance08 The color is the following one: elegance09 So now we have the main object set, let’s take a look at it. elegance10 But that’s not it, now we need to add some effects to make our object more attractive, the effects that we’re going to utilize are Color Overlay, Gradient Overlay and Pattern Overlay. Pay attention to the following screenshots to perfectly duplicate our result. elegance11 And the properties for each one of these effects are the following: elegance12 elegance13 On the case of Pattern Overlay, we created a custom pattern (Create your design and then go to Edit>Define Pattern) like the one you will see on the next preview. elegance14 And our design now looks way nicer than before, let’s take a look to a preview. elegance15 Grab your rectangle tool one more time and use it to make the following object: elegance06 elegance16 Now choose a solid color to fill the element. elegance08 elegance17 You’re doing great, so far we have made an initial approximation to our design. elegance18 The next path cannot be created with the rectangle tool, we need something a little bit more precise, so select the pen tool. elegance19 This is the element that you need to draw with the pen tool: elegance20 And let’s fill the path we just did using a solid color. elegance21 elegance22 Next is another irregular shape made with the pen tool. elegance19 elegance23 Fill the path using the following solid color: elegance24 elegance25 The next thing we did was to insert a custom character design from our archives, remember that you can either copy paste it directly from the program or go to File>Place to put it on the working space. elegance26 Grab the rectangle tool and draw the next shape that’s going to be the footer. elegance06 elegance27 And similar to the first object we did, this one has alike parameters and color values, let’s start by adding a solid color to it. elegance08 elegance28 Good, now we have set the main layout for this object. elegance29 And now we need to add the same 3 effects that we used on the previous object, Color Overlay, Gradient Overlay and Pattern Overlay. elegance11 These are the parameters to follow on each one of the effects: elegance30 elegance31 Same as before, we utilized a custom texture for the Pattern Overlay effect. elegance32 And there you have it, now our footer section is ready. elegance33 Now we are going to make a box on top of our footer, to do that select the rectangle tool and trace the starting object. elegance06 elegance34 For start, let’s fill our shape with a solid color. elegance08 elegance35 Having this set we can proceed with the effects, on this case the effects will be Drop Shadow, Color Overlay, Pattern Overlay and Stroke. elegance36 And now follow carefully the next screenshots to exactly replicate the same parameters of our design. elegance37 elegance38 We changed the pattern for this box, though it’s also a custom design from our team. elegance39 And finally the Stroke effect. elegance40 Our box looks awesome after adding these 4 effects, let’s take a look to it. elegance41 The next thing we did was to add another custom illustration, on this case a fancy Twitter badge. elegance42 This is a really nice detail that will prettify all the rest of our template. elegance43

5. Customize the content section

You will have to mix the rectangle and pen tools to create the next path. elegance06 elegance19 elegance44 Then we need to add a gradient fill to our object. elegance03 elegance45 elegance46 On this case we will utilize two different effects, Drop Shadow and Stroke, let’s see how they work. elegance47 And the values for these effects are the following: elegance48 elegance49 So far our web template is looking awesome, the general design is ready and now we must proceed with the details and additional objects. elegance50 One more combination of the pen and rectangle tools, on this case to create the top bar of the template. elegance06 elegance19 elegance51 After completing the object, continue with the addition of a solid color fill. elegance08 elegance52 The effects for this object are Drop Shadow, Gradient Overlay and Stroke. elegance53 The next 3 screenshots will show you the parameters that you need to follow to complete these 3 effects. elegance54 elegance55 elegance56 That finishes the main top bar design, let’s see how it looks: elegance57 The next object is the zoom icon, you need to appropriate the ellipse tool and use it along with the pen tool in order to generate the path. elegance58 elegance19 elegance59 Use a solid color fill to start working with our zoom icon. elegance08 elegance60 After doing this, continue adding two effects, Inner Shadow and Stroke. elegance61 These next two screenshots display the values that you must set for each one of the effects. elegance62 elegance63 Now our zoom icon is ready to rumble. elegance64 There must be another bar on top of the search bar to give it a better look, so grab your rectangle tool and draw the figure. elegance65 And now we filled utilizing a solid color fill. elegance08 elegance66 We will be using Color Overlay, Gradient Overlay, Pattern Overlay and Stroke to work with this bar. elegance67 These are the parameters for each one of the effects: elegance68 elegance69 elegance70 elegance71 And our top bar looks awesome after completing its customization. elegance72 The next object is very similar, start by making it with the rectangle tool. elegance06 elegance73 Then we select the solid color to fill our object. elegance74 Then we begin adding effects, on this case they’re going to be Drop Shadow, Bevel and Emboss, Color Overlay, Pattern Overlay and Stroke. Coming up next, the values that you need to input on each effect. elegance75 elegance76 elegance77 For the Pattern Overlay we did one more custom texture with the assistance of our design crew. elegance78 elegance79 And this part is ready, let’s take a look to it: elegance80 Next is a small ellipse on top of the content’s flap. elegance58 elegance81 Fill the ellipse with the following solid color: elegance08 elegance82 As for the effects, we’re about to use Drop Shadow and Bevel and Emboss. elegance83 And these are the parameters to follow on these two cases: elegance84 elegance85 That’s all you need to make this fancy button that holds the flap. elegance86 And now we use the pen tool to make the two arrows that are going on top of the button. elegance19 elegance87 Then we fill the arrows utilizing a solid color fill. elegance08 elegance88 Then we add an Inner Shadow effect to our arrows. elegance89 The parameters for this effect are the following: elegance90 And well, they certainly look good, let’s take a look to our arrows: elegance91 Now comes a divisor line between the arrows, trace it using your rectangle tool. elegance06 elegance93 Choose a solid color to fill the rectangle that we just did. elegance08 elegance92 elegance94 Select the pen tool in order to begin with the next element. elegance19 This is the object that you need to trace: elegance95 Now fill it using the following solid color: elegance08 elegance96 Having our object filled, we can continue with the next part, which corresponds to the effects. elegance97 This object has tons of effects: Drop Shadow, Color Overlay, Gradient Overlay, Pattern Overlay and Stroke, pay attention to these following screenshots to see the corresponding parameters for each one of the effects. elegance98 elegance99 elegance100 elegance101 elegance102 We also did a custom pattern to implement on this case. elegance103 elegance104 And after completing all these effects, this is how our object is looking now: elegance105 Now it’s time for the next shape, grab your pen tool and trace it. elegance19 elegance106 Then choose a solid color and simply fill the object. elegance08 elegance107 For the next shape you may want to utilize the Rounded Rectangle Tool. elegance108 Because the next object will have precisely that form. elegance109 Fill the object with this next solid color: elegance08 elegance110 Then proceed by adding a Drop Shadow effect and a Gradient Overlay. elegance112 elegance111 elegance113 After that, our object is set. elegance114 Grab the rectangle tool in order to create the next figure. elegance06 elegance115 For start, let’s fill the shape using a solid color. elegance08 elegance116 The effects’ list for this object consists of Color Overlay, Gradient Overlay, Pattern Overlay and Stroke, now let us show you the screenshots that will guide you whilst filling the parameters: elegance117 elegance118 elegance119 On this effect, we repeat the same custom pattern that we used before. elegance120 And finally the Stroke effect. elegance121 With these effects implemented, our object is ready. elegance122 We have to use again the Rounded Rectangle Tool in order to draw the next shape. elegance108 elegance123 And then we fill it with this next solid color: elegance08 elegance124 Then we need to add these two effects: Bevel and Emboss and Stroke. elegance125 With these next screenshots you will be able to duplicate the parameters that we utilized on these effects. elegance126 elegance127 That’s all we need to complete these two objects. elegance128 OK, now we need you to duplicate this layer two times, just drag the layer to the Add New Layer button or right click and select Duplicate Layer. elegance129 Using the rectangle tool, create a very light and large object. elegance06 elegance130 And fill this object with a solid color. elegance131 With the rectangle tool we’re now about to create the following object: elegance06 elegance132 And the solid color comes again to help us fill this rectangle. elegance08 elegance133 This object comes with a Drop Shadow and Stroke effects. elegance134 elegance135 elegance136 elegance137 And our object is now set. elegance138

6. Working with text

It’s time to add some text to our menu, we used a Trebuchet font for it. elegance139 Let’s add three different effects to our text: Drop Shadow, Inner Shadow and Color Overlay. elegance140 elegance141 elegance142 elegance143 With these effects our text looks way more awesome than by just using a plain color. elegance144 Then duplicate the text several times and replace the text until you complete the menu. elegance145 And now you have to duplicate all the text and place them on the footer. elegance146 It’s time to call back the Rounded Rectangle Tool to create what actually works as the search bar. elegance108 elegance147 Then fill it with a solid color. elegance08 elegance148 And finally apply an Inner Shadow effect followed by Stroke. elegance149 elegance150 elegance151 With that our search bar is now looking pretty cool. elegance152 Now using the Rounded Rectangle Tool, create these two following objects. elegance108 elegance153 Then fill with a solid color. elegance154 After doing this, you’ll have to implement two different effects: Inner Shadow and Stroke. elegance155 elegance156 elegance157 And with that we have completed these two elements. elegance158 Next to these two there’s going to be another object that you will have to make using the Rounded Rectangle Tool. elegance108 elegance159 Fill the shape utilizing a solid color. elegance160 Then comes the effects’ turn, on this case let’s implement Bevel and Emboss, Gradient Overlay and Stroke. elegance162 elegance161 elegance163 elegance164 elegance165 Now our object has been completed. elegance166 It’s time to add all the texts, we utilized Trebuchet for almost everything, on the next screenshot you will see all the texts that we inserted without effects. elegance167 And now the ones with effects on them, let’s start with the Login text. elegance168 And simply add a Drop Shadow effect to it. elegance169 elegance170 That’s all it takes for making the login text. elegance171 The next text is actually a number, type it using an Arial font, which no matter what is still one of the prettiest fonts around. elegance172 Regarding the style, let’s add the following effects: Drop Shadow, Gradient Overlay and Stroke. elegance173 elegance174 elegance175 elegance176 elegance177 Now duplicate the object twice and change the text for 2 and 3 respectively. elegance178 Once again, duplicate this text and place it where the next screenshot shows, then adjust the text properties. elegance179 And the only thing that you need to change is the Gradient Overlay properties, so pay attention to these next couple of screenshots. elegance180 elegance181 And the text looks awesome after making this adjustment. elegance182 Again, duplicate this text and place it on the header, then adjust the font size. elegance183 And as we did before, you need to adjust the Gradient Overlay properties. elegance184 elegance185 Then duplicate the text and change its words, now you will have this: elegance186 One final duplicate and then we’re done with the texts, this replica goes on the Twitter section, after placing it, adjust the typeface properties. elegance187 And then let’s switch the Gradient Overlay parameters. elegance188 elegance189 Awesome, we’re done with this text, let’s take a look at it. elegance190 And the final text is going to be the company’s name, just duplicate the latest text and then place it on top of the site. elegance191 Then as you might be thinking, we need to adjust the Gradient Overlay parameters. elegance192 elegance193

7. Final details

We’re almost done with our template, there are basically 4 objects to work on before we finish, we’re now going to insert three different bitmap images from our library, you can copy paste the element if you’re currently working on it on a different program or go to File>Place and import it more professionally. elegance195 The first element that we’re about to insert is a nice mesh graphic from our archives. elegance196 Now a random picture inside the main box. elegance197 Now a nice house beach icon below the mesh that we previously inserted. elegance198 The last one is a smart object that we took from Illustrator, though you can easily make it in Photoshop following the tips that we have already provided to you across this entire tutorial. elegance199 And now our web template is officially set, let’s take a look to the fantastic job that we have accomplished while you pick up all those bags of chips that you probably ate during the process. elegance200 OK friends, now our tutorial has been completed, you have mastered your Photoshop skills both on the technical side and velocity, probably you spent much more time on previous tutorials and of course that the next tut that we’ll release will be a piece of cake for you. Don’t forget to visit us on Twitter to find our latest news and releases, thanks for visiting Tutorialshock, see you on our next post.


Related Deals


Related Posts