Tuesday, December 28, 2010

Scary/Ugly Smile

I’m going to show you how to convert a nice smile into ugly smile.

To start, I have selected a pearly white smile from Photos.com.



In just a few quick steps this striking smile can be changed to one that is far less than appealing. Again, a texture image from Photos.com will serve as the foundation for this young lady's hygiene problem.



Define this image as a pattern by going to Edit>Define Pattern. Name the new pattern ‘rough’ and click OK. The new pattern is now resident with those loaded in Photoshop.



Use the Magic Wand tool and select the teeth.



Create a new layer and fill the selection with the new pattern





Your image should now look like image 7 below.. That looks rough! Now you’ll need to make the teeth visible beneath the pattern. Set the Blending Mode for this layer to Color Burn.







To decrease the harsh color in the rot, decrease the Fill Opacity of the layer to 80%



The cracks in the texture have now become rot in the teeth, complete with coffee stains.

Thursday, December 16, 2010

Aging/Old Photo

Here’s a little tutorial showing you how I basically go about aging a woman’s face in Photoshop.

Preface:
I've been asked several times by different members to post a tutorial on how I age-progress a person. So, here it is!
Men and women age a little bit differently but since I've only aged female celebrities thus far, I'll just focus on women for this tutorial. I’ll be using the image of Katie Holmes that I did for a past W1K contest, as an example.

Step 1: Choosing an Appropriate Photo
When deciding to age-progress a celebrity’s face, I try to select a picture that is touched-up as little as possible.
I find that candid shots, or any shots that have not been taken in a studio, work best because the resulting harsh lighting reveals more of the skin’s details i.e. slight bags under the eyes and faint wrinkles. The appearance of such details makes it all that much easier to visualize how your subject will age. Visualizing what the end result will look like brings you one step closer to aging her face realistically.
In Katie’s case, we can see very faint horizontal lines on her forehead, fairly obvious lines under her eyes and lines bracketing her mouth.

Step 2: Collecting Reference Material
Reference material is key in my method of aging. Keeping Katie’s face in mind, I scoured the Web, looking for faces of old women who either resemble Katie and/or share the same facial expression. Here, Katie is smiling with her face positioned at a 3/4 angle so I tried to gather as many pictures of old women who are smiling in the same manner or close to that. I then opened up the picture of Katie in Photoshop and pasted the found images around her face on a separate layer, spread out to provide easy visual access.
Another kind of reference I like to use but is usually hard to find, is pictures of the subject’s parents. I managed to find a couple of reference pictures of Katie’s mother online and they really helped me to decide whether or not to give Katie a double chin. Since her mom has quite a bit of mass under her chin, I decided I would apply that to Katie too.

Step 3: Thinning Brows
Now the fun begins! The first thing I like to do is to thin out the subject’s eyebrows and eyelashes. The older people get, the thinner their hair gets - either because hair falls out and/or because it dries out as it greys.
 
So to achieve this, I like to use the Clone Stamp tool at 100% with a relatively small brush size depending on the size and resolution of the image. I sampled the surrounding skin to thin and reduce the number of hairs.

Step 4: Mold the Face
Next, I like to add the basic sags to the skin. I do this in the Liquify mode. I tried to create sagging effects to the cheeks, jowls and the cliff just above the eyes by using the Push tool. For the eyes, I tried to be subtle; otherwise she may end up looking somewhat ghoulish.
From what I’ve learned about the aging process, I know that while bones cease to grow, and in fact shrink, cartilage does continue to grow. As a result, the end of a nose may appear larger as a person grows older. So while I was still in the Liquify mode, I used the Push tool to extend the length of the nose slightly. Then I used the Bloat tool to also enlarge it slightly, being careful not lose the essential quality or character of the nose. Go too far and it may not look like Katie anymore.

Step 5: The Aforementioned Double Chin
Based on her mother’s pictures, I then added a fairly massive double chin. I initially used the Airbrush tool with some fairly broad strokes, sampling the colors that were already in the area of her neck. I then worked in the details with a finer brush size. Also, keep in mind that I was also using the other reference photos of older women to guide me.

