PUSS

nothing

2010-10-08T13:29:00.001-07:00

nothing

Stencil_Art

2010-08-29T05:22:00.001-07:00

Create Photoshop Stencil Art – Psd Premium Tutorial

By: Mark Mayers

Urban art has fast become the de-facto graphic style for practically all things associated with youth culture; extreme sports, such as skateboarding, clothing and music industries have all been heavily influenced by its gritty, low-brow appeal. So in today's tutorial, I'll show you how to re-create a popular style of stencil graffiti art without getting your hands messy or winding up in jail!

Final Image Preview

Let's take a look at the image we'll be creating.

Tutorial Details

Program: Adobe Photoshop CS2+
Difficulty: Intermediate
Estimated Completion Time: 2 Hours

Resources

You'll find some files in the "source" folder. You'll also need the following stock photography to complete this tutorial.

The medium version of the rap artist
The medium version of the DJ
The medium version of the disco girl
Speaker
The medium version of the girl DJ
Grunge wall one
Grunge wall two
Grunge wall three
Grunge wall four

Step 1

Open the rap artist photo. Because the image has a plain background, it's going to be a relatively simple task to isolate the figure.

Grab the Magic Wand Tool (W) and select the Add to selection in the Options bar, then set the Tolerance to 30 and also check the Anti-alias and Contiguous buttons. Now click on the background to make an initial selection, then continue clicking the remaining background areas to add to the selection.

Step 2

Hit Shift + Command/Ctrl + I to Inverse the selection, then Command/Ctrl + J to copy the selection as a new layer. Now disable the visibility of the "Background" layer to view the image in isolation and save, preserving the layers to a convenient location.

Step 3

The DJ image also has a plain background, but because of the overexposed areas around his arms; and the fact want don't want the cable around his neck, paths are the only option to accurately isolate the figure.

Set the Pen Tool (P) to Paths, then check the Add to path area in the Options bar. Now draw closed path around the figure as indicated in red, excluding the protruding cables around the upper neck. Next, select the Subtract from path area option to plot the inner sub-path for the left arm.

Remember, you can fine-tune your path at any time by holding the Command/Ctrl key to access the Direct Selection Tool to adjust individual direction/anchor points as required.

Step 4

Command/Ctrl-click your path thumbnail to generate a selection, copy as a new layer and disable the visibility of the "Background" layer as before. Add an empty layer at the top, then Command/Ctrl-click the middle layer thumbnail (or path) to generate a selection.
Next, set the Clone Tool (S) to Current & Below and remove the upper cable using a medium, soft-edged brush. Don't sweat over perfection here, because any fine detail will be lost when the stencil effect is applied later. Now hit Command/Ctrl + E to Merge Down the retouch layer, then save, preserving layers to your preferred location.

Step 5

Next, we'll use a combination of techniques to extract the disco girl. First, go to Select > Color Range, click anywhere on the yellow background with the eyedropper, set the Fussiness slider to 150, check the Invert button and hit OK.

Step 6

Switch to your Channels tab and click the Create new channel icon at the foot of the palette. Press D to set the foreground/background colors to their default black/white setting, then hit delete to fill the active selection with white on the new channel.

Step 7

Press X to swap the foreground color to white, then select the Brush Tool (B) and use a medium, hard-edged tip on the new channel to remove the remaining black areas within the figure.

Step 8

Next, we'll increase the contrast of the channel to ensure an accurate selection for the next step; press Command/Ctrl + L to access the Levels dialogue box and change the black point and mid point Input sliders as shown.

Step 9

Command/Ctrl-click the channel mask's icon to load white as a selection, then target the top RGB composite channel. Switch back to your Layers tab, copy as a new layer, disable the visibility of the original layer and save, preserving layers as before.

Step 10

Use the same technique to extract the speaker as you did in Step 1 and save, preserving layers again.

Step 11

We'll use a similar path/channel extraction technique as earlier for the girl DJ. Draw a closed path around the figure, keeping well inside the strands of hair as indicated in red. Now create the inner sub-paths for the headphones.

Step 12

Switch to the Channels tab and cycle through each channel to determine which holds the most contrast for the hair – in this instance it's the blue channel. Drag its thumbnail over the Create new channel icon to duplicate it. Next, apply a Levels adjustment to the duplicate channel and set all three Input sliders as shown.

Step 13

Generate a path-based selection and fill with black on the duplicate channel.

Step 14

Hit Shift + Command/Ctrl + I to Inverse the selection, ensure the foreground color is set as white, then use a large, hard-edged brush to paint over the top and bottom grey areas, but be careful to leave the hair intact.

Step 15

Invert the channel to convert the figure pixels to white. Now activate the visibility of the top RGB composite channel to check the channel mask. At this point you can still modify the channel by painting with either white (to reveal), or black (to hide) as required.

Step 16

Once you're happy, load the channel mask as a selection and switch off its visibility. Target the top RGB composite channel and switch to your Layers tab. Copy the selection to a new layer, turn off the original layer and save, preserving layers to your chosen destination.

Step 17

With all our source files now extracted and saved, let's move on to assembling the composition. Create a new portrait canvas 2008 px x 2835 px in RGB Mode with the Background Content set to Transparent. Next, drag the DJ in as a new layer, label it "Figure 1" and position top centre.

Step 18

Add the disco girl as a new layer and label it "Figure 2", then add the speaker and name it "Speaker 1". Next, hit Command/Ctrl + T to re size and position as below.

Step 19

Place girl DJ as a new layer and label it "Figure 3". Duplicate "Speaker 1", hit Command/Ctrl + T, then hold Control (right-click) to select Flip Horizontal and Shift-drag to the opposite side of the canvas and rename it "Speaker 2". Now place the rap artist as a new layer and label it "Figure 4".

Re size/transform your layers as required, then eliminate any excess, such as the base of "Figure 2" by drawing a rectangular selection and hitting delete.

Step 20

We now need to convert these layers to monotone and also unify their tonal range. The most flexible way to achieve this is to modify each layer non-destructively, rather than using a single overall adjustment.

Target your initial layer ("Figure 1"), hold the Option key and select Black & White from the Create new fill or adjustment layer icon situated at the foot of the Layers palette. Check the clipping mask option in the next window, then select the Green Filter from the Preset drop-down menu in the next dialogue box.

Repeat the process to clip a Levels adjustment layer, then set all three Input sliders as below.

Step 21

Clip the same adjustment layers to "Figure 2", but use the Infrared Black & White Preset and set the Input Levels as shown.

Step 22

Clip a Neutral Density Black & White Preset to both "Speaker" layers, then a clip a Levels adjustment using the same settings to these layers as well.

Step 23

Clip an Infrared Black & White Preset to "Figure 3", then clip a Levels adjustment and copy the settings as below.

Step 24

Finally, clip a Neutral Density Black & White Preset to "Figure 4", then clip a Levels adjustment and copy these settings.

Step 25

Use the Polygonal Lasso Tool (L) to draw a selection around the base of "Figure 4" and hit delete to reveal more of the speakers.

Step 26

Add an empty layer at the top of the stack and name it "Merged", then choose Image > Apply Image and hit OK in the next window to transform the layer into composite image.

Step 27

To keep things organized, target the top "Levels 6" thumbnail, then Shift-click the bottom "Figure 1" thumbnail (this also highlights the sandwiched layers). Now choose New Group from Layers in the fly-out menu situated top right on the Layers tab, then in the next window label it "ORIGINAL FIGURES". You can now delete the empty default layer.
Next, target the "Merged" layer, select Image > Adjust > Posterize and set the Levels value to three – this limits the tonal range and gives us the three solid areas of black, white and grey, which we'll use as a basis for the stencil effect.

Step 28

For a more authentic hand-cut stencil look, we need to simplify the edge detail; go to Filter > Artistic > Cutout and apply the following settings. Feel free to experiment with this filter to produce less or more detail as required.

Step 29

Now apply a further Levels adjustment directly to the "Merged" layer to intensify the contrast.

Step 30

Now select the white areas with the Magic Wand (W) – you may need to choose Select > Similar if you're not successful at first. Now copy the selection to a new layer (Command/Ctrl + J) and label it "White".

Next, temporarily turn off this layer's visibility, then generate a selection from the grays within the "Merged" layer. Add a new uppermost layer called "Blue" and fill the active selection with # 0497bb.

Step 31

The stencil effect still needs further work, but for now we'll start adding some background textures. Add grunge wall one as a new layer below the "Merged" layer and label it "Paper 1". Enlarge to cover your canvas, then use a large, soft-edged Clone (S) brush, set to Current Layer and remove the facial details within the poster.

Step 32

Open grunge wall two and choose Image > Rotate Canvas 90 degrees CCW. Add as a new layer above the previous one and name it "Paper 2". Enlarge to cover your canvas, then change the Blend Mode to Soft Light.

Step 33

Place grunge wall three as a new layer above the previous one and label it "Paper 3". Position top left, reduce in size and change its Opacity to 81%. Add a mask and use a variety of grunge brushes to blend the hard edges into the underlying textures. Now keep things organized and place the three paper layers into a group folder called "PAPER".

Step 34

Temporally disable the visibility of the "Blue" and "White" stencil layers. Target the "Merged" layer and rename it "Black". Select Image > Adjustments > Threshold and enter a value of 128. Now change the Blend Mode to Multiply to eliminate the white areas.

Step 35

Move the "Black" layer to the top of the layer hierarchy. Now change the "Blue" layer's Blend Mode to Linear Burn to reveal the underlying textures.

Step 36

Expand the "PAPER" group folder, duplicate the "Paper 2" layer and position it below the "Blue" layer. Change its Blend Mode to Multiply, then Command/Ctrl-click the "Black" layer thumbnail to load it as content selection, ensure "Paper 2 copy" is the target layer and choose Layer > Layer Mask > Reveal Selection.
Now modify the mask by using a selection of spray brushes to reveal white from the underlying layer – for best results, paint over the key features within the composition.

Step 37

Add a mask to the "White" layer and hide the majority by filling a selection with black using the Lasso Tool (L), then reinstate areas using a variety of spray brushes. Now clone directly on the "Paper 2 copy" layer to make the more interesting textures visible through the transparent parts of the stencil.

Step 38

At this point I wanted some extra canvas at the base to place more textures – this is a straightforward process and can be carried out at any stage during the image creation process. Press Option + Shift + C to access the Canvas Size dialogue box, change the Height to 26 cm, set the Anchor position to the top and click OK. Now place the "Black", "Blue", "Paper 2 copy" and "White layers into a group folder called "GRAFFITI 3".

Step 39

Add grunge wall four as a new layer below the "GRAFFITI 3" folder and enlarge/position to cover the bottom left of the canvas. Duplicate, then move right and up to overlap the original. Now use grab the Eraser Tool (E) and use a selection of grunge brushes to blend the seam. Merge the duplicate and name the resulting layer "Wall".
Next, Add a mask, then use the same brushes to erase the upper portion, place this layer within a new group folder called "GRAFFITI 1".

Step 40

Now let's incorporate some photos of street graffiti from the "source" folder for added grit. Place "Graffiti_1.jpg" as a new layer within the "GRAFFITI 1" folder and label it "Writing 1". Change the Blend Mode to Multiply, then apply a Levels adjustment directly to the layer as shown.

To blend the lighter a areas a little better, double-click the layer thumbnail to access the advanced blending dialogue box. Hold down Option and click the top right Blend If slider (to split it) and pull to the left.

Step 41

Place "Graffiti_2.jpg" within the same folder, change the Blend Mode to Multiply, then add a Levels adjustment as below.

Now apply the same advanced blending technique as the previous step.

Step 42

We'll need to extract "Graffiti_3.jpg" from its background before adding to the working file. Go to Select > Color Range, then in the next window click on the darkest blue area. Set the Fuzziness slider to 155, hit OK, then copy the selection to the clipboard.

Step 43

Paste within the same folder and name it "Writing 3", then change the Blend Mode to Multiply.

Step 44

Add "Graffiti_4.jpg" within the same folder, change the Blend Mode to Linear Burn and name it "Writing 4".

Step 45

Use the Color Range method again to select the red paint from "Graffiti_5.jpg" and copy.

Step 46

Paste as a new layer within the same folder, change the Blend Mode to Multiply and name it "Writing 5".

Step 47

Add a new group folder above "GRAFFITI 1" and name it "GRAFFITI 2". Drop a new layer within this folder called "Yellow overspray 1", then use an assortment of spray brushes sparingly over the composition using # cfd443. Repeat on a new layer called "Blue overspray", but use # 19bfdd.

Step 48

Add another layer called "Black overspray" and use a selection of black spray brushes around the outer edges of the figures and speakers – concentrate your brushwork around the base of the central figure, whilst keeping it fairly subtle elsewhere. Now set the layer to Multiply, add a mask, then use a combination of spray and grunge brushes to reduce the effect.

Step 49

Expand the "GRAFFITI 3" folder and add a new layer called "Yellow overspray 2" at the top. Create a layer-based selection from the "Blue" layer, then use some spray brushes to paint some random marks using # fff06e.

Note: If you find the "marching ants" annoying, hit Command/Ctrl + H to hide the visibility of the selection – just remember to deselect when you're done.

Deselect, then place another layer within the same folder and label it "White overspray". Now paint some smaller subtle white highlight sprays.

Step 50

All that remains is to add a "stencilized" logo. This is most effective with logos designed with bold, flat colors. Hit Command/Ctrl + O, then navigate to the "PSD_logo.ai" from the "source" folder to open the Import window. Set the Height to 2 cm, check Constrain Proportions, set the Resolution to 300, the Mode to Grayscale and click OK.

Step 51

Go to Image > Adjustments > Posterize and enter a value of 3.

Use the Magic Wand (W) to select the central grey bar and fill it with white. Now we need to create some "bridges" over the holes or "islands". Use the left arrow on your keyboard to nudge the selection over the "d" and fill with black. Repeat this for the "p".

Step 52

Select Filter > Noise > Median and enter a Radius of 2px to remove the hard corners.

Next, select Image > Adjustments > Threshold and enter 1 to eliminates any grays.

Step 53

Now add the logo as a new layer above the "GRAPHICS 3" folder and position bottom right. This will act as a temporary layer to create the spray paint, so don't bother to name it.

Step 54

Use the Magic Wand (W) to load the white logo areas as a selection, then go to Select > Modify > Expand by 1 px. Switch off the layer visibility, then add a new layer called "White".

Step 55

