Grafpedia

Hello my friends.
Another day here on Grafpedia means another tutorial or resource posted. In this tutorial I will show you the power of patterns applied in web layouts. Photoshop patterns are very important. In this tutorial i will use only 3 different pattern from this set of 200 pixel patterns
Please try to create another layouts and send me the link because i want to see your end results.

Preview full size layout

If you remember a few days ago I have released a very big pack with seamless pixel patterns for Photoshop. I will use only a few patterns from this set, and I want to show you how I can give another look to any ordinary layout.
Let’s start with a new document, with the following size: 960 x 900 pixels. The size is not important but I suggest you to use this size, because the website will fit in almost any monitor.

With Paint Bucket Tool add the following color on the background layer: #3f3f3f
Then go to Filter > Noise > Add noise and use the following values

Now it is time to download one of our Premium download: Pixel patterns

Load the patterns into Photoshop. To load the patterns you have to select Paint Bucket Tool, and from the top of the screen select Pattern

Click on the small arrow, and then go to Load Patterns. Browse the patterns on your computer.

On this layout I will create a selection with Rectangular Marquee Tool

I will create a new layer, (press CTRL+SHIFT+ALT+N), and with Paint Bucket Tool I will click one time inside my selection. Be sure you select a nice pattern from this set of Photoshop patterns

I will press after that on CTRL+E to deselect. The same think I will make on the footer, where I will create a shape like the previous one

With Horizontal Type Tool, I will write some minus signs

I will select Rounded Rectangle Tool, and I will create 2 shapes. In the following image you will see 2 different colors. I will change the colors, because it will be easier for you to see where I will place the shape

I will change the color of the red shape back to #1c1c1c, then I will select both layers in my layer palette, and I will press on CTRL+E to merge the layers into a single one

Now I will add a layer style for this shape

This is my result so far

I will create a new layer (press CTRL+SHIFT+ALT+N) above the background layer, and with Brush Tool I will create 4 points. I will hide for a moment the previous shape

I will create a selection with Rectangular Marquee Tool, and I will hit delete on my keyboard. Then I change the blending mode for this layer to overlay

I will unhide the big black shape, and I will show you how this layout looks so far

I will place an image from my stock image collection, and on the header and in the footer; I will create 2 white shapes

For the White shapes I will add the following layer style

This is the result

And for this layer I will change the blending mode to Overlay

I will write one more time some minus signs

The same think I will made also in the footer of this layout. I will add in the same time some text

With Horizontal Type Tool I will add some text. Click on the following image to see the full size pattern layout

On the top of the layout I will add another shape

I will add the same layer styles as we added to the big shape

Then with Horizontal Type Tool I will write Grafpedia

For the text layer I will add the following layer styles. I will use another pixel pattern from our set if 200 professionally designed patterns

This is my result

On the left side I will create a vertical line with Pencil Tool (set the brush size to 1 pixel)

I will select Eraser Tool, and with a smooth round brush I will delete the extremities of this line

Be sure you have this layer selected, and then press on CTRL+J (to duplicate the layer)
Then go to Filter > Blur > Gaussian blur and use the following settings

Duplicate this layer 2 or 3 times. This is my result

I will make the same blurry line also on the other side of the layout

With the same technique I will add also a line under the logo. This time when you create the line please use a light blue color

Create a new layer above all layers, and then with Brush Tool, add a simple dot over the logo

Then change the blending mode to Soft Light. And I think this is the final result. I hope you like it and you realize how important are good Photoshop Patterns

If you want to download our patterns please apply for a VIP subscription, and you will be able to download all our existing download and the future releases for the period of time you apply