Pixel Art Class – Intro to Game UI
AdamCYounis
Views: 55039
Like: 2687
Heya, Pals. This one is pretty theory-heavy and covers a lot of ground in very light detail because there’s a lot of it. Next week we’ll go into specifics on techniques for the art side of UI (texturing, animation, colour use, etc). Until then, enjoy!
0:00 Introduction
1:40 Basic UI Components
5:42 Navigation & Input
9:10 Feedback, Affordances & Skeuomorphism
13:23 Examples in Aseprite
19:00 Creating Visual Hierarchy
22:25 Applying Style & Theme
27:06 Animating Button States
—-
This video features clips from my stream. Catch it live: Mon, Tues, Thurs and Fri 1-6pm AEST.
Twitch:
Twitter:
Discord:
Become a Patron at
Check out my game Insignia at
Later, pals!
11.01.2022
First, you’re channel is so underrated keep going man
2
Lov u Adam
you are an absolute legend keep doing what you do.
Will there be advanced UI tutorials？
I didn't think I needed this one, but I definitely did!
Such a quick edit! This was on stream today :O
Nice one
Wonderful intro. Very helpful!
This is a fantastic video. Lots of detail but moving at a very comfortable pace. Thank you!
Great introductory video. Would enjoy some additional videos digging deeper into good UI / UX practices.
Hey YouTube, Adam tried to hide this from you guys https://clips.twitch.tv/FitPlainJellyfishTTours Kappa
That's the UI/UX crash course I really needed some time ago, i'ts just incredible how you bring together the fundamentals from so much stuff in a understandable and simple video.
Keep it up man, your channel is one of the best things on this entire platform
Do glad I found your channel I’m loving each video that comes ou, great work!
27:41 OMFG ive been working for a year+ with aseprite and i didnt know that you could do that, ive been copying and pasting, i feel so dumb but now this will really help -_-
I love your content, you're the best. What font do you use in the video?
On the topic of UI: I really love how Aseprite's UI is made of pixel art, lol. It just looks so unique.
Please keep going , ur tutorials help me a lot!!
ah nice, another telepath. i was just thinking about how to put together game UI for my game.
I am obsessed with what pixel artists/streamers come up with for their screen setup. I straight up said "oh my god" when I saw your border, that looks so cool! Okay, time to pay attention now
Insightful!
Oh shit your nose
Please add Turkish Subtitle to your video. Please
Hey, at a point in the video, your voice has an after-sound that sounds very steel-y
9:48 what Game is that Screenshot from????
What is the name of the app you are using that looks like a notebook ?
adam has taught me so much vital pixelart skills. thank you, adam, you are truly appreciated. I wish only greatness in your endeavours, helping others grow.
✨🌻✨
Great video, make it look easy
Great video, I can feel the knowledge coursing through my veins.
I'm sure the answer is obvious, but what is the whiteboarding software you use in the first part of this video?
hello what program do you use?
lol Adam: I'm not going to be very good at this. <2 seconds later. perfection.>
what program is he using? i want to try it too
Maan I feel like you explained why weve seen a dumbing down in games with things like fortnite hah, People like to just scan and move fast = BR games for life rofl.
Me: Wow, that looks so cool!
Adam: Obviously this is very rough
Me: …
Very interesting and useful. Its nice to see how comfortable you are, when using Aseprite.
Hi Adam,
I'm new to your channel, but loving it so far!
I was hoping to request a video focusing a bit more on the background elements of your player controls and game window, like the scroll and character containers touched on in this video. I'm working on developing a simple point-and-click adventure that is largely driven by item interaction and the associated dialog box, but I want my console log to have a little bit more "life" to it an cohesiveness with the rest of the game.
im not even planning to make a game why am i here…
Something to keep in mind: never assume that the button label translated has anywhere close to the same length as the original, always design UI elements to fit a sentence. Especially important when the UI is drawn/ is a sprite sheet.
TIL the origin of radio button.
What game is at 9:35 ?
NVM, it is a WIP: Nebulosa
Start screen? Nah point and click rpg with a mimic that looks like a start button. Pausing makes everything dormant until you move but spawns a number of pause buttons that increase in quantity if you pause frequently.
how do you just start making something that looks so terrible then suddenly it just looks super good and polished while I pour my heart and soul into my stuff and try to perfect it over so much time just for it to end up looking terrible
I work as Front End Dev professionally for years for Web and Mobile apps development, which basically making the UI and experience for the user itself visually. But I have difficulties on applying my skill to pixelart, idk why, it just different. This video is definitely help alot.
You know somebody knows what they're doing when they say "this is very rough" and yet it's instantly readable and exactly what you would expect from a polished piece, just short on some refinement and touchup.
The first thing I thought of when it came to Skeumorphism is the Pip-Boy in the Fallout series.
Sidenote: I've just started watching your videos and they've been very helpful! Thank you!
08:50 The Owl Boy UI buttons don't have enough contrast for my liking, tbh. I've also often been tripped up by games that use the colour to denote which control is selected. Although, thankfully Owl Boy doesn't rely on the colour to show focus.
Things like the splash effect and loading animation are what makes a UI fun to use, I believe. The key value of putting work into animating UI elements.
Why have so many ideas for my game i've had ended up being basically what this is, grid-based isometric combat, handwritten-personal UI style
I guess it's validating that my ideas are good, I guess
awesome