advanced photoshop

Create pixelated web styles

Posted in:
Tips & Tutorials, by The Advanced Photoshop Team

Master pixelated effects in no time using the Photoshop Mosaic filter

In recent years, there has been a renewed appreciation for all things retro in the key fields of design. When referring to digital art, isometric styles in particular spring to mind, which is great for web projects.

Despite the continuing development and improvement of computer graphics, many have looked to regress pixel-based designs back to their very bitmap basics. This is especially true with web designers, who look to regenerate methods and visuals on an almost daily basis, being based in such a highly competitive and fluid industry.
Being a pixel-based software, and therefore highly capable of handling bitmap format files, Photoshop has become a firm instigator for such web-based styles. As always there are numerous ways to achieve results in this software, with most including the use of the Mosaic filter in conjunction with other creative tools, namely paint brushes, Gradient effects and the Render>Clouds filter.

We’ll show you how to achieve more attractive pixel-based effects. Of course, these effects don’t rely on the limited file sizes associated with traditional bitmap files. So the effects you’ll learn here can also be used to enrich your digital design and illustration projects.

01 Prepare your Background

Step 1
Begin by opening your web backdrop file. Fill your backdrop to a solid black (Shift+F5). Select the Gradient tool, 50% Opacity, and set a warm Foreground colour (#ff7521). Apply to the top of your backdrop using a colour-to-transparent Linear gradient. This will work as your base tone.

02 Apply brush styles

Step 2
Select a large brush set to 0% Hardness, and 50% Opacity and Fill. Apply varying tones over the gradient. Create a new layer and select the Grass brush. Apply this with varying brush sizes, using a colour picked from your backdrop, with Opacity and Fill both reset to 100%.

03 Use the Mosaic Filter

Step 3
With your new painted layer active, select Filter>Pixelate>Mosaic, setting Cell Size to 25 square. Also apply Filter>Noise>Add Noise, setting an Amount of 1%. You can adjust the result using colour adjustments, ie Hue/Saturation (which we did to give us the pink effect featured here).

Create pixelated web styles