You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Jun 25

Designing a CSS based template - part I

2004 at 02.52 am posted by Veerle Pieters

This is the start of a step-by-step based tutorial about how to create a CSS based template page. This will be a tutorial consisting of several parts: part 1 covers the creation of the navigation buttons in Photoshop CS*, the 2nd part will be the creation of the background, next on the list is the header and layout of the page and finally the implementation in CSS and XHTML.

Create glassy beveled navigation buttons - Part 1Now some of you may wonder why in God's name I start with the creation of the navigation buttons, but my initial intention was to give a small tutorial about the creation of these simple buttons. But once I was on the roll the thought came to my mind, why not do the complete course.

Create a glassy beveled navigation button

Create an RGB document, 178 x 22px white background. Create a new layer (call it "button") and fill it with gray #ececec. Add a new layer (call it "highlight") and draw a 1px white highlight line on top and on the left (using the pencil tool, 1px width). Fade out the pixel line on the left bottom a bit using the Erase Tool (select brush, 20px, 50% opacity).

erase some part of the pixel line

Create a new layer (call it "bullet"). Draw the pixel bullet using the Pencil Tool (1px, #727272). You can of course choose your own fantasy pixel bullet.

draw the pixel bullet

Create the glassy bevel effect by drawing a path (#d6d6d6) using the Pen Tool.

draw the glassy bevel with the pen tool

There you go! You have your button, now that wasn't so bad was it?

Creating the rollover effect.

To create the rollover effect we simply duplicate our layers and change the colors. First we link the layers together in the Layer Palette. Then we choose "New Set From Linked" in the Layer's Palette dropdown menu. Now duplicate that layer set by right clicking and holding down mouse button (or click hold down mouse + control for Mac users with a one button mouse) next to the layers' name. Choose Duplicate layer set in the dropdown menu. Name it "button over".

Now you can go over each layer and change colors to create your rollover button. These are the colors I used in my example here:

  • button background color: #bfe3ff
  • color of glassy bevel: #a5d1f3
  • color of the pixel bullet: #e4001b

Download the Photoshop source file of this tutorial.

*Basic knowledge of this program is required.

Go to the next part of this tutorial.

Want to learn more?

VECTORTUTS+ Vector Tutorials and More A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.




permalink this comment Marcel Fri Jun 25, 2004 at 09.09 am

Hi Veerle.

Thanks for creating this tutorial. I’ve been looking in several placed for CSS-based tutorials and step-by-step guides. I have found many but most expect you to know a fair amount of CSS to begin with. I am very new to CSS and am sting getting the ‘hang’ of things on how CSS-based sites are created.

I think I will save these tutorials as PDFs for future reference. Thanks again and I look forward to the next parts.

p.s. greetings from a warm and sunny Johannesburg, South Africa - eventhough we have winter right now! ;-)



permalink this comment Veerle Fri Jun 25, 2004 at 10.02 am

Hi Marcel, great to hear you’ll learn from my tips and tricks. This tutorial is aimed to people who want to learn CSS from the start in a rather easy way.

I’ll also try to use a nice and “easy” design for this tutorial. So the things you’ll create will be rather simple, but it won’t be less sophisticated or less nice, it will be “smart” design ;-) In other words you don’t need to be an advanced Photoshop user to follow this tutorial. If you know the basics of Photoshop and HTML and CSS in general this will be doable.

Hope you enjoy all parts. Stay tuned for part 2 ;-)



permalink this comment els Fri Jun 25, 2004 at 11.52 am

dag Veerle,

Thank you very much for starting this tutorial. It appears to be just what I need. Like Marcel, I am new to designing webpages.

My background is in print design so photoshop and coming up with a design is not the problem. It is the implementation of (x)html & css and putting it all together which gets me in a two steps forward, one step back mode.

The last few weeks I have been plowing through the enormous amount of websites and tutorials available on the web on this subject. I have made some progress, but all I have to show for is a simple page, which would have cost me 10 minutes to put together for print :)

