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

Jul 02

Designing a CSS based template - part II

2004 at 09.08 am posted by Veerle Pieters

Today I will bring you the next step of our tutorial about designing a CSS based template page. This part is about choosing the right color scheme and creating a nice background pattern for our webpage. Here is part 1 for those who missed it and want to catch up.

As you all know, my initial idea was to give you a small tutorial on how to create glassy buttons in an easy way. That’s why it might look a bit odd to you that we will think about color-schemes in the 2nd part of our tutorial. This should actually be our first step, then the creation of the buttons, the background etc.

Choose your color-scheme

Anyhow you might have a head start on today's subject. To choose the right colors for your weblog is a matter of personal choice, it reflects who you are, what you like etc.

Detail screenshots

Actually explaining to you what you should choose is probably impossible although there are a few tips that I always try to follow:

  • use at least 1 contrasting or highlighted color and use that to give accents to your page. Use that color for your text links, this way they will be very visible.
  • make sure you use not too many different colors, otherwise you'll end up with an unattractive chaotic layout. I mostly take 3 colors, 2 subtle ones and 1 to highlight.
  • from these 2 subtile colors I use darker and lighter variations, I'll stick within the same range of those 2 colors. If you use less then 3 it might end up in a rather boring look, although if you use enough variations you can get interesting results too. This could work if you're looking for minimalism.

Different color-schemes

Use the Hue/Saturation (control+u for Win / command+u for Mac) to play arround and see variations of your colors. Actually all those examples above are created this way, starting from the first example and using this technique to achieve the other 3. To come up with my first matching colors I used my own post as a guideline. In this post you'll find several color wheels.

RECOMMENDED! If you still haven't a clue which direction you should start looking, then maybe this movie might help you out. Actually this is really worthwhile watching for everyone it's awesomely inspirational. (link seen on Angie McKaig's Assorted Sweets).

Time to draw some patterns

It's pixel drawing time now! Start with a document of 30x30 pixels, RGB, background color of your choice. Draw some pixel dots using the Pencil tool in Photoshop. Here are some examples that might get you started:

Different patternsMost of the time you'll spend in creating these, is by experimenting in various ways. Personally I don't know of any tricks on how to come up with ideas. What I mostly do is start with a background, choose a color that is very close to the background and start drawing dots. If I create a background with lines, I duplicate that layer, move it a bit up, down, left or right... and start playing with the layer mode, opacity etc.

Enlarged version

These enlarged versions are the actual patterns, cropped at the right place to achieve a seamless repetition. The hard part is sometimes figuring out the right place to crop. The way I do it is using the rectangle Selection tool, and draw a square (hold down the shift key to get a square selection) from the top left corner to the bottom right corner of the pattern. To define these 2 corners you have to think about the top left starting point of the pattern and go down in a diagonal way and stop right before the exact same pixel as your starting point. Keep in mind that for patterns where you use lines on 45° (like the blue pattern in my example) or my blogs pattern that you have to watch all corners to get a perfect match.

How to crop your pattern

Once you have your square where you think it should be go to the Image menu and choose Crop. Select your pattern and choose Define Pattern... from the Edit menu and give your pattern a name. Now you need to test your pattern. Create a new document of 300x300 pixels, Select All (control+a for Win / command+a for Mac), choose Fill... from the Edit menu and select Pattern from the dropdown menu and select your pattern from the 2nd dropdown, click OK and check the result.

The next part will be about the actual framework and layout. The focus then will be about how to create an attractive header and title, including title ornaments. Hope you enjoyed this part and if you have any insights on the creation of backgrounds, please do share thanks ;-)

Download the pattern examples in Photoshop format.

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.


16served

gravatar

1

permalink this comment Raff Fri Jul 2, 2004 at 12.27 pm

I can never get enough tutorials with CSS and Design. I’ve gotten decent with CSS over a year, but I am not really a designer, so common things like color composition elude me. That said, I grabbed one of the color schemes in the tutorial and I think it improved the look of my site substantially. Thanks for the info!


gravatar

2

permalink this comment AkaXakA Sat Jul 3, 2004 at 11.51 am

Very good tutorial! It’s really nice to find some actual design tutorials that don’t just stop at dicussing ways to implement it technically. It’s really well written too. I can’t wait for part III !


gravatar

3

permalink this comment els Wed Jul 7, 2004 at 03.54 pm

