Tutorial: Pixel Art Making a Simple block

PhotoImpact v.8 

Could be done in earlier or higher Version.

Easy

Tools: Main tool; Paint Brush

Description: Learn how to draw and paint a simple  Pixels Art Block in PhotoImpact

Extra needed: lots of patient.

By: Acadie


Home

Pixels Art

 

paintbrush settings

starting painting
1.

Remember, no soft edge, none whatsoever.

Ok, Let's begin, open a canvas 60 pixels x 60 pixels. Once that is done zoom in at 800%, this is the size I mostly work on.

Choose your Paintbrush: Shape Square (always); Size 1 (always); Transparency 0; Soft edge 0; Line choose Straight Line. And don't forget to click on Mode, we always and always paint in Mode—it allows what we paint to become an object.

Now at about the middle and near the top of your canvas, paint a line 3 pixels long, then going down either side, paint a line 2 pixels long, move down 1 pixel and paint 2 pixels again. You do this for about 12 times, counting the first set of the two pixels line. The image at left shows each pixel, in order, when you start.

2.

Ok, now that we have one side done, let's click out of mode. This converts your painted line to an object. Duplicate it, using the transform tool, reverse horizontally and position by overlapping the two 3-pixel lines. Cool, now we have our top side.

Now let's select all objects and group for now.  If necessary, right-click, Align, Center Horizontally.

3.

While it is still select, duplicate, reverse vertically and position by overlapping the last two 2-pixel lines. Super hey, we only have paint a few lines and we've got the top part of our block done.

4.

Now we need to make the side. Let's go back to our Paintbrush, same settings, click on Mode, and draw a straight line about 59 pixels high. Could be a bit less or more; up to you. I didn't make a perfect square here.

Once that is done, click out of Mode.

We are going to duplicate this line twice.

5.

And then position them, like in the example on the left. This gives us our sides and our 3d look.

6.

Now we need to make the bottom line.  Guess what? We already have made them.

Let's select the bottom of the top part and duplicate. Now position it to the bottom of the block like in the example on the left.

Splendid, we did made a pixels block outline with only a few paint stroke.

Did I tell you to save your work as a .ufo? If you haven't done so, it is more than time to do so.

How about we put some color to our block.

Windows Color Picker 7.

First decide what color you would like to have your block. Here I did choose a blue color.  Once you have decided that, you need to choose two more blues that will go with it.  With the Windows Color Picker, choose a lighter one about 4 to 6 shade away from your first blue and do the same for a darker blue shade. Add them to your custom palette by clicking the Add to Custom Colors button.

8.

Now the fun part begins. Deselect all objects. We are going to use the Selection tool, our Magic Wand. Similarity 0 and Search connect pixels checked.

With the magic wand select the top of your block.

Now choose the Bucket Fill Tool.
Similarity: 255; Transparency: 0;
Merge: Always;
Anti-aliasing: Unchecked.
Let's choose your lighter color of your three colors, and click inside your selection. Convert your selection into an object. Deselect.

Great, now save what you have done so far and let's move on.

9.

We will do the same for the left part but using our middle color.

10.

And the same for the right side using our darkest color.

Splendid, we now have a color pixels block. As you could see, the top part is where our light source is reflecting, the left side is our main color and the right side is our shade color.

We could stop there, but those black lines around it doesn't look so attractive. Let's push it just a bit further.

Choosing line colors   11.

Select the top part lines of your block.  We are going to add more color to our custom color palette. With the Bucket Fill tool selected, right- click on the color box and choose Windows Color Picker.  In that box, select the first color you made, under Custom Colors. Now choose a color about 2 shades lighter on the color scale on the right side of the dialog box. This will be for our top line of our block.

Now click on the top line to change the color.

 

12.

Now we need to select the bottom lines of the top and the straight line in the middle of the block. Back at the Windows Color Picker, choose a color about two shade lighter than our lighter color.

Now click on the selected lines to change the color.

13.

Here we are going to select the bottom lines of the block and the right side and choose from our darkest color about four to six shades darker and change the color as before.

14.

For the last side that will be the left side line of the block, that will be about two shades darker of our main darker color and fill in.

15.

Now last part to do, that is the left side of the bottom of the block. This one we will have to paint over it using the same color we just used for the left side of the block.

Select the bottom side of the block, choose your paint brush, click on edit mode next to the mode button on the top bar. It's the right-hand icon under Mode:
edit
This will allow you to paint only on the selected line, and nowhere else.

Start from the left side going to the right and on the last one only paint 1 pixel as shown in the left example.

16.

This is just to give you an idea what your layer manager could look like.

Now, select all your objects and add to your easy palette for further use. Once that is done, you could save one as a .ufo. I advise that you do both here, because in future Pixel Art projects we will use the block again and do something else with it.

Merge as single object, hide the background and save as a transparent .gif format. Remember that if it's not in .gif format, it is not Pixel Art!

Remember when saving, in the GIF Options Tab make sure the soft edge, none is showing. We don't want any soft edge around it, if so it will gives us ugly jaggies and we don't want that.

For more information on Pixel Art, read the tutorial Pixel Art Tools In PhotoImpact.  The PhotoImpact settings for Pixel Art are always the same, whatever your subject is.

Hum, what could we do with this block. Align them different ways could make a nice background banner for a web site.

They could be stack up to create some design.

How about changing the colors, they could look like ice cube.

Here is your award, don't forget to grab it.

Or event make baby block.  The choice is yours.

But be sure to save your block in your EP and in ufo format for the our next project.

Don't forget to show what you have done in the Pixels Art Workshop forum at the Pirc Bulletin Board.

If you are not a member, you just have to register, it is free.

 

Home

Pixels Art

 

Acadie's Art copyright 1998-2005