사용자 정의 픽셀 글꼴 만들기: 단계별 가이드

사용자 지정 및 내보내기를 위한 웹 기반 도구를 사용하면 픽셀 글꼴을 쉽고 재미있게 만들 수 있습니다.

### 나만의 픽셀 글꼴 만들기: 단계별 가이드
* 🖥 이 동영상에서는 글꼴 파일을 지원하는 모든 소프트웨어에서 사용할 수 있는 **픽셀 글꼴**을 만드는 방법을 살펴봅니다.
* 🎨 이 과정은 사용할 웹 기반 소프트웨어의 미리 보기와 **글꼴 디자인에 사용할 드로잉 파일**을 준비하는 방법으로 시작됩니다.
* 📝 새 파일을 만들고 흰색 배경에 **200x200픽셀**로 설정한 다음 다양한 글자 디자인을 실험해 보겠습니다.
* 📏 글자를 만든 후에는 **글꼴 생성 도구의 요구 사항**을 충족하기 위해 글자를 그리드 시스템으로 구성합니다.
* 🔤 필요한 모든 문자와 기호를 그리되 **그리드 내에 올바르게 맞고 소프트웨어의 문자와 일치**하는지 확인하는 것이 중요합니다.
* 💾 글자가 그려지면 **그리드를 이미지로 내보내고 글꼴 생성 도구로 가져와 설정을 조정**하여 적절한 정렬이 이루어지도록 합니다.
* 🔧 최종 글꼴을 TTF 파일로 내보내기 전에 **글자 간격 및 메타데이터와 같은 추가 조정**이 이루어집니다.
* 📚 마지막으로, 이 동영상은 시청자들에게 더 많은 학습 기회를 위해 스킬셰어를 살펴볼 것을 권장하며, **선착순 1,000명에게 2개월 무료 체험**을 제공합니다.

wrote to you bicycles here. Hey guys and workmen. In this video, we're going to talk about how you can create your own pixel font that you can then use in any software that allows to use a font file. Some things we're going to go over in this video is a little preview of the software that I'm using, how to prepare a file for drawing a font, then we're also going to make a font and export that out as an image, and I'm going to show you how to import that image into the software that we're using, do a few settings, and export it out, and there we are. We then have a pixel font. So the first thing I want to mention here about the tool that I'm using is that it's all web-based, which means you can just do it on your browser. Secondly, I don't want to go too much into details about it yet if I want to make a font first and help you set up a font that we can then export into the tool here. So let's do that all.

right so you can see here I already have a fund that I made earlier, but I'm gonna help you set up a completely new file so you can draw a fund from scratch. I'm gonna go into this as you don't even know how you want your fun to look yet, and we are going to experiment and figure out how we can find Desai's that we want to make and set up the whole file. Now I'll be using a sprite with my own personal theme on it, but you can really use any artist's effort that allows you to draw in pixels. Now what I like to do when I have to come up with something, and I don't even know how I want it to look yet, is that I just create a new file and make it fairly big. So let's make this one 200 pixels by 200 pixels, and in this case, I want to have a white background just to make it a little bit clean. And you can see in my case here, I have a grid on, so I'm gonna turn that grid off just to make it as

clean as possible. I want no distractions, the blank canvas, a lot of space so I can experiment, and I'm just gonna try and draw a few different letters. So, I usually try to do one of the more white letters just because you want to make sure that the lengths of the widest letter that you make can fit in there. So, here I'm just kind of experimenting. I don't really have any ideas, just kind of trying different things out, and you know, doing them in different styles. I can kind of come up with something that might look interesting to me, and then once we have something that we like, we can then turn that into a pixel font. Now, when you've drawn a bunch of letters in a style that you like, what we want to do is now separate it into a grid system, kind of like we've done over here, because the tool that we're going to be using needs a grid system like this. So, what I like to do to set up a grid system like this is that I take the letter that I really like here, just kind

of paste it down beneath, and what essentially we want to do is go down and pick some kind of light grey color here. And then we're going to encapsulate the letter here, so you want the letter to rest all the way on the left side of our grid here. But you also want to give it a little bit of space beneath and on to the right and above. Now, the reason we leave a little bit of space beneath it and above it is because that if we go in here and take a look at my preview grid here, you can see that the letter R is resting on the blue line and hitting the top of the red line. But on the other hand, something like the letter Q here needs to go a little bit beneath the line of where it's drawn on. And we also have some symbols that need to go above the top of where the letters are. So, that is the reason we leave a little bit of space above and a little bit of space below, depending on the size of your font.

