Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials


Software Tutorials

Featured Free Templates
View All Templates!
Preview  |  Download
Name: metamorph_flame
Downloads:
Preview  |  Download
Name: metamorph_skyandclouds
Downloads:
View All Templates!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
:: Free Website Templates
Preview  |  Download Preview  |  Download Preview  |  Download
Name: metamorph_sunset Name: metamorph_flower Name: metamorph_waterfall
Downloads: Downloads: Downloads:

Do You Like Our Website? Share With Others!
GoogleGoogle slashdotYahooMyWebDiggTechnoratiDelicious
Page: 12345678910111213141516171819202122232425

Welcome To WebDesignTutorials.net Photoshop Tutorials Area - Faking Images: Lights and Shadows

Faking Images: Lights and Shadows

I One of the first things that people feel compelled to try with Photoshop is taking one person's head and putting it on someone else's body. All well and good, and I'm down with that sort of play. But there's a line between obviously faked stuff (see the National Enquirer) and seamless work.

When you take one image and add it to another to "fake" a scene, most of the time you're using existing images (say, a photo of your high-school prom date and a background of swarming locusts), and these images are often unrelated. Not that a high school prom date and swarm of locusts have nothing in common; I mean that the photo of your prom date was most likely taken using a soft spotlight (so that there are very few shadows) and every unsightly zit was airbrushed away. The locusts pic, on the other hand, was probably scanned from a newspaper or encyclopedia, and thus grainy with dark light and poor brightness and contrast. You could futz around on the combination of the two images forever, but something will always be off. The lighting slightly awry, eyes looking in the wrong direction, shadows falling in weird ways. Everyone will know it's a flat-out fake.

