Note: I prefer using Adobe ImageReady for all my pixel work as using Photoshop during several years; I am still using the integration of ImageReady tools and its interface. As ImageReady coincides at its basis with Photoshop for images with low resolution, it became an ideal method of development and adjustment of pixel images. Besides, ImageReady offers much more undo actions without any difficulties connected with palette history at Photoshop. Do not forget that all pixel images should be created with monitor resolution on 72DPI.

Surely you are not limited with ImageReady as Paint Shop Pro, Graphics Gale or even good old MSPaint fit pixel graphics properly, although PShop and PSP only allow using of layers which you can not manage without during large illustrations creation. But if you are just a beginner here, Microsoft Windows MSPaint is just the right choice for you. Adobe ImageReady is supposed for this lesson.

1. Open ImageReady and create the new document, choose Pencil Tool (hot key - N) and select the least size of the brush. This size presents one pixel. All the pictures you see at your monitor are created from these separate pixels. Try to like these tiny square pixels as you are to know much about them.

 2. Very often while creating pixel image you will have to use zoom. Although it’s very convenient viewing the image at its 100% size. So you should select your new document and then go to the menu View and then New View (new version of ImageReady it goes like Window – Documents – New window).

3. The result of these actions will be another view of your opened document. Place it near the main document where your oversized image.

4. Before using Marquee tool (a tool of extraction of the necessary area of the image) in order to draw shapes, make sure that you have disabled the anti-aliasing function. Do not use the function of elimination of roughness outline while working with pixel graphics. Although manual smoothing of outlines is possible when you are working with small images relocated on the monitor separately from others.

5. It is also convenient creating the palette of colors which you are working with. Every time you use new color, place the small square of this color to the upper left corner of your document. It is an easy and convenient method to save the set of colors you are working with. So by pressing Eyedropper tool you will return to the selected colors.

6. You will be able to concentrate on small final details by extending the image to large scale. Remember that you always have 100% scaled image and you are able to see it in its natural size. If something looks wrong than it might happen because of too much pixels using which overloads the space used. Pixel graphics differs from the traditional one as you are strongly limited with a definite number of squares which your image is created from. Sometimes it is of much importance where you have placed a pixel and where you have not.

7. If you feel you need some instruction in order to create a pixel image, then you can work with a scanned picture. Scan a picture with a resolution 72 DPI and try to draw the original picture close by its size to the scanned sample. Thus you will slip less details during the conversion of the picture to the suitable size for pixel graphics. Most forms at video games were created with the help of sizes divisible by 8, i.e. 8x8, 16x16, 32x32, 64x64, most popular at pixel graphics. Certainly if you create a magazine illustration then you are not limited with such restrictions.

1. When basing on the engineering technical drawing, isometric image presents objects without taking perspective into consideration. The objects are based on the diamond-shaped grate, as the picture below shows:

2. The traditional isometric image is based on the angle of 30 degrees, however due to the peculiarities of computer monitors, when presenting a picture on the monitor, angle of 30 degrees gives confused and rough line. They use angle of 25.565 degrees approximately at pixel graphics. Don’t be afraid of mathematics appearance, there is no need in memorizing all those numbers.

3. In order to draw a line with the angle of 26.565 degrees, all you have to remember is one step upward and two steps lengthwise, this technology looks like an extended scale stairs. Look at the below picture. The lines were created in the following way: draw two pixels, then go one pixel up and draw the next two pixels at the end of the previous one.

1. There are two methods for isometric graphics: the first one is 3 pixel angle (see type 1). This method uses three pixels at angles thus creating exact rectangle pleasant for eyes.

2. The second type doesn’t use 3 pixels at each angle but uses one upward and two lengthwise at the whole construction (see type 2).

3. If you want to duplicate cubes of the first type, then you will get deformed cogged borders of the image, if you want to place two cubes of the first type one after another.

4. That is why the second type is recommended in case you want to duplicate cubes farther in order to create forms based on these cubes.

