Step 1:

Make a new document in Photoshop that is 750px wide by 1000px high at 72dpi. Set the foreground color to #1c3b00 and fill the “Background” layer with this color by pressing Alt + Backspace.

Let’s drag some guide lines. Go to View -> New Guide -> and add Vertical Guides at 10px and 740px; and Horizontal Guides at 10px and 990px.
Now, with Rectangular Marquee Tool (M) make a selection, create new layer and fill it with #ff5117. Name this layer “orange background”.

Step 2:

Create a new document (50X50px) and create a new layer called “circle”. Then create a black circle, the size of your entire canvas. Hide your original background layer and then go to Edit -> Define Pattern and define your pattern as “circle – 50×50″.

Then return to your original document and select your “orange background” layer. Go to blending options and apply your “circle – 50×50″ pattern as part of a pattern overlay. Reduce pattern overlay’s opacity to 8%.

Step 3:

Grab a sunburst graphic (i choose sunburst20) from Free Sunbursts Set, created by Tom of PSDFAN, and paste it onto a new layer above “orange background” layer. Now go to Image -> Adjustments -> Hue/Saturation and make following adjustments:

Resize it and place like on the picture below. Lower the Opacity to 20%. Name this layer “sunburst”.

Step 4:

Hide all layers. Select the Ellipse Tool (U), and create a circle. Use black for the color, and go to Layer -> Layer Style -> Blending Options. Change the Fill Opacity to 50%. After that select Stroke. Use 8 pixels for the size, Inside for the Position and Black for the color.

Select ellipse, go to Edit -> Define Brush Preset and give a name to a new brush.

Step 5:

