We’re currently using Adobe Photoshop CS5, but this can be done in earlier versions of Photoshop just as well. We’ve toned down our result but you can use any color or intensity.

The Preview

1/3 Initial Preparations

Open your image

Before you start working on your image add a surface blur. To do that go to the “Filter” menu, “Blur” submenu and click on “Surface Blur…”

You can use the settings below. A small amount of blur will do. Click OK when you are done.

2/3 The Mask

Select Photoshop’s “Brush Tool” {}. The size of the brush depends on the size of your image, or on how much hair you want to color. Select a soft brush tip.

Click on the “Edit in Quick Mask Mode” {} button, which is located at the bottom of your toolbar, and then, using the brush, paint over the portion of hair you want to modify. You should end up with something like this.

Now click on “Edit in Quick Mask Mode” {} button again, to exit the quick mask mode. The result is a selection of the whole picture, except the parts you want to color. You should remember this as the tool is used a lot in Photoshop.

The next step is to select the hair only. In order to do that, go to the “Select” menu and click on “Inverse”.

3/3 Dye it!

To change the hair color in a non-destructive way, we will create a new layer from the selection. Press ctrl+c to copy the selection and ctrl+v to paste it in a new layer.

With your new layer selected, go to the “Image” menu, “Adjustments” sub-menu and click on “Hue/Saturation…”.

Play with the sliders until you have the desired color. Remember to check the Colorize button. We recommend choosing an intense color shade.

The last thing to do is change the blending mode of the newly-dyed hair to “Lighten”

You can play around with the options to get different results or you can use this method to dye entire hairdos. Sometimes, you may need to apply a small amount of Gaussian Blur to the colored layer.

So let’s get started, shall we?

Finished

Now all that you need to do is add your logo and you have a simple bubble/bokeh wallpaper, you can use this effect for pretty much anything, so experiment and good luck. Hope you enjoyed the tutorial and thanks for reading.

You can download a Full 1080 HD version here: 1080HD Wallpaper

Step 1

Open the photo into Photoshop. For this tutorial, try to use a high resolution image where you can see the skin texture.

Step 2

Create a duplicate layer and put it into a group. To do this, press Ctrl+J to duplicate the layer then Ctrl+G to place the new layer into a group. Name the group “Airbrush” and the layer “Blur”. To retouch the skin, there will be two layers in the Airbrush group. The first layer we’ve created (the Blur layer) will be used to blur the skin. After that, we’ll add another layer to restore the natural skin texture.

Step 3

Have the Blur layer selected. To blur this layer, use the Surface Blur filter. This filter blurs like the Gaussian Blur filter except it can retain edge detail. We’ll need to blur the layer so that the skin is smoothed and somewhat blurry without having the edges

Here’s what my image looks looks like after the Surface Blur filter. Your image should look similar with details such as the eye intact. If the eye becomes blurry, your settings are too strong. Undo and redo the Surface Blur filter with a lower setting.

Step 4

Create a new layer and move it above the Blur layer. Name this layer “Texture” and change the blend mode to Hard Light. This layer, as the name states, will be used to add a slight texture to the skin and also adjust the skin tonality.

The texture created in this layer will contribute to the final results very minimally – the difference can only be easily seen zoomed in on high resolution images and varies from image to image. Even though the result is very minimal, it ensures that no area of the skin looks too smooth or plastic.

Below is an example of this. On the left, the image looks like a solid color, also known as plastic skin. The image on the right has a slight noise pattern to make the skin look more realistic.

Step 5

Make sure that you have the “Texture” layer selected. With that layer selected, press Shift+F5 or choose Edit > Fill. In the Fill tool, set the settings according to the image below. This will fill your layer with a 50% gray color.

Step 6

Open the Add Noise filter from the Filter > Noise menu. Enter in the settings shown in the image below. This will add some noise to the image that will prevent skin from looking plastic. It may look a little too sharp, but in the next step, we’ll fix this with a Gaussian Blur filter.

Step 7

Choose Filter > Blur > Gaussian Blur. Blur the layer by 1 pixel.

Step 8

