Easy Button Design for beginners | Photoshop tutorial

Поделиться
HTML-код
  • Опубликовано: 18 окт 2024

Комментарии • 114

  • @Game.UI.Design.Tutorials
    @Game.UI.Design.Tutorials  2 года назад +3

    Watch PART 2 after you finish this one there is more to learn ➡️ ruclips.net/video/oFcI9Qp629k/видео.html

    • @Miviene13
      @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
      @Miviene13 Год назад +1

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

  • @shiinmoon146
    @shiinmoon146 7 месяцев назад +3

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

  • @glodelmosatu9001
    @glodelmosatu9001 5 дней назад

    thank you so much for what your are doing

  • @aktchungrabanio6467
    @aktchungrabanio6467 Год назад +4

    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
      @Game.UI.Design.Tutorials  Год назад +1

      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
    @daniellechriqui6585 2 года назад +4

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

  • @bitsnow_co
    @bitsnow_co Месяц назад +2

    this is ridiculously good

  • @cantfindanygoodusernames
    @cantfindanygoodusernames 10 месяцев назад +1

    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

  • @dormaizles6060
    @dormaizles6060 2 года назад +1

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

  • @ortayakarskvideolar7044
    @ortayakarskvideolar7044 9 месяцев назад +2

    Great bro, Congratulations

  • @nivpetel
    @nivpetel 2 года назад +1

    Fantastic tutorial! Thank you, David!

  • @dogebella
    @dogebella 10 месяцев назад +1

    very informative video to understand UI design 🙏

  • @javadev9598
    @javadev9598 9 месяцев назад +1

    i love your tutorial

  • @sukanyakusanthia879
    @sukanyakusanthia879 Год назад +1

    Thank you for the idea.

  • @ilanabinkin5933
    @ilanabinkin5933 2 года назад +1

    Great tutorial! Thank for sharing 👍

  • @danircl
    @danircl Год назад +3

    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
      @Game.UI.Design.Tutorials  Год назад +1

      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 😀

    • @danircl
      @danircl Год назад

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

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  Год назад +1

      Thank you so much Daniela!!

  • @letsdoit6930
    @letsdoit6930 Год назад

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

  • @GameMaker560
    @GameMaker560 6 месяцев назад +1

    very nice video,thank you!

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  6 месяцев назад

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

  • @datasagedev
    @datasagedev Год назад +1

    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
      @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
    @dmitryshelekhan5521 4 месяца назад +1

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

  • @saptarshimond
    @saptarshimond 2 года назад +1

    Excellent tutorial, keep up great work 👏❤️

  • @themoon7717
    @themoon7717 Год назад +1

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

  • @muratcemceylan
    @muratcemceylan 9 месяцев назад +1

    Bro you are amazing yoo

  • @amapola7148
    @amapola7148 2 года назад +1

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

  • @act_4act_425
    @act_4act_425 Год назад +1

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

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  Год назад +1

      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

  • @pbayat6667
    @pbayat6667 2 года назад +1

    Wowwwww, wonderful

  • @igorkovalenko5851
    @igorkovalenko5851 9 месяцев назад +1

    Super 👍🎉

  • @Etagonam73
    @Etagonam73 2 года назад +1

    PERFECT!

  • @caterinabellato918
    @caterinabellato918 Год назад +1

    thanks, very useful:)

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  Год назад

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

  • @hafizhafiz8607
    @hafizhafiz8607 10 месяцев назад

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

  • @lamarabbit
    @lamarabbit 2 месяца назад +1

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

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  2 месяца назад +1

      @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
      @lamarabbit 2 месяца назад

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

  • @LeoTaylor-k2p
    @LeoTaylor-k2p 11 месяцев назад +1

    goood

  • @rohitsoni2109
    @rohitsoni2109 3 месяца назад +1

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

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  3 месяца назад

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

  • @LofiGrove313
    @LofiGrove313 2 года назад +1

    good tutorial. thank u

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  2 года назад

      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!!

  • @daveyhu
    @daveyhu 2 года назад +1

    You. Da. Man.

  • @letsdoit6930
    @letsdoit6930 Год назад +3

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

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  Год назад +2

      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
      @letsdoit6930 Год назад +1

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

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  Год назад

      @@letsdoit6930 my pleasure!!

  • @renwilliams59
    @renwilliams59 8 месяцев назад

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

  • @aomadeira
    @aomadeira Год назад +1

    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
      @Game.UI.Design.Tutorials  Год назад +1

      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

  • @Chessdailyph
    @Chessdailyph Год назад

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

    • @Game.UI.Design.Tutorials
      @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!!

  • @deinemutter5223
    @deinemutter5223 2 года назад +2

    NOICE

  • @starism1
    @starism1 Год назад +1

    Yo what font do you use?

  • @MrWolfK
    @MrWolfK 3 месяца назад

    yeaa

  • @siro-f5y
    @siro-f5y Год назад +1

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

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  Год назад +1

      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!

    • @siro-f5y
      @siro-f5y Год назад +1

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

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  Год назад

      @@siro-f5y thanks! I appreciate it! Let me know if you find them better

  • @OneEyeGamer
    @OneEyeGamer 2 года назад +1

    Psd??

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  2 года назад

      Yes! 😀

    • @OneEyeGamer
      @OneEyeGamer 2 года назад +1

      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
      @Game.UI.Design.Tutorials  2 года назад

      @@OneEyeGamer great feedback! Thanks!

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  2 года назад

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

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  2 года назад

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

  • @Itsme-wt2gu
    @Itsme-wt2gu Год назад +1

    Make for gimp plz

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  Год назад +1

      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
      @Itsme-wt2gu Год назад +1

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

  • @nahharayoub2583
    @nahharayoub2583 Год назад

    bro this courses for reskin game ?
    *

  • @niq1487
    @niq1487 4 месяца назад +1

    Пушка

  • @TalkyMikey
    @TalkyMikey Год назад

    Gordon Freeman?

  • @elements2202
    @elements2202 2 года назад +6

    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
      @Game.UI.Design.Tutorials  2 года назад +4

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

    • @elements2202
      @elements2202 2 года назад +1

      @@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
      @Game.UI.Design.Tutorials  2 года назад +2

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

    • @elements2202
      @elements2202 2 года назад +1

      @@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
      @Game.UI.Design.Tutorials  2 года назад

      @@elements2202 ​ So regarding Icons I have a video already on the channel ruclips.net/video/lZZ_flBZduA/видео.html! 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 :)

  • @dreflox
    @dreflox 6 месяцев назад +1

    very slow tutorial

  • @rafarodriguez4765
    @rafarodriguez4765 4 месяца назад +1

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

  • @muhammadsarim-j6k
    @muhammadsarim-j6k Год назад +1

    please speak loudly

  • @replydonaldMcDonaldfries
    @replydonaldMcDonaldfries Год назад

    Can u please send us psd of it??

    • @Game.UI.Design.Tutorials
      @Game.UI.Design.Tutorials  Год назад +1

      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 😀