This is more or less a continuation of my previous question: From .psd to working HTML and CSS - help me suck less

I just can't really grasp how to efficiently slice up this header graphic for the web. I've made sprites of the buttons, so they'll have hover states, but beyond that I'm stumped. In particular, the logo on the left and the search box on the right are tripping me up. For the logo, I'm wondering if I should have the first few letters of 'Handigamer' in the same image. For the search box, I'm concerned about positioning and the dropshadow.

As an extra problem, I don't have access to the .psd, so I'm working off the .jpg you see.

When I look at something like this, my mind immediately goes to code, and right now I can't see a good way to slice this without it being a mess to code up.

Any hints would be very welcome. I'm not looking for someone to do this for me, but merely to help me see it from a designer's perspective.

1 answer

This was chosen as the best answer

Ideally you'd want a layered PSD to make for clean cutting but you could make a reasonable go of it with a bit of careful selection and filling.

The menu and the search box are the only essential interactive elements and so the rest could simply be a background image on a div.

You'd need to replace the buttons and remove the search box, filling in with a bucket fill and a selection, but the edges will need special treatment as will the stripes behind the search box - can you get a layered psd?

Once you have the background image, just drop a nav menu in line with the grey bar (float and margin it) and do the same with the search box.

If the logo needs to link to "home" then absolutely position an <a> element set to display:block with a width and a height to cover the text part of handi-gamer. (use text-indent: -9999px to get the actual text out of sight.)

If you had a PSD you could break it up further by having the logo (including the controller) as an absolutely positioned alpha transparent PNG image and just have the blue, grey stripe and green bits as a background.

What isn't clear is if this fixed width is left aligned, centered or supposed to grow, if it is then the designer hasn't made any allowances for it.

I'd also comment that the accessibility issues caused by a fixed height navigation would seem to go against the site's main audience (gamers with some disability?) and if you're using text as images for the buttons, shame on you!

P.S. the styling on the search box will be a complete pig cross-browser and the default text is an accessibility annoyance too.

Sometimes designers need to be more sympathetic to the media and audience they are designing for.

Answered about 6 years ago by Tony Crockford
  • Can you elaborate on the accessibility issues? One of the goals for this site is to make it accessible across the board, so any help you or anyone else could give in that regard would be great. The buttons, as they stand now, are sprites, one for each button. This includes the image text for each. If I'm reading you right, I'd be better off using real, browser rendered text for them, with the sprites (if they're even necessary) to simply change the hover state of the background. KevinM1 about 6 years ago
  • Accessibility - think: ensuring that a user can adapt your site to suit them - can they make the text larger? not if it's an image - if it's proper text, what happens to the layout when it's two to three times larger than default? Some of your audience may have mobility issues - are the buttons and boxes easy enough to get to and click on, and some may have cognitive issues - will the search box look like the search boxes they are used to? etc.. Have a look around this site: for hints and tips on improving accessibility. Tony Crockford about 6 years ago
  • Great link. I bookmarked it. Quick question about text - If I have some JavaScript that will allow the user to increase/decrease the size of the text on the screen, will it grow/shrink in a downward manner? Or from the center of the text out? I was just thinking about the navigation buttons I have and what text manipulation would actually do to the rest of the header (push the Handi-Gamer part up AND the green part down? one or the other?). KevinM1 about 6 years ago
  • The users browser allows them to enlarge the text, so javascript is not really needed. The text gets bigger from the baseline, but will enlarge the containing box - in all likelihood it will just break out of the nav boxes, and will certainly be taller than the visual grey stripe, unless you find another way of doing that. If the background is one image, then larger text will just fall out of the nav bottom. if you break it up into parts, you could make the grey bar enlarge as the text gets bigger. Tony Crockford about 6 years ago
  • Ah, good to know. Thanks again! KevinM1 about 6 years ago