Archive for July 16th, 2010

DIGITAL IMAGE

Friday, July 16th, 2010 No Commented

Digital Image

The aim of this tutorial is to show you how to create an effect of decomposition, as if the character was composed only by pixels. The hardest task, will be to give the impression that we used a picture issued from a 3D software to achieve this work on Photoshop, and Illustrator. It’s better to use a graphic tablet for the final retouching. This effect has already been used to make face deformations created in 3D in Poser for example. Here, we’ll adapt this deformation in a natural way to a face (no-modeling) in order to make this effect more striking.


1-The choice of the subject
This choice is very important.If the picture is beautiful and helps to illustrate your idea, you have found the picture you need. For example, on this picture the character touches her face with some smooth, I had to create an effect of explosion as sweet.

Digital Pixels (1).jpg


2-Preparation
The first step consists of cleaning the picture of its imperfections without exaggerating, because we want to keep the natural aspect of our character. The aim is to not do single pixels precisely. Before you begin to work, you always need to expand the working area around your subject. To do this, simply paint around your character with a big brush and low opacity.

Digital Pixels (2).jpg


3-Path creation
To start, the easier way is to use Illustrator in order to draw on the photo the paths needed. Import the picture at 40% opacity in illustrator to have more visibility. Start at the center of the face, then continue with the side of the face. Follow the contour of the nose and mouth, and then the side of the eye. Simply use the pen and follow natural forms such as the mouth, to give the effect of relief on her face without creating any curves, because we want to achieve cubic forms.

Digital Pixels (3).jpg


4-Sculpt
Now you need to start to trace within the first paths, with the help from those you have already placed. It will help you to follow the outlines of your face. Do not over tighten the lines at the beginning as it will be easier to draw a new line between two lines, that are not too far apart. In addition, it will let you make paths with equal spacing.

Digital Pixels (4).jpg


5-We continue…
We’ll be dealing with the eyes and the mouth. First create a new layer for these news paths. This will help us with tracing the vertical lines. Here the purpose is to continue to model the shape of the face with paths. Remember, we want to achieve triangles or rectangles only.

Digital Pixels (5).jpg


6-Courage it’s only the beginning...
Once you have drawn the main lines you can now start to detail the different parts and continue the grid. Try to keep a balance in your lines; don’t overload one area and leave another empty. Don’t forget to save regularly because it would be an unpleasant to have to do it again!

Digital Pixels (6).jpg

7-Horizon
We will now continue with the horizontal lines. We will do as we did with the vertical lines: trace some lines and distribute them to prepare the cutting. Try to provide as much relief as possible to the face. Begin with the hair, down the face, then the cheek, the eyebrows… You have now traced the most important lines to give the impression of relief.

Digital Pixels (7).jpg


8-Filling
Continue the horizontal paths, which will always help you with the other lines. We have created the base of the grid, now we must go on and reduce the size of the polygons. To give more realism, you can reduce the mesh in deeper parts of the face, such as the eye and the nose.

Digital Pixels (8).jpg


9-End of filling
Cut the larger polygons into smaller pieces so you end up with a uniform polygon size. To do this, trace some small lines in order to cut the bigger elements.

Digital Pixels (9).jpg


10-Correction of mistakes
We have made a pretty mesh, now we need to check that the paths meet each other properly, and remove the points that are isolated (menu selection>object> Illustrator CS2). Make sure that your paths don’t go over each other, they should end on the other paths.

Digital Pixels (10).jpg


11-Duplicate
Using the horizontal mirror tool, we will duplicate the lines we have created in order to make the mesh of the left side of the face. It does not matter if all the lines do not match, because we don’t need a perfect location on the whole face. We will work only with a part of the duplicate pixels.

Digital Pixels (11).jpg


12-We start again!
Now that we have prepared the face, we will model the arm of our subject. For this you can proceed as we have done for the face. Start by the edges of your shape, then move on to the middle. By drawing lines between two previous ones, you will quickly obtain lines following the picture forms and give volume to your mesh.

Digital Pixels (12).jpg


13-Horizon 2
Finish with the same technique applied to the horizontal lines before, in order to complete the arm's mesh. Now we must import these paths on the image to Photoshop. To do this, open the picture that we have extended in the beginning in Photoshop, and copy/paste your paths created in different layers. Name it Trame visage and Trame bras. For this work the number of layers and the need to go back requires you to create multiple levels of folders and name each layer. Name the image of your model base.

Digital Pixels (13).jpg

