What is the best and i mean best and easiest way to size elements up in your photoshop mockups as far as images and text areas, inner columns etc. so that you know the dimensions including padding and margin so it all flows when you code it? Every time i design something in photoshop it seems way to big and everything seems to take up the full 960 without me wanting it to like header and content images. Any help would be appreciated.
Sent from my DROID BIONIC
You just got to eyeball it. Set the zoom level to 100% and then make it look right. Keep in mind that just b/c a block is a certain width/height, doesn’t mean that it will necessarily be totally filled.
~TehYoyo
WHAT?!?
Adobe PS gives your rulers and guides!!! Make sure they are set to pixels (in preferences-> units). Remember that the web is fluid so you can only count on fixing dimension in one direction… when you are designing assume that content can grow vertically, at least.
Or just right click the ruler bar.
~TehYoyo
I dont think im explaining it right. Give me a bit to clearly state what im trying to figure out because i have a lot of trouble with it.
Sent from my DROID BIONIC
What is the best way to measure and calculate all the elements that build ur mockup so it matches the final design once its coded? I hope that makes more sense.
Sent from my DROID BIONIC
No input??
Sent from my DROID BIONIC
Sorry that no one’s answered your question.
I’ll do my best to answer.
I think that dresden_phoenix hit it on the head. Use your rulers and guides in Photoshop. If you don’t have Photoshop, most graphics editors have some sort of guide system. That way, you can make sure that your second piece of content is exactly (for example) 30% of the entire wrapper, your navigation bar stretches 24%, etc.
If you are wondering the basic theory of how big things should be and therefore how much space they should take up, I recommend that you read Jason Beaird’s Principles of Beautiful Web Design book. That book is a fantastic resource that explains basic web design. He goes in depth about how size affects user perception, etc. Check it out at your local library or buy it from SitePoint.
If you’re wondering how to make sure the stuff on your webpage is how big it is in your mockup, just define it how it is in Photoshop. Always make a mockup with what type of layout you’re going to use in mind. For instance, if you’re going with a fluid layout, then change your Photoshop ruler to percentages or calculate them out into pixels and go from there. That way, you won’t have a 250px (theoretical, of course) navbar that ends up being a messy 27.84% of your wrapper.
Hope I helped. Questions? Post here or pm me. Good luck!
~TehYoyo
Use the ruler tool in Photoshop. Measure each section you believe you will need to code and write it down. Then each section should be created in code by percentages. Write these percentages down to make it easier for yourself.
As an example.
Let’s say your site is 960px wide and you want it too look similar in the browser. You will want a container to hold your content in the middle of the screen. Make your container 960px wide(this should be done using ems but for the example we’ll jsut use pixels). Then you’ll want to base all your widths off the parent element. So… You header stretches all the way across, so it’s width should be 100% (because the parent element is the container). Next, you want some part of your site to be 700px wide normally. So what you need to do is work out what percentage is 700px of 960px… So we divide 700/960 and then * 100 to get the percentage. So your 700px wide column will be 72.9166667%. And continue this way for each element.
That’s basically it, but to get a better grasp on the matter, check out this article. It’s well worth a read.
And let us know if you have any further questions.
What about trying to figure the margins and padding between elements? Sorry if these questions seem like petty things but ive been out of the game for so long i have no clue. Back in the day i used tables and iframes lol.
Sent from my DROID BIONIC
That’s kind of just an eyeball thing. Margins should be planned out in the layout, but paddings I usually just give 3 or 4 pixels and eyeball it till it’s aesthetically pleasing. Unless your padding is essential, don’t worry about it too much (imo).
~TehYoyo
You can figure out margins and padding the exact same way. What size are they in Photoshop? (use the measurement tool).
Back to my example in my previous post. Let’s say you have a content size of 700 in your container, but you want a 10px margin or a 10px padding. 10px off either side means…
700 - 10 -10 = 680px. 680/960*100 = width: 70.8333333%
so to work out your margins…
10/960*100 = 1.04%
Does that make sense?
Just remember that the percentages always refer to the direct parent element.
So Now you have a 680px element but you want the text to take up 500px of that space. So…
500/680*100 = 73.5294118%
Thats the thing, i dont get/understand how to plan it in the layout. I never had to worry so much about sizing and proportion and pixels when i did web sites long before there was any talk of css. I sketch my stuff out before i start designing and know what i want it to look like but i cant sit there and say " well, this side bar is gonna be x amount of pixels and the content is gonna be this many pixels with this much padding and margin".
Sent from my DROID BIONIC
And also experience.
~TehYoyo
It is a hard thing to grasp when starting out, it gets easier, but is an everlasting thing. You need to just decide on those widths.
For example, let’s say before you get into Photoshop or coding, sketch it out like you said. be rough but not too rough, have some sort of definition to your layout (this should all be based around the content that you’ve been given or have on hand).
Now, like TehYoyo said, this is where experience is handy. I know how big I want my layout to be, and I know (roughly, but well enough) how big 960px, 700px etc is on screen. This will become natural in your mind’s eye over time. But for you, it may be difficult. So, if that is the case, head into Photoshop and just make plain content boxes that match your rough sketch. Once you’re happy they are similar(your sketch and onscreen layout) - now grab your measure tool, take measurements (in pixels) and write them down on your paper sketch. Now you can use the formula I provided earlier to work out your dimensions! 