First we’ll run you through on removing white patches from photo and then we’ll proceed to coloring it. The steps are pretty standard. Load up your Photoshop, and off we go.

To follow through the entire tutorial, we suggest you download and use the following image.

Step 1

We’ll start by removing the white patches on the image. Choose Clone Stamp Tool and by pressing Alt key pick the plain and appropriate surface near all white patches and apply it on white patch. Continue this process until all patches get removed.

After removing all patches your poor image will look clean as shown in image:

Step 2

Next, we’ll proceed with coloring the image. It would be bad idea to colorize the image as a whole; we’ll do them one by one, an object at a time.

First, we’ll select the hat by making the use of Magnetic Lasso Tool – like this:

Step 3

To colorize it, we will use the Hue and Saturation (HSL) option. There are many ways to colorize an object, but HSL is perhaps one of the easiest and most flexible.

Proceeding to colorizing the hat, add these values to the (HSL) 360, 35, – 26 appropriately. (While using HSL, on that window, do not forget to turn on Colorize option.)

Step 4

After applying color, the hat may look a little plain. Let’s add some Noise to it. Select Filters -> Noise -> Add Noise and give amount "5" to it.

Check Monochromatic option to get a smoother noise effect. See the next image for its differences.

Step 5

Next, the coat. The process is same – only different HSL values, which are respectively: 42, 10, – 63.

To make the overall look of coat more natural, instead of using Noise tool, we take advantage of Grain Texture option. You can find it under Filter -> Filter Gallery -> in Texture tab -> Grain.

Select the following options – Intensity: "10", Contrast: "50" and Grain Type: "Soft".

And then you will see the output:

Step 6

Moving forward – the shoes. To give shoes a shiny effect, we are going to use Image menu -> Adjustments -> Variations. Select "Midtones" and click Ok.

Try some combination of CMYK colors until you get a boot of this color:

Step 7

Next up, the door. First, let’s color the door borders.

Select one side border of door by using Rectangle Marquee Tool. Add 15, 45, -53 values in HSL tool. Then select Filter -> Filter Gallery -> in Texture tab -> select Grain option and keep Intensity: "12", Contrast: "50" select Grain type: "Enlarged".

Follow the same procedure to all the borders of the door.

Step 8

Next, we proceed to coloring rectangles between the doors with the following HSL values: 55, 20, -26 and in Texture Grain, keep intensity: "12", contrast: "50" and Grain type: "Enlarged".

Step 9

We’ll wrap up coloring the door by adding colors to the borders, HSL values of : 25, 7, -69. Then under Texture Grain keep Intensity: "12", Contrast: "50", and let’s add extra noise by selecting Grain type: "Regular".

Step 10

After the door, we proceed coloring the soil. To color the soil, select that portion by using Magic Wand Tool and then keep HSL values: 20, 24, -56.

Step 11

Last but not least, we will color the wooden background of the image. To give it a it a wood look and feel, we give it a HSL value of: 31, 53, -45, and then add Noise "5" by checking the Monochromatic option.

After all this procedures finally you will see the output like this:

Color Correction

We are done coloring the image. Now, we proceed to the final and most important part – color correction. Color correction when done right, will give image its correct mood and make it more realistic.

To increase the brightness of the image, we go to the following option: Image menu -> Adjustments -> Curves, and add "186" for Output and "164" for Input.

Let’s brighten up the following section of the image (where arrow in pointed to). First we select the portion with Rectangle Marquee tool. Then go to Filter -> Filter Gallery -> Distort tab and select Diffuse Glow with the following values: Graininess: "0", Glow Amount: "11", Clear Amount: "15". And finally, proceed to Image menu -> Adjustments -> Curves and add "200" for Ouptut and "188" for Input.

Follow the above process for the remaining parts of image but with different values in Diffuse Glow: Graininess: "2", Glow Amount: "5", Clear Amount: "15". Curves’ not required.

To darken the shadows of the hat and the coat, let’s use the Burn Tool and by selecting Range: Midtones and decreasing the Exposure value to "20%" apply it on shadows part appropriately.

We’ll use the Dodge Tool to brighten up the coat and hat so it looks as though the lights are coming in from the right side, and to give a sense of thickness for the door borders, we use the Burn Tool.

And here’s how your final output will look like (or similar) after some color corrections.

Yeah, you will be learning to create delicious french fries icon with mainly some shape creations and layer styling involved, beginner baker welcomed! This tutorial will definitely make you full.

Getting Started

To follow this tutorial, you will need following resource:

• Font Ballpark Weiner from Mickey Rossi
• Font Recycle-It from Bartek Nowak

French Fries Icon

Step 1: Draw Potato

Activate pen tool. Draw potato’s basic shape and set its color to #e1cc7a. Notice that we don’t use rectangle tool, instead we use pen tool to get natural appearance.

In Layers panel, double click layer to open Layer Style dialog box. Add following Inner Shadow and Gradient Overlay.

Here’s the result.

Step 2

Draw potato’s side.

Add following Layer Styles.

This is the result.

Step 3

Finally, draw its upper part.

Add following Layer Styles.

We have one french fries now.

Step 4

Put all layers into a group. Repeat these processes to draw more potatoes.

Step 5: Bucket

Draw a red polygon shape. On top of it, add elliptical path and set its mode to Subtract.

Step 6

Draw stripes with color #a60101 and #ff0302.

Step 7

Place stripes on top of the bucket. Convert it to Clipping Mask by pressing Ctrl + Alt + G. Perform transformation (Ctrl + T) and then Ctrl-drag its corner until the stripes match the bucket’s perspective.

Reduce Opacity to 40%.

Step 8

Make new layer on top of the bucket. Paint black spot on lower part of the bucket. Convert layer to Clipping Mask (Ctrl + Alt + G).

Step 9

Repeat previous process to upper part of the bucket.

Step 10

Ctrl-click front bucket layer to make new selection based on its shape. Make a new layer and fill it with black. Add noise using filter, Filter > Noise > Add Noise.

Change layer blend mode to Screen and reduce its Opacity to 70%.

Step 11

Duplicate front bucket’s layer shape and place it above all layers. Reduce its Fill to 0%.

Add Inner Shadow with this setting.

Here’s the result.

Step 12

Let’s draw horizontal stripe on the bucket. Duplicate path of front bucket’s layer shape. Select both paths and click Combine. Both paths will be merged into a single path.

Step 13

Click Add Adjustment Layer icon and select Solid Color to convert the path into a layer shape. Select #fedd19 for its color. Duplicate path and move it down a few pixels. Set its mode to Subtract. Now, you should have a yellow horizontal stripe on the bucket.

Add Gradient Overlay and Inner Glow.

Here’s our result.

Step 14

Draw red polygon for left side of the bucket.

Double click layer and add Inner Shadow.

Step 15

Ctrl-click bucket side’s shape. Make new layer and fill it with black.

Step 16

Click Filter > Noise > Add Noise.

Set blend mode to Screen and reduce its Opacity to 60%.

Step 17

Draw yellow horizontal stripe on the bucket side.

Add Gradient Overlay and Inner Glow. The setting used here is the same as horizontal stripe on front face of the bucket (Step 13).

Here’s the result.

Step 18

Use the same technique to draw more stripes on lower part of the bucket.

Step 19

Let’s draw highlight on the bucket. Draw a white rectangle on lower part of the bucket and reduce its Opacity to 43%. In Layers panel, click Add Layer Mask icon and paint both ends with black.

Step 20

Repeat this to step to draw another highlight.

Step 21

Draw bucket’s thickness. Use red for its color.

Add Gradient Overlay.

Step 22

Next, draw back side of the bucket. We can simply duplicate front side of the bucket and move it under all layers. This time, set both its path mode to Add to Shape.

Add following Layer Styles.

This is the result.

Step 23

Draw other side of the bucket.

Add following Layer Styles.

Step 24: Add Potatoes

Alt-drag sample potatoes that we have created earlier. Put them inside the bucket. Arrange them in a natural position.

Step 25

Make black shadow between potatoes and bucket. Paint black to add bucket shadow onto the potatoes. Reduce its Opacity to 12%.

Step 26

Make new layer and individually draw shadow on each potato. This subtle shadow will add depth onto potatoes’ position.

Below, you can see gif animation showing before and after adding subtle shadow on each potato.

Step 27: Add More Highlights on Bucket

Let’s add some highlights on the bucket. Draw a white rectangle on front cover side and reduce its Opacity to 30%. Click Add Layer Mask icon and paint both edges with black.

Step 28

Paint more highlight on its other sides.

Step 29: Logo

Draw an ellipse on front face of the bucket with color: #fcbe15.

Double click layer and add Drop Shadow.

Below is the result of subtle Drop Shadow onto the ellipse.

Step 30

Add text "Hk’s" on top of the ellipse using font, Ballpark Weiner. Hit Ctrl + T to perform transformation. Hold Ctrl and drag its side to skew the text.

Step 31

Add following Layer Styles onto the text logo.

Below is the result.

Step 32

You can some more stuff onto the bucket. You can also add recycle icon using character from free font Recycle It.

Step 33: Background

Activate gradient tool. Draw a radial gradient from #f3f3f2 to #f4f5c9.

