Easy Button Design for beginners | Photoshop tutorial

[@Game.UI.Design.Tutorials]

Watch PART 2 after you finish this one there is more to learn ➡️ kzbin.info/www/bejne/pXfGemyHpZtlb80

[@Miviene13]

Hi, i got one issue, my background affect into the strokes because of their opacity. My object has no opacity and I don't know how it is possible,s trokes are inside and i made all as you in the video :( I can send you my file if you like

[@Miviene13]

Oh i think i got this. Overprint option at the stroke solved it.

[@shiinmoon146]

life saver! love your work, will keep following you tutorials ❤

[@Game.UI.Design.Tutorials]

Thank you, my friend!!

[@aktchungrabanio6467]

Amazing tutorial David! Thank you. I just read how you explain the whole process in detail in your newer videos. This one was a bit difficult to follow at certain parts, and it would've been lovely to know how you managed to get your Text looking like that. Again, I appreciate your effort and I'll keep watching more of your videos :D.

[@Game.UI.Design.Tutorials]

Thank you for the comment, my friend! I think I'll have to make a dedicated video on text styles and how to get them with simple tricks. Stay tuned!

[@daniellechriqui6585]

Great tutorial! Can’t wait for the next one!

[@bitsnow_co]

this is ridiculously good

[@Game.UI.Design.Tutorials]

Happy to hear you liked it 😊. Thanks for leaving a comment

[@dogebella]

very informative video to understand UI design 🙏

[@ortayakarskvideolar7044]

Great bro, Congratulations

[@nivpetel]

Fantastic tutorial! Thank you, David!

[@Game.UI.Design.Tutorials]

Thank you Niv! Glad you enjoyed it!!! 😉

[@dormaizles6060]

Wow, really helped with some insights. Thank you!🙏🏼

[@Game.UI.Design.Tutorials]

Thank you for the feedback!!! Glad it helped 😀

[@datasagedev]

Thanks for the great walk through although I did run into issues keeping up with you, I think your hitting certain hotkeys and you don't have any screen cast that shows your key strokes. Just a suggestion for future vids. Thanks David appreciate you!

[@Game.UI.Design.Tutorials]

Yes, you are absolutely right, this was the first video to kick it all up. The rest of the videos are more explanatory and have better explanation. Check them out and let me know what you think! Thanks for the comment and the support!!!

[@dmitryshelekhan5521]

Отличный урок , благодарю

[@Game.UI.Design.Tutorials]

Нема за шо 😀

[@letsdoit6930]

bro bro bro you are awesome! You make my life better learned couple of new things.

[@Game.UI.Design.Tutorials]

Thanks mate. Glad to hear it helps you! Means a lot!! Really!

[@GameMaker560]

very nice video,thank you!

[@Game.UI.Design.Tutorials]

Thank you!!! For tuning in and commenting! Hopefully, I will do another one shortly!

[@ilanabinkin5933]

Great tutorial! Thank for sharing 👍

[@Game.UI.Design.Tutorials]

Thank you very much! Appreciate it!

[@javadev9598]

i love your tutorial

[@Game.UI.Design.Tutorials]

Thank you my friend!!! Appreciate it

[@danielaresende7496]

Hi David, I'm learning about UI Design for games and I loved your tutorial, thank you so much!!! But I have a question. How does the developer develop this button? There were so many strokes, glows, gradients that I was like "WHAAT 😂"

[@Game.UI.Design.Tutorials]

Hi, Daniela, thank you! 😊 Regarding your question, the designs are exported as PNG files when they are done, OR you can also generate a CSS code straight from Photoshop but this will require some adjustments in the game engine. The most simple way is to export in PNG. Hope it answers your question 😀

[@danielaresende7496]

@@Game.UI.Design.Tutorials Woow niiiice, thank you David 💜 And regrats from Brazil 🇧🇷

[@Game.UI.Design.Tutorials]

Thank you so much Daniela!!

[@themoon7717]

would be nice if you showed how you added the texture.

[@sukanyakusanthia879]

Thank you for the idea.

[@Game.UI.Design.Tutorials]

You are very welcome!! Thanks for the comment and support

[@amapola7148]

Thank you very much, it’s a really good lesson

[@Game.UI.Design.Tutorials]

Glad you liked it! Thanks for the comment :)

[@saptarshimond]

Excellent tutorial, keep up great work 👏❤️

[@Game.UI.Design.Tutorials]

