How to Create a Van Icon in Photoshop

Source :http://psd.tutsplus.com
Apr 16th in Illustration, Interface by Constantin Potorac

This is another icon I have created with Negreu Andreas. We wanted to create an icon that can be used for a game maybe or a Mac app of some sort. Before we started we searched the web for photography with similar vans, then made some ideas, and a quick sketch. After that we started working. Let's review the process!

Final Image Preview

Take a look at the image we'll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below or view a larger version here.

Step 1

First of all you need to make a quick sketch of the icon you have in mind. It doesn't need to be very artistic (I know ours is not) but it must illustrate a simple idea of what you will create.

Step 2

Create a new layer, then use the Pen Tool (P) to trace the rough sketch and create a final shape of the car.

Step 3

It is time to add some color to the car. Use this code #ff6d00, then into a new layer start painting the color. Place the layer below the sketch you made in Step 2.

Step 4

Now you need to erase the excess color using the Pen Tool (P). After you made the path around the car, simply press Command + Enter and transform the path into a selection, then in the end press delete.

Step 5

Create a new layer and in this layer you will have to select the windows, tires and a lower bar of the car. Now fill them with black.

Step 6

Next create a peaceful hippie logo. Use the Ellipse Tool and the Rectangle Tool (U). First, create the circle then extract part of the circle with the same tool. Next use the Rectangle Tool and create the three lines.

Step 7

After you finish creating the logo, merge those three layers. Now double-click on the layers thumbnail to enter the Blending Options. THen apply some Bevel and Emboss and a Gradient Overlay.

Step 8

Let's create the spotlights. Using the Elliptical Marquee Tool (M), first create a new layer then Right-click, select stroke, and use 3px for the stroke. The color used for this stroke is #7a7a7a.

After you have achieved the shape you need, double-click the layer to enter the Blending Options and add a Bevel and Emboss with the settings shown below. Repeat the step for the other spotlight.

Step 9

Now it is time to start adding some gloss on the spotlights. Create a new layer then make a selection inside one of the spotlights. Use the Radial Gradient Tool set to White and Grey as shown below.

Step 10

Create a new layer and make a new circle using the Elliptical Marquee Tool. Use a white to transparent Linear Gradient and apply some gloss, like in the image below. In the end, repeat these two steps for the other spotlight. Also, decrease the Opacity of this layer to 80%.

Step 11

In this step we'll create the bumper. First, create a new layer and name it "bumper." Now use the Pen Tool (P) to make a path and transform the path into a selection. Next, fill the layer with the same orange and desaturate the layer.

Using the Burn Tool (O), brush over the lower side of the bumper. Also, if you want to, you can add some soft noise to make it look more real.

Step 12

Now we'll add some simple lines that will define the car's shape better. Using the Pen Tool, draw two paths like below. Set the brush to 1px and black. Next duplicate each line two times, press Command + I to inverse the color and make them white. In the end, place them beside the black strokes. You can also use the Eraser Tool (E) with a soft brush and erase the line heads.

Step 13

Repeat Step 12, but this time you need to create these lines in a different area of the van. After you create the black stroke, duplicate it and move it above it. Also, transform it into white by inverting the colors. Use the Eraser Tool and softly erase parts of the line.

You also have to create another similar line like the white one, but this time leave it black and move it below the first one. Also, you should add a soft shadow using the Burn Tool on the orange layer.

Step 14

Next you need to change the color of the hood. Create a new layer and name it "Hood." Now make a selection as shown below and fill it with #006c00.

Step 15

Let's add more gloss on the hood. Make a selection like in the image below. Next, use the Radial Gradient Tool set to White and Transparent to create a new layer. In this layer drag from left to right to obtain something similar to the image below, then duplicate the layer and move it to the other side.

Step 16

Add another gloss on the bumper by creating a new layer, then make a selection like in the image below, and fill the selection with white. Now set the layer Opacity to 60%. Next, duplicate the layer and move it to the other side.

Step 17

Add a gray light on the bumper using the same techniques we've covered. Then duplicate the layer and move it to the other side.

Step 18

It is time to work on the tires. Create a new layer, and use the Lasso Tool make a selection like in the image below. Fill the layer with #424242. Then using a soft black brush, draw over the edges of the layer.