Step 34: Shadow

Use soft and small brush to draw a shadow under the bucket.

Step 35

Duplicate shadow layer by pressing Ctrl + J. Click Filter > Blur > Gaussian Blur to soften it. You may want to reduce its Opacity if the shadow becomes too dark.

Final Result + Download

Finally, this is our french fries icon. I hope you enjoy this tutorial. And remember not to eat too much french fries, it’s just not healthy! :)

Click here to download the final PSD.

(This tutorial was done in collaboration with Syarip Yunus.)

We will make the text manually in Adobe Illustrator, then import its path to Adobe Photoshop and apply some effects and texture. Instead of “Avengers”, we will use “Hongkiat” as the text, or you can use any text you please.

Let’s get started.

Getting Started

To follow this tutorial, you will need following resource:

• Concrete Texture from VandelayPremier
• Free Alternative: Free Concrete Textures from Texture King
• The Avengers from Owen Dawson
• The Mighty Avengers from Owen Dawson

Avenger Text Effect

Step 1: Getting the font

Let’s start with working on its characters. Our first option is using a free font type. After searching in google using keyword "free fonts Avengers", I found two fonts with Avengers theme, The Avengers and The Mighty Avengers. Both are made by Owen Dawson. Unfortunately, both are not good enough for our project.

First font has no K and O. We need these two characters in "Hongkiat". Also, we cannot use its A character because it is not suitable if used between letters, such as in "Hongkiat".

Second font seems to be based from The Avengers original comic. It has round edges instead of sharp edges. This font style is different from its movie poster.

So, our best option is to draw the characters manually. We are not going to use these fonts but they will be useful for our reference while creating the characters.

Step 2: Reference

You should start googling for The Avengers. This is what I use for our reference. Save the image file, create new file in Adobe Illustrator, then paste the file. Click Object > Lock > Selection to lock image and prevent it from being edited accidentally.

Step 3: Making Characters

In current "AVENGERS" text, we can find N and G which is used in "HONGKIAT". Make new layer, then use pen tool to trace character N and G.

Step 4

For other characters (H, O, K, I, A, and T), we will base it from other available characters. For I, we use the available N character and remove half of it.

For O, we modify E by closing it and add hole on its center.

For K, we can simply modify R by cutting its upper part.

We also use R as base character for A.

For T, we use A character that we have created earlier.

Step 5

Place all these character into its position. Currently, we have "ONGKIAT".

Step 6: Draw First Character "H"

Just as in the reference image, first character is very tall compared to the others. For the H, we can use reference from preview font The Avengers.

Step 7

Draw two circles from same origin. Select both circles, open Pathfinder panel and select Subtract to create a ring shape.

Step 8

Place ring shape on top of H and O character. Note: To help us see better, I will remove unused paths from sight.

Step 9

Select "Ho" characters, click Object > Path > Offset Path.

Step 10

Right click H and select Ungroup to separate Offset Path from its main path. Repeat this process to O.

Step 11

Place big H on top of ring shape by clicking Object > Arrange > Bring to Front. Select big H and ring shape, then select Subtract on Pathfinder panel.

This is the result.

Step 12

Right click ring shape and select Ungroup.

Step 13

Place big O on top of ring shape by clicking Object > Arrange > Bring to Front. Select big O and the ring shape underneath it. From the Pathfinder panel select Subtract.

Below is the result.

Step 14

Delete remaining parts of the ring that are unused.

Step 15

This the complete preview on our current path.

Step 16

Draw two rectangles, then rotate them 45° and –45°. Position both shapes until we get an arrow shape.

Step 17

Select both shapes and select Unite from Pathfinder panels.

Step 18

Place arrow on top of H character. See picture below for its placement. Select both shapes and select Subtract.

Now, we have an arrow hidden inside the H character. This text is now ready to be used.

Step 19: Start Working in Photoshop

Open Photoshop. Make a new file with size: 2000 px × 900 px. Fill background with color: #070707.

Step 20: Importing Character Path

Return to Illustrator. Select all character paths and then hit Ctrl + C to copy it into clipboard.

Step 21

In Photoshop, hit Ctrl + V. Paste text as path.

Text from Illustrator is placed as a new path. You can find it on Paths panel.

Step 22

Select path inside O and A. In option bar, set its mode to Subtract. This mode will make both paths create holes inside their main path.

Step 23: Convert Path to Shape

Click black and white circle in Layers panel. Select Solid Color, set its color to #070c12. Now, we have new shape based on the imported paths.

Double click layer to open Layer Style dialog box. Add Bevel and Emboss. Select Technique: Chisel Hard to get hard edges.

This is our current result.

Step 24

Add concrete texture and place it on top of the text. Set its blend mode to Screen and reduce its Opacity to 47%.

Step 25

Add layer mask. Draw linear gradient from white to black.

Step 26

Hit Ctrl + Alt + G to convert texture into Clipping Mask. The texture now goes inside the text.

Step 27

The texture is currently faded in lower part of the text. Let’s reveal some of them there by painting that area with white using brush with Opacity 30%. Below, you can see layer mask after painting those areas.

This is the result. You can see that now there’s a subtle texture on lower part of the text.

Step 28: Add Embossed Stroke Effect on Text

Duplicate text and paste it behind the original text layer. Add Layer Style: Stroke.

Below, you can see that the result is just a flat color stroke line.

Step 29

Let’s add Bevel and Emboss and set its Style to Stroke Emboss. This way, the effect is also applied to the Stroke we have just added.

Now, the stroke has Emboss appearance.

Step 30

Add Outer Glow to add subtle shadow behind each character. Currently, we will not be able to see its effect because the background is still too dark.

Step 31

Create new layer above text with stroke effect. Press Ctrl and click on text layer. Click Select > Modify > Expand. Set Expand by 3 pixels. Notice that we expanded selection for 3 pixel so it matches the stroke size.

Fill selection with a linear gradient from white to black to white.

Set its blend mode to Overlay. Reduce Opacity to 30%.

Step 32: Add Lights on Background

Create new layer under the text. Activate Brush tool and set its Opacity to 100%. Draw white line behind the text.

Step 33

Reduce brush’s Opacity and draw bigger line covering the first line.

Step 34

Paint random light cast on line’s edges.

Step 35

Press Ctrl and click on text layer to create new selection based on text shape. Make new layer and place it on top of main text.

Activate Brush tool, set its Opacity to 10%. Paint some whites on middle of the text as like the light cast is from behind.

Below, you can see the result before and after adding light cast.

Step 36

Make new layer again. Place it on top of text. Right click and choose Stroke.

Select white color, Width: 1 px.

Step 37

Hit Ctrl + D to remove selection. Apply Gaussian Blur to soften the stroke line.

Step 38

Erase some of the stroke lines. These lines become highlight on the text shape.

Step 39

Draw another stroke line again on new layer. Erase some of it to act as sharper highlight.

Step 40

Make new layer and fill it with linear gradient, white to black. Press Ctrl and click on text layer.

Step 41

Add layer mask by clicking Add Layer Mask icon on Layers panel. Set blend mode to Overlay and reduce its Opacity to 55%.

Step 42: Adding Color

Again, press Ctrl and click on text layer.

Add Adjustment layer Hue/Saturation. Use setting below and make sure to activate Colorize option.

Here’s the result on the text.

Step 43: Increase Text Contrast

Make new layer. Press Ctrl and click on text layer then fill selection with radial gradient from black to white.

Set blend mode to Overlay then reduce its Opacity to 40%.

Step 44: Adding Subtitle

Draw a thin rectangle on top of the text with color: #3b568. Add Layer Mask, then paint both ends with black. Add subtitle above the rectangle.

Final Result

We’re done! Below is the result of our tutorial. Click on the image to see it in full size. I hope you enjoy this tutorial and learned some new techniques. If you have any questions, feel free to ask.

Download final .PSD.

More Text Effects

• Glossy Emblem Text Effects
• Photoshop Text Effect Tutorials (Part I)
• Photoshop Text Effect Tutorials (Part II)
• Photoshop Text Effect Tutorials (Part III)

(Image Source: Morteque)

Well, the good news is that there are always hope for you, and the hope is always come from the Internet. Knowing the difficulty of water effect creation, many passionate designers have gone so far to create tutorials and wonderful resources to aid you in achieving artistic and realistic water effect.

In this post we have compiled a list of water effect tutorials that show you the brilliant ways to create water effects ranged from droplets to rain to waterfalls. At the end of the tutorial section we also got Photoshop brushes for you to even speed up your creation process, so take a jump and get them all!

Tutorials

This section features comprehensive tutorials to help you create various water effects such as rain, water splashes, droplets, bubbles, ripples and even realistic water text effect, get to learn them all!

Rain, Rain, Go Away

Ever seen those comic illustrations with the super hero standing under the rain? Well, if the answer is a yes, then go ahead and read this tutorial, as it shows you how to accomplish the effect.

Designing A War Movie Poster

Use stock images to create a stunning movie poster with rain inside it. You’ll be astonished with the ending result as it looks as if it was an advertisement for a real movie!

The Rain Tutorial

