Topic awaiting preservation: Isometric Drawing Program?

Hi, i'm not quite sure if this is the right place to ask, but could anyone recommend an isometric drawing program or is there a way to do it in photoshop,

I want to create graphics similar to habbo hotel, or the lemonade tycoon game, kind of an isometric pixelated style and was wondering if there was a program to make this easy-ish.

Example Pic
Thats the kind of thing I'd like to achieve.

Thanks in advance

Never heard of any.

I'd probably recommend speaking to Cal:
http://www.iamcal.com/

Although Sulake created Habbo Hotel:
http://www.sulake.com/

He has produced a Perl version of their Java socket server:
http://software.iamcal.com/puse/

and (more directly relevant) is one of the people working on:
http://www.citycreator.com/

However there isn't much of a secret and a number of inmates have produced isometric graphics (e.g. silence and mahjqa) without the aid of any isometric drawing software.

___________________
Emps

FAQs: Emperor

Thanks Emperor,

I've sent a couple of e-mails to Cal and Sulake, asking about software and that style of graphics and am waiting for a reply.

Prawn, when you get a reply, could you keep us informed please, i would be interested in hearing what they have to say.

Many thanks

No problem axle, will do.

If anyone's interested I found some tutorials at http://www.pixelfreak.com/

They use MS Paint apparently, unless they need transparency effects etc.
http://www.pixelfreak.com/v3/b2/ah.html
a nice little animated clip.

[This message has been edited by prawnstar69 (edited 09-29-2003).]

All you need to do is make yourself an appropriate grid for reference, zoom in, and use your pencil tool.

Whether you use PS, PSP, pr MsPaint...

true DL-44, i'm at home now so i'm going to try and find/make one, use it as a seperate layer in PS so I can delete it when done and voila.

here goes...

It's fairly east ot do in PS...just draw a diamond grid the way they show in the tutorial and then use the squash transformation tool to reduce it by 50%

I've just had a go at one in Photoshop, I found a grid but it wasn't the cleanest, I think I'll make one myself (thanks for the tip Skaarjj) and followed it, I don't like the line tool in Photoshop though, it doesn't seem too..."clean". I'll have a little play with it though.

I made this house following a tut....



I know it's not the best, but it's a start

prawnstar69: You might also find this sueful:

:FAQ: How do I go about making sprites?

___________________
Emps

FAQs: Emperor

The angles on your roof are a bit off, throwing off the rest of the image.

Even though the roof requires lines that don't follow the grid, they should still equate to the line of the grid (ie the corners, if connected by a straight line, should be paralell to the grid line..).

Thanks for the FAQ emperor i'm looking through it now.

And thanks DL-44, I knew it didn't look 'quite' right and what you said makes total sense and is the reason it looks off. The grid wasn't very small, so it was difficult to line up, I've made a better grid now and will try that out.

I still haven't heard from Cal or Sulake.

I would suggest instead of using the line tool of using the pen tool, just zoom right in and use the pencil with a one pixel brush...and turn the grid on, much easier to tell what you're doing when you do it that way.

Thanks again Skaarjj, is there a way of having an actual iso grid in photoshop rather than a square type one, having it snap to an isometric grid would be so much easier.

With vector based programs you can usually have completely arbitrary guide systems. I know with Illutrator you can create a guides out of anything and they will snap. I believe Freehand even has some perspective grids and such built in, never really use Freehand though, so I can't say for sure.


It's only after we've lost everything...
That we're free to do anything...

Thanks MindBender, I'll investigate Illustrator and Freehand

Yeah, but you can't really do "pixel" art in a vector program....

Well..

1. Not all vector programs are exclusively vector oriented. Some mix raster and vector.

2. The question was about isometric art, not pixel art.


It's only after we've lost everything...
That we're free to do anything...

One of the best sites I've found is The Pixel Zone. There's a lot of great information there.

As far as my own images, I usually start by making the grid itself on its own layer. Just draw a single square, then copy, paste, move it accordingly, merge, and do it again until the grid fills the document.



Now, just follow the guidelines set up by the grid. The hard stuff is when you come across lines that don't follow the grid exactly. Here's an example I made:



Notice that the roof lines don't conform exactly to the grid. In this case you'll just have to keep trying different combinations of pixels to form a clean line. For example, 4 across, 1 up, 5 across 1 up, etc.