Step 19

Continue creating the break-apart for all the elements. Look at the image below for reference. Also, use the splatter brush for greater effect.

Step 20

In this step, we'll add some more gloss to the hood. Make a selection as shown, and then use a white to transparent Radial Gradient to create the gloss. Use the Eraser Tool and remove the excess gloss. Also, set the layer to 90% Opacity.

Step 21

Create a new layer and make a selection using the Pen Tool. Fill the selection with white, then set the Opacity of the layer to 70%.

Step 22

Create a new layer again. In this layer, use a black brush to add a soft shadow.

Step 23

Using the Pen Tool stroke a 1px black line as shown.

Step 24

Create two more glossy layers on top of the van.

Step 25

Now we need to create the smaller spotlights. First of all, we'll create a red circle with a black stroke and a white inner glow of 1px for both. Rasterize the layer then apply another white stroke. Then using a white soft brush, add the glossy effect.

Step 26

It's time to work on the windshields and make them transparent. Use the same techniques as before: create new layers, make selections, fill selections with white, and then erase or decrease opacity.

Step 27

Now we'll add some more reflections to the glass. These lights are supposed to be the reflection of neon.

Step 28

Repeat Step 27, but this time make the reflection on the side windows.

Step 29

In this step, you'll create the mirrors. Create a new group and a new layer and name it "mirror." Fill the layer with the color, then start adding new layers for each reflection, light and shadow applied.

Step 30

Add the shadows below the car using the Brush Tool and Eraser Tool.

Step 31

In the last step, we'll create the windscreen wipers.

Step 32

Using Icon Composer and Candy Bar add the icon to your favorite application.

Conclusion

Hope you learned some new techniques and had fun while doing so. You can view the final image below or view a larger version here.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

Read more...

Create an Out of Bounds Fantasy Illustration

Source :http://psd.tutsplus.com
Apr 20th in Illustration, Photo Effects by Constantin Potorac

Here is another illustration I have worked on with Toma Alin Gabriel. Worked on this piece with a lot of images and I would also like to thank the photographers for giving us permission to use their stuff. In this tutorial, we will take you through the process of creating a fantasy scene, make water pour out of a painting, make some sort of a absorption effect and end up with a really nice looking color. The main idea behind this surreal illustration is that we are actually in a painting and the painting on the wall is the real world, the world where our vulture tries to escape.

Final Image Preview

Take a look at the image we'll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below or view a larger version here.

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

Preparation

Before you start take a look at the images we'll be using: Bird Cage by Marcus J. Ranum, pedestals by Marcus J. Ranum, couch by Tattoomaus78, Vintage Mandolin by fotovizions, Old Dark Room by Geek-Stock, Wooden frame by Geek-Stock, Vintage Grunge Texture by Anne, Waterfall by xPhate, Water by RosalineStock, texture by cgtextures, painting by night-fate-stock, Harris Hawk 3 by sxc, golf ball by sxc.

Step 1

Open the Old Dark Room image provided by Anne. This room looks pretty freaky already but you want it to have more cracks. To do this, import the Vintage Grunge Texture and resize it using Command + T.

Set the texture layer to Multiply and erase the edges using the Eraser Tool (E) so that it blends in. Also, you will need to use the Burn Tool (O) on the image to darken it some more, and then desaturate the image to obtain a better result. The texture will blend in just perfectly.

Step 2

Import the frame into the scene and cut it out of its background using the Pen Tool (P). Select some parts of the frame and using (Command + J), duplicate them. Next, enlarge the frame. After you place each layer into place, merge them all together. Using the Clone Stamp Tool (S), clean up the frame so that each piece you have create will blend in with the others.

Step 3

Now that you have your frame ready we need to add some color effects. Change the Hue/Saturation to: Hue -25, Saturation -60 and Lightness 0; Levels to 17, 1.00, 255; Vibrance to -26 and Saturation -53. Follow the images below for reference.

Step 4

Now that we have set the frame color, we need to make some serious cracks on it. For this you will have to use a cracked texture that you can find on cgtextures.

