How to Make a Tumblr Theme

by • Mar. 18, 2010 • How to Make a Website, Product Reviews, Recent Blog PostsComments (8)889

I can’t lie. I have often searched Google for tutorials on how to make a Tumblr theme. I have made a few small themes in the past, but I never really knew what I was doing. Until now.

About a week ago  NetTuts posted a FULL video series called Tumblr Theme Design: Start to Finish. I can’t tell you how excited I was! This is what I’ve been looking for.

**Update: Check out my review of the new Theme Tumblr Like a Pro eBook, by Jeffery Way. In Theme Tumblr Like a Pro, NetTuts+ manager Jeffrey Way shows you just how much you can do with Tumblr, while still maintaining its core principle: simplicity. I think this book a better option than paying for the subscription to NetTuts, but feel free to read the rest of this article anyway!

What is NetTuts?

Before I give you details on the video series, let me give you a little background on NetTuts. NetTuts is a membership website which costs only $9 (and I am a very proud and satisfied member). They offer some of the most detailed and easy to follow video tutorials available online.

I initially signed up because I wanted more tutorials on building WordPress Themes from scratch and was delightfully surprised when I saw the Tumblr Theme Design video series appear in my Google Reader feed.

NetTuts not only gives you tutorials for the web, but also includes a membership to Psd Plus (cool Photoshop tutorials), Ae Plus (Illustrator tutorials), Audio Plus (audio editing and effects tutorials) and Vector Plus (vector based tutorials).

NetTuts has over 5,000 happy and loyal customers. As a member of NetTuts each week  brand new videos are posted to help expand you skills as a developer. The Plus tutorials is an investment in your skills as a web developer and they want to make sure it pays off. Because of this, each Plus tutorial teaches skills that professional web developers can use to add extra value for clients (or personal projects) and, in doing so, add extra value to your business.

What does it Cost?

Plus membership is $9 a month, or $22 for three months, or $78 for one year. For the cost of a magazine subscription you can get access to all of the following:

  • Weekly video lessons by industry leaders;
  • Access to all past and future video lessons;
  • Sought-after techniques in web development across a range of common coding languages and frameworks;
  • Access to our Tuts+ Dashboard, bonus content and features.
  • Full access to Net Plus, Audio Plus, Ae Plus and Vector Plus.

Is it Worth it?

Well heck yeah NetTuts is worth it! And if you’re not satisfied, you can get your money back, in full. It’s their 100% money back guarantee. They even offer easy to follow instructions on how to cancel your subscription.

What’s included in the Tumblr Video Series?

  • A downloadable zip file containing all the associated files
  • 8 excellent quality video screencasts
    • Intro
    • Slicing
    • Markup and Tumblr Tags
    • Coding the CSS
    • Configuration Options
    • Custom Fonts
    • Slideout Panel Html and CSS
    • jQuery and Complete Project
  • Associated Fonts
  • All images

From the NetTuts Website:

Tumblr’s popularity, over the last year, has increased exponentially. The reason why is quite simple: Tumblr is flexible, powerful, and – most importantly, a pleasure to work with. Unfortunately, there aren’t many training resources available for the platform yet. In this video series, we’ll go through the process of taking a Tumblr theme, designed in Photoshop, and converting it into a fully working theme. Download this mammoth video training series!

Why should you pay for the membership?

Well there are two reasons:

  1. There is NO OTHER TUTORIAL available online like this. Sure Tumblr offers a free help page for building custom themes, but honestly it was just too hard for me to follow.
  2. If you don’t want to continue. Pay NetTuts the measly $9, download the tutorial and cancel your membership. Simple right?

Who is this video tutorial is good for?

  • You have a good (but minimal) general knowledge of CSS/Xhtml
  • You already have a psd ready for slicing
  • You are familiar with Tumblr themes but would like detailed information on how to customize it
  • You are a beginner, but have the desire to broaden your skillset

If none of these reasons apply you to, consider downloading a free Tumblr theme.

My First Tumblr Theme

I blew past the first few NetTuts videos in just a few hours. Whats’ great about the video is that I was able to pause or rewind when the Jeffery (the host) was going too fast.  The instructions were organized and well planned that even a beginner keep up. I am a web designer but my coding experience is limited. I am comfortable editing CSS, but building a website on my own is another story.

I was so inspired by what I learn I decided to jump in and create my own Tumblr theme. It has taken me a little more than a week, but it’s about 95% finished and I will be submitting it to the Tumblr Gallery when it’s complete. It’s called Be Original and was inspired by my favorite desktop wallpaper designed by Adam Betts.

What do you think? The tutorial even teaches you how to create this cool sliding panel on the left (where the See More button is) that gives a visitor access to additional information.

So what are you waiting for, sign up at NetTuts and getting started!

** Update: The Be Original Tumblr theme is now complete as has been submitted to Tumblr. I am hoping it will be added to the soon.  But in the meantime you can get it here –> Be Original Tumblr Theme .

Also, don’t forget to check out my review of the new Theme Tumblr Like a Pro eBook, by Jeffery Way. In Theme Tumblr Like a Pro, NetTuts+ manager Jeffrey Way shows you just how much you can do with Tumblr, while still maintaining its core principle: simplicity. This is a great resource to add to your web designing library.

  • http://tehstoryofagirl.tumblr.com/ Eysh

    Um hi. I’m looking for tumblr tutorials and kind of teaching myself css. Can I use this and customize it? :)

  • arsha

    Sure! Just please leave my credit link in the footer. Thanks!

  • http://hismuffin.tumblr.com Tia

    So you have to have photoshop in order to make a successful theme?

  • Taylor

    Hi, im wondering how u get the “it does not matter how slow u go so long as u do not stop” and other stuff off of the website!!! can u answer on here? if u cant send an answer to my email !! thanks

  • arsha

    Hi Taylor, that is just the initial preview provided by Tumblr. Hit the green Save and Close at the top right of the screen and you will be sent back to your live version of the site. There you should be able to add your own content. Thanks!

  • arsha

    No, there are tons of free Photoshop “like” options available online. I would consider using Gimp (http://www.gimp.org/). It’s a free alternative to Photoshop and works just as well. Thanks!

  • shwen

    how to create tumblr theme ?

  • http://www.mariogembell.com Dannie Herdyawan

    Cool, i like it . . .