Creating rain in your photograph is actually easy, but not many people know how to do it, and here is the tutorial that teaches you to create beautiful rain effect inside your image.

Composition And Realistic Rain

Create realistic rain, accompanied by a stormy weather to give the photo a gloomy look.

Rain

A detailed tutorial on creating rain in Photoshop. Nice tutorial for beginners and advanced users alike.

Water Dress

Who wouldn’t want to wear a dress made from water, especially in the hot weather! Learn how to create a realistic water skirt, and you can create anything (shirt, gloves, etc) with it then.

Water Effect Photo Montage

Transfer yourself into moving water, but don’t blame me if someone puts a straw in your head and starts drinking you!

Water Effect On Products

Create a stunning ad where your object is being hit with a wave of water splash! Check it out!

Create a Beautiful Under Water Scene

Create a magical underwater scene. Detailed and well-explained.

Creating Water From a Tap

The ending result looks pretty similar to the real one. What makes this tutorial even better is its comprehensive steps, any designer can attempt it.

Water Ripples

Learn how to create water ripples the easy way, in around 10 steps you’ll be creating ripples in the water!

Displacement Water

Create a realistic water surface that reflects the surrounding and gives a liquid-like feel to the surface.

Create Silky Smooth Waterfalls

A nice tutorial that teaches you how to turn a common waterfall into a silky smooth waterfall.

Realistic Water Text in Cinema 4D and Photoshop

Love typography? Well, transform your text into a realistic and even artistic water design!

Rainy Day

Creating a water drop and magnifying the place under it a bit to give it a more realistic look. This is exactly what the tutorial teaches you.

Water Drops

A detailed tutorial on creating realistic water drops. One of the best tutorials for water drops.

Leaf Drop

A really simple yet detailed tutorial on how to create water droplets on leafs.

Water Brushes

Water splashes, droplets, rain, waterfalls, you name it, we got the resource! Use these pre-made brushes to boost up your productivity and create your best water artworks.

Anarasha Brush

Photoshop brushes with realistic water effects, worth keeping them as your resource!

Water Effect Brushes

A set of Photoshop brushes composed of different water effects like splashes, which are ideal for creating backgrounds since they are high-resolution brushes.

Water Splash

“Water brushes to cool you down.”

Water Splashes

From the pack you can get 10 ‘aqua-ish’ brushes with some splashes, drops, water and other elements.

Water – Volume 1

The preview below is actually made with this brush pack and custom colors, so you probably witnessed the possibility of this brush pack!

Water Brushes

A set of Photoshop and GIMP brushes composed of various water shapes for different light setups.

Water II Brushes

The second pack of the Obsidian Dawn’s water brushes includes more water shapes with average size of 2000 pixels, talking about high resolution!

Water Droplets

Random set of brushes with water effects for you to use when possible.

Rain Brushes

This brush pack contains 8 brushes of different degrees of rain, which includes drizzle, moderate, pour, moderate+windy, drizzle+windy, and drizzle+misty.

Rain – Tear Drop Brushes

With the set are 280 rain/tear drop brushes, which range from single drops to completely randomized patterns. The detail ranges from cartoon-like droplets to the perfect tear.

Waterfall

Ever need waterfall brushes? Well, here’s a pack for you.

Water Reflection

The brushes made from a painting of the author, will be a great asset if it’s used correctly, just like the other sets.

Looks a bit complicated, but in fact all we need is some Layer Styles, basic vector shapes, and a bit of manual drawing. Let’s get into it!

Step 1

Start by creating a new file with size 512 x 512 px. Activate Rounded Rectangle Tool. On option bar, set its radius to 75 px. Click and drag to draw a rounded rectangle. Set its color to #5d5d5d.

Double click on the layer to open Layer Style dialog box. Add Gradient Overlay with default gradient, black to white, and reduce its Opacity to 76%.

Step 2

Press Ctrl + J to duplicate the layer shape. Click Edit > Free Transform or press Ctrl + T to perform transformation. From the option bar set its size to 98%.

In Layers panel, delete Layer Style by dragging fx icon onto the trash icon, which is at the bottom right of the Layers panel. Next, double click the layers’ thumbnail to bring up Layer Style dialog box. Add Inner Shadow and Gradient Overlay.

In the Gradient Overlay’s setting, set gradient’s Style to Angle. Click the gradient’s preview box to open gradient editor and use color combination of #8e8e8e, #a5a4a4, and #d8d8d8. Feel free to play around with each marker position, just make sure to set same color in the first and the last marker.

This is the result after adding Layer Styles.

Step 3

Create new layer. Fill it with Radial Gradient from white to black.

Hold Alt and drag vector mask from previous layer to current layer. The gradient is now fit inside the icon.

Open the Layer Style and change its blend mode to Screen.

Step 4

Draw a rounded rectangle inside the icon. Set its radius to 75px with color #2a2a2a.

Add 2 more circle shape (Choose Ellipse tool, then hold Shift and drag it). From the option bar, set path mode to Add to shape area.

Double click cloud’s layer and then add Inner Shadow, Bevel and Emboss, and Stroke.

Step 5

Duplicate the cloud’s layer by pressing Ctrl + J. Remove its Layer Style by dragging fx icon from its layer thumbnail onto trash icon. Resize it (Ctrl + T) to 89%.

Change shape’s color to #5d5d5d. Reorder each shape’s position until the small cloud size is proportional to the bigger cloud.

Double click cloud’s layer and add following Layer Styles.

For Gradient Overlay, make sure to use exact setting from Gradient Overlay in Step 2.

Here is what we have after adding Layer Styles to the small cloud.

Step 6: Add Metal Texture

Current design is very flat and too clean. Let’s add a subtle metal texture onto the surface. Create new layer. Click Edit > Fill and select Use: Black to fill the new layer with black.

Click Filter > Noise > Add Noise.

Click Filter > Blur > Radial Blur. Select Blur Method: Spin and Quality: Best.

This filter will spin the noise and creates a circular wave.

Step 7

Click Image > Adjustments > Level or press Ctrl + L. In the dialog box, drag black slider in the Output Levels to the center to lighten the circular wave.

Hold Alt and drag vector mask from the icon’s base layer to the current layer. The circular wave is now inside the icon.

Activate Path Selection tool and select cloud path that we created in Step 4. Press Ctrl + C to save it to clipboard. Press Ctrl + V to paste it onto the circular wave’s vector mask. Set its path mode to Subtract.

Finally, copy and paste smaller cloud path that we have created in Step 5. Set its path mode to Add to Shape.

Here’s the result. The circular wave is inside the icon’s surface.

Change the layer’s Blend Mode to Screen.

Step 8: Shadow

Create new layer and place behind all layers. Create an elliptical selection (using ellipse tool) under the icon. Fill selection with black.

Soften shadow using filter, Gaussian Blur. Click Filter > Blur > Gaussian Blur.

Duplicate shadow by pressing Ctrl + J. Add another Gaussian Blur, for this time use bigger Radius to get softer shadow. If the shadow is still too harsh, you can turn down its layer’s Opacity.

Final Result

This is the result of our tutorial. As you can see, the process of creating this icon is very easy. We just need to use some basic vector shapes and Layer Styles. I hope you enjoy this tutorial. If you have any question, feel free to ask!

Download PSD

Can’t achieve certain step? Here is the result’s PSD file for you to test and play with.

• iCloud Icon Tutorial PSD File

We will use layer styles, vector drawing, and some manual drawings to complete this interface. Let’s get into the creation process!

Required Resource

To follow this tutorial, you will need this free resource.

• Repeatable Pixel Pattern from PSDfreemium

Step 1: Making Background

Start by creating a new file with size 800×500 px. Draw a radial gradient from white to gray.

Step 2

Let’s darken the gradient by adding Adjustment Layer > Hue/Saturation and reduce Lightness setting.

Step 3

Create new layer and fill it with white. Click Filter > Noise > Add Noise. Set its blend mode to Multiply.

Step 4

Duplicate noise layer we have just created by pressing Ctrl + J. Activate move tool then press down arrow and right arrow once to move it 1 px down and right. Press Ctrl + I to invert its color and set its blend mode to Screen. Here, we have a nice texture.

Step 5

Select both noise layers and then hit Ctrl + G to put it inside a group. Reduce its Opacity to 50%.

Step 6: Video Player Basic Shape

Draw a rectangle with color: #151d25.

Add Layer Styles: Gradient Overlay and Stroke.

Here’s the result after adding Layer Styles.

Step 7: Title Bar

Draw a rectangle shape on top of the main interface. Set its color to #272e36. We will use this rectangle for title bar.

Add Layer Styles: Drop Shadow and Gradient Overlay.

Step 8

Zoom closer to left side of the rectangle. Activate pencil tool and set its brush size to 1 px. Draw some lines as a highlight.

Step 9

Draw another highlight on upper part of the title bar. Create new layer and then draw 1 px white line. Erase both ends using soft eraser tool. Reduce its Opacity to 10%.

Step 10

Repeat previous process on right side of the title bar.

Step 11

Here’s what we have in 100% magnification. As you can see, the highlight is very subtle. But, the interface is not so flat anymore.

Step 12: Minimum, Maximum, and Close Button

