Hi people, first of all im glad I found this great site and what seems like such a great forum and place to learn. Okay so the reason I am posting is because I would like to ask some question. I use to code html a long time ago, mainly for a hobby and have used photoshop for a long time mainly for a hobby also. I have been really inspired by the new adobe cs3 collection and by the xhtml/css web 2.0 design trends. I am now beginning to get interested in desigining websites again ! I have been using the fixed template layouts to start to try and roll my PSD mockups into realy xhtml css websites, however I am ending up with websites that look flat when compared to sites like http://rosevillehwc.com/http://www.kinoz.com/ . With these sites, graphics seem to be extended beyond the simple layout and overlap outside of what appears to be the main frame of the website. Can someone explain how this technique is achieved ? and whether there are any advanced video tutorials on the internet that show how these sites are made ? I find it fascinating ! Many thanks , Ryan
Screw the advanced video tutorials. ;) Learn everything the old fashioned way by installing Firebug to your Firefox browser.
Have you heard of CSS Zen Garden (Wiki)? If not, head on over there and learn how the talented designers did it by using your Firebug tool. Or looking through the CSS and markup files to help you understand the layouts better.
It seems that you can count yourself to the few people out there, who can handle ps. ;) Or, let's better say, who can call them a designer. I can't. I'm a poor programmer, who, if it comes to design, can only generate stick men. There is no simple answer to your question. The only advice, I can give you, is first to design your web pages independently from asking yourself how to code them later until you have enough coding experiences. Then you can involve coding questions into your design phase. Plus one tip: Creating sites, that exceed the boxy and rectangular look of html in its pure form, has much to do with tricky arrangement of elements and tricky use of background-images. Further: practice, practice, practice. Feel free to post a design of yours. A small one, but one, that doesn't seem to fit in rectangular layouts. I'll see what I can do.
many of the effects you mention are achieved by using a combination of 24bit PNG transparent images - which can be layered over a complex background (not just one color like an 8 bit png or .gif) also something else that really lets you break out of the box is absolute positioning of elements in conjunction with relative positioning. I'd suggest learning positioning inside and out if you want make some cool layouts.
We collected some links that helped us over the years here:
I'm a graphic designer by profession and am a devout Photoshopper as well. I've used it to design most of the art and graphics on my own sites. I looked at the roseville site, and I think you could do it easily just by using flat art. Like Brent said, I would just create it then "save for web" as a gif or PNG. I also agree with the absolute positioning for images.