Set the texture over the frame and set it to Overlay and Opacity 50%. Cut the texture layer so that it is only over the frame or simply make a selection of the frame and mask the texture. Duplicate the layer two times. In the end merge the crack with the frame and add some final adjustments: Brightness/Contrast 0, -40 and Exposure -0.80, Offset 0.0000, Gamma 1.00.

Step 5

Next you need to add a picture in the frame and create a painting. For this use the image created by painting by night-fate-stock. Position the image behind the frame and rotate it a little bit.

Apply some Vibrance adjustments to the painting: Vibrance 26 and Saturation -30. Merge the painting and frame. Now use the Transform Tool (Command + T), then chose Distort to pull the corners of the frame to create something like in the image below (you need to give the impression that some force is absorbing from there). Set the Exposure to -1.00 and for the Color Balance Midtones set the Yellow and Blue to -10.

Step 6

Import the couch by Tattoomaus78 image. Next, Use the Pen Tool (P) to cut it and remove it's background. Next you need to add some color adjustments so that the couch will blend in with the rest of the composition. For Levels use 17, 1.00 and 255; for Vibrance use Vibrance 21 and Saturation - 16; for Exposure -0.50, Offset 0.0000, Gamma 1.0; for Hue/Saturation change only the Saturation to -60.

After you position your couch, Command-click on the "couch" layer to make a selection around it, then create a new layer above it. Now use a black soft brush to draw on the corners and edges of the couch. Then set the layer Opacity to 80%.

Step 7

Now you need to add some more shadows for the couch. First, create a new layer and place it below the couch layer. Next use the same black brush tool to add some spots behind the couch, and in the end set the layer's Opacity to 50%.

Make another selection of the couch and create a new layer. Use the same technique as before to add some black spots on the couch. Also, use the Burn Tool (O) in some places, then in the end set the layer to Soft Light and Opacity to 90%.

One last thing here is to merge these layers. Next, use the Transform Tool to change the shape of the couch a bit, just pull the right corners to make it look like a black hole is sucking everything in it's path.

Step 8

This step will be more interesting. So for this, you need to import some water into your document. Use the Waterfall by xPhate image.

Use the Lasso Tool (L) to make a few selections of the water, then place them into your composition. In some cases, you will also need to use the Transform Tool (Command + T) and deform the pieces you import so that they combine and blend in nicely.

After you place each piece in the right place, desaturate each piece of the water, then set them to Lighten and Opacity 80%, or just experiment and chose the settings you consider to work best for you. Also, in some cases you will need to use a soft Eraser Tool (E) and soften the water.

Remember to use small parts of water like in the last image in this step. Position these pieces in places like the couch and floor, painting, the end of the painting, and the rest of the edges that look a bit strange and in need of some more water. You are actually recreating a waterfall in this step, and it can take a long time until you reach your goal.

Step 9

Now you need to work with another water image. This image will be used on the floor. Place the image in the composition using the Transform Tool, then you need to pull the lower corners a little so that there will be some perspective visible and desaturate the layer.

In the end, set the layer to Screen and Opacity to 60%. Finally, use a soft brush for the Eraser Tool, and erase the lower left and right parts to make it blend in. Another good tool to use here is the Burn Tool (O); use this to darken some parts of the water. You can also play a little with the Saturation (-40) and Exposure (-0.40).

Step 10

It's time to add another object in the scene, which is the Vintage Mandolin. After you cut out the mandolin from it's original background, import the image into your composition and place it on the couch. Be sure to place it as though it looks like it's floating above the couch.

Duplicate the "mandolin" layer and then double-click on it to enter the Blending Options. Here chose Color Overlay and set it to Black. Next move the "black mandolin" layer below the original one. Go to Edit > Transform > Warp. You need to modify the shape of the shadow a little so that it looks like it's morphing with the shape of the couch. Finally, go to Filter > Blur > Gaussian Blur and chose a 3px radius. Now set the layer to Overlay and Opacity to 60%.

In the end, make the mandolin look as old as the rest of the objects in the composition. To do this, change the Brightness to -26 and Contrast to -8; Saturation to -44; Vibrance +26 and Vibrance Saturation to -8.

Step 11

Let's add another object, which is the pedestal. Cut it out using the Pen Tool (P) and then place it in you composition, behind the couch layer.

