Themes Tumblr

Today I am proud to bring you guys Pt. 3 of the "Creating a Tumblr Theme from Scratch Series". This episode in the series we will finally begin coding up our PSD to HTML. In order to create the perfect Tumblr Theme you need to make sure that your HTML is full stable with filler content before starting to add the Tumblr tags and removing things we don’t need, which is what we will be doing today! Let’s get started…

So, first thing is first, I am going to save us a bunch of time. Instead of wasting your time by showing you what you need to slice up for our document I will just provide the images. It is pretty obvious, especially in this design, to see that we are only going to be slicing up a few images, and the rest we will do with CSS.

Download Image Files

Alright, let’s get started coding up our main page to HTML. The first thing we are going to want to do is set up our folder layout. Create a new folder on your desktop and name it whatever you want. Now, within the folder, we are going to set up an images folder. Copy and paste the images that you downloaded above into the images folder and we are ready to rock and roll.

Open up your favorite text editor, or the editor that you choose/have to use, and right away save your document as index.html. That get’s that out of the way and makes sure that we have at least our open document and saved.

As I said earlier this tutorial, since it’s not the most important part of why I am writing this series, will be a pretty quick tutorial. We are going to be hitting everything in series, and all the numbers that you need are provided in your PSD document (which are provided in Part 1 of this series) so I am not going to explain where the numbers come from to save us both time.

Now, let’s start our first section. read more