Also, when constructing walls and squares that conform to the grid, I usually just make a few squares of varying sizes (1x1 square, 2x2 square, 2x4, etc.) and copy these and arrange them. The house walls are made of a single 3x2 panel. I made one, then copied it and flipped it horizontally.

If you need help, here are the psd files for the above images (right-click, save as).
House
Grid

In the house psd, I left the layers with my roof guidelines. The first roof guideline is in blue but the lines weren't clean enough. I drew over that in red and the lines came out much cleaner.

Here's a sig I made using the same technique. This was basically just freehand drawing using the grid for perspective reference:

Thanks silence, that's loads of help.

quote:

---

As far as my own images, I usually start by making the grid itself on its own layer. Just draw a single square, then copy, paste, move it accordingly, merge, and do it again until the grid fills the document.

---

That sounds... painful. Why not just build a square grid larger than your intended document by using a pattern, then turn it on it's side and make it a layer in your intended document?

Maybe make one out of vectors, then you could smoothly scale it to any size you wanted for working on different projects.


It's only after we've lost everything...
That we're free to do anything...

I've just had a go at making an iso. pixel picture of an atari console in the legendary MS Paint and it was a lot easier than trying with grids and such in photoshop. I just zoomed in and made sure the lines were 1 pixel up for every 2 across and it was pretty easy. I'll post what I've done so far tonight as I'm at work right now and can't upload it.

That's what I've done so far in MS Paint, i know the console looks not much like an atari, but I didn't intend it to, to start off with anyway. I did start on doing some other things, but my boss remotly controlled my PC and scribbled on it *grumbles*.

oooh...I used to have one fo those...the Atari 2600...I remember long hours spent playing 'Pitfall' and 'Double Dragon'

Now I need to do a wood effect on the TV...

an isometric drawing program: don't laugh at me....but thats what i always wanted to code, sell and get rich with

Mindbender:

quote:

---

That sounds... painful. Why not just build a square grid larger than your intended document by using a pattern, then turn it on it's side and make it a layer in your intended document?

Maybe make one out of vectors, then you could smoothly scale it to any size you wanted for working on different projects.

---

Yeah, mindbender, I thought about using a pattern about 5 seconds after I made the grid. Unfortunately, scaling is a problem unless you can get it to scale without aliasing. Also, scaling it destroys the 2 across 1 up pattern.

prawnstar, nice work so far. The only things bugging me are the cables. Try to highlight them less harshly and smooth them out a bit.

I created a 1000 x 1000 pixel grid that I use as a base reference grid (I say base, but I actually reduce it's opacity to 35% and put it on top of everything else), all I did was create a new image, 18 pixels x 8 pixels, and doo the 2 across, 1 down technique from corner to corner, then I made certain parts of it transparent and defined it as a pattern...now I can create grids any size I want...

Then do one of two things.

1. use vectors so it doesn't cause any issues in scaling (they're infinitely scaleable ya know )

2. change your interpolation method from "bicubic" to "nearest neighbor". It's in your preferences. That will cause the anti-aliasing to shut down and it will scale only whole pixels.... basically.


It's only after we've lost everything...
That we're free to do anything...

I know the cables are pretty crappy, I have an idea on how to make them better, thanks.

If you have PS, it'd still be wiser to use that than MSPaint.

If you don't want to use a grid, don't....that's all.

Zoom in to 1600% and use your pencil tool.

You'll still have much more flexibility than with Paint, in regard to the image creation, editing afterward, saving for the web, etc.

thanks DL-44, I think I will from now on, Cal just replied to my Q and eboy and Habbo Hotel are made using Photoshop and it's his weapon of choice.

The niftiest feature for this type of work is view->new view

With that, I keep a fully zoomed in view, a 200% view, and an actual size view. Makes it a lot easier.

Or for those working with Photoshop 7, yo're looking for view>>document>>new window

Hi to Everyone

I,m new to this forum but I do feel I have something that you will all be inerested in. I have developed some software The World Creator (v1.5) which takes much of the drudgery out of designing Game Graphics.

It can create 2D, Platform , Isometric , Pseudo 3D, artwork as well as animations! Very professional results can be achieved very quickly. AND IT IS FREEWARE!!!!

As well as this we have a huge Resource Center : 1000's of pre sorted textures, backgrounds, fonts, icons and other FREE SOFTWARE.

Logon to http://www.inet2inet.com and try out this software.