February 10th, 2009 in Photoshop Tutorials by Richard Carpenter
Carbon Style Icon
23 Votes, Rating: 4.96
Loading ...
Good afternoon everyone, welcome to tutorial number #170, in this tutorial il show you how to create a custom carbon styled icon for you to use for your website or desktop.
Right lets get started create a new document im using 600×200 but you can use what ever size you want depending on how many icons you want. Im also using a nice bright background so i can see everything abit more clearly. Select the rounded rectangle tool, change all the settings in the top tool bar to reflect the image below.
Draw out your icon onto your canvas, you should have something like this when you draw out your rectangle.
Select the pen tool, then right click in the middle of your rounded rectangle and goto fill path, the color doesnt matter as we will be changing it in a minute. Now right click once again and goto delete path.
You should be left with a rounded rectangle/square :) now add these layer styles.
You should have something like this.
For this next part you need to create a custom pattern, create a new document with a transparent background 4×4 pixels, zoom in 1600% then create whats in the image below,
Once you have created it goto “edit > define pattern”, save your pattern as carbon or something, what ever you like. Now head back to your orginal canvas and click on the little thumbnail image in the layers pallette on your rounded box layer whilst holding the CTRL key on the keyboard this should make a selection. Create a new layer above your rounded rectangle called pattern. Select the paint bucket tool, in the top tool bar switch to pattern, then select your pattern in the drop down box.
Fill your selection with the pattern. Now zoom in on your rounded rectangle and add a layer mask to pattern layer. Press the D key on the keyboard HOTLINK = default background and forground colors. Then press the letter X HOTLINK= switch forground and background colors. Select the gradient tool with a reflected gradient. Drag from point 1 to point 2 (shown in the image below).
Right-click the pattern layers mask and goto apply mask, this should merge the mask and the layer as one. Now add yet another layer mask this time select the linear gradient. Press X on the keyboard to switch the colors again. Drag from point 3 to point 4 (shown in image below).
Apply the layer mask once again. You should have something like this.
Using the pen tool make a path like the image below.
Fill the selection with the color white on a new layer above your pattern layer. Set layer opacity to 5%.
Select the rectangular marquee tool and create a small thin bar across the bottom of the icon, make the ends overlap by a couple of pixels.
Add these layer styles to your little bar.
You should have something like the image in step 15. Zoom in quite abit, on a layer underneath the bar layer make a selection like in the image below using the polygonal lasso tool.
Fill your selection with a slightly lighter color than the actual bar. Do this for both sides of the bar.
Label your bar using a simple small arial font, then add your icon inside the space provided.
What are you waiting for go create your own masterpiece. ;) Till next time, see you all soon. Dont forget to subscribe to our rss/twitter.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
57 Responses to “Carbon Style Icon”