thank you, Veerle. You’re an excellent teacher! It is all very clear. I like it that you have lots of graphics to go with your text.

I now have a folder with ‘Veerle’s tutorial’ on my desktop. Looking forward to the next one.

els


gravatar

4

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

Very Cool Post. I m loving it.


gravatar

5

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

Everything about this page is perfect except for one thing.

THE CLICK HERE LINK in the first paragraph at the top :)

I was like, NOOOOOOOOOOOOOOOOOOOOOOOOOOOO.

Good tutorial


gravatar

6

permalink this comment adrian Fri Jul 16, 2004 at 05.56 am

ermm.. what about rest of the parts.. how many parts are there.. and how can i get to it.. eg. part 3,4,5,6, ???


gravatar

7

permalink this comment adrian Fri Jul 16, 2004 at 05.58 am

ok i got part 3 at the main page


gravatar

8

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

@Bryan, what the hell is wrong with “click here”  ??!

@adrian, I only have 1,2 and 3 so far. The rest is yet to come. Be a bit patient please, I am a VERY busy girl :-) I can only do my best.


gravatar

9

permalink this comment Bryan Fri Jul 16, 2004 at 07.13 am

Hey Veerle, don’t get upset. I was trying to be funny with my post, I guess I should have included some <laugh> or <sarcasm> tags :)

But to answer your question about using “Click Here”, it comes down to usability.  There is a book called “Don’t Make me Think” and apparently, most web users know when they see a link, they are suppose to click it.  I guess using it occasionally for whatever purposes is fine, just like you did at the top, but I have worked with clients where every single page for links is , “Click here!, Click here, Click here for more stuff, etc…  It also plays into the SEO game, by having keywords in your links, it helps. But I wasn’t knocking you, and I think you felt I was.

Anyways, the click here is just a usability issue from what I understand, but I am also not an expert.


gravatar

10

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

@Bryan, Oh I wasn’t upset at all, hehe, maybe my English is a bit too direct (the ‘what the hell..’ wasn’t meant very seriously) and I know you were halve kidding… but still I wondered what was wrong with it, since   I needed to place this link somewhere VERY clear since people keep asking me where is part 1 where is part 2 etc. But I’ll keep the advice in mind ;-) I’m just writing as it comes along, time is not always on my side, and English is not my main language, Dutch is btw ;-)


gravatar

11

permalink this comment Bryan Fri Jul 16, 2004 at 07.37 am

ahhhhhhhh, got ya. Like I said, its not something you see on alot of blogging sites. Its more on corporate type of sites that haven’t had a good designer/developer work with them on some of the usability characteristics. 

Besides, I have only seen it once so I won’t report you to the clickhereNO Law enforcement agency :) j/k.

Like I said though, sometimes its appropriate to use it and since your explanation about people not finding parts 1 and 3, I agree with you that you want it to stand out.  Good articles btw.


gravatar

12

permalink this comment Lach Tue Jul 27, 2004 at 04.10 am

Veerle, apart form anything else a significant portion of wbe users, (e.g. blind people, or those naviagting using the keyboard), do not ‘click here’ at all. Generally I think ti sounds more professional and natural to use real action words instead of ‘click here’.

For example you could use “Looking for more? Check out <link>part 1</link>.”


gravatar

13

permalink this comment andy Mon Aug 2, 2004 at 04.18 am

one thing i find usful in creating bg is the offset filter. work on the centre of your image then use the offset filter and enter the DoI (dimensions of your image)/2 (divided by 2). what was the edge is now the centre and the centre is now the edge. when you are happy do the off set filter with DoI/4 to see the other edges fill in a bit more and shazam seemless bg pattern (with a bit of practice anyway :)


gravatar

14

permalink this comment Charles Oloo Wed Mar 23, 2005 at 12.19 am

Just starting to learn css


gravatar

15

permalink this comment Erick Schluter Fri Jul 1, 2005 at 05.57 pm

Mmhh…
I am amazed by all clearness on this website !

Nifty!


gravatar

16

permalink this comment Gábor Székely Sun Oct 9, 2005 at 02.10 am

Hello Veerle, really nice pages and tutorial!
I just found one site with patterns from various people, so if anyone wants to have some of them, could check out
http://k10k.net/frames.aspx?section=patterns
(I’ve choosen the Random Patterns link to have a glance at some of them.)

there are some nice ones here too
http://squidfingers.com/patterns/?type=patterns&id=104



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist