Carbon Fiber Website Header

In this tutorial I will show you how to create the carbon fiber website header that was used at . You will use a simple gradient with a pattern overlay to create a unique effect. I hope you enjoy.

Here is the finished product, click to enlarge:
Carbon Fiber Website Header Finished

Start off with a new image width: 900 height:220 background: white.
Carbon Fiber Website Header 1

Create a new layer and draw a rounded rectangle width a radius of 10 (you can use any color that will set the object apart from the background. I chose orange).
Carbon Fiber Website Header 2

Apply the following layer styles:
Gradient Overlay:
Carbon Fiber Website Header 3
Carbon Fiber Website Header 4

And Drop Shadow:
Carbon Fiber Website Header 5

Your image should look something like this:
Carbon Fiber Website Header 6

Now we need to add the carbon fiber overlay. Create a new layer and draw another rounded rectangle with a radius of 10 pixels. Create this rectangle closer to the top so that you have room for your links at the bottom:
Carbon Fiber Website Header 7

Now we need to create the carbon fiber pattern. Create a new 4×4 image and zoom in 1600%. Using the pencil tool, create the image below:
Carbon Fiber Website Header 8

Here are the colors to use for each dot.
Row 1: #2E2E2E #2B2B2B #595959 #565656
Row 2: #141414 #131313 #444444 #434343
Row 3: #555555 #595959 #2C2C2C #313131
Row 4: #484848 #464646 #121212 #101010

When you are done you can define the pattern. From the menu select Edit > Define Pattern > Then name your patter and click “ok”:
Carbon Fiber Website Header 9
You can now close the carbon fiber pattern and return to the header. Apply the following layer styles to the header:

Pattern Overlay:

Carbon Fiber Website Header 10

Inner Shadow:
Carbon Fiber Website Header 11

Your image should look something like this:
Carbon Fiber Website Header 12

Create a new layer and add the text for your links. The font I use is called AddCityBoy and can be downloaded here. Space your links out evenly along the bottom of the header:
Carbon Fiber Website Header 13

Now we need to add the lines to separate our links. Create a new layer then use the pencil tool to draw a 2px black line with a 2px white line directly to the left of it:
Carbon Fiber Website Header 14

Now copy and paste the lines in between your links. When you are finished adjust the layer opacity to 15%:
Carbon Fiber Website Header 15

Your image should now look like this:
Carbon Fiber Website Header 16

Now I add my sprocket and my logo text. Again the font used is Add City Boy this time 60px for the work “ProjectCrankwalk”. The color of the word “Project” is #043999 and the color of Crankwalk is #b00202:
Carbon Fiber Website Header 17

Now we can add the layer styles. Reset your colors so that white is your fore ground color then, apply the drop shadow:
Carbon Fiber Website Header 18

Now we can add the foreground to transparent gradient (this is why we reset our color swabs):
Carbon Fiber Website Header 19

Now we can add our stroke:
Carbon Fiber Website Header 20

Before you close the layer style window, click the New Style button on the left and define a new style so that we can use it again later. The logo should look like this now:
Carbon Fiber Website Header 21

Now I add the word “.com” using 16pt Add City Boy in the color #043999. Then I add my name because I am cool. It is 18pt Add City Boy and the Color is #222222.
Carbon Fiber Website Header 22
(You can barely see them)

Then apply the layer style we saved by opening the layer style windows and clicking the “Styles” button. Now all you have to do is select the style you saved earlier:
Carbon Fiber Website Header 23

Apply the style to both the word “.com” and my name “by John Ward” if you used it. Then you are done (click to see full size image) :
Carbon Fiber Website Header

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • gerryson

    your the best!

  • trunG

    umm how to u do the custom colours for the gradient?

  • You double click the gradient and then a new window will pop up. In the new window you will see a bar with the gradient in it. Select the two boxes below the line, double click them and add the correct colors. Sorry I forgot to add that part, I will try to add it later today. Let me know if you need anymore help.

  • Nice header tutorial, keep ’em coming! 🙂

  • Very Nice Tutorials!
    Good Luck

  • If you could put the carbon pattern up for download, that would be great


  • This is pretty cool. Good Work. keep it Up

  • Nice tutorial, thank you.

  • hey nice way
    very easy and quick…..

  • Thanks for this excellent tutorial John!

    It was easy to follow, and I had great results. 🙂

    Thanks a million….

  • Carlton

    thanks for the tutorial john. i enjoyed it, it was well written, and i improved a bit but my result was exactly what i was looking for =)

  • Select the two boxes below the line, double click them and add the correct colors. that is very good,it is easy to follow and will have a good result!!!

  • Thank you so much for sharing information love this.

  • Kenny

    I have looked all over for a tut i could use and this is awsome. Nice job man and well explained.

  • I have to point out my affection for your kindness supporting those people that require help on this matter. Your very own dedication to passing the message all around turned out to be exceedingly informative and has without exception made guys and women much like me to achieve their aims. Your entire useful guidelines denotes this much to me and even further to my peers. Best wishes; from all of us.

  • Thanks John Ward for the share, you are Amazing person!. I enjoyed reading it. Keep writing the blog so I can come by often. When you get a chance please also visit my site