PIXEL ART in Photoshop (Tutorial)

[@Brackeys]

To those of you saying that you should always use PNG over JPG in this case: You are completely right! JPG can cause compression artifacts and is meant more for photos. Apart from that, hope you enjoyed the video! :)

[@sinnistar-senrufustudios7075]

I knew of some basics but yeah that definitely helped me figure out how to enlarge it without the blurriness xD huge help now! I couldn't figure that out for the life of me lol.

[@Ezio727]

please i need your help ! i need to bend(curve) Image UI in unity please reply me. Sorry my poor language.

[@Ezio727]

#Brackeys

[@TitoOliveiraDesign]

Well, there's a distinction you can make here. In the video, when you mention that the small image with 1:1 pixel size is too small, which is fine for importing into an engine, that image has to be png, because you're importing to an engine to be used in a game. Then you scale up the image for it to be better visible when showing it to people and posting on the web. This new scaled up version can be saved in jpg. Because you're not gonna use it in the engine, you're just gonna use it to show on the web.

[@kh777s7]

Brackeys, hey i hope u make 2d game for chess and show me how it can be done please help

[@musicdudejoe263]

If anyone is having a problem with the grid not aligning properly, go back to preferences and change the grid from every 1 pixel to another number and back to 1 pixel. It allows Photoshop to recalculate the size of the canvas and grid. Worked for me.

[@notfakemail7613]

Thanks!

[@lauratorres897]

a life saver. im using cs5 so i wasn't sure how to fix that problem

[@lauraportillo8193]

thank you!

[@barbaranascimento4688]

life saver 2

[@battlemode]

Thanks for the help!

[@mrkeencool]

Even 6 years later, this is more helpful with getting started than 99% of the other videos. You actually show HOW to draw in Pixel Art Style in PS. THANK YOU!

[@Khaktos]

>makes pixel art >saves as jpeg

[@Tcrafta]

why

[@astorinthenight]

​@@commanderleo this is not the only reason not to save in jpeg

[@lavaking5990]

@@commanderleo compression artifacts

[@kujtimalimaj8838]

Crap

[@jorjicostava2913]

he painted the background tho

[@YousifPhotoshopTutorials]

i came back to this video after nearly one year ♥ still awesome and helpful ♥

[@syed.syazwan]

yes

[@filipefealves]

Instead of using the bucket tool to fill an entire layer you can use ctrl + backspace to fill it with the background color and alt + backspace to fill with the foreground color. I think it's very useful, especially when you have to use the gradient tool and doesn't want to go back and forth between the bucket tool and the gradient tool all the time.

[@thaddeusheitmann3886]

This is a fantastic walkthrough! Most walkthroughs I see have all the tool preferences already setup and just focus on creation. You made it easy for someone who just downloaded photoshop to understand and avoid hours of frustration! Thank you!

[@TheButtonSlasherZ]

Crazy useful. Thank you for telling us what keys to press. It's SO helpful for beginners!!

[@redgeoblaze3752]

"Now it's all up to you to get creative and have fun" Me: "shit. how do I do those things?"

[@shado5491]

If you learn those things can you teach me as well?

[@notsopolitecub4841]

/gamemode creative

[@michaelmorozov3446]

Your way of explaining is amazing, everything I'd want from a tutorial developer. Clear, swift, thorough.

[@hardbargains]

7:07 you slapped Enter so hard jesus christ

[@someone4422]

Ehrunz 😂

[@dogbert02]

ENTER BUTTON ABUSE

[@baileysubliminals7192]

*ENTER* **keyboard explodes*

[@_ilikeblueberries_]

If u flip 707 it says LOL.

[@wickheadthered]

ENTER

[@timburgess1725]

Oh my God! This guy! I've used photoshop for over 2 years and he already showed me about 8 new things in photoshop in the first 3 minutes! I rarely ever subscribe to tutorial channles but this one's got my subscription!

[@holmbergen]

PNG > Jpg

Ah, I see. You are a man of culture as well :D

[@RupluttajaGames]

in file size, indeed it is.

[@DxBlack]

Quality, scalability (depending), and of course, doesn't degrade when copied...until some idiot saves it as .jpg.

[@DeepDarkier]

depends on the content, sometime jpeg make for a smaller size with same quality

[@Thronecrusher]

BMP!

[@reinalto]

Your video is without a doubt the best one I could ever find her! Sometimes people forget to expose the little details, and you made sure to explain to us everything. Love you man, thank you!

[@YousifPhotoshopTutorials]

AWESOME ♥♥♥♥

[@Its_arabic_quotes]

شتسوي هنا

[@calimber]

ya