Now paint using an assortment of small, white spray brushes within the selection. Use the same technique to load the black logo areas, add another layer called "Red" and paint within the selection using # b11b15.

Step 56

Add another layer at the top and paint some red overspray areas – don't worry about obliterating the white areas, we'll fix that in the next step.

Step 57

Use the Eraser (E), again with the spray brushes to remove any unwanted red paint, then hit Command/Ctrl + E to Merge Down. Now add masks to both layers and use the brushes to hide/reveal paint as required. To keep the file tidy, delete the logo template layer and place the two remaining layers into a group folder called "LOGO".

Conclusion and Scope

If you prefer a more hands-on approach, this workflow can be used to create your own stencils for spray painting, or even applying designs to t-shirts using fabric dyes and a paint roller. The next step briefly outlines how to create a three-color stencil using channels. Remember, you'll be cutting these out with a knife, so bear in mind the output size and adjust the Cutout filter accordingly to simplify the outlines.

Once your design is finalized, store each color as black within separate channels – in this case I've used white, blue and black and stacked them in the correct spraying order. You'll also need to add registration marks on each channel (to pencil mark the surface to be sprayed), then label each channel with its corresponding color. This screen grab shows the white channel.

Here's the blue.

And here's the black.

To get an indication of how they sit together, enable the visibility of all three channels.

Now you need to create separate files for each channel. First, target the "White" channel and choose Duplicate Channel from the fly-out menu. Now set its Destination to New and label it clearly. Repeat this for the two remaining colors and print them out on the thickest card your printer will allow (for extra durability get them laminated too).
Finally, use an Exacto knife to cut out the black areas including the registration marks. When all three stencils are cut, you're ready to go – but remember, keep it legal and always use a designated area where graffiti is permitted.

2010-08-18T22:58:00.001-07:00

Create a Fantasy Painting With Photoshop CS5's Mixer Brush

By: David and Sarah Cousens

Without a doubt, my favourite new feature in Photoshop CS5 is the Mixer brush. When you see the demos of people using it, it looks great, but when I first got to use it, I was a bit confused. Each brush has 5 different attribute settings and then another 4 canvas settings to get your head around. In this tutorial I will take you through some of the mixer brush settings and demonstrate how to use them to make a fantasy based image with 2 of the biggest rats ever to blight a city. Let’s get started!

Final Image Preview

Let's take a look at the image we'll be creating.

Tutorial Details

Program: Adobe Photoshop CS5
Difficulty: Advanced
Estimated Completion Time: 3 Hours

Resources Used

The following resources were used to complete this tutorial.

Before You Begin

For those of you with any version of Photoshop older than CS5 you will still be able to follow most of this tutorial, and certainly all of the art theory here should still be useful to you, but the mixer brush features are one of Photoshop CS5's main selling points to artists and are a good step above what you can achieve in older versions. A word of warning: The Mixer brush is a very complex thing for Photoshop to run and you may find that you paint faster than Photoshop can handle resulting in a crash, so save often. I learned this the hard way.
Before we get started: a very quick explanation about the mixer brush settings in the Brush Panel. - Bristles is pretty self-explanatory, the higher the number, the more bristles you have in your brush. You can get some interesting results with a very low bristle count. - Length is generally better when set to a high percentage as the bristles have more likelihood of dragging on the canvas. - Thickness you don't really need me to explain - Stiffness is one of the more important settings as a lower degree of Stiffness means that the bristles will splay in different directions and give a much more natural effect than brushes have previously in PS. Lowering the Stiffness percentage will make your brushes a lot more interesting and versatile. - Angle is the setting I've played with the least; I'll tell you more when I know it - Spacing is the same as it is in previous versions; increasing the spacing means the brush will re-draw itself less frequently. In summary, brushes with fairly long and soft bristles give the best painting results. Right, enough chatting, let's get to work!

Step 1

Start up by setting your workspace to "Painting" which you can find in the top right of Photoshop. Then open a new A4 PSD file at 300dpi. Fantasy based illustrations are generally more convincing when they're informed by reality so find some reference of rats to help you when you're sketching out your rough. I used some photos of my old pet rat George, but rats are all pretty similar so a quick Google search will be fine here. Create a layer and name it "Roughs". Select the Brush Tool (B) and use the "DC pencil" brush (in the download pack) to draw your roughs, but don't worry too much about being accurate or working things up to a finished level as we'll deal with a lot of the detail in later stages.

Step 2

When you're happy with your roughs, create a new layer called "Lines" and use the "DC inking CS5" preset to draw in your lines. Again, don't feel the need to be too detailed with your lines, as we'll be suggesting a lot of detail in the painting stages. Because we've kept the roughs vague I always have a bit of fun at this stage and improvise lots of details as I go along.

Step 3

Open the photo of the sky. Select All (Cmd/Ctrl + A) then Copy and Paste it (Cmd/Ctrl + C and Cmd/Ctrl + V respectively) into your main image and then Free Transform it to fit the top of your image (Cmd/Ctrl + T). Don't worry about keeping it in perspective as we're just using this as a basis for some mixer brush painting later. Fill the background with Foreground Colour (Shift + backspace) with a neutral purple colour to help set a colour scheme, then switch to the Linear Gradient tool (g) and use a darker purple to start adding a few small gradients from the bottom of the page heading up to start adding a feeling of depth to the image. Never paint on a white background as it'll throw your perceptions of colours.

Step 4

Time for some mixer brush fun. Add a new layer and name it "Background Mixer Layer". Select a Mixer brush (B) with the following settings: Shape: Round Point, Bristles: 81%, Length: 163%, Thickness: 1%, Stiffness: 1%, Angle: 0, Spacing: 2%, and in the Mixer Mode dropdown menus select the following; Wet: 23%, Load: 96%, Mix: 60%, Flow: 100%. Because we've ticked "Sample all Layers" you'll need to hide the visibility of the Lines layer for now (click the eyeball icon in the layers palette) because we don't want the black lines mixing into our sky. Hold Alt to bring up the eyedropper to pick colours from the photo of the sky and move your brush around the canvas much as you would with a real brush. The mixer brush eyedropper will pick a variety of colours unless you tell it to Load Solid Colors Only in the drop down menu near the top left of Photoshop.

Note: You'll notice that your brush cursor will change it's configuration depending on how you hold your stylus, but if you're new to the mixer brush it's worth turning on the Bristle Brush Preview which you can find in the Brush Presets tab. This will show you what your brush is doing in real time so you'll get a better idea of what your stroke will be like. For example, if you hold your stylus directly vertical you will get a very thin line, whereas if you tilt it sideways you will cover a much larger surface area much like when you paint with the side of a brush.
Note: One of the cool things about the mixer brush is that when you have Sample all Layers turned on you can blend in colours from every layer that you have visible whether it's above or below the layer you're working on without it affecting them. In this case you'll see that we're blending all of the colours from the stock photo but if you hide the mixer layer the photo is still intact, so you can experiment with your painting and if you don't like it, delete it all and start again as the photo is untouched.

Step 5

We've played around with the background enough for the time being so make the Lines layer visible and create a new layer (Cmd/Ctrl + Shift + N) to start colouring the rats. We don't want to pick up any of the background colours here so make sure you untick Sample All Layers. Still using the same brush, paint the main rat with a mixture of blood red and dark red, building up and mixing the colours as you go. The bristles of the brush aren't very stiff which means they're great for mixing as they splay everywhere but this also means they aren't great at keeping within the lines. Don't worry about this for now as you can just erase the overlap when you're done.

Step 6

With both of the rats painted, make a new layer called "Secondary elements" where you can paint in the car, the bin and the signpost. Make your painting here very distressed and messy. There should be nothing left in this scene that looks undamaged. We don't know whether the rats have caused the damage or whether they're just witnesses to it. Use a mixture of purples blues and grays in keeping with the colour scheme.

Step 7

Create a new layer called "City" and paint in the city blocks and road. For this we need a new set of Mixer Brush settings; Shape: Flat Angle, Bristles: 7%, Length: 186%, Thickness: 1%, Stiffness: 30%, Angle: 0%, Spacing: 1% and in the dropdown menus choose Wet: 1%, Load: 100%, Mix: 1%, Flow: 100%, and untick Sample All Layers. Things in the distance become blurry so the edges don't need to be too defined. Make sure the city buildings and road look dark and moody as we're going for a mysterious and pessimistic tone with this image. Add a small road fading into the distance which points towards the red rat to strengthen his position in the picture.

Step 8

Create a layer named "Dark Foreground Elements" and paint in some pure black bits of half destroyed buildings. These serve two main purposes, the first is to create a sense of depth between the focal points and the viewer, and the second is that we can use them as a framing device with subtle 'pointers' that lead the viewers gaze towards the main areas of interest by pointing at them and stops the audiences attention from wandering to the edges of the image. When you're done with the foreground layer you'll need to add a Gaussian Blur to increase the depth of field feeling it gives but it's always worth holding off until near the end of the image before doing this as if you need to alter it at a later stage it's trickier to add elements and make the blur match.

Step 9

Create a new layer above the rats called "Shadows" and tick "Use previous layer as clipping mask". Set the layer to Color Burn and 50% opacity. Using a dark purple colour, paint the shadows on the rats. Because the clipping mask only lets you paint on existing pixels you don't have to worry about keeping in the lines. When using a shadow layer, always try to use local colours because they will help tie the images colour scheme together. Here we use purple, but if the sky were blue we'd use a blue colour to add the shadows. All colours are affected by the colours around them.

Step 10

Create a new layer called "Highlights" and set it to 'Overlay' and 50% opacity. Pick a light pink from the sky and paint over areas that more light would hit such as the red rat's head and back and the road by the car. We're assuming there's a light source somewhere on the left hand side of the scene.

Step 11

