Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Quick Tip: The Real Deal on Creating Chrome!

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

Vector drawing programs often supply templates for metallic finishes, but they can look like soft bands of blue and grey (silver) or yellow and brown (gold). Today I'm going to show you how to put a custom metallic finish with depth on your artwork and really turn your vector thing, into bling! Because I'm a simple kind of guy, there will be no transparency, mesh or 3D extrusion in this example, just a few cheeky tricks of the trade.


Step 1: Not Too Thin!

Whether it's type, a logo, or a simple geometric shape, the image you choose to create a chrome effect on mustn't be too skinny. We are going to give the effect of beveled edges and need a decent gap between segments of our artwork to avoid it looking visually messy. I'm going to add Chrome to my own name and thought a 50's script would look nice.

The linework between the "U" and the "S" looked a bit narrow so I gave the artwork a 1pt stroke and expanded the stroke Object > Expand and combined the segments Window > Pathfinder > Add to shape area. Ordinarily the type would look a bit too thick and chunky but for what we need it's just fine.


Step 2: Base Blue

I'm going to start with a base color blue fill in CMYK mode (25C-05M-0Y-5K). I'll be adding and fading other colors to this value, so write the combo down or better still create a custom swatch. One of the main features of chrome reflection is a dark section running through the middle of the graphic. As a visual yard stick create a non printing guide line to work with. With a dark blue 0.5pt stroke draw below the line at left and come across each upright element of your design in a slight arc to top right, try and make them as random as possible (It's the irregularity that makes the effect look real!) Make a duplicate of the blue line, pull it down slightly and color it in our base blue. Join the 2 lines together using the Blend Tool (W).

Using a copy of the base shape paste it ontop of the blend and mask Object > Clipping Path > Make. You should get a smooth transition from dark blue down to base blue


Step 3: Pushing Points

You may get a few visual glitches happening (see the odd color jump in the first "L") but it's not to much of a drama to fix. All we have to do is move some of the individual points on the lower line to the left or right till things smooth out again. It may be easier to see if you paste the blended artwork ontop of the original blue graphic.


Step 4: The Devil is in the Detail

It's not a big thing and you can leave it out if you like, but a small vignette from our dark blue to a nearly black-blue along the top line really adds punch to the chrome effect. Use a copy of the original line draw you small block shapes underneath it then join the 2 lines together to make one object. Duplicate the base graphic then shift-click to select the block shape and divide up the 2 shapes Window > Pathfinder > Divide. Delete the unwanted portions and adjust each vignette blend to be darkest at the top, change the angles of each blend slightly to keep it irregular


Step 5: Highlight and Low Lights

To get a sheen happening either side of our dark line we are going to use 2 radial blends. Both have an outer color of our base blue, but the first has a central color of a light blue (don't use white it's too harsh) and the other is mid/dark blue. Once you've drawn a couple of circles use the Shear tool to angle
the circles into fat cigar shapes.


Step 6: Vignette and Blend Mash Up!

This is where the fun bit begins, combining our linear blends with squiggly line vignettes! Using copies of the 2 oval shapes slide them over your graphic to get a nice arrangement of light and shade. Be careful placing them to close to the darkest vignette section in the middle. My dark blue blend (highlighted) is coming up too high and clashing with the vignette on the last "L"

Tip: try not to be too obvious, little snippets of vignettes showing is better than plonking one right down in the middle and use them sparingly as the effect can turn into a mess if over used. The idea is to not let people know how we created the effect!


Step 7: Are We Using Layers Yet?

Once you are happy with your arrangement take a copy of the base graphic again and paste infront of the blend circles and mask as before. If you haven't done so already, keeping all these art elements on layers, Windows > Layers is a good way to keep the stacking order neat and avoid selecting elements you don't want!


Step 8: Shiny but Flat?

Now the shading and masking are done, I've place the chrome lettering on a fading orange background and added a brown drop shadow, but it still looks a little flat?

We need to add an edge to the graphic to give it depth plus create a light source from top left to make the edge shine!

 


Step 9: I'm working on the Edge Man

Taking another copy of the base graphic (and pasting into a new layer perhaps!) Select it and option-click to slide out a duplicate version up and to the left slightly. It only has to be a little thicker than hair line to be effective. Any more than that and we get visual problems with the skinnier parts of the design as I mentioned before.

Use Window > Pathfinder > Divide and delete everything except the lower right hand slivers of the carved up shape. Color these elements a couple of shades darker than base blue, again not to much, just enough for your eye to pick out a change in tone. this is the shadow part of our edge work.

Repeat the duplication process again only this time pull the top most shape down and to the right, the divided shape from this action will be the highlight area at top left. Color it a light blue a little lighter than than the middle of the highlight radial blend.


Step 10: Mistakes and a Re-cap

Once you place the highlight and low light edges on the graphic, it really comes together. The edges also act as a mask on the vignette and radial blends making it hard to see where one effect starts or ends. This is good as we want the chrome to have and overall look to it, not be a collection of individual effects. As I worked on this tutorial I made 2 initial mistakes. ONE I used to many blends and drowned out the effect, you do need a certain amount of flat blue showing to give the shine credibility and TWO. I made my edges way too thick, when you are creating them you think they are way yo skinny and won't show up, but they will dear reader, they will.

Here's a re-cap from left to right showing the effects we used and how the chrome comes to life - Hope you found this helpful :)

Cheers
RussellTateDOTCom

Advertisement