AGIWiki/Picedit Tutorial 1

From ScummVM :: Wiki
Jump to navigation Jump to search

Tutorials and Guides

This article, originally by Kon-Tiki

Setting up the Picture

Plan the composition

First thing you should do is find out what should be on your picture. What should be in the background, what in the foreground, etc. Then comes the first thing you do in Picedit (except for opening it and starting a new pic) is setting the horizon. Draw the line where the horizon should be and remember the Y- coordinate. Then set the vanishing point. The vanishing point is the place where everything tends to disappear in if you draw the lines far enough.

Some tips

  • The lower the vanishing point, the higher you're standing.
  • The higher the vanishing point, the lower you're standing.
Click to enlarge.

Setting up the composition

Second thing that needs to be done, is setting up the composition. Draw boxes where you want everything to be.

Some tips

  • If you want cavelike borders or such things, draw in dark/light gray. That way, it won't become confusing.
  • Try to keep the coordinates and priority lines in mind.
Picedit tutorial 2.gif

Setting the perspective

This's easy and done really fast. Just draw lines from the corners of the boxes that aren't round surfaces. Make sure not to draw the line that runs through the box, unless the object in it will be transparant. When that's done, draw the lines where the object should stop. Make sure that these lines run exactly the same as the lines a bit further on (like the roof in the example).

Some tips

  • To draw halve/full circles, draw a cross in the middle of the box and draw curves from one point of it to the next using the pen tool. This's a bit tricky and demands lots of exercise. The main idea is to mirror the pixels over the line of the cross.
Picedit tutorial 3.gif

The actual picture

Drawing the outlines

Now the time's come to draw the actual picture. Draw the lines according to the frame you've set up. Choose the colour you want and don't mind the priorities yet. If you have some curved lines, draw them according to the lines you've set up, but you can stray a bit off. Remember: those black lines're just guidelines. Be sure to draw every line. If a line should be black, draw over it.

Some tips

  • To outline smaller details in the larger ones, just set boxes for them again.
  • To change the colour of a half/full circle, go back into the history and change it.
Picedit tutorial 4.gif

Removing the frame

It's best you get rid of those ugly black lines now. Go to the beginning of the history (press 'HOME') and delete (press 'DEL') everything until only the colours remain.

Some tips

  • Make sure you save your picture before doing this. It's not very fun to see that you've deleted a bit too much.
  • Going to the end of the frame-setting and working backwards can prevent some problems.
  • Be aware if you've changed colours by using the history (f.e. for circles) that you don't delete them too.
Picedit tutorial 5.gif

Adding a Sierra-touch

This's the moment we've all been waiting for. You're going to add the 'Sierra-touch'. The trick is to use the darker or lighter version of a colour. Draw it a bit from the border and make it a whole. Fill it, then fill the rest. It's as simple as that. Same thing's for shading, but the border colour should be the colour of the shade then and the relief in the shaded part should have the darker version of the not-shaded colour.

Some tips

  • Try extracting some pics from Sierra and go through their history or look at the things you want to use but can't get to work.
  • Imagine a point from where all light comes. Draw the lighter parts there and the shadows on the other side.
  • Now it's a good time to save the pic.
Picedit tutorial 6.gif

Adding the priorities

Now go through the history and add the priorities to the drawing actions of the other parts. This way, you'll save a lot of time you'd waste by tracing. It's also far more accurate.

Some tips

  • Try to find the best action to add a certain priority action to.

End result

You can add more details than this in this picture. That's all up to your imagination.