Create a new layer called "Rim lighting". Rim lighting is a technique used to give your images a greater feeling of depth and draw more attention to your focal points by highlighting the contours of your subjects and making them stand out from the background. Rim lighting (also known as back lighting) should normally come from somewhere behind the focal points to help definition of the forms. Use a solid pink to highlight the left-hand edges of the foreground elements (in this case the rats and the car). Concentrate on only adding rim light to the areas where light would hit and be aware that certain body parts would block the light from landing on all of one side (eg. Only portions of the red rat's tail are being hit by the rim light as its arm and head are casting shadow over a lot of its tail). Use a less saturated pink for the blue rat's rim lighting because light appears less saturated the further away it is from the viewer.

Step 12

Add some rubble in the mid-ground on the secondary elements layer to suggest the destruction in the area. Adding small touches like this in the background can add to the overall narrative and make the viewer question what went on in the scene. Back on the rim lighting payer, paint in the glowing effects on the eyes of the rats. Draw in the strange glowing scars that surround their eyes. Again this will let the audience know there is something more to these rats than being simply overgrown.

Step 13

Create a new layer called "Edits" and add a small yellow radial gradient over the eyes to make them appear as if they're glowing with power. With all glows, use a radial gradient set to approx 25% opacity and "foreground to transparent" start with the glow colour first (in this case yellow) and then use a smaller pure white radial gradient in the middle of the glow's source, as the centre is always brightest.

Step 14

Create a layer called "Overlay" and set the blending mode to Overlay. Use the radial gradient tool, again picking a light pink from the sky, and apply it in small areas that light would hit the areas in both the foreground and background. Overlay layers are brilliant as they react with the layers below but don't obscure them so the colours in your image will become richer without covering any details you have painted. Also use your paintbrush with the same pink and add a few brush strokes over the highlighted areas to enhance the variation further.

Step 15

Now we're nearing the end of the illustration we can start playing around with blurring elements, so click on the "dark foreground elements" layer and apply a Gaussian blur of 5.5 pixels (Go to Filter > Blur > Gaussian Blur) which will knock it out of focus nicely. Use the lasso tool to draw a selection around the skyscrapers on the "city" layer and apply a Gaussian blur of 3.9 pixels.

Step 16

Open up a concrete texture jpeg (we used texture number 170843, but anything similar could work just as well) select all of the document and then copy and paste the contents back into the main image above the "city" layer and below the "secondary elements" layer. Free transform (press Cmd/Ctrl + T) it so that the texture covers the roads just below the signpost and set the blending mode to Overlay. Apply a Gaussian Blur of 1.1px just to reduce the detail a little so that the texture is still present but not too sharp as the human eye is naturally drawn to sharper definition. We want the floor to support the image, not steal attention from it.

Step 17

Back on the "Edits" layer use a variety of speckled brushes to add dust particles in the air, bits of dirt on all of the foreground elements and some small energy flares from the rat's eyes. Lock the visibility on the Lines layer by clicking the small padlock icon in the layers palette. Much like a clipping mask this means that you can't add any new pixels to the layer, you can only alter the existing ones. Use appropriate colours such as red for the fur and pink for the tail and paint over the black lines to make them blend with the picture more. You can also add some reflected light from off of the rat's tail onto the lower side of his arm to give it more definition and stop it blending into the rest of his body.

Step 18

The signpost is a bit too sharp and is only a minor focal point so we need to make it stand out a little less. Use the lasso tool (l) to draw a very close selection around the signpost and press Shift + Cmd/Ctrl + C to copy all visible layers and then Paste it (Cmd/Ctrl + V) above the "Overlay" layer in the layer stack. Apply a Gaussian Blur of 2.8 pixels to make the definition a little softer which will make the signpost recede into the background.

Note: When you get near to the end of your painting it's always worth taking a look over it and working out which areas would be blurred in a photo. It's then a simple matter of repeating what you've just done with the signpost here and blurring the elements after you've copied them to their own layer. It doesn't have to be individual items either; this will work well on sections of a person's body too eg. If a character was swinging their arm backwards in preparation to punch someone a Copy Merged section of their arm would look great pasted onto it's own layer with a Motion Blur applied to it (Filter > Blur > Motion blur).

Step 19

To stop the picture looking too "digitally clean" we can add a digital grain which will add a little texture without affecting your colours like dropping in a paper texture can. I got this tip from the excellent Dan Luvisi. Create a new layer at the top of the layer stack and name it "grain". Fill the layer with a colour of R:125 G:125 B:125, then go to Filter > Noise > Add Noise, with amount set to 400%, distribution to Gaussian and tick the monochromatic box, and click ok. Then select Filter > Brush Strokes > Spatter, with a spray radius of 10 and smoothness 5, and click ok. Then hit Cmd/Ctrl + F to repeat the Spatter effect again. Finally go to Filter > Blur > Blur (NOT Gaussian Blur) and set the layer to Overlay and 10% opacity. The grain effect will obviously look different on each image you apply it to so you'll have to alter the opacity manually and judge it by eye. As a rule of thumb the opacity should be somewhere between 5% and 20%. Any more than that and the texture starts to overpower the image and becomes distracting.

Step 20

In traditional painting a glaze is a layer of paint thinned with a medium so that it becomes fairly transparent and is then applied over the finished painting to give it a little extra warmth and texture. We can recreate a similar effect by making a new layer at the top of the layer stack set to Soft Light and 50% opacity then select the mixer brush and set the mixing mode to "moist" from the dropdown menu and use a light pink to paint over the image, ensuring "Sample all layers" is checked to get the most from this effect. Don't worry about the black lines affecting anything here as the effect is very subtle.

Final Image

link down http://hotfile.com/dl/63105046/b30b41a/Premium_69_Fantasy_Rats.rar.html

2010-08-18T22:46:00.000-07:00

Create a Surreal Matte Painting in Photoshop

By: Daniel Johnson

In these days of digital special effects, Adobe Photoshop is a key ingredient to the creation of matte paintings. This tutorial will take you through the steps to make your own matte painting using photographic and painted elements. This image was originally created as a background for a Flash animation. Photoshop CS3 was used, but any Creative Suite version should work.

Tutorial Details

Program: Adobe Photoshop CS3+
Difficulty: Advanced
Estimated Completion Time:4 - 5 Hours

Final Image Preview

You can find the Photoshop PSD file in the Source directory that came in the ZIP file that you downloaded. You may wish to look through it briefly before you begin. A preview of the final image is below. You can view the large version here.

Step 1 - The Sketch

Even though most matte paintings these days are based on photos, many matte painters like to start off with a hand-painted conceptual sketch. This is a great way to try out several ideas, color schemes, and compositions to see what works. Obviously, strong painting and drawing skills are a must. This little sketch was quickly thrown together using a Wacom stylus. It established the overall mood, as well as the surreal skewed perspective that I would be attempting (as if a road floating above the clouds weren't surreal enough).

Step 2 - The Initial Photo

This is the photo that will form the foundation or background of the painting. I will be basing the overall lighting and color scheme from it. The photo wasn't quite wide enough for my painting, so I have duplicated and mirrored it. I only needed a bit more sky; everything else will get covered up. The Horizon and sky will work, but I'll need more clouds to extend to the bottom of the painting.

Step 3 - Adding Cloud Photos

Next, I brought in some aerial photos of clouds. They didn't match the hues or values of my horizon image, so they needed some adjustment. I always try to work non-destructively as much as possible, and Adjustment Layers are a great way to do this. I added a Levels adjustment to the cloud layer and moved the midtone slider to the right to lower the overall values. Now that the values were right, I worked on the color. I sampled a blue from the background and filled a new layer above the cloud layer. I set this layer's Blend mode to Color and lowered the opacity to 91%, or until it matched. I actually duplicated the same cloud photo a couple of times and moved them around to show different areas of clouds, masking off parts that I didn't want. All of these cloud layers with their Adjustment and tinting layers were placed behind the horizon/sky photos, which were given layer masks. I painted on these masks with a soft, scatter brush to mask out the ground and let the clouds on the bottom layers show through. You can see here a sample of what those masks look like. Again, A Wacom or similar pressure-sensitive tablet is essential for this kind of work.

Step 4 - Adding Highlights

Now my added clouds need some highlights to make them pop and integrate them into the scene. I sampled a pink color from the sky and filled a new layer above the clouds. I tried Screen and Overlay modes to see which I liked best, eventually settling on one of each. But the pink highlight color was affecting the entire range of clouds and I only wanted it to affect the highlight areas. I could have tried to paint on a mask or make one from the channels, but I decided to use Blend If instead. This little-used Layer Style feature is quite powerful. Double-click a highlight layer to bring up the styles and adjust the sliders on the Blend If: Underlying Layer. Blend If really means "Make Transparent If" and it will knock out colors on this layer. I want to make the parts of this layer that are over the darker cloud areas transparent. To do that, I take the black Underlying Layer slider and move it to the right. The pixels on this layer will become transparent if they are over any areas that are equal to or darker than the brightness value of the slider's position. The only problem is that the pixels are either 100% or 0% opaque, leaving a hard, jaggy edge. To fix this, you must use what has to be the most hidden feature in Photoshop. Hold down ALT/OPT and click on the black slider to split it apart. Everything to the left is fully transparent and everything to the right is fully opaque. The amount of space between the two halves controls how much softness or anti-aliasing you have. Pretty neat, huh? But I also painted in some highlights by hand over darker areas using the same color on a different layer.

Step 5 - Bringing the Background Together

Even after the photos have been joined with masks and Adjustment layers, backgrounds will still need some hand painting to tie everything together. Even with all the different options and custom brushes available in Photoshop, sometimes the simple ones work the best. One that I like to use a lot and works well in this situation is the Chalk 11 pixel brush that comes with one of Photoshop's default sets. The Opacity Jitter needs to be set to Pen Pressure and I changed the size as needed. Sometimes I add Scattering to randomize my strokes. I sampled colors from different areas of the underlying layers and painted on a new layer to cover any seams between photos and add the necessary detail. As I final step, I added Levels Adjustment layer with a radial gradient on its mask to brighten the center of the sky where the sun supposedly is. With matte painting, you can literally create your own world.

Step 6 - Creating the Concrete Blocks

The concept called for a wall of immense concrete blocks. Even though it will eventually have a skewed perspective, it should be created flat with vertical sides and horizontal top and bottom. I started a new file and used the Rectangular Marquee tool to create rectangular selections and filled them with PMS 403. I often start with Pantone colors, since they are a consistent selection of colors and have nice ranges of dark to light. The grays are particularly useful. To create the edges on the blocks, I used Layer Styles. One of the most important is Inner Glow. The secret is that glows don't have to be light. Change the Blend mode to Multiply and choose a dark color and they become a dark, weathered edge that adds to the realism. For the texture, I used a photo of concrete over the background color and edge effects, on a layer set to Overlay mode at 30% opacity. This is usually more effective than trying to create a texture from scratch with filters and it saves a lot of time.

Step 7 - Creating Streaks

Many architectural structures will have streaks created by being out in the elements. There is a great way to do this, but it takes a few steps and it has to be done with channels. I created a new alpha channel and then filled a narrow, vertical selection with some Render Clouds and the default black/white colors. This is to give the filter something to start with. I then applied Filter > Stylize > Wind. This is a great filter for doing many things except wind. I used the settings you see below. One pass usually isn't enough, so you can apply the filter several times until the streaks are as long as you need. An easy way to do this is to use the key commandCmd/Ctrl + F. I then applied some Gaussian Blur and then a Levels adjustment. The blur obviously softens the edges and the adjustment controls the density of the final streaks. By varying the amount of blur and tonal adjustment, you can create many different kinds of streaks: long and thin, soft, short and blobby, and so on. The one problem is that Adobe thinks that wind only blows left and right and the best uses of this filter require up or down, so the channel has to be rotated 90º before you load a selection. The last step is to create a new layer in Multiply mode and fill it with PMS Warm gray 6. I then took the Opacity down to 50%. I also created some shorter, softer streaks for the seams in the concrete, using the same technique, but with more blur and less Opacity.

Step 8 - Finishing the Wall

I added another photo of concrete texture and set the Blend mode to Multiply and the Opacity to 15%. A few more dark gray gradients in Multiply mode at the top and bottom of the image helped to darken it a bit more and then I selected All, Copy Merged, and Pasted the wall into my matte painting file as a new layer. Now it just needs to be transformed into position using Distort and Skew. I couldn't do this in CS3, but in CS4 and later you can convert the wall to a Smart Object and still apply these same transformations. That's very helpful if you need to go back and edit the original. To give the wall a shadow and highlight edge, I used Layer Styles. For Color Overlay, I picked a blue from a shadow area of my image and used Multiply mode. The Bevel and Emboss highlight color was picked from the background image as well, but the Blend mode was changed to Color Dodge, with gives intense colors that are great for suggesting illumination. As a final touch, I used a layer mask to paint out the bottom fading into the clouds and cut a little chunk out of the edge of the wall along the joint of the blocks. It's the little things like this that can really make your image stand out.

Step 9 - Creating the Monitor With Vector Shapes and Layer Styles

For the monitor hanging on the wall, I used Photoshop's own shape tools to create vector Shape layers. I started out with the Rounded Rectangle tool to make the initial rectangle with PMS Cool Grey 4. Then I held down ALT/OPT with the same tool to cut a rectangle out of the middle. The shapes were then transformed into position using my perspective guide lines. Layer Styles were added to give it a metallic bevel, reflected gradient, and the same Color Overlay as the wall. The side edge was also done as a Shape layer with Cool Gray 9. To give the monitor screen a bit more edge and depth, I copied the inner rectangle to a new Shape layer and set its Fill to 0% so that the shape wouldn't show, but its layer effects would. A Drop Shadow with a hard edge on the upper left helped to show that inner edge. There is also a rectangle right on top of the wall with Drop Shadow and dark Outer Glow effects to help attach it to the wall. I also added some streaks underneath, this time with a rusty brown to suggest some corrosion of metal. Using vector shapes within Photoshop is an extremely useful but probably underused technique.

Step 10 - Building and Texturing the Roadway

I built the roadway as a vector Shape layer with Photoshop's Pen tool. I know many tutorials would rather have you make a path, load a selection from it, then fill that on a new layer, but why introduce an unnecessary step? And if a shape starts out as vector, there is no need to rasterize it; keeping it vector makes adjustments to it much easier. The road texture was a simple repeating pattern for use as a texture map in 3D programs. Keeping a library of images like this will really help your Photoshop work. Because the road curves, I had to transform another piece of texture at the first curve and do some hand painting to blend everything together. This might have been a good time to try a Warp transformation. As a last step, a layer in Multiply mode was put on top with a dark blue sampled from the background to hold the shadow cast by the wall. All of these layers use the bottom vector Shape layer as a clipping mask.

Step 11 - Finishing the Road

The far end of the road has a layer with a gradient of blue chosen from the midtone background areas to fade it into the distance a bit. Then I added a highlight layer of the pink from the background over the road in Color Dodge with the Fill set to 45%. Lowering the Fill instead of the Opacity is a good way to reduce the strength of the color on that layer, while still retaining some intensity to make things seem luminous. In this case, the road isn't a light source, but I do want to suggest a very shiny surface that picks up a lot of light from the setting sun. The highlight edge and stripe were done on separate layers with effects and some I added some texture by adding the Noise filter to a layer filled with 50% gray and set to Overlay. Midtone gray is transparent in Overlay mode, so you just get the lights and darks. It's a great way to add texture but keep it on a separate layer. I added a mask to the bottom vector Shape layer and painted out bits of the far end of the road. Since all of the clipped layers 'inherit' the mask and Layer Styles of the base layer, they all get masked as well.

Step 12 - Transforming and Masking the Text

The concept called for skyscrapers in the form of words and phrases sticking up out of the clouds. Now I don't know what all of these mean, but they meant something to the client, so that's all that matters. Initially, I tried to set this part up in Illustrator using its 3D effect, but it doesn't have enough control over the perspective, so I ended up doing it all by hand in Photoshop. I started with type layers and used Impact because it was a very heavy, sans-serif typeface and I needed the letters to be as close together and blocky as possible, because they were going to represent the sides of buildings. I rasterized each type layer and transformed them into position with Skew and Distort, using my perspective lines as guides. I then merged them all into one layer. If I had to do it again, I would probably not rasterize the text, but rather convert it all to vector shapes by right-clicking the text layer and choosing Convert to Shape from the layer's drop-down menu. Then I could have had all of the words as shapes on one Shape layer. But this still works. I added some of my usual Layer Styles, but the Outer Glow was extending too far into the sky. I created a layer mask based on the selection you see here, then checked the Layer Mask Hides Effects option, which is unchecked by default. That way, the exterior effects won't appear in the black areas of the mask. This is the only way you can try to mask out effects on layers.

Step 13 - Texturing the Building Fronts

I added patterns created from tileable skyscraper textures and transformed them into position. I keep a library of patterns like these and they are extremely useful, often for things other than buildings. Each one is on its own layer and they use the word front layer as a clipping mask. The textures are all Normal at 100% Opacity, so they completely cover up the color of the bottom layer, but they inherit its Layer Style. In addition, each one has its own layer effects as well. To use the same Layer Style on multiple layers, right-click a layer with effects you want, choose Copy Layer Style from its drop-down menu, then SHIFT + click the other layers, right-click over them, and choose Paste Layer Style. It's that easy. The building faces behind the words were made with the Polygonal Lasso tool on a layer below all of these. This same selection was used to create the layer mask in step 12. I duplicated all the building texture layers and clipped the duplicates to this bottom layer. They look darker because of the dark Outer Glows and Drop Shadows on the word front layer. Also, most have a Darken Color Overlay in their Layer Styles. You may also notice that I offset these textures just a bit to suggest that they are recessed.

Step 14 - Creating the Building Sides

Now the building fronts need some sides added to give them some depth. I created a new layer just for perspective lines for the sides. The lines converge at a vanishing point on the horizon. I made selections with the Polygonal Lasso tool and picked light and dark gray-blues from the background to fill these selections. The sides for the ORDER and TRACKING were done on separate layers. A subtle highlight was added to the edge facing the sun with Bevel and Emboss layer effects.

Step 15 - Texturing the Building Sides

The textures on the front of the buildings need to wrap around the sides. I used the same patterns on separate layers, clipped to the flat side layers, each on its own layer, just like on the front. I transformed them with Skew and Distort. I also figured that the CRM would be casting a shadow on the top of TRACKING, so I added that on a separate layer in Multiply mode.

Step 16 - Making a Mask from Channels

The dark areas on the building textures are windows, so they should be much more reflective than the other areas. I would like them to catch a lot of light from the setting sun, but I don't want to add any more highlights to the non-window areas. I'll need a mask for this, but I don't want to create one by hand, but I should be able to do it procedurally with the channels. Whenever you need to mask off specific parts of an image, check the channels first. Since a mask is just a grayscale image and each color channel contains grayscale information, a channel can easily become the foundation for a very complex layer mask. First, look at the different channels: Red, Green, and Blue. Choose the one that has the most contrast between what you want to keep and what you want to mask out and duplicate that channel. On this image, they were pretty close, but I decided on Red. This should work, but the windows are dark and I want them to be light so that the reflection will show through that part of the mask, so I inverted the channel. Cmd/Ctrl + I is an easy shortcut for this. Then run a Levels adjustment on the layer. Select the black eyedropper and then click on an area in the channel you want to be black. That value and everything darker is now black. Do the same with the white eyedropper. Remember that in a mask, black conceals and white reveals. You will see the black and white sliders under the histogram move closer together. You can also adjust them by hand. The closer they are, the harder your mask edges will be and the farther apart, the softer your edges will be. You may need to select parts of the channel and give some areas different amounts of Levels adjustment, based on how dark and light they already are. When the channel is ready, load the white areas as a selection by pressing Cmd/Ctrl and clicking on the channel thumbnail.

Step 17 - Creating and Masking the Highlight Layer

Here you can see the selection that was loaded from the alpha channel. I created a new layer above the building texture layers and clicked the Add layer mask button. The selection was turned into a layer mask. Then I picked a warm orange color from the sky and filled this layer with a linear gradient going from foreground to transparent. The Blend mode was set to Color Dodge and the Fill (not the Opacity) was lowered to 80%. This added just the right amount of reflected sunlight in the windows, fading away toward the edge of the image. Now the words/buildings look just about done.

Step 18 - Painting in the Final Details

Some parts of the buildings still look a bit flat, so I painted in some fine details on a new layer: the curving windows at the top of the P, the roof and top edges of ORDER TRACKING, and a bit of architectural detail on the E of FINANCE. You often need to go in and do some touch-up painting as a final step.

Step 19 - Finishing the Reflection

It's about time to finish up the reflection and using the background photo is a good way to do this. I wanted it to be more opaque in some areas and less in others, so I started with filling a new layer and then fading back the Opacity of the fill, then adding a foreground to transparent radial gradient. I picked a medium blue from the background, but the color doesn't matter, since this layer will only be used as a clipping mask. A layer mask on this layer will hide everything except the windows. A copy of the background photo will be clipped to this bottom layer. I did it this way in case I wanted to place an additional mask on the reflection layer.

Step 20 - Reflecting the Buildings

If the windows reflect the sky, they would reflect other buildings as well. The ERP should have a reflection of the back of the CRM, and the large cement structure in the foreground should probably be there as well. Perspective lines are helpful for transforming and placing the reflected buildings, but I don't need to worry about being too exact; as long as it looks okay, it should do. The building reflections started with the same textures as their sources, but they were given Layer Styles to suggest a highlighted edge, included a Color Doge Bevel and Emboss and a Color Overlay of a background orange in Normal mode at 40% Opacity. When these two layers are clipped down along with the photo reflection layer, their Opacity is reduced and they only appear over the windows.

Step 21 - Adding Atmospheric Perspective

It's almost there, but to really sell it as being real, the distant objects need some atmospheric perspective. This basically means that the farther away something gets, the less contrast it has because there is more atmosphere between it and the viewer. This can usually be accomplished by tinting these objects with a color from the surrounding environment. To do this, I first created what is essentially a depth mask. I added a mask to a new layer, loaded selections from the various word/buildings, and filled those selections against the black background of the mask. The lighter the mask area, the more that part of the image will get knocked back. I filled this layer with a bluish-gray sampled from the background and lowered the Opacity until I liked it, or 30%. Now the darkest, brightest, and most saturated colors of the image are in the foreground and these distant objects look really far away.

Step 22 - Some More Hand Painting

For some reason, I did a bit more painting on the window reflections. This was done with a soft brush and just picking colors from the existing reflection layers. This smoothed out parts of the reflection and pulled things together a bit more. This layer used the same layer mask as the mask on the bottom-most reflection layer that is acting as a clipping mask for all the others. This is the time to give the entire image a good look over and do any final hand painting to cover up hard edges, seams, or other problems.

Step 23 - Painting Shadows on the Clouds

With the sun at the far right of the image, all the structures should be casting shadows to the left. I picked a blue from the background and painted on a new layer in Multiply mode with a soft, natural brush to create the shadows cast by the buildings, both far and near. This layer was right above the clouds and I adjusted its Opacity until the shadows looked right, which turned out to be 35%. For the shadow cast by the road near the left edge of the image, I didn't want to go any darker than the shadows that were already there, so I painted on yet another layer, this time in Normal mode. I picked a color from the shadow area and just continued that same value along where I thought the shadow would fall.

Step 24 - Creating Some Light Wrap

As a finishing touch, I decided to add some light wrap along the edge of the concrete wall. This effect, sometimes called 'bloom' is created when a strong light source is behind a foreground object and appears to bleed over it a bit along the edges. It can help to suggest intensity and illumination and can easily be done with an Inner Glow. I created a new layer above the concrete wall, loaded the wall's shape as a selection, and then filled on the new layer. The color doesn't matter, because I set the Fill to 0 so that only the Layer Style would show. Then I made an orange Inner Glow, but I only wanted it to appear at the horizon, where I wanted the sun to be. Until Photoshop gives us the option to mask Layer Styles like we can on Smart Filters (and they should), we have to be content with masking the entire layer. I added a white-to-black reflected gradient on the layer's mask, but the important tip here is to check the Layer Mask Hides Effects option, which by default is left unchecked. If you don't do this, you can get some very strange effects. But with this option checked, the glow is only visible along the white and lighter areas of the mask, so it's just what I wanted.

Final Image

And that should do it. Now is the time to step back and try to appreciate the overall image. It's possible that might need some Adjustment layers to do some final tweaking, but that is easy enough to do. I know it seemed like there were a lot of complicated steps here, but that's what it takes to put together a decent matte painting, even if you are primarily working from photos. I hope you enjoyed it and maybe learned something. I know I did. The final image is below. You can view the large version here.

link download http://hotfile.com/dl/63099489/5f8ea94/Premium_65_Surreal_Matte.rar.html

Smoke and Splash Effects

2010-08-17T06:39:00.001-07:00

Create Spectacular Smoke and Splash Effects - Psd Premium Tutorial

By: Mark Mayers

Today I'll walk you through the creative process of applying some cool liquid and smoke effects to both typography and images. You'll also discover how to combine 3D renders with Photoshop's Displace filter to produce those stunning "break away" effects that are currently in vogue. This is a comprehensive tutorial that weighs in at almost one hundred steps, so let's get started!

Final Image Preview

Let's take a look at the image we'll be creating.

Tutorial Details

Program: Adobe Photoshop CS2+, Adobe Illustrator CS2+, Maxon Cinema 4D R8+
Difficulty: Advanced
Estimated Completion Time: 4 - 5 Hours

Resources

You'll find some files in the "source" folder. You'll also need the following stock photography to complete this tutorial.

Paper textures
Cracked earth by Mike Smith
Paint splashes
The large version of this fashion model
Liquid inks
Sky
The small version of this Bonsai tree
Spheres
The standard version of this Parrot
Butterfly
Ladybird

Step 1

Create a new portrait document 2008 px x 2835 px in RGB Mode with the Background Content set to White. Add "stainedpaper3.jpg" from these textures, then hit Command + T and enlarge to cover the canvas.
Name the layer "Grunge 1" and place into a group folder called "BACKGROUND" Next, set the Clone Tool (S) to Current Layer and use a small, soft-edged brush to remove the hard crease as indicated.

Step 2

Place "stainedpaper8.jpg" within the folder, enlarge and label it "Grunge 2". Hit Shift + Command + U to Desaturate, then change its Blend Mode to Hard Light and lower the Opacity to 23%.

Step 3

Add "stainedpaper5.jpg" as a final texture layer, enlarge and name it "Grunge 3". Desaturate and change its Blend Mode to Overlay, but leave the Opacity as default.

Step 4

Set your Foreground color to #939598 (50% black), then add a mask to the "BACKGROUND" folder. Hold down Shift and drag a Linear Gradient from the bottom up using the Foreground to Transparent preset.

Step 5

Add the "All Cracked Up.jpg" as a new layer above the "BACKGROUND" folder and name it "Cracked earth". Desaturate, then squash vertically as shown.

Step 6

Press Command + T, then Control-click to select Perspective. Now pull the top right control point towards the centre.

Step 7

Set the "Cracked earth" Blend Mode to Multiply and reduce the Opacity to 71%. Add a mask and grab a large, soft-edged brush to gently blend the hard edges into the background.
Note: You'll achieve a better result by initially working at low Opacity, then finish off at full strength.

Step 8

Next, we'll modify the color value of this layer; hold down Option and choose Photo Filter from the Create new fill or adjustment layer drop-down menu situated at the foot of the Layers tab. In the following window check the Clipping Mask button, then pick Warming Filter (81) from the drop-down menu and set the Density to 55%.

Step 9

Grab the Type Tool (T) and add the words "go" and "CREATE" in black on separate layers. I used a serif font (Century Schoolbook). Keep your type at around 100 pt and centred using the Paragraph tab, then position to the bottom half of your canvas. Next, place your type cursor between any character pairs to fine-tune the kerning. You'll see that I've tightened up the spacing between the "A" and the 't" by eye for a pleasing result.
It's worth remembering that kerning adjusts the space between character pairs and should not be confused with tracking, which adjusts spacing between whole words.

Step 10

Open "15.jpg" from these paint splashes. Set the Magic Wand Tool (W) to a Tolerance of 55 and check the Contiguous button. Now click anywhere on the white background to generate a selection and hit Shift + Command + I to Inverse it. Next, go to Select > Modify > Contract by 1 px. Hit Command + J to Copy the selection to a new layer and trash the original layer.

Step 11

Desaturate, then hit Command + L to access the Levels dialogue box and set the Input and Output sliders as below. Now apply a Save As command to a handy location.

Step 12

Use the same workflow to isolate some other splashes - I used "4.jpg", "8.jpg" and "9.jpg".
Note: Because every image is different you'll need to adjust the Magic Wand's Tolerance and tweak your Levels settings accordingly.
When you're done apply the Save As command again.

Step 13

Highlight your first text layer thumbnail, then Shift-click to highlight the second one. Hit Command + E to Merge Layers, rename the resulting layer "text" and drop its Opacity to 20%. Place this layer into a new group folder called "TEXT". This layer will act as a guide to position the splashes.
Use the Lasso Tool (L) to select a portion from your first paint splash and Copy > Paste as a new layer within the "TEXT" folder. Transform, rotate and position over the "C". We'll eventually use areas of the template as black - so don't sweat over following the letter form precisely.

Step 14

Lasso another paint segment and Copy > Paste as another layer. Now use the Transform's Warp function to roughly conform it to the letter form.

Step 15

Duplicate the layer twice, resize, flip and Warp again to form the "o".

Step 16

Add segments from your other paint splash images on separate layers to gradually assemble the remaining characters.

Step 17

When you're done, Merge your paint splash layers and name it "Paint splashes". Now set your "text" layer back to 100% Opacity and Command-click its layer thumbnail to generate a selection and Inverse. Now use a medium, hard-edged Eraser (E) to remove selective paint overlaps, then deselect.

Step 18

Add a mask to your "text" layer, then hide areas using a small, hard-edged brush. When you've finished your text should look something like this.

Step 19

Now we need to accurately isolate the model's upper body from the background; Photoshop has many tools to achieve this, but in this instance we'll use a combination of paths and a channel mask. Set the Pen Tool (P) to Paths, zoom in and draw a closed path around the figure. Don't sweat over the hair - plot your points just inside and around her ear as shown in red.
Remember, you can modify paths at any time - just press Command to access the Direct Selection Tool (A) and fine-tune individual direction/anchor points as required.

Step 20

Next, check the Subtract option to create the two inner sub paths as indicated in red - remember to draw just inside of the hair. When you're done, save your "Work Path" by double-clicking its thumbnail - this also avoids it from being over written.

Step 21

Now we'll mask the hair by means of a density or channel mask. Switch to your Channels tab and cycle through each channel in turn to determine which holds the most contrast - in this instance it's the Green channel.
Drag its thumbnail over the Create new channel icon at the foot of the palette to duplicate it. Now adjust the Input Level sliders as below.

Step 22

By default, it's the white channel areas that act as selections - so press Command + I to Invert and make the channel negative.

Step 23

Switch to your Paths tab and Command-click your path thumbnail to create a selection. Set you're Foreground color to black, then switch back to your Channels tab. Ensure the duplicate channel is highlighted, then hit Delete to fill the selection with white.

Step 24

Inverse the selection and use a large, hard-edged brush to fill the bottom half of the channel with black.

Step 25

Zoom in and carefully use the Dodge Tool (0) set to highlights to remove any areas where the hair meets the hard edge of her neck and head.

Step 26

Command-click your channel thumbnail to generate a selection, then target the top RGB composite channel. Switch back to your Layers tab, copy to a new layer and name it "Girl isolated". Now disable the visibility of the original layer to view the model in isolation.

Step 27

Drag the "Girl isolated" thumbnail into your working file and place it within a new group folder called "MODEL" below your "TEXT" folder. Resize and position slightly off centre as shown.

Step 28

Next, we need to desaturate the model's dress; first, clip a Black & White adjustment layer to the "Girl isolated" and choose the Maximum Black preset.

Step 29

Now we need to restrict the Black & White adjustment to the dress, so draw a closed path as indicated in red. Generate a path-based selection, Inverse, target your adjustment mask and fill with black.

Step 30

Add "9.jpg" (from Step 12) as a new layer at the top of the stack within the "MODEL" folder. Label it "Dress paint 1", then Transform/rotate and place as shown. Now use the Burn Tool (O) set to Midtones to merge the lighter areas into the dress.

Step 31

Open "7.jpg" from the paint splash folder. Instead of using the Magic Wand, we'll use the Color Range extraction method; go to Select > Color Range, click on the background, then set the Fuzziness Slider to 135 and check the Invert button.
Next, copy the selection to a new layer, trash the base layer and apply a Levels adjustment to darken the image as before.

Step 32

Add as a new layer at the top of the stack within the "MODEL" folder, Transform/position over the model's dress and extend into the lettering. Use the same selection techniques to add two more paint layers.
When you're done, add masks to blend any hard edges into the dress, then use the Burn Tool (O) as well. Name these layers "Dress paint 1", "Dress paint 2" and "Dress paint 3".

Step 33

Add "1119.jpg" from these liquid Ink images as a new layer above "Dress paint 3". Rotate 180 degrees, Flip Horizontal and label it "smoke". Next, set the Blend Mode to Darken, resize and position so it flows up from the lettering and into the model's dress. Finally, add a mask to hide areas as required.

Step 34

Next, we'll add some skin colored splashes around the model. Open and extract "18.jpg" using the Magic Wand. Now apply the Save As command.

Step 35

Add as a new layer at the top of the stack within the "MODEL" folder and Transform/position over her right arm. Add a mask, then use a selection from the "Girl isolated" layer to hide the main shape of her arm. Next, clip a Hue/Saturation adjustment, check the Colorize button and copy these settings.

Step 36

Now clip a Color Balance adjustment layer and copy these settings.

Step 37

Finally, clip a Levels adjustment and use the setting below. Your paint splash should now match the model's skin tone. At this point it's a good idea to save all three adjustment settings - to do this, double-click each one in turn and save to a convenient location.

Step 38

Shift-click all three adjustment thumbnails as well as your original paint splash thumbnail, Merge, then rename the resulting layer "skin paint 1". You'll notice that the Merge command automatically applies the mask and the adjustment layers to keep the file size manageable.

Step 39

Add your isolated splash (from Step 34) as several new layers, then mask and clip the same three adjustments (Steps 35, 36 and 37). From here you can click the Load button to access your saved settings (from Step 37). When your happy, Merge each layer and its relevant adjustments as before, then rename them "skin paint 2" etc.

Step 40

Open the sky image and choose Image > Rotate Canvas > Flip Horizontal. Now select the top portion using the Rectangular Marquee (M) Tool and Copy.

Step 41

Paste below the "MODEL" folder and name it "Sky". Enlarge to cover your canvas, then stretch vertically. For a subtle effect, change the Blend Mode to Luminosity and lower the Opacity to 30%.
Next, add a mask, set your Foreground color to black and Shift-drag a Linear Gradient (G) from the bottom up using the Foreground to Transparent preset.

Step 42

Add a new group folder called "WHITE SMOKE" below the "MODEL". Open "Liquid_Ink_V1_1096" from the "Liquid Ink 001" folder, Flip Horizontal, then hit Command + I to Invert. Place into your new folder, Transform/position above the model's head and name it "Smoke 1".
Next, change the Blend Mode to Screen and reduce the Opacity to 68%. Now double-click its layer thumbnail to access the advanced blending dialogue box. Hold down Option and click the top right Blend If slider (to split it) and pull left.

Step 43

Open "Liquid_Ink_V1_1126.jpg", Invert, add as a new layer and label it "Smoke 2". Position middle left, then split the top right Blend If slider as shown. This layer should also be set to screen, but leave its Opacity at full strength.
Invert "Liquid_Ink_V1_1128.jpg" and add as another layer, name it "Smoke 3", then Transform/position top right. This layer should also be set to screen at 100% Opacity. Now split the top left Blend If slider as shown. Finally, duplicate this layer, rotate and position top right and extend it beyond your canvas. Rename this layer "Smoke 4".

Step 44

Add a mask to the "WHITE SMOKE" folder and use a large, soft-edged brush to reveal the top left underlying clouds.

Step 45

Open the bonsai tree and apply a Colour Range selection - don't sweat over getting an accurate selection around the pot - this will be erased in the next step.

Step 46

Copy > Paste the selection as a new layer above the "WHITE SMOKE" folder. Rotate slightly clock-wise, then Transform/position behind the model's waist. Name this layer "Tree", add a mask and use a large, hard-edged brush to remove the trunk and pot.

Step 47

Next, clip a Color Balance adjustment to the "Tree" layer and copy these settings.

Step 48

Now we'll draw some shapes which we'll add some interest to the background; launch Illustrator and create a new A4 portrait document. Go to Illustrator > Preferences > Guides & Grid and enter 10 mm in the Gridline and 2 in the Subdivision fields. Now select Show Grid and Snap to Grid from the View menu.
Note. If you want to skip this creation process, jump to Step 55 and open "lines.ai" from the 'source" folder.

Step 49

Grab the Ellipse Tool (L) and snap a circle (Fill: none / Stroke: 1 pt) to your grid.

Step 50

Grab the Scissor Tool (S) and cut the two middle points, then delete the top half of the circle. Now select the Pen Tool (P) and click on the left point to extend upwards.

Step 51

Use the same technique to build up more shapes. You can also save time by duplicating, flipping, resizing and rotating groups of paths.

Step 52

Draw a circle (Fill: none / Stroke: 1 pt), then draw a path longer than the circle's circumference above it. Select the line, then hold Option + Shift and drag it below the circle to duplicate it.
Select both lines, then double-click the Blend Tool (W), in the next window select Specified Steps from the Spacing drop-down menu and enter 35 (you may need to use a different amount, depending on the size of your circle). Now click both lines to apply the blend.
Note: Blends remains live until they're Expanded - to edit, simply select the object and double-click the Blend Tool in the toolbar.
Also, here's a comprehensive guide to Illustrator's Blend Tool.

Step 53

When you're done, select the object and choose Expand from the Object menu, then Group all the horizontal lines. Select both objects and click the Horizontal and Vertical Align Centre buttons in the Align tab. Now select the lines and Shift-rotate 45 degrees. Finally, select both objects and click the Divide button in the Pathfinder tab.

Step 54

Place, resize and duplicate the circle to complete your line work. You can now disable the Snap to Grid option and reposition paths as required. At this point I decided to make the line weights thinner - I used a combination of 0.7 and 0.8 pt.
Note: To do this quickly, select a single line, then go to Select > Same > Stroke Weight.

Step 55

Select All, change the Stroke to white and Copy. Switch to your project file and add a new folder called "GRAPHICS 1" below the "MODEL". Paste within the new folder, selecting Pixels in the next window. Name the layer "Lines 1", then Flip Horizontal and position as shown. Now set the Blend Mode to Overlay, then add a mask and use a large, soft-edged brush at a low Opacity to hide sections as required.

Step 56

Paste as another layer and label it "Lines 2", position top left and apply the same Blend Mode. Add a mask to hide areas, load the "tree" layer as a selection and fill with black on both masks. Finally, reduce the Opacity of both these layers to 90%.

Step 57

Create a new Illustrator document, grab the Type Tool (T) and add the letters "a" and "+" in pale gray. I used Century Schoolbook and Impact at around 220 pt.
Note. If you want to skip this part, jump to Step 60 and open 'type.ai" from the 'source" folder.

Step 58

Select both characters and hit Shift + Command O to Create Outlines.

Step 59

Now select your first path and go to Effect > 3D > Extrude & Bevel and copy these settings.

Step 60

Next, apply a different Extrude & Bevel to your second character as shown.

Step 61

Copy > Paste both objects as pixels on separate layers within the "GRAPHICS 1" folder and label them "A character" and "Plus sign". Flip the "Plus sign" horizontally and resize, rotate both objects as shown.

Step 62

Apply a Levels adjustment to both layers, then change their Blend Modes to Luminosity.

Step 63

Next, we'll incorporate some 3D spheres; add "001.png" and "007.png" from these spheres. These are fairly large files, so they'll need reducing in size. Place them at the top of the stack within the "GRAPHICS 1" folder and label them "Sphere 1" and "Sphere 2".

Step 64

Add another folder above the "TEXT" and label it "GRAPHICS 2". Place a smaller sphere ("010.png") over the model's dress and name it "Sphere 3". Now go to File > Place and navigate to the "PSDTUTS_logo.pdf" within the "source" folder and hit OK in the next window. The logo will now import as a Smart Object which you can resize and position below the text.

Step 65

Open the parrot, then use the Magic Wand (W) to Copy an inversed selection to a new layer and delete the original layer.

Step 66

We now need to enlarge the canvas to allow for the paint "branch". Switch to Full Screen mode, Grab the Crop Tool (C), snap it to your canvas border and extend. Lasso a selection from your paint splash used in Step 11 and Copy > Paste as a new layer. Rotate and Transform, then use the Transform's Warp function to modify its shape to form the "branch".

Step 67

Transpose the stacking order of the layers, then plot a series of closed paths as indicated in red.

Step 68

Target the upper layer, make a path-based selection and hit Delete. Now create a layer-based selection from your base layer and erase the parrot's tail.

Step 69

Merge both layers and place within a new group folder called "ELEMENTS" at the top of the layer stack. Flip horizontal, resize/position as shown and label it "Parrot".

Step 70

Next, use the Color Range extraction technique on the butterfly.

Step 71

Copy the selection to a new layer and delete the original. Now use a large, hard-edged eraser to remove the flower, then a smaller brush to remove any remaining foliage around the creature's legs.

Step 72

Add as a top layer within the "ELEMENTS" folder and name it "Butterfly". Now flip horizontal, resize and place over the lettering as below.

Step 73

Import "Turf.png" from the "source" folder as a top layer within the "ELEMENTS" folder. Position over the cracked earth and label it"Turf". Generate a layer based selection, add a new layer below it and fill with black. Label this layer "Turf shadow", then squash vertically.

Step 74

Choose Filter > Blur > Gaussian Blur and enter 2.0 px.

Step 75

Erase the top of the shadow with a large, soft edged brush, then change the Blend Mode to Multiply and lower the Opacity to 55%.

Step 76

Add the "leaves.png" from the 'source" folder and use the same technique to place some shadows.

Step 77

Next, we'll add the ladybird. This image has a complex background, so you'll need to use the Pen Tool (P) to isolate the insect. Copy > Paste into the "ELEMENTS" folder, flip, rotate and place on the grass. Adjust the Levels as required, then add a shadow.

Step 78

Now we'll create some explosion effects, which we'll use in conjunction with the Displace filter to break up parts of the composition.
I've used Cinema 4D, but the same effect can be recreated in most 3D apps. Also, my version of Cinema 4D is pretty ancient, but you can get the same results using the newer versions. Create a new document and add a sphere primitive. Drop an Explosion object into the Sphere and Copy the settings in the Object Property fields. Don't worry about lighting etc. - we're only interested in the object's shape as you'll discover in the next step.
Note. If you want to skip this part, jump to Step 81 and use "explosion_1.jpg" and "explosion_2.jpg" from the 'source" folder.

Step 79

Go to Render > Render Settings and use the following. Next, hit Shift + R to Render to Picture Viewer.

Step 80

For variety drop a Wind deformer into the Sphere and copy these settings. Now perform another render, but ensure you don't overwrite your initial render.

Step 81

Open your first render; load the extra channel as a selection and Copy. Add a new channel to your project file and Paste the selection. Enable the visibility of the top RGB composite channel. Now resize and position the selection over the parrot's wing.

Step 82

Paste the selection again and resize/position over the right sphere. Now use a selection from your second render over the remaining spheres and butterfly.

Step 83

Now highlight the top RGB composite channel, switch to the Layers tab and load a layer-based selection from the butterfly. Back in the Channels tab, ensure the extra channel is highlighted and fill the selection with black.
Repeat this process using selections from your "Sphere 1", "Sphere 2", "Sphere 3" and the "Butterfly" layers.
We now need to ensure there's no pixel information extending beyond the canvas - this is vital for the Displace filter to work correctly. To do this, Select All, then choose Image > Crop.
Next, choose Duplicate Channel from the fly-out menu, then in the next window select New as its Destination and give it a memorable name. The channel will now appear as a new document which should be saved to a convenient location. This channel will later be used in conjunction with the Displace filter to break away selective areas of the illustration.

Step 84

Disable the visibility of all layers except for the "Parrot", "Sphere 1", "Sphere 2", "Sphere 3" and the "Butterfly". Add an empty layer at the top of the stack and name it "Fragments". Now choose Image > Apply Image and hit OK in the next window - this command creates a composite layer from the visible layers.

Step 85

We'll be applying the Displace filter twice, so duplicate this layer and turn off its visibility. Ensure your original "Fragments" layer is active, then go to Filter > Distort > Displace, use the settings as below and click OK.
The next window will prompt you to locate/select the file you saved from Step 83. When the filter has been applied your image should look something like this.

Step 86

Enable the visibility of all layers/folders, except the "Fragments copy". Add a mask to your "Fragments" layer. Create a layer-based selection from the "Parrot" layer and use a medium, hard-edged brush to hide areas as required. Now Invert the selection and continue painting on the mask.

Step 87

Open the displacement file you saved from Step 83 and hit Command + I to Invert then Save. Next, delete both your "Sphere 1" and "Sphere 2" layers, then switch off the visibility of the "Fragments" layer for clarity.
Target the "Fragments copy" layer and press Command + Option + F to access the last filter. Enter these settings and load your inverted displace file.

Step 88

Add a mask to the "Fragments copy" layer and hide areas as you did before - both my masks are shown at the bottom of the screen grab.
You can now use the Lasso Tool (L) to drag selections around elements (such as the spheres) and reposition them using the Move Tool.

Step 89

If your fragment layers to show any edge halos, choose Layer > Defringe and enter 2-3 px. You're image should now look something like this.

Step 90

At this point, I decided to use the same "break away" technique to the model's head. Add a new channel and follow the same workflow as Step 81. Now use the Transform's Warp function to distort the selection as below.

Step 91

Repeat Step 83 to duplicate the second channel as a new file and Save. Next, disable the visibility of all layers except the "MODEL" folder, add an empty layer at the top of the stack, repeat the Apply Image Command and name it "Girl Fragments".
Now use the Displace Filter again, copy these settings and load the file you saved at the beginning of this step.

Step 92

Defringe the layer if required, then add a mask. First, paint within a selection from the "Girl isolated" layer, deselect, then continue to hide areas.

Step 93

Grab the Burn Tool (O) to darken areas on the fragment layers. Finally, place all your fragment layers into a new group folder called "FRAGMENTS" and you're done!

Conclusion and Scope

I hope you've enjoyed this tutorial and discovered some new approaches to working along the way. Why not experiment and expand on these techniques and apply them to your own compositions!

link download PSD: http://hotfile.com/dl/62716996/e4fd499/Premium_64_Smoke_Splash.rar.html

Create a Realistic Energy Drink

2010-08-17T06:12:00.000-07:00

Create a Realistic Energy Drink Can to Present to Clients

By: Tim Kyde

We have all been there before; how can we make our artwork look great when we are presenting to clients? The single easiest way to show something to a client is to show them in a way that they can understand. This tutorial will show you how to create a realistic energy drink in a way that you can demonstrate to your clients. Lets get started!

Final Image Preview

Let's take a look at the image we'll be creating.

Tutorial Details

Program: Adobe Photoshop CS5
Difficulty: Advanced
Estimated Completion Time: 30 - 60 Minutes

Step 1

Below is a photo that I took of an energy drink can for reference. Our first step is to straighten the can. Lets set some guides. Turn on your rulers (Cmd + R) and turn on guides Cmd + :. To set guides, Cmd-click on the rulers and drag them into place. I have done this for you already in the source file, but it is a good thing to do if your reference file is not aligned appropriately. Most product photography is shot using a basic 3-point lighting rig. This is the rig I used to shoot this can. This set up makes it really easy to find good source imagery for highlights and shadows, a quick search on Google or anywhere else will show you what I am talking about.

Step 2

Next, lets start to set up our organization. Create three new folders (TOP, BOTTOM, BASE) and rename the layer with the can to Original. Create a new layer and fill with white – call this layer White BG. Duplicate the Original layer, and place the copy in the Base folder. Rename this layer to BASE

Step 3

Now use the pen tool, and trace out the entire can. After you have completed the path, Dbl click the work path layer in the Paths pallet, and rename this path to "Basic Shape."

Step 4

Now, draw the top of the can. Only be exact with the bottom of the “lip” as seen in the image below. Double click the work path and rename it "TOP."

Step 5

Now, draw the bottom of the can. Only be exact with the where the base of the can meets the top of the base as seen in the image below. Double click the work path and rename it "BOTTOM." Next, Cmd-click the path called “Basic shape” to make a selection from the path, then Opt + Cmd-click the “TOP” path and the “BOTTOM” path. This will subtract the TOP and BOTTOM paths from the overall BASIC SHAPE selection, leaving us with just the can selected. With the selection of the can still active, select the Original Copy layer, and then click on the “add layer mask” icon as highlighted in red in the image below. Rename this layer to “BASE.”

Step 6

Some of these next steps are due to the fact that I shot my own reference imagery and had some additional cleanup to do. Ideally, you will find a hi-res image one the Internet that will not require such work. Find a clear area across the can (without any artwork). Please see the area I chose, highlighted in red, below.

Step 7

Select that area and copy and paste into a new layer. Repeat a few times and stack the layers on top of each other. Over in the layers pallet, Shift-click the top and bottom of the layers we just created to select them all. Merge layers but hitting Cmd + E. Duplicate that layer and apply a small Gaussian Blur (2 px). This will help eliminate the obvious repeating pattern from the duplication of layers. Hide this layer for now.

Step 8

Now we have to eliminate some of the additional noise that is on the image. Create a new layer, and select your Brush Tool. With the brush tool (B) selected, hit the Opt key to bring up the eyedropper. Select a color where you intend to draw a vertical stroke, and hold shift to insure a perfectly vertical line and paint down. This part will require an “artistic” eye. Just remember we are trying to eliminate some of the noise, so do as little as possible to accomplish this effect. I always keep my opacity on the brush tool at 100%, and I adjust the flow to around 5%.

Step 9

Now, select the layer that you created a Gaussian Blur on, and create a layer mask. Paint away the highlights on the side, so the hard highlights on the layer below show through. This is really important. Cmd-click the layer on the bottom (not the one with the painted strokes, not the one with the blur) to create a selection. Inverse selection (Cmd + Shift + I) and then select the layer with the blurs, hit Delete. Now select the layer with the painted strokes, hit delete. Select all three layers, and merge (Cmd + E).

Step 10

Now, stretch this layer (Cmd + T) all the way up to the top and bottom of the can. Next, create a layer mask and blend this layer in with the original can. Pay close attention to the top and bottom of the can, and try to make this look as natural as possible. Again, using the layer mask, paint away parts that you can to blend in this image.

Step 11

Create a new layer called “TouchUps.” Use the clone tool to remove the type from the top of the can. Try to line up the highlights as much as possible. When done merge all three layers. Remember to apply the layer mask when/if the dialog box comes up.

Step 12

Most of the hard work is done now, as we have a cleaned up “naked” can ready to go! Well done, and give yourself some props.

Step 13

Now create a folder within the Base folder, and call it “HL” for highlights. We will now “steal” the highlights from the naked can so we can apply these highlights over top of our artwork. Turn on the White BG layer, and click on the Channels pallet. Duplicate the black channel, and adjust levels on that channel as shown below. We just want to create a great amount of contrast here. When levels are completed, hit OK.

Step 14

Now Cmd-click the icon of the channel to create a selection. This selects all of the white information, which is exactly what we want for highlights. After the selection is made, make sure the “black copy” channel is turned off, and that the CMYK channels are all on (you will be repeating this process a few times in this tutorial, so this is really important). Now create a layer called “HL1” within the “HL” Folder. Now fill selection with white. Cmd-click the base layer to create a selection, select the folder called “HL” and create a layer mask on this folder.

Step 15

Select the base layer and create a color overlay (layer > layer style >c olor overlay) and make the color black. Now lets go ahead and create the top and bottom of the can. First duplicate the layer Original twice. Place one duplicate in the TOP folder and one in the BOTTOM Folder. Lets start with the Top. In your paths pallet, CMD-click the Basic Shape path, and then Cmd + Option + Shift-click the TOP path. This will only select only the area that overlaps both paths, leaving us with just the top of the can selected. Use this selection to create a layer mask on the TOP folder.

Step 16

Now hide all of the layers/folders as seen below.

Step 17

Under channels, duplicate the black channel and adjust the levels as seen below. Again, we are looking for a decent amount of contrast. This time we are going to try to isolate the black areas to create shadows. Click OK

Step 18

Cmd-click on the duplicated black channel and inverse selection (Shift + Cmd + I). Create a new layer called “Blacks” and fill with black. Now hide the “Blacks” and “Base” layers, and duplicate the Magenta Channel and adjust levels like we have been doing in the previous examples. Cmd-click the channel; create a new layer called “Mids,” inverse selection (Cmd + Shift + I) and fill with black.

Step 19

Create a color overlay on the “Base” layer (Layer > layer style > color overlay) See below for the base color.

Step 20

Create a new folder called “Shadows” and place the following layers in that folder: Blacks, Mids. Hide the “Shadows” folder and create a new folder called “HL.” Create a layer called “HL1” and duplicate the Cyan channel and adjust the levels as seen below. Cmd-click on the Cyan copy channel and fill with white on the “HL1” layer.

Step 21

Duplicate the Cyan channel again and adjust the levels as seen below. Cmd-click on the channel to create a selection, create a new layer called “HL2” and fill with white.

Step 22

We did all of this channel work so that we have complete control over all tones with the cap. We can now adjust all of these layers to produce realistic results. If we want a warm metal all we have to do is adjust the Base layer’s color overlay settings. I recommend playing with all of the layers opacity levels to see various results. Below you will see the settings I am using for this tutorial.

Step 23

Repeat this process for the Can Bottom. Note - I only created one HL and one Blacks layer, as the bottom of the can did not require as much attention to detail. Now turn on all of your folders (TOP, BOTTOM, BASE). There are some “missing pixels” due to the masking (This might have been a CS5 preview error, and not really there, but I just wanted to address it. To fix this, move the TOP folder down one pixel using the keyboard down arrow, and move the BOTTOM folder up one pixel using the up arrow.

Step 24

Now it is time to drop in your artwork. I have included a quick .AI sample. It is important to include extra room on the sides of the artwork, as we will be distorting the artwork to wrap around the can. The base dimensions I used were 4.35"x6.625."

Step 25

Create a new folder within the BASE folder called Artwork. Now, copy and paste the artwork from illustrator (or Photoshop) onto a new layer called "Label Artwork" within the Artwork folder, and scale the artwork so that it fits vertically in the can. The Artwork folder should be created below the HL1 layer.

Step 26

Next, create some guides that cut the distance between the sides of your artwork and the can. See the image below for reference; new guides are highlighted in red.

Step 27

Now transform your artwork (Cmd + T) and click the warp icon as seen in the photo below.

Step 28

Bring the corners and handles of your artwork to the guides you just created. Adjust the bottom handles so that the type on the bottom mirrors the arc of the bottom of the can.

Step 29

Accept the transformation, and as you can see, we now have artwork that has highlights. In this example, since we started with a black can, we couldn't really "steal" any shadows from the original. When I shot the can I also shot a Pepsi can, and I performed the same technique used before to make a "swatch" of the can.

Step 30

Now copy and paste that Swatch into your file. Scale to fit the width of the can.

Step 31

Next, we need to scale the artwork vertically so that it covers all of the artwork.

Step 32

Now Option-Click on the layer eyeball in the Layers pallet. This will only show that layer, while temporarily hiding all of the rest.

Step 33

Under the Channels pallet, Cmd-click the black channel to make a selection. Inverse this selection (Cmd + Shift + I), go back to your Layers pallet and Cmd-click on the eyeball again (this will unhide all the other layers) Create a new layer called "Shadows" and fill with black.

Step 34

Set the Layer Style of the layer called "Shadows" to Multiply, and set the Opacity to 50%.

Step 35

We now have artwork on the can, with both highlights and shadows over top of the artwork, giving it a real appearance. Now all we have to do is create some shadows under the can to make it look like it is sitting on a white field. Create a folder called "Can Shadows." Now use the Elliptical Marquee tool to create a selection as wide as the can. Remember to hold sown shift to create a perfect circle. Create a new layer within the Can Shadow folder and name it "Darkest," fill selection with black. Duplicate that layer rename the "Darkest copy" to layers "Mids."

Step 36

Apply a 20pt Gaussian blur on the "Darkest" layer and place it right under the can. Distort the layer so that that the oval matches the shape of the bottom of the can. Set the layer style to multiply, and set the opacity to 60%. Apply a 40pt Gaussian blur on the "Meds" layer and place it under the can. Transform this layer so that it matches the shape of the can, but is larger than the "Darkest" layer. Set the layer style to multiply, and set the opacity to 40%.

Conclusion

And there we go! We are done. I know this was an extremely complicated tutorial, so please feel free to ask any questions and I will try my best to get back to you as soon as possible. This tutorial has shown you how to use channel information to make selections. THIS IS THE SINGLE GREATEST TRICK EVER. This technique can be used with just about any product to "steal" highlights and shadows. I really hope you enjoyed it!

PSD file: http://hotfile.com/dl/62708315/1c0458a/Premium_63_Jacked_Energy_Drink.rar.html

Edgy Character spanish version

2010-08-16T05:31:00.000-07:00

Diseno de mascota con Photoshop al estilo SOSFactory

Hola artistas del Photoshop, mi nombre es Sergio Ordóñez, el autoproclamado genio detrás de SOSFactory, autoproclamada pionera en el diseño de mascotas corporativas para web. PSDTuts me ha contratado para diseñar un personaje en exclusiva para vosotros, estimados lectores, vaya suerte que teneis...
SUMARIO

1.- Conceptos básicos

Cuando comencé a diseñar mascotas, como todo buen novato, empezaba mis diseños sin tener ni idea de lo que realmente quería contar. En este tiempo aprendí que la planificación es la diferencia entre un diseñador profesional y otro que no lo es.
Por eso y porque me pagan por palabras os voy a machacar con un poquito de teoría :)
La actitud. La personalidad es la clave de una mascota bien diseñada. Todos los elementos del diseño (expresión facial, expresión corporal, simbología, ropas, elementos externos...) tienen que fomentar la actitud del personaje, que dependerá de los valores corporativos de nuestro cliente. Veamos algunos ejemplos:

Personaje para restaurante-barbacoa. Gracioso, amigable, cómico.
Antiheroe. Colores que denotan peligro (amarillo y negro), pose negativa (brazos cruzados al pecho), mirada malvada.
Personaje "cool". Mirada agresiva, pulgar levantado, sacando pecho, colores agresivos.
Heroe. Amigable, dinámico, fuerte, confiable, colores suaves.

La pose. Tenemos que transmitir la actitud deseada en una sola pose memorable, limpia, fácil de recordar y de distinguir para eso tenemos que cuidar la línea de acción y la silueta.
Un error muy común cuando diseñamos para web consiste en posar la mascota sin tener en cuenta el area donde se va a usar. Para asegurarnos que el personaje se vea lo más grande posible tendremos que adaptar la pose al espacio, ejemplo:

Línea de acción. La línea de acción marca la intención del movimiento del personaje, la dirección en la que van dirigidas sus energías. Aquí podeis ver algunos buenos ejemplos:

La silueta. El maestro de la animación Raúl Garcia lo explica a la perfección en este ejemplo, es un ejercicio en el que se busca el dibujo que más claramente defina la historia: "Llenar una taza de té"

	El primer intento es vago y no define la acción de forma concisa. No hay ninguna línea de acción que describa el movimiento de echar té en la taza o ninguna tensión que indique peso o equilibrio. La silueta de éste dibujo es amorfa y sin interés.
	Buscando esa clara silueta se ha intentado separar el brazo de la tetera.
	Taza y tetera estan ahora claramente separados del cuerpo, pero la silueta todavía no es clara.
	La silueta de los brazos es mucho más clara. La tetera se inclina más hacia abajo para indicar la acción de echar el té.
	La pose del brazo que sujeta la taza se ha modificado para que parezca más natural. El cuello del personaje se ha acentuado para lograr una mejor silueta.
	La silueta es más efectiva al añadir un plato a la taza y incluir una mejor pose de la mano.
	Doblando el brazo que sujeta la tetera y extendiendo el dedo de la mano se logra una silueta más interesante.
	Inclinando la cabeza se ha logrado la silueta más efectiva al crear un espacio negativo que dirige la atención a la boca de la tetera.

Observa como la silueta de la figura 4 es totalmente descriptiva, no necesitamos ver el relieve del personaje para entender la acción. Cuando diseñamos mascotas corporativas, en muchos casos no podremos conseguir siluetas tan perfectas, aún así, es lo ideal.

2.- El Briefing y búsqueda de referencias.

En este caso, PSDTuts me dio total libertad, así que me dejaré llevar por mi instinto y nos saltaremos el briefing.
Después de conocer al cliente tenemos que buscar referencias, las ideas originales suelen tardar un poco en aparecer, la búsqueda de referencias nos ayuda a deshechar las ideas directas en favor de otras alternativas.
Algunos consejos para hacer que surga la chispa:

La mejor fuente de inspiración a la hora de conceptualizar un tema son las webs de stock de fotos ya que a diferencia de Google, las imágenes están clasificadas por temáticas
También podemos hacer búsquedas en Google Images aunque el resultado es más aleatorio
Podemos hacer búsquedas en comunidades de arte como Deviantart
Si necesitas practicar anatomía o ropas puedes usar revistas de culturismo o de moda, todo vale
También puedes construirte una biblioteca de imágenes en tu propio disco duro, clasifícalas bien

Ejemplo práctico:

Necesitamos representar el concepto "pecado" en una ilustración
Vamos a Matton y hacemos una búsqueda del termino "pecado" ("sin" en inglés)
Obtenemos fotografías que nos ayuda a conceptualizar el tema "pecado".
Fíjate en los resultados:

manzana y serpiente (pecado original)
hombre con dinero (codicia)
tarta de boda (adulterio)
manos en posición de oración (penitencia)
chica castigada (desobediencia)
pastelería (gula)...

WARNING 1 : inspirarse es válido, plagiar, no.
WARNING 2: Si la web o el artista en cuestión es útil lo correcto es contribuir con su labor, al menos muéstrale tu agradecimiento, si además donas aunque sea un US$, mucho mejor.

3.- Antes de empezar a dibujar

¿Tableta digitalizadora o ratón? Si no tienes una tabla digitalizadora te aconsejo que te compres una Wacom, las hay a precios muy asequibles, eso sí, que sea Wacom. Si no, puedes hace el boceto a lápiz y usar el ratón y las herramientas de dibujo digital de Photoshop para entintarlo (en el caso del color es aún más recomendable usar tableta), aunque tardarás muchísimo más tiempo.
Este sería el proceso:

Con la adquisición de mi querida Wacom Cintiq 21UX (el monitor de la derecha), he cambiado mi método. Ahora hago todo digitalmente, desde el boceto inicial hasta el acabado final. Pinto las líneas a mano porque me resulta más cómodo y más rápido que hacerlo con las herramientas de dibujo vectorial.

¿Photoshop o Illustrator? Es una elección personal, a mí las herramientas de dibujo vectorial de Illustrator me desesperan. Prefiero usar Photoshop, dibujar las líneas a mano y ayudarme de las herramientas de dibujo para líneas difíciles. Al trabajar en alta resolución la posterior vectorización es muy fácil, para eso uso un plugin the Illustrator llamado Silhouette.

4.- Del boceto a la línea final

Es muy importante que trabajes en alta resolución, yo uso un lienzo tamaño A3 a 300 píxeles por pulgada, el trabajo será el mismo, y tiene muchas ventajas:

Los fallos se verán menos, especialemente si luego usas el diseño en pequeña escala
Es más cómodo ya que puedes hacer zoom y retocar líneas
Si necesitas vectorizarlo el resultado será más limpio

Aquí podeis ver unas capturas del personaje en diferentes fases, desde el boceto a la línea final. Por desgracia no hay trucos, sólo práctica y más práctica:

Dummy 2d: boceto hecho de palitos, sirve para posar al personaje y medir proporciones
Dummy 3d: damos volumen al personaje. Uso formas geométricas muy simples
Añadimos ropas: voy añadiendo ropa al personaje y voy puliendo detalles
Añadimos los accesorios y pulimos la línea un poco más. Asigno pesos de líneas
Línea limpia: limpio todo el boceto con mucha paciencia

Fíjate que el grosor de la línea (peso de línea) es variable, esta es una de las partes más laboriosas. La regla general es, líneas gruesas para los contornos, líneas más delgadas para las partes interiores.
Con esto conseguimos que el observador distinga mejor las formas, especialmente útil para ilustraciones muy complejas donde además podemos jugar con el grosor de líneas para dar profundidad a la ilustración.

5.- Extraemos las líneas

Cuanto tenemos nuestro dibujo acabado y en una sóla capa, podemos extraer las líneas del fondo o poner la capa en modo multiplicar e ir añadiendo el color en capas por debajo. Yo prefiero extraerlas, así luego puedo colorear las líneas fácilmente.
Fíjate que voy a pintar el skate y el personaje por separados, así cuando terminemos podemos usar dos versiones, con o sin skate.

Para extraer las líneas haz lo siguiente:

Asegúrate que tienes tus líneas en una sola capa
Asegúrate que estás en modo de color RBG (Image>Mode>RBG Color)
Ve al panel de Channels y haz click en el Canal Azul
Elige cualquier herramienta de selección y haz click derecho dentro del lienzo, elige Select Inverse
CTRL+C
CTRL+V
Tendrás las líneas en una capa diferente pero si te fijas los contornos tendran pixeles en blanco, haz CTRL+U y pon Lightness a -100 con lo que las líneas serán completamente negras
Haz lo mismo con la capa Background pero pon Lightnes a +100, con lo que el fondo será completamente blanco

Si eres un poco vago puedes descargarte esta acción de Photoshop para extraer las líneas de tus dibujos. Así te ahorras hacerlo manualmente.

6.- El color

Ya he escrito varios tutoriales sobre como colorear con Photoshop, para no aburrios voy a intentar algo diferente:

Primero pintaremos los colores planos: sirven para hacer selecciones rápidas de las diferentes areas
Pintaremos las sombras, tonos medios, tonos claros y brillos, en capas diferentes, usando sólo 3 colores
Haremos los cambios de color necesarios en cada capa para que el personaje esté a todo color
Añadiremos efectos jugando con los modos de capas

Estos son los tres colores que he elegido para pintar al personaje, como dije después colorizaremos al personaje con comandos de Photoshop así que la elección de los colores no es muy imporante, sólo ten en cuenta que necesitas un color oscuro para sombras, medio para luz general, y claro para contornos y luces más intensas.

La importancia del Pincel Histórico

El Pincel histórico es una herramienta muy potente y que uso con mucha frecuencia, ya que podemos "bloquear" partes de nuestro diseño que ya estén terminadas y seguir trabajando en el resto sin estropearlo. Os pongo un ejemplo muy básico:

Cuando practiques un poco te darás cuenta de las infinitas posibilidades que ofrece esta herramienta, como vemos en el ejemplo podemos usarlo a modo de borrador (sin miedo a borrar partes ya terminadas); podemos hacer lo mismo para pintar en vez de borrar; si sacamos varios snapshots del mismo diseño, podemos conseguir versiones intermedias; podemos bajarle la opacidad al pincel y fusionar varias versiones del mismo diseño; incluso jugar con las tonalidades... no tengas miedo de experimentar.
WARNING: el pincel historia funciona por capas, la capa que queramos modificar debe existir en ambos puntos de la historia. Si fusionamos o eliminamos la capa en cuestión, el pincel histórico no funcionará.
Para ver el uso del Pincel histórico en vivo puedes visitar este videotutorial de como colorear con Photoshop.

Colores planos

Por debajo de la capa de líneas creamos una capa que llamamos Flat Colors, vamos rellenando el dibujo con colores que difieran bastante entre ellos, para facilitar las posteriores selecciones, puedes hacerlo con las herramientas que quieras, cuidando que no te huecos.
Esta capa sólo la usaremos para hacer selecciones, si por ejemplo queremos pintar el pelo de nuestro personaje, cogemos la herramienta Magic Wand tool y hacemos click en el pelo. Con lo que conseguimos una selección rápida y limpia.

Color base

Desactivamos la capa Flat Colors y la ponemos donde menos nos moleste. Haciendo CTRL + Click en el icono de dicha capa obtendremos una selección del contorno completo del personaje.
Creamos una capa nueva que llamaremos Color Base y lo rellenamos con un color plano, en este caso escogí el color #e37750, es un color que me resulta cómodo.

Sombras

Creamos una nueva capa por encima del color base, la llamaremos Shadows. En esta capa pintaremos las sombras con el mismo color base, pero pondremos la capa temporalmente en modo Multiply.
He elegido una fuente de luz que viene desde arriba-izquierda, si no tienes mucha práctica puedes usar un muñeco articulado en una habitación oscura con un punto de luz fuerte para usarlo como referencia. Saber dar un volumen coherente con ese punto de luz es la parte más difícil, y no hay otro truco que practicar.
Observa que las sombras no tienen que ocupar todo el dibujo, hay que dejar espacio para la iluminación. Os pongo unas capturas para que os hagais una idea de cómo suelo pintar las sombras:

Imagen con el color base
Voy aislando los volúmenes más grandes
Con el Pincel histórico, con un pincel grande y bordes suaves borro la parte donde la luz incide
Refuerzo las sombras con un pincel pequeño y bordes duros
Hago el resto de los volúmenes. Uso el Pincel Histórico (ver ejemplo más arriba)
Cuando todos los volúmenes están sombreados, hago los brillos de los contornos usando la herramienta Eraser. Estos brillos ayudan a reforzar los contornos, con lo que ganamos nitidez, muy importante si usamos el diseño en escalas muy pequeñas.

Iluminación suave

Cuando tenemos las sombras pintadas creamos una capa por debajo, la llamaremos Soft Light.

Usaremos la herramienta degradado para dar una iluminación suave que nos servirá de base para la posterior iluminación.

Tenemos las sombras pintadas
Con la herramienta degradado (del color #feeaa9 a transparente y en modo esférico) voy tiarando degradados en las zonas donde llegaría más luz
Pongo la capa de sombras en modo normal. El resultado es una iluminación global y suave, que nos sirve de base para pintar las luces más fuertes.

Aquí podeis ver la configuración que uso para hacer los gradientes:

Iluminación fuerte

Creamos una capa justo por debajo de las líneas y la nombramos como Hard Light. El proceso es básicamente el mismo que para las sombras pero a la inversa. En vez de pintar las zonas profundas, pintamos las zonas salientes, usé el color #ffeeae.

Contornos

Creo una capa por debajo de las sombras y la nombro Reflections. Me gusta reforzar los volúmenes añadiendo brillos a los contornos, con esto conseguimos que se distingan bien las formas y se aprecie mejor el volumen. Recuerda que en la fase de sombras borramos los contornos, ahora sólo tenemos que poner una capa por debajo de las sombras e ir pintando con un poco de cuidado.

7.- Colorización

Ahora empieza lo divertido :)
Ya tenemos la iluminación terminada, todos los volúmenes están definidos y tenemos los diferentes niveles de luz (sombras, tonos medios y tonos claros) por separado. Ahora jugando con el comando CTRL+U de Photoshop colorearemos al personaje rápidamente:

Seleccionamos el pelo, recuerda que tenemos la capa Flat colors para esto
Desactivamos todas las capas de color menos el Color Base, y nos quedamos en esta capa. Teclea CTRL+U para modificar los parametros del color, elegí un marron medio
Activamos la capa Shadows. Otra vez CTRL+U, elegí un color más oscuro
Activamos la capa Soft Light. CTRL+U, elegí un tono más claro
Ahora vamos a la capa Hard Light y modificamos el color
Por último a la capa Reflections. Elegí un tono más saturado para que destace

Fíjate que los colores que elegí son de la misma gama pero ligeramente diferentes, con lo que conseguimos una gama cromática más amplia. Podemos ir más lejos, incluso dentro de la misma capa podemos usar varios colores, exageré un poco para que veas las posibilidades:

Aquí puedes ver como coloreé cada parte del personaje:

Prueba tus propias combinaciones de color hasta que consigas alguna que te guste.

8.- Los efectos

Ya tenemos la base del color terminada, ahora vamos a jugar con capas en diferentes modos de fusión (paleta Layers, el menú de arriba a la izquierda) para darle más profundidad al color. Todas las capas deben ir por encima de la capa de las líneas:

Cuando terminemos podemos fusionar todas las capas (antes haz una copia de seguridad), e ir añadiendo más efectos. Podemos usar el Dodge Tool para aclarar zonas o el Burning Tool para oscurecerlas, podemos jugar con el equilibrio de color (CTRL+B), con los niveles (CTRL+L)... con un poco de imaginación puedes conseguir resultados muy llamativos.
Como dije al principio, pintaré el skate por separado, así tenemos podemos usar dos versiones. La técnica que usé es la misma que para el personaje.

Y por fin terminamos, se ve bien ¿no te parece?.

9.- Presentación final

Como buenos profesionales que somos tenemos que cuidar la presentación. Con un par de logotipos, algunas imagenes del arsenal de los amigos de Gomedia y un poco de imaginación, podemos hacer una presentación como esta (haz click en las imágenes para descargar los wallpapers) :

Fíjate que buena idea haber hecho el skate por separado, ahora tenemos 2 versiones diferentes con el mismo esfuerzo:

Esta es la versión a todo color, pero también podemos jugar sólo con las lineas (por suerte las hice bastante gruesas):

No os asusteis, no voy a explicar como hacer estos wallpapers, ya tengo el record de "scroll down" en PSDtuts... me puedo retirar tranquilo... por ahora :P

10.- Y poco más...

Bueno amigos, ya sólo aprovechar la oportunidad para hacer un llamamiento... a esas "grandes" empresas dentro del ámbito editorial que obtienen su material gracias a la explotación, que se llenan los bolsillos sin compartir un sólo céntimo (a los artistas nos dejan la FAMA); que tomen como modelo a PSDTuts, tan generosa y tan atenta con el artista como con el lector, demostrando que la rentabilidad de un negocio no depende de la obtención de la materia prima al mínimo coste, sino de la calidad de la misma y del ingenio a la hora de venderla.
Gracias a Eden por crear sitios tan grandes como PSDTuts, en especial a Sean por su flexibilidad.
Gracias a mi amiga Anita, por ayudarme de forma desinteresada, y por traducir este artículo.
Y por último gracias a los lectores de PSDTuts, espero que hayais llegado hasta el final (?), que hayais aprendido muchas cosas (?) o que al menos hayais disfrutado de este tutorial.
Ni que decir que si teneis alguna pregunta la responderé con mucho gusto :)
Saludos!!
Sergio Ordóñez

Portafolio: SOSFactory
Blog: SOSNewbie
Deviantart: sergitosuanez

link download PDS: http://hotfile.com/dl/62521004/030b53a/93_Edgy_Character.rar.html

Edgy Character

2010-08-16T05:20:00.000-07:00

SOSFactory Style Mascot Design in Photoshop

By Sergio Ordóñez

Hello Photoshop artists, my name is Sergio Ordóñez, the self-proclaimed genius behind SOSFactory, pioneer in corporate mascot design for the web. You can also find me at my blog SOSNewbie or on Deviantart at sergitosuanez. PSDTUTS hired me to design a character exclusively for you, dear readers, so let's get to it.

Final Image Preview

You can find the Photoshop PSD file in a directory labeled 'PSD' that came in the ZIP file that you downloaded. We have also included the original draft of this tutorial for you Spanish readers. You may wish to look through them briefly before we begin. A preview of the final image is below. You can view the larger version here as well. There are more versions in the Final Presentation section as well.

Summary

Basic Concepts

Step 1 - Basic Concepts

When I began designing mascots, as every good noob, I used to start my designs without having any idea of what I really wanted to say. In that period I learned that the planning is the difference between a professional designer and another who isn’t. For this reason and because I’m paid per word, I’m going to squeeze your minds with a little bit of theory :)

