TILESET in Photoshop (Tutorial)

Поделиться
HTML-код
  • Опубликовано: 16 янв 2018
  • Learn how to create tiles and tilesets in Photoshop!
    Here's a link to the Tileset Template: goo.gl/Xih8nw
    ❤️ 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...

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

  • @kitthekat6844
    @kitthekat6844 6 лет назад +497

    I would love a full on video about tilemaps!

    • @Darkassembley
      @Darkassembley 6 лет назад +3

      Aye

    • @designfella8622
      @designfella8622 6 лет назад +4

      Definitely! I've been getting into it, but would love a video from someone who seems to actually make sense to newbies when they talk about it.

    • @Sparrow420
      @Sparrow420 6 лет назад +4

      funny, unity themselves just released one.

    • @moreira3249
      @moreira3249 6 лет назад +1

      Yeah please unity tilemap tut would be awessom

    • @miosz9261
      @miosz9261 6 лет назад

      YES PLEASE

  • @Dani_Krossing
    @Dani_Krossing 6 лет назад +149

    I was literally looking this up for the first time on Google just now, and again Brackeys to the rescue :)
    An idea for a tutorial: A follow up lesson on how to create Photoshop files like the one you used :) Using "smart objects" and linking to them in PSD files. This seems like a useful feature for creating sprites.

    • @zintows
      @zintows 3 года назад

      how did you get 2 likes?

    • @Dani_Krossing
      @Dani_Krossing 3 года назад +7

      Wintows Method I’m guessing people clicked the like button ;)

    • @danstora
      @danstora 3 года назад +3

      Right, I’ve been trying to do this for a whole day. Filter>smart object> but the image is of the wrong size...
      I am trying to make my own Tile Atlas.

    • @limanewb655
      @limanewb655 3 года назад +2

      Not anymore he Brackeys quit...

    • @osuscyan3143
      @osuscyan3143 3 года назад +2

      Did you end up finding a way to do this? I wanted to make a tile set with a higher resolution but no idea how to make a psd like the one shown

  • @roykaminski4181
    @roykaminski4181 4 года назад +4

    Incredible use of smart objects - In all my years of using Photoshop, I have never thought of using them this way. This completely changes the approach to tiling that I would have never imagined of doing before! Thank you for showcasing this little gem of a technique!

  • @Rambolink94
    @Rambolink94 6 лет назад +109

    I would also love a quick video explaining how you set up the tile template in Photoshop.

    • @bernardopop
      @bernardopop 4 года назад +6

      Convert the layer to Smart Object

  • @candlehawk
    @candlehawk 6 лет назад +335

    When I made and saved the edit that I did to a tile, on the tileset template it showed up all blurry and anti-aliased. This happens even when I just re save the tiles without editing them. The layers are still saved as .psb files and the template is still saved as a psd. EDIT: Figured it out. You have to go to Edit -> Preferences -> General and switch Image Interpolation as Nearest Neighbor. Leaving this up in case others have my problem.

    • @KafanskaTV
      @KafanskaTV 5 лет назад +17

      Thank you for leaving the updated comment with the solution. Helped me a ton.

    • @omturakhia
      @omturakhia 5 лет назад +3

      thanks

    • @tripsd8388
      @tripsd8388 5 лет назад +5

      Thank you so much for sharing your solution friend, I had the same problem and searched high and low for an answer.

    • @Manas-co8wl
      @Manas-co8wl 5 лет назад +4

      Yeah, Brackeys has dealt with this issue once. Or was it one of the later episodes? Either way, thank you.

    • @piccamix9345
      @piccamix9345 4 года назад +1

      Thankyou +rep and +youtube silver

  • @demonicious_
    @demonicious_ 6 лет назад +48

    If you could make a tutorial about a clothing system (In which you could equip/wear clothes) that would be just amazing.
    Love your tutorials.

  • @user-qf2ho9dc9y
    @user-qf2ho9dc9y 6 лет назад

    I've been using this technique and created my own template years ago. Good to know someone finally made a tutorial on this. And of all people, its Brackeys XD

  • @k.a.9415
    @k.a.9415 5 лет назад +10

    Lovely stuff Asbjørn
    ** Photoshop Note **
    For those wondering how to simultaneously update multiple layers. Here are some steps for it :
    1 - create a layer
    2 - make any design on the layer ( i.e fill it with any color )
    3 - right click > convert to smart objects
    4 - right click > Duplicate layers ( !! not CRL+C/+V !! )
    5 - now draw on any layer, the rest of the layers will follow the behaviour.
    Done :)

    • @nab5501
      @nab5501 5 лет назад +1

      Is this supposed to work? Its not working for me

  • @aresanstudio8335
    @aresanstudio8335 3 года назад +1

    Amaizing work man! It looks beautiful!

  • @ThomasAuberson
    @ThomasAuberson 6 лет назад

    Another very helpful tutorial. Thanks Brackeys!

  • @totebag132
    @totebag132 6 лет назад +1

    YOU'RE SO AMAZING!! Thank you so much for all your hard work in making comprehensible videos, all of us in the gaming community really appreciate it!

  • @cardcreep3295
    @cardcreep3295 6 лет назад +667

    says: im not a artist.
    does:paints better than me.
    And i go to a art school.

    • @joebravo4224
      @joebravo4224 4 года назад +16

      thats means you are useless pieco of shit isnt it

    • @hiiambarney4489
      @hiiambarney4489 4 года назад +4

      Fakkkin hell mate.

    • @sh1nt0ni
      @sh1nt0ni 4 года назад +21

      @@joebravo4224 Dude you killed him :(

    • @RealZynexx
      @RealZynexx 4 года назад +32

      @@joebravo4224 Dick

    • @SaaGT
      @SaaGT 4 года назад +9

      @@joebravo4224 You're dick you killing him

  • @oyeedraw8407
    @oyeedraw8407 5 лет назад

    This is a really useful video! Very clear, straight to the point! I just love it!

  • @lukeblaker5625
    @lukeblaker5625 4 года назад

    Gave this a go today and had good fun! Thanks for the template and really great video

  • @MrVipulLal
    @MrVipulLal Месяц назад

    Exactly what I was looking for. Thanks

  • @Avidi
    @Avidi 6 лет назад +1

    Love the tutorial, it’s always nice to see the art side of you dude

  • @saulogamedev
    @saulogamedev 5 лет назад +1

    Wow! This was so much helpfull! Thank you so much Brackeys!

  • @amir32806
    @amir32806 6 лет назад

    Very definitive and not woordy at the same time! Every video tut on RUclips should be like this one.

  • @ianparker5007
    @ianparker5007 5 лет назад

    Awesome as always. Been with you since the survival game series!

  • @zacharysilverzweig7715
    @zacharysilverzweig7715 5 месяцев назад +1

    Blows my mind that Brackey is still the definitive source of how to do everything for Indy games.

  • @christiansorensen5075
    @christiansorensen5075 5 лет назад

    Phenomenal video, thank you so much!

  • @lautarolavecchia5995
    @lautarolavecchia5995 5 лет назад

    just found your channel, super helpful! keep on the good work 👍

  • @rashh77
    @rashh77 6 лет назад +1

    Very nice tutorial, I hope you will make other videos like this, thanks a lot.

  • @MewsSnep
    @MewsSnep 6 лет назад

    The tileset template is super awesome!

  • @dedcove7466
    @dedcove7466 5 лет назад

    Incredible! Thank you.

  • @charlouaredidon6006
    @charlouaredidon6006 6 лет назад +121

    Brackeys! It would be great if you make a series for Performance Optimization.

    • @YasserSedrati
      @YasserSedrati 6 лет назад +1

      +1

    • @stefanospanagiotidis7489
      @stefanospanagiotidis7489 6 лет назад

      Charlou Aredidon Agree

    • @TheTukkia
      @TheTukkia 6 лет назад

      yes!

    • @Rudi.
      @Rudi. 6 лет назад +4

      This is way to specific, because it always depends on the game you make + how you program it.

    • @TheTukkia
      @TheTukkia 6 лет назад +4

      Tim, I think its more about putting depth of field and knowing exactly what in your gaming thats draining processor power. That's standart, independent of what game you make.

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

    I love your YewTube channel! Seriously useful infromashin. Hope to see more.

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

    Great video! Thank you!

  • @PistonPL
    @PistonPL 6 лет назад

    As always, great tutorial.

  • @karthiknaidu4240
    @karthiknaidu4240 2 года назад

    Amazing man, Thank you so much

  • @l2hetoric
    @l2hetoric 6 лет назад

    This is awesome. Thanks!

  • @CrunchyPie
    @CrunchyPie 6 лет назад +49

    Even tho,im still creating 3d game,i still want to learn more about 2d game development.Brackeys is the first guy who thought me how to start game development,thanks to Brackeys team!

    • @sandybrown3373
      @sandybrown3373 6 лет назад

      Crunchy Pie when you create it I wanna see it

    • @coulmusic
      @coulmusic 4 года назад

      Nice Vaporwave PFP

  • @ivanperez4161
    @ivanperez4161 4 года назад

    Thanks! It really helps.

  • @unknownguy2554
    @unknownguy2554 3 года назад

    Brackeys, you saved me hours of trial and error. Thank you :)

  • @dimarichmain
    @dimarichmain 6 лет назад

    Photoshop tutorials are pretty cool, go on there!

  • @SeanLange
    @SeanLange 6 лет назад +1

    I'd love to see you do something on tilemaps!

  • @guiasxamonicas
    @guiasxamonicas 6 лет назад

    I discovered this channel today and I'm in love with it! Great job. I subscribe for watch your videos when I have free time to try develop something. :DD

  • @eric16avila
    @eric16avila 6 лет назад

    I love this kind of videos

  • @filip4698
    @filip4698 4 года назад +5

    i love to fall asleep to brackeys' videos, his voice is so relaxing

  • @CrankyCoder
    @CrankyCoder 6 лет назад

    very cool!! nicely done

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

    This is really helpful. I am using GIMP for my pixel art work. I'm wondering on how to setup the same workflow for Gimp. I really like how you did the template for automatically setting up the changes on a different window. Thanks a lot. This video is really helpful.

  • @Summonair
    @Summonair 6 лет назад

    Brackeys is the best channel out there

  • @Mega785
    @Mega785 11 месяцев назад

    Thanks, nice video!

  • @nastadoa9923
    @nastadoa9923 4 года назад

    thanks for the Tileset it will help greatly

  • @YasserSedrati
    @YasserSedrati 6 лет назад +2

    really you are an artist

  • @nullFoo
    @nullFoo 4 года назад

    Amazing tutorial! :D

  • @tendividedbysix4835
    @tendividedbysix4835 5 лет назад

    Hey thanks for the video and the tileset, I think it will be a big help :) peace!

  • @salahamer4453
    @salahamer4453 6 лет назад +80

    Please make a video on Unity's Tile Map Editor :D

  • @RecomALT
    @RecomALT 2 года назад +9

    the photo shop template doesnt download

  • @calliope_x3
    @calliope_x3 3 года назад +16

    "I'm not an artist"
    > goes on to draw something that I, a professional game artist, could not even HOPE to come close to

    • @themadmushroom2769
      @themadmushroom2769 3 года назад +7

      uhm how did you get a professional artist then? I mean i agree, it looks awesome, but if somebody would want me to PAY him for his work, quoting he's a PROFESSIONAL, I'd seriously expect more. Again, not bashing, im just rly confused

    • @Taterzz
      @Taterzz 2 года назад

      if you are, then you can. for those of us without artistic skills, it's more about taking advantage of the system to do the work for us. a real artist can do this basically freehand lol

  • @vamphyr3753
    @vamphyr3753 4 года назад

    I love you! Thanks so much

  • @umarnaseer4094
    @umarnaseer4094 6 лет назад

    i never have to watch the whole video of Brackeys to know its good i know it will be good.

  • @KoreanMoo
    @KoreanMoo 6 лет назад

    Thank u it's good info

  • @tingwen1713
    @tingwen1713 4 года назад

    Thank you so much for making this video! My god you are so awesome :) for curious people like me, this is gold! haha

  • @thriftsimple561
    @thriftsimple561 6 лет назад

    Yes, unity tilemap video please! Awesome stuff, but I'd agree with a few of the other comments that many of us don't have PS. Maybe seeing the same things in GIMP or Pixlr or something would be more useful to more people?

  • @piscesdreams1023
    @piscesdreams1023 4 года назад

    I just wanted to thank you for this video. I re-created this template in Photoshop more according to my needs at a higher resolution for tiles and it works incredibly well. I'm definitely subscribing!

    • @cosmic_417
      @cosmic_417 3 года назад +1

      How did you recreate it?? please reply

  • @ReplicateReality
    @ReplicateReality 5 лет назад

    great vid mans

  • @yeetyeet5839
    @yeetyeet5839 4 года назад

    Your tutorials are amazing and very easy to understand! This will definitly be helpful with my upcoming school project, thank you so much :)

  • @ast_rsk
    @ast_rsk 6 лет назад +6

    This is great! Could you do a followup about how you made photoshop use the tiles correctly? I'm trying to take apart your example file but can't figure out how to create my own definition of where to use my tiles.

    • @Bestmann3n
      @Bestmann3n 6 лет назад +10

      Make tiles of the size you want on separate layers, for example floor, side and the two corner types. Convert the layers to smart objects. Now you can duplicate those smart layers and rotate/arrange them in any configuration you want and all the new copies will update when you make any changes to your tiles. Double click the smart layer of the tile you want to paint on and it will open a new window for you to edit the tile.
      If you want to make a new tile-type by copying an old one you will need to right click the layer you want to copy and select "New Smart Object via Copy". Hope this helps :)

  • @smurfolissicus
    @smurfolissicus 4 года назад

    Mr Brackeys seems so Smart!!!

  • @hiddenbruh
    @hiddenbruh 6 лет назад

    I would like that very much also a course on top down or side scrolling 2d rpg games would be awesome, not necessary but would greatly appreciate it :)

  • @anhthuhuynhngoc3469
    @anhthuhuynhngoc3469 6 лет назад

    Thank you so much

  • @karltilsner922
    @karltilsner922 6 лет назад

    Could you please show how the unity tileset works, just a quick video that covers the basics. I love your content btw

  • @zilly4285
    @zilly4285 6 лет назад

    Ur videos are the best

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

    Awesome !!

  • @AnasMations
    @AnasMations 6 лет назад +1

    I really like these Photoshop videos!
    also how do you send updates when you draw to the other Photoshop window. please tell me I want to use this method for other things thanks :)

  • @notunclesimon
    @notunclesimon 6 лет назад

    Nice background!

  • @hyeonsuha3137
    @hyeonsuha3137 6 лет назад

    you are really angel. thanks!

  • @ederVeronez
    @ederVeronez 6 лет назад +1

    Mano, tu é foda, to aprendendo demais!

  • @Scottx125Productions
    @Scottx125Productions 6 лет назад

    I'd like to see more stuff on creating proper textures like wood with bump maps, uv's etc.

  • @blizzard2586
    @blizzard2586 5 лет назад +1

    Hey, thanks for this amazing tutorial!
    I'd be glad to know if you can use adobe flash cs for those kind of tile making as well, and how.
    Because I'm an animator and that's what Im usually using.
    Thanks in advance for all of the help ^^"
    Btw: you have a beautiful smile C:

  • @Panossa
    @Panossa 6 лет назад

    This is incredibly useful. :o

  • @cerealman2751
    @cerealman2751 3 года назад +28

    If the link doesn't work, copy and paste it into the url bar. It will download a .psd file.

    • @machebermejo4857
      @machebermejo4857 3 года назад +3

      You are a life saver!

    • @cerealman2751
      @cerealman2751 3 года назад +3

      @@machebermejo4857 it took me over a month to figure that out lol

    • @machebermejo4857
      @machebermejo4857 3 года назад

      @@cerealman2751 Hahaha

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

      thanks bro!

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

      Thank you!! I hoped someone would have a solution if I looked at recent comments :D

  • @klareswag6678
    @klareswag6678 3 года назад

    very helpful

  • @toreole2993
    @toreole2993 6 лет назад +10

    Tiles + rotating them? I made an asset for that lol. Im trying to get it up on the assetstore atm. It has either 4-way or 8-way connection. If i may say so myself its pretty cool stuff xD

  • @user-kn8xx9rn6b
    @user-kn8xx9rn6b 5 лет назад

    think you, This is very useful to me.

  • @abill6740
    @abill6740 6 лет назад

    AWESOME !!!!!!

  • @Vendeta_official
    @Vendeta_official 6 лет назад

    Fantastic

  • @christinews
    @christinews 4 года назад

    Very useful, cool :D

  • @marlopainter8246
    @marlopainter8246 4 года назад

    Thank you.

  • @nirnaet
    @nirnaet 6 лет назад +11

    If the pixels get blurred in the Tileset Tempalte after saving the tile, go to Edit -> Preferences -> General and change the Image Interpolation to "Nearest Neighbour (preserve hard edges)". Just thought I'd share since I had this problem. In Brackeys' Pixel Art tutorial this is further explained.

  • @WEdwardsPortfolio
    @WEdwardsPortfolio 6 лет назад

    Great video mate. Is there a way to change the tile pixel size?

  • @GeoffNewman68
    @GeoffNewman68 6 лет назад

    A video about tile map. Yes please!

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

    For the people who can't download, copy the link and paste it in your browser instead :)

    • @nin3_
      @nin3_ 11 месяцев назад

      thank you

    • @echoarts03
      @echoarts03 4 месяца назад

      BRO, THANK YOU SO MUCH

  • @linkified0471
    @linkified0471 3 года назад +39

    Me: I CAN’T WAIT TO MAKE TIL-
    Brackeys: so I have a photoshop download tutorial thing
    Me: **cries in poor**

    • @ramen1024
      @ramen1024 3 года назад +5

      use inkscape its free but a bit different but works well for me.

    • @codewaffle1138
      @codewaffle1138 3 года назад +1

      Same

    • @iquestionable2065
      @iquestionable2065 3 года назад +3

      Thank you lol saved me from actually buying PS

    • @smolse6854
      @smolse6854 3 года назад +3

      I like to use Piskel. It's free and you can make lots of things with it.

    • @iquestionable2065
      @iquestionable2065 3 года назад +1

      @@smolse6854 I'm using it too but I'm trying to make a top down game but its hard to make the tiles for it

  • @thederpyminecrafter77
    @thederpyminecrafter77 6 лет назад

    I love your videos they are awesome and help me so much but, I have been having a lot of trouble using coroutines can you maybe make a video on this it would greatly appreciated.

  • @Fareons
    @Fareons 6 лет назад

    Tilemap, please! It just makes sense to follow this one.

  • @DoingShitTheProWay
    @DoingShitTheProWay 6 лет назад

    amazing

  • @upenderrawat8340
    @upenderrawat8340 6 лет назад

    AWESOME VIDEO ! (Brackeys), do you work on 3D Max and maya ...

  • @eduardberisha9785
    @eduardberisha9785 3 года назад

    Ti Amo, I love you, ich liebe dich!! You saved my butt so much! Now can i have a decent looking game. Thank You!

  • @Finsterfluffy
    @Finsterfluffy 4 года назад

    thanks ;)

  • @bearsandboys9536
    @bearsandboys9536 3 года назад

    LIFESAVER

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

    Hi! Wondering if you might consider updating the link to the tileset template? It no longer functions. Thanks so much for your great videos!!

  • @gamedevdanny
    @gamedevdanny 2 года назад +3

    The link for the template no longer works. Is there somewhere else I can get the tileset template or how to set one up like this?

  • @franciscom2788
    @franciscom2788 3 года назад

    how did you configure ir so when you draw in one all the tiles are afected? amazing vid btw!

  • @acrxd6374
    @acrxd6374 6 лет назад

    sup love your pixel art do more pls

  • @Raidevoriginal
    @Raidevoriginal 3 года назад +5

    Anyone watching this tutorial in 2021. If the link isnt working for you, copy it and open a new tab and paste it.
    You're welcome.

    • @JohnyS113
      @JohnyS113 3 года назад +1

      jesus, thank you you saved my life.

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

      It works ! thank you :D

    • @Raidevoriginal
      @Raidevoriginal 2 года назад

      @@niillaa Glad this is still helping people 9 months on aha

  • @JensorX
    @JensorX 6 лет назад

    What do you think about the Godot Game Engine? Can it already compete against Unity?

  • @waterandtreefilms
    @waterandtreefilms 6 лет назад

    would REALLY like to see a tilemap video. ive literally searched "unity tilemap brackeys"

  • @nekicudnicica
    @nekicudnicica 6 лет назад

    I would definitely want to see a tutorial on unity's tilemap