Step 6: Wrinkle Up the Eyes
For me, the most important parts to get right are the eyes. They can make or break the project. Done wrong and the picture may no longer be identifiable as one of Katie Holmes anymore. I sought out the fine lines around the eyes and I tried to imagine how they would progress into wrinkles. I then extended them in length and width accordingly. Referencing the pictures of old women helped a lot with this step.

I used a combination of the Stamp tool and Brush tool. I wish I could explain my technique at this point in a more clinical manner but mostly I relied on my artistic instincts. I emphasized the wrinkles around the eyes by widening and deepening the lines slightly and increasing the contrast by darkening the recesses and lightening the edges. Also, I extended wrinkles to the cheekbone areas. I then applied the same technique to the wrinkles around the mouth and to the forehead.

Step 6: Reducing the Lips
In this step, I work on the lips. As people grow older, the outline of the lips tends to recede. Using the Stamp tool, I sampled the skin surrounding the lips and thinned them out.
While I was at it, I also added a few vertical wrinkles above the lips to give her a bit of a "prune" effect. We just want a hint of that, so don’t carve out deep lines; deep lines would only be necessary if she was puckering her lips.
Step 7: Planning Out More Wrinkles
Here, on a separate layer, I faintly outlined or sketched, with a relatively thin brush size, areas that I may or may not add more lines and wrinkles to. It’s easy to get carried away with the addition of wrinkles. So, I stopped, took a step back and assessed where to take to image. For me, it's essential and a great test to see what best works.
Step 8: Touching Up the Wrinkles
Based on the previous step, I added wrinkles where I thought they were needed most.
 
Overall, I found that the wrinkles and lines seemed a little flat in comparison to the rest of Katie’s features. They needed more definition so that they could pop out more. So, I highlighted the raised edges of the individual lines with the Brush tool and with a lighter skin tone.

Step 9: Hairy Lips
Facial hair becomes an issue with most women as they age. For some strange reason they lose it in the brow area and grow it back around the mouth area. I didn’t want Katie to be the exception so with a very fine brush size and the Brush tool, I added hairs to her upper lip.
I tried to make it as subtle as possible. Hairs too thick or dark would draw the viewer’s attention straight to her mustache and I didn’t want that. I also added more wrinkles to the area below the corners of her mouth.

Step 10: Refining the Neck
 
I decided that the neck was too smooth for a woman of 75 years of age. So I added finer wrinkles to that area. Also, I added more mass and weight to her jowls with the airbrush by increasing the value of the tones in those areas thus creating more contrast between surface planes.

Step 11: Adding Age Spots
A key component to effective aging of a face is the addition of age spots.
So at this point, I sampled one of the darker skin tones on her face, and on a separate layer that was set to Multiply and 30% opacity, I brushed them in and tried to create irregular shapes (there IS no perfect age spot). You can add as many as you like; the amount varies from person to person. I decided to be conservative with Katie.

Page 14: Step 12: More Refinements
I took a little break from it and came back to it later to possibly get a better perspective on it. When I looked at it, at this point, I decided that certain areas needed refining and added detail. This is the beauty of working with a high-resolution file; I can zoom in real close and deal with a wrinkle up-close and personal.
Unless their teeth were subjected to regular whitening, most people’s teeth yellow with age. Gums also recede, showing less gum and more bone. And so with that in mind, I sampled a yellowish-brown color and on a new layer that was set to Multiply and 30% opacity and painted that color to the teeth with the Brush tool. Her gums didn’t show to begin with, so receding the gums here wasn’t necessary.