The Attitude

Personality is the key for a well designed mascot. All the design elements (facial expression, corporal expression, symbols, clothing, etc.) have to encourage the character’s attitude, which will depends on the corporate values of our customer. Let’s see some examples below.

Character for barbecue-restaurant. Funny, friendly, goofy.
Anti-hero. Colors that suggest danger (yellow and black), negative pose (arms crossed on his chest), evil gaze.
Cool character. Aggressive gaze, thumb up, high chest, aggressive colors.
Hero. Friendly, dynamic, strong, trustworthy, soft colors.

The Pose

We want to transmit the attitude we want in just one memorable pose, clean, easy to remember, and easy to recognize. For that, we have to watch the action line and the silhouette.
A very common error when we design for a website is to pose the mascot without considering the area it will be used in. To make sure that the character will look as big as possible we have to adapt the pose to the area, see the examples below.

Action Line

The action line defines the movement intention of the character, the direction its energies are directed to. You can see some examples below.

The Silhouette

The master of animation Raúl Garcia explains it all perfectly in this example, it’s an exercise in which we look for the character that better define the story: "Filling a cup of tea."

The first try is vague and doesn’t define the action concisely. There’s no action line that describes the “pouring tea in the cup” movement or any tension that could suggest weight or equilibrium. This drawing’s silhouette is amorphous and without any interest.
Looking for that clear silhouette he tries to separate the arm that holds the teapot from the body.
Cup and teapot are now clearly separated from the body, but the silhouette is still not precise.
The silhouette of the arms are much clearer. The teapot leans down to show the “pouring tea” action.
The pose of the arm, which holds the cup, has been modified to make it look more natural. The character’s neck has been emphasized to get a better overall silhouette.
The silhouette turns more effective by adding a plate under the cup and including a better pose for the hand.
Bending the arm that holds the teapot and stretching its finger we get a more interesting silhouette.
Bowing his head we get a more effective silhouette, we create a negative space which leads the watcher’s attention to the teapot’s spout.