I have learned a lot from reading on your website and following the links you make to others. It is amazing how generous all the very good designers are in sharing their knowledge. It is good to know one can ‘stand on the shoulders of giants’ whilst climbing the steep hill towards a beautiful designed website.

So, hartelijk dank! I am looking forward to the next tutorial. I am especially interested in learning more about container div’s.

(who is dutch but has lived in the usa for the last 15 years)



permalink this comment heath Fri Jun 25, 2004 at 11.54 am

Howdy Veerle,

Looking good. Just to jump ahead are you going to use the pixie roll-over technique or the image replacement technique?

PS You’re a pro, I was looking at your css and it is so clean and squeaky. Nice, nice, nice.



permalink this comment Veerle Sat Jun 26, 2004 at 09.51 am

Hi Els, thanks for the support here! I can tell you one thing, making the move to create webpages using standard css/xhtml is the right thing to do.
I started learning this since January of this year, and see how far I am now :-) Of course I’m designing webpages since 1996 so I got a good background already. Guess I started a bit late learning it this way. Although I’ve learned a lot about 508 accessibility and standards along the way in my website projects for The Library of Congress since I was had follow some guidelines in that matter.

But just to let you know, it will cost some effort and energy, with some frustration along the way, but don’t give up.

BTW it’s fun to hear where you are all coming from. Thanks for sharing this here ;-)

@heath, I’ll use the same technique as the navigation buttons on my blog, no image replacement technique, but “swapping” background images with xhtml text links in a bullet list. Not sure how this is called though.

Thanks for the nice compliment! You have to keep things organized and use comment code for every part or piece of your page this way you’ll find an error very quick when there is one.



permalink this comment Pintu Wed Jul 14, 2004 at 08.56 pm

Very Nice Tutorial , I am Planning to design my website using same techniques on my website

Keep it up.



permalink this comment Ole Thu Jul 15, 2004 at 02.19 am

That’s it. Really nice!



permalink this comment Bryan Thu Jul 15, 2004 at 11.25 am

Good Tutorial.

I am no Photoshop expert or anything, but regarding the glossy images, here is what I would do instead.

Create your bullet later like ususal.

Now, instead of using the pen tool, what I like to do is use the marquee selection tool, but the one where you can kinda freehand draw what you want, often times by clicking once, then clicking at the next step, etc…. until you have connected the two ends. Try and emulate the same path up above.

Now, while you have the crawling ants of the selection, create a new layer on top of the bullets layer.

Now, there are two ways to do the next step. You can either choose a #d6d6d6 - transparent gradient, OR you can simply fill in the selection with white via EDIT > FILL and then choose make sure its #d6d6d6. Because its on its own separate layer, you can alter it however you want without affecting the bullet layer. 

If you use the #d6d6d6-transparent gradient, I would recommend doing it from bottom to top (while holding shift for a perfect verticle line).

This should create a nice fade from #d6d6d6 to the bullet background color.

With either case, you can then go to BLUR > Gaussien BLUR and just fidle with it till it doesn’t look as STRAIGHT edged but more blends a little. You can also lower the opacity of the top layer until it looks how you want.

Thats just another way to do it, but his way is pretty darn good.

Good tutorial.



permalink this comment Bryan Thu Jul 15, 2004 at 11.33 am

HAHA, one more thing.

If you want to get REAL technical. You could create a new channel.

Make that original ANT selection I spoke of, then go to the channels TAB, then go to NEW CHANNEL. You should see a black screen.

Then go to EDIT > FILL > WITH WHITE.

Your selection should fill with white. DESELECT YOUR MARQUEE.

Now, go to BLUR > GAUSSIAN BLUR. Get it to where its rounded out a little or the sharp edges are gone. The idea is to create a smooth curve effect.

Now, it will look at feathery and stuff. Go to IMAGE > ADJUSTMENTS > LEVELS.

Take the two arrows and bring them closer together, usually just drag the right one in a little, and then the left. You will see the blur is starting to leave and its starting to take a smooth effect.

