Create a new document with any size you want. The width is more
important than the height. It is recommended to use a value for the
width between 920 and 1000 pixels. This width will fit well an all type
of modern monitors. Select your Paint Bucket Tool, and fill your background with the following color: #141414
Select the background layer, and press on CTRL+J. This shortcut will
duplicate the background layer. You will see a new layer above the
original background layer.
Select the second layer, and go to Filter - Noise - Add noise
In the Add noise window use the following values
Download the following honeycomb pattern. Right click on the image and choose "save image as"
Open the image in Photoshop, and then go to Edit - Define pattern. Choose a name for this pattern and click ok
You can now close this small image, and you can return to work on the hosting layout.
Create a new layer on top of all layers. (The easy way is to press simultaneous on the following keystrokes: SHIFT+CTRL+ALT+N)
Select Rectangular Marquee Tool and create a selection on top of the layout
Select Paint Bucket Tool, and select the pattern we just create a few seconds ago/
Press one time inside your selection with Paint Bucket Tool, and then press on CTRL+D to deselect. This is my result
With Rectangle Tool I will create a black shape.
After that I will create another shape in the same spot but with a white color
I will right click on the layer and I will select Rasterize layer
I will select Eraser Tool, and with a smooth round brush I will delete the left side and the right side of the white shape. This is my result
I will create a new layer and I will place it on top of all layers. I will select Brush Tool, and I will create 2 simple points over my layout
I will change the blending mode for this layer to "Soft Light"
This is the result so far
I will select Rounded Rectangle Tool, and I will set the radius of the corner to 20
I will create a few shapes on the layout. Click on image to see the full size layout.
For the first fours shapes from the top I will add the same layer styles
This is my result so far
For the bottom shape I will add the following layer styles
This is how the footer of the hosting layout will look like
Now comes the funny part. I will add some sort of lights to create a 3D look for all these shapes.
Select Line Tool and with White color create a horizontal line.
Right click on the layer in your layer palette and choose Rasterize layer and then with Eraser Tool delete the left side and the right side of the line
Duplicate this layer and move it up with a few pixels
After you have this line go to Filter - Blur - Gaussian blur, and use the following settings
Duplicate this blurred line 2 times (press on CTRL+J to duplicate)
This is my result so far
With the same technique I will create the same lights on side of the shape
And of course I will add the same lights on all the shapes from my layout. It will be good if you click on the following image to see the full size result.
On top I will create a navigation bar. I will use Rounded Rectangle Tool to add this shape. Please note that I have changed the corner radius to 9 pixels.
I will add the following layer styles for this navigation bar.
This is the result
I will duplicate this shape and I will add the following layer styles
This is the result
I will duplicate this shape one more time, and after that I will
select both layers inside my layer palette. I will press on CTRL+E to
merge all the layers into a single one. This action will rasterize the
shape and it will allow me to delete the corners of the shape.
So please select Eraser Tool, and with a smooth round brush delete the corners of the shape
Now I will add another shape with Rounded Rectangle Tool. I will place this shape right under the navigation bar.
Now I will move forward and I will create a shape like in the following image.
To create the shape from above you have to create a simple shape with Rounded Rectangle Tool. You will have to Rasterize the shape, and then you can delete the top part of the shape.
For this shape I will add the following layer styles.
This is my result
I will duplicate this layer, and I will select in my layer palette both layers and then I will merge them into a single layer. With Eraser Tool I will delete the extremities of the shape
Then I will highlight this area with a white line. You know how to achieve this effect, so I will not explain you anymore
I will place the same details on the other 2 boxes.
The next step is to add a logo. I will use a text logo for this
tutorial. I will write the word Grafpedia on top of the layout with the
following font: Myriad Pro (Bold Italic)
Bow I will add the following layer styles
This is my result so far
My final step is to add some text over this layout and in the same time some images. Please click on the following image to see the final result of this hosting layout.