Notice that the silhouette number 4 is fully descriptive, we don’t need anything more to understand the action. When we design corporate mascots, we usually can’t obtain such a perfect silhouette. Even so, it’s the ideal.

Step 2 - Briefing and Search for References

In this case, PSDTUTS gave me total creative freedom, so I’ll let my instinct guide me and we’ll skip the briefing.
After knowing the client, the best we can do is to look for references, because original ideas may not come to your mind at first. The search for references can help us to discard the obvious ideas and consider some alternative ones.
Now considerations for coming up with new ideas:

The best source of inspiration when it comes to conceptualize a topic are “stock photos” websites because the images are grouped thematically, unlike Google.
We can also search in Google images, though the results are more random.
We can search in art communities, like Deviantart.
If you need to practice anatomy or clothing you can use bodybuilding or fashion magazines, everything is allowed.
You can also create your own image library in your hard drive, though group them properly.

Example:

We need to represent the concept “sin” in an illustration.
We go to Matton and search for the word sin.
We obtain images that help us to conceptualize the topic of sin.
Look at the results:

Apple and snake (original sin)
Man with money (greed)
Wedding cake (adultery)
Hands in prayer pose (penitence)
Girl punished (naughtiness)
Pastry (gluttony)

WARNING 1: Inspiring yourself is allowed, plagiarize isn’t.
WARNING 2: Some artists and websites offer free resources. You should show appreciation for this by stating where you got the artwork, and consider donating donate at least one US dollar.