You could create your very own images, thus ensuring that the lighting and angles are correct. Or just work with a single image and tweak it (so that things like differences in lighting aren't an issue). This route is pretty simple: It's all about the Path tool.

A Path Less Traveled

path tool screen shot

Jim dismissed it as superfluous, and I have to admit that the first few times I used it, I wasn't a fan. But slowly I realized the power of the Path tool. The Lasso tool is just great for little jobs, but for total detail, the Path tool's the way to go. Click on the Path tool's icon (the little pen nib), and you'll see that it's not one tool, but five. So ... five times the fun.

Let's pretend you're trying to catch the eye of the head cheese in Marketing. With zero budget and no resources, all you have is Photoshop. And an evil imagination. An impressive side-project ad campaign would do just the trick. So you think long and hard, and finally you hit upon the perfect solution: Your company will become a NASCAR sponsor! But you know the chances of getting your company's logo on a car, even over a back left tire, are slimmer than Karen Carpenter [sick]. But, you're only a Path tool away from a car customized and detailed to fit your fiendish needs - and all from the comfort of your very own desk.

The hardest part about this process is finding just the right NASCAR photo. Going to the NASCAR site is a good place to start. Or maybe you could scan in a trading card. The idea is to get one that features the car at a good angle, with sponsor logos prominently displayed (you'll see why as we start enhancing it). Make sure to get a clean picture (without a lot of driver stats, captions, etc. to remove - you could always erase these using the clone tool, but that will just up the chances of your final image looking fakey).

Now, on to the actual path process. Open your image in Photoshop and make sure it's in RGB mode, and that its size is final (get all your scaling and cropping out of the way). Click on the Path tool, which should give you a pen nib cursor. Pick the car you want to brand with your logo and click on the outer edge of the bumper. This sets the first point. Don't worry if it's not perfectly on the bumper, we'll go back and clean it up later. For now, simply continue to click on points around the car, paying particular attention to "corner" areas like the wheel wells, spoiler, roof, and front bumper. Leave out the parts that you don't plan on modifying, like the tires. Keep going until you click on the point you started with (the pen nib will get a little circle next to it when you roll over that first point).



Go over to your layers window, click on Paths, then select Work path. Click on the arrow in the top right-hand side of that window, and then click Save path.

layers window screen shot

This brings up a dialog box - name your path (choose something like "outlinecar" so you can distinguish it from any other paths you may create later) and save it. Now let's tidy up our path.

Click and hold on the pen nib (in the tool bar), and select the one with the "+" next to it.

pen nib selection screen shot

This allows you to edit and add to the points of your path. To get the anal precision you need, Zoom In on your image (to the point where the image gets lost). Make any adjustments you need (the pen nib turns into an arrow when you roll it over an existing point) until each point is exactly where you want it to be. To accommodate, say, a particularly curvaceous bumper, you may need to add an additional point between two existing points. Off of that new middle point, you'll notice bars at either side - play around with these bars, pulling and moving them until your line is suitably warped to fit the contours of the car.



Once you're done tweaking the path to perfection, there's no need to save the path again (but you should save the image).

Turning Paths into Layers

With the Path still selected in your Layers window, drag "outlinecar" over the clear circle at the bottom of the window. This selects it (and gets those ants marching around the path). Now click on Layers to create a new layer (make sure this layer is positioned above the others). Next fill the area with a color, any color, using the paint bucket or Alt + Backspace (hit Control + H to hide the ants if they're too distracting). Now your car is a different color.



But it looks kind of dumb, huh? Windshield missing, head lamps gone. Hey ... no problem. Hide (or delete) the layer you just made. And now make a new path for each area you need control over by repeating the above process and saving each path as a separate item (and saving your image often). I'd do windshield, headlamps, and bumpers since those are all different colors, creating a path and then a layer for each. Once you have all your layers, it's time to "repaint" your ride. Start with the general outline, filling it with the color of your choice. Select the windshield and headlamp layers and delete the color from that first "general outline" layer. And you now have a car with a solid color fill, with windshield and headlamps visible and intact. But the solid color fill is still too "flat" to be convincing, isn't it?

To create something that actually looks realistic, you have several options. Either lower the opacity in that layer, or you can fiddle with the various attributes to the layer (normal, dissolve, etc.) to see if any of them give you what you're aiming for: essentially, your color with the actual shadowing of the original. A little tweaking should get you there in no time.

It's time for your logo. Make a layer (again, above the other layers) and bring in your logo. Using Layer->Transform and Scale, Perspective, and Distort you should be able to bend it to the correct angle of the hood, roof, and front bumper. The blurring that occurs should work to your benefit. The finishing touch is simply a matter of using the Burn and Dodge tool (second brush in the second row of the brushes window at 28 percent).

burn and dodge screen shot

Use it to darken or lighten the edges, drop the opacity a little, and maybe hit it with a slight added blur so that it doesn't stand out (I'll go into more depth about this later in the tutorial). And you're just about done.



The Last Lap - Adding Those Finishing Touches

Give it a once-, twice-, and thrice-over and see if it really looks real. The places where it won't are probably where your artistry abuts the original - the windshield and headlamps, and where your fill color meets the rest of the image. These can be addressed with the Blur tool and/or the Eraser tool (using the first brush in the second row of the brushes window for both). If you're erasing, drop the opacity down to about 60 percent and simply go around these edges to loosen the crispness that wasn't in the original.

Faking Images; Lights and Shadows Tutorial: Final Result

Voila! Introducing your very own NASCAR. Turn it into a JPEG, put it up on your intranet, and "accidentally" bump into the head of marketing on your way to lunch - tell him how you were up at Sears Point over the weekend to see [name of driver here] driving your logo-branded NASCAR. And suddenly you'll be promoted, raised, and bonused like never before. OK, OK, we all know that isn't the way it works, but you get my point.

So your homework for tonight is to fake something - a bus with a different ad on it, your dog with a tattoo, your graduating class with Day-Glo orange gowns, whatever.


Advertisements
Graphic Software, Flash Templates, Free Stock Photos, Web Templates, Web Design, Corporate Web Design, Royalty Free stock Photo, Affordable Website Design, Submit site, Add Url, Stock Photos, Survey Software, Anti Virus Software, E mail software, Computer Software

Premium Partners
  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Photoshop Tutorials - Learn how to build stunning web pages using Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software. The step-by-step approach makes it so easy, that even beginners can produce great web pages. Get started with these tutorials covering everything from page layout to content tips.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.
Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website Templates  |  Privacy Policy  |  Contact Us
All Right Reserved by WebDesignTutorials.net