Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
18th November 2012

Design a isometric pixel-based background

Discover the essential techniques for creating gorgeous-looking isometric art

Design a isometric pixel-based background

Admittedly, pixel art can take a fair while if you want to do a proper job – and it takes even longer when being designed for a repeating isometric pattern. However, for the most part, the results speak for themselves and this tutorial will show you how to create a cool-looking background without spending too many hours slaving away.

The idea behind this particular pattern was about bringing together a selection of objects that appeal to us, from cool skulls, trainers, sweets and hotdogs, to ice-cream, pens and pencils, and much more.
You really don’t have to be Michelangelo to pull this off – the only real drawing to be done is some rough scamps for guides at the start. The trick here is making it personal, filling your pattern with your own likes – or indeed dislikes. Bear in mind your site content and be prepared that this background could steal the show!

DOWNLOAD TUTORIAL FILES

Isometric grid

Design a isometric pixel-based background
Isometric grids are a great way to achieve a 3D/2D look and a very useful tool for drawing in perspective. This grid is made up of a series of vertical lines, with lines at 60 degrees to either side, all meeting at common points to form a web of equilateral triangles.

Print and source

Design a isometric pixel-based background
To save you a bit of time, so you can focus on the more creative part, we have supplied the grid on the disc; print this out. The background we have created is very bespoke and tailored, full of stuff that we like. So fire up your search engine and source a few of your own favourite things! Work from printouts or your screen – whatever suits.

Those little scamps!

Design a isometric pixel-based background
Next grab the printed-out grid and use it as a guide to scamp, or sketch. Of course, these don’t have to be works of art – they’re just a guide. So long as you get the basic isometric angles working correctly, the aesthetic can be sorted at a later point. Once you’re happy with your lot, scan and save your drawings at 150dpi, then open them up in Photoshop.

Pixel power

Design a isometric pixel-based background
We have opted to design our background in a pixel style. The golden rule when designing in pixels is to keep it consistent, with pixels one up and two across (this ratio), and also to avoid anti-
aliasing. Think clean, simple and bold.

Let’s start drawing!

Design a isometric pixel-based background
Select one of your objects to draw. For this example we are going to start with the skull. Create a new layer, select a 1px pencil, zoom in and begin tracing over your scamp; remember to stick to the one up and two across ratio (where you can). Zoom out occasionally to 100% to see how it’s looking, or select Window>Arrange>New Window to see a live preview.

Build a library

Design a isometric pixel-based background
It will take a bit of time to get your objects looking right, but once you have got into your stride you will soon have collated a library of items. Remember, it’s not about drawing an endless number of objects – you can duplicate a lot of them and just change the colour and/or little bits of detail here and there to give each one its own identity.

Colouring in

Design a isometric pixel-based background
Now it’s time to add some colour! Filling your objects should be easy if you kept your lines clean and bold; just select the area you want to colour using your Magic Wand tool and then switch to the Paint Bucket tool to fill. Make sure that your Wand properties are set to Tolerance 0, that the Anti-Alias box is unchecked for a clean selection, and that Contiguous is ticked.

Setting the tone

Design a isometric pixel-based background
Our objects are very big and bold, which is great, but it’s nice to add some little details, such as dials on the ghetto blaster or hundreds and thousands on the ice-cream and so on. The devil is in the details, as they say, so create some nice drop shadows – simple circles using a darker shade of your background tone.

Play with scale

Design a isometric pixel-based background
Not everything has to be to scale – eg our ghetto blaster is the same size as our hot dog; it makes the illustration a lot more interesting! Aim to be surreal and abstract. Use a vibrant colour scheme and play with your colour palettes too; it’s being designed for screen so you don’t have the CMYK restraints of print.

Layout

Design a isometric pixel-based background
Once you have drawn and coloured all your items, create a new document (A4 size, 150dpi), then start dragging over your objects and naming your layers as you do so. This just makes things easier to find when composing your final layout. Play with the dynamic scale; overlap some objects, throwing shadows over others – anything to help gel the picture. Make sure everything stays within the page, ie don’t have anything overhanging.

Tiling time

Design a isometric pixel-based background
Now to start creating your tile. When you have a picture that you’re happy with, flatten the entire image in the layer’s properties, grab a couple of guides – ie horizontal and vertical – and find the centre of the image. Now slice the image into two from top to bottom. Move the left half to the far-right of the document, and the right half to the far-left.

Slice twice

Design a isometric pixel-based background
Now slice the image into two again, from left to right this time. Put the bottom half up against the top of the document, and move the top half down to the base. You have now created four seamless joins and you should have a space left in the middle.

Filling the gaps

Design a isometric pixel-based background
It’s important to keep these elements within the page and not to overlap or go off the page or it will compromise the repeat pattern. Grab your elements and fill in the centre; this can be tricky as the background is now flat so it’ll take a little creativity and patience to fill in the spaces, but you’ll get there.

Different tiles

Design a isometric pixel-based background
We haven’t done it for this tutorial but to create an even more random pattern, create a few different tiles, move some objects around and change some colour – but only the editable objects in the middle. Once satisfied save them out as new versions. Instead of using just the one tile to repeat you now have a mix.

…and repeat!

Design a isometric pixel-based background
Once happy with your finished tile, flatten the document, Select All and copy the image. Create a new A4 document at 300dpi to keep the sharpness (don’t worry, it will be scaled to 72dpi later on). Paste your copied images into this new document.

Compile the tiles

Design a isometric pixel-based background
The tiles will be a lot smaller due to the high-res image dpi. Now duplicate the layer a few times, make sure that View>Snap is ticked, and start placing the tiles: top and bottom, left and right. They should automatically fall flush with each edge – notice how it all repeats smoothly and, bit by bit, transforms into a very striking image.

Displacement theory

Design a isometric pixel-based background
To really add some variation it’s a good idea to take some of the objects and turn them so they no longer sit along an isometric angle. Don’t overdo it, as we still want the emphasis on the grid – just a few scatterings to lift the picture with a few small objects; for example, we have used our french fries and cake.

Resize for web

Design a isometric pixel-based background
The scale is really down to you. We prefer the scaled-down pixel look, hence creating small tiles to give it that visual impact, but maybe mixing up the scale could be a cool direction to go. Once you’re happy, flatten the image, go to Image>Image Size and convert to 72dpi.

Adjustment levels

Design a isometric pixel-based background
The last few steps are just a few different suggestions on how to treat your image. All the hard work is done and the great thing about this illustration is that, apart from a few small areas, the design is made up of flat colour, so colour editing is super-easy. First, how about stripping it back, creating a greyscale version (Image>Desaturate)? Or you can use Image> Adjustments>Brightness/Contrast to get a bolder look.

Channel Mixer

Design a isometric pixel-based background
Still not happy with your colours? Use Image> Adjustments>Channel Mixer to remove/replace tones. It’s a great tool to experiment with. We guarantee you will settle on a palette you would never have imagined at the start.

Ready to glow?

So there you have it , a repeatable pixel isometric pattern based on everything you love – you can’t get more bespoke than that! The pattern can be used in any shape, on any format. As a final touch, add some soft glows with a brush set to Screen to give it a neon look.

Tags:
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.eukhost.com eUKhost

      Really awesome technique. The matrix of cells makes it more unique.

    • mina

      very amazing job

    • http://www.divshare.com/download/18487093-1f4 document

      Heya i’m for the primary time here. I found this board and I in finding It really useful & it helped me out a lot. I’m hoping to
      give one thing again and aid others like you aided
      me.