To enlarge click on the image.

Setting Background

Create new document in photoshop: 960x1200px, resolution 72 pixels/inch. Add 2 Vertical Guides at 0px and 960px.

Go to Image -> Canvas Size and expand canvas to 1460x1400px. Fill the background with #2a0924. Go to Filter -> Noise -> Add Noise.

Header Background

Create new layer, choose Rectangular Marquee Tool (M) and make selection that is 140px high. Fill the selection with #ffffff color, lower the opacity to 40% and change Blending Mode to Overlay.

Add a black 1px line on the bottom of header, using Line Tool (U), then duplicate this line, move it 1px down by pressing down arrow key once, and change color of duplicated line to #3e0231.

Website Title

Select the Text Tool (T) with the font Century Gothic, set the font size to 60px, tracking to -25, then set the color to #ffffff. Add your website title at the top of the canvas. (Don’t ask me why i choose designCube for website title).

Apply following Layer Styles to website title.

Navigation

Select Type Tool (T), for font choose Century Gothic, set the font size to 24px, font style to bold, color is #7a7a7a and type navigation links.

Add Inner Shadow to links.

Now, with Rounded Rectangle Tool (U) and radius set to 10px, create rectangle below Home link and add following layer styles.

For active link change font color to #ffffff.

Welcome Box

Pick up Rounded Rectangle Tool (U) set radius to 15px, and draw big rounded rectangle 925x325px. Fill rectangle with #41164b.

Add Stroke from Layer Style Panel.

Change the Blend Mode to Screen and lower the Opacity to 15%.

With Type Tool (T) add welcome text inside the box.

Apply Drop Shadow to welcome text.

Again, pick up Rounded Rectangle Tool (U), set radius to 10px, draw nice rounded button and apply following Layer Styles.

Button should look like this.

Add some text to the button with Type Tool (T) and apply next Layer Styles.

Take two images of your choice, I used Safari screenshots, scale one down and place it behind the bigger one. Add Perspective using Free Transform Tool.

Copy both layers, and with the Free Transform Tool, flip the first image and then the other one. Shift both images a few pixels down. Now make a selection from outside the bottom part to middle of the first flipped image with the Rectangular Marquee Tool.

Go to Select -> Modify -> Feather and type 30px or more. You should have a selection similar to the shown in the image. Press the delete key a few times and you will create a nice faded reflection from the original image. Repeat this step for the second image.
Let’s light welcome box a bit. Create new layer, Cmd + Click on Welcome Box Vector Mask Thumbnail to make a selection.

Choose big soft round brush (size is around 800px), make sure that foreground color is #ffffff, and paint like shown on the picture.

Change the Blend Mode to Overlay. Duplicate this layer and lower Opacity of duplicate layer to 70%.

Add a black 1px line at the bottom, then duplicate this line, move it 1px down by pressing down arrow key once, and change color of duplicated line to #3e0231.

Creating Content Area

Make selection with Rectangle Marquee Tool (M), just below the 1px line.

Again, pick up Brush Tool (B), choose soft round brush (460px), foreground color should be #ffffff, and paint with this brush once. Change the Blending Mode to Screen and set Fill to 20%.

Duplicate this layer. Clear the selection (Cmd + D).

Download beautiful iMac icon, import, resize and palce it. Create reflection using Feather Tool as described above.

Add some text.

Download Life Saver icon, import, resize, place and create reflection. Also add text as described above.

Let’s add testemonials block.
Download Two Comment Bubbles icon, import, resize, create reflection and add testemonial text.

With Rounded Rectangle Tool (U) create button. Add next Layer Styles.

With Type Tool (T) add text to the button.

Add two 1px lines as already described above.

Add Get A Quote Area

To create Get A Quote Area use the methods explained in earlier steps.

Footer

In the footer we will create two sections: about us and contact.

At the bottom add legal information.

Thanks for reading!

Stay tuned! More cool stuff to come.

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!

In this tutorial I will be showing you how to use the displacement Filter to your advantage and create a stunning black and white illustration. You will learn how to create clipping masks by using splatter brushes and how to manipulate image adjustments to sort out coloring and shadow composition. This tutorial is very easy to follow and you will learn quite a few new little tricks by doing the tutorial. Hope you enjoy it and have fun.

