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.

The ball created in that tutorial is amazing but has two disadvantages:

1) You have to complete 15 steps to obtain a good result and you have to change a lot of blending modes.
2) The final image is flat. A normal 2D layer.

With my tutorial you’ll be able to achieve the same effect but in 5 steps, without playing with the blending options and the result will be a REAL 3D layer.

So…we can start.

STEP1

Create a new document and set the color mode to RGB 16 bit

STEP2

Fill the first layer with the black and then create a new empty layer (rename it “Circle”).
Now, inside “circle”, with the elliptical marquee tool create a circular shape ad fill the selection with the white.

STEP3

Reduce the opacity of the new layer to 20%.
Make five copies (ctrl+j or cmd+j for mac users) and move them around the “circle” as shown in the next screenshot (the positions are random so feel free to move the layers where you want).
Leave the same opacity (20%) for all the copies.

STEP4

Now, let the magic begin.
Group all the circles together (select the four layers holding down shift and press ctrl+g or cmd+g for mac users).

Go in the menù bar, under “3D” and choose “Sphere”.

After 1 minute of rendering the result will be something like this:

A real 3D object that you can rotate and scale.

STEP5

Now simply add some finishing as James did for his tutorial.
Fill a new layer with a gradient e change its blending mode to “overlay”

After that add a levels layer and change the settings to add more brightness.

and this is the final result…

OPTIONAL STEP

To improve the quality and remove some imperfections you can check the box “remove backfaces” under “3D” -> “Render Settings”

And then, if you want, you can group the “gradient” and “circle” layers and then you can copy the entire group.
In the new one you could change the color of the gradient and rotate a little bit the ball.
This is my final object with a yellow-orange gradient and a “cloud” filter in top.

Ingredients:
1 normal, everyday Photoshop
1 set of real 3D text.
1 large black canvas (1600×1200px)

Step 1: First, we’ll need something written in 3D. We have two possible variations:

If you prefer a bit of Mac spice, use the command “Extrude and Bevel” in illustrator. This tutorial from PSDUTS may help you through it.

If you swing more toward a Windows flavor, Xara3D is another. If you don’t have Xara 3D, have no fear. We always come prepared: click on the thumbnail below to download a sample.

Step 2: Place the 3D text and rename it as “3D Text”. Then, with the Magic Wand Tool select the face of the letters and cut that part as you can see from the screnshoots below.

Step 3: With me so far? Now comes the fun part. Make two copies of this layer, one for backup (“3D Text Copy”) and another one (“3D Text Blur”). Set the backup copy aside to cool for a bit (aka, Hide). Leave the other two layers (“3D Text” and “3D Text Blur”) on the fire and easily accessible. Turn down the heat a bit on “3D Text Blur”; let it simmer for a while and come back to it later.

Step 4: Next, create a new layer group, rename it “Effects”, and change the blending option of this group to “Color Dodge”. Now, being careful not to disturb the other layers, reach inside this new layer group and, with a flick of the wrist, create a new layer, applying the filter “Clouds” (Filter -> Render -> Clouds) to give it that nice, puffy consistency that we’ve all come to know and love.

Step 5: Dropping just below that group in your palette, create another group, this one named “Colors”. Remember that little wrist-flick technique from Step 4? Didn’t get it quite to your satisfaction the first time? Well, we’re going to give it a go again. As before, within this new group you’ll need to create a new layer; add a sprinkle of pink, and with the gradient tool (in Radial Mode) draw a soft edge glow. After that, set the layer blending mode to the “Low” mixer setting, or “Soft Light”.

At this point, you might see a strange pink cloud, but don’t worry. All part of the plan.

Step 6: Repeat the previous step with two other bright colors, but placed differently.

Step 7: Now, for the “secret ingredient.”
Do you remember the “3D Text Blur” we set aside way back in Step 3?
Well, it’s been simmering long enough! Select it now and apply a Gaussian Blur of 13 pixel radius (Filter -> Blur -> Gaussian Blur)

Step 8: Now the creative part. Add a new layer in the “Effects” group, immediately above the “Clouds”. Download a cool brush from DeviantArt and use white to trace around the inside face of each the letters.

Step 9: Still with me? We’re almost there! Carefully slide yet another new layer between the two groups (“Effects” and “Clouds”).
Reach for your trusty Gradient Tool (this time in Linear Mode), choose White and, holding down the Shift key, drag the Gradient tool from the outside edges of the canvas to the middle of the image.
Set your blending mode to “Saturation” and see what happens…

Step 10: Ready for another layer? We’ll need a new one in the “Effects” group; name it “Abstract Lights”.

Step 11: Then ctrl-click (command-click for you Mac lovers) the “3D Text” layer icon in the layer’s palette and paint inside the new selection with a custom abstract brush as we did in Step 8 (remember, use WHITE).

Step 12: You’ve made it. The final step. The icing on all of these layers. Create…one…last…layer above the “White” layer we just did.

Use a nice LARGE custom brush, like this, and draw a single Cloud above the text. Apply a Motion Blur (Filter -> Blur -> Motion Blur) with an Angle of “-11? and a distance of “200? pixels.
Change the Opacity to “30%” and apply a gradient overlay with the following settings:

Voila!

There you have it. A quick, easy way to spruce up any old 3D text into something to set anyone’s mouth watering. Serve hot or cold to your friends, and watch ‘em drool…

Enjoy!

For a bit of a twist—if you’re feeling a bit adventurous–above all the layers, try new custom brushes (like smoke) and repeat the last step to apply cool lights. Experimenting can be fun!

Here’s another example from my portfolio.

Tutorial by Francesco Mugnai.

Text by Francesco Mugnai & Marc Westenburg