Information Technology Reference
In-Depth Information
Keep in mind that the more you know, the better you'll be able to design and develop
your own Tumblr themes — or at least get familiar with the structure of existing themes
in Tumblr's Theme Garden.
Gathering the tools you need
Before you develop or build your theme, you need to come up with a design for it. That
involves design skills and working knowledge of one or more drawing, web-graphic, and
photo-editing software programs. The most popular programs include Adobe Illustrator,
Fireworks, and Photoshop, but you could also use any of the free, open-source software
alternatives such as GIMP, DrawPlus, Inkscape, Photoscape, or Picasa.
After you've designed your new theme, you need to optimize all your web graphics and
build your theme as a standard HTML/CSS web page. For best results, you may want to
consider using web-development software such as Dreamweaver or Coda. With a
WYSIWYG (what you see is what you get) or coding program, you'll be able to develop
your theme even faster than you would by using a simple text editor like Notepad or
TextEdit.
Following a theme-creation workflow
Everyone has his or her own way of working, but if you're new to Tumblr theme design,
you might be open to suggestions about best practices and workflows that can maxim-
ize your effectiveness and make you as productive as possible.
Here's an example of one Tumblr theme-creation workflow that you might adopt for your
own projects:
1. Design your theme in Photoshop or another software program.
2. Optimize all your web graphics as JPG, GIF, or PNG files.
3. Build your theme as a standard web page with HTML/CSS and JavaScript as needed
using a web or code editor such as Dreamweaver or CODA.
4. Convert your HTML into Tumblr-friendly markup using
variables
and
blocks,
as
defined earlier in this chapter. For example, instead of writing
<title>Our first theme</title>
you'd convert your code to
<title>{Title}</title>
The actual title text will be input through the Customize Themes panel. For a com-
plete listing of Tumblr's markup parameters, see
www.tumblr.com/docs/en/
