Hip Hop Makers

We Focus on Music Production, Music Producers, Free Music Resources, Beat Selling Tips, FL Studio, Beat Marketing Tips, Inspiration, and More.

  • Hip Hop Makers on FaceBookHip Hop Makers on FaceBook
  • Hip Hop Makers on TwitterHip Hop Makers on Twitter
  • RSS FeedRSS Feed
  • Hip Hop Makers on YoutubeHip Hop Makers on Youtube
  • Free Samples & Software
    • Free Music Samples
    • Free VSTs
    • Free Reason Refills
    • Free Music Software
    • View All
  • Producer Videos
    • Beat Making
    • In the Studio
    • Music Tips
    • Events
    • Other
  • Producer Store
  • Producer Interviews
  • Articles
  • Tutorials
  • Music Gear
  • Beat Making Videos
  • FL Studio
  • Free Music Samples
  • Sell Beats Online
  • Free VSTs
  • Free Reason Refills
  • Propellerhead Reason
  • Most Popular Post
  • Music Polls
  • Producer Talk
  • Free Music

59

Graphic Design · Popular Post · Tutorials

How to make a animated banner in Photoshop

  • by Mark V
  • March 26, 2008

Here is a quick tutorial on how to create a animated banner in Photoshop. The banner can be used to promote your music, website, myspace page, or what ever you want.

HipHopMaker Banner

How to Make a Animated Banner

Here is the link to the image: CLICK HERE!

This is just one example of a banner, you can do this in a million different ways. Watch the video, and submit your finished banner to the photo section of the site. There you can show your skills and promote yourself.

P.S.
Sorry if I sound a little tired, I did this at 6 in the morning.


Tags: BannerPhotoshopTraining VideoTutorial

— Mark V

I'm Mark Valenzuela, a self taught web designer with a passion for music production. I started Hip Hop Makers over 4 years ago with the hopes to help and share knowledge with others. Please subscribe to the website, and follow HHM on Twitter, and Facebook.

    Related Posts

  • Logic Sampling Tutorial Logic Sampling Tutorial
  • How to Create Better Intros, Choruses, & Verses in Software ( Video ) How to Create Better Intros, Choruses, & Verses in Software ( Video )
  • 8 Free Photoshop PSD File Sites ( 1000+ Free PSDs ) 8 Free Photoshop PSD File Sites ( 1000+ Free PSDs )
  • Video: Make your Hip Hop Beat into iPhone ringtone for FREE! Video: Make your Hip Hop Beat into iPhone ringtone for FREE!