Now we’ll temporarily tint the color of this layer. First, select the Eye Dropper tool from the toolbar. Sample an area on the skin that appears to be the average skin color. You don’t have to be very precise because we will tune the color later in the tutorial. In the Color palette, click on the flyout menu below the close window button and select HSB sliders. We’ll need to see the HSB values for the next step.

Step 9

Open the Hue/Saturation tool by pressing Ctrl+U or choosing Image > Adjustments > Hue/Saturation. Check the Colorize option and adjust the hue, saturation, and lightness values to match the HSB values from the color we sampled in the previous step. For the brightness, set this to

Step 10

Select the Airbrush group in the Layers palette and add go to Layer > Layer Mask > Hide All. This will create a layer mask filled with the color black that will hide the group. With this layer mask, we’ll paint the areas were we want the skin to appear. Otherwise, this skin airbrushing effect will appear on the entire image.

Step 11

First, press D on your keyboard to set the foreground and background colors to the default black and white. Select the Brush tool and apply the settings below.

Zoom in to 100% and paint over the skin. The parts that you paint will appear smoother with a different skin tone. Don’t worry if the skin tone doesn’t look correct. This is because we didn’t pick the correct color when we used the Hue/Saturation to tint the “Texture” layer. It’s too difficult to do that without a preview, so we’ll fix that later.

When painting, you’ll need to change the brush size and hardness frequently. It would be tedious to always access the brush option menu to do this so take this as an opportunity to use hot keys. Use the following hot keys to help you with modifying the brush size and hardness:

• Decrease brush size: [
• Increase brush size: ]
• Decrease brush softness by 25%: Shift + [
• Increase brush softness by 25%: Shift + ]

When you’re done, your layer mask should have the skin areas in white and the skin should look smooth.

Step 12

Now we’re going to fix back the color and tone of the skin as we mentioned earlier in the tutorial. Select the “Texture” layer and press Ctrl+U to access the Hue/Saturation tool. Alter the settings to get a natural looking skin tone.

• The Hue setting is usually correct. I increased it by 10 to add more yellow to it to make the appearance of the red areas less visible.
• The Saturation setting usually needs to be reduced greatly. Adjust this until the skin tone looks natural but not too pale.
• The Lightness setting requires slight modification. A slight change in the lightness will create big difference in how the skin blends in with the image. As you adjust the setting, you will see how sensitive this setting is. Even though it requires high precision, it is easy to tell when it is the correct setting. If it is off, it will look really off. If it is at the correct setting, it will look a lot more natural.

Step 13

Finally, we’re going to restore the skin details. Choose Image > Apply Image. Use the settings below.

The reason why we’re applying data from the Red channel is because it contains the least skin imperfections. The image below shows the difference in the channels. The red channel hides many of the skin imperfections that are visible in the green and blue channel.

Final Results

Here’s the final results after applying this airbrushing technique. In the image below, you can see how smooth the skin looks. Because the image below has been downsized to fit into this tutorial, it may look slightly plastic. However, when zoomed in, the texture is clearly visible.

This is a crop of an area zoomed in 100%. The tiny skin bumps are still visible. Even near the bottom right of the image, it still looks natural because of the “Texture” layer that we added. Without that layer, that area would appear as a solid color with no noise.

And as usual, here are the before and after images.

The key to dashed lines is the Spacing option. Combined with Roundness in Photoshop CS, you can change a square brush into a dashed line quickly. Here’s what you need to see in the Photoshop CS Brushes palette:

Remember that you need to open the Brushes palette from the Palette Well or the Window menu (or the F5 key). The small Brushes palette found at the left end of the Options Bar is for brush selection, not brush editing or creation. And what if the Brushes palette is grayed out and unavailable? Switch to a brush-using tool, such as the Brush tool (press B on the keyboard).

Reducing the Roundness makes a square brush flat. Increasing the Spacing moves each “instance” of the brush tip imprint farther apart. (Think of Photoshop’s brushes as applying the brush tip many times close together as you drag, rather than as a continuous stream of color, like an ink pen.) And, of course, the “dash” doesn’t need to be at 50% roundness.

Don’t forget that you can make vertical dashed lines rather than horizontal by changing the Angle setting in the Brushes palette to 90 degrees.

