Pixel Art style of UI ?

CodeFather

Hi, incredible polycounters !

I'm wondering what workflows are you using when dealing with UI with high level of detail

Take for instance , this web interface http://www.disciples3.ru/main_eng.htm ,
What I'm asking for is how to remain such crisp and sharp detail.

Which is preferable - doing it 1:1 , ot doing it twice as bigger , than scaling it down to the original size and using some sharpening techniques or whatever you incredible guys are doing to achive this level of pixel detail
I'll be glad to hear any advices or if someone reveal a tip or two
Thanks in advance
Cheers !

MoP

I'd probably just do it at true-res. Same way you'd do a diffuse texture for a character or environment. Paint all the lighting in, photosource stuff, go in with a tiny brush to pick out the highlights, slap some overlays on to break it up a bit.

While that site has some rather crazy intricate textural detail in the UI, I think they've gone a bit overboard and maybe unsharp masked a bit too much, it's on the verge of being a noisy mess instead of a cool gothic UI.

edwardE

Yeah, 1:1 rez is probably safest - sharpening filters increase the contrast of pixels on image edges, altering the pixel value.

However, if you do want to work at a larger scale, when you resize your image, assuming you're using a newer Photoshop ( over 7 ) - there should be a drop-down menu in the resize window for filtering options - 'Bicubic Sharpen' 'Bicubic Softer', and the like - use the one called 'Nearest Neighbor'; it simply removes pixels without blending when it resizes, so when you reduce your image you'll get the sharp pixelation. Then it's up to you to see areas that need touch-ups.

You may be able to reduce the amount of touch-up you have to do by applying a very subtle gaussian blur (you'll have to play with the amount) to your original image before you resize, so when Photoshop interprets which pixels to remove with nearest neighbor, you'll still get some similar colors near edges for a sort of pseudo-filtering.

CodeFather

MoP, edwardE , thank you for your advice, I'll try working at 1:1 res