59 Comments

  1. Thomas says:
    September 10, 2012 at 3:33 am

    Dear Mark:
    Thank you for a very clear description.
    Is it possible to insert links to different page on each frame using the PS animator.
    For example the frame one with hyperlink to http://www.x.com and frame two to http://www.y.com?
    can you please make a video about it/…
    THANK YOU IN ADVANCE
    Thomas

    Reply
  2. Andrew says:
    July 31, 2012 at 9:07 am

    I don’t understand how you selected the circle at 3:31

    Reply
  3. David says:
    May 8, 2012 at 10:28 am

    Man! this is great!, I do GCSE ICT and this has really helped! thanks man!

    Reply
  4. Krissie says:
    April 23, 2012 at 12:09 am

    Wow thank you. This was the most helpful thing i have found on the internet. Thank you for sharing. I am grateful.

    Reply
  5. Theo'... says:
    March 9, 2012 at 5:33 am

    Hi this is a great tutorial…
    I would really like to learn more of the similar animations using Photoshop or similar softwares…Please feel free to email me.
    I’m still learning to be a webdesigner. Thanks alot for that tip…
    Theo’…

    Reply
  6. beat making programs says:
    December 9, 2011 at 5:33 pm

    Thanks , I have just been searching for information about this subject for ages and yours is the best I’ve came upon so far. However, what in regards to the conclusion? Are you certain in regards to the source?|What i do not understood is in reality how you’re not actually much more neatly-appreciated than you might be now. You’re very intelligent.

    Reply
  7. Morgan says:
    October 18, 2011 at 3:09 pm

    Thank you so much for making such a great tutorial. This is my very first time even using photoshop and I needed to make an ad for my job. I totally impressed everyone. And btw…your voice sounds super sexy ;)

    Reply
  8. Raj Mehta says:
    October 18, 2011 at 1:00 am

    Nice banner design

    :)

    Reply
  9. Mariane says:
    August 26, 2011 at 8:56 am

    Excellent tutorial. Thanks!

    Reply
  10. Quame (London U.K) says:
    July 18, 2011 at 10:28 am

    Whoa!! Best banner tutorial ever!!!

    Reply
  11. Tim says:
    June 28, 2011 at 3:38 am

    Amazing Tutorial Bro!

    Reply
  12. Jane says:
    April 15, 2011 at 5:15 am

    i’m a print designer – was just asked to do a simple animated banner for a client. found your tutorial – WOW – doable. THANKS.

    Reply
  13. Daniel says:
    April 4, 2011 at 3:48 am

    you’ve got some skills bro. Make it look so easy. thanks!

    Reply
  14. raven says:
    March 23, 2011 at 11:55 am

    sweet.
    this helped me alot

    Reply
  15. hebegubele says:
    February 17, 2011 at 2:28 am

    I posted one more comment to your blog, but you didnt approve that. I still keep check your blog anyways..

    Reply
    • Mark Valenzuela says:
      February 17, 2011 at 6:17 pm

      Hi.

      I’m not sure what comment you posted. Sometimes comments get thrown in the spam folder.

      Sorry about that.

      Reply
  16. farid says:
    November 24, 2010 at 9:55 am

    Eye catching looks

    Reply
  17. StyleBySonja says:
    November 24, 2010 at 8:48 am

    Hey! Thanks so much for the help, I just finished my animated Fashion banner. You can check it out at stylebysonja.com!

    S.

    Reply
    • Mark Valenzuela says:
      November 24, 2010 at 11:18 am

      Cool banner. Good Job

      Reply
  18. pyes says:
    November 16, 2010 at 10:43 am

    How did you get that same banner to link? Can I do that with photoshop also? You did not explain how to hyper link, but the one above hyper links….that is what I need to know for animated banners. please email me with any help you may be able to provide.

    Reply
    • Mark Valenzuela says:
      November 17, 2010 at 8:39 am

      Hi,

      I did a follow up video to this. http://hiphopmakers.com/how-to-upload-a-banner-to-put-on-myspace-or-other-web-sites

      Hope that helps.

      Reply
  19. Chris says:
    August 19, 2010 at 12:04 pm

    Thank you so much, this really helps. I also looked at this video
    youtube.com/watch?v=vusI-sDEXhE

    Reply
  20. sherry says:
    August 10, 2010 at 9:08 am

    THANKS FOR THE TUTORIAL YOU DID A GREAT JOB

    Reply
  21. BLUETOOTH says:
    May 20, 2010 at 3:43 pm

    Thanks man, excellent tutorial.

    Reply
  22. vikram says:
    May 15, 2010 at 6:25 am

    hi,
    Good tutorial. One thing I unable to understand. How you fill color by selecting ellipse tool. When I tried it make whole background black.

    Reply
  23. LoS says:
    April 30, 2010 at 6:04 pm

    great tutorial completely improved my marketing plan

    Reply
  24. benno says:
    April 23, 2010 at 4:16 am

    thx man….

    Reply
  25. Bhawna says:
    March 14, 2010 at 11:16 pm

    i’m doing a animation in arena pitmpura. and this is normal animation i’m also done it. so next time create a good animation

    Reply
  26. farida says:
    March 8, 2010 at 11:58 pm

    wow this is great tutorial for Ad banner .. thank u so much

    Reply
  27. nitGreen says:
    March 2, 2010 at 7:59 am

    Thank you for posting such a detailed tutorial, very helpful..

    Reply
  28. aimraj says:
    February 2, 2010 at 3:51 am

    Really nice tutorial…….. Thanks……………….

    Reply
  29. Confused says:
    January 2, 2010 at 8:59 pm

    Which version of photoshop do you use? I do not have an animation tool….

    Reply
    • Mark Valenzuela says:
      January 4, 2010 at 10:05 am

      I think i was using CS3.

      If you don’t have the animation tool. You might have a older version of photoshop when i came with 2 versions of image editing software. That means if you have image ready with photoshop. you should be able to do the animated in image ready.

      Reply
  30. PredyY says:
    December 5, 2009 at 11:44 am

    Hy… could you help me out please… I need a banner like 140 x140 or 160×60 …. animated … and cool for my site…
    contact me on ID: szasz_adorjan
    if u can do it ….

    I need a cool banner soo much.. I’ll post u’re banner too on my site… :)

    Thx for HELP…
    Best Regards,
    PredyY.

    Reply
  31. Elina says:
    September 2, 2009 at 4:56 pm

    Thanks! It was great! :)

    Reply
  32. Craig says:
    August 20, 2009 at 12:22 pm

    Alex Ross Just Use The Special Magic Wand Tool To Cut Out The Shoes. It Will Just Jump Around The Shape Of The Shoes. Happy I Could Help :D

    Reply
  33. Rachel says:
    July 12, 2009 at 2:09 am

    This was awesome! Thank you so much. I have been looking for so long how to make an animated banner and you made this soooo simple. Thanks!

    Reply
  34. Persis says:
    April 3, 2009 at 6:52 am

    Thx, it was very informative.

    Helped me in stepping my gfx game up

    Reply
  35. D says:
    March 24, 2009 at 12:17 am

    Great tutorial. thanks!

    Reply
  36. Jennifer says:
    March 22, 2009 at 7:24 pm

    I can’t find the animation button in photoshop elements. Help :)

    Reply
    • hiphopmakers says:
      March 22, 2009 at 9:21 pm

      Sorry, You cant animate images in photoshop elements. You have to have one of the regular photoshop programs

      Reply
  37. pemzlike says:
    March 13, 2009 at 1:58 pm

    thx bro its excellent you are the king ;)

    Reply
  38. bee says:
    February 10, 2009 at 5:36 am

    thx man, i watched it at 5 am my time….so i feel ya…but great job on explaining. reading the helpfiles did take 10x so long, and was 2 hrs lost effort. very appreciated

    Reply
  39. sunny says:
    February 9, 2009 at 7:27 am

    It was my first time trying photoshop and on top of that i was using different version that the one used in video so you can tell how frustrating it was for me. Anyway what I want to know is what version of photoshop did he use in the video? I would appreciate your help. Please email me the answer at desisunny786@aim.com. Thanks in advance.

    Reply
  40. A.Z says:
    January 9, 2009 at 3:28 am

    Awesome! This is what I’m looking for. Before this I used to think that designers are using a special software to create the animated banner. Really surprise how easy to make it using photoshop.

    Thanks again!

    Reply
  41. modrama says:
    December 10, 2008 at 6:51 am

    a 1 all i can say

    Reply
  42. Alex Ross says:
    November 8, 2008 at 11:55 am

    Hi,

    I am designing a catalogue however the photos have a background, for
    example the pictures are of shoes but i can see the table the shoe is
    sitting on and the background behind the shoe, is there a way to cut
    the shoes out in Photoshop so the background is removed?

    Thanks

    Reply
  43. Jehnylene says:
    November 1, 2008 at 3:52 pm

    Thank You so much for this very helpful video! Its so cool! THANK YOU so so much!

    Reply
  44. MIchelle says:
    October 26, 2008 at 12:44 am

    Excellent Tutorial. Really easy to follow, and at the end of it I have a great banner that I had absolutely no idea how to make before watching this tutorial.

    Reply
  45. conartist says:
    September 15, 2008 at 4:58 am

    Great Tutorial. UR right Little Brother is Awesome.

    Reply
  46. Tara P. says:
    September 10, 2008 at 3:09 pm

    Hey, I just have to say FINALLY, an easy to understand banner making tutorial! I have been looking everywhere for one, and finally found one I can understand. Now, I make banners all the time!

    Reply
  47. TMAQ says:
    September 7, 2008 at 3:01 am

    I really got a lot out of your tutorial on the banner. Thanks so much. But can you tell me one more thing? How do i post the gif to mayspace? Not in the profile pic/album section, but on the main page? I appreciate your help.

    -TMAQ
    of The PreZidents

    Reply
  48. L.E. Patterson says:
    August 3, 2008 at 5:20 am

    Thanx Your Tutorial For The Animated Banner Was Wonderful

    Reply
  49. ani says:
    June 7, 2008 at 8:07 pm

    woah. this was awesome. yu taught me so much in so little time =D great job!

    Reply
  50. Rajita - Logo Design says:
    May 27, 2008 at 6:58 am

    This is really good sample of musical banner.

    Reply
  51. Brenda says:
    April 17, 2008 at 7:13 pm

    You just got me threw a very frustrating day!!!! Wish I would have found this 12 hours ago. Thanks soooo much for making this tut.
    I knew it couldn´t be as hard to make a bloody banner as it was turning out to be.

    Reply
  52. Eren says:
    April 13, 2008 at 9:16 pm

    thx brother

    Reply
  53. jehova says:
    March 31, 2008 at 11:47 am

    yeh!!!! thank you very much.

    that was an excellent tutorial!!!!!

    take care and hit us up with more knowledge

    Reply
  54. Karl says:
    March 27, 2008 at 2:54 pm

    Thank you for the tutorial, very helpful, I learned a lot and found your voice very clear and focused on explaining what you were doing. Please come out with more :)

    Reply

