Design a map for a 3d game similar to Discord's style in SVG with Affinity Designer

Question

I'm just a backend developer who has no talent with design, and I'm currently developing a game for iOS, Android, PC, macOS, PS4, Nintendo Switch and Xbox One.

I just want to design something like this for the map of the game: This is Jason Citron's twitter header photo, which is the CEO and founder of Discord.

It's similar to Mario Bros games' maps.

I know it's a hard task but I do not even know where to start. I have Affinity Designer, Sketch and Photoshop, so I can do it in any of those programs, but if possible I'd like to do it with Affinity Designer.

If also possible, I'd like to do it in Scalable Vector Graphics.

Thanks in advance.

Answer 1

If you want a good product, work with a designer.

You could spend hundreds of hours learning how to work with a program and how to optimize the workflow.

Just imagine a designer asking how to start doing the backend of the game. Sure It can be done, but I am pretty sure you would think the same recommendation. Look for someone that already knows what needs to be done.

Sayed that

1. You need to think in terms of individual reusable assets.

Map

• Zones of Grass, water bodies, desert

Terrain

• Mountains, canyon, river

Biosphere

• Trees, another type of trees

And so on.

2. Define the style. It is not that simple as posting the example, you need to understand it, the logic, the overall roundness, the corners, the thickness, and proportions.

3. Take the tool and draw.

   • Use layers to separate and organize.

---

Here is a quick process of one of the assets.

1. All these are really simple shapes. Draw one.

2. Add another as you need for the basic volume.

3. Add color.

Now you have your first asset. A mountain without snow.

4. Duplicate it, change colors and put them on the top. Now you have a second asset. A mountain with snow. (5)

5. Duplicate it, play with scale... Now you have your third one. A group of mountains.

---

But as I said, to choose what style, colors, etc you need to experiment. Here are some styles of the same asset. But there can be hundreds more; isometric perspective, circular base, more round, more faces, more everything.

But again. This can take a long time depending on the complexity of the map. It needs proportion, logic, dimensions.

Answer 2

The only way is to practice. Start by getting the online help

https://affinity.help

You must very patiently repeat the shown movements until you can control them.

Search for tutorials. There are plenty of them available although not as much as for Illustrator or Inkscape. Working through complex tutorials is useful after you know the tools and can use them for elementary drawings, not before.

Make copies of existing interesting images or shapes. That's how you actually learn how to make something with the tools. Start from simple ones. Do not expect the program creates the details for you. You must input every piece, twist and color. The computer helps to draw consistent strokes, regular shapes and repeating forms. But it's you who must know what's wanted.

Even in the complexity level of your example (=not especially difficult) you must make hundreds of practicing drawings to polish your skills enough to be able to create something from scratch without getting stucked in any phase.

Finally you need your own subjects. Learn to make sketches on paper with a pencil. The sketch should contain the ideas of the shapes and how to organize them. This is actually making a plan. If you have a plan, your time doesn't get wasted by playing with the computer. Open the computer when you have a sketch.