Creating Stencil Alphabets

Post questions on how to use or achieve an effect in Inkscape.
Honjiida
Posts: 3
Joined: Mon Apr 18, 2016 10:59 pm

Creating Stencil Alphabets

Postby Honjiida » Mon Apr 18, 2016 11:13 pm

Hello everyone, I'm new to inkscape. I am trying to create custom alphabets (A-Z) for use in Gamemaker for a Drag and Drop game for kids as the built in fonts do not give me much room for modification to my liking (Newbie here). I have created a grid (sort of), but I am encountering the following problems:
a) Parts of my alphabets are always getting left behind on the grid when I move my image away.
b) The lines of the grid are cutting through my images.

Any help or alternate methods (tut, please) will be gladly welcome. I have attached a screenshot of my object to this post.
With regards.
Amandi
Attachments
stencil.PNG
stencil.PNG (74.53 KiB) Viewed 2853 times

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Creating Stencil Alphabets

Postby brynn » Tue Apr 19, 2016 10:29 am

Ok, let's gather some info, before we try to answer. We're not all game makers, and I can't imagine what kind of game this would be.

Would you please give us the exact steps you took to arrive at that screenshot?
How did you make the grid?
Why did you make the grid? Was it to create the stencil effect?
How did you make the letter?
Did you make the letter on purpose out of many different pieces? Is it a puzzle game where the players assemble the letters?

Edit
2nd thought. There are probably a lot of free stencil-like fonts. Would you be able to convert a stencil font to be used for this game? Maybe save you some work?

Honjiida
Posts: 3
Joined: Mon Apr 18, 2016 10:59 pm

Re: Creating Stencil Alphabets

Postby Honjiida » Tue Apr 19, 2016 5:58 pm

Its a simple game where players drag and drop alphabets into their hollow cutouts. It teaches little kids letters of the English alphabet and dragging of mouse concurrently.
I made the grid by dividing the A4 template 5x5 using the Bezier curve tool and grouping the lines.
I made the grid in order to make my own font, not because of the stencil effect.
I made the letter by drawing out the font in the grid - Bezier Tool - Adding colour to the parts the make out the letter then grouping the coloured parts.
I wanted to make a "whole" image font, not out of many pieces you see. Taking a cue from the attached image, the game is played by dragging the navy coloured letter A onto the the yellow one.

I would love to get any font I can edit like an image, drawing all these letters looks daunting. Converting a stencil font? Well, I would have to read around on how to do that.
Thanks for replying my post.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Creating Stencil Alphabets

Postby brynn » Tue Apr 19, 2016 8:03 pm

Oh, great info! Now we can get somewhere :D

So now there are 2 ways to go -- 1) use a pre-existing stencil font to make the letters, or 2) clean up your letter making process and streamline it.

Some info. From my experience, even if you wanted to make a very simple block letter style, with lots of 90 degree corners, striaght lines, and perfect circles, it will be very hard to end up with a set of letters that looks consistent and professional. I have seen games (or any kind of project really) where either the graphics were not the focus, or maybe the author wanted to have a certain style, which looks handmade. So if that is your goal, maybe, making your own letters would be the best choice.

But for a much cleaner or professional appearance, it will be much easier to use an existing font. Here are a couple of sites where you can search for fonts. http://www.myfonts.com/, which has both free and non-free fonts. http://www.1001freefonts.com/ has all free fonts. (In both those cases, by "free" I mean doesn't cost money.) And http://openfontlibrary.org/ are all free fonts too, but "open" means open source, which gives "free" an expanded meaning. In all cases, you should pay attention to the license. But especially for the free ones. Sometimes they are free only for personal or non-commercial use. So for example, if you're planning to sell your game, or widely distribute it, those are not really personal uses.

And there are many other reputable sites where you can download fonts. But there are also some non-reputable ones. So like with downloading anything from the internet, be sure to scan for malware, before opening or installing.

Once you find a font that you like, install it. If Inkscape is already open, you'll need to close and open again, to make the new font available. Then simply type out the alphabet, in one long string. You'll need to type it at first in whatever your default font is, and then switch it to the new stencil font. Make it the size you want. Then do Path menu > Object to Path. And then Object menu > Ungroup.

Now, each individual letter is a vector path, and ready for you to do whatever the next step is :D

If you still want to make your own letters, we can help you work out a less painful routine. I still don't have any idea how your letter 'A' became so many pieces. Maybe making a grid out of paths was part of the problem. Inkscape has grids that are not part of the drawing, that allow for very precise placement or alignment of elements. (The grid you made with paths is actually part of the drawing.) There are 2 kinds, rectangular and axonomic (isometric). So using one of those, or maybe Guides instead of a grid, would be a good first step.

Well, I won't go into details about the drawing process, unless you indicate that's what you want to do.

I don't know if you want to draw the hollow space where the letter is supposed to go. It would be fairly easy to do with Inkscape, so that it simulates depth. And the letters could be made to appear to fit into them. Anyway, let us know how it goes. :D

Honjiida
Posts: 3
Joined: Mon Apr 18, 2016 10:59 pm

Re: Creating Stencil Alphabets

Postby Honjiida » Wed Apr 20, 2016 5:44 pm

Thanks for taking me through this. I would rather go the "free font" route and edit them. I improvised the the grid as you suspected (out of paths then grouped them). Yes, I would like to draw the hollow space where the letter is supposed to go!

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Creating Stencil Alphabets

Postby brynn » Thu Apr 21, 2016 11:08 am

I'm working on a tutorial for the hollow space. I made one for embossed a while ago. And I've been wanting to make a tutorial for engraved text ever since. Well, really, it's basically made the same way, and it's just the coloring that changes the 3d illusion.

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Creating Stencil Alphabets

Postby Lazur » Thu Apr 21, 2016 12:14 pm

So many things mentioned yet it still unclear to me what exactly you trying to achieve.

Do you want objects with transparency/"holes" shaped like letters as in a similar game?

Are you after raster or vector images for the game?

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Creating Stencil Alphabets

Postby brynn » Thu Apr 21, 2016 1:42 pm

From what I understand, it will be sort of like a jigsaw puzzle, except that the pieces aren't interlocking. The player drags a letter over to the space where it fits. I guess is for very small children (to teach alphabet and mouse skills at the same time).

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Creating Stencil Alphabets

Postby Lazur » Thu Apr 21, 2016 4:15 pm

There are several ways of doing so. At this point I'm not even sure if it is necessary at first place for such a game.
Like if it needs just a visual backdrop and describing the hotspot by a bitmap, why a white text over a black background wouldn't work.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Creating Stencil Alphabets

Postby brynn » Sat May 28, 2016 10:46 am

Well, I don't know if you're still interested, but I finally finished the tutorial.

http://forum.inkscapecommunity.com/inde ... article=54


Return to “Help with using Inkscape”