Leave a comment

Click here to cancel reply.

  • Sell Beats Online
  • Subscribe to the Newsletter:

    Music producer inspiration, news, beat selling tips, free sounds, interviews, and more.

    • bondaxRed Bull Studio Presents “Bondax”May 22, 2013
    • young-guruPopTech Young Guru Borrows a BeatMay 20, 2013
    • WyclefStudio Session: Wyclef & Young Chop In The Lab Working On “Hope & Pray”May 16, 2013
    • J. RoccJ. Rocc’s Vinyl Collection – Crate DiggersMay 14, 2013
    • Cece G - Music ProducerCeCe G: Female Producer Making Beats in FL StudioMay 11, 2013
    • NikeFind Your Greatness – NikeMay 8, 2013
  • Follow Us on FaceBook

  • Home
  • Tutorials
  • Graphic Design
  • How to make a animated banner in Photoshop
    • Join Mailing List

      Get news delivered directly to your email box to get tons of free sounds, tutorials, and music related news.

    • Recent Comments

      • MrMajestic913 on Studio Session: Wyclef & Young Chop In The Lab Working On “Hope & Pray”
      • K. Riley on Studio Session: Wyclef & Young Chop In The Lab Working On “Hope & Pray”
      • forestpunk on CeCe G: Female Producer Making Beats in FL Studio
    • Polls

      Do you own a MPC?

      View Results

    • Home
    • About Hip Hop Makers
    • Contact
    • Disclaimer
    • Privacy Policy
    • Site Map
    • Hip Hop Makers on FaceBookHip Hop Makers on FaceBook
    • Hip Hop Makers on TwitterHip Hop Makers on Twitter
    • RSS FeedRSS Feed
    • Hip Hop Makers on YoutubeHip Hop Makers on Youtube

    © 2013 Hip Hop Makers - Music Production Blog