Chrome effect tutorial

Chrome effect tutorial

28 October 2008

Since I changed my nickname (and what comes with it- my business identification) I don’t need my old logo anymore. But still I quite love it, so I would like to share a technique of making such chrome effect on logo with You. It’s not really a pure chrome, but I didn’t know how to name it though. Everything is pretty simple, the main point are bleding options. I generally don’t like to work with them, but sometimes they are pretty useful. As usual, all You need is photoshop.

Before we start
Remember, that blending options and any other effects are fitted to my main shape. They looks good there. However, in Your logo the same blending options can look terrifying. Don’t be scare to play with them. Moreover, try to not copy all the options, when You will add them by Yourself, the more You will learn, and in future applying such effects will be intuitial.

Firstly, look with what kind of logo I will start and how will look my final result. Remember, the color of logo (light gray) is important. Other colors (only for now) mixed with settings below could broke the chrome effect. If You want to add color, You can do this after all the steps shown below. Here, in Step 4 I’m showing how to change a color of selected area [ Sticker tutorial ].

chrome tutorial- final result

Step 1
As You can see above, my logo have two parts, the big shape, and the small one. The shine on them isn’t important. The color of both shapes is #C2C2C2. I don’t mean that You have to use exactly the same color, but stay in light grays. Click on the first shape’s layer with right button on Your mouse and choose Blending options.

chrome tutorial

You will get an pop-up window. If You see it first time- don’t be scare. There’s really not so much options, as it looks at first sight. You can find the effects on the left, where with thickboxes You are applying them, on the right You can find settings of each effect. So, walk along settings and apply results close to mine (if Your size of logo is also close to mine).

chrome tutorial

Step 2
Now You have to apply the same settings to a second part of shape. You want to apply them manually again? Wrong. Click with Your right button on the layer in layers window, then choose Copy layer style. Again right-click on the second part of logo and choose Paste layer style. And voila, the settings were copied- so easy, isn’t it? Here’s how it looks for now. We could leave it as it is, but I would play with this a little more.

chrome tutorial

Step 3
Firstly I will work with bigger shape. Hold down the control key and then click on shape’s layer. It will make a selection.

chrome tutorial

Now go to Select>Modify>Contract and type 4px in a pop-up window. The selection will get smaller.

chrome tutorial

Now choose the gradient tool and make gradients closed to those below. Then set the Layer’s mode to Overlay

chrome tutorial

I would make a bit darker bottom of the shape, so apply for that another gradient, but now set the mode to Multiply.

chrome tutorial

Step 4
We will make almost the same with another part of logo. But here, before applying the Contract in selection’s menu, make one White gradient, and then after contract make another-bigger. It will looks prettier.

chrome tutorial

Step 5
Pick the eliptical Marquee tool and make a big, oval selection that cuts the logo. For ease You can zoom out Your working area. You will probably create it twice, so it’s good idea to fill it with random color on a new layer, then just CTRL+CLICK on this layer to create the same selection again.

chrome tutorial

We have a bottom border of selection, but we don’t want to let the shine get out of shape. For that hold CTRL+SHIFT+ALT and CLICK on the first shape (then make it again with second one). You should have something like I had below. Then just simply apply some light gradient (don’t go too far with opacity, 20-30% is all right).

chrome tutorial

chrome tutorial

chrome tutorial

Final touch
As i said in the beginning of this tutorial, You can add now some color to Your logo and give it a bit of live. That’s true- the chrome effects perfectly looks with grays, but I will add this color anyway :)

chrome tutorial

I hope It was pretty helpful for some of You.
If You have some problems- post a comment.


Comments are closed.

  1. Adam says:

    Nice tut, thanks~!

  2. Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com
    Please submit all of your future quality tutorials in there.

  3. tutorial URL says:

    Hi, nice tutorial. You can submit all of your tutorial to http://tutorialurl.com

    Thanks

  4. Jay-ish says:

    hello there young man. im jay from the philippines. i found your site interesting. your good. :) i love your works a lot. its a big help. :)

    anyway, i have a question, how did you come up with this lay out? im curios about this blurry thing at the back of this yellow ish. i hope you could help me. i just want to know the details. coz i really dont know how to do it. thanks buddy. heres my email address. cancertwentyfour@yahoo.com

  5. MOJITO says:

    Hi… very nice site, nice tutorial and love the effect. Thans for sharing.

    A little hint as Your tuts are mainly for begginers – it would be hlepful to give the image size and resolution. There was no problem for me to change the values or size of my graphics to match desired effect. But not long time ago a was a begginer and such thing used to drive me crazy ;)

    Good Luck and keep on posting

  6. Nice and simple, but very professional and modern looking. The effect will really give some character to The image it is being applied to. Thanks for sharing this really nice tutorial, will definitely keep this in mind.


About me

I am a Polish designer and webdeveloper, currently living in Lublin city. I study in the Lublin University of Technology.

My adventure with design began in 2005 and since then I was developing myself in sphere of computer graphic and web tech.

I enjoy sport, drawing and hard music. You can find me on twitter and check out my portfolio page. There's facebook now.

Categories

Contact

There are several ways to contact me. Yet, the easies one is to use this contact form. Just drop me a line and I will reply as soon as possible.

Links / Friends