Draw a rectangle on right side of title bar. Use color #5c3936. This will be background for close button.

Add Layer Style: Gradient Overlay.

Step 13

Add close symbol made from two overlapping rectangle paths in mode, Add to Shape.

Add Layer Style: Outer Glow.

This is the result after we added Outer Glow onto the close symbol.

Step 14

Repeat this process to add maximize and minimize symbol.

Step 15

Let’s add a separator between each symbol. Create new layer, draw a 1 px black line and reduce its Opacity to 30%. Next to it, draw another 1 px black line and reduce its layer Opacity to 70%. Once again, this time draw 1 px white line with Opacity 5%.

This is what we have in 100% size. Now, we have a nice inset line and adding depth into the interface.

Step 16

Put those lines in a separate group layer by selecting them and hit Ctrl + G. Hold Alt and drag group to duplicate it. Put the lines between each symbol.

Step 17

Add video title on the title bar. Add Layer Styles: Drop Shadow and Gradient Overlay. These Layer Styles will add metallic effect onto the text.

Step 18: Screen

Draw a rectangle for screen area. Use #272e36 for its color.

Add Layer Styles: Drop Shadow and Gradient Overlay.

Step 19

Create new layer and then draw highlight using tool pencil with 1 px brush.

Step 20

Again, draw another highlight on upper side of the screen area.

Step 21

Draw smaller rectangle with color #252626.

Add Layer Styles: Drop Shadow, Inner Shadow, and Gradient Overlay.

This is the result after adding Layer Styles.

Step 22: Progress Bar

Draw a rectangle with color #272e36 under the screen.

Add Layer Styles: Drop Shadow and Gradient Overlay.

Step 23

Just like what we did before, draw some highlights on the rectangle using 1 px pencil tool.

Step 24

Here’s what we have in 100% magnification.

Step 25

Draw smaller rectangle with color #313131.

Add Layer Styles: Inner Shadow, Inner Glow, and Gradient Overlay.

This is what we have.

Step 26

Duplicate rectangle that we have just created by pressing Ctrl + J. Change its color to #357ffa.

Change Layer Styles’ settings.

Using these settings, this is what we have now.

Step 27

Activate Direct Selection tool and then select points on its left side. Press Shift + Left Arrow a few times to move selected points.

Step 28

Add total time track info on top of the loading bar.

Step 29

Draw a black rectangle covering the progress and then reduce its Opacity to 10%.

Below, you can see subtle difference on progress bar lighting before and after adding the black rectangle.

Step 30

Draw highlights on the progress bar using 1 px pencil tool.

This is what we see in 100% magnification.

Step 31: Buttons

Let’s draw another rectangle with color #272e36. This time we will use it to place some controller buttons.

Add Layer Styles: Drop Shadow and Gradient Overlay.

Step 32

Add some highlights on left side of the rectangle.

Step 33

Use basic shape tool to draw some buttons.

Step 34: Shadow

Hold Ctrl and click basic shape of the interface to create a new selection based on its shape. Create new layer and place it behind the video player. Fill selection with black. Remove selection by pressing Ctrl + D. Soften the shadow by applying Gaussian Blur, click Filter > Blur > Gaussian Blur.

Step 35: Add Reflection

Duplicate the interface basic shape and reduce its Fill to 0%. Place it on top of the screen. Draw a polygon on left side the rectangle and set its mode to subtract.

Add Layer Style: Gradient Overlay.

Step 36: Subtle Pattern on Screen

Currently, the screen appears very flat. Select main screen area and fill it with any color. Set its Fill to 0%.

Grab a nice pixel pattern from PSDfreemium. Use one of the available settings on Layer Style: Pattern Overlay.

Make sure the pattern is very subtle by setting its Opacity to only 1%.

Step 37

Finally, activate brush tool. Set brush hardness to 0% and set its Opacity to very low, 2 or 3%. Paint a soft glow on center of the screen.

Step 38: Final Result

This is the result of tutorial. I hope you learned some new techniques and had some fun while following it.

Download PSD

Can’t achieve certain step? Here is the result’s PSD file for you to test and play with.

• Sleek Video Player Interface Tutorial PSD File

We will use lots of layer styles and vector drawing, and may be some passion to complete this sleek product. Let’s get started!

Step 1: iPad Basic Shape

Start by creating a new file with size 1500×800 px. Activate rounded rectangle tool. Set its mode to shape with radius 15 px and color: #f5f5f5.

Add Layer Style Inner Glow and Stroke.

Step 2: Screen

Draw a rectangle inside the iPad.

Add Layer Style Stroke.

Step 3

Let’s create a simple image for the screen content. Create new layer and make sure it is on top of the screen layer. Paint some colors using a soft brush. Convert layer to Clipping mask by pressing Ctrl/Cmd + Alt + G. Everything you paint is now inside the screen.

Step 4: Home Button

Draw an ellipse on lower part of the iPad. Set its Fill to 0%.

Add Layer Style Inner Shadow, Bevel and Emboss, and Gradient Overlay.

Step 5

In the center of the button, draw a rounded rectangle. Set its Fill to 0%. Add Layer Style Stroke.

Step 6: Camera

Draw a small black on top part of the iPad for its camera.

Step 7: Dock

Draw a rectangle covering on lower part of the screen. Set its color to #b1a9a9. Add Layer Style.

Step 8

Hit Ctrl/Cmd + T to perform transformation. Right click and choose Perspective.

Step 9

Pull top corner inward until we get a dock shape.

Step 10

Draw white shape as seen below. Hit Ctrl/Cmd + Alt + G to convert it to Clipping Mask. Reduce its opacity to 50%.

This shape will become a reflection on the dock.

Step 11

Grab a nice iPhone icons set, Aquaticus from marcelomarfil. Place four of them on the screen.

Step 12

Place the icons on a group named icons. Select all icon layers by clicking on the first icon then Shift + click the last icon. Activate move tool. From the option bar click icon Distribute Horizontal Center and Align Vertical Center. You will have a nice alignment and distributed icons on the screen.

Step 13

Repeat previous step to add more icons on screen and on dock.

Step 14

Select icon layers on dock. Hit Ctrl/Cmd + E to merge them into one layer. Hit Ctrl/Cmd + T to perform transformation. Right click and choose Flip Vertical.

Step 15

Add layer mask. Draw linear gradient from white to black until the reflection fades.

Step 16: Screen Reflection

Use lasso polygon tool to create a triangular selection on top right corner of the screen. Fill selection with white.

Step 17

Add layer mask. Draw linear gradient from white to black until the reflection on the screen fades away. Put the reflection layer into a group and name it Screen Reflection.

Step 18

Ctrl/Cmd + click iPad layer to create a selection based on its shape. Add layer mask onto the group. This way, the screen reflection is inside the screen.

Step 19: Smart Cover

Draw following shape. Use #6ebced for its color.

Add Layer Styles Gradient Overlay.

Step 20

Above smart cover draw a rounded rectangle shape and set its Fill to 0%.

Add Bevel and Emboss.

Step 21

Duplicate the shape.

Step 22

Hit Ctrl/Cmd + T to perform transformation. Right click and choose Perspective. Pull top right corner until the shape match smart cover perspective.

Step 23

Draw a rounded rectangle with color: #82858a. Perform perspective transformation again until we have outer side of the smart cover.

Step 24

Add Layer Styles Bevel and Emboss and Gradient Overlay.

Step 26

Draw another rounded rectangle and place it inside shape we have just created.

Step 27

Add Layer Style Bevel and Emboss and set its Fill to 0%.

Step 28

Hit Ctrl/Cmd + Alt + G to convert shape into clipping mask and place the effect inside the cover.

Step 29: Hinges

Draw a rectangle on left side of the cover. Set its color to #6ebced.

Add Gradient Overlay.

Step 30

Draw a smaller rectangle behind previous shape with color: #e6e6e6.

Add Layer Style Gradient Overlay to add three dimensional appearances onto the shape.

Step 31: Shadow

Hold Ctrl/Cmd then click the iPad basic shape layer to create a selection based on its shape. Create new layer and place it under smart cover. Paint a soft shadow on the screen surface using big soft brush.

Step 32

Do not remove the selection. Next, draw a soft shadow with low opacity brush on lower side of the iPad. This will be a soft cast shadow from the floor.

Step 33

Create new layer and place it under all layers. Paint darker shadow under the iPad using a big soft brush. Reduce its Opacity to 50%.

Step 34

Draw bigger and softer shadow. Reduce its opacity to 5%.

Step 35

Now, set your brush to smaller size but keep its hardness to 0% to maintain its softness. Draw darker shadow right under the iPad. Set its opacity to 50%.

Step 36

Zoom in to see smart cover closer. Draw a dark shadow right under the smart cover.

Step 37

Draw shadow on the floor behind smart cover.

This is what the shadow looks like if we hide the smart cover.

Step 38: Final Result

This is the result of our tutorial. I hope you learn new technique and have some fun following this tutorial. Thank you for reading. If you have any questions feel free to ask.

Download PSD

Can’t achieve certain step? Here is the result’s PSD file for you to test and play with.

• iPad 2 Tutorial PSD File