14-First background
Create a folder for the arm and put it in the trame of the arm, do the same for the face. Create a new folder fond_visage in the folder visage. Display the layer which contains the trame of the face, select with the Magic wand around ten of polygons in pressing Majuscule, hide the trame of the face. Create a layer in the folder fond_visage and name it fond_1 and fill your selection with the color that surrounds the character. Keep your active selection.

Digital Pixels (14).jpg


15-First flight of pixels
Create a new folder named pixels_visage in the folder face. With the selection of the previous layer created, copy the pixels of the face into a new layer named pixels_1 in the folder pixels_visage. Using the Transformation tool [Ctrl]+[T] then clicking on the button deformation (or [Ctrl]+[T] and right click deformation), a grid appears. Pull the corners to guide the movement of pixels and deform them slightly to give more depth.

Digital Pixels (15).jpg


16-Be patient
We will start a new selection of other pixels on the layer trame du visage. Create a new layer name fond_2 in the folder fond, in which you fill the selection with the same color you did previously. Keep the selection and cut pixels off the face from the layer base and paste them on a new layer named pixels_2 into the folder pixels_visage. Use the function deformation deform tool again in order to slightly modify the created pixels.

Digital Pixels (16).jpg


17-Again and again
We must continue to work small packets of pixels. Remember to name and place all the layers properly so that you can allow easy corrections to packets of pixels. Continue to create the background step by step, and to explode the face by small packages of two or three pixels until ten or more.

Digital Pixels (17).jpg


18-It's not over!
In order to not remain confined to the face, we will duplicate layers from the folder pixels_visage with the aim being to create a stream of pixels towards the top of the image as they fly away. To do this, choose one of the groups of layers already made, move them to the side of the picture whilst reducing and deforming them slightly. Repeat the action two or three times, reducing the pixels each time.

Digital Pixels (18).jpg


19-A little shade!
We will now shade the pixels floating above the face. To do this, select the layer pixels_1 and use the option Drop Shadow in the layer styles in order to create a shade under packages of pixels. Create the shadow in mode Multiply, opacity 60%, distance 6 pixels, magnify 0 and size 8 pixels with an angle of 30°. Of course you can change these settings to adapt them to your taste. If you are happy with the effect, do a right click on the layer, and click copy style layer. Select all other layers of pixels, then right click and paste the style layer. Check that the shadows look realistic.

Digital Pixels (19).jpg


20-Making the background of the face
Now we must clean the lines left by the cutting of pixels in previous steps, and give a little more realism. To do this, hide the folder of pixels by clicking on the eye icon next to the folder pixels_visage. Create a new layer above the layer base, and with the magic wand tool or pen, make a selection following the contours of the backgrounds that you have created, in order to put everything all together in one selection. Then fill this selection using the background color and give it volume with a black, large brush.

Digital Pixels (20).jpg


21-Draw yourself the continuation
Create a new layer on which you put a few forms like THE ONES we have cut. Select a group with the rectangle selection tool, and in the Edit menu, made to define a predefined form. Name it group 1 and now go to the Brushes palette, set the step to 75%, then SIZE VARIATION and angle to 100%. To finish, set the round variation to 70% and round minimum to 30%. We must now set the colours to make them look like that of the skin. To do this, select a light color of the face as the foreground color, and a dark one as the background.

Digital Pixels (21).jpg


22-Let’s go
In the dynamic menu of color, set the value of variation color foreground / background to 70%. Take your graphic tablet, and take care of your lines to achieve a perspective to your forms. Proceed by steps, if you are happy with the first one then adjust the color with [Ctrl]+[U] to make it as close as possible to the color of the face. If it is too different from the color of the face, pick new color values with the eyedropper.

Digital Pixels (22).jpg


23-Again and again
Create a new layer for each new path you want to change the brightness of, in order to give it more depth to change the brightness of each one to achieve more relief. Continue until you reach the desired effect. We must now create a selection of all these layers to correct their color and brightness, to achieve exactly the same color of the face.

Digital Pixels (23).jpg


24-This is the end!
All you have to do is reproduce the same steps for the arm. Of course don’t forget to make adjustments in color and contrast, in order to complete your image correctly. To do this, create an Adjustment Layer Brightness>Contrast (do not use light, it’s better to use adjustment layer curves and to lighten with curves if necessary). Add an Adjustment layer hue/saturation and other mixing layers. With a little practice you will beable to perform all these steps naturally.

Digital Pixels (24).jpg


by Delacour Benjamin

This tutorial comes from the magazine .PSD Photoshop.
You will find more of them, as well as free downloads of the complete issues of the magazine on http://psdmag.org.


Technorati Tags :
|