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