Step 3 - Before Starting to Draw

Pen tablet or mouse? If you still don’t own a Pen Tablet I recommend you to buy a Wacom, there are some very affordable ones, but I recommend you go with a Wacom. If you don’t have one, you can draw the sketch with traditional pencil and paper first, then use the mouse and Photoshop's digital drawing tools to ink it, though the process will take you much longer. In the case of coloring it is strongly recommendable to use the tablet. View the video below regarding this process.

When I purchased my beloved Wacom Cintiq 21UX (the monitor on the right), I changed my method. Now I make the entire process digitally, from the first sketch to the final details. I draw the lines by hand because I find it easier and quicker than using the vector drawing tools.

Photoshop or Illustrator? It’s your own choice, I personally find Illustrator vectorial drawing tools maddening. I rather use Photoshop, draw the lines by hand and I only use the drawing tools for difficult lines. I work in high resolution, so the later vectorization is quite easy. For that I use an Illustration plugin called Silhouette.

Step 4 - From the First Sketch to the Final Lineart

It’s very important to work in high resolution, I use an A3 sized canvas at 300 pixels per inch. The working process is the same at this size and there are lots of advantages:

The errors will be less noticeable, specially if you are going to use your design in small scale.
It’s more comfortable because you can zoom in and retouch the lines.
If you need to vectorize it, the result will be cleaner.

