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.
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.