With this tutorial I’ll try to bring you more ingenious design ideas that make your site the most vivid and dynamic on the web. Today we’ll create a creative layout which can be easily converted into a wordpress theme.
You can use this layout to showcase your portfolio, for your blog or just to sell your products ( for e.g. showcasing free article writing services )
So we start off…
Create a new document (press CTRL+N) or go to File > New. Use the following values.
Change your foreground color to #232323 and with Paint Bucket Tool press one time over your canvas.
Next step is to add some noise for this background. You can add noise if you go to Filter > Noise > Add noise
On top of the website I will place a shape with Rectangle Tool. It doesn’t matter the color right now.
I will create a new document and with Pencil Tool (set the brush size to 1 pixel) I will make the following drawing. Please note this image is zoomed to 1600 %.
The normal size is:
Please note that you can create this triangle also with Pen Tool.
From this triangle I will create a pattern. To create a pattern first you need to go to Edit > define pattern. Choose a name for this pattern and click on OK. You can now close this small document. On our layout please create a selection at the bottom of the orange shape.
Create a new layer (press on CTRL+SHIFT+ALT+N), and be sure you have the new layer selected. With Paint Bucket Tool fill the selection. Please choose the pattern you just created a few steps ago.
Here is my result. If your selection is too big you will have the following result.
We will fix this problem in my next step. Be sure you have the layer with triangles selected, and then with Rectangular Marquee Tool make a selection like mine.
Hit the Delete key from your keyboard. In the same way you can create a selection on the top. Here is my result
With Move Tool I will place this layer near the orange shape
I will select both layers in my layer palette (the layer with triangles and the big orange shape) and then I will press on CTRL+E. This shortcut will merge both layers into a single one, and it will allow me to work further on the layout. For the new layer I will add the following layer styles
This is my result
On the bottom of the layout I will create a shape with Rectangle Tool
I will create another layer, and then with Rectangular Marquee Tool I will make a selection on top of this shape. I will add the same pattern but this time. I will use the same color I have used for the big shape.
With Eraser Tool I will delete the left side
I will duplicate this shape (select the layer and then press on CTRL+J) to duplicate a layer. The next step is to go to Edit > Transform > Rotate 180
With Move Tool place the layer on the bottom of the shape like in the following image.
Select all three layers on your layer palette, and then press on CTRL+E. The next step is to add a layer style
Hold down the CTRL key and with your mouse pointer click on the layer thumbnail.
You will see that a selection will become active around the shape. Select Rectangular Marquee Tool, and hold down the ALT key
When you hold down the ALT key you will activate subtract from selection feature. Make a selection around the left side of the selection. After you release the mouse button you will have the following selection.
With this selection active create a new layer (press on CTRL+SHIFT+ALT+N) and then with Paint Bucket Tool fill the selection with a random color. I have used #b2a891. Press on CTRL+D to deselect. This is my result.
Create another shape with Rectangle Tool
With Pen Tool I will create another shape
With the same tool I will create also some sort of shadow for this shape.
Between the header and the body of this layout I will create other shapes. Please click on image to see full size image
I will add some images in the white area. The images are from my last tutorials.
On the left side I will add a button
The same I will add on the right side. I will not explain one more time how this button was made. You have the steps above.
Now I will add some text and images on the layout. Please click on the image to see the full size layout.
With Line Tool I will add some details. I will create two lines both with a weight of 1 pixel. The top line will have a white color and the bottom line will have a dark color.
I will create a new layer above all layers, and with Brush Tool I will make a drawing
I will change the blending mode for this layer to Soft Light. This is my final result. Click on the image to see the full size layout
Here are other color variations
This tutorial was originally posted on grafpedia.com