Thank you very much my friend!!! Appreciate your comment!! Cheers

[@pbayat6667]

Wowwwww, wonderful

[@Game.UI.Design.Tutorials]

Thanks! Cheers brother!

[@Etagonam73]

PERFECT!

[@Game.UI.Design.Tutorials]

Thanks!!

[@muratcemceylan]

Bro you are amazing yoo

[@Game.UI.Design.Tutorials]

Thanks, I'm sure you are as well!! Cheers

[@igorkovalenko5851]

Super 👍🎉

[@Game.UI.Design.Tutorials]

Thanks bro

[@act_4act_425]

the best tutorial👏💪👍👏👏👏💯❤‍🔥 Bro how did you remove🙈 the corners of the second button 5:29?💔

[@Game.UI.Design.Tutorials]

Thank you!!! I applied a mask on the layer. Follow my cursor few seconds before that. There an icon of rectangle with circle in it, next to your "create a new layer" icon. Then few brush strokes on the sides with sharpness 0

[@caterinabellato918]

thanks, very useful:)

[@Game.UI.Design.Tutorials]

Thank you for the great comment! Let me know what else you'd like to see on the channel

[@cantfindanygoodusernames]

Amazing tutorial, you make it look so easy! But where do you find patterns to use in your designs? An example would be the checker pattern you placed inside the button. I’ve tried searching but I’m struggling to find any good patterns

[@Game.UI.Design.Tutorials]

Thanks for the kind words! Make the patterns yourself! It's faster!

[@rohitsoni2109]

Got a question here, how do you make sure that the design scales up with higher resolution?

[@Game.UI.Design.Tutorials]

@rohitsoni2109 good question!!! Create your canvas at 4K this way you are OK with any resolution

[@user-jx6bg7xu6v]

goood

[@lamarabbit]

Just a question Daviv, a bit late. Why we opt to use PS and not AI?

[@Game.UI.Design.Tutorials]

@lamarabbit good question, short answer, because AI is too generic, it has no particular style, it's easy to create tons of art elements but they lack soul, they lack artistic decision making. They are pretty, sure, but it's not the only thing that matters. At least at this stage AI in gaming if not optimized for UI, more for repeatable art elements like merge games objects, etc. I have a video on the channel of trying to create UI with AI, look it up. Thank for the question!!

[@lamarabbit]

@@Game.UI.Design.Tutorials Oh not robots, I meant illustrator !

[@daveyhu]

You. Da. Man.

[@Game.UI.Design.Tutorials]

Haha, Thanks Daveyhu!

[@hafizhafiz8607]

its aesome..... can you teach more about designing in photoshop?

[@Game.UI.Design.Tutorials]

Thanks, have you seen the rest of the videos on the channel?

[@letsdoit6930]

6:10 how did you instantly change color after making copy of that circle ?

[@Game.UI.Design.Tutorials]

It's very simple. All you do is ALT + SHIFT + BACKSPACE, It's going to color your selected layer in the primary color you have picked. Hope it helped!

[@letsdoit6930]

@@Game.UI.Design.Tutorials Cool! it worked for me Thanks

[@Game.UI.Design.Tutorials]

@@letsdoit6930 my pleasure!!

[@aomadeira]

I liked your tutorial, I like the way you teach, very informative, but some feedback: sometimes the video skips and doesn't show how you did something, It looks like you use a lot of shortcuts, so whoever is trying to learn, can't replicate or follow properly because you don't tell them what you're doing or what shortcut you used. Cheers!

[@Game.UI.Design.Tutorials]

Thank you for the feedback my friend. This was the first explanatory tutorial I have ever done, and sure, you are right, somethings that I took for granted were not that simple to copy by others. Hopefully I did better job on my later videos. Hope I will be getting back to creating more content in the near future. The day job is taking a lot of time at the moment! Any way, thanks for stopping by, cheers

[@deinemutter5223]

NOICE

[@Game.UI.Design.Tutorials]

Thank you for the comment! Glad you liked it!

[@LofiGrove313]

good tutorial. thank u

[@Game.UI.Design.Tutorials]

Thanks YOU, Andrew! If you liked this one then maybe also check the rest of them. I'd like to hear your thought on them as well. Cheers!!

[@renwilliams59]

Is this series possible with Photoshop express, or do I have to have the full version of photoshop?

[@Game.UI.Design.Tutorials]

Does it have shapes and styles?

[@MrWolfK]

yeaa