Now, once it looks clean, hit OK.

Now, CONTROL + CLICK on your channel layer so it selects that white curve.

Now go back to your layers tab. Make sure the new layer you had created earlier is highlighted.  Now, you can proceed to add your gradient or fill with your respected color. Using channels is the method I prefer when it comes down to wanting something smooth or rounded.

Just my 2 cents, hope it helps.



permalink this comment adrian Thu Jul 15, 2004 at 08.45 pm

where can i find the PART 2 ??



permalink this comment Veerle Fri Jul 16, 2004 at 12.09 am

@adrian, Part II can be found here



permalink this comment Tazz Fri Jul 23, 2004 at 06.36 pm

This is so sexy, been searching the web on css, been lazy infact been tied up with project, and want to break free from the tables.  Yeah firstly I need to redo my site, before I start the clean practise :)  Great job here :)



permalink this comment Dustin Diaz Thu Aug 5, 2004 at 01.53 pm

I cruised on in here from a sitepoint newsletter looking for css and I got a photoshop tutorial. baa.
I understand though as you said you’ll be covering the rest later.
In the meantime, for this site being about great css tips, the markup is a bit buggy.
You’ve got the whole crazy “hi-light text” bug going on. Meaning, when I go to hi-light a sentence with my mouse on this page, it covers a giant section of the whole page. That means your css is flawed and you should look into fixing it.

Here, take a look, I took a screenshot for ya ;)
I went to hi-light the word “Creating” and look what happened >>

Good Luck :)



permalink this comment Veerle Thu Aug 5, 2004 at 02.49 pm

Dustin, this is a tutorial that starts from scratch. Just open your eyes and click to the next parts if you want to skip. As of this writing I’m at part 4 and part 5 will follow soon.

As for the so called “highlight” bug, I don’t have any problems selecting just 1 word or sentence. See screenshot.

About this “baaa?! ”  thing, if you don’t like my tutorial or blog and have nothing interesting to add here then please keep it to yourself.



permalink this comment Tazz Thu Aug 5, 2004 at 05.34 pm

I love this site,  so go back to where you came from> the ‘unboring TM’



permalink this comment Jeff Thu Aug 5, 2004 at 05.34 pm

Veerle you the man. I have been quite happily putting together content for my site using dreamweaver mx, and yes tables. People keeped telling me to go with CSS, but l could not find anything that takes a step by step approach to showing how to use it.

Thanks for the tutorials dude. Easy to follow, well written, and full of real cool snippets to get you going in the right direction.

This is one huge resource for us newbies. Looking forward to the additional parts. You need a donate button as l’m sure l’m not alone in wanting to help out with the costs of a great resource site.



permalink this comment Tazz Thu Aug 5, 2004 at 05.42 pm

Lol Jeff, Veerle is a girl!



permalink this comment John Potter Sat Aug 7, 2004 at 04.33 am

The highlight bug that Dustin mentions is an Internet Explorer Bug - I bet you’re using a good browser Veerle so you don’t see it.  It affects content in absolutely positioned divs.

If you care about the masses you can fix it with a javascript from Tom Gilder’s site.



permalink this comment Veerle Sat Aug 7, 2004 at 05.34 am

@John, I thought it might indeed be an(other) I.E. bug… I had enough frustration already to make my site look right. So no in fact I do not really care about this minor I.E. issue. But thanks for the info :-)



permalink this comment Dustin Diaz Tue Aug 10, 2004 at 03.05 pm

Dustin again.
I apologize. I should have kept it to myself.
On a more positive note, you should still look into fixing that hi-lite bug. From the looks of the screenshot it seems like you’re using safari? or some other browser.
For the 90% of your visitors who are using IE, that hi-light bug still exists.
It usually ONLY occurs on IE, but doesn’t happen with moz or opera.
Anyway, yea…just cruising over the other comments about the IE bug, and they’re right.
I’d say it’s a bug worth fixing. If you want people to make use of your content, I would definitely find another solution.