you might leave more than one pixel beneath here, but because this is a very tiny font, I think one pixel above and below will be fine. So, the next thing I want to do is copy this grid here and paste it next to the other one, and I want to make sure that the right side and the left side are matched together. And then, I'm going to remove the letter M in here, select a very light red and blue color just to kind of show where the bottom line and top of the letter is. So, now that we've finished our little grid box here, I want to select it, copy it, and place it by itself. Depending on what software you can use, there's different ways that you can quickly sort of merge them together and make a huge row like this, but what I like to do is just kind of copy-paste them a few times, and it doesn't matter how many columns and rows that we have as long as they just merge together and all have the same size. And here we have a grid where we

can start drawing all our letters in, but you may be asking what letters do I actually need to draw, and this is where I want to go back into the tool, the website that we're using to make our font. Because if you look up here to the top left of the menu, you can see a bunch of letters and symbols, and you can see those are corresponding to the image down here that is then turned over to a font here to the right. You could, in theory, just follow all the symbols that you see here, and if you need any additional symbols, what you can do is just make a new row down here below and type whatever letters that you need. For example, in my language, we have three letters called A, O, and I. I could type them in here, and then they would correspond to the next row beneath all this symbol here. But you can also just go in here, remove all of this, type in ABCDE, and so on, the whole alphabet. Now, that's gonna make a little more sense in a bit when we come back to the software that was

just some additional information that I really wanted to inform you with before we start drawing in all the letters. Now, I'm not gonna draw all the letters in here on stream, but I'll give you a little bit of a few tips on how you can export this out and a few things to keep in mind before we move on. So, once you're done drawing all the letters inside your grid here, and we need to export it out, it doesn't really work if we have it inside a huge image like this where we have a bunch of stuff up here, we have some things on the side. Essentially, what we want to do is copy this entire grid here, and then we're going to create a new file. And once we copy something and create a new file, the new file usually has the size of the copied segment that we have, meaning when I press ok here and I paste my image in, if you automatically fit into this. And this is a thing that's pretty universal in most software, so even if you're not using right, this should work anyway. I'm gonna

let you fill out your entire fun sheet here, and I'll be using my test sheet to progress with the video. So, once you're done drawing all the letters, numbers, and symbols that you want to have in your fund, you want to save this. And you can see here I already have a file, so I just override it here. They have the saving. We want to open up the website that we're using here. So, once we are at the website here at the top of the screen, there should be a button called Pig image. And then we just select a font that we drew earlier and import it in. So, we imported the image, and things are starting to look a little bit weird. This is where we want to set up all the settings so that it fits to our image that we made over here. To the right, you can see a preview of the font in action. If I zoom in here, you can see this is the image that we imported. And as I'm hovering my mouse over, it's showing these sort of shapes. You can see that's representing the

letters that we have up here. So, essentially, what I want to do now is go up here and type in all my letters that I have here. So, ABC. And it's very important as I'm drawing them in here. You can see I'm also making sure that they are at the same row. Right, there we go. That should be all the letters that I have in my image. You can see I have some free space down here. That's completely fine. You don't have to fill out the entire sheet. You can leave some empty space if you want to. I want to make this little box here a bit exactly with my image. If I zoom in here and look closely, you can see it's definitely not the right size. And the way we can change the size of this box here is by using these parameters over here. So, you can see here if I scale up my width of the box here, it should fit inside here. And the height, I want to take that down one, it seems. And now it seems like it's fitting. Now you can see

over here in the preview, it still looks a little bit weird, and that's because the font that I made only has capital letters. So, you want to make sure that you make both the capital letters and then lowercase letters so we can actually write something over here. So, let me try and write something like hello, how are you? and this is just my little preview font, and you can see it seems to work now. Now, we made sure that the tool here is reading our image properly, but there are just a few more things that we want to do. If you look up here to the left, you can see we have a few more tabs, and if I go in here to the second one, it's just some more additional information about your font. There was one error I ran into this as I was testing out all my fonts, and you can see here if I go over and make a new row, a type, I am pretty good, you can see that the letters are all mashed together, and there's not enough space between them. If you run into that

same issue as me. You can do that over here in this menu here called descent, and you can turn it up and down to increase the spacing between the letters. Now, the last tab we have here at the top is the meta tab, and this is where we say both the information inside the font about who made it, what it's called, and those kind of things. So, you just want to go and fill this out. Now, in this case, I'm gonna call this one for ribbies, rip E's handwriting, and the hasta would be more marked, and I'll call this one for 0.1 because it's not finished yet. I still have a few things that I want to do with it. A description would be a cute little pixel font, and if you want a certain license or permission for the font, you can fill that in here. My website would be wwm art martinet, and there we go. Now, we have essentially done all the things that we need to do a fund, and the last thing we need to do is export it out, and we do that by clicking

