Home

Article
Submission
Advertise
PSD Files
Contact

HV-Designs.co.uk

3251 Subscribers

2480 Followers

Photoshop Tutorials
Coding Tutorials
Wordpress Tutorials
jQuery Tutorials
PSD Sitebuilds
Freebies
Video Tutorials
Articles
February 10th, 2009 in Photoshop Tutorials by Richard Carpenter

Carbon Style Icon

25 Votes, Rating: 4.96
Loading ...

1
digg

Share

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-
Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.
Richard Carpenter has written 331 posts.

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.
Ads by Google Effec t Photo Shop Carbon Blac k Carbon Dies Carbon Tools

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.
Ads by Google Online Photo Tutorials Buell Custom Background Hair Designs
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.

1
digg

Share

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On

Twitter.
62 Responses to “Carbon Style Icon”

1.
Niklas says:

Nice tutorial! Personally i think the logos should be colored :)

2.
Predator7 says:

I agree, the logos should be in color. Very nice.

3.
Murr ay says:

Very fun tutorial to start the day.

4.
Nxz says:

Nice man
5.
E-maniacs says:

NIce and easy tutorial.

The result is awesome

6.
Azhar says:

Very good tutorial

thank you
your the best

7.
Matthew Heidenreich says:

Great tutorial…. love the results

8.
psaddict says:

Added to http://www.psaddict.com

I love this style, good work!

 9.
loswl says:

Those are some great icons, I love the carbon look, the tutorial is great too :o)

10.
Stunt says:

nice work

11.
Matt says:

In the step with the mask it dont work if you press d then x you only need to press d other then that greath job on the tutorial

12.
RAGGAMAN!! says:

GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOD IDEA!!

:D

13.
 9.
loswl says:
ah
me
d
says
:
 thx man
that was awesome
,ahmed
from egypt

14.
Prashant says:

Very Funny & nice logos

15.
aravind says:

stunning effect!
nice tutorial… Thanks for sharing it :)

16.
saurabh shah says:

nice tutorial…

17.
Soumya says:

This is a superb tutorial! Amazing! Thanks for sharing! :)

18.
Worang says:

Awesome tutorial :D
Can’t wait to use it!

19.
Marvelus says:

Tutorial added on http://www.webmaster-aide.Com

Very good thanks

20.
Nishanth says:

Thanks for sharing nice tutorial……

Keep on updating these type of tutorials……..

21.
Brochures says:

Awesome effect! I love the texture and the black and white effect just adds to the simplicity and sleekness. Great tutorial, keep it up!
22.
Radwanullah Kakar says:

786
Thanks for your writing It’s good.

23.
Shaurav G says:

Hey there.

I’ve made a DIY icon pack using this tutorial. Full credit has been given, I just thought it would be a good idea to make one for people who don’t
like the look of their desktop or would like to do something themselves without going through a tutorial.

Here’s a link to it;

http://pulsera.deviantart.com/art/Icon-P ack-1-Practice-126452517

24.
g85 says:

hi all…i am new in this design world …sorry for disturbing you …but i cannot make this transparent backround 4×4…how i can colorize that is there
a spcial effect or …i dont know how to colorize that with thoose black colors…????

25.
 g3niuz says:

cool tutorial, the result looks great ;D

26.
vint4ge says:

I have some problems with the gradients and layer masks, could you put more screenshots ? I don’t know wich gradient I have to choose
(transparent with white, black and white, …) ??

That would be great, thanks !

27.
Mohamed says:

Great.. Thank you :)

28.
devoria says:

http://digg.com/design/Carbon_Style_Icon

29.
Tarik says:
 Awesome tutorial man!

30.
graff iti vectors says:

Nice tutorial and good looking icons, I like carbon style thanks

31.
pascal says:

CA tombe bien, j’ai un client qui souhaite faire un effet carbone il est imprimeur pour des baches etc..donc je vais me servir de votre effet c’est clair
!

32.

penguin says:

It is simple and nice.

33.

daddydesign says:

nice tutorial.. very clean

 34.
venkat says:

Great tutorial,Thank u 4 sharing.

35.
asd says:

Nice tut. Tnaks a lot.

Leave a Reply
Name (required)

Mail (will not be published)

(required) Website
 Other
Blogs
Ive
Written
For
On
occasions i write tutorials and articles for other blogs/tutorial websites, here are a list of tutorials and articles
ive written. Features tutorials written on six revisions and PSD Tuts+.
Advertise Here
Six Revisions Submissions

Illustrative Web Design Layout Pt.1

Illustrative Web Design Layout Pt.2
3D Gallery
3D Ribbon Style Layout
Minimal P ortfolio Layout
Minimal P ortfolio Layout PSD Sitebuild

PSD Tuts+ Submissions

Unique Colorful Layout

 HV-Design Flickr Group

Submit your photoshop artwork to the hv-designs flickr group. Not a member? Join Now.

Advertise Here

Search HV-Designs

Advertise Here Can't find what your looking for??, Try searching.

Write For HV-Designs

Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending
you aload of goodies. Learn More

Copyright
The effects and techniques demonstrated in tutorials on hv-designs.co.uk can be used in whatever manner you wish without attribution. The text, images
and tutorials themselves are all Copyright © HV-Designs

Usage

You cannot copy whole tutorials, either in English or translated to another language unless permission is given by the tutorial author.

Friends Online
Richard-Carpenter.co.uk
Cannock Website Designer
Six Revisions
Wefunction
Dry Icons
HV-Shop