Making your layout look professional
Part 1:This tutorial was created mostly for my friend "Albelnox" because he kept asking me to make one which I feel so bad for not making one sooner lol. In this tutorial I'll be explaining and showing how to make a fine professional web-layout design quick and easy. First off please have these following items:
1. Photoshop ( 7.0+) *I'll be using Photoshop 7.0 so it can be easier for those who doesn't have Higher Photoshop's
2. Texture 1 Download here
3. Texture 2 Download here
4. Texture 3 Download here "when you download this one you might not it but its there"
5. Web Icons Download here
6. Font: Wendy, Calibri, and Century Gothic
Step one: Make a new canvas at the size of 1024 x 849 so go to File > New or you can also quick key Ctrl + N. and do the same as it show's in the image below.
Make the background color a light grey color I used Hex color #DFDFD7; so it can match one of the texture later in the tutorial.
Step two:
Create a new set in layers and call it Main Background.
Step three:
Now take the first texture you downloaded from the beginning, if not then download here. Place the texture with a new layer on the top of the canvas, example: *name the layer Texture 1.*
Make sure the texture is inside the set (Main Background) so if you forgot then drag it into the set.
Now take the second texture you downloaded if not then Download here
. Place the texture with a new layer below the first texture, example: *name the layer Texture 2.* Make sure the second texture is in the Main Background set as well.
We have one more item for the Main Background set. We need now is the Line Tool. Locate the line tool in the tool's window and make a light grey 1px line that will go across between the first and second texture. Example:
Yay! We finish the First Part of the Professional Layout. Now on to part 2
Part 2:
We are going to make the header and the background content of the layout. Let's get started. Alright here is layout we have so far. Make sure it looks the same.
Step Four: I just want to get the sets done write the sets in this order, nothing will be in them yet we just going to be working on the Header set. Create a set name header under that Background Content, under that buttons, then Content text and Images, then sidebar text and images, and lastly Footer text and images. So we’ll be having 7 sets. The Main background set has to be at the very last beside the background color. They must be in that order.
Step Five: Select the Header set and open it (Must Open) then make a new layer and call it Brush Texture. Select a Thick heavy brush any kind you want and using a white color #FFFFFF; make two lines then use soft light on the layer while using the opacity and lowing it. Example:
Step Six: Creating the links is easy here we go. Will be using a font call Wendy if you don't have it the go to some font site and search for it. If you can’t find it the go here Click here. You can go to Dafont.com (That's what I use) and search Wendy and it will be the first one on the list. Download it and place it in your fonts in your Control Panel > Fonts. Use the text tool and Type- home. network. services. designs. apply. History. about. Then for the links we going to create some effects for them. Follow the following images.
For the name on the left side of the header is going to be called Web Designer the name is also going to have effects.
Follow the images below:
Blend mode: Multiply (color black) Opacity 39, Angle 120, Distance 1, spread 0, size 0
Blend mode: Normal, Opacity 100, Gradient #D8D8D8; and #FFFFFF; Style: Linear, Angle 90, Scale 100
Size 1px, Position: inside, Blend mode: Normal, Opacity 100, Color: #FFFFFF;
On the layer make the text Opacity to 57% as shown below
Part 3:
Now that we are done with the header now we are going on to the background content set. Let's start by doing the pixel texture. Make different shapes of white circles. Make a 1024 x 600 canvas with transparent. Then make another layout with a black #000000; background. Secondly make another layer and make it transparent
This is what your layers should looks like.
Select your circle layer name pixel art and go to Filter > Pixelate > Mosaic Follow the image below
The go to Filter > Noise > Add Noise follow the image below.
Final results
If you do not want to make this yourself then just download Texture 3 at the beginning of the tutorial.
Alright now take the pixel art and move it over to the Professional layout's canvas. Place the pixel art anywhere you like, you can also create more layers of the pixel art and place them in different places, here is mine.
Step Seven: Now that we finish texture 3 let make the round rectangle shape with the color #374F55; and the opacity of 23 to 34 (after you done that right click the round rectangle shape and select Rasterize Layer. Select the round rectangle tool from the tool's window...
On the Options window go to radius and make 12px.
Now make a big enough round rectangle shape on the canvas. (Make sure the layer is in the background content set)
Next we are going to make another round rectangle shape just like we did already. The fastest way to do this is copying the round rectangle we just made. Go to the layers window and select the round rectangle shape's layer and right click > select Duplicate layer and then press ok.
See it look a little darker.
Now select the Rectangle Marquee tool from the tool's window and select the middle almost to the top and bottom of the second layer of the round rectangle shape.
Erase the select part of the round rectangle shape.
Then take a soft round brush and erase from the top left to the right, and then erase from the bottom left to the right.
Step Eight: We are going to make another round rectangle shape with the same color #616465; and the opacity of 100 (after you done that right click the round rectangle shape and select Rasterize Layer). Select the round rectangle tool from the tool's window and make a round rectangle on the left side of the bigger round rectangle secondly cut it in half, example:
After that we going to put some effect with inner shadow and Inner glow follow the images below.
Then when finish press ok select the layer and use overlay.
Make a text layer and add in some text.
Step Nine: Logo time :D. I have many logo for secretwishies. But my favorite one is...drum roll...
You don't have to use this logo if you don't want to, you can make your own logo and place where im about to show you. First make a new layer Text call Web-designer or any name to the logo you want or just call it logo. If you want mine just copy and save it. Place you logo here...
Make another text layer and name it like this (Designed by Cassandra @ Secretwishies) but replace Cassandra with your name and replace secretwishies with you site.
Use the same effect for the text as the same as with the text named (Web Designer) on step six.
Step Ten: Final layer for the background content set. Make a new round rectangle shape layer and name it Button Box, make the round rectangle shape with the hex color of #B0BBBD; a little larger than the other large round rectangle shape then cut it more than half but leaving a little of the top, example:
We’ll be adding some effects on the layer follow the images below:
After that make the layer Multiply:
Yay! We are done with the Background Content set now we are going to the button set.
Part 3:
Alright, you use any web-icons the you can use for your layout. Here is a web-site that is awesome with many web icons freeiconsweb. This is the web-icons I used.
Place the big icons in the small round rectangle…
Then place the smaller icons in the box one.
There you done with the button set. After that close the button set and drag it so it can be second in the layers.
Part 4:
Next set is Content text and images. First make a round rectangle shape with the hex color of #282828; and use soft light and cut it in the middle and make it look like this.
Then make the effects with inner shadow and Inner glow liked I showed you.
After that make a #FFFFFF; rectangle shape and soft light it and also make the effects of inner shadow and inner glow.
Now add some text.
Part 5:
Next set is SideBar images and text set. Do the same thing as the content images and text set.
Final Step: Make a Footer images and Text set, copy the round rectangle shape from the Background Content set and place in the footer content. Then flip with Edit > Transform > Flip Vertical.
Then add in the credits and you done.