Artist: An1ken from Creativeoverflow

Skill Level: Beginner to Intermediate

Time needed: 45minutes

Resources Used:

• Stock Image on Stockvault
• Splatter Brushes
• Displacement Maps(Must Download for Tutorial)

Final Preview

Step 1:

Let’s start off by opening up the downloaded stock image in Photoshop and then duplicating the background layer by going to Layer>Duplicate Layer. This duplicates your base layer for you, I always do it because I often want to use the base image again and if I don’t duplicate it I won’t be able to work with it. Moving on let’s create a new layer, Go to Layer>New>Layer and then grab your Healing Brush tool from your Photoshop Toolbar (Shortcut: J).

Make sure your sample settings in the top toolbar is set to All Layers and not Current layer, this makes use of all the layers on the layers palette instead of the single layer your currently on. Now we are going to be removing her hair from her forehead, it totally conflicts the focal point as her face and distracts you from what you should be seeing. Hold down ALT on the keyboard whilst you have the Healing Brush selected and then click on a clean spot on her forehead and then let ALT go and brush over the hair that you want to remove. Set the brush size according to your desires.

Step 2:

Let’s go to the Image Adjustments Menu on your layers panel (Half Black Half White Circle) and select Brightness and Contrast. The settings you will be using for brightness and contrast are -12 Brightness and +9 Contrast. Now let’s create some clipping masks, create a new layer – Layer>New>Layer and then grab your brush tool from your Tools, select a nice boasting splatter brush and add it into your image on the new layer. Hide the splatter image and create another new layer. Go to Image>Apply Image – this copy merges your entire document into a single layer. Unhide your splatter layer and then select your applied image layer, go to Layer>Create Clipping Mask or (Shortcut: CTRL+ALT+G). You should now be able to move your applied image layer around within your splatter brush trails. I repeated this process 3 times and came out with the following.

Step 3:

Here comes the interesting part of the tutorial. We are going to be using the Displacement filter to generate a textured feel in the piece. Create a new layer – Layer>New>Layer and then go to Image>Apply Image. Now you will have a merged image of all the layers in one layer, I have provided download links for the displacement maps that I used in this tutorial so that you can follow precisely. With your applied image layer selected go to Filter>Distort>Displace now you will find a option box that gives you options to set the scale and displacement map placement as well as areas. For the first displacement we are going to set the Horizontal Scale to 100 and the Vertical Scale to 100, we will keep the rest of the settings default and hit OK – here is the part where you search for the displacement maps on your computer that you just downloaded and once you find them use the 01.psd file for this displacement and hit open. Suddenly you will see a major change take place on your image, set the blending options to Overlay and grab your Eraser tool. Erase all the unwanted areas in the image that you do not want and then make sure you are happy with the looks of things.

Step 4:

Create another new layer – Layer>New>Layer then apply image once again by going to Image>Apply Image, now make your way up to Filter>Distort>Displace set your Horizontal and vertical scales to 80 and hit OK. Now use the 02.psd file and press open. Now grab your erases tool once again and erase the bit and pieces that you don’t want to have in your final piece.

Now Create a new layer – Layer>New>Layer and then apply image once again – Image>Apply Image. Now go to Image>Adjustments>Threshold use the default value of 128 and press OK. Now go up to Filter>Blur>Radial Blur – Use 100% Zoom blur and hit OK. Now set the blending options to soft light and your opacity settings to 74% erase over bright pieces on the image.

Step 5:

Time to create a few more clipping masks with splatter brushing.  Create a new layer – Layer>New>Layer grab your brush tool with a nice splatter brush selected and brush on the image. Now hide that splatter layer and create a new layer, apply image on this layer by going to Image>Apply Image and then unhide the splatter layer. Select the applied image layer and go to Layer>Create Clipping mask or (Shortcut: CTRL + ALT + G) move the applied image around until your happy with the outcome. I repeated the process 3 times once again and this is the outcome I got below.

Step 6:

