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 bounds 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?

If it wasn't painfully obvious, by now, I'm definitely an amateur. I'm more than willing to learn how the pros do it. I may never become great, but I'd like to at least be competent. Again, any tips/tricks/suggestions/tutorials you can share would be greatly appreciated.

3 answers

danwellman 5600
This was chosen as the best answer

Specifically with regard to number 2: Don't use any of Photoshop's automatic slicing and dicing or outputting to HTML 'tools' - they suck and you will get much better results manually. Use the marquee tool, and if you have to, zoom in to the max to make sure you only slice out the bits you need. Make use of slices for repeated images like background fades, etc, and use sprites where possible to optimize the images for download.

Slicing out design elements from a PSD is time-consuming. It's just one of those things that take a little while. Try to worry more about the accuracy of your slices than how long it takes (within reason).

Text in a browser is never the same as text in Photoshop because text in Photoshop usually has anti-aliasing applied to it. Make sure the line-height, letter-spacing, font-size, etc all match Photoshop and that will help with getting the same text to fit in the same places.

Answered over 8 years ago by danwellman
  • Do the text attributes in Photoshop match 1:1 with CSS attributes? KevinM1 over 8 years ago
  • Roughly yes, although Photoshop has a lot more formatting options for text than CSS does, and as text is renderd slightly differently even between browsers, it will appear differently in Photoshop than it does in a browser. Plus there are fundamental differences in how text is rendered between platforms, Text rendered in Photoshop on a Mac is going to look most different to text rendered in a browser on a Windows machine for example. But mostly these differences will go unoticed by most average web users. The anti-aliasing (or lack thereof in browsers) is the biggest issue... danwellman over 8 years ago

1) 960px is a good screen resolution to aim for, yes.

2) The best way to slice up a PSD is to be conscious of what your capabilities are in CSS and HTML. Design according to how you intend to code your HTML/CSS. If you are using a grid system, then your PSD should contain elements that fit within the restrictions of that framework.

3) Logos that overlap are often transparent PNG images or Font. Their position is changed so that they overlap other elements. This is done with css: .logo { position: relative; bottom: -10px; } In this example, an element with class="logo" would be shifted 10 pixels downward, which might make it overlap with another element.

4) Whether of not you want a fixed or fluid design depends on what the site is used for. If you are displaying a lot of content, then a fluid design will fill larger monitors, making your web site more efficient, as users will be able to see a lot more data at once. If you have a very fixed amount of content that doesn't need to be viewed in bulk, then fixed might be for you. In general, web sites that try to maintain a precise layout are more easily implemented with a fixed layout. Fluid layouts require a lot of testing to make sure the layout looks okay at different browser window sizes.

Answered over 8 years ago by David Clarke
  • @David. Great answer. Clearly, you know something about web design. +1 Abinadi Ayerdis over 8 years ago

I really like David's answer. I would add, as a response to the first question, when it comes to resolution, it really depends on what size screen your users will have. For example, if your target audience will access the site via mobile device, you will need a much smaller resolution than if they are desktop users. And even amongst those desktop users, you might vary the resolution depending on if your audience all uses old computers with low resolutions. Basically, decide based on your target audience.

Answered over 8 years ago by Abinadi Ayerdis