129 Comments
Carbon Fiber Layout
August 31, 2008It’s about time I write a web layout tutorial so here it is, you’ll learn how to make this sleek layout with a carbon fiber background that would look great as a landing page for a website. Most of the techniques are quite simple; I’ll be covering things like creating and using patterns, using layer styles to match CSS properties and also a few layer masks.
Tutorial Files
If you are a PSD PRO member then download the PSD file and much more by going here.
Introduction
I felt it was about time I made a tutorial on creating a web layout, I wanted to do this a bit differently and focus on building the layout with CSS in mind; keeping everything measured and positioned and working out some of the CSS values like padding and borders. This was instead of just throwing together a layout in Photoshop that would be a nightmare to code. I could also make this a two part tutorial and make the second part about the coding of the site in HTML and CSS, I know most of you are probably here to learn Photoshop so it might not get much interest but leave a comment and say if you’d like the second part. I left this tutorial quite open in the sense that I haven’t told you everything I’ve done but told you enough so you end up with a nice layout that maybe deosn’t look exactly like mine. I haven’t gone in to details like fonts and colors so just use whatever you think looks best and I hope you get a good result.
Step 1
Create a new document with dimensions; 16x16px. First we will create the pattern used for the carbon fiber. I actually created this pattern a while ago to match the checkered pattern you see when you have a transparent background in Photoshop, so we will create that then adapt it to look more like carbon fiber. You can probably work out how to make it by looking at the image below. Basically you want four rectangle; two white then two with a color of #cecece, each 8x8px. Once you have it looking like the image below then go Edit>Define Pattern and save the pattern. You can now close this document.
Step 2
Now create a new document with dimensions; 1100x800px then create a new layer and set the foreground color to #090909. Now with this layer selected, hit Alt+Backspace and this will fill the layer. Right click on this layer then go to blending options and add a pattern overlay with these settings.
Step 3
The image below shows the layout of the page (not including the background), so it showing what we will call the container, we want this to be 800x520px then we will have the header above it and the footer below. The blue part is the border of the container the green part will be the padding which is just space between the content and the border; so that none of the text or images are touching the edge. the orange box is the sidebar and the red box will contain the content of the page. The yellow boxes will be images which could be like a post preview if you were to use it as a blog or just general images that will have text below them, the text being the pink boxes. There will be other elements in the design but I only tend to accurately space out the important parts in Photoshop then add in the size and positioning of the rest when coding the site. We are going to set up guides for this which are the white lines shown here but they might be a different color for you. First hit Ctrl+R to show the rulers then hit F8 to bring up the info panel which will show you the x and y co-ordinates of your cursor. To make a guide just click on a ruler then drag into the page. If you enable snap in the view dropdown then you can hold shift to make the guides snap every 5px. Feel free to use your own values here but if this is all to confusing then go View>New Guide and just enter in the values I’ve listed below:
Vertical guides(px): 150, 170, 180, 420, 440, 680, 695, 920, 930, 950
Horizontal guides(px): 100, 120, 130, 160, 205, 300, 315, 360, 460, 590, 600, 620
Step 4
Change the foreground color to white then select the rectangle shape tool and make sure in the main toolbar that the shape layers button is pressed. Go to the View menu and check that snap is checked now draw box snapping to the outer guides, the blue box in the layout image. Next go to the blending options for this layer and add a color overlay and a stroke using the settings shown below. Lastly in the layers panel change the fill opacity to 0%.
Step 5
Now draw another rectangle using the next guides in; the green box in the layout image. Go to the blending options and add a stroke mimicing the settings below, you can use a different color but whatever you choose make sure you use it throughout the design so wherever I use blue use the color you decided on.
Step 6
Now we are going to make a simple header, which will go just above the container, see the final image for reference. Use any font you like for this as long as it’s bold and make sure its white.
Step 7
Add the layer styles shown below to the text to get the result shown in the bottom image.
Step 8
Select the rounded rectangle tool and set the radius to 5px and draw a rounded rectangle about the same height as the text and whatever width you want. Now add the layer styles shown below, I also added some text in white.
Step 9
For the menu I just used one line of text in blue with the ‘|’ character between each category. Try and match the size and use your favorite sans-serif font for this in uppercase.
Step 10
Use the guides to make the sidebar, which was in orange in our layout. The height of these boxes aren’t measured as they will depend on the content we put within them once we start coding the site so just make it rough. Use the rectangle tool for these with a light grey as the foreground color.
Step 11
Now add a pattern overlay and a stroke to these layers; the quickest way to do this is to add the styles then right click on the layer and copy the layer style then right click and paste it onto the other layers. I also added another box below which was in white that I used the same layer styles on.
Step 12
I added some content; this is an important part of designing in Photoshop as it lets you experiment with colors, fonts and sizes whereas experimenting with these kind of things is a bit trickier in CSS (unless you use firebug:)). Here I added a title to each of the boxes and filled them with some text I took from this site. I then put in an ad for my site which I had lying about. I’ll let you decide what you want to put in these boxes.
Step 13
I thought it would look good to have some thumbnail images at the bottom which could maybe link somewhere. So get some images and size them down to 100x100px and place four along the bottom, again don’t worry about the exact positioning as this is just to get an idea of the look of this part.
Step 14
Add the following layer styles to each of the images. Note that I used a drop shadow to emulate a stroke as I really wanted two strokes. If you know any CSS then you might have worked out that the stroke will become 1px padding with a white background and the drop shadow will be a 1px border.
Step 15
We’re now going to add the images that will appear above the text, we want these to fit within the yellow boxes in the layout. First paste an image in then roughly place it where you want it. To make it so it fits within the guides that we set out then select the rectangular marquee tool and draw a box where one of the yellow boxes are in the layout image to make a selection. Now just press the layer mask button in the layers panel to add a mask to the image. There should be a chain link between the layer and the mask so click on this to remove it then select the layer and you’ll notice if you try to move it or scale it, it will still stay within this box. Repeat this with three more images. If you don’t understand layer masks much then feel free to use a different technique or just read up about layer masks in some other of my tutorials.
Step 16
Now using the text tool make some text boxes below these images then just add some text within these in a dark grey color. Also add a small footer below the container and you should have something similar to the image below.
Similar Tutorials:
Save and Share this Post
We like people who share our posts! Del.Icio.Us - StumbleUpon - Float - Reddit
August 31st, 2008
NaldzGraphics:
wow.nice tutorial.its well explained.thanks a lot
Ronald
September 1st, 2008
RoboRooster:
Great tut, I would definitely enjoy the coding segment. Would really help me put my CSS knowledge together, considering I know separate pieces, but not necessarily how they can work together.
September 1st, 2008
mick3y:
I haven’t commented before, but i love these tuts, i too would also like the coding part. Again great tuts, my main source for ps tuts :p
September 2nd, 2008
Ross:
Thanks guys, looks like I’ll be doing the coding part then; should be ready in a few days.
September 3rd, 2008
Dainis Graveris:
I like Your outcome – nice tutorial – simple and well explained.
September 3rd, 2008
derek:
i cant get the guide lines to show up at all.. and also the “container”.. has me stumped. do i create a new documet OVER the first one with the 800×520 or whats up with that??
September 4th, 2008
Ross:
Derek,
To get the guidelines to show up you need to first make sure the rulers are showing by hitting Ctrl+R, if the guides are still not there then hit Ctrl+H. The ‘container’ is more of a CSS term, most people use it to describe the part which everything in the web page is contained within excluding the background; so for example in PSDlearning the container goes from the brown lines on the left to the ones on the right and stretches the full page vertically. You don’t need to create a new document in step 3 I’ve only just shown the parts within the first set of guides so everything except the header and footer basically. I admit I may not have explained everything thoroughly but by following the instructions exactly you will get the same result. Hope that helps:)
September 4th, 2008
derek:
dude that helps A LOT. thanks man i really appreciate it. ive used a couple of your other tuts, ad WOW lol. awesome dude, purely awesome!
September 6th, 2008
KoRniquet:
Hey Ross, thanks a lot for sharing this technique. I followed up on your tutorial until the “Pattern overlay” part: and that’s where my advice kicks in. Textures like carbon/metal/steel are only realistic when you set minor emboss changes. I found out that the texture is a lot more “realistic” when I used the Bevel and emboss style. It made a kickass picture frame.
Thanks again Ross, stay creative, and take care.
September 6th, 2008
DaConfusion:
This is by far the most easiest to follow tutorial I have seen so far! Thanks.
I was able to build a similar page using your tutorial for my college race car organization. Now I just need to figure out what CSS is and how to cut this template up!
I want to change the news box to have a scroll bar as well as the links box in your tutorial. I hope CSS will allow me to do that. I will try and search for a general tutorial.
September 12th, 2008
newtrading:
Hello Ross
It’s easy to understand tutorial i got here, thank you
I’ll wait for the mocking up the design since i often fail with that :D and then just re design in HTML and CSS mode :D
September 13th, 2008
Danh ba web 2.0:
Thanks you very much. It’s useful for me !
September 14th, 2008
Appelsjap:
Ok, now I’ve got the template, but how to get it online now? Including slices and other pages we’ve made. I prefer CSS :P
BTW. thanks a lot for the great tuts, the best I’ve seen yet.
September 17th, 2008
DaConfusion:
Ross: I am having problems with CSS. Is there any way you can create a continuation of this great tutorial?
Or can you post a CSS coded version of your template, and I can then slice according to that and adapt it?
September 24th, 2008
Charles:
Ross, another awesome tutorial. One question, are you still making the follow up CSS tutorial? I think it would compliment this one quite well.
September 24th, 2008
boosi:
I like your tut and especially your intent on making this css friendly to code. Can you please include the second part. It’s very rare to find such tuts online with explanations from both sides.
September 29th, 2008
Awesome:
this was really helpful
October 6th, 2008
DaConfusion:
Can anyone please help with CSS coding for this template, I really need it!
Thanks!!
October 11th, 2008
matematik:
very nice tutor. i am making.
October 22nd, 2008
phroox:
Any chance that the coding part is still coming? I really like the outcome but I’m not that good at coding yet and needing some help.
October 28th, 2008
DaConfusion:
I ended up using this tutorial to make my school’s team page and we really need it up and running.
ANY help with the css coding would be greatly appreciated, and your help will be given credit on our site. Please email me at daconfusion@hotmail.com if you can help!
November 21st, 2008
C Crispy:
Could you put up a html/css part to it please. I followed it so far and looks great :) Thanks
December 4th, 2008
Eric Shafer:
Tracked back to from here: http://www.presidiacreative.com/amazing-web-design-tutorials/
December 24th, 2008
blueochid:
yeah!! we wanna know how it works…
thank u so much!!!
January 16th, 2009
Matematik:
Super thanks a lot.
March 24th, 2009
Bee Media:
thanks for sharing I like your article and I enjoy reading your post..
thank you for additional knowledge and Idea..
June 12th, 2009
emperex:
Great tutorial :)
Thanx for sharing, Great informationg and help :)
June 12th, 2009
aMmAr:
Thanks a lot…
maybe you can check my out come eh ? ;)
http://img375.imageshack.us/img375/8827/carbon.png
I love my outcome
June 15th, 2009
Andrew Goldie:
Nice ;)
Have you done the css tutorial
If done pleaze tell me haha
cheerzz
June 25th, 2009
Jeff:
That is a really cool effect, and rather simple to re-create, nice tutorial
(by the way the tabIndex on this comment form is messed up, when you press tab to go from name to mail, etc it goes to the login form on the top right of the page.)
June 26th, 2009
Eirol:
Hi, Where can I view the coding part?? Thanks..
July 2nd, 2009
????? ????:
thanks for sharing this nice tut .
July 26th, 2009
Josh:
Not that it does not look nice, but that looks very little like Carbon Fiber.
August 3rd, 2009
Web Design Singapore:
Thanks for sharing this tutorial. nice carbon fiber
January 4th, 2010
Singapore Web Design:
Love the carbon fiber tutorial, thanks for posting this up!
August 18th, 2010
roneybalack:
Photoshop tutorial, from beginner to advanced. Including Photoshop text effect tutorials, photo manipulation tutorials, give you joomla templates,joomla extensions,wordPress theme,web templates,
if you think i make a spam please remove this comment.
You have good tutorials and i had post it on my website. http://download60s.com
September 10th, 2010
wholesale designer clothes:
You provide enriched information for us,thank u.
November 18th, 2010
Soap Dispenser:
my family would always like to go on ski holidays because it is very enjoyable *:;
January 20th, 2011
gps forex robot:
Nice article; really I enjoyed reading. Thanks you for sharing such a wonderful information. very useful, indeed! :) keep up the good work!
January 25th, 2011
120mm fan:
“*; I am really thankful to this topic because it really gives useful information ;.’
February 7th, 2011
:D:
Woot Finally…good stuff now lest move to the next one ..XD
March 11th, 2011
washing machine aberdare:
thanks for posting matee :)
March 22nd, 2011
Trajan:
Fantastic Tutorial!
Did you end up doing the coding for this?
March 27th, 2011
web design sri lanka:
wow this tutorial is great. Thank you for sharing and nice work keep it up.
April 8th, 2011
ibs symptoms:
Thanks for the step by step guide.
April 16th, 2011
Design My Own Website:
Cool :) I am going to have to hang around your blog for awhile. This is the second tutorial I’ve looked at on your site and I’m 2 for 2 impressed :D Keep it up!
May 11th, 2011
Vyash:
Simply WOW!!!! YOu are awesome buddy!!!:):)
Keep it up!!!!:D
June 11th, 2011
kala billa:
nice step by step guide
July 13th, 2011
Best Staub Cookware:
Hello, i think that i saw you visited my blog thus i came to “return the favor”.I am attempting to find things to enhance my website!I suppose its ok to use a few of your ideas!!
July 15th, 2011
nudesexy:
My partner and I stumbled over here from a different web page and thought I may as well check things out. I like what I see so i am just following you. Look forward to finding out about your web page for a second time.
July 17th, 2011
Diann Ristaino:
I’m impressed, I must say. Really hardly ever do I encounter a blog that’s both educative and entertaining, and let me tell you, you have got hit the nail on the head. Your thought is excellent; the difficulty is something that not enough people are talking intelligently about. I am very happy that I stumbled throughout this in my seek for one thing regarding this.
August 1st, 2011
wireless communications:
Thanks, I’ve been looking for details about this subject matter for ages and yours is the best I have found so far.
August 19th, 2011
Britt Succar:
… Carbon Fiber Layout | Learning Resources for Adobe Photoshop …
August 24th, 2011
longchamp:
Big Thanks for the article RSS feed added
Thanks for posting this. i really had good time reading this.
September 4th, 2011
new interesting news:
Respect to article author , some excellent entropy.
September 7th, 2011
Lashawnda Chrisjohn:
Nice post. I was checking constantly this blog and I am impressed! Extremely useful info particularly the last part :) I care for such info a lot. I was looking for this particular info for a long time. Thank you and best of luck.
September 23rd, 2011
tory burch:
Simple frame, very three-dimensional, I like, intended for the design of my home
October 2nd, 2011
Hospital Patient Call System:
I cling onto hearing excellent focus on receiving online for free grant applications so I are exploring by far the most excellent site to have one. Can you advise me please, where could i get some?
November 3rd, 2011
rao vat:
Thanks you very much. It’s really nice and It’s useful for me !
November 4th, 2011
purplechip:
Really good and straight to the point. Thank you!!
November 4th, 2011
purplechip:
Please where do I find the second part of the tutorial showing the html and css coding?
November 16th, 2011
tory burch shop:
This content with PS terrific, notable, impressive.
November 29th, 2011
abercrombie:
I was looking for this particular info for a long time. Thank you and best of luck.abercrombie and fitch uk…
December 3rd, 2011
ugly:
This website looks terrible. The typography is terrible. Where’s all the white space?
December 16th, 2011
abercrombie fitch sale:
This is a great content, I’m so glad that I’ve found this high quality blog!
December 22nd, 2011
Genaro Cramp:
Everything is extremely open and really clear explanation of issues. was truly information. Your site is extremely useful. Thanks for sharing.
December 22nd, 2011
????? 2012:
Simple frame, very three-dimensional, I like, intended for the design of my home
December 22nd, 2011
flash games:
I was looking for this particular info for a long time. Thank you and best of luck.abercrombie and fitch uk…
January 30th, 2012
praveen:
nice site well explained..
February 18th, 2012
Sterling Napa Valley Cabernet Sauvignon:
Could it be okay to write several of this on my small web web site only incorporate a one way link to the internet site?
April 30th, 2012
thrower:
Excellent. I started going all css and div’s and it was a nightmare trying to do this after the “photoshop” treatment. I think it’s great that you are demonstrating how the procedure is done properly. Saves others from what can truly be a nightmare.
Great tutoria!