It is very important to use patterns in your layouts. We have a set with 200 seamless pixel patterns, and this little piece of graphics can change the look of the website very much.
For this tutorial you need the following
This awesome set with 200 pixel patterns
Create a new document in Photoshop with the following size: 1000x1100
pixels. Change your foreground color to #2c2c2c, and then with Paint Bucket Tool press one time over your document.
Download the following set with 200 Photoshop seamless pixel patterns
Load the patterns inside Photoshop, and then create a shape with Rectangle Tool , at the top of the website.
Add the following layer style
You will find the pattern here
You can try to use also another patterns if you don't like this one.
Here is my result so far
With Pen Tool I will create a button on the top side of the layout.
I will add some layer styles
Here is my button so far, and as you can see I will add there also some text
I will create another shape with Rectangle Tool ( I will use the following color #131313 )
With Pen Tool I will create another shape under this black shape. ( I will use a red color for this shape to see it better, what I am doing) Anyway I recommend you to use the same color as above ( #131313 )
To create this type of shape it is very easy if you turn the grid on ( CTRL+" )
I will select both layers in my layer palette, and then I will press on CTRL+E to merge them into a single one.
I will add the following layer styles
This is my result. please press on the following image to see the details better.
With Rounded Rectangle Tool I will create some shapes like in the following image
Select all the grey shapes in your layer palette, and press on CTRL+E to merge them into a single one, then add the following layer styles
Here is my result so far.
With Rounded Rectangle Tool I will create another two shapes. The top one will be used as a search box, and the one from middle of the layout will be used to place there some news
For both shapes I have used the same layer styles
With Pen Tool I will create another shape on the bottom of the website
I have used the same layer style I have used for the slideshow.
I will create two small circles, and I will place them right above the background layer.
Now it is time to add some images. I will use a bokeh effect. You can see how I made the effect in this tutorial.
My final step is to add also some text.