[@James-rc1tw]

Honestly, that was one of the best tutorials I've ever seen - at no point did you forget to explain what you were doing, making it incredibly easy to follow. Well done, man. Excellent tutorial.

[@makoala8881]

well he forgot to explain why my crop tool clips in relation to my screen resolution and doesn't clip to the image resolution, which sometimes makes me crop between a single pixel on the canvas, probably i didn't make myself clear with this.

[@unrealenvironments-speedle782]

really useful and interesting!

[@erikhjortsater5461]

Unreal Environments - Speed Level Design Agreed

[@RexArtTv]

Unreal Environments - Speed Level Design Do you go to uni?

[@unrealenvironments-speedle782]

no

[@Maggiethegsd]

I was looking for pixel art tutorials for the recent jam, and here it is, the quickest, most efficient and no bs tutorial in the world

[@user-mx8hu2cz1h]

Oh my god, thank you! Finally somebody explains everything clear and easy:)

[@noelle.24]

This is such a helpful video, the way you explain it is perfect, I've never been so engaged in a tutorial video that I managed to watch it the whole way without speeding up or skipping anything. Thankyou!

[@vakusvakus2828]

legit started making pixel art, 10 minutes later Brackeys releases pixel art tutorial... what kind of magic is this?

[@princesa_lina]

Bill Cypher is working with bracekeys 😂

[@ayayron8221]

I've been wracking my brain over how to get such clear lines even after making my own square brush and shrunken down canvas size. This video is a godsend. Thanks for the tutorial!!

[@jamieshanks5182]

Brackeys, this video is perfect. It captures everything I've needed (and wondered about) in regards to prepping Photoshop for Pixelart. It also covered all the issues i'd come across! Thanks a lot for taking the time to help us out :)

[@izzes]

My friend, you have simply fired my pixel art admiration and enthusiasm with this video. For the longest time I wanted to attempt to draw pixel art, but never could figure the settings... thank you very much! Quick, easy to grasp the overall idea and how to work. Loved it!

[@sofa3496]

Please don't save pixel art as jpg, this method compresses the file, changing the pixels in the end. When doing pixel art you select the pixels with precision, you don't want the end product with low quality deforming the pixels. If you don't want to save as png, use gif.

[@reinamorgana]

Oh my god, one of the best photoshop tutorials ever! Fast, easy and well explained. You're great, please keep doing this videos!

[@triforcecourage3990]

I love your videos - they are so inspiring. And your sympathetic smile every time you start a video! 👌🏻 Keep it up.

[@Wolf-E-Romeo]

So, with in 6 and a half minutes my mind was already blown, I have learned more in this video than I have the last 2 semesters of my GAT college courses combined. Thank you so much!

[@bigjiggly7490]

That's so weird, everytime you upload a video like this...I'm always doing something very related...

[@arpitbaranwal1366]

that's called good selection of video to make.

[@xqnack]

Damn this was 6 years ago

[@sefikyilmaz]

It was really helpful... Especially "resampling settings" were a complementary detail. Thank you.

[@nikitaprodanov5219]

I know I`m a bit late but... resizing the drawing from 40x40 to 256x256 is not worth it because 256 is not a multiple of 40. It makes your "pixels" not square but rectangle (every pixel becomes a 6x7 copy). Better use from 40x40 to 280x280 which keeps the absolute same proportions of 1px. to its 7x7 copy. Except that the video was great. Keep the great work👌

[@mahmutucak2293]

But he cropped the image so it's not 40x40 anymore. Maybe it's not also multiple with 256 but am i wrong?

[@jettmanas]

@@mahmutucak2293 I have no idea on sizes.

[@CubeHead]

2:47 click on the tiny what?

[@plomek4706]

didnt expect cube channel here lol

[@amburger1984]

huh

Wouldn't be a png better for digital or abstract art? JPG is more for photos/pictures or where edges doesne't have to be very sharp. Png is better for digital created images with sharp edges etc. It is also loosless copressed.

[@floriandury5720]

Png is best used for the web, it's also good because it allow transparency, tbh i realy like png myself but jpg isn't that bad if you don't reduce the quality that much ;)

[@Crisisdarkness]

depends, jpg uses less memory, but png allows you to have images with transparency, depends on how you use the image, you should choose one or the other

[@TitoOliveiraDesign]

The content of the image is not as important for defining which format to use, the medium where you'll use it, is. For example, a image for web that doesn't require transparency can be covered by jpg 99% of the times. Doesn't matter if you're displaying game graphics, a photo picture, or digital art. Then for game assets, png always, because of the alpha channel and the lossless compression.

[@fluent_styles6720]

Tito Oliveira Yes.

[@PotatoDash]

Q

[@gray41462]

Thank you a tonne of information in just 8 minutes, no waffling, no overly complicated instructions, straight to the point.

[@murilo4271]

Dude, you're a genius, thanks for helping me out in this tutorial

[@ervinfowlkes8326]

OMG thank you so much, creating pixel art has been a dream of mine for years, but life got in the way then I got intimidated - this was SO easy to follow along. I feel like trying more. Thank you! I'm not a game designer just a dude that loves this art.

[@gamenetic6426]

Why Pixel Art tutorials have so beatiful images and so underwhelming teaching ? I thought we would be making that damn house

[@RazvanLuta]

Try this out, the final product is a bit more ambitious and I'm making 9 parts of it. It's the last video on my channel, the one with the castle: kzbin.info/door/mm3zLIgBVHteyUS6mCu-gQ

[@foxinapothecary]

Hahhahahhah

[@noktuernal]

I have wanted to try pixel art for awhile but I had no idea how to configure PS to cooperate. This is the most helpful, concise and informative video I’ve come across! Thank you for hitting so many points throughout. 🖤

[@RupluttajaGames]

Has amazing pixel art thumbnail. -> EEHEEEY Mahriooooo

[@Ginebraxt1]

I love how straight-forward and useful this is. Thank you!

[@punkbone1]

How do you determine how many square you want to use for details / resizing images from smaller to bigger? And thanks for this video it really helped me.

[@YousufEslam]

When I clicked the pencil tool it just looked like a circle why did someone like this 2 months later

[@jacobsc2866]

I liked this four months later

[@BurnerAccount777]

*5

[@BunnyRabbit.]

6

[@apollo5971]

6 months

[@maxotriedv2106]

6

[@mubeendewan2287]

for those that have had the same problem as me where your pixels are places a few blocks away where where you clicked and its not very accurate then to go "view" -> "snap to" -> and deselect "grid" that worked for me, hope that helps

[@Nazhorous]

thank you !

[@Mela.mp4]

Still doesn’t work for me :(

[@goldenpiece7087]

I liked this video 2 years ago. Now I come back to the video just to see is my like still here. :)

[@FelipeKana1]

Damm. Great video. Direct, concise, absurdly useful and practical. Subscribed

[@gretaprisby5798]

How do you keep the "nearest neighbor" crispness when transforming? Thanks for the great tut!

[@niqichui183]

Thank you so much! People like you who take the time out of their days to create tutorials are godsends. Stay angelic, man; awesome vid. Excellently explained & straight to the point. You earned a subscriber!

[@albarnie1168]

This is a nice tutorial, but some of the methods he uses are just fundamentally wrong, or inefficient if you're going to be using photoshop for game development. First of all, when creating a file, setting the background Color to transparent will save you a ton of hassle, especially if you are using it for game development. This also means that you can modify the Color of the transparent background to be as high contrast as you want. Another thing is that you can change brush size using the [ and ] keys, this will save you a ton of time. You can also get to the paint bucket tool with g Last of all, with pixel art, NEVER save to JPEG, as it can create visual artifacts in the image, not good for anything to do with pixel art.

[@Yipper64]

well, not just for game development.... even just making stills or animations.

[@iKevinF]

Would you recommend PS over illustrator for pixel art? I’m asking because I would like to start getting into pixel art and I feel illustrator may be better because you can resize the image without worrying about quality.

[@Yipper64]

Kevin F Illustrator is probably the worst program out there for pixel art... if you care about image quality in your assets, then you arnt doing low image quality pixel art.

[@iKevinF]

Adam Eason well what I mean is, if I wanna make a pixel art wallpaper for my computer, say HD 1920x1080, what would be best to use? And when I said quality, I meant just not blurring the image when enlarging it. I just want it to stay looking sharp. I thought illustrator because it’s vector based. Plus, I’m looking at making scenes rather than just individual characters.

[@Yipper64]

Kevin F you would still want to go with photoshop, do not get blurring, you need to make sure whenever you scale it, it is in the scale type of "nearest neighbor" and you should be fine. 'vector based' is saying its specifically not raster based, and in order to make pixel art, you need a raster image.

[@mahfuzrahman5316]

this video has a lot of Photoshop basic, not only pixel art, i love your channel and the way express everything, great skill

[@FoolsLynx]

I'd use aseprite it is designed for pixel art and allows for doing animation easily. Also with pixel art it is a bad idea to use jpeg for stuff except possibly backgrounds. PNG is the prefered standard for a lot of pixel art based games.

[@tmtygnz]

me to

[@xemerplay8304]

I was watching one of your tutorials and I saw you use a custom sprite so I decided to make one myself quickly and googled how to make pixel art with photoshop and I clicked the first video. I was really surprised when I saw it was a tutorial from you. every time I search for tutorials I see that you already made one for my need.

[@sapuseven6119]

Don't use jpeg for any images except real photos

[@シェパードジャッキー]

Easily one of the best beginner PS tutorials I've ever seen 🔥

[@edrenabatony]

Хоть я и не понимаю, что ты говоришь, но ты чертовски крут.

[@andrespadilla2320]

jaja si xd

[@merrick20]

Even after the retirement I'm still finding things I can learn from past tutorials... The world needs you back!!!!

[@P4TTL2]

The one thing that pisses me off is that i'm really good at copying art but just making it off the top of my head i can't do

[@ab2426]

all the tips and techniques you mentioned make this video worth the million views you have. you are an AMAZING TEACHER. all the struggles I would have gone through if it wasn't for the small tips and tricks you gave.... man this video is a lifesaver. gonna try out my first pixel art now. Thanks so much for this video

[@samuelkemp6849]

Roguelike series!

[@sirlefuppe]

Thank you very much. I was looking for pixel art tutorials for my game project. This helped me A LOT

[@predator412569]

why does my pencil not snap to the grid? I checked and snap to grid is on in the view, it also seems like my brush is slightly bigger than 1px even tho it is set to 1 px and i did the basic brushes thing. pls help :(

[@predator412569]

I should say my pencil is snapping to something and it is a uniform grid, however the grid I made following the exact steps of this tutorial does is what it is not snapping to

[@glaubercavassani]

I have the same problem. Did you fix it?

[@predator412569]

no sir I have not, eventually gave up and just turned on the pixel grid and zoomed in. let me know if you get it fixed

[@oussemahassini8207]

me too

[@argentcrow87]

Josh its been 4months but have you fixed it?

[@augustoh8852]

1. It is very Useful for me and that is what am i looking for. 2. The explanation is funny and clearness, it does not boring at all. 3. It's only cost me 8:39 minute to let me know how to use Photoshop for pixel-art. I subscribe the channel for your great job and just vote the video. At last, THANKS!

[@theboredguy2908]

Yeah, now make a video tutorial to get the pixel perfect effect on Unity...

[@Alex-fc7ob]

The Bored Guy, it will be great

[@tehGabriol]

Select the sprite and change the filter mode in Inspector from bilinear to point :)

[@Awakia1]

Madkyp, that's not what pixel perfect is. What he wants to do is have consistent pixel sizes for his sprite art. Without a system in place Unity will naturally not scale or position the pixels of the pixel art in a way that keeps them consistent in size.

[@mounkeygirl]

I rewatch the video whenever I need to configure photoshop to or from pixel. Thank you very much for a clear step by step tutorial.

[@sufyaanali]

2:47 Click on the Tiny what now?

[@ShrekPNG]

car gear?

[@sufyaanali]

@@ShrekPNG *Tiny cock here

[@dgeorgi14]

I usually don t comment on these but this was one of the best tutorials i ve seen

[@Ar7ific1al]

As a side note, please don't use JPG sprites. Even at "max quality" compression, JPG introduces artifacts which may be made even more obvious when using compression in Unity. Shaders, effects, etc. may also make JPG compression artifacts more noticeable...

[@lbprvt1]

This helped so much I usually get stuck on saving and settings with 2d/8bit but this got me right to the end of my nft cheers !

[@graeme5223]

Hey for anyone who is looking to get into pixel art in more than just a hobby, I recommend you get Pyxel Edit (pyxeledit.com/) It's only 9 dollars but is PERFECT for pixel art, it does everything far better than what photoshop could do with pixel art.

[@JBloodthorn]

pyxeledit.com/ link because youtube includes the end bracket

[@Loqrin]

I own it and can definitely say it's one if not is the best program for Pixel Art.

[@gamesthatiplay9083]

I recommend Aseprite. Seems a lot easier to use.

[@fluent_styles6720]

Thanks for the recommendations

[@orangeknife4220]

The only thing Aseprite is missing is a tileset editor

[@SevillaMiguey]

Hello! So I tried out Pixel Art and thanks to your tutorial I did learn *well somehow considering I'm still a beginner* I learned a lot!. In addition, I appreciate your tutorial because it is well explained and the instructions are concise. Cheers to ya lad

[@GamingMineCraftful]

Piskelapp.com is dedicated to make pixelart, and does noet require a "beefy" pc to run photoshop ;) its a decent alternative in my humble opinion :D

[@JamDoggie]

I can run photoshop on my crappy laptop just fine

[@GamingMineCraftful]

JamDoggie well, im assuming your laptop doesnt have old intel graphics and a pentium processor. Cus that would suck xD but srsly tho, go have a look at piskelapp

[@JamDoggie]

JustABlitzprank it does, but you would be amazed at what 6 Gb of ram can do for you

[@GamingMineCraftful]

hahaha true

[@Abby_Liu]

JamDoggie :'( my laptop is 7 years old and runs on i3

[@의문의남자]

Thank you so much!!!!!!!!!! I solved the 'erase problem'!!!!

[@anfstudios1479]

Brackeys: How to make Pixel Art Me: Time to pirate! lol jk, no and don't do that

[@lukeblaker5625]

Trying to crash course before I start my game arts course at Uni. I am such a noob at all this, but your videos always feel so welcoming to noobs like myself. Thanks :)

[@FranzbroetchenGaming]

I don't trust people with such clean desktops :(

[@jonathanmaynard2551]

Lol

[@AniketRajPhotographySpring]

Best explanation about image sampling to date!

[@hansmaulwurf9051]

Pixel art saved as jpeg? WTF????? Artifacts galore

[@lilacchild8401]

Wow, this is definitely one of the best tutorials! So much useful informalion for newies and nothing superfluous

[@varusername]

6:55 I’m so mature lmao

[@chirs.a2274]

Thank you bro, you helped me find something fun to do while quarantine

[@kenabisan4731]

And again, got baited by fake thumbnail

[@twodollarking8009]

Kenabis Tinnek thumbnail is from a mobile game called "Foxy Land"

[@rankoku2548]

For anyone wondering, the thumbnail art was created by Ansimuz.

[@todoxx]

They say how to make pixel art, not make a whole fucking complex pixel art step by step.

[@artbydhroov5527]

or GIMP

[@shamicentertainment1262]

That's not baiting.

[@goldenpiece7087]

This video brought me to your channel and of course game development. 😥 Brackeys is my most favourite youtube channel ever. I was going to take photo with you in brackeys studio some day. Good bye man! You really hit my heart as a teacher.

[@raainber]

Step one: delete photoshop Step two: reinstall photoshop because your'e probably gonna need it for other things Step three: install paint Step four: use paint Step five: clean your'e computer because you painted on your'e screen Step six: open paint Step seven: zoom in Steo eight: use pencil on the smallest size Step nine: do that until you got a pixel art

[@Pogal]

That made me laugh.

[@serinsarp86]

Wtf

[@nelgeor]

not funny

[@foxthebox5113]

@@nelgeor nOt fUnNy

[@splodgethedalmatian4038]

Such a good video. I used this to help me with my University work. Thank You.

[@gregormack-neal1401]

Shame on you. Pixel-art? JPEG? Get out of here.

[@animmalvat5187]

You are a great teacher, you just don't assume that viewer would know something and that's great. kudos to great work 👍

[@kimadej]

This was incredibly useful and clear, especially after years of looking at convoluted step by step guides on random blogs across the internet. Thank you so much!

[@AndarPlays]

Thank you very much for this tutorial. I had to transition from a mediocre Photoshopper to a Photoshop Pixel Artist recently. Your video explained pixel art in Photoshop very well and I appreciate it. :) God bless.

[@irlWIKKO]

I found this while browsing casually. Gotta say there are a few really useful tips in there. Especially the scaling step is very helpful. Thank you!

[@Quimper111]

Very good. Short and concise. It adresses the basics needed without unneccessary chit-chat or deviations. :)

[@selenajoe5748]

Thank you for the tutorial! I've been using Photoshop for 15+ years and am still learning new things :)

[@zilverman7820]

Hi Brackeys! thanks for this tutorial i can now make pixel art. thanks cuddos.

[@vicvancen]

Ah maaann ... I'm so thankful to live in this time. You my friend, rock !

[@dead0010]

Amazing video! Watching in 2021 and starting in pixel-art! Thanks!

[@luiscarlosart]

wow nice tutotial man.

[@nathanieleastick5714]

Great tutorial! thanks so much, just started a course in game design so subscribed aswell. thanks again.

[@commodusjudges]

Incredibly helpful! Thank you!!

[@estherassuied]

Thank you king, you answered everything!

[@sofystikitty9858]

Thank you so much for this video! You explained the basic of the basics that no other tutorial I found wanted to explain: how to prepare the canvas and how to save the image properly. Now I just need to train! :D

[@compi8111]

the resample strategy is what im here for! :) Thank you very much

[@coleymoley514]

this really helped me so much in making pixel art with photoshop !!!! many thanks 💗💗