In Photoshop 6, you must first define a small rectangle as a brush and then adjust the spacing. (Photoshop 6 doesn’t allow you to change the Roundness value for non-round brushes.) Create a rectangle of the size of your dashes, fill with black, and use the menu command Edit> Define Brush. You can use the Rectangular Marquee tool to create the shape-make sure that Feathering is set to zero in the Options Bar.

Give the new brush a distinctive name, one that reflects both its size and purpose.

Once you’ve created your dashed line, you can use it with any brush-related tool. In addition to the Brush (Paintbrush in Photoshop 6), Pencil, History, Art History, and Eraser tools, you use brushes with the stamp, focus, and toning tools.

Remember, however, that these dashes will not follow the paths of the cursor, but instead stay oriented to the page. This figure shows the difference between a dashed line created in Photoshop (top) and one created in Adobe Illustrator (bottom). The Illustrator dashes follow the path no matter how it curves.

The orientation of the “dashes” to the path in Photoshop is insignificant when a symmetrical brush is used. A round brush, for example, never seems to be mis-oriented.

When you do need to curve a dashed line, remember the Shear filter (Filter> Distort> Shear). You can bend and twist a straight line. To save a step, draw the line vertically (the filter works only horizontally). It’s also usually a good idea to have the dashed line on a separate layer and have no active selection.

The Shear filter enables you to bend and twist. Click on the vertical line in the preview window to add an anchor point and drag. You can place several points as necessary. And if you’ll be working close to the edge of the window, click the button for Repeat Edge Pixels.

2. Uncheck Shape Dynamics and Smoothing

3. Adjust the “Spacing” to create the dots

This part is up to you in order to achieve your desired effect. Pay no attention to the waves in the preview. It’s the default preview. All you are worried about here is the amount of space between the dots.

4. Choose your brush color

If you haven’t already, choose the brush tool in the tools palette, or hit B on the keyboard. Also make sure you select a color for your brush, which would be the foreground color. ( I chose black )

5. Hold Shift and Drag

With the brush tool, hold shift, drag and bam, perfect dotted line!

Step 1

Start with your container image. Be sure to notice how the cylinder reflects light. This will come in handy later.

Now we want to place the label image on a new layer so click File>Place and find the image you want to use and click Place.

Step 2

Now reduce the opacity on the label layer within the layers palette. This is helpful for figuring out exactly how to warp it properly to the container.

You’ll see that you can transform your new placed layer here and you’ll want to do this now, but make sure you don’t shrink it more that the maximum vertical distance it would have at the closest point to you on the curve of the container. You can see what I mean here. Once you have it sized properly, right-click the payer and rasterize it.

Step 3

Now click Image>Transform>Warp. You’ll see the control points on each side. Grab a corner first and drag it in to where it should be as if they were wrapped around the cylinder. Next, grab each point in order down each side and you’ll see your label taking shape.

Now you have it warped nicely!

Step 4

Click the Move Tool (arrow) and click Place and bring your opacity back up in the layers palette.

Step 5

As you can see it looks pretty good, but a little too good. It doesn’t fit in to the environment because there’s no light reflecting off of it. Remember studying the surface of the tin cylinder? Now you want to add some of that shine to your label.

To do this, use the rectangular selection tool and set the feather to 15 pixels. Now select the areas that should have light reflecting on them. If you can’t remember, switch off your label layer and look at the tin. Remember to use the shift button while selecting the second area so you get them both.

Step 6

Now that you’ve selected the proper areas, click Image>Adjustments>Levels and drag the slider on the right to the left until it looks light enough.

Result

All done!

Here’s a super-simple technique for enhancing the most important bits of any portrait: the eyes. It’s a quick and painless way to make the eyes really stand out and take on a slightly sultry and burning look. To illustrate, we’ll use a photo of a beautiful woman culled from the vast database over at iStockphoto.com.

Arrange your workspace

Step 1: Pop open the photo and immediately duplicate the background layer by pressing Command + J (PC: Ctrl + J). You don’t have to do this, but it’s a good idea to protect thyself from, well, thyself and it’ll also give you a way to back off of the effect in case you overdo it.

NOTE: You could also select just the iris area with the Lasso tool and jump that up onto its own layer. If you have other retouching to do, that might be the best choice.

