How I create a pause screen - game artist UI workflow

[@chloerebekah1144]

Thankyou for this content it's super useful as I'm creating a game UI as my final major project for my Graphic Design course!!

[@morcatna4767]

@@CaseyAtkins0 I want to be a GUI artist and from what I hear you don't but it is important to understand how it is applied through programming. There are positions called UI programmer so I would imagine that you would just work with them to get the job done. From what my professors and friends say, knowing how to code will be a big plus!

[@dudewiththefish9]

Kent, I am 18 year old kid with no drawing experience whatsoever. I have finally realized my passion and that is being a concept artist / illustrator. Everything about this job fits with me I love the creative flow of using your imagination to embody characters or scenery that image what you desire. I just wanted to say that your KZbin channel has gaven me such inspiration to pursue this passion of mine that I have been looking at since I was a child but I thought it would never come true. After finding your account and watching many videos I have finally got a grasp of what I will do with my life. Thank you very much have a blessed and thankful day.

[@JasonCharlesButkiewicz]

Really awesome video Trent! Very interesting to see how all this stuff works. Love these behind the scenes looks at what goes into making a game.

[@KillerTacos54]

Daaamn this looks amazing so far! Your game is coming along so well!

[@_B_E]

I think a lot of the aspects that go into this can be applied to all layout stuff in general. I've made a few fliers on commission and had to consider a lot of similar hurdles. Also if you made a series of dedicated videos on making useful game art i'd be all about that. I imagine a lot of artists make art that is nice to look at but hard to actually use in games.

[@TrentKaniuga]

Id really like to start doing some game maker programming tutorials, but I don't know if its something everyone would like. Really I just needed to do this screen, so I thought I'd make a video about what my thought process is along the way. Maybe more people will ask for game development tutorials? I guess Ill find out.

[@segafan2437]

i think a lot of us would be interested in that, you could probably use your shiny new discord server to ask for popular video topics for the future.

[@jessesuhonen2005]

Thanks for the video Trent! Nice to see you are still working on Ikeda! I for one would love to see some Game Maker (and/or game dev) tutorials, but maybe more from an artists perspective. What do you need to be thinking about when creating art for GM, are there any restrictions, how to bring your art to GM etc. I hope I'll be able to use the sword in Ikeda soon! Keep up the great work!

[@mitsukiyouko]

@@TrentKaniuga it would be really helpful if you can show us how to program for games! I'm kinda learning programming and would love it if you could do some tuts!

[@_sparrowhawk]

Cool work, I ‘m a UX designer who used to work on web/mobile apps. :)

[@shire-lee]

What do you work on now? I’m in the mortgage industry current and trying to study on me own about UI and graphic design

[@grizzlymiller8694]

one thing you could try is making the sword vertical and then placing it beside the character. another idea would be to segment the screen more by having your character and inventory on the left with the stats and menu on the right with a bit more spacing in between the sides. you would prob have to shrink some elements, but not by much. overall, solid ui layout, especially with style cohesion.

[@switzerstudio]

you rock trent ! allways a plessure seeing your videos

[@mcbaltz]

Great job! :) Thank you, Trent.

[@InJJWeTrustOfficial]

Hey Trent, great video! As someone who is more on the game design/production side I am not versed in UI implementation from design mock-up to engine implementation. Curious about 11:20, right when you take your mock-up into engine. I imagine that you import a reference image and then build out each of the ui elements using the engine's available components, and then just delete the reference image after, is that correct?

[@TrentKaniuga]

I wish. With Game maker studio, you literally have to program the coordinates of each element and text. Its quite inefficient compared to many other engines.

[@InJJWeTrustOfficial]

@@TrentKaniuga Thanks for the super quick reply! Oh I see! So you're just slicing up each UI button/image/text, importing as images into the engine (GMS), and then programming each of those imported images? Dang, was curious what the usual flow would be like for building out a designed/mock-upped UI in-engine in UE or something... I have a hunch my idea of importing it as a reference image and then building out each material is right, but I can't find any vids on that topic :(

[@VyacheKan]

Hey Trent, I hope all is well with you. It would be cool to see a workshop for game UI creation. I recall that somebody in D3 spent time making it (5:34). I'm curious about an effective pipeline and workflow. Thanks & kind regards, Vye

[@VICE-H3RO]

I think the lerp function would look really good when hovering over the menus :D For example, I would have it extend that red bar or alter the shape of the buttons and then it would retract when not hovering over it

[@Mauru_Arteme]

Without cutting into your delivery deadline if you've decided on that. I was wondering would you want to animate Ikeda's image on that screen so if you checking his inventory or switching items around it would rotate him to show which pockets taking the item from so if it's a back pocket the image would rotate to the back of him and one of the pouches would flash/glow just as something eye-catching and interactive rather then an image that is just there doing nothing. I understand that it's there as a placeholder for now as part of the overall test of how you want your pause screen interface to look while you're working out gameplay details and the like.

[@CreatorzOwn]

In that same vein, the weapon could be added to the character visualization rather than displaying it in its own module. I don’t know much about the game, though, so this might not make sense. I saw there was some kind of mecha or something as well. Also, in English, the percent sign goes on the right (unless it’s a stylistic thing). ;)

[@AdversaryOne]

I only just started watching your content a couple of weeks ago but I thought you were already done with Ikeda, for some reason. Looks great either way.

[@TrentKaniuga]

Thanks. Games are never really done. Ikeda is an E.P. meaning that I'm going to keep adding to it until it's good enough for a steam release. much of the feedback that I've received has made me want to add more features and make a more exciting game.

[@gameillusion9914]

Interesting Tanx it was helpful

[@dannsanchez4583]

