Try Tuts+ Premium, Get Cash Back!
Win New Customers With a Free Trial Badge
videos

Win New Customers With a Free Trial Badge

on Dec 15th 2011 with 29 comments
Tutorial Details
  • Topic: Photoshop
  • Difficulty: Beginner
  • Screencast duration: 11 mins

Final Product What You'll Be Creating

Download Source Files

What better way to win new customers than by offering something for nothing? Join me in this quick screencast, and we’ll design a versatile free trial badge in Photoshop.

Watch Screencast

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.usabilla.com Yoeri

    Hey,

    I miss some kind of shadow behind the ribbon which make you feel that the ribbon actually came from behind the badge, is there a reason why you didn’t implement that? Great tip on the expand object, that’s gonna be a timesaver for me, thanks!

  • Frank

    Hi Adi, glad you’re back.i started to miss your tuts al little. This one is really nice, recorded with your new blue snowball?
    Hope to see more soon, especially the WP conversion ;-)

    Thanks!

    • Sean

      Adi, I hope you have more tuts in store…I have learned a lot already :)

  • Dougieladd

    As usual Adi, good tut, so simple and effective!

  • supprof

    thank you for this amazing tutorial Adi Purdila
    as always you’re tutorial are exelent
    i wished if you added to your button the dashed line as sewing effect
    but that was perfect adi
    may be you are going to make another template serie from photoshop to html
    thank you adi purdila here in this website of wedesign you did the best job
    thank you very mutch see you soon

  • Pingback: Win New Customers With a Free Trial Badge | Shadowtek | Hosting and Design Solutions

  • http://laranzjoe.blogspot.com lawrence77

    pretty nice adi..

    First seeing the title I thought this is a tutsplus giveaway :P :D

  • http://www.adipurdila.com AdiPurdila
    Author

    @Yoeri Since we have a dark BG, I didn’t think a shadow would make any difference behind that ribbon.

    @Frank Yep, It was time to put the snowball to work :D

    @supprof I wanted to keep it simple, adding extra stitches and stuff would have been an overkill.

    Glad you guys liked it :)

    • supprof

      it’s good to have you back Adi
      so are we going to see another tutorial before 2012 i hope!
      may be a forum theme
      thank you adi purdila keep going

  • http://www.idesignit.co.il/ Elron

    Here’s my result, its a little diffrent:
    http://i40.tinypic.com/fv8keh.jpg

    • http://www.idesignit.co.il/ Elron

      Oh and btw, this is hebrew. :)

      • http://www.patrickruegheimer.deviantart.com Patrick

        Even tho I can’t read the upper font it looks just delicious!
        Nice badge. :)

    • http://www.adipurdila.com AdiPurdila
      Author

      Cool. I guess you could work on that top edge a bit, looks kinda ragged. Or was that the effect you wanted?

      • http://www.idesignit.co.il/ Elron

        Its always nice to know other’s opinion! how does it look now?
        http://oi40.tinypic.com/155ntxd.jpg

        • http://www.adipurdila.com AdiPurdila
          Author

          No no, I meant the top edge of the ribbon. That one looks a bit weird.

          • http://www.idesignit.co.il/ Elron

            i think that what you ment there was on purpose… anyway here’s my last version:
            http://oi39.tinypic.com/izta9h.jpg

            Thanks for the cool tut! its a good practice.

        • http://www.adipurdila.com AdiPurdila
          Author

          Oh yeah much better now, good job :D

          • http://www.rafalborowski.com Rafal Borowski

            @Elron
            The last version looks ultra sexy :] Love it

            @Adi
            I was soooo missing your tuts. It would be great if you could squeeze another one just before chirstmas – like a big bonus under the christmas tree :)

  • Abramo Franceschini

    Nice tip Adi, but we definitely need another of your long detailed design/development screencast series!
    i love so much the mix of your style, your workflow and your skills in giving explanations…

    • Steve

      I second this! Would love to see a PSD>HTMLl>Wordpress series :D

  • Frank

    I totally agree with you guys!

    And i think Adi is working on a HTML>Wordpress screencast.
    Correct me if i’m wrong Adi !

  • http://www.adipurdila.com AdiPurdila
    Author

    Thanks for all your comments guys. Frank is right, the WP tut is coming. Not before Christmas, but definitely within a month’s time.

    • http://laranzjoe.blogspot.com lawrence77

      wow epic…!

  • alexandra

    nice one. missed your tuts. looking forward to the next series!

  • Jeroen Franse

    I created the HTML and CSS for this badge without images. http://jsfiddle.net/jeroenfranse/khD2w/ use chrome. Check the website regularly as I have a few ideas on how to simplify the CSS and make it compatible with IE7.

    • http://www.adipurdila.com AdiPurdila
      Author

      Oh nice, good to see my ideas being implemented :D

      Nice work!

    • http://www.facebook.com/karol.cholewa Karol Cholewa

      awesome!

  • http://foxandxss.net Fox

    We love you Adi, your tuts are awesome, all of them.

  • http://www.tajfa.com Ivo

    juhu heres mine after followin this tut, thanks Adi ! :)

    http://i41.tinypic.com/oa7mol.jpg

  • http://www.facebook.com/karol.cholewa Karol Cholewa

    thank you, quick, easy, beautiful, and useful.