PDA

View Full Version : Layout and Rulers!


africano
09-05-2008, 03:11 PM
Hi, hopefully I can explain myself. Im working on a design where I want my page to be 900 width but I want the footer to extend the whole screen size, like this:http://www.fmnmedia.co.uk/.

How do I setup up a document in photoshop for this? Want to get it right so I get my stuff in the right part and with the correct measurements!

Corrosive
09-05-2008, 04:32 PM
Hi, hopefully I can explain myself. Im working on a design where I want my page to be 900 width but I want the footer to extend the whole screen size, like this:http://www.fmnmedia.co.uk/.

How do I setup up a document in photoshop for this? Want to get it right so I get my stuff in the right part and with the correct measurements!

Hi mate

Design your main content however you want it (900px wide) and then put this in a wrapper to centralise it as you would normally (auto margins). Put your footer outside of your wrapper and make it 100% width so that it stretches right across the screen in any browser/resolution/screen etc. You can achieve an effect like the one you posted by just using background colours in the div but if you want a graphic footer then slice a thin version of your gradient or whatever and repeat X.

africano
09-07-2008, 05:28 PM
Im thinking of a new design for my site. Thinking simple....and have this so far in Photoshop...Any advice? What could I add to make it better??Am I on the right track??

Here is a first jpeg.

http://www.elchevirtual.com/designv01.jpg

Ive seen a lot of css sites and In my opinion the best ones are quite simple, bright and fun....want to go for something like that....Another thing, how can I achive the Glass or Glossy look alot of them have??

Rob_Che
09-07-2008, 10:55 PM
...and have this so far in Photoshop...Any advice? What could I add to make it better??Am I on the right track??

Yes, I think you are on the right track. It need pulling together though...
It's really arty-farty but you need to think through the whole thing (I can't bring myself to say conceptualize)

The sections have no relationship with each other at the moment...

For example, bringing the menu to meet the header... re-using elements so users feel familiar as they browse...

See attached... Not trying to patronise, just trying to throw a few things around.

Ive seen a lot of css sites and In my opinion the best ones are quite simple, bright and fun....

Don't mistake SIMPLE for EASY :wink:

Another thing, how can I achive the Glass or Glossy look alot of them have??

It's not difficult.
Have a google - if you don't find anything, come back and I'll post something for you.

Rob

africano
09-08-2008, 12:11 PM
Makes a real differrence Rob! Small details but you are 100 percent right, it sorta ties everything together.Thanks for the ideas and not patronising at all! Its what I wanted some feedback/suggestions on how to improve!

Thanks. For the glossy glass shine effect Ive found some tutorials which consist on making a new layer say above the header. this is brighter than the bottm layer, it sort of halves the header in two, one brighter half and one lower half(makes sense?) using the gradient tool i think... Im not too happy with this solution...

Rob_Che
09-08-2008, 01:02 PM
Keep playing with it - there's loads of different ways.

Check some more tutorials and pick the best bits of each :)

Corrosive
09-08-2008, 04:12 PM
Makes a real differrence Rob! Small details but you are 100 percent right, it sorta ties everything together.Thanks for the ideas and not patronising at all! Its what I wanted some feedback/suggestions on how to improve!

Thanks. For the glossy glass shine effect Ive found some tutorials which consist on making a new layer say above the header. this is brighter than the bottm layer, it sort of halves the header in two, one brighter half and one lower half(makes sense?) using the gradient tool i think... Im not too happy with this solution...

Google 'Web 2.0' tutorials. This is the look you are after and there are thousands.

africano
09-08-2008, 04:45 PM
Cheers corrosive, Web 2.0 in google gives out a LOT of usefull things to play with:lol:.

Ive tried these http://www.associatedcontent.com/article/37419/glass_reflection_website_blog_headers.html?cat=59

But I dont seem to get the right look...

Will keep at it with the tutorials, if I dont get anywhere Ill be back on here tomorow for some advice! (Rob...hehe)

C ya.

Rob_Che
09-08-2008, 09:30 PM
This is pretty long winded but it's pretty much what I do...
http://www.tutorialized.com/view/tutorial/Aqua-Style-Button-with-Photoshop/7455

Here's the button:
http://www.webdesign.org/img_articles/35/final.jpg

Rob_Che
09-08-2008, 09:31 PM
Can't see why you'd want it translucent for web work though...

africano
09-09-2008, 04:03 PM
Cheers for the tutorial(Not sure about using it, wanted to try and achieve the shiny style headers people seem to use a lot...will explore)

Following robs suggestions Ive done this so far:
http://www.elchevirtual.com/designv02.jpg

Now with this design I can see Id have a HEADER....a FOOTER but then Im unsure about the rest. Id have a Navigation Bar....But what about the tags in the righ side colum, Would I need a div for that? and A MAIN DIV for the content?

Another thing is can someone give me advice on How I would Slice this in Photoshop? There seems to be Items in different regions(The navbar overlaps into the header,etc)

Rob_Che
09-09-2008, 06:53 PM
Another thing is can someone give me advice on How I would Slice this in Photoshop? There seems to be Items in different regions(The navbar overlaps into the header,etc)

AHA! That's the fun part... it 'appears' to overlap...
It actually doesn't. (or doesn't need to)

Look here: http://blog.wireroses.co.uk
Look at the footer and header... they appear to overlap into the content but it actually doesn't - there's just some of the content background IN the header/footer... does that make sense ?

Rob

Rob_Che
09-09-2008, 06:54 PM
I think the design looks much better now.
Not sure if the long blue flowers add anything though . . .

africano
09-12-2008, 01:37 PM
Here is what I have so far. I think it looks good(but what do I know?:grin:)

Although I think that the left side needs some elements, it looks a bit bare to me(the elft side) The header might need some gradient to fill instead of just the green... The two boxes will have images instead of text.

For the left handside(which I think looks blank) Im thinking about some Polaroid elements containing images or text(maybe they can serve as links to ther parts of the site.)

Although Im happy with it so far and I think its better than my first design....Im not too sure about my css code.....I reckon its going to give me problems someway along the road...because I dont think the code has some BIG errors in it, but anyways!

Let me know what you think, what needs changing etc. Again, Im going for an artistic, clean, portfolio type design!

Link: http://www.elchevirtual.com/Personaltrainer/
Cheers,
Africano!