Page 15: Step 13: Preparing the Hair
The finishing touch here is greying the hair. I began by creating a mask defining the area of the hair. I used the brush for this and tried my best to define as many loose strands of hair that I could.
With this mask as a selection, I then created a Hue/Saturation adjustment layer and reduced the saturation to –63.
I then created a new adjustment layer based on the same mask and adjusted the Brightness/Contrast to brightness +9 and contrast –36. As a result, I found that the darker areas were too pale and caused a loss of depth and so to adjust that, I then selected the mask and scratched out the darker areas with a 5px brush size at 50% opacity so that they could show through from the original image.

Step 14: Hair Raising
The next step was to raise the hairline and thin out the hair. Hair loss is common with both sexes.
I sampled the area at the top of the forehead and extended the skin area above the original hairline.
Step 15: Greying the Hair
A lot of details of the hair were lost in the previous step so with a thin brush size at 80 percent opacity I drew in fine grey hairs, sparsely laid out.
Patiently, slowly, stroke by stroke I added more and more hairs until I was happy with the amount of grey I had added.

Page 18: Step 16: Finishing Touches
Finally, I took a step back, refined a few wrinkles here and there ET VOILA!
I hope this tutorial was insightful. It may not be the most technically detailed tutorial but it gives you a good idea of the process I go through to get the job done. Hopefully, it will help you create your own trophy-winning images for future Fountain of Age contests!

Wednesday, September 8, 2010

Best Tutorials of the Month

Paint With Fire
In real life, painting with fire might be considered dangerous and possibly illegal. In Photoshop, however, painting with fire can produce stunning results. This tutorial from Digital Arts demonstrates how to create a flaming person in Photoshop.
Visit Tutorial

Using Lighting, Atmospherics and Digital Illustration Techniques for Matte Painting
To create a realistic matte painting, or any artwork for that matter, it is important to understand the properties of light, atmospherics, color and perspective. This tutorial from Creative Fan demonstrates how to use these principles to create a stunning landscape matte painting.
Visit Tutorial

Create a Refreshing Beer Themed Poster Design in Photoshop
When you create a print advertisement, it’s important that all the elements of your composition are geared towards selling a product and promoting a brand. This tutorial from Colorburned demonstrates how to produce a beautiful beer-themed advertisement in Photoshop.
Visit Tutorial

Combining Custom Brushes for Wild Effects in Photoshop
Photoshop brushes are one of the most powerful tools in Photoshop’s arsenal. In this tutorial, Creative Fan makes a second appearance in this round up with this really nice tutorial demonstrating how to use custom brushes to produce wild effects in Photoshop.
Visit Tutorial

Correcting Exposure with the Shadows & Highlights Tool
Often, when taking pictures, it’s difficult, sometimes impossible, to get the perfect exposure on everything within the frame. When shooting outdoors, you’re bound to over or under-expose parts of your shot. This tutorial from Tutorial9 demonstrates how to use Photoshop’s Shadow/Highlight adjustment to maximize the potential of your shots.
Visit Tutorial

Create a Scene with Retro-futuristic-Inspired Light Effects
Photoshop and Illustrator make a powerful combination. You can often produce stunning results by creating objects in Illustrator and bringing them into Photoshop. This tutorial from Design Instruct demonstrates how to produce stylish custom patterns and vector shapes and import them into Photoshop to bring them to life.
Visit Tutorial

Friday, September 3, 2010

Flash Splash Page

We'll finish up with a big splash. You'll make a splash page for a Web site that includes a Flash animation that tests whether a viewer has the Flash player installed on her computer.

1.
Start with a Splash

Many sites use a splash page as the gateway to the site. This splash page is all that an introductory page should be. It uses animation to catch viewers' attention, and a sexy three–dimensional graphic to entice them to delve further into the site. Most importantly, it serves a real purpose. This splash page offers viewers a test of whether they have the Flash Player—which is necessary to enjoy a Flash-based Web site-. And if they don't, there's a quick link to download the player.

We used Photoshop to make the dimensional graphic for this page. You'll work in ImageReady to animate the graphic and export it as a Flash movie.


TIP

