Tutorial by Flash-Game-DesignStep 1.First of all create a new Photoshop document with dimensions of 760x600, and a washed out blue (6B767A) background. Use the rectagular marquee tool to create large, dark grey (181D1F) rectangle. For the header we're going to use a picture of a lake (image b), which you can get at a free stock photo site here.
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/2.gif[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/image.jpg[/img]
Step 2.Open the picture up in Photoshop and then resize the image (image > image size), using the settings shown below.
[img]http://www.flash-game-design.com/images/modern-layout-8/3a.gif[/img]
Step 3.Use the rectangular marquee tool to make a selection of the picture (image a) and then copy (edit > copy) the selction. Paste (edit > paste) the copy into the web layout photoshop document.
a) Zoomed out
[img]http://www.flash-game-design.com/images/modern-layout-8/3b.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/3c.jpg[/img]
Step 4.This is the 2nd part of the tutorial to create a portfolio layout. Next choose the rounded rectangle tool (image a) and set the radius of it to 15 pixels (image b).
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/5.gif[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/6.gif[/img]
Step 5.Create a rounded rectangle on top of the header image, and make a selction using it (select > load selection > ok)
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/3d.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/3d.jpg[/img]
Step 6.Delete the yellow rectangle layer and use the selection to cut (layer via cut) the picture, making it rounded.
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/3f.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/9.gif[/img]
Step 7.This is the 3rd part of the tutorial to create a portfolio layout. Change the rectangle radius to 10 pixels and create a dark grey (131313) rounded rectangle. below the header graphic. Then create a lighter grey, slightly smaller one on top of it, and rasterize the layer, from the layers panel.
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/10.gif[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/11.gif[/img]
Step 8.Next make the foreground color grey (2F3739) and the background color the darker tone (041213). Choose the gradient tool (g) and set it to "linear gradient", as shown in image b), circled in red.
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/13.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/14.jpg[/img]
Step 9.Make a selection (select > load selection) using the rounded rectangle and drag the gradient tool from the top of the selection to the bottom.
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/12.jpg[/img]
Step 10.Duplicate the gradient rounded rectangle and move it over the right.
[img]http://www.flash-game-design.com/images/modern-layout-8/15.jpg[/img]
Step 11.Make a selection over the copy, as shown below, and cut it (layer via cut) into a new layer
[img]http://www.flash-game-design.com/images/modern-layout-8/16.jpg[/img]
Step 12.Delete the other part (image a). Duplicate the cut part and flip it horizontally (edit > tranform > flip horizontal).
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/17.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/19.jpg[/img]
Step 13.Move the duplicate in line with the other part.
[img]http://www.flash-game-design.com/images/modern-layout-8/20.jpg[/img]
Step 14.This is the 4th part of the tutorial to create a portfolio layout. Next , we're going to create the faded squares on the header picture. Create a new layer set called "squares right", and a new new layer inside of it called. Then use the rectangular marquee tool to make a white rectangle on the layer.
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/21.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/22.jpg[/img]
Step 15.Reduce the rectangle's opacity to 70%, duplicate the layer and move it just below the 1st one.
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/24.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/25.jpg[/img]
Step 16.Change the duplicates opacity to something else. Make more duplicates with varying levels of opacity.
[img]http://www.flash-game-design.com/images/modern-layout-8/26.jpg[/img]
Step 17.Continue to duplicates the rectangles filling up the bottom right of the picture.
[img]http://www.flash-game-design.com/images/modern-layout-8/27.jpg[/img]
Step 18.Duplicates the layer set, naming it "squares left"
[img]http://www.flash-game-design.com/images/modern-layout-8/28.gif[/img]
Step 19.Flip the layer set horizontally (edit > transform > flip horizontal) and move it to the left hand side. Lastly, set the opacity of the duplicate layer set to 70% and the original layer set to 60%.
[img]http://www.flash-game-design.com/images/modern-layout-8/29.gif[/img]
Step 20.This is the 5th part of the tutorial to create a portfolio layout. Next, we're going to to merge the squares into a single layer. Click on the "Squares left" layer set (image a), and merge it into a single layer (Layer > Merge Layer Set), as shown in image b).
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/47.gif[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/48.gif[/img]
Step 21.Do the same to "Squares Right" Layer set, link the two layers together
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/49.gif[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/50.gif[/img]
Step 22.Then merge them into a single layer (layer > merge linked)
[img]http://www.flash-game-design.com/images/modern-layout-8/51.gif[/img]
Step 23.Now that we have squares on a single layer we use the header picture to round the layer's corners. So, make a selection of the squares layer (select > load selection). Right click on the picture in the layers panel, and choose layer via cut.
[img]http://www.flash-game-design.com/images/modern-layout-8/52.jpg[/img]
Step 24.Delete the layer outside of the selection, leaving you with a rounded squares layer.
[img]http://www.flash-game-design.com/images/modern-layout-8/53.jpg[/img]
Step 25.This is the 6th part of the tutorial to create a portfolio layout. Next choose the custom shape tool and, at the top of Photoshop, click on the arrow (circled in red in image b) to reveal all the custom shapes available.
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/32.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/33.gif[/img]
Step 26.Choose the star shape, set the foreground color to dark grey (2A3335), and create a star.
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/34.gif[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/30.gif[/img]
Step 27.Create a selection (selection > load > selection) using the star, expand the selection by 3 pixels (select > modify > expand), and fill a new layer below with a light grey (8A8B8D).
[img]http://www.flash-game-design.com/images/modern-layout-8/37.jpg[/img]
Step 28.This is the last part of the tutorial to create a portfolio layout. For the heading text the settings shown below have been used.
[img]http://www.flash-game-design.com/images/modern-layout-8/38.jpg[/img]
Step 29.To create the text border, make a selection using it (select > load selection), expand the selection by 3 pixels and fill a new layer below it with dark green (4C6775).
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/39.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/40.jpg[/img]
Step 30.For the body text the settings shown below have been used
[img]http://www.flash-game-design.com/images/modern-layout-8/41.jpg[/img]
Step 31.For the menu text, the settings shown below have been used
[img]http://www.flash-game-design.com/images/modern-layout-8/44.jpg[/img]
Step 32.Create a border for the menu text
[img]http://www.flash-game-design.com/images/modern-layout-8/45.jpg[/img]
Step 33.The logo has been created using the settings shown below.The font can be found here
a)
[img]http://www.flash-game-design.com/images/modern-layout-8/46.jpg[/img]
b)
[img]http://www.flash-game-design.com/images/modern-layout-8/1.jpg[/img]
And that brings us to the end of this Photoshop tutorial.