Step 2: Choose Window > Arrange > New window for [document name]. Zoom into the new window so you can see what you’re doing by pressing Command + (PC: Ctrl + ), and keep the original window at roughly the size the image will print at. This will allow you to see how much of an effect the enhancement is having. Anything you do in one window is automatically reflected in the other. It’s a handy way to work when you’re retouching.

This is what my workspace looks like now:

Enhance the iris

Step 3: Grab the Dodge tool (circled in red below), and immediately cast your eyes upon the options bar at the top of your screen. Lower the Exposure to about 30%. Mouse over to the photograph and size the brush cursor so that it fits only the iris area (be careful not to brush over the dark outer edge of the iris).

TIP: Press the left bracket key, [, to cycle up in brush size, and the right bracket key, ], to cycle down.

That’s really all there is to it. Because we lowered the Exposure, we can “build” the effect to the intensity we like by continuing to dodge the iris. If we go a little too far, we can decrease the opacity of the duplicated layer to lessen the effect, like so:

Here’s our before and after:

A simple, yet effective technique. That’s the way I like ‘em! Until next time, may the Photoshop force be with you all.

Step 2.
Duplicate the image to a second layer. Label the layers “original image” and “halftone layer”. Move the “halftone layer” to the top of the layers window and make sure you have that layer selected.

Step 3.
Make sure you foreground color is white and your background color is black. With the “halftone layer” selected, select Filter > Sketch > Halftone Pattern from the menu bar. Use the setting in the image below or play around some. Click “OK” when you are done.

Your image should look something like this

Step 4.
Now we need to invert the halftone. On a PC hold down your CTRL key and press I, on a Mac use the Command key and press I. Your image should now look something like this.

Step 5.
Almost there, we just need to tweak the “halftone layer” some. Select the layer and change its mode from “Normal” to “Linear Light”. You can also lowered the transparency some.

Outcome
And here is your final image. A very cool linear light halftone dot effect in less than 2 minutes.

Below is the final design we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one?

Step 1

Before we begin, lets setup our grid. Open up the general settings by going to Edit > Preferences > General (Command + K) and set the Constrain Angle to 32.25 degrees. This will angle the grid and all created shapes in it will be angled that way.

Step 2

Select the Rectangle Tool (M) and draw a long rectangle filled with blue. Notice how the shape gets angled automatically along the grid.

Step 3

Zoom into the left end and add a path point with the Pen Tool (P). Place it relatively into the middle.

Step 4

Then select the point with the Direct Selection Tool (A) and move it towards the left. Hold the Shift Key while doing that. This will keep it centered even though we are working on an angle.

Step 5

Duplicate the shape below the light blue one (Alt + Shift and drag) and fill it with a darker blue.

Step 6

Next, select the Pen Tool (P) and draw a beige line like you see in the image below. Make it slightly angled. Then got to Effect > 3D > Revolve and choose the settings you see in the image below. Make sure that you add extra highlight points. You might have to move it closer towards the blue pen shapes. Make sure you place it underneath them.

Step 7

Repeat Step 6 and add a much smaller dark grey line and apply the same 3D Revolve settings. This will be the lead tip of the pencil. You might have to move it closer to the wood tip that we created. Since the same settings are applied, the highlights match each other.

Step 8

Next, draw with the Pen Tool (P) a similar shape like you see in the image below. This will be the metal end of the pencil where the eraser tip is held in place. Make sure that the fill is set to a beige. Then repeat Step 7 and apply the 3D Revolve with the same settings.

Step 9

For the eraser tip, create a similar red filled shape and a apply again the same 3D Revolve as in Step 8.

Step 10

Now we have created a pencil in a few easy steps. To give it a shadow like you see in the image, make a copy of all pencil shapes and expand their appearances. Then apply the Add to Shape Area in the Pathfinder Palette.

Step 11

Fill the expanded shape with a black and apply a drop Shadow (Effect > Stylize > Drop Shadow). Move the shape underneath the pencil.

Step 12

Now on to the grid, create a rectangle with the Rectangle Tool (M) and fill it with white.

Step 13

Then create a small white filled circle (L), duplicate it (Alt + Shift + Drag) and hit Command + D eleven times. Make sure that there is a bit of a gap when duplicating the first circle. Then select all circles and the paper rectangle and select Subtract from Shape Area in the Pathfinder Palette.

Step 14

