Oct 17
Website header background
2005 at 06.08 am posted by Veerle
This tutorial was prepared and finished some time ago, but since I am so busy lately, it seems like the perfect moment to release it on my blog.
Inspiration can be found in simple things, like color for instance. This tutorial is about creating a simple header for a website, but it might as well be used for a brochure. Starting from a picture with colors you like, here is an easy technique to achieve some trendy effects:
Enjoy!
UPDATE: the comment function is now restored. They were down for a while due to a MySQL table crash. The first one in 1,5 year, so all in all not bad.
Want to learn more?
Layers magazine is the only magazine that covers the entire Adobe® Creative Suite and everything it has to offer. In addition to in-depth tutorials, each issue is packed with tips, Q&A, product reviews, industry news, and feature articles covering the gamut of digital photography, graphic design, Web authoring, motion graphics, and more.
13served
1
Again, a nice tutorial, Veerle.
Your CSS and design tutorials are what’s dragging me back to your blog, time after time.
2
So simple yet so effective.
ps just want to mention the following: the provider I work with also had a major crash last night, in fact his web server went completely down, both disks (raid configuration) were damaged. Also his mysql databases are wiped out ! Coincidence ? I’m just not sure. Maybe it’s National Windows Crash Day or something ?
3
You have the right wording for thse tutorials Veerle.
Funny ... I use (almost) the same technique but usually I finish it with “a motion blur” ... which adds a sort of “StopDesign” flavor.
4
Veerle thanks for posting this - I need to start collecting together items like this for inspiration. My only problem with you doing something like this so nicely is that everyone’s gonna copy it - lots of cherry-flavoured sites are on their way now! ;-)
5
Veerle, I just want to say your website is one of the best and most informative i’ve ever seen. I’m teaching myself web design and have been doing it on a very limited capacity for a couple of years now and I go to this website almost daily to see what’s new. Thank you so much for your tutorials and all the info you provide here. It is so greatly appreciated.
Peace
6
Veerle, once again, you make something that comes so hard to me look so easy. Can’t thank you enough for all your tips and insight. Much appreciated.
7
@Raven, Kenneth is my provider, it’s on Unix, please don’t make him mad ;-)
@Ian, you can of course use oranges or apples too if you like. I’m having a hard time creating ugly stuff, it’s just not in my nature, just can’t help myself :-)
Nice to hear people appreciate my efforts ;-)
8
@Veerle
It would be quite interesting to try out a ‘durian fruit’ - if anyone complained that the site stinks, you’d have the perfect excuse! (In case you’ve not heard of durian fruit, they smell foul, fould, foul! In many Asian cities they are banned from public transport, public buildings, hotels etc)
9
Nice and interesting effects created with your header design. I guess it is a way of abstracting the images, then extracting the colors and reorganize them to tie it all together. What is neat is the contrast between the vertical bars and the horizontal round shape of the fruit, and the stretched out part. I tried it on one of my photos, and used the Smart Blur.
Thanks for the tutorial - it is true - you seem to have a wealth of creativity and imaginative ideas!
10
Hi Veerle,
Just wanted to say THANKS for all you do for the web community. I am sure I am not alone when I say that I really appreciate the time and effort you put into offering tips and tutorials for people to learn from. I am grateful for your effort!
Krista Stevens
11
Thank you very much for this little tutorial. Once my server gets back online I’ll try and see what I can whip-up.
12
Top class stuff, Veerle! Ridiculously simple but totally effective. Nice! Thumbs up!
13
Very nice tutorial, though, at the aesthetic side, I wouldn’t add other colors than blue and that redish (or whatever you call it :))