Hide ellipse layer and unhide “background” and “orange background” layers. Create new layer above “orange background”, set the foreground color to white (#ffffff), pick up Brush Tool (B), for brush choose the one that we created. Go to Window -> Brushes (F5) and make the following adjustments:

Now just paint some ellipses with our custom brush. For this first layer use a big size, like 400px.

Go to Filter -> Blur -> Gaussian Blur and set 20px for the Radius.

Lower the Opacity to 70%. Name this layer “big cirlces”.

Create another new layer and paint more brushes, but this time use a smaller size for the brush. After that go to Filter -> Blur -> Gaussian Blur. Use 5 pixels for the Radius.

Lower the Opacity of this layer to 50%. Name this layer “medium circles”.

Create another layer and repeat the previous step, with a much smaller brush. Apply the Gaussian Blur to this layer. Use 1 pixel for the Radius.

Lower the Opacity to 30% and name this layer “small circles”.

Now, group these 3 layers (“big cirlces”, “medium circles” and “small circles”) into “Circles” Group, and then change Blend Mode to Color Dodge. So here’s what we have now.

Step 6:

Download beautiful sexy young lady from here , copy and paste it above “Circles” group. Resize a bit and place it like on the picture below. Give this layer name “girl”.

Go to Filter -> Sharpen -> Unsharp Mask and make adjustments.

Then go to Create new fill or adjustment layer at the bottom of layers window,

and choose Levels. Apply following settings:

Repeat the process above, but this time choose Photo Filter.

Let’s take a look now.

Step 7:

Let’s move on. Command + Click on Girls Thumbnail to make a selection.

Go to Select -> Modify -> Expand and make Expand by 8px. Create new layer below “girl” layer and fill the layer with any color. Don’t clear the selection yet.

Now go to Select -> Modify -> Contract and Contract by 2px, and hit Backspace on the keyboard to delete. Clear the selection by pressing Command + D on the keyboard.

Apply the following Layer Styles.

Go to Filter -> Blur -> Gaussian Blur and set 2px for the Radius.

Name this layer “glow”.

Step 8:

Select “girl” layer, together with “Levels” and “Photo Filter” and duplicate them.

Select duplicated layers, turn off Levels copy layer and Merge those layers. Name result layer “girl copy”.

Invoke Transform Tool by pressing Command + T on keyboard, and make “girl copy” layer smaller.

Move “girl copy” layer below “glow” layer, apply Gaussian Blur with radius set at 1px, and lower the Opacity to 50%.

Repeat the above steps two more time, but making the girls layers every time a bit smaller.

Step 9:

Download “Fortuna Dot” font from here. Pick up Horizontal Type Tool (T), chosse “Fortuna Dot”, set the font size to 85px, font color to white (#ffffff) and type the text.

Rasterize text layer.

Pick Polygonal Lasso Tool (L) and make a selection like on the picture.

Go to Layer -> New -> Layer Via Cut (Shift + Command + J). Name this new layer “R”.

Move the original text layer below “girl” layer, so you should have this.

Zoom in, make sure original text layer is selected, make selection with Polygonal Lasso Tool (L) and hit Backspace to delete selection. Clear the selection (Command + D).

Now, zoom in once again, but this time over the word “murder”, make selection with Polygonal Lasso Tool (L) and hit Backspace to delete. Clear the selection (Command + D).

Step 10:

Let’s add a few more details.

Create new layer above “R” layer, make a selection with Command + Click on “R” layer thumbnail, select Brush Tool (B), choose Soft Round 27px brush, for foreground color choose #150303 and start painting on the new created layer, but only over the left side, close to the edges. That way we will create sutable shadow over the letter R.

Clear the selection (Command + D).

Now zoom in over the word “murder”, and using the above method create sutable shadow over the letter R.

Let’s take a look at final image.

To make it more old add a few scratches. Download Heavy Scratch brushes, open the brush tool (B), load Heavy Scratch brushes, pick up Scratch Heavy brush, set diameter to max 1050px, make sure that foreground color is white (#ffffff), create new layer above all layers, and paint with brush tool. Name this layer “scratch”. Lower the Opacity to 70%.

That’s all folks. Thanks for reading!
Hope you all enjoy, learn something and have fun with this tutorial.
Stay tuned for more cool stuff!

Step 1: Background

Let’s start by creating a new document in photoshop – 960×1200px, resolution 72 pixels/inch.

Add vertical guidlines by choosing View > New Guide, at 0px and at 960px to mark the limits. Go to Image > Canvas Size to resize the document making the canvas width bigger (1460×1200). This way design will be centered into the big document and we’ll be able to see how it looks on widescreen resolutions.

Now set the foreground color to #a5acad and fill the document with this color (Alt + Backspace). Go to Filter > Noise > Add Noise and apply filter with parametars shown on the picture below.

Step 2: Header

Pick up Horizontal Type Tool (T), choose Graublau Web Sans font, for font color choose #ffffff, set size at 60px and type some welcome message.
I suggest to type welcome message as a separate sentences – each part in own layers (I have 3 layers for my message ).

Notice that I use bigger font (72px) with bold style for my name, and also a bigger font (65px) with bold style for words designer and my portfolio. Apply the following layer styles to the welcome message:

You should have something like this now:

I’ve decided to use iPhone for twitts. Download and open iPhone 3G-3GS PSD by `-kol, pickup front group from iPhone 3G/3GS group, copy and paste it into our portfolio. Rename this group to iPhone. Remove Drop Shadow, Shadow and Reflection Layers, rotate, resize it and place it like shown on the picture below (don’t merge the iPhone group yet). Make sure that welcome message have some breathing space.

Since I’m using Tweetie application on my iMac, I want it to recreate Tweetie interface on iPhone screen. So, I’ve captured screen form Tweetie application,

and clear the area.

Then resize it to fit iPhone screen.

Pick up Rounded Rectangle Tool (U), set radius to 5px, and draw rectangle like shown on the picture. Fill it with #f1f1f1.

Add content to twitter.

Merge iPhone group and add Drop Shadow from Layer Styles Menu.

Command + Click on iPhone thumbnail to make a selection, pick up Polygonal Lasso Tool (L), make sure Intersect with selection is selected, and make a selection like on the picture.

Create new layer above iPhone layer and fill with #ffffff, and then lower the opacity to 12%.

This is how header look right now.

Step 3: Navigation

Let’s move on. Choose Horizontal Type Tool (T), font is Graublau Web Sans, color is #dddddd and create navigation.

I’m going to change color of Home to #ffffff and this will be the color for active page.

Step 4: Main Content

First we will create the featured image. Draw a white rectangle and add Drop Shadow.

Now copy that layer and rotate it slightly with the Free Transform Tool (Command + T). Do this one more time.

Import your featured image and place it over the white rectangles. Don’t worry if the image is flowing outside the boxes, we will fix that. Make a selection from the top rectangle (Command + Click on thumbnail), go to Select > Modify > Contract and insert 17px. With the featured image layer selected click the Quick Mask icon on the bottom of our layer palette. You will get nicely bordered image effect like shown in the image below.

Download paperclip icons by ~morinetti, open paperclip-half.png and import into portfolio. Place it over white rectangles, resize and apply Drop Shadow.

Add nice clever text about yourself (font is Graublau Web Sans, size 18px, color #ffffff).

With Rounded Rectangle Tool (U) and radius set to 10px, draw a rectangle, fill it with #dddddd and change the Blend Mode to Multiply.

Type VIEW PORTFOLIO with Horizontal Type Tool (T). Font is Graublau Web Sans and font size is 30px. Apply following layer styles.

Let’s add more details. Once again pick up Horizontal Type Tool, for font choose Journal, set size at 36px, color is #fffff and type “recent work”. Next, choose Custom Shape Tool (U), load Arrows Shapes and pick up Arrow 19. Fill arrow with #ffffff color.

Place text and arrow like on the picture below.

Draw dark gray (#777777) 1px line with Line Tool (U). Duplicate this layer by pressing Command + J on keyboard, change line color to #dddddd, and move it 1px down by pressing down arrow on keyboard once. Group this two lines and lower opacity to 55%.

Take a look at our work till now.

Step 5: Footer

I’m going to keep footer as simple as possible. We need 3 columns in the footer – Recent post from the blog, Flickr group and Social Stuff. Each column is 320px wide.
From left to right:

FROM THE BLOG headline (font: Graublau Web Sans, color: #dddddd, font size: 30px). Add few recent post titles below (font: Graublau Web Sans, color: #f4f4f4, font size: 18px).

FLICKR headline (font: Graublau Web Sans, color: #dddddd, font size: 30px). We will place 6 thumbnails from flickr stream. To do this, pick up Rectangle Tool, choose Fixed Size W:75px H:75px and create rectangle by just clicking on the canvas. Duplicate this rectangle 5 more times.

Import flickr images and place it over the rectangles. Don’t worry if the images are flowing outside the boxes. Make a selection from the rectangle (Command + Click on thumbnail), with the flickr image layer selected click the Quick Mask icon on the bottom of our layer palette. Repeat this step for all flickr images.

SOCIAL STUFF headline (font: Graublau Web Sans, color: #dddddd, font size: 30px). Download Aquaticus.Social by ~jwloh icon set, choose 6 icons (size 64px) you want and place it below headline.

Add some legal information in the bottom right corner (font: Graublau Web Sans, color: #000000, font size: 14px, tracking: -25, Blend Mode: Lighten).

Let’s take a look at final image.

Hope you enjoyed this tutorial.

Choclate Pro Wordpress Style Layout

Colorful Corporate Website Layout

Creative Design Studio Layout

Simple Sleek Web Portfolio

Impressive Web hosting Layout

Creative Blog Layout

Unique Colorful Site Layout

Watercolored Design Studio Blog Layout

Clean Business Layout

Sleek and Textured Web Layout

Web Design Company Layout

Worn Paper Web Layout

Tutzor Web 2.0 Style Redesign

Elevate your Web Design Process and Results

Grunge Web Design

Beautiful Website From Scratch

Interior Design Layout

Wordpress Blog Layout

Portfolio Layout

Creative Web Design Layout

Hope you enjoyed this post. See you in the next one.