Yes, in the following round-up we have set up 28 rare and professional Photoshop tutorials on creating extremely appealing text effects. So don’t wait anymore, master these text effects and show how kick-ass your works are to your family, colleague, client, anyone!

If you’re interested to check out our collections of 150+ text effect Photoshop tutorials, here are them for you!

• Glossy Emblem Text Effects with Photoshop
• 80 Best Photoshop Text Effects Tutorials, Part III
• 50+ Great Photoshop Text Effect Tutorials, Part II
• 22 Best Photoshop Text Effect Tutorials

28 New Text Effect Tutorials

Create a Yummy Cookies Text Effect in Photoshop
Create a delicious text effect with just some simple steps and tricks!

Create an Eye Catching 3D Tech Style
Design your text in a new and techno way, making it more impressive and giving it a sophisticated look.

Create an Extremely Glossy Text Effect
Add a little glamour to your text, making it appropriate even for a glossy magazine.

Creating a Tron Legacy Text Effect
Make a ‘Tron’-like text effect that will surprise everybody and even confusing some of them.

Create an Awesome 3D Text Effect using Photoshop
Learn the basic ways of text manipulation together with this simple tutorial in which you will create an amazing 3D text.

Create a Festive Ornamental Text Effect
Create an impressive 3D effect for your text together with this amazing tutorial!

Logo Design Process and Walk Through of Design
Make a beautiful nature-inspired text effect that will look awesome and unusual.

Create an Ice Cream Type Treatment
Here you will create a tasty text effect, yummy!

Create a Burning Text Effect
Make a powerful and intensive burning text that will surely grab all the attention.

Create a Dawn of War Style Effect
With some intuition and knowledge, you’ll be able to create a beautiful and impressive text with a look as it was the witness of a true war.

Create Typographhy Poster Enigma
Design a text effect with mysterious air and great surroundings, probably an impressive text effect that can attract people’s attention.

Create a 3D Arcade Text Effect Using Photoshop
In the following tutorial you will be guided to create a 3D arcade text effect using Photoshop and a little bit of Illustrator.

Design an Elegant Glassy 3D Typography in Photoshop
With a cold and elegant look, this text effect is great for a techno style project!

Text on Fire Effect in Photoshop
Make another version of the fire text with clearer look.

Make a Grungy Metal Text Effect
Great for graphics with futuristic look, this text effect may be the key in creating a perfect futuristic feeling for your graphic.

Create an Inception Poster Repousse
Such an effect may look hard at the first place to make, but it’s easy and the impact done on the viewer is greater than you would expect!

Create a Take Break 3D Text Composition
Control an amazing energy splash with this tutorial which teaches you tricks to create such a groundbreaking text effect.

Woodcut Typographic Illustration in Photoshop
Create a very unusual yet artistic text effect with this quality tutorial!

Make a Cracked 3D Stone Text Effect in Photoshop
Design this realistic text effect that will surely amazes everybody, as it looks like it’s blending with the entire world, making it more interesting and original.

Create a Revolution Artwork Text Effect
Lighten your works using this awesome text effect that draws all the attention upon it and glows like a great star in a dark sky!

Creating of a Pipe Typography in Photoshop
Create an unusual and interesting text effect using simple pipes and drains. I’m impressed by its funny yet realistic look and feeling.

Create a Harry Potter Style Text Effect
Make a Harry Potter text effect in just few steps! Here you will find out tips and tricks on making it.

Making of a Chrome Emblem
Shiny and interesting, this text effect allows you to create some beautiful car logotypes for your creation.

Design a Super Glossy 3D Typography Effect
A text effect that has an artistic look with realistic detail. Impressed by its shiny and glossy effect.

Make a Modern 3D Text Effect
Make an interesting and modern look 3D text that is worth using in different works.

Create a Retro Sci-Fi Movie Poster in Photoshop
A text effect with sci-fi feel that can create a perfect mood for sci-fi related poster.

Design a Skin Textured Typography Scene
It may look a little bit scary at the first glance, but this is a worthy text effect thanks to its unusual and charming look.

Making of a Cool Text Effect Puppet Warp Tool
Manipulate the ropes as you want to create amazing and realistic text effect that definitely looks awesome and attractive.

But how well do you know about Photoshop? Sometimes we’re wondering why certain web designer can design a website layout with extremely heavy graphics in 5 days, while we need around 10 days to complete that kind of design. It’s probably not about how fast you can click, it’s about how well you know about Photoshop, how you gonna unlock its full potential to boost your productivity.

We want you to know how to unlock its full potential. Yes, that’s why we created this post, to provide you 10 extremely useful Photoshop tips to boost your design speed. There can be shortcut, feature or setting you don’t know about, but not anymore. With this article you gonna learn them all, and you will design faster, and faster.

Note: Shortcut keys mentioned in this article are in Windows Photoshop format. If you are using Mac, be sure to know that Ctrl = Cmd (Command) and Alt = Opt (Option).

10. Undo, More Undo Please

I totally believe that we designer are very addictive to undo something, even until when we made a mistake on sketching, we tend to ‘undo’ it.

Well as you might know by pressing Ctrl + Z in Photoshop you can undo the previous action you made, but when you press the same key combination again, it will redo the previous action. This is quite unnatural and troublesome as you always need to undo multiple times to get to the state you want.

Believe it or not, Photoshop has a specific button for multiple undo, and it is Alt + Ctrl + Z. Yes, by using this key combination you can undo multiple times, according to the value of History States you set in Edit > Preference > Performance.

If you’re used to common Undo’s key combination which is Ctrl + Z, you can simply press Ctrl + Shift + Alt + K to access Keyboard Shortcut panel and change Undo’s key combination under the Edit section to Ctrl + Z.

9. Sampling Color, anywhere!

Stumbled upon a nicely designed website and wondering which exact colors is it using? This happens very often when I’m seeking inspiration during the time I’m doing site layout in Photoshop. For me I will launch a color picker, pick the color and get its hex number, then click on the color palette in Photoshop, then input the hex number then get the color, pretty annoying isn’t it?

Well you don’t really need to suffer like that, you can actually just click on Eyedropper tool or pressing I to activate it, then click on the Photoshop’s work screen and drag the Eyedropper icon to anywhere on the monitor screen to get the color you want. Yeah, it’s really that easy.

8. Flexible Guide

Tip #8 is actually combination of 2 tips, I hope you don’t mind about getting more tips. As web designer we have to deal a lot with guide to position an element correctly, in other words is pixel perfect.

How do you create a guide? Click on View, New Guide then decide it’s horizontal or vertical guide, input its position and click Enter? Alright, you can save these works by just pressing Ctrl + R to activate the Ruler tool, click on the tool and drag it down to create a horizontal guide, or vice versa.

Besides instant guide creation, here’s another useful tip for you. While dragging a guide with Move tool which can be activated using V key, press and hold Alt key to change the horizontal guide to vertical guide, or vice versa. Now you can probably consider yourself as professional on using guide.

7. Fun Layer Style Cloning

Layer styles are very entertaining when you can just apply them to make, let’s say, a social media icon looks pretty charming and unique, but it will be very tiring if you want to apply same layer styles to all social media icons which usually come in multiple pieces.

Have you ever realized that there’s an fx icon beside your layer? Well everything exists for a reason, if you press Alt and drag the fx icon to another layer, it will copy first layer’s styles to the one you dragged to, convenient isn’t it?

Also if you are interested about the common use of that fx icon, it allows you to move a layer’s styles to another and all you need to do is simply drag the icon to another layer without pressing Alt key.

6. Element Centering Made Easy

In order to achieve a pixel perfect design, we oftenly have to position element to exactly where it should be. This seems easy as you can just create some guides and snap the element to those guides, but it will be daunting if you want to absolute center an element in certain area, which requires a lot of guides, measurement and focus.

In fact you have a way to make this entire process a lot more easier, click on the element’s layer which you want to absolute center, then press Ctrl + A to select the entire document. After that, fire the Move tool and you will see some icons beside the option, Show Transform Controls. Click on the 2nd icon to vertical center the element, then click on 5th icon to horizontal center the element, there you go, an absolute centered element.

You can not only absolute center the element in entire document’s area, but also absolute center it in certain area. Let’s say I want to absolute center an element in footer area, I can simply select the footer area by using the Selection tool which can be activated by pressing M key, then absolute center the element in that specific area.

You can study other alignment options beside the Show Transform Controls option, they are very useful for aligning your elements in a wide range of situations.

5. View Selection, One At A Time

Often in designing a layout you need to check how an element looks exactly by its own or by few elements, for example in website layout below, I want to check slider’s buttons to confirm that they do not have transparency so they look exactly the same with or without slider’s image.

In past I have to turn off the visibility of slider image’s layer, slider background’s layer and even content’s background layer, but now I can just simply hold down the Alt key, then click on the ‘eye’ icon beside the button group to turn off all layers’ visibility so that I only view those buttons. After I checked them, I can just repeat the trick again to bring all layers’ visbilibity back.

This trick is also extremely useful while it comes to image slicing. You want to slice slider’s button without any other element like slider image, so you can use this trick to turn off all layer’s visibility to just slice the button, then repeat the trick to recover all layer’s visibility so it saves a lot of time wasted on turn on and off layers’ visibility.