Other than that, good tut, I’m sorry about the earlier comment. It’s a good idea to start from scratch :)



permalink this comment Veerle Wed Aug 11, 2004 at 05.07 am

Hi Dustin, apologies accepted of course. I’m just wondering if it is worth to implement a javascript to fix this selecting issue in I.E…. It’s just, I’m promoting FireFox on my site and I promote the use of standard browsers. Sorry, but I suggest downloading FireFox, it’s just a cool browser :-)



permalink this comment Dustin Diaz Wed Aug 11, 2004 at 07.33 pm

I was going to quote you on the “I suggest downloading FireFox, it’s just a cool browser :-)” comment, but I wasn’t able to hi-light it and paste it in this nifty box. lol.
This site layout doesn’t seem too complicated. It “is” using tables straight from the beginning because of that tiny calendar near the top…so having the “tableless website” has gone flying out the door.
It’s for sure the css because I’ve ran into this problem dozens of times and always fine myself making the same little mistake.
I think it’s from when you place absolute properties inside of relative properties, which is then nested in a block element…
I can’t quite place it, but playing around with it for just a little while might fix it.
Good luck :)



permalink this comment Veerle Thu Aug 12, 2004 at 01.05 am

Dustin, I have to correct you on the fact that my site is based on tables, it is not. Remove that little calendar and the layout will still be in tact. This very single table, is actual tabular data so this part is semantic. It’s not that I’m advocating that you may never use tables at all. Just use tables for what they are meant for: tabular data. But don’t use them to layout your page. This is a BIG difference. And BTW in my initial design my calendar was coded by div’s but I had to change it back to tables because I couldn’t get it 100% right (fixed) in Internet Explorer. I just looked at my stats btw and 44,8% of my visitors browse with I.E. I think that isn’t bad at all for the “standard” browsers ;-)

If you think you could fix this bug don’t let me stop you. And I don’t mean fixing it by some javascript, I mean by CSS/XHTML and everything needs to look perfect in all browsers and still validates. If you do I promise to make an article and quote you in it ;-) Otherwise I’m afraid you have to contact Bill or MS, it’s their problem. As you already mentioned “time” IS exactly the issue here for me. I rather spend my time on writing a nice tutorial for my readers then to fix this bug. If people want to copy and paste the CSS they can always just save my example page to their HD, then you have it all, CSS and XHTML, that’s just much easier then copying from the article. Looking forward to your solution or good luck in contacting Bill.



permalink this comment shayshay Thu Aug 12, 2004 at 08.09 am

hi Veerle. I’m a design newbie, havent even gotten to my major design courses yet but decided to get started. I’ve been searching for weeks to find tutorials on CSS layouts and techniques. I came across one CSS layout that i absolutely adore and want to use for my site (Zeldman’s Daily Report, A List Apart and your site are very good examples).

I appreciate the time to explain how you designed this wonderful site in your tutorial. I’m sure it will help me a whole lot in implementing and developing my own first website.

I don’t know if you have a tutorial for it but how do you make the comments section at the bottom of the page and the members login section? Is it some sort of program or is it pure CSS?



permalink this comment Veerle Thu Aug 12, 2004 at 02.00 pm

Hi shayshay, glad my tutorial helps you, it’s always great to hear positive reactions like that, thanks ;-)

About the comments, these are generated by my content management system : called pMachine (Pro). The design of it is of course in CSS. And the icons are designed by myself.



permalink this comment shayshay Fri Aug 13, 2004 at 04.41 pm

Veerle, can u make me one of those buttons, WinZip it and save it as a .jbr file? I have PSP and your tutorial is Photoshop. When i try to do them in my program, they don’t look as good. All i need is one, and i’ll change the colors, text, etc using Fireworks. Thanks a mil if you can do it!



permalink this comment shayshay Fri Aug 13, 2004 at 04.52 pm

hey nevermind! I used Fireworks to edit the photoshop file lol….duh



