Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Web page design education

In this tutorial we are going to build a site template in adobe Photoshop. I really like this corporative style for the sites so our site will consist of fewer details that it could have been.



Start by creating such dimensions document.



Web page design education

Make a selection for our working are and copy it to a separate layer.



Web page design education

I will apply the layers style – so the area could be better sent and maybe we’ll just leave this shadow effect in the future, we’ll see.



Web page design education

Now you area is still selected? If not select the area and apply a gradient to it.


Here a re my gradient settings with the result itself.



Web page design education




Web page design education

Oh, and I will also flip my image vertically because I would like this blue to be on the top part of the image.



Web page design education

Now let’s see what we have in brush menu. I will pick this very brush, create a new document and tap just once (full flow/opacity)



Now this brush can easily be made, and maybe I have it in my big brush set:

http://designstacks.net/Jeka/MyAntiscaleBrushSet.abr



Web page design education

I’m immediately applying an inner shadow to create some kind of effect.



Now comes text. I’m planning to use this brush tap as a logo of a company. Now let’s give a name tour company.



Web page design education

The Filtering compartment – this is the name of a company. I really don’t spend much time to give all this names, because it can be any name there if you like.


Web page design education

A few effects to my text, to the top one, the Compartment is too thin and little to have some effects.



Web page design education




Web page design education

Now we will grab this kind of brush – N 116 in my application, make a big diameter in the settings menu and just tap once to make the header of the site more detailed.



Just tap once. (On a new layer)



Web page design education

Make a mask to this layer and slide wit h gradient from bottom upwards.


Web page design education




Web page design education

Now we will begin to fill our site menu. I will do it in no ordinary
way. As we have this big logo like something, so I will try to stick to
that for now.



Make a work and transform it like I did.



Web page design education




Web page design education

And more….



Web page design education

Now some information, definitely some phrases to fill the site areas and to make our site template look like one.



Bottom.


Web page design education

Some to the left. I will also make a line right in the center of the site.



Web page design education

I’m also making lines like if they are links to something.



Web page design education

I’ve also downloaded some Photos from K&N filters site and filed my free spaces with it.


Moreover I’ve pasted some text and rotated it. Maybe this is not so easy way to read but as a design it can be possibly be.



Web page design education

Some
of this: a word- info – with 2 lines connecting it. If it would have
been flash powered, the motion would have been awesome.


Web page design education

Now I will make some last elements to the site.


A logo in front.



Web page design education

And a line:



Web page design education

I’ve filled background with black to white gradient and changed the opacity to about 10 %, but this is not so necessary to do.



Web page design education




Web page design education

So here you’ve seen how a site template design can be done in less than an hour.



Web page design education

I hope you found something useful here, annnddd enjoy.

Comments