Pages

Create a dark portfolio pixel layout

353


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
120
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
219
Click on the small arrow, and then go to Load Patterns. Browse the patterns on your computer.
317
On this layout I will create a selection with Rectangular Marquee Tool
47
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
57
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
66
With Horizontal Type Tool, I will write some minus signs
76
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
86
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
96
Now I will add a layer style for this shape
106
1111
This is my result so far
125
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
135
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
145
I will unhide the big black shape, and I will show you how this layout looks so far
155
I will place an image from my stock image collection, and on the header and in the footer; I will create 2 white shapes
165
For the White shapes I will add the following layer style
176
This is the result
184
And for this layer I will change the blending mode to Overlay
194
I will write one more time some minus signs
204
The same think I will made also in the footer of this layout. I will add in the same time some text
2110
With Horizontal Type Tool I will add some text. Click on the following image to see the full size pattern layout
224
On the top of the layout I will add another shape
235
I will add the same layer styles as we added to the big shape
106
1111
Then with Horizontal Type Tool I will write Grafpedia
243
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
253
263
This is my result
273
On the left side I will create a vertical line with Pencil Tool (set the brush size to 1 pixel)
283
I will select Eraser Tool, and with a smooth round brush I will delete the extremities of this line
293
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
303
Duplicate this layer 2 or 3 times. This is my result
318
I will make the same blurry line also on the other side of the layout
324
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
332
Create a new layer above all layers, and then with Brush Tool, add a simple dot over the logo
342
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
353