permalink this comment Dustin Diaz Sat Aug 14, 2004 at 12.30 pm

Cool Veerle :)
I will have a closer look at your styleseets and see what I come up with.
Having 44% of IE users probably means you have a lot of geeks roaming your site, lol. That’s pretty awesome.

Good Luck with the future tuts and writing.



permalink this comment william Sat Aug 14, 2004 at 03.50 pm

Hello Veerle

I came to your site to find more knowledge than what I already have.

For one, you are a great colorist and the European style is very fluent from your perspective.  However, it seems your CSS seems a bit flawed as the formatting is all pushed to the right and not where its suppose to be, in all fairness, I am using IE5, I use this, because for one, I dont like the newer browsers and two, I am sure few others, like myself still stick with something that is not so bloated with transitional flaws and small scripts working in the background and thusly, I design with backwards compatibility as well as for the UNIX based browsers.

Otherwise, I think you rock!



permalink this comment Veerle Sun Aug 15, 2004 at 01.44 am

@William, I know that IE 5 doesn’t work. This browser is more then 3 years old and has too much trouble with CSS and almost nobody still use it. Also your explanation is a bit over the top I think, there are a lot of other browsers out there that almost have no flaws like Firefox, Opera, Mozilla, Omniweb, Safari and for Linux Konqueror…

It’s like saying I am still using a horse because there are too much accidents when using a car! You can also switch platforms if you so hang up on security. By living in the past you don’t solve the future problems. Try on of those browsers and you’ll see a whole new world.



permalink this comment Shaz Mon Aug 16, 2004 at 11.50 am

Veerle!!  Thanks to you and your tutorial, I finally took the plunge into CSS!  I used some ideas from your tutorial to create a beautiful navigation system for a new client.  I was asked to do the graphics and encouraged the developer to use CSS and only two images for the navigation.  We should be showing it to the client this week.

I hope it is ok, but I loved some of the color schemes you presented and we used some with variations.  Also, I loved the squiggle line in the navigation, tried to mimic, but due to an unsteady hand, could not, so I used that, too.  I think the site looks very different from your site, but beautiful, just the same.  ;-)

THANK YOU!!!!!!!!!!!!!!!!!!




permalink this comment slamjams Sat Aug 28, 2004 at 10.07 am

Hi veerle, i’am newbie for the css, but your tutorial help me a lot of my first web site that i design using css. i just have questions if i store the database from mysql (using php) how can i make fixed the content like i used it with table :( thank’s



permalink this comment Sean Mon Aug 30, 2004 at 11.32 pm

I’m a newbie as well to CSS but feel it is a necessary thing to learn.  I’d rather suck it up and learn it now than be years behind later.  Thank you for your tutorial as it has been one of the few items on the web to give a non-over-technical explanation on CSS.



permalink this comment earfight Tue Sep 7, 2004 at 07.22 am

This is an awsome tutorial. But can i get help. Ive tried it but stuffed it up alot of times. Can someone please help me.

If you can help please contact me at toothandnail_101 at hotmail dot com
That is also my msn.



permalink this comment J.E.F. Manansala Sat Sep 11, 2004 at 01.29 am

This tutorial sucks. Die Veerle! LoL

Kidding aside, high praises to you Veerle. I hope to bump in to more of your nice articles.



permalink this comment Veerle Wed Sep 15, 2004 at 05.25 am

@earfight: I you want help you need to make your pages available online so that we can take a look at the code. Otherwise this is undoable.



permalink this comment structure Thu Dec 30, 2004 at 11.16 pm

Hi Veerle,

this is fantastic…may i enquire about the dimensions of your head.jpg?  you show quite nicedly how this is done, but i couldn’t find the dimensions.




permalink this comment Veerle Fri Dec 31, 2004 at 03.19 am

Hi Structure (guess that’s your name?) the dimensions of the header is defined in the header 1 CSS style: width is 692px height is 90px and the image is placed as a background so you won’t find the code of this image in the HTML source code. Read the other chapters and you’ll find out more about this ;-)