We need to add a torn paper effect. Create a polygon shape (with the Pen Tool) and repeat Step 13. Make sure that the polygon shape overlaps the paper and the circle hole. After applying the Subtract to Shape Area, you should have a similar shape shown in the image below.

Step 15

Select the just created shape and add a Drop Shadow.

Step 16

A note paper needs some lines. Draw a line with the Pen Tool (P) and set the Stroke to 1pt in a light grey color. Then duplicate it (Alt + Shift + Drag) and hit Command + D several times, depending on the distance you applied while dragging.

Step 17

Select the paper shape and the lines, group them and duplicate the group. Move it slightly to the left and bottom.

Step 18

On to the pencil sharpener. Create a rectangle (M) and fill it with a dirty beige to brown gradient. Then go to Effect > 3D > Extrude & Revolve. Choose the Bevel Style: Rolling in the drop down menu. Set the size to 3pt. Extrude it 100pt and apply the angles you see in the image below. This will create a simple but effective sharpener shape. Add a Drop Shadow to it.

Step 19

For the blade, create a rectangle and fill it with a linear white to black gradient. Then add an Outer Glow.

Step 20

Add another rectangle smaller in width and fill it again with a linear gradient. Add a small dark grey circle that will act as a screw holding the blade in place.

Step 21

This is how the sharpener should look like.

Step 22

Next step is to create some pencil shavings. Create a circle and cut away the bottom quarter by selecting the Scissor Tool (C) and clicking on the two path points each at a time. Then select (A) the small quarter circle and delete it. Select the rest of the circle and apply the zig zag effect by going to Effect > Distort & Transform > Zig Zag, then Expand the effect.

Step 23

Add a line so we can close the three fourths zigzag circle. Select the end points of the line and the circle shape each at a time, then join them (Command + J). It is important to ungroup the zig zag shape, just in case you cannot join them. Anytime there is an effect expanded, it gets automatically grouped.

Step 24

Fill the shape with a beige to white radial gradient and add a light blue Stroke of 2pt. Then via the Appearance Palette, add another Stroke of 1pt and set the Stroke color to dark blue.

Step 25

In order to create some segments to the shavings, create a line like in the image below. Select it and rotate it while at the same time duplicating it. You can do that by selecting the Rotate Tool (R), then click on the center once. Next, hold Alt + Shift and drag clockwise. Then hit Command + D several times.

Step 26

Duplicate the zig zag circle shape in front (Command + F). Then select the duplicated shape and the lines and hit the Divide option in the Pathfinder Palette.

Step 27

Select each second shape with the Direct Selection Tool (A) and fill them with a beige color. Then select the other shape segments and add a Stroke of 0.25pt and set the Stroke color to a darker beige. Group the shaving shapes and add a Drop Shadow.

Step 28

I made several copies of the shavings and scaled and rotated them.

Step 29

Let’s add a dark wood background. Create a square (M) or rectangle and fill it with a radial grey to black gradient. Set the gradient highlight towards the left top. Then duplicate the shape on top (Command + F) and fill it with a pattern called Dashed Lines. You can find default patterns easily by going to Window > Swatch Libraries > Patterns > Basic Graphics > Basic Graphics_Lines. The original gradient will be overridden. Then set the layer transparency to Overlay.

Conclusion

This is the final image of our illustration. I added some text to the pencil to personalize it and a sketch-like drawing. This was done by live tracing an image and modifying it a little. I hope you had fun!

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.

In this guest tutorial Mahfuz will show you how to create a very beautiful portfolio layout. This is our first Guest tutorial.

Step 1

To make a perfect web layout we first need to start perfectly. Create a new document of 1000 px width and 1400 px height.

Our first step is to set our grid system. After defining our grid system increase canvas size from 1000 px to 1280 px wide by pressing Alt + Ctrl + C in the same time. Now the area inside grid is actual visible area so design must be inside this area.

Step 2

Create a black  rectangle on the top by pressing U. You canuse any height but I kept it at 40 px.  Now create a rectangle with color 4b4b4b to make  the subscribe button. Select gradient overlay from layer style and use the following colors: 000000 and 585858.

Now select single row marquee tool and select 1 px horizontal line and fill it with white color. Put this 1 px line on top and bottom of button and give transparency 20%.