4. Customize Font’s Tracking, Anytime

This particular tip shows you how to increase the font’s tracking in certain part of the type easily, so it might only be used on certain specific situation like logo or button creation, but it’s a professional tip that can save lots of time on finding fonts with suitable typography for your logo or button creation.

Alright, let’s say I want to decrease the tracking of the type, ’360′ so my logo’s type looks unique that visitor remembers it easier. I can select ‘POLO360′ by using Type tool which can be activated by pressing T key, then hold down the Alt and press < button to start decreasing the type’s tracking, which will bring the result above.

You can use this trick to tackle tracking issue of some artistic fonts, so there’s no worries about tracking next time you want to find graphical fonts for your logo creation!

3. Instant Layer Selection = Win

Layout design is an exhausting job as we have to tackle lots of issues such as typography, spacing and graphic, but it will be overwhelming if we want to find a specific element’s layer from hundreds of layers.

Let this trick makes your designer’s life easier. Activate the Move tool using V key and hold down the Ctrl key, then click on the element and you will automatically select the element’s layer. It’s really that simple but keep in mind that if you put elements into a group, then by using the same trick you will be selecting the group’s folder that contains the element you clicked, as shown above.

2. Smart Object For Smart Designer

Just as its name, Smart Object makes your editing smarter by carrying out 2 primary functions: perform nondestructive transforms and perform filtering. This feature comes in very handy especially when you’re producing a site layout with heavy graphics like stock photos, social media icons and UI kits, and all you need to do is right click a layer, then click ‘Convert to Smart Object’ to enjoy its benefits.

The first function says that once a layer is converted into a Smart Object, you can transform it anyway you want without losing its original quality. In our case we want to make the image slider smaller so we convert image slider’s layers to Smart Object and transformed it into something smaller.

Ouch, it’s just too small so I decided to change it back.

Looks like everything’s okay and nothing happened right? Below is the result if you applied a backward transformation without converting layer to Smart Object.

So you can probably see the difference here, especially slider’s buttons part. The backward transformation without Smart Object applied on layers makes the slider and slider’s buttons lose their quality. So by converting a layer to Smart Object, you can transform it to any smaller size you want but once you regretted about your decision, you can change it back without losing quality.

Another benefit by converting layer into Smart Object is once you applied filter on a Smart Object, a filter’s layer will appear under the Smart Object’s layer so you can disable filter easier by just turn off the visibility of the filter’s layer, and that’s called nondestructive filtering, great time saver for your project.

1. A Snapshot Of Beautiful Past

Now you learned how to undo multiple times, copy layer styles, faster layer selection and using Smart object these great time saving tips. Well, these are really handy skills that greatly boosts your productivity but how about after 2 hour’s work, you regretted your editing and decided to start from the middle? Redo it completely will be very exhausting and boring even you applied all killer tips you learned before, so that’s when Snapshot kicks in.

Snapshot allows you to create a temporary copy of any state of your editing so when you have trouble on improving your design and decided to go back, you can simply click on a snapshot to bring you back to the state you desired. To take a snapshot, you just have to open History palette, and click on the 2nd icon you see on the bottom of the palette.

There are also some useful features for snapshot like you can take multiple snapshots so you have more choices and you can name them so you remember them easier. Ultimately you can also use these snapshots to compare different effects you created for your design.

However, be sure to remember that once you closed the document, snapshots will be deleted instantly so if you want to keep those states, you can click on each snapshot and save the document as another file.

Reflection

You’ve come to the end of the article, great job. By this time you should got enough time-saving killer tips to boost your design speed, but always remember that learning is the best way for you to know more about your Photoshop, thus increasing your productivity. So keep learning more, and you will become a more competitive web designer of all time.

Well we’ve shared our best, how about you? If you don’t mind, please share your Photoshop killer tips to let us know the better way to use Photoshop, thanks for your generosity!

Today we will create a TRON wallpaper in Photoshop using stock photos and vectors. We will give you a precise guidance on how to do it and why certain method is better. You will get an in-depth comprehension of what you are doing. Buckle up for digital dream!

You will learn how to:

• Analyze your design from out-of-the-box point of views
• Create structured designs, based on hidden or related elements in your composition
• Use shortcuts for a faster work flow
• Make complex selections and cutouts via Channels
• Effectively use general tools
• Add perspective to your design
• Combine vectors with pixels
• Create light effects
• Use blending modes
• Use layer styles

Difficulty: Beginner – Intermediate. Completion time: 1 hour. Tools: Photoshop CS3, Illustrator CS3 optional.

Resources:

• Model 1 by Marcus J. Ranum
• Model 2 by Marcus J. Ranum
• Tech Vector Pack 3 by designious.com
• V5 Prophit font by dafont.com

NOTE: To install the font, extract on Desktop the .zip archive containing the font, then copy them. Go to C:\WINDOWS\Fonts\ directory and paste them in.

Why can’t I just extract them directly to the Fonts folder?

Your operating system won’t allow your archiver to modify or add any file within the C:\WINDOWS\ directory, so that’s why you need to do this manually. If you have opened Photoshop, restart it, or else you won’t be able to see the newly installed font.

After I chose my resources, I started sketching up some lines based on the model. Below is a schematic of the inspiration sources for the glowing lines on the body: pose, muscles, apparel, body shape, weight distribution and bones.

To enhance a model’s pose or body features, it’s not enough to just throw some random lines on.

Everything must have a source, be it shown or hidden. Keep in mind that my sketch is only one of the infinite possibilities you have, I encourage you to experiment.

Let’s begin!

Step 1

Go to File > New, and set it to 1920x1080px in RGB color mode at 72 dpi.

Step 2

Open the Veteran_of_the_Psychic_Wars_11_by_mjranum_stock.jpg. In the Layers palette, F7 double-click the lock near the layer thumb. This is compulsory if we want to edit the image via Channels. You should now have a "Layer 0".

Step 3

Go to Layer > Duplicate Layer, CTRL+J. Now go to Filter > Other > High Pass. Use a 5px setting and hit OK. In the Layers palette, F7, set Blending mode to Overlay.

This will make the image more clear and it will allow you to make a more precise selection of the hair.

Step 4

Go to Layer > Merge Visible, CTRL+SHIFT+E, then go to Layer > Duplicate Layer, CTRL+J. Set Blending mode of the copied layer to Screen, then duplicate it two more times. Now we have a nice contrast between the model and the background.

Step 5

Go to the Channels window Window > Channels and select the "Green" channel. Right-click it and select "Duplicate channel".

The "Green" channel provides the highest contrast of all the channels. We duplicate it because we need dummy channel to work on to further improve the contrast.

Step 6

Go to Image > Adjustments > Curves, CTRL+M and shape the curve as shown below. The lower half will darken the shadows and the upper half will lighten the highlights. Do this twice.

Step 7

Go to Layer > Adjustments > Levels and use the settings below.

Step 8

Grab the Brush Tool, B, set Hardness to 100% and cover with black the interior white spots in the hair, the face and the rest of the body.

We don’t need any details in the channel, just the outline of the model.

Step 9

Grab the Dodge Tool, O, set it on Highlights and lighten any extra grays in the image.

Step 10

CTRL+click the "Green copy" channel thumb, go to the Layers palette, F7, Go to Select > Inverse, CTRL+SHIFT+I select the bottom-most layer and copy it, CTRL+C.

CTRL+clicking a thumbnail whether it’s channel or layer loads a selection of the contour of the clicked layer/channel.

Step 11

Go to Window > Untitled-1.psd our document and paste it, CTRL+V. Go to Edit > Free Transform, CTRL+T and resize it to fit the canvas, like below. Hold the SHIFT key to preserve its proportions. Hit Enter to exit Free Transform mode. To clear the clothing curls, use the Clone Stamp Tool, S: use ALT+click to pick source, then click on the curl.

Do the same for the sword in the "model 2" picture, but use the Path Tool, P to cut it.

Step 12

Open the "Tech Vector Pack 3" .eps file. When prompted to input a file size, type in about 3000px for width. Hit OK.

For Illustrator, you simply open it in vector format. Photoshop can open .eps Illustrator 8 files, but in raster format. You can however open it in any size you want – the .eps file is vector!

Step 13

Grab the Rectangular Marquee Tool, M, select a round tech shape click-drag to create the selection rectangle, copy it, CTRL+C, go back to our document Window > Untitled-1.psd and paste it, CTRL+V.

Step 14

Go back to the vector pack file Window > designious tech shapes 4. eps, copy another shape and paste it into our document, like in Step 13.

Step 15

Grab the Selection Tool, V, check the "Auto Selection" box and click the first tech shape pasted in and duplicate it, CTRL+J. Now go to Edit > Free Transform, CTRL+T hold the CTRL key and click-drag the the top left corner, like below. Do the same for the top right corner. Hit Enter to exit Free Transform mode.

Step 16

Duplicate the first shape (original one) and place the copies as shown below. Grab the Path Tool, P, set it on Shapes and draw each glow line on the body, based in the sketch.

In the Layers palette, select all these shapes and hit CTRL+E to merge them.