permalink this comment Structure Fri Dec 31, 2004 at 09.55 am

got it Veerle…however, i need another clarification.  In photoshop when you make your image ready for the artistic modification, does that also have to be 692 x 90 pix?  or can it be any size?  i am trying to figure what kind of file should be saved in photoshop as a head.jpg.




permalink this comment Tracey Marie Tue Feb 8, 2005 at 02.29 am

Really good work. I found a lot of profound information which can help me to go on. Thanks for all this input.



permalink this comment defrag Tue Apr 19, 2005 at 08.23 am

I posted this message elsewhere and then found this to be the more appropriate thread for it. Sorry for the duplication.

What are your thoughts as to why complete css layouts is not used by the majority of popular websites such as amazon, ebay, etc. HTML tables are still being used with ext css at these types of sites. Is it not a web programming technology that is still not widely used and accepted by most high traffic websites? I’ve found that most websites using complete css layouts are just designers. No? The reason I’m asking is I want to be sure I am advising my clients correctly and not simply creating a site for them based on my own design interests.

Also, I checked the source code of your website and it is using HTML tables with those ugly font and color tags in addition to an ext css file. I’m confused. :/



permalink this comment Veerle Tue Apr 19, 2005 at 12.08 pm

@defrag, first of all please ignore our business website until at least May 1st, it is SOoo overdue, I think it’s designed in 1999, so no wonder :-S .... It should set an example I know, but I have been working on a new design for more then 2 years now. I just didn’t get the chance to finish it properly because of time limits and also because every time I looked at it I didn’t like what I made and started all over again. Designing for yourself is always difficult it’s never ‘good’ enough and you always take the project for your clients first. After my sixth design or so, I finally got what I like (including a new logo and housestyle) and yes, it will be in XHTML/CSS, of course. Launch date is May 1st ;-) Also, I don’t design websites in any other way from now on. It has just too many advantages that I don’t have to think twice about this.

About the popular sites still using HTML 4.01, well maybe this article might shed some light. It is a matter of choice you need to make. Do you still want to support the (outdated) Netscape 4.71 and Internet Explorer 4? Or is it really time to say goodbye now and embrace the advantages of XHTML/CSS. Reading this article might help give you your answer.



permalink this comment Jackknief Wed Aug 17, 2005 at 02.55 pm

Great tut’s as always. Enjoyable too.





permalink this comment Dave Jeffery Thu Sep 8, 2005 at 01.57 pm

...or should I have said “got dugg”?



permalink this comment travis Thu Sep 8, 2005 at 06.07 pm

wtf? I came expecting a nice tutorial on CSS/XHTML and was greeted with an article on BS image making. That’s great that you can use Photoshop, but it has absolutely nothing to do with CSS.

Then I re-read the title and realized you meant design (as in graphic design) not design (as in xhtml structural design). D’oh! ;-)



permalink this comment travis Thu Sep 8, 2005 at 06.28 pm

I should mention to others like me that you may want to skip straight to step 4, for the beef:



permalink this comment Scottie Wed Nov 16, 2005 at 01.54 pm

Great little tutorial.
Just surfing around and found your stuff, looks sharp.
Enjoyed the read.



permalink this comment Juan Sun Mar 5, 2006 at 11.36 pm

The link to the continuation of the article is broken. I would love to read the entire article.

Thank you



permalink this comment Veerle Mon Mar 6, 2006 at 12.57 pm

@Juan: The linking was broken due to my switch to Expression Engine from pMachine Pro. But you’ll be glad to know that all links are now fixed ;)



permalink this comment snozle Tue Mar 28, 2006 at 03.25 pm

For people just looking at this tutorial now as I am and who are using the new version of adobe photoshop CS2 the “new layer set from linked” is now “new group from linked”



permalink this comment Miroslaw Sun May 28, 2006 at 11.47 am

Big thx for this tutorial, now i stared learning CSS :)

Commenting is not available in this weblog entry.


buy something from my Amazon wishlist