1. It is quite easy to create rectangles with the help of methods we were talking about at the previous part, although we know nothing about restrictions. The easiest way to draw a rectangle is to create the upper surface, duplicate the layer at Photoshop by selecting Duplicate Layer at the palette of layers (a window with layers), move the new layer below, combine the edges then by using the vertical lines.

2. Below you will find examples of triangles. Please note that the first one uses the method of 1 upward and 2 lengthwise for all its sides, while the second triangle uses already two methods: the first one and the line consisting of separate pixels giving less steepness to triangle sides.

3. Balls are considered to be the most difficult forms at isometric space. To create the front side of the ball use Marquee tool, but it’s much more difficult to create the vertical form of the tube. However, if you show some patience as well as attention, you will be able to create this form with the help of Marquee tool.

4. Below are several other main forms which are quite easy to create at isometric space. You are limited only with your imagination.

1. Most pixel pictures comics-styled use black outlines. Let’s create a spotlit cube like we have been doing it in previous chapters. Create a cube by using a solid black outline.

2. Select the light source at the upper left corner behind the object. Paint the front right side with the blue color, select light blue for the upper side where is much light and dark blue for the left right side which is minimal spotlighted.

3. Now our cube looks more like 3D object but still there are some things which will make it more beautiful. As we do not need the black outline on the every edge, we can spotlight the front edges (those which are inside the form) which will create a very good effect. Select the shadow to be a little bit lighter rather than the upper surface of our cube, and paint the edges of the cube as it is shown on the picture below.

4. The last touch – select the pure white color and make couple of pixels opposite the right corner. This will give the shining effect to our form.

By using the techniques we were talking at previous chapters we will draw an isometric building. I have decided to build a video games shop called “Marsh’s Loft”. Surely, you can build whatever you want.

1. Start with building a main outline of the rectangle. This will help to define the right scale for your building.

2. As the basic form of the cube looks quite dull, I have decided to add a more interesting upper section. This section is made from 3 slim squares, placed one on the other and then combined on its edges.

3. As we already have a base for our building, we can easily fill it with the selected color.

4. In order to make it more interesting I have added the cavity at the top of the building. Now we have a so called terrace on the roof and just an interesting detail.

5. Again we use the upper left source of light and select three variants of color: a basic color, and its light and dark tints. By using these three tones we fill in the each side depending on how the light hits our building.

6. Now let’s add some details to the edges. The lightening of the inside edges of the building creates a cold effect. The effect from black outlines may be absorbent but adding these details indeed helps to impact the effect of completeness to our building. Note that I have also changed several black outlines with dark blue shadow.

7. I have added the window by drawing the rectangle and then just the same but less inside of the first one. This gave the effect of cavity and has created the outside window-sill.

8. The door was created according the same technology.

9. The shop is called “Marsh’s Loft” but people won’t know it without any sign. Here goes a small digression from our subject in order to know how to create an isometric sign.

10. Type a symbol in order to select the font type. I have selected the third one. Make sure that anti-aliasing function is disabled. One can download a great amount of fonts from the Internet. Such a collection of raster fonts will be much useful at pixel graphics.

11. At Photoshop menu select Edit-Free Transform-Skew and move your symbol to the isometric angle. You may do it approximately or use 25.565 degree angle.

12. Now use Marquee tool in order to select the symbol and then on the new layer select Edit-Stroke. Make sure that the size is of one pixel as well as its location is at the centre. This will give you the outline of your symbol.

13. Now copy the layer and move it a little bit behind in order to create two sides of our isometric symbol. Combine every edge by means of one upward and two lengthwise.

14. And now fill in each side with color and paint the pixels which won’t be visible through our isometric symbol over.

15. And again by using the upper left source of light select dark and light tones and fill in the appropriate sides using these colors.

16. Highlight the edges by using lighter tint from the selected colors.

17. Add pure white pixels at every edge.

18. So now when we know how to create an isometric letter we can create the whole sign. I have created my sign “Marsh’s Loft” and have placed it on the right edge of my building.

19. Last touches – I have added several details out of glass and several signs and titles above the door and on the windows.

(The real size)