From .psd to working HTML and CSS

Question

I am not much of a designer. My strength lies in coding. That said, I'm often forced into the role of "The Man," responsible for all aspects of site creation. So, that said I'm wondering if the pros can give me tips/solutions/links to tutorials to my main questions.

1. Resolution. What should I aim for? What are the lower and upper edges I should be aware of? I know that systems like 960 Grid were popular recently. Is that the number I should still aim for?

2. Slicing up a .psd - are there any tricks I should know? I've always found it difficult to get my slices pixel perfect. I'm also really slow at it. I must be looking at it wrong, or missing something fundamental. The same goes for text. Layouts are always filled with the classic "Lorem...", but I can never seem to get real content to fit quite as well on the screen.

3. The advanced (to me, anyway) looking things, like a part of a logo/image overlaying what looks like a content area. How does one do that?

4. How do layouts change/are informed by the decision to go fixed or liquid?

Again, any tips/tricks/suggestions/tutorials you can share would be greatly appreciated.

Answer 1

1. What is the standard width for a website in pixels?

2. My experience with slicing a template in Photoshop has always been tedious and slow. What version of Photoshop are you using?

Generally, I choose to not use slices and simply use the marquee tool (Rectangle, etc.) and copy/paste to a new image and save that. Then use HTML/CSS to align it correctly.

3. Say you have a content box that you display news and updates in and want the image on the header look like it's leading down into the content area. Make the full image of the header area with the content area, then slice it so it will fit as the background image of the header. Take the other part and make that the background image of the content area. There are a few tricks to get it to align correctly though, such as CSS.

It's not necessarily a secret method, it's more of people getting creative with simple tools that are used in every website. If you need more of an example, I can give you one.

4. That all depends on the content of your website. If you want a really up-to-date website that includes lots of changing content, you want to go with dynamic (what I think you meant by liquid) in which case you will want to use PHP or some CMS, or if you're just giving some content that won't change that much, you can go with static (Fixed).

Now, others on here may have better ideas, but the methods above is what I have seen work.

Answer 2

This may be difficult to answer since you have some pretty detailed questions. If I could give one answer, I'd say that you should check out w3schools.com and learn all the HTML markup and CSS you can. From there approach web design from a strictly CSS and HTML stance. Use images to add enhancement.

Truth be told, you can do a lot with CSS to make a site look pretty. And since your strength lies incoming, the markup should be simple for you.

Answer 3

1. 960px, (with or without a grid system) yes, is a good fit. The majority of screens out there are above 1024 or 1024 (wide. Actually 960 is due to the scroll bars, etc), 800x600 has become less and less (very low % according to my stats...) used, although smaller resolutions are being a bit more common for mobiles and handhelds, but is better to do alternate pages/systems for those devices, rather than sacrifice so much the design, IMHO. Some people though design at 770px, or something like that. We are talking here about fixed width pages, usually centered. But depending on the type of site, you could also do liquid layouts. phpBB forums are a good example of it.

2. use "slices". You create them with "slice" tool, is a "cutter" icon.Just be sure "Snap" is on, at "View" menu, and that snap to slices is on, there. Also that snap to document bounds is on. Snap to layer often becomes more a problem if ON, in my experience... You just draw you slices, and save the psd, so they will be allways there. If need to change layout a bit, change them also, use zoom to adjust to pixel. Zoomed in, you can adjust the margins of the slice, clicking everywhere on the margin. So if you export often with changes, this becomes more and more useful.

3. I don't understand this one.

4. They are not "informed"... You just decide what is it going to be. If it's going to be liquid, you can do an abstraction, set whatever size of the dynamic area, as that you will handle with code. Just use a usual width to make a visual idea as you work. And use sectors, again, using fixed width for the elements that are fixed (icons, etc)

Tips... Use Photoshop "Actions" when it has sense. So you will automate certain things. Work on the psd only for first drafts, in the brain storming stage. Code once the visual design is generally acepted.

Other tip: Don't use the web export code of PS. Just make the width of your elements as you need them, then put those widths and heights in your css classes page.

Edit: 3. I think you mean setting a div with a width and height of the exact content area , a slice of the whole header image, where your logo is. Give the div a background (by asigning to it a css class with that width and height, and background image) with that exact sliced chunk . You can redefine by css the <a></a> tag inside that div, setting it to be display:block, having the exact width and height of the "hot area" , usually the logo, to link to home.html, for example.

Answer 4

View - but do not copy directly - the CSS/HTML/etc from your favourite trendy web 2.0 websites. When learning, it's best to look at documentation and class references to program instead of copypasta'ing. Good luck :)