Carbon Fiber Website Header
- Categories: Photoshop Tutorials,Web Graphics
- Author: John Ward
- Comments: 14 responses
- Tags:
-
In this tutorial I will show you how to create the carbon fiber website header that was used at projectcrankwalk.com . 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:
Start off with a new image width: 900 height:220 background: white.
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).
Apply the following layer styles:
Gradient Overlay:
Stroke:
And Drop Shadow:
Your image should look something like this:
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:
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:
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”:
You can now close the carbon fiber pattern and return to the header. Apply the following layer styles to the header:
Pattern Overlay:
Inner Shadow:
Your image should look something like this:
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:
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:
Now copy and paste the lines in between your links. When you are finished adjust the layer opacity to 15%:
Your image should now look like this:
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:
Now we can add the layer styles. Reset your colors so that white is your fore ground color then, apply the drop shadow:
Now we can add the foreground to transparent gradient (this is why we reset our color swabs):
Now we can add our stroke:
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:
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.
(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:
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) :
gerryson on March 27, 2007 at 3:37 am
your the best!
[Reply]
trunG on April 17, 2007 at 8:59 pm
umm how to u do the custom colours for the gradient?
[Reply]
John Ward on April 18, 2007 at 10:24 am
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.
[Reply]
Free tutorials on February 18, 2008 at 2:43 pm
Nice header tutorial, keep ‘em coming!
[Reply]
Photoshop-Pack on February 19, 2008 at 5:30 am
Very Nice Tutorials!
Good Luck
[Reply]
Professional Web Design | Flash Web design | Web Design Romania on March 11, 2008 at 7:01 pm
If you could put the carbon pattern up for download, that would be great
Regards
[Reply]
Web Design Romania on June 7, 2008 at 4:06 pm
This is pretty cool. Good Work. keep it Up
[Reply]
Denis on October 8, 2008 at 5:06 am
Nice tutorial, thank you.
[Reply]
multimodefibercable on October 26, 2008 at 4:39 am
hey nice way
very easy and quick…..
[Reply]
Flash Junky on December 10, 2008 at 1:39 pm
Thanks for this excellent tutorial John!
It was easy to follow, and I had great results.
Thanks a million….
[Reply]
Carlton on August 17, 2009 at 12:17 pm
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 =)
[Reply]
links of london on September 8, 2009 at 9:20 pm
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!!!
[Reply]
Naruto Shippuden on November 13, 2009 at 2:05 am
Thank you so much for sharing information love this.
[Reply]
Kenny on May 19, 2010 at 8:07 pm
I have looked all over for a tut i could use and this is awsome. Nice job man and well explained.
[Reply]