Step 3

Again create a 1px vertical line and fill it with black color. Duplicate it and nudge 1 px  to the right side and fill with white color. Now group both layer and name it “vertical divider “add a layer mask and fade edges with soft black brush. Reduce its transparency up to 30% . I will also use a RSS button on the left side of the button.

Step 4

Now create another rectangle with the following color 4b4b4b. I will create this shape for subscribe text field. You can add a 1 px line filled with white color on bottom and on the right of the shape.  Your subscribe button is completed.

Step 5

It’s time to create a header. Ccreate a rectangle of height 107 px and color b34343 and name it header. From layer style select gradient overlay. Select gradient color d40393 & 940062, set blending mode “darker color” and give it 85% opacity.

Step 6

Create another rectangle similar as in step 5 with the following height: 254 px and for this rectangle you can use the following color b34343. Apply gradient overlay with 80% opacity and select the following colors a20072 & dd009c.

Name this rectangle “featured rectangle 1”.
Now duplicate this “featured rectangle 1” layer and apply the same layer style we have used in step 5 and give it 60% opacity. Your result will look like this.

Step 7

Again press U and create a rectangle of height 107 px and name it “grey rectangle”. Apply gradient overlay and select colors e7e7e7 & ffffff.

Step 8

Now it’s time to create featured image holder. Create a white rectangle of 485px width and 280 px height. Name it photo border and duplicate it,. Reduce its size slightly smaller than photo border and name it photo. Apply inner glow from layer style and keep its size to 46 px. Choose color c52d8c with 15% opacity.

Step 9

Create another rectangle below photo border, fill it with black color and name it shadow. Apply wrap transform from right click menu and pull corner points slightly outward. Give it color mode multiply with 30-40% opacity. Your results will look like this.

Step 10

Select Pen Tool and draw a shape like a ribbon on top left corner and name it ribbon.

Add the following layer style:
Drop shadow:
Inner glow: color ed649e, size 8 px, 75% opacity, blending mode lighten.
Gradient overlay:  color d40393 & 940062, 80% opacity, scale 28%.

Step 11

Ctrl + click the ribbon layer and create a new layer. Select a soft brush of 20 px and color b05085 and paint the ribbon’s corner from one end to another and keep its blending mode multiply with 70% opacity.

Step 12

It’s time to add some lights over this ribbon so create a new layer and make rectangular selection similar to the width of corners of ribbon. Fill it with white color and blur it.

Now ribbon is complete and add text whatever you want.

Step 13

Now it’s time to add text. Choose any font of your choice and add some inner shadow of 1px size and 20% opacity. I used Aller Bold of 37 px. Try out different fonts and sizes until you like the result.

Step 14

Press U and select Rounded Rectangle Tool and create a rectangle of 100 px width and 50 px height with radius 4px. Name it highlight menu and select top right anchor points and drag them to left.

Step 15

Now duplicate this highlight menu rectangle and add gradient overlay with colors dbdbdb & ffffff with angle 5°.

Step 16

Control + click the header rectangle then ctrl + shift + click featured rectangle 1. Select soft brush of color black & size 200 px and drag from top to bottom on left and right corners. Reduce opacity to 40% -50% and color mode multiply.

Repeat same step on other side.

Step 17

Now write your company name and apply inner shadow of 2 px with 40% opacity.

Step 18

Create a rounded corner rectangle of 454 px width and 356 px height. Apply gradient overlay, choose color f0f0f0 & ffffff. Apply stroke of 1px with color ececec. Name it testimonial box.

Here is the result

Step 19

After writing some text we need to create blog update boxes. So create three rounded rectangle of width 327 px and height 211 px. Apply the same layer style as in testimonial box and with Horizontal Type Tool write some text.

Step 20

Now we’ll create a search bar, create a rounded rectangle with color f2f2f2. The height should be  30px and width 230px with radius 12 px. Apply same layer style as in step 18.

Step 21

Now it is  time to make the footer so create a rectangle of 260 px height and full width and apply gradient overlay of color 5c5b5b & 000000.

Step 22

We nearly finished this sleek portfolio layout .  This is the final result.

That’s all friends
Here is high resolution image of final layout. Please click on the image to see the full size layout