Great video and game is looking awesome! Quick question, what's the canvas size and resolution on this? Currently working on some UI and kinda new to this type of art, not really sure what sizes I should be working with.

[@kcrcks]

Almost 100k , 🔥🔥🔥

[@KILLSAS]

Did u said 200k?

[@eyecred4153]

Thanks bud!It really helps ALOT, atleast for me :D

[@DraganDraws]

What game engine is this on? And as im typing you mention the Gamemaker haha. It truly is an awesome piece of software. Did you do the coding as well?

[@blyrax]

hi trent. hows it going? im a 2d animation layout designer/ background painter whos is seeking work as 2d environment designer for games. do i need to know how to do other related aspects of 2d game design like character animation, ui & ux design, 2d fx, coding and character design or is it okay to just stick to 2d environment design strictly?

[@mezka3258]

Hi trent! I recently found your videos and they have motivated me so much to reach my goal of becoming a concept artist. I'm currently 16 and drawing everyday, trying to improve. And i was wondering if you would be able to do a video on all your early early artwork from when you were younger, it would be interesting to know if i'm on the right tracks and to see if you were always a god lol. Thanks again Trent!

[@jorgeantoniomanuelsanchezr9708]

Hey Trent!! Really love your videos and im thinking about get a tablet to give amateur digital art a try myself (have been thinking about it for a while actually xD). I was planning on getting the Wacom Intuos but i saw it hasn't multitouch function. From your experience, how important is it? will it be much of a handicap? I think it would be much better to have it but i dont know how much it is used at the end, since i've never done it myself -.-' Thank you!

[@ArtwithAmarBrisco]

Yeah this is part of the GDD when you start working on any game. This game UI is as important as the game mechanics which is part of the immersion of the game.

[@PsychMandril]

hey, Trent, i'm a huge fan and love your work. could youjust make a non timelapsed real time video of you drawing? Just wanted to see how you atually do your line art.

[@TrentKaniuga]

hey Jibin. I put all of my real time videos in my gumroad box sets of tutorials. www.gumroad.com/trentk. I have several real time drawing videos for free on my youtube channel as well.

[@altsider]

Hello!!! Thank you for this video. I have questions... Do UI Designers (games) still using Photoshop or they are using Figma like Product Designers? And how Ui Designer (Games) do the handoff for the development? It's only exporting PNG files?

[@TrentKaniuga]

Ive mostly only ever used Photoshop for UI art.There are many functions and perks that Photoshop has for buttons and vfx

[@arturorios4260]

what software are you using?

[@user-rv7kk1to9h]

Can I use screenshots from different games for my ui design portfolio?

[@TrentKaniuga]

You probably should not. Just focus your UI design portfolio on the Ui art that you have created. Unless if it is obviously for the studio that you are applying to. In which case, you should probably have the ui on the screenshot of that studios game.

[@Yurup]

From a player standpoint i dont think the weapon slot is needed if you only have 1 weapon. Its something you just know and if you dont you press the attack button to find out. It can be nice as a filler for the screen but to me has no real gameplay value.

[@AnonymoudKid]

The weapon has a resource bar. That is the purpose of displaying that.

[@BxBL85]

Haven't looked at Game Maker in years... I work on Unreal 4 nowadays.

[@morcatna4767]

My dream is to be a GUI artist but should the GUI artist know Programming? I think it is essential to understand how to apply it but I am not that great at programming, (still doing my best to understand how programming works). Like is there a UI programmer that the UI artist will work with? Thank you and awesome video ;^D

[@Balloonbot]

Yo. Im a UI artist - almost a year since your comment, but maybe i can still help. In bigger companies there are specific UI programmers and most of the framework/code will already be set up with placeholders. Typically a UI artist would ideally have basic technical knowledge. Usually this involves using in-built tools to display the UI assets correctly in-engine, making sure it matches your mock-up and scales well at different resolutions.

[@segafan2437]

a version that i'd like to see, is having a more dynamic shot of the character on the pause menu, maybe shoulder/arm and above coming from one side of the screen. giving a better look at the character, but not terribly detailed, almost like grafitti/street-art. maybe this image could change to show something else also, like changing to the tank when in the tank, or hitpoints maybe(ikeda looking wounded/tired at low health), if your game will even have those. also having just two pages, main one for progress/menu, and the other for more details of total game collectibles and/or a chart showing each level completion. useful to have on a pause screen for platformers. (still just getting into art but i have played a lot of games and i can appreciate good UI, will be nice to see which direction you choose!)

[@rehanimus]

I have some feedback to the ikeda alpha. is this the right forum to give feedback? i really liked it, and have some suggestions and opinions.

[@paradoxvuim8562]

MAAAN How many years need to spend to reach your skill lvl )

[@mudmogwai]

You sooooo need to put that on mobile ( iphone and android) whn done !!!!

[@zip2kx]

Someone warn him how localization will mess up these harddrawn text

[@TrentKaniuga]

I'm not really planning for localization.indie games don't usually get distributed into too many languages and if it is, it'll take me like 1 day to change the text for the whole game. It's a good point for larger budget games though. I should've mentioned that for others who are working on bigger games. Also, you can address me directly, you don't have to tell others to tell me stuff.

[@dennis.i]

Photoshop is so awkward for UI.

[@morcatna4767]

Is Illustrator Better?

[@hoseinak1684]

everything is awesome except your intro :( please change it

[@Vegaart777]

Do u export every layer from photoshop for development? Or how ?

[@TrentKaniuga]

Every part gets exported and placed by hand into the engine. If it has functionality or interaction, it also needs code and alternate glowing versions or animations.

[@Vegaart777]

@@TrentKaniuga thank you