Use the Burn Tool (O) set to a low Opacity, and draw over the pedestal to make it look darker. Another great technique to make objects look darker is to duplicate them, desaturate them, and then set the copy to Multiply.

Now that you made your pedestal look darker, you need to create some cracks on it to make it look old. Now create a new layer and place it lower then the pedestal. In this layer, draw using a black brush and create something that looks like the shadow of this object.

Apply a soft blur to the shadow, then set the layer to Multiply, and set the Opacity to 70%. One last thing you need to do to this pedestal is to add the cracks. Use the same texture and technique as you used for the wall. Also, use the Burn Tool if you consider some sports to be too light.

Step 12

Cut the second pedestal using the Pen Tool and then import it into your document. Resize, rotate and place it on the left side of the screen slightly going out of the document.

Let's make its colors look the same as the first one. Change the Vibrance settings to +17, Saturation -35; Hue 0, Saturation -8, Lightness 0; Brightness -8, and Contrast -17.

Same as you did with the first pedestal, you need to add the shadow and cracks. For the shadow repeat the same steps used for the mandolin shadow. To create the cracks, use the same texture and techniques applied to the wall and first pedestal.

Step 13

Time to insert another image in the composition. This time we will add a Bird Cage and later on you will also add the bird that actually escaped from the cage and flies straight for the painting attempting to escape into the real world.

So after you finish cutting the cage out of its background, import it into your document and transform, rotate and position it in the top-right side of the image.

Duplicate the layer and then double-click the new layer to enter the Blending Options. Now go to Color Overlay and set it to Black. In the end, set the duplicated layer to 50% and the original cage layer to 85%.

Step 14

Next you need to add some Adjustments to the cage. Set Vibrance +26 , Saturation -8; Levels 8, 1.00, 255; Hue 0, Saturation -30, and Lightness 0.

One last thing to do is to create a gate for the cage. Using the Pen Tool, make a selection like in the image below. Copy it into a new layer, then use the Transform Tool to make it look like it is part of the cage.

Step 15

After you cut out the golf ball, import it into your composition. Now resize it and place it above the first pedestal. It will look like it's levitating above the pedestal Play around with the brightness/contrast settings and make it a little lighter.

Step 16

It is time to add the last object and that is the bird. Cut it out using the Pen Tool, then place it into the document between the painting and cage to give the impression we are looking for, which is the bird has just escaped from the cage and flies straight at the painting.

Also, you need to duplicate the bird and move it somewhere over the couch. Also, fill it with black, apply some blur ,then lower the Opacity to 70% or lower. Doing this creates the bird's shadow.

Step 17

Next add some final adjustments to the bird. Set Levels to 20, 1.00, 255; Hue/Saturation to 0, -40, 0; Vibrance to +20, -30; Brightness/Contrast to 0, -30.

Step 18

It is time to start creating the break-apart effect. For this use the Lasso Tool (L) and select small pieces of the painting. For the moment, drag them a little (not too far though). Repeat this step until you get something like in the image below. Also, you can use a slash brush to make the effect more powerful. You can find some really great brushes at cgtextures in the splatter section.

Step 19

Continue creating the break-apart for all the elements. Look at the image below for reference. Also, use the splatter brush for greater effect.

Step 20

Use Topaz Adjust with the Portrait Drama effect. This will bring out more details in the image.

Step 21

Next use Adobe Lightroom and apply the settings from the image.

Step 22

Next you need to save the image as a JPG and open it in Photoshop. Duplicate the layer and go to Filter > Blur > Radial Blur, set it to 5px and Zoom. The last step is to create a layer mask, then use a black soft brush to mask some parts that are more important, like the center of the image and objects.

Step 23

If you want, you can stop at this point, but we will take you through the process of adding a really cool color effect. Open the JPG and darken the image a little by changing the Levels settings.

Step 24

Select the Green Channel and press (Command + A) then go to Edit > Copy. Select the Blue Channel and go to Edit > Paste and then select the RGB Channel.

Step 25

And final step is to create a new Adjustment Layer set to Curves and look at the image below for reference.

Conclusion

Hope you learned some new techniques and had fun while doing so. You can view the final image below or view a larger version here.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

Read more...