Step 17

Grab the Line Tool, U, set it to Shape Layers and 7 px Width, draw an oblique line, then hold SHIFT key. Now change the line to "Add to shape area (+)" and draw a horizontal line. Hold SHIFT key to make it perfectly horizontal.

Step 18

Grab the Horizontal Type Tool, T, click-drag to create a type box and input a random text. Set the font to "V5 Prophit".

Step 19

Select the "Shape 1" layer and go to Layer > Duplicate Layer, CTRL+J. Place several copies like below. Do the same for the text. To change the type input, double-click the layer thumb in the Layers palette.

Step 20

Go to Layer > New Fill Layer > Solid color. Select a dark blue color and hit CTRL+SHIFT+[ to send it to back.

This will be a nice background for our image.

Step 21

Select the large shape, and click the "fx" button in the Layers palette, F7. Select "Blending Options". Use the settings below.

Step 22

ALT+click the "fx" icon that appeared near the layer thumb and click-drag it to the other round shapes. You can recognize them easily, they aren’t named "Shape …" and don’t have a "T" on the thumb.

Step 23

Create a new layer above it (select the layer and hit CTRL+SHIFT+N to create a new layer, then select both layers and hit CTRL+E (merge layers)). For the selected shapes, go to Filter > Blur > Gaussian Blur. Use various settings from 2 to 6px, as you see fit.

To add more perspective, add more tech shapes over them.

Step 24

Grab the Selection Tool, V, select the small shape and lower its Opacity. 29% will do nicely.

Do the same for the other blurred shapes, but vary the Opacity a bit.

Step 25

Create a new layer, CTRL+SHIFT+N, Grab the Elliptical Marquee Tool, M, set Feather to 50 px and make a selection like below.

Step 26

Grab the Paint Bucket Tool, G, ALT+click one of the tech shapes to pick the color and fill the selection. In the Layers palette, F7, set the layer’s blending mode to Overlay. Do the same for the bottom side.

Step 27

Create a new layer, CTRL+SHIFT+N, grab the Elliptical Marquee Tool, M, set Feather to 30 px and make a selection like below. Grab the Paint Bucket Tool, G and fill the selection.

Step 28

Repeat Step 28 for the shape behind the model.

Step 29

Grab the Selection Tool, V and click the model. Now go to Layer > New Adjustment Layer > Brightness/Contrast and Black & White. For each, use the settings shown below. For the Black & White layer, set Opacity to 70%.

I prefer using Black & White over Hue/Saturation because it also provides a tones control, not just a desaturation.

Step 30

Create a new layer, CTRL+SHIFT+N and ALT+click between it and the adjustment layer beneath it. Set Blending mode to "Color Dodge".

Step 31

Grab the Brush Tool, B, hit "3" to set the brush Opacity to 30%, set Hardness to 0%, ALT+click on the teal tech shape and paint over the body highlights, part of the hair and face.

Step 32

Change the brush Opacity to 70% and paint over a few highlights, but in smaller areas.

Step 33

In the Layers palette, F7, select the top-most layer and go to Select > All, CTRL+A, then hit CTRL+SHIFT+C to copy a merged version of the document and hit CTRL+V to paste it.

Step 34 – Last step

Go to Filter > Sharpen > Unsharp Mask. Use the settings below or feel free to use your own. Don’t overdo it though, else the image will look too sharp.

Here’s the final view of what you’ll be getting assume you followed through the entire tutorial correctly.

Downloads (PSD, Wallpaper)

Together with the tutorial, here are couple of files created for you.

• Tron tutorial PSD file.
• Tron Wallpaper- available in 1280x800px, 1280x1024px, 1920x1080px and 1680x1050px.

(bellefoong)

This is why we took the trouble to gather the best resource sites on the cyberspace for brushes to facilitate your pursuit for high-quality brushes. We hope these resource sites will bring out the best in you in your future designing undertakings. In no particular order, here are some of the top Photoshop brush sites available!

WOW Brushes
A simplistic site with some good brushes for downloads. There are also links to other pretty useful Photoshop resources sites.

BrushLovers
Yet another resource site with a straightforward and effective rating system for the sets. Visitors can also check out the latest, most popular or highest rated brushes if they have no particular designs in mind.

Photoshop Mosaic
As the title suggests, this site previews the various brushes in small square tiles in a mosaic-like manner for easy viewing and navigation.

Photoshop Roadmap
A huge collection of unique brush sets arranged and compiled in separate posts.

Brushking
Beautiful and professional-looking brushes categorized according to themes such that it’s easy to find what you want specifically.

Q Brushes
With a users’ 5-star rating system on each brush set, a neat classification of brush types and even a tag cloud for all the contents, this awesome site serves as a resoureful station to gather quality brushes for your design needs.

PS Brushes
PS Brushes showcase detailed brushes within each set. Such easy referencing and its wide collection of brushes enable designers to find exactly what they want.

Chez Plumeau
This one has lots of categories of brushes designs, so there’s no worries about finding the specific themes you need.

myPhotoshopBrushes
A valuable search menu allows for the filtering of brushes according to categories and sorting them according to date, rating and number of downloads. Each set also comes with a short description of the brush and a rating system to boot.

BrushDirectory
A simple brushes resource site, all arranged in easy-to-navigate category bars on every page.

Free Brushes
A large showcase of aesthetically pleasing brushes dating back to 2007. Comments posted by users of each individual brushes allow others to evaluate the quality of the brushes before downloading them.

Fbrushes
With over 6,500 high quality and professional-looking brushes to choose from, you’ll be spoilt for choice in here.

Brusheezy
The brushes here can be specifically filtered for your photoshop version, as well as sorted according to popularity, ratings and date of posting.

Brushes Download
This clutter-free brushes site offers a wide selection of different styles of brushes to download from.

Colorburned
Apart from offering various distinctive brushes, Colorburned provides thorough descriptions for every set of brushes they post. This awesome site even has short video guides for some of their brush sets to demonstrate how the brushes look like or how they can be applied.

Today, we want to show you that now only your website can’t go too wrong, it can be eye-catching, even if you a novice Photoshop user. Here’s a list of 40 beautiful and professionally looking web layout in Photoshop PSD file. Hope this cuts your journey to your ideal websites, to a nearer distance.

Here are more Photoshop and template related post we’ve published:

• Photoshop PSD For Designers, Part I
• Photoshop PSD For Designers, Part II
• HTML Newsletter Templates – Best of

Polo360 Download

Professional Business Download

6R Wooden Portfolio Download

Appswizards Download

Bizsolutions Download

ShopStar Download

Box & Cube Download

Celeste Download

Corporatix Download

Crisp Presentation Download

Complexity Download

Business Company Download

Creative Studio Download

Design Tree Download

Education Website Download

One Page Portfolio Download

Herbal Treats Download

Insurance Company Download

IT Technologies Download

Owire Download

Magnifico Download

Memostra Download

Dellifolio Download

Minimalist Website Download

My Resort Download

Summer of love Download

Nature Tour Download

New Fresh Download

Open Mint Download

Sifiso Download

Sleeko Download

Dark iPhone Download

Small Cellphone Download

Yogurt Shoppe Download

Web Source Download

Paper Clip Download

Smart Investors Download

Ecommerce Download

Creative portfolio Download

Smoking is damaging to health they say, indeed, but with Photoshop who needs real smoke? Especially when it can be created on screen, with few clicks! Today, we are going to take you for a ride to the beautiful world of smoke effects created on Photoshop by showcasing some of the best tutorials around to create amazing smoke effects. And that’s not all, there’s a cool bonus for you too :)

Below the promised showcase of awesome smoke effect Photoshop tutorials.

Create Smoke Text
Mixing type and a smoke image to create a really nice abstract wallpaper.

Smoke Effect
How to create smoke effect in 30 seconds.

Manipulate Smoke to Create Hyper-Real Images
Learn to apply the Warp Tool effectively and a few other tricks to make smoke look like a skull.

Creating Smoke Like Effects
How to create subtle smoke-like effect.

Smoke Fading Effect
Smoking hot girl with smoke fading effect.

Creating a Stunning Digital Smoke Effect
How to easily create digital abstract smoke using both Illustrator and Photoshop.

Photoshop Smoke Tutorial

Smokin Woman
How to create one smokin’ woman using a some stock photos.

Smokin’ Hot Babe Tutorial

Adobe Photoshop Smoke Tutorial
Smoke effect in3 simple steps.

Abstract Smoke Art
Awesome smoke effect tutorial using dSLR and Photoshop.

Creating Smoke

Quick smoke tutorial

Smoke Type in Photoshop in 10 Steps
How to create a smoke typography effect playing with some brushes and adjustment layers.

Creating realistic smoke: Photoshop effect

Creating Smoke in Photoshop

Surreal Atmospheric Phone Booth Scenery

Smokey Typography
Learn how to create cool smokey typography in 12 simple steps.

Coldplay Style Smoke Poster
How to create a portrait based on the style of the latest Coldplay / Apple Ad featuring “Viva la Vida” from Coldplay.

Bonus: Smoke Brushes

