Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design a Typography Layout

Design a Typography Layout


Open a new document with the following size: 960 x900 pixels, and then download the following image in your computer. Open this nice carbon pattern in Photoshop

If you don't like this pattern you can try one of the patterns from this set:
200 Photoshop Pixel Patterns

image 1

Then go to Edit > Define pattern. Choose a name for this pattern and click OK
Select Paint Bucket Tool, and be sure you select the pattern from above

image 2

Click one time on your document.
Select Rounded Rectangle Tool, set the corner radius to 6 px and create some white shapes. Please note that I will create a red one. You can make all the shapes with white color. I have used a different one because I want to show you how I will place the shape over my layout

image 3

With The same tool I will create another red shape.

image 4

I will right click on the layer in my layer palette, then I will chose Rasterize layer, and then I will go to Select > Load selection

image 5

Now I will go to Select > Inverse. I will create a new layer on top of all layers (press CTRL+SHIFT+ALT+N), and with Brush Tool I will draw on the top right corner

image 6

I will press on CTRL+D to deselect, then I will delete the red shape.

image 7

I will select 3 layers in my layer palette

image 8

Press on CTRL+E to merge all the layers into a single one.
The next step is to add the same layer styles for all the white shapes

image 9

image 10

image 11

image 12

image 13

This is my result so far

image 14

I will create another rectangle with the following color: #575757

image 15

Now I will add the text which is the most important thing in this tutorial. Please click on the following image to see the fonts I have used

image 16

To see all the fonts I have used please apply for a VIP account and you can play alone with the settings
Now I will add a single image with one of our VIP downloads

image 17

On the top of the layout I will add 2 small icons. One with a RSS feed, and the other one with the twitter bird

image 18

I will select Rounded Rectangle Tool, and I will create a small shape like in the following image. First create the shape horizontally, and then you can press on CTRL+T to rotate it

image 19

Right click on the layer, in your layer palette, and select rasterize layer, and then with Rectangular Marquee Tool make a selection like mine

image 20

Then hit delete. The same you can make also on the other side. You can see that I have deleted the black shape a few pixels away from the white shape

image 21

I will add the following layer styles

image 22

image 23

image 24

This is my result so far

image 25

With the following color #840201, I will create 2 circles with Ellipse Tool

image 26

Then I will drag the 2 small circles right above the background layer.

image 27

One more time I will use Ellipse Tool to create a small black shape.

image 28

I will rasterize this layer, and then with Eraser Tool I will delete the middle part of the shape

image 29

Then I will lower the opacity for this shape to 20 %, and I will drag the layer under the red layer

image 30

Under the image with our brush packages, I will create another round shapes, and in the middle I will add a plus sign

image 31

Above these small shapes, I will add a horizontal line, and some text

image 32

Between the text buttons I will add some vertical lines with Line Tool

image 33

On the middle of the layout I will create s small button. This is my final result. I hope you like it

Design a typography layout



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: