PIXEL ART in Photoshop (Tutorial)
Вставка
- Опубліковано 3 лип 2024
- Learn how to create Pixel Art in Photoshop!
❤️ Donate: www.paypal.com/donate/?hosted...
····················································································
► Join Discord: / discord
♥ Subscribe: bit.ly/1kMekJV
● Website: brackeys.com/
● Facebook: / brackeys
● Twitter: / brackeystweet
····················································································
Edited by the awesome Sofibab and Lebonques.
····················································································
► All content by Brackeys is 100% free. We believe that education should be available for everyone.
❤️ Donate: www.paypal.com/donate/?hosted...
····················································································
♪ Baby Plays Electro Games
teknoaxe.com/cgi-bin/link_code...
♪ Shaving Mirror Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0 License
creativecommons.org/licenses/b...
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! :)
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.
please i need your help ! i need to bend(curve) Image UI in unity please reply me. Sorry my poor language.
#Brackeys
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.
Brackeys, hey i hope u make 2d game for chess and show me how it can be done please help
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.
Thanks!
a life saver. im using cs5 so i wasn't sure how to fix that problem
thank you!
life saver 2
Thanks for the help!
Crazy useful. Thank you for telling us what keys to press. It's SO helpful for beginners!!
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!
>makes pixel art
>saves as jpeg
why
@@commanderleo this is not the only reason not to save in jpeg
@@commanderleo compression artifacts
Crap
he painted the background tho
i came back to this video after nearly one year ♥ still awesome and helpful ♥
yes
Your way of explaining is amazing, everything I'd want from a tutorial developer. Clear, swift, thorough.
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!
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.
7:07 you slapped Enter so hard jesus christ
Ehrunz 😂
ENTER BUTTON ABUSE
*ENTER*
**keyboard explodes*
If u flip 707 it says LOL.
ENTER
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 :)
Oh my god, thank you! Finally somebody explains everything clear and easy:)
"Now it's all up to you to get creative and have fun"
Me: "shit. how do I do those things?"
If you learn those things can you teach me as well?
/gamemode creative
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.
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
Thank you a tonne of information in just 8 minutes, no waffling, no overly complicated instructions, straight to the point.
PNG > Jpg
Ah, I see. You are a man of culture as well :D
in file size, indeed it is.
Quality, scalability (depending), and of course, doesn't degrade when copied...until some idiot saves it as .jpg.
depends on the content, sometime jpeg make for a smaller size with same quality
BMP!
I love your videos - they are so inspiring. And your sympathetic smile every time you start a video! 👌🏻 Keep it up.
Oh my god, one of the best photoshop tutorials ever! Fast, easy and well explained. You're great, please keep doing this videos!
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!
really useful and interesting!
Unreal Environments - Speed Level Design Agreed
Unreal Environments - Speed Level Design Do you go to uni?
no
legit started making pixel art, 10 minutes later Brackeys releases pixel art tutorial... what kind of magic is this?
Bill Cypher is working with bracekeys 😂
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.
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.
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!
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👌
But he cropped the image so it's not 40x40 anymore. Maybe it's not also multiple with 256 but am i wrong?
@@mahmutucak2293 I have no idea on sizes.
Dude, you're a genius, thanks for helping me out in this tutorial
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. 🖤
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!
AWESOME ♥♥♥♥
شتسوي هنا
ya
That's so weird, everytime you upload a video like this...I'm always doing something very related...
that's called good selection of video to make.
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!
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.
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.
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.
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 ;)
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
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.
Tito Oliveira Yes.
Q
I love how straight-forward and useful this is. Thank you!
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!!
Has amazing pixel art thumbnail. -> EEHEEEY Mahriooooo
I liked this video 2 years ago.
Now I come back to the video just to see is my like still here. :)
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!
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!
How do you keep the "nearest neighbor" crispness when transforming? Thanks for the great tut!
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.
me to
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!
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
Roguelike series!
When I clicked the pencil tool it just looked like a circle
why did someone like this 2 months later
I liked this four months later
*5
6
6 months
6
this is the perfect tutorial for starting pixel art
i'm loving pixel arts, and i love this tutorial. it's so clear and precise
Don't use jpeg for any images except real photos
Why Pixel Art tutorials have so beatiful images and so underwhelming teaching ? I thought we would be making that damn house
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: ua-cam.com/channels/mm3zLIgBVHteyUS6mCu-gQ.html
Hahhahahhah
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.
Easily one of the best beginner PS tutorials I've ever seen 🔥
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
Хоть я и не понимаю, что ты говоришь, но ты чертовски крут.
jaja si xd
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
Brackeys, thank for the quick tutorial here, I've been painting in photoshop for a fairly long time but never did pixelart. Suprisingly easy tbh. Thanks.
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.
well, not just for game development.... even just making stills or animations.
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.
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.
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.
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.
2:49 I don't have the the options of "basic brushes". What do I do?
Yeah me too!
This video is... everything I needed and more. Thank you so much!! Can't wait to start my first pixel art!
Incredibly helpful! Thank you!!
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 :(
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
I have the same problem. Did you fix it?
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
me too
Josh its been 4months but have you fixed it?
Yeah, now make a video tutorial to get the pixel perfect effect on Unity...
The Bored Guy, it will be great
Select the sprite and change the filter mode in Inspector from bilinear to point :)
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.
Thank you bro, you helped me find something fun to do while quarantine
Damm. Great video. Direct, concise, absurdly useful and practical. Subscribed
Great introduction. Although I wouldn't use jpg for pixelart unless I wanted compression to shit on my work.
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...
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
It was really helpful... Especially "resampling settings" were a complementary detail. Thank you.
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
I can run photoshop on my crappy laptop just fine
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
JustABlitzprank it does, but you would be amazed at what 6 Gb of ram can do for you
hahaha true
JamDoggie :'( my laptop is 7 years old and runs on i3
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.
pyxeledit.com/ link because youtube includes the end bracket
I own it and can definitely say it's one if not is the best program for Pixel Art.
I recommend Aseprite. Seems a lot easier to use.
Thanks for the recommendations
The only thing Aseprite is missing is a tileset editor
Such a good video. I used this to help me with my University work. Thank You.
Thank you very much. I was looking for pixel art tutorials for my game project. This helped me A LOT
6:55 I’m so mature lmao
I don't trust people with such clean desktops :(
Lol
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.
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.
Pixel art saved as jpeg? WTF?????
Artifacts galore
Brackeys: How to make Pixel Art
Me: Time to pirate!
lol jk, no and don't do that
Very good. Short and concise. It adresses the basics needed without unneccessary chit-chat or deviations. :)
You're my hero! I've always wanted to learn how to do Pixel art in Photoshop, and you make it looks so easy to do! How you explain things... man! you're awesome! Totally subscribing to you!
And again, got baited by fake thumbnail
Kenabis Tinnek thumbnail is from a mobile game called "Foxy Land"
For anyone wondering, the thumbnail art was created by Ansimuz.
They say how to make pixel art, not make a whole fucking complex pixel art step by step.
or GIMP
That's not baiting.
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
That made me laugh.
Wtf
not funny
@@nelgeor nOt fUnNy
Wow, this is definitely one of the best tutorials! So much useful informalion for newies and nothing superfluous
It's surprisingly easy, fun, anddd so satisfying, THANK YOU!
Shame on you. Pixel-art? JPEG? Get out of here.
Super helpful! Thank you so much for the video!
Very useful first timer video, gives the exact things needed to start. Thanks!
Super useful! Thank you!
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!
Wow, thank you! You just answered every question I had and taught me to do this in under 8 minutes.
Great tutorial! thanks so much, just started a course in game design so subscribed aswell. thanks again.
10/10 video. everything i was looking for was here... cheers 🤠
Excellent tutorial! Thanks
this video is still so useful. Thank you so much!
This is Helpful thanks Man! Now i can design Video Game Character Sprites for games.
Amazing video! Watching in 2021 and starting in pixel-art! Thanks!
Thank u man! Your vídeos are awesome!
the resample strategy is what im here for! :) Thank you very much
Very clear ! Thank you !
Thanks a lot Brackeys!