Time to bring in some color to the actual black and white image.  Lets create a new layer – Layer>New>Layer and then fill the layer with black #000000 now that you have a filled black layer set your blending options to Linear Dodge. Next I grabbed my brush tool from the Photoshop toolbar and selected a nice big soft brush. I used pink – #ff0072 to compliment the black and white in this piece. Lets brush over her knee and hand to set the ultimate focal point. Next change the size of your brush to a smaller size and select white as your foreground color. We will use this to set the reflection and coloring of the point to a more vibrant expression. Brush inside the pink brushing you did previously. I have shown you the coloring layer below and then the outcome below that.

Step 7:

In this step we are going to be adding a gradient and another color brushing. Let’s go to the adjustments menu (Half white half black circle on your layers panel) now select Gradient Fill – we are going to be using a dark grey/blue to light grey. Color codes are #27333a – #737d86 – #b6bec9 keep the gradient fill settings default, Style: Linear – Angle 90 degrees and hit OK. Change the blending options to overlay and the opacity to 37%.

Now we are going to be repeating the exact same process as in step 6 – create a new layer – Layer>New>Layer now fill it with black #000000 next change your blending options to Linear Dodge and grab yourself a nice soft round brush. I used Pink #ff0072 in this case and brushed it across her shoulder and bottom part of her chin. The color layer is shown below with the outcome of the two sections of this step.

Step 8:

In this step we are going to be adding some image adjustments to the piece to straighten out some coloring depths and composition effects. Firstly lets go down to the image adjustments menu (Half Black Half White Circle on the layers panel) in this case I used the default gradient – Black #000000 to White #FFFFFF and hit OK. Now change your blending options to Multiply and drop your opacity settings down to 14% this will enrich the shadows of your image.

Next let’s go back to the image adjustment menu and select Brightness and Contrast. Move the brightness up +17 and the Contrast to +25. This is going to bump up the brightness of the image and make the effects you created stand out quite a bit.

Last but not least create a New layer – Layer>New>Layer then apply image by going to Image>Apply Image then navigate your way up to Filter>Other>High Pass use the default settings of 10.0 and hit OK this will turn your image into a grey scaling image. Change your blending options to Overlay and your opacity settings to 25% and you’re done.

I hope you enjoyed this tutorial and had fun. Keep checking back for more.

Step 1: Background

Let’s start by creating a new document in photoshop – 960x1200px, 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.

Here are a couple of tips when trying to organize your photoshop file.

1. Naming your layers

Start out with naming your initial layer, whether its a text layer, image layer or vector shape, always give it a valid name.

2. Grouping your layers

If you have multiple files that make up a specific section of your design, group them and categorize the folder with a valid name. Not only does it organize a group of similar files but it also keeps you from scrolling through a large list of ungrouped layers.

3. Color coding grouped layers

In addition to including layers within folders, Adobe offers another method of categorizing for those of us that are visual organizers. Color coding, it can take your organizing to a completely new level, (I was going to insert a lame joke here in reference to some old school nintendo game but I deleted it, you can thank me later)! To color code a folder or layer, just right click and choose layer properties or group properties and you will see a drop down to choose from the 7 color options.

4. Right click, layer selection

When you have the Move (v) tool selected you can right click on your document, typically on a layer you want to edit and your organized list will show up for you. This helps to quickly navigate to your desired layer.

That’s about it, it’s that simple. Organizing may be annoying but whether you do it during your design process or add it to a completed file it is definitely a good practice. If any of you have your own methods that differ from what I have listed above, post it and share with everyone else! Thanks!

PSD umbrella icon

WEB UI Treasure Chest v 1.0

Page Curl PSD Template

150 Badges

PSD chat icon

Free psd Drink Coasters

Guarantee seal PSD

stiker PSD

xl stamp postage

Newspaper template

thong PSD

Fruit illustrations, lemon and orange icons

Preview Notepad

wall phone PSD

Just Plain Bookish 2 – PSD

apple keyboard free psd

iPhone in PSD format, Photoshop recreation

Shopping bag icon

BEER can psd

psd lunch

PSD radio

Desk – Wallpaper

Macbook PSD

Record and Sleeves PSD