the button up here to the top right called Save TTFN, and you simply save it where you want to save it on your desktop. I do want to mention one thing. If you do plan on upgrading your font with more symbols and letters later on, I would highly recommend using this export button up here and saving JSON files along with the font. The reason we want to do that is if I reload the page here, I load in the image again, you can see all the settings are wrong. You can then import in the settings with the JSON file to get all the information that we just filled out, and this will make it a lot easier if you want to expand on your font again. Anyway, thank you so much for watching today's video, guys. I hope it was informative for you, and you learned a few things about how to make a pixel font. Now, if you want to share anything you make with me, feel free to tweet it at me. There is a link to that in the description, along with my other social medias, such as Instagram.

Discord and also my Twitter stream almost daily. Although on Twitch, it can be a little bit of a too wild of a ride for some people. I'm not sure you're ready for it. But lastly, I want to give a big thanks to this video's sponsors, Skillshare. Skillshare is an amazing online learning hub with over 30,000 courses for creative and curious people. You can find courses on anything from illustration, drawing, videography, even game development and business. So, it's a great place to get started learning some new skills and improve your existing ones. Now, I really suggest a course by Simon Chan's Overrun Skillshare, where he goes into details on how to create a cool particle explosion effect that you can then use for your games. Take his time and really explain the process that it goes through to create this cool effect. I mean, honestly, you can never learn and improve enough. And the great thing is you can do all that today without spending a single coin if you used my link in the description. The first 1000 people will get two months.

for free with unlimited access to all the skills your courses that should give you plenty of time to really soak in that everything skills you have to offer. So, what are you waiting for? Check out skills here today and level up your game. That's really going to be all for this video. Thank you so much for watching, everybody. If you like what you saw, make sure to give the video a like. If you want to see more content like this, make sure to subscribe. If you want to find any additional information, check out the description or the top pinned comment. But that's it. I'll see you in the next view. Bye. [Music]

Make a Pixel Art Font - Beginner Tutorial

MortMort

이 동영상 튜토리얼에서는 웹 기반 도구를 사용하여 픽셀 글꼴을 만드는 방법을 설명합니다.

그리기용 파일 준비하기, 다양한 글자 스타일 실험하기, 글꼴의 그리드 시스템 설정하기 등을 다룹니다.

이 과정에는 글꼴을 이미지로 내보내고 소프트웨어로 가져와 최종 조정 및 내보내기가 포함됩니다.

이 과정에서는 밝은 회색을 선택하고 글자를 위한 격자를 만들어 위, 아래, 오른쪽에 공백이 있는지 확인합니다.

그런 다음 그리드를 복사하여 측면과 일치하도록 조정하고 밝은 빨간색과 파란색을 사용하여 글자의 위쪽과 아래쪽 선을 표시합니다.

마지막으로 그리드를 사용하여 글자를 그리며 필요에 따라 기호 또는 전체 알파벳을 추가할 수 있습니다.

글꼴 디자인 내보내기 및 가져오기를 위한 팁

그려진 글자의 전체 그리드를 복사하고 내보낼 크기에 맞게 새 파일을 만듭니다.

모든 글자, 숫자, 기호를 그린 후 파일을 저장하고 필요한 경우 덮어씁니다.

웹사이트의 '돼지 이미지' 버튼을 사용하여 그려진 글꼴을 가져온 후 이미지에 맞게 설정을 조정하고 글꼴이 실제로 작동하는 모습을 미리 봅니다.

화자가 이미지의 모든 글자를 입력하여 같은 줄에 있는지 확인합니다.

이미지에 맞게 상자의 크기를 조정하고 글꼴에 대문자와 소문자를 모두 만들 계획입니다.

또한 화자는 글자가 서로 섞여 있고 글자 사이에 공백이 없는 문제를 해결합니다.

픽셀 글꼴 만들기: 단계별 가이드

"하강" 메뉴에서는 글꼴의 글자 간격을 조정할 수 있습니다.

'메타' 탭은 글꼴의 이름과 설명 등 글꼴에 대한 정보를 입력할 수 있는 탭입니다.

향후 업데이트 및 설정 유지를 위해 글꼴을 내보내고 JSON 파일을 저장하는 것이 좋습니다.

스킬셰어로 새로운 기술 배우기

스킬셰어는 창의적이고 호기심이 많은 사람들을 위해 일러스트레이션, 비디오 촬영, 게임 개발 등의 주제를 다루는 30,000개 이상의 온라인 강좌를 제공합니다.

게임 개발자에게는 입자 폭발 효과 제작에 관한 Simon Chan의 강좌를 적극 추천합니다.

설명에 있는 링크를 통해 가입하는 선착순 1,000명은 모든 강좌를 2개월간 무료로 무제한 이용할 수 있습니다.