[BrentisHere]

Hey Fella's,

I designed this really simple and clean website in photoshop and I applied a Colour Correction over it, now, I want to make sure this looks the same on the web as it does in photoshop

My problem
Everytime I try to slice it up and than re-assemble with css and some html it turns out terrible everything is everywhere and the colour correction just doesn't turn out correctly

My question
How can I keep this colour correction on it so it's clean design is kept...

My design

[modi123_1]

Did you flatten the image before slicing it? You know - have one layer?

[BrentisHere]

modi123_1, on 30 November 2012 - 07:32 PM, said:

Did you flatten the image before slicing it? You know - have one layer?

Errm, nope? is that what I should have done, cause consider it done

[modi123_1]

Typically yeah... I tend to have my layers... hide certain ones.. flatten it.. cut the pieces I need.. undo the flattening.. hide other layers, flatten, cut.. etc... until I have all my pieces and the global look stays the same.

[BrentisHere]

So, what can I do to make this work on my website...It's still in the very early design stages...as you can see...but i'm really confused on how to achieve the best looking result

[modi123_1]

well the gray clear smudges on the text looks bad.. as does all the gray on gray.. throw some texture in there!

[BrentisHere]

, as I said, early design stages, going for clean, but, alright, I'll have a geeze.

But, can you possibly try and tutorialise (i suppose) a way in making this whole thing work online...

[modi123_1]

Man.. I am in the middle of some drawing and about to head to the gym.. so no? The best I can do is have you start flipping through some css and html tutorials we have here and learn how to position elements on a page. What the slicer does is gives you bits and pieces of your image you need to code up to fit together. It's like mocking up a car for fit, dissembling it for paint, and the reassembling it.

[modi123_1]

Example tutorials:

http://psd.tutsplus....-design-layout/
http://net.tutsplus....s-step-by-step/
http://psd.tutsplus....with-photoshop/