[@user-wr8ku5uy3u]

13:34 how did you put in pattern??is this clipping mask?

[@Game.UI.Design.Tutorials]

Exactly!!!! This video is really not that explanatory, I do better on my further further videos and I really try to explain the bits and bites of the design approaches and their implementation. Hope that helps!

[@user-wr8ku5uy3u]

@@Game.UI.Design.Tutorials Thanks!!!👍I'll try to study your recent video💪

[@Game.UI.Design.Tutorials]

@@user-wr8ku5uy3u thanks! I appreciate it! Let me know if you find them better

[@Chessdailyph]

Thanks for this. But there are somethings I can't follow. Do you have psd file for this?

[@Game.UI.Design.Tutorials]

Nope, but I have other PSDs on other videos and I had a giveaway of a lighting icon in the community, go check it out my friend! Let me know what you think of the structure of the psd as well!!

[@starism1]

Yo what font do you use?

[@Game.UI.Design.Tutorials]

YO!! It's called Fat Frank. If I'm not mistaken, there's a free version of it.

[@OneEyeGamer]

Psd??

[@Game.UI.Design.Tutorials]

Yes! 😀

[@OneEyeGamer]

No I mean can you give us psd files upload them to Google drive and share them with us. Many people do this to help others create ect. It helps figure out things as well

[@Game.UI.Design.Tutorials]

@@OneEyeGamer great feedback! Thanks!

[@Game.UI.Design.Tutorials]

@AKB Gaming with which part you are frustrated? Maybe I could emphasize this part in my next video

[@Game.UI.Design.Tutorials]

@AKB Gaming so just tell me what part you want me to explain :)

[@Itsme-wt2gu]

Make for gimp plz

[@Game.UI.Design.Tutorials]

So regarding other programs, I'm not familiar with Gimp. BUT, the same principles that I teach with photoshop can be implemented anywhere really, it's just maybe photoshop has simpler layer style menu, maybe not, idk. Remember, it's not the tool that makes you good, it's the thought process and your vision of implementing the principles. Hope that helps

[@Itsme-wt2gu]

Ya but know how to run the tool will make your dream come true

[@elements2202]

You don't explain how you are doing some of the stuff like the lower right highlight. I am not sure I know how to get that half moon shape. You are using hot keys, I think and it is making it very hard to follow along for beginners. I am enjoying the tutorial otherwise.

[@Game.UI.Design.Tutorials]

Amazing feedback! I will try to emphasize it more in my next video!! Thank you Cody!!!

[@elements2202]

@@Game.UI.Design.Tutorials glad I could help. I’m in a photoshop class and this button would have fit perfectly in my assignment. But a whole classroom of students will see your video tomorrow and maybe come watch it themselves.

[@Game.UI.Design.Tutorials]

@@elements2202 wow!! What is your syllabus? Maybe I could help you all out with some particular topic?

[@elements2202]

@@Game.UI.Design.Tutorials This week we are doing icons, last week was posters. Idk what’s coming next week. Do you have a discord where I could pick your brain or ask questions about your videos?

[@Game.UI.Design.Tutorials]

@@elements2202 ​ So regarding Icons I have a video already on the channel kzbin.info/www/bejne/oou9kJmid7-Xq6M! You can PM me on IG @instagram.com/ui.4.games/ And regarding your first question. Just create a rectangle and add radius to the corners so that it's somewhat round (not completely) and add a warp (Arc) and play with the radius of the arc. This is the quickest way to create this curved bottom right reflection. Then drop it's opacity to 50 and add screen blending mode (make sure it's bright color first!!!) Hope it helped :)

[@niq1487]

Пушка

[@user-yi3zs9fg9r]

please speak loudly

[@nahharayoub2583]

bro this courses for reskin game ? *

[@Game.UI.Design.Tutorials]

Sorry, I didn't understand

[@iamtakingapiss7916]

Gordon Freeman?

[@rafarodriguez4765]

Liked but you should not do so much operations that you do not explain

[@Game.UI.Design.Tutorials]

Thank you for the feedback! And for the Like ^^

[@replydonaldMcDonaldfries]

Can u please send us psd of it??

[@Game.UI.Design.Tutorials]

If you watch the whole video series, and follow through. You should have a bunch of cool PSDs yourself :) I have a few giveaways in my community. Check it out 😀

[@dreflox]

very slow tutorial

[@Game.UI.Design.Tutorials]

We all suck at some point in life 😀