In today’s tutorial we will create a simple but effective portfolio layout. I will show you the basics of brush layout in web design, So sit back and read on!
Preview:
Create a new photoshop document
1 Open up Photoshop, create a new document that is 1200px by 1300px, with a background color of #ffffff
Creating the background
2 Select the rectangle tool (U). Create a purple (#714a6f) rectangle along the top half of the canvas. its height should be 235px
3 Select the rectangle tool (U). Create a Grey (#ebebeb) rectangle along the bottom of the purple area. its height should be 15px
4 For the next part of the tutorial you will need to download a photoshop brush set of paint splatters and brushes.
Set your foreground color too #553653
Creating the navigation
5 select the rectangular marquee tool (M). Create a rectangle with a width of 927px and height of 77px. Select the gradient tool (G) with the linear gradient option selected and drag a gradient from the top of the selection downwards
6 Set your foreground color to #ffe570 and background to #ffc870
Creating a large rotation area
7 select the rectangle tool (U). Create a large white (#ffffff) rectangle with a width of 927px and height of 310px
8 select the rectangle tool (U). Create a large dark Grey (#272727) rectangle with a width of 915px and height of 296px. try to place the Grey area smack bang in the center of the right area
9 select the gradient tool (G) create a semi transparent black (#000000) radial gradient try make it as big as you possible can
10 Select the move tool (V). move the middle transform box inwards until you have a fairly small distorted gradient
11 Select the move tool (V). move the left and right middle transform boxes until the ingredient fits across the white rotator area. Lower the layers opacity to 50%
12 Select the gradient tool (G) create a semi transparent white (#ffffff) radial gradient try make it as big as you possible. Place it at the top left of the canvas. Select the Grey rectangle layer, select the magic wand tool click the outside of the layer then delete the outside of the Grey area on the white gradient layer
Adding some content holders
13 select the rectangle tool (U). Create a small light Grey (#ebebeb) rectangle with a width of 281px and height of 135px. try to place the Grey area in the center of the right area
14 Duplicate the layer twice and place them side by side with roughly 50px gap between each one. after that I added a thumbnail to each box, the thumbnail has been centered
15 Underneath each thumbnail box I added horizontal text, I used the settings below
16 Select the rounded rectangle tool (U). create a yellow (ffe570) rectangle with a width of 104px and height of 30px
17 Double click the layer to open the layer styles dialogue box, use the settings below
18 Duplicate the layer twice and place them below each thumbnail.
Creating a divider
19 Using the rectangular selection tool (M) create a rectangle with a height of 1px and width of 927px its color should be #dfdfdf, place it below the thumb
Creating the footer
20 Select the rectangle tool (U). Create a dark Grey (#272727) rectangle that spans the bottom of the canvas. its height should be 100px
Creating a sidebar
21 Select the rectangle tool (U). Create a white (#ffffff) rectangle it will be placed on the right of the layout below the divider. its width should be 287px and a height of 421px
22 Double click the layer to open the layer styles dialogue box, use the settings below
Adding Content
Logo
23 I added a simple logo to the top left of the canvas
Navigation
24 I used simple Ariel horizontal text to create the navigation content
Main Content
25 I added horizontal text for a title that has been set to bold, underneath that I added the same horizontal text with a reduced font size and change it from bold to regular
Sidebar content
26 I added a two large thumbnails. Underneath each thumb I added some horizontal text, this will be used to display information about the thumbnail
Footer content
27 The footer is simple horizontal text. its color is white (#ffffff
Congratulations!
You have now completed the tutorial design hope you enjoyed reading!
6 Responses
Great tut. Great colour scheme!
Another great article, thank you & keep up the good work.
It looks as if you rushed through this one Imon
Didn’t add text on the yellow buttons, and makes it look unfinished. Keep going in the direction you were with your “create a gaming community layout”, and it will pay off in the end. Looking forward to your next tutorial!
[...] Create A Simple Easy To Make Layout | Psdbase [...]
I am impressed with this tut! The final output is very good
Great start and a very creative layout. As Matthew pointed out, you did rush through the tutorial. There is something missing in the final result
It would suggest you add Twitter and RSS buttons also. It will make a great template. Good work, Reece.