Flash Capability in ImageReady. In case you started reading from the back of the book (we've been known to do it ourselves), we want to be sure you know that you can export movies in Flash format straight from ImageReady. You can also export ImageReady layers as individual Flash files for import into Flash, and you can create Flash movies with variables and dynamic data in ImageReady.
2.
Transform the Ball

You'll be amazed at how easy it is to make layered artwork for an animation of a sphere pulsing. In the Layers palette, double-click the layer name on the Ball layer and rename that layer Ball1 to correspond to the animation frame on which it will be first visible. Then Control/right-click the Ball1 layer, choose Duplicate Layer from the pop-up menu, and name the duplicate layer Ball2.

Click in the Visibility field of the Ball1 layer to turn its Eye icon off A, and click in the Visibility field of the Ball2 layer to turn its Eye icon on B. With the Ball2 layer selected, choose Edit>Transform>Scale. Hold the Alt/Option key as you click on the center anchor point at the top of the bounding box C.and drag down to compress the height of the ball from the top and bottom. If you want to be precise, keep your eye on the Height field in the Options bar, dragging down until the original number there (173 px) is reduced to 149 px. D. Click the big checkmark on the Options bar E to exit transform mode.

TIP

Turn Off Layer Edges. ImageReady displays a blue line around the content of a selected layer. If you find that distracting, choose View>Show>Layer Edges to toggle that option off.
3.
Transform Another Ball

Repeat the preceding step, duplicating Ball1 and naming the duplicate layer Ball3. Turn off the visibility of the Ball1 and Ball2 layers and turn on the visibility of the Ball3 layer. Compress Ball3 more than Ball2 by Option/Alt-dragging the center anchor point at the top of its transform bounding box down until the Height field in the Options bar reads 107 px.


Make Frame 1 of the Animation

Now that you've made the layered artwork, you're ready to create the animation in ImageReady. This simple animation is made by clicking in the Visibility field of each ball layer to turn its Eye icon on or off on each frame.
Open the Animation palette, which automatically displays Frame 1 A. In the Layers palette, set the layer visibility as follows B:

Ball1 layer on
Ball2 layer off
Ball3 layer off


Make Frame 2 of the Animation

Click the Duplicate Animation Frame icon A at the bottom of the Animation palette to create Frame 2. With Frame 2 selected, set layer visibility as follows:

Ball2 layer on
Ball1 layer off
Ball3 layer off
Make Frame 3 of the Animation

Click the Duplicate Animation Frame icon at the bottom of the Animation palette to create Frame 3. With Frame 3 selected, set layer visibility as follows A:

Ball3 layer on
Ball1 layer off
Ball2 layer off
Make Frame 4 of the Animation

Click the Duplicate Animation Frame icon A at the bottom of the Animation palette to create Frame 4. With Frame 4 selected, set layer visibility as follows B:

Ball2 layer on
Ball1 layer off
Ball3 layer off
Set the Animation Time Delay

In this step you'll set the time delay between frames. With Frame 4 highlighted in the Animation palette, hold the Shift key and click on Frame 1 to select all the frames. Click the Time Delay label under any frame A and choose 0.2 sec.
Click the Play arrow B at the bottom of the Animation palette to preview the animation in ImageReady. Click the same button to stop the preview. Sweet!
9.
Add Text

Select the Type tool in the toolbox, and choose white and a Sans Serif font in the Options bar. Type: To enjoy this site you will need to have Flash® Player installed. Use the Move tool to move the text into place under the ball A. (Selecting the Move tool also commits the type and exits text edit mode, so you're ready to add another type layer.)

Type: If you see a ball moving in the center of the page click HERE Press Return/Enter, and type: Otherwise, get Flash® Player HERE

Highlight the last two lines of text, and click the Align Text Right icon in the Options bar. Use the Move tool to move this text into place at the bottom-right corner of the image B.


Make Image Map Hot Spots

Select the Image Map Rectangle tool in the toolbox A. Drag rectangular hot spots around each of the two words HERE. Select a hot spot with the Image Map Select tool B. In the URL field of the Image Map palette C.(Window>Image Map) add a relative link (like contact.htm) to a page you plan to add to the site. For the second hot spot add a full link (including http://) to an external site where a viewer can download the Flash® Player.

TIP

Registered Trademark Symbol. To insert a registered trademark symbol, press Command-R/Alt-0174. Highlight the symbol and click the Character palette icon in the Options bar. In the Character palette, click the Superscript button.
11.
Prepare a Slice Around the Ball

If the fully round ball is not visible, turn on the Eye icon on the Ball1 layer in the Layers palette. Select the Slice tool in the toolbox and draw a slice around the ball no bigger than its black glow A. In the Slice palette (Window>Slice), name the slice Ball B. Choose Slices>Group Slices into Table from the main menu bar. A table symbol now appears in the Ball slice C. Putting this slice alone in a nested table as you just did, rather than leaving it as a cell in a larger table, which is the default behavior, will help keep the area from collapsing in the HTML file when you remove the ball image later in this project.

Optimize the Slices

The file now contains one user slice around the ball and several auto slices that ImageReady made to fill in the surrounding area.You'll optimize these slices in this step.

Click on the Optimized tab in the document window A so you can see a preview of the image with the optimization settings you choose. Open the Optimize palette (Window>Optimize), and click the double-pointed arrow on its tab B to see all its settings. Select the Slice Select tool in the toolbox C, and click on the Ball slice in the image. In the Optimize palette, choose the following settings:
  • Format: GIF (This has to be a GIF because it's an animation. JPEG does not support animation.)
  • Reduction: Selective
  • Colors: 256
  • Dither Method: None
  • Transparency: Checked
  • Add Metadata: Unchecked
Repeat this on one of the auto slices.


TIP

Optimizing an Animation. To learn more about optimizing an animation.
13.
Set the Page Background Color

Choose File>Output Settings> Background. In the Output Settings dialog box, click in the BG Color field A and choose black (#000000) in the Color Picker that opens. Click OK in both dialog boxes. This sets the background color of the Web page that will show in a browser window that is stretched larger than this image.

Save with a GIF Animation

Choose File>Save Optimized As. Set Format/Save As Type to HTML and Images A. Click New Folder B and make a new folder in which you'll save these files. Set Slices to All Slices C. Click Save. ImageReady generates a folder of images that contains the Ball.gif animation D generated from your Ball slice. It also produces an HTML file, with a nested table to hold the animation in place.
Export ball.gif as a SWF

In ImageReady, choose File>Open and navigate to Ball.gif in the folder of images you generated in the last step. With Ball.gif open in ImageReady, Choose File>Export>Macromedia® Flash© SWF. In the SWF Export dialog box, click in the SWF bgcolor field A and choose black from the Color Picker. Uncheck Generate HTML B to save the SWF without an HTML file. Set JPEG Quality to about 50 C. (This setting will apply to the graphics in this animation.) Click OK. In the next Export dialog box, click Save to save the animation as Ball.swf D.
Replace the GIF with the SWF

In Dreamweaver or another site-building program, open the HTML file you saved in Step 14. Delete Ball.gif and substitute the Ball.swf file that you exported in the last step. The Flash animation is now incorporated in your splash page!

INSIGHT

Technique Summary. To review—you saved an HTML file that incorporates a GIF animation, and then re-exported that GIF animation as a SWF Flash movie. You can substitute the GIF animation for the SWF animation by opening the HTML file in a site-building program like Dreamweaver.
In this tutorial:
  1. Web Site and Home Pages
  2. Getting in the Game
  3. Showing Off
  4. Getting Serious
  5. Create Game Site
  6. Applying Patterns to Web Graphics
  7. Web Pattern Recipes
  8. Gallery Site with Viewer Feedback
  9. Adding File Information to Images
  10. Customizing a Web Photo Gallery
  11. Portfolio Site
  12. Information Site
  13. Flash Splash Page