We’ve also included some amazing sets of freely downland-able smoke brush sets for you. They are completely free to download and can be used along with Photoshop to create those amazing and awesome smoke effects as you saw above.

Real Smoke Photoshop Brushes

Particle Smoke Photoshop Brushes

Smoke Effects Photoshop Brushes

High Resolution Photoshop Smoke Brushes

21 Awesome Smoke Brushes

Revnart Smoke Brushes

Free Smoke Brushes

Twirl Smoke Brushes

Abstract Glow Smoke Brushes

I’ve been taking photos for quite some time now, and the truth of the matter is that people are simply drawn to that antique, vintage touch. Therefore, I advise you to apply some of the tutorials and use some of the great Photoshop actions we have for you.

Below are great tutorials that will help make any photo look old and vintage. As well as some free and helpful textures and Photoshop actions just for you.

Photoshop Tutorials

The Aging Photo

How to make a crisp digital photograph look like it was taken decades ago.

Create An Aging (Old Photo Effect) in Photoshop

How do we make an aging (old photo) effect to our photographs using Photoshop.

Vintage Grunge Tutorial

This is a tutorial for those of you who love the sepia, vintage, washed out look but don’t know how to achieve it.

Old Photo, Vintage Effect

This is step by step Photoshop tutorial that teaches you how to create a vintage effect for your photo using simple tools, filters, levels and layer styles.

Aging photos – quick and simple

Create aging photo on the fly with Filter Forge plugin.

Photoshop Elements: Photochrom Vintage Postcard

Turn your travel photos into vintage postcards. This technique works best on colorful photos that have good contrast and lots of detail, especially architectural detail.

Create A Vintage Polaroid Effect

This tutorial will show you how to create a stunning vintage Polaroid effect. It’s fairly simple to make and can be used in many different types of projects.

Retro Vintage Tutorial

Create a retro/ vintage look for your photographs.

Create A Vintage Photo Effect in Photoshop

A quick and easy way to convert a modern photo in a vintage one.

Photoshop Vintage Effect

Create a smooth vintage effect for your photos using Adobe Photoshop.

Create A Vintage Looking Image with Photoshop

The tutorial will show you how to turn your digital image into a vintage looking image. All done in a non-destructive way. This was done in Photoshop CS2, although it may work in older versions.

Vintage Tutorial

This tutorial is for adding a vintage or an old photograph look to your photos.

How to Make Your Pictures Look Old, Antique, and Vintage

A step-by-step guide on how to make your photos or pictures look old, antique and vintage.

Create A Retro Photo and Background

In this tutorial you are going to take a regular, boring photo and liven it up using with some effects to give it more of a retro feel to it. You are then going to take the photo and create a background for it to lie on.

Vintage Greeting Card

Are you missing the old times? Well, this Photoshop tutorial allows you to go back in time and give your pictures that old vintage look.

Photo Transfer Edge Effect

This Photoshop tutorial will show you how to create a cool old photo transfer edge effect using a piece of stock photography, an alpha channel and the burn and dodge tools.

Some Great Video Tutorials

Aging A Photo

Instructor Richard Harrington shares some techniques on how to age a photograph in Photoshop.

Pin Up Effect

Using a mixture of filters and blending modes, Corey takes a stock photo and transforms it into an old, classic 1950′s pin-up poster.

Helpful & Free Vintage Textures

Vintage Grunge Textures

Contains 5 high quality vintage and grungy textures. Total file size: 16.1 MB

Memories Textures

Contains 2 large vintage textures. Total file size: 12.7 MB

Rust Textures

Contains 5 rusty large stock images. Total file size: 18.8 MB

Vintage Grunge Textures

Contains 6 high resolution vintage and grunge textures. Total file size: 24.2 MB

Two Vintage Textures

Contains 2 large vintage textures. Total file size: 2.1 MB

Grungy Textures

Contains 5 textures in 1000x750px resolution in JPG format. Total file size: 4.3 MB

Vintage Paper Textures Pack

Contains 4 high quality vintage paper textures. Total file size: 3.9 MB

Texture Pack 1

Contains 3 very large textures. Total file size: 2.6 MB

Old Paper Textures

Contains 6 high quality old paper textures. Total file size: 3 MB

20 Grunge Textures

Contains 20 textures in 750x1000px resolution in JPG format. Total file size: 22.8 MB

2 Old Postcards Textures

Contains 2 textures in 1000×660 px resolution in JPG format. Total file size: 1.1 MB

Vintage Pack 1

Contains 5 high quality textures of 2000 x 3000 px in size. Total file size: 539 KB

14 Unique Old Paper Textures

Contains 14 hi resolution textures of old paper taken from old books. Total file size: 9 MB

Vintage Paper II Texture Pack

Contains 5 high quality vintage paper textures. Total file size: 3.3 MB

Helpful & Free Vintage Effect Photoshop Actions

Vintage Addict Pack

Contains a set of 4 Vintage Textures and 5 Photoshop Vintage Actions. Total file size: 1.7 MB

Vintage Effect PS Actions

Contains vintage effect Photoshop actions. Total file size: 16 MB

Photoshop Actions

Contains 11 Photoshop actions. Total file size: 397 MB

Vintage Actions

Contains 2 wonderful actions, a dark one and a light one. Total file size: 1.4 KB

Vintage Wash PS Actions

Contains 10 great vintage Photoshop actions. Total file size: 7.2 KB

Photoshop Actions

Contains 12 Photoshop actions. Total file size: 612 KB

Sepia Actions

Contains a set of 7 actions that will give your photos sepia tones. Total file size: 11.2 KB

Photoshop Actions

Contains 8 Photoshop actions. Total file size: 494 KB

Vintage Dream PS Actions

Contains 6 vintage Photoshop actions. Total file size: 2.1 KB

Vintage Action

Contains a great Photoshop action. The color effects are all in separate adjustment layers so they are very easy to edit. Total file size: 6.1 KB

Photoshop Actions

Contains 4 Photoshop actions. Total fie size: 147 KB

Photoshop Actions Pack I

Contains 5 different Photoshop actions. Total file size: 16.3 KB

Photoshop Actions 32

Contains 8 Photoshop actions. Total file size: 468 KB

Photoshop Actions

Contains 4 vintage Photoshop actions. Total file size: 333 KB

Vintage Diva Actions Set

Contains 6 actions created in Photoshop 7, but they should work with later versions as well. Total file size: 536 KB

Photoshop Actions

Contains 8 Photoshop actions. Total file size: 397 KB

For those interested, we’ve combed many sources online to gather some of the best Photoshop text effects tutorials to give all of you a head-start. Do browse through some of the fascinating design ideas that others have came up with. There is a total of 80 outstanding Photoshop text effects tutorials below, but check out our archive if it’s still not enough to inspire you!

Here are more text effect tutorials just to make sure you’ve seen them all:

• Text Effect Photoshop Tutorials, Part I
• Text Effect Photoshop Tutorials, Part II

All tutorials after jump.

Wave’s Text Effect

Glossy Emblem Text Effects

Spectacular Style Text Effect

Harley Davidson

Aqua

Happy New Year

3-D text with some extreme lighting

Awesome metallic background for text

Jelly Fish Delight

Realistic Scorching Fire Effect

Shiny Calligraphy

Amazing Video-Game Text Style

Lost in Space

Awesome Floral Type

Cloudy Text

Creative Volition

Milk

Slick 3D Ice Text Effect

Stunning City Skyline

Watercolor

Sugar Bag

80’s Style Design

Dream Design with 3D Typography

Eroded Metal Text

Destructive Black and White Lettering with a Dramatic Splash Effect

Stunning 3D Sunset Type Illustration

Dynamic Recessed Watercolor

3D Text Blocks

Copper

Steam Powered

Quick Grungy Poster

Add Fantastic Color to 3D Text

Typographic, Retro, Space Face

Richly Ornate Typographic Illustration

Gorgeous Glassy Text Effect

Using Light and Shade to Bring Text to Life

3D Text Scene

Techno Effect

Colorful Light Burst

Grunge Type

Gooey

Brick

Realistic Golden “Bling”

Realistic Water Text Effect

Amazing Typographic Portrait

3D Flowery Text Effect

Stunning Text on Wild Fire Effect

Grungy Rusted Carbon Fiber Text Effect

Smokey Typography

Unique Burning Text Effect

Candy Coated Photoshop

Awesome Geometric Shaped Typography with Grungy Background

Realistic Weedy

Gloomy Text Effect by Utilising the Amazing Cloud

Awesome Abstract Text Effect with Brush Dynamics and Filters

Fragmented Text Effect with Scrap Texture

Horror Style Text Effect with Dirt and Splatter Texture

Super Sleek Text Effect with Water Drop Texture

Snowy Rock

Translucent Text Effect with Sky and Cloud

God of War III Inspired Cracked

Chilling and Icy

Trendy Galactic Poster Design

Cool Wet Ink

Floral

NFS Pro Street Stencil Tutorial

New Retro Text Effect

Luminous Glass

Watery

Elegant Chrome

Beveled Aluminium

Polished Metal

Suspended

Star Cute

Stylish Floral

Smoke Text

Funky Stickers

Rubber Stamp

Star Wars Logo

Peace

Golden Flame