Looking for the name of this kind of design and a some tutorial for it

hi just as the title says it.. im loooking for the "name" of the kind of design ( looks like a mac-like) and some tutorials or help on how to make a web design that looks a bit like these website: http://www.taimila.com

i wud like to make a website inspired from this design.. but i have no clue on how to get so nice colors.. metallic effect... rounded box..fades... shadows... mouse-over menus... and stuffs like that

can anyone help with this?

i do not want to bump my thread.. but i need help for this really.. because i have to design a website for my company at school before the end of my holidays vacations and i really really need help cuz i just cant make the colors looks the same as in the websites..

can anyone just help my with that?

#435255

hope this help http://www.webdesignfromscratch.com/current-style.cfm

#435271

hey I dunno man, just get friendly with photoshop, center a table in the middle, set your margins to zero, and go to town.

When I design a webpage, I always start with a table. Grab a tablet, and map out your cells. Use Fireworks for your imagemaps, if you use them.

Get a single pixel transparent spacer image. Those come in handy. A lot.

Also, slicing rules. Learn how to do that in Photoshop.

That's all the suggestions I have.

#435273

wow i guess ill have a lot to learn in less than 2 weeks.. geezus

dont know what a table, tablet, imagemaps, single pixel transparent spacer image, slicing rules are.. im gonna look at these on google... doubt i will understand anything but anyway.. thanks

#435510

Dude, I don't wanna be harsh, but you can't get a professional look without professional knowledge. It just doesn't happen. Spend some time, learn some HTML, boot up FrontPage, go crazy.

and that last line was saying simply that slicing images is way cool. Basically, in photoshop or ImageReady, you just draw a rectangle around the part you want to slice, and bam, you have like 5 different images that when put next to each other without a space, form the original image. The only thing different is that you can substitute out one of those pieces with a rollover, or have that slice link somewhere. Imagemaps are better for the latter.

Basically imagemaps are these (horrible example, but gets the point across):

http://www.kasparius.com/nonflash/tutorial/tut1.htm

where you click on part of an image and it links you somewhere.

Spacer images are great for random things like indenting a paragraph, putting a space between two objects, and other good fun stuff. anywhere you need extra room or more space, slap a spacer in there.

When I was talking about tablets, I mean those legal pads or something to plan out your page. You typically don't just fire up Dreamweaver or FrontPage and design your page from there. One usually designs it on paper, then tries their best to emulate it on the screen.

#435534

thanks mate.. now i understand some few things more.. now i get these image maps things.. not sure if i understand correctly slices but ima try this on photoshop.. and lol! tablet! i thought it was some feature in photoshop .. hahah it was just the "tablet" the object.. man im going crazy now.. mehh..

and btw.. thanks alang for the website its great

#435556

http://www1.pacific.edu/~aevins/index2.html

I've used imagemaps, a transparent image, a layer, and a good demonstration of why slicing is awesome. (this is my web space, btw)

You see how long that .png part takes to load? Forever, right?

But...I still want that per-pixel shadow!

So, what I should do is take a huge slice out of the middle, save the middle slice as a .jpg, which is way smaller than png, then save the little strips left over as png, to preserve the perpixel transparency. jpgs are always opaque, so if possible, you should slice out any large parts that are opaque and save them as a high quality jpeg file, your load times will be much faster.

View the source for that page, the code is quite concise.

#435619

Please don't tell him to learn how to code using tables...it's certainly the bad and outdated way of web designing. Daevild, I suggest you to learn proper structural markup: divs, paragraphs, lists + CSS styling. This way coding is much easier and the outcome is nicer, more flexible and compliant with web standards ( = platform-independent).

It's a long way but if you want to achieve the best effect, you should do it properly.

#435630

Thanks guys for your help, I think I'm into it now. Can't believe I'm such a noob here lol but I learned many things. Thanks a lot. I will start by drawing everything first and then go with the coding which seems more difficult :

#435737

Please don't tell him to learn how to code using tables...it's certainly the bad and outdated way of web designing. Daevild, I suggest you to learn proper structural markup: divs, paragraphs, lists + CSS styling. This way coding is much easier and the outcome is nicer, more flexible and compliant with web standards ( = platform-independent).

It's a long way but if you want to achieve the best effect, you should do it properly.

Nonsense. Excessive div use is semantically meaningless. Tables all the way.

-NC

P.S: . I kid, of course! Web coders have been moving away from tables in the past few years, and it really is now all done with the techniques Pe8er pointed out.

#435803

lol.. im goint to try using CSS and div's

But, if i make slices and imagemaps in photoshop/imageready, can they be used in CSS since we dont use tables anymore?

#435824