Here you can see some captions of the character in the different steps, from the sketch to the final lineart. Unfortunately, there are no tricks, just practice and more practice:

Dummy 2d: Sketch made of sticks, helps us to pose the character and to measure the proportions.
Dummy 3d: We give volume to the character. I use very simple geometric figures.
We add clothes: I add some clothes to the character and I polish the details.
We add the accessories and polish the line a little more. I settle the thicker lines.
Clean lineart: I clean the whole sketch patiently.

Notice that the line thickness (line weight) is variable, this is one of the most laborious parts. The general rule is: thick lines for the outlines, thinner lines for interior parts.
This way the observer can distinguish the shapes much better. This is specially useful for complex illustrations in which we can play with line thickness to create profundity in the illustration.

Step 5 - Extracting the Lines

When we have our drawing finished and in just one layer, we can extract the lines from the background, or to put the layer in multiply mode and add the color in new layers below it. I prefer to extract them, so I can color them easily later.
Notice that I’m going to paint the skate and the character separately, so when we finish we’ll have two versions: with and without the skate.

To extract the lines do the following:

Check that your lineart are in just one layer.
Check that you’re in RBG color mode (Image > Mode > RBG Color).
Go to Channels panel and click on the Blue Channel.
Choose the Selection Tool and right-click inside the canvas, then choose Select Inverse.
Copy (Command + C) and Paste (Command + V).
You’ll have the lines in a different layer, but notice that the outlines have some white pixels. Press Command + U and put the Lightness at -100, this way the lines will turn completely black.
Do the same with the "Background" layer, but this time put Lightness at +100, so the background will turn completely white.

If you’re a bit lazy, you can download this Photoshop action to extract your drawing's lines. This way you won’t have to do it manually.

Step 6 - The Color

I have already written various tutorials about how to color in Photoshop. I don’t want to bore you so I’ll try something different:

First we paint flat colors: They are useful to make quick selections of the different areas.
Then the shadows, mid tones, bright tones and reflections, in different layers, using just 3 colors.
We make all the color changes that are necessary in each layer for the character to be full color.
We add effects playing with the layer modes.

These are the three colors I’ve chosen to paint the character. As I already said, we will color the character with Photoshop commands later, so the choosing of the colors isn’t very important. Just remember you need a dark color for shadows, mid for general light and bright for outlines and more intense lights.

Importance of the History Brush

The History Brush is a potent tool that I use very often, since we can block parts of our design which are already finished and continue working on the rest without spoiling them. I’ll give you a basic example, shown below.

With a little more practice you will be aware of the limitless possibilities of this tool. As you can see in the example, we can use it as an eraser (without being afraid of erasing finished parts); we can do the same to paint instead of erasing; if we take various snapshots of the same design, we can get intermediate versions; we can lower the brush opacity and merge various versions of the same design; we can even play with the tonalities… Don’t be afraid of experimenting.
WARNING: the history brush works by layers, the layer we want to modify must exist in both points of the history. If we merge or delete the layer in question, the history brush won’t work.
You can visit this video tutorial about how to color with Photoshop to watch the History brush in action.

Flat Colors

Below the lineart layer, we create a new layer and name it "Flat Colors," and then we fill the drawing with colors that must differ enough from each other to make later selections easier. You can do it with any tools you want, pay attention not to leave any gaps.
We will only use this layer to make selections, for example: If we want to paint our character’s hair, we pick the Magic Wand tool and click on the hair. This way we obtain a quick and precise selection.

Color Base

We disable the "Flat Colors" layer and we place it wherever it doesn’t bother us. We can get a selection of the complete outline of the character by Command-clicking on this layer icon.
Then we create a new layer, we name it "Color Base" and we fill it with a flat color. In this case, I chose #e37750 color, as it’s a comfortable and neutral color for me.

Shadows

We create a new layer above the "Color Base," and we name it "Shadows." In this layer, we’ll paint the shadows with the same base color, but we’ll put the layer in Multiply mode temporarily.

I’ve chosen a light source that comes from above-left. Knowing how to be coherent with the lighting point volume is the most difficult part, and there’s no other trick than practicing... you can use an articulate toy in a dark room with a strong lighting point and use it as reference.
Notice that the shadows don't have to occupy the whole drawing, we must leave room for the lighting. I use some captions so you can see the way I usually paint the shadows.

Image with base color.
I isolate the biggest volumes.
Using the History brush with a big brush with soft edge, I erase the part where the light falls on.
I intensify the shadows with a small brush and hard edges.
I do the rest of the volumes. I use the History Brush tool, as shown earlier in this tutorial.
When all the volumes are shaded, I do the reflections of the outlines using the Eraser tool. These reflections intensify the outlines, we gain clearness, which is very important if we use the drawing in extremely small scales.

Soft Light

When we have already painted the shadows we create a new layer below, and we name it "Soft Light."

We use the Gradient tool to create a soft illumination that will be the base for the later lighting.

We have the shadows painted.
With the Gradient tool (from #feeaa9 color to transparent and in spherical mode) I go throwing gradients in the areas where the light is supposed to be more intense.
I put the "Shadows" layer in Normal mode. The result is global and soft lighting, which will be the base to paint the harder lights.

Here you can see the configuration I use to make the gradients:

Hard light

We create a new layer just below the "lines" and we name it "Hard Light." The process is basically the same to the one we used for the shadows, but inversed. Instead of painting the deep zones, we paint the projecting ones. I use a #ffeeae color.

Outlines

I create a new layer below the shadows and I name it "Reflections." I like emphasizing the volumes by adding reflections to the outlines, the outlines and volumes are much clearer this way. Remember that we erased the outlines in the Shadows Step, now we only have to put a layer below the shadows and go painting carefully.

Step 7 - Coloring

Here comes the fun part! We have already finished the lighting, all the volumes are defined and we have the different levels of light (shadows, mid-tones, and bright tones) separately. Now, playing with Command + U in Photoshop, we'll color the character quickly.

We select the hair, remember we have the "Flat colors" layer for this.
We disable all the color layers except the "Color Base," and we stay in this layer. Press Command + U to modify the color parameters, I chose an intermediate brown.
We activate the "Shadows" layer, and Command + U again, I chose a darker color.
We activate the "Soft light"layer, and Command + U, I chose a brighter color.
Let’s now go for the "Hard Light" layer and we modify the color.
Finally, to the "Reflections" layer. I chose a more saturated color to make it detach.

Notice that the colors I have chosen are all from the same range, but slightly different, so we obtain a wider chromatic range. We can go further and use various colors, even in the same layer. Here I exaggerated a bit, so you can see the possibilities:

Below you can see how I colored each part of the character. Try your own color combinations until you get the one you like.

Step 8 - The Effects

We have already finished the color base, now we’re going to play with layers in different fusion modes (Layers palette, the menu up on the left) to give more deepness to the color. All the layers must be above the "Lineart" layer.

When we finish we can merge all the layers (make a security copy before that), and go adding more effects. We can use the Dodge tool to brighten some zones or the Burn tool to darken them. We can play with the Color Balance (Command + B) or with all the Levels (Command + L). With a bit of imagination you can obtain outstanding results.
As I said at the beginning, I’ll paint the skate separately, so we’ll have two versions. I used the same technique that I did with the character. The final character design is below.
And we finally finished. It looks good, don’t you think?

Step 9 - Final Presentation

As good professionals we are, we have to pay attention to the presentation. With a couple of logotypes, some images taken from our friends at Gomedia and a bit of imagination, we can make a presentation like that shown below. You can grab the wallpaper-size version here.

Look! It was a good idea to make the skate separately, now we have 2 different versions with virtually the same effort. You can grab the wallpaper-size version here.

This is the limited color version, but we can play only with the lines too (luckily I made them quite thick). You can grab the wallpaper-size version of this here.

Don’t be afraid, I’m not going to explain how to make these wallpapers. We've covered quite some ground for this tutorial already, I can leave happy now!

Step 10 - Closing Words

Well, my friends, just only one thing left to do. I want to make a request… to those “big” publishing companies, who obtain their material thanks to exploitation, who fill their pockets with money without sharing a cent (they leave FAME for us artists); they should follow the model of PSDTUTS, always so generous and caring with both the artist and the reader, demonstrating that the profitableness of a business doesn’t depend on the low cost source materials, but on its quality and on the resourcefulness when it comes to sell it.
Thanks to Eden for creating as great a resource as PSDTUTS, specially to Sean for his flexibility. Thanks to my friend Anita, for helping me selflessly, and for translating this article (we've included the original version in Spanish as well in the download). And finally thanks to PSDTUTS readers, I hope you have read until the end, that you have learned many new things, or at least that you have enjoyed this tutorial.
Of course, if you have any questions I will answer with pleasure. Feel free to comment on the related news post on the site. Regards

link download PDS: http://hotfile.com/dl/62521004/030b53a/93_Edgy_Character.rar.html

Copyright & Usage

2010-08-15T03:42:00.000-07:00

The effects and techniques demonstrated in tutorials on the PUS can be used in whatever manner you wish without attribution.
The text, images and tutorials themselves are the copyright of their respective owners.
You cannot copy whole tutorials, either in English or translated to another language.