Theme Tumblr Like a Pro eBook Review

Apparently I’ve been living under rock and didn’t realize a new tutorial ebook has published on how to make a Tumblr theme called “Theme Tumblr Like a Pro“, by Jeffery Way (at NetTuts). Now if you have read my post on How to Make a Tumblr Theme, then you should be familiar with that name already. He is the mysterious voice behind the Tumblr video tutorial located on the NetTuts. He decided to take his very  popular Tumblr Tutorial series one step further by creating a complete guide for newbie Tumblr Themers.

This is the most complete Tumblr resource book I have seen thus far. No one else has even DARED to create a Tumblr Theme Tutorial because of how intense it can be. Not only do you need a clear understanding of HTML/CSS, you will need a firm grasp of Tumblr’s custom codes and some sense of design.

Is this book better than the NetTuts Tumblr Tutorial series?

Well … yes. My biggest frustration with the NetTuts Tumblr video tutorial series is that after I finished my theme and I tried to submit my theme to Tumblr’s Theme Garden I missed a few steps and custom codes which I needed to get my theme approved. Luckily I was able to fix the problems with my Tumblr theme because of all the great information Jeffery provided, but key parts were missing. These essential elements however, are covered in the book.

Also I like the fact that with the book you can follow along with the video. With the original Tumblr video tutorial I found myself pausing and rewinding frequently to help keep up with Jeffery. He moved kind of fast through the steps, which made it tough to follow along at times.

How much does it cost?

The cost of the book is $29. Yes, it costs a bit more than the How to Make a Tumblr Theme video tutorial (which only cost’s $9), but you also get more. You get the ebook, original source files to work from and the video series. So like I said, it costs a bit more BUT, you don’t have to sign up for a subscription at NetTuts to get the tutorial, especially if you are the type that will forget to cancel the $9 payment before the next billing cycle.

What else comes in Theme Tumblr Like a Pro tutorial series?

  • The fundamentals: template tags, basic structure
  • Blocks
  • The various post types and variables
  • Build a theme
  • Working with the Tumblr API
  • Passing Tumblr-specific values to your JavaScript
  • Adding enhanced functionality with JavaScript and the API
  • A plethora of miscellaneous recipes
  • Working with custom meta types to create an options panel, which then provides maximum flexibility for the user of the theme
  • And plenty more…

Did you buy the book?

Yes I did. I like to try out everything I buy before I recommend it. After I made my first Tumblr theme, I realized there was still alot more I needed to know about how to make a Tumblr theme. I have a few new ideas I’m working on and I’ll update this page, once I have something to show off! lol

Click here to buy your copy of the “Theme Tumblr Like a Pro” tutorial series.

Are there any other books you recommend?

Yes! If you are new to web design, Photoshop or HTML/CSS, you should strongly consider adding the following tutorial books to your home library.

  • Photoshop to Html ($29) – In “Photoshop to HTML ”, Nettuts+ editor Jeffrey Way takes you through the entire process of converting a design from Photoshop into a complete HTML /CSS website! But this is NOT just an eBook. It also comes packed with extras! You also get a directory of Photoshop, HTML and CSS files for you to use as you work through the book AND a series of 14 screencasts covering the whole project from beginning to end.
  • Mastering Photoshop ($20) – Mastering Photoshop is written for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills. The eBook contains 178 pages, explaining fundamental techniques that Web designers need to know to produce high-quality work in Photoshop.
  • How to Build a Succesful Blog Business ($39) – How to Build a Successful Blog Business is a straight forward guide to building a publishing business online that covers everything from choosing a niche to hiring staff, registering a business to selling it, finding traffic to monetizing it.

I know you’re looking at the prices and shaking your heads, right? But consider this web design is a growing field (especially since I’ve been a successful designer for more than 10 years), Tumblr (and their themes) have grown and a newbie web designer can easily create a steady stream of income buy selling Tumblr designs. Designers on NetTuts can easily make a few thousand dollars a month selling themes. In addition, selling Tumblr themes has become so popular, that even Tumblr has created a premium themes section, where users can purchase top notch Tumblr themes.

With the unexpected popularity of my first Tumbr them “Be Original“, I’ve even considered becoming a professional theme designer myself!

So good luck! If any of you try out the tutorial and have a theme you want to share, feel free to contact me. I would love to post it in my Free Tumblr Templates section! (Even if it doesn’t make it into Tumbr Theme Garden!)

All About Tumblr Backgrounds

The reason way I love Tumblr as a content management system because of how simple it is to use and customize. One of the easiest ways to spruce up your current Tumblr template is to change your Tumblr background image. Easy enough, right? So today’s post is dedicated to helping you find some cool Tumblr backgrounds and show you how to install it.

Why Should I Change My Background?

There are hundreds (if not thousands) of Tumblr templates available online and the best way to set your tumblog apart from all the rest is by changing your Tumblr background. A new background image can easily add a bright and interesting look to your Tumblr template without much effort.

200+ Free Tumblr Backgrounds

Here I have complied a list of more than 200 hundred free Tumblr backgrounds which can be downloaded and installed into your theme within minutes.

GypsyGarden (1 pattern)

Pattern 2 (14 patterns)

Patterns 2 (6 patterns)

Textured Stripes (6 patterns)

Photoshop Pattern (4 patterns)

Pattern Part1 (9 patterns)

Patterns .24 (33 patterns)

Lace Patterns: the prelude (6 patterns)

Untitled patterns 03 (12 patterns)

Patterns .23 (33 patterns)

Green Patterns (6 patterns)

Patterns .27 (50 patterns)

Patterns 3 (6 patterns)

Softly Plaidly- Peachy Keen (11 patterns)

Black – White patterns (13 patterns)

PINKgossip_04 patterns (13 patterns)

Additional Tumblr Background Image Resources

How to Change a Tumblr Background

Now that you have picked out your new Tumblr background and downloaded it to your local computer, it’s time to add it to your theme. There are two ways to add a background to your Tumblr theme. I will discuss them both below.

Option 1: Appearance Panel

If you can add a new background through your Tumblr Customize > Appearance Panel choose this option.

  1. Login into your Tumblr account and click CUSTOMIZE in the right side of your dashboard.
  2. When the customization section opens, click APPEARANCE at the top of the page.
  3. When the panel opens you simply click the UPLOAD button to select your theme from your local computer and you’re done! If you have the option for repeating your background choose “repeat-y” if you pattern needs to repeat vertically (from top to bottom). Select “repeat-x”, if you background need to repeat horizontally (from left to right). Choose “repeat-xy”, if you image needs to repeat both vertically and horizontally. You can also choose “no-repeat”, if you have a really large background image that doesn’t need to be repeated.

Option 2: Hand-coding Custom HTML

Use this option if you do not have the Tumblr Appearance Panel available with your theme.

  1. Login into your Tumblr account
  2. You will need to upload your new background image onto Tumblr’s Static Image Server
  3. After uploading your file, make note of your image url. You can copy it to NotePad or SimpleText for safe keeping.
  4. Return to your Tumblr Dashboard and click CUSTOMIZE in the right side of your dashboard.
  5. Select THEME from the top menu.Click the USE CUSTOM HTML buttonLook for the BODY tags. This is the code we will be editing. (Your coding won’t be exactly like this, so you should look for something similar near the top of the code.)

    body {  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top  }

  6. Paste your image url  into the CSS
    body {  background: #f8f7e5 url(http://safe.tumblr.com/theme/3383425/) no-repeat center top  }
  7. You may need to adjust your background image by changing your background color and whether it repeats or not.
    body background: #f8f7e5 url(http://safe.tumblr.com/theme/3383425/) no-repeat center top  }

    Choose “repeat-y” if you pattern needs to repeat vertically (from top to bottom). Select “repeat-x”, if you background need to repeat horizontally (from left to right). Choose “repeat-xy”, if you image needs to repeat both vertically and horizontally. You can also choose “no-repeat”, if you have a really large background image that doesn’t need to be repeated.

  8. Click the UPDATE PREVIEW button in order to see your changes.
  9. If you are satisfied with the results click the green SAVE & CLOSE button at the top right of the page.
  10. Your Done!

Additional Resources



Top 10 Ways To Get a Free Domain Registration

When you see the words “free domain registration” your eyes will typically light up, especially if you don’t have much money. Years ago, I probably would have suggested you NEVER register a free domain name, because of all the hidden rules and fees, but in today’s market more and more reputable hosting providers are offering free domain registrations as a part of their paid hosting plans.

With a free domain name registration you can still have your website and can still manage it with a professional address instead of a sub-domain. You will be able to install WordPress, Joomla or any other content management system in order to build your website.

So to make sure you aren’t being taken advantage of I have compiled a list of the top 10 ways to get a free domain name registration online.

1. Hostgator

Hostgator is by far my first choice for getting a free domain name. If you are new to this website feel free to read more about why I love Hostgator. If you use the coupon code ‘brandbuild‘ you will receive a discount of $9.95 and get your first month of hosting for 1 cent!

Okay, I know what you’re going to say. This is a discount on hosting, NOT a free domain. Yes, you are correct, however, Hostgator does have the best customer service on the internet. So with this discount instead of paying for hosting for a month, you will get a 1 cent hosting for 1 month when you pay for a domain, which works out just the same.

2. Dreamhost

Dreamhost also has superior service. I have used them several times in the past and have always been pleased with their level of professionalism and quality. If you use the promotion code ‘brandbuildsell‘ you will get a free domain name forever as long as you remain a customer. Otherwise the domain only costs $9.95 if you would like to move to another hosting provider.

3. JustHost

JustHost offers professional web hosting services with free domain name for life, unlimited web hosting space and unlimited bandwidth. Their basic web hosting service starts at on $3.45 a month with a free setup and no hidden fees.

4. BlueHost

BlueHost is another affordable and reliable web hosting solution, offering unlimited domain hosting, unlimited web space, unlimited email accounts and a free domain name forever! Plans start at about $6.95 per month.

5. WebHosting Pad

WebHosting Pad has hassle free web hosting with the cheapest prices around. Their web hosting is fast and reliable with plans starting at $1.99 a month! This price also includes a $50 MIVA credit, $25 Yahoo credit, $25 Google Adwords credit and of course a completely free domain name.

6. FatCow

Cool name with an even cooler hosting service. FatCow has an incredible deal which includes a totally free domain name. The plans start at $4.58 and you can get an even bigger discount, if you keep reading.

Start filling out your information to get your hosting and a free domain. Once you have filling out everything, DON’T CLICK PURCHASE! Click to close your browser window and before it actually closes FatCow will offer you an even bigger discount of $42 off the regular price.

Click CANCEL to be forwarded to the additional discount page. Click ‘Get your Special Offer‘ to receive your discount.

7. Green Geeks

Is the worlds #1 green energy hosting solution. They have an energy efficient infrastructure which is 300% wind powered. They also provide free website builders and templates when you register free domain name. Green Geeks has a 30 Day Money Back guarantee.

8. iPage

A quick and easy web hosting option which is perfect for people with no experience. They offer free personal domain names, unlimited disk space and bandwidth, a free security suite and free site building tools.

Similar to FatCow, start to register your new site, by typing in your new domain name. Once your domain has been verified and you reach the order page, click the button to close your browser.

An alert message will pop-up, click CANCEL and iPage will give you an additional 60% off hosting discount for signing up, which costs only $2.95 a month!

9. Hostmonster

Hostmonster is another free domain name provider. According to them they have the best customer support in the industry, but in my book they are only second to Hostgator. They offer all the same features as any other hosting provider, plus Frontpage extensions, if by chance you are still using Microsoft to build your sites.

10. InMotion

In addition to award winning technical support and 99.9% uptime, InMotion Hosting offers an absolutely free domain name with the setup of a their Business Class Hosting, which starts at $5.95 per month.

I hope this comprehensive list helps you on your journey of learning how to make a website. Many people will try to discourage you from signing up with hosting for a free domain, but don’t be fooled by what they are trying to tell you.

This list proves that it can be done. Good luck!

Additional Resources

Rio and City Dreams Tumblr Themes

In addition to updating the Be Original Tumblr theme, I have also been working on a few other themes as well – Rio Theme and CityDreams, both originally designed by Amy & Pink. These have been a favorite of mine for years, but I never had a good use for them, until now.

The designs were both created for WordPress, but because of their simplicity I thought they would be great options to convert into Tumblr Themes. So stay tuned, They are both about 50% completed and should be done soon.

WordPress Versions: Rio Theme & City Dreams

Below are screenshots of my working designs. They may differ in the final version, but will essentially look just like these.

Rio Tumblr Theme

City Dreams Tumblr Theme

** disclaimer – disregard the nudity in this theme, all images are owned by Amy & Pink **

Picmeleo – A Free Online Image Editor

Another interesting find from my daily blog stroll via Google Reader. I found this post from SmashingApps and couldn’t resist highlighting it on my site – Picmeleo, a new free online image editor. Coincidentally I had an article planned on free online image editors, so now I can forgo that post. This is the coolest image editor I’ve seen and I’ll be definitely adding it to my site as a permanent feature, I just need to figure out where.

Try It Here and let me know how you like it.

More About Picmeleo

Picmeleo is a free online photo editor that any third-party developers can integrate to their website. They offer the smartest way to let  users upload and edit images.

Picmeleo was created in order to provide a better tool for online photo editing. Third-party developers can easily add Picmeleo to their web service and launch the light-weight yet powerful photo editor whenever their users need to to upload or to edit an image. By adding Picmeleo to your web service, you can now engage your users with even richer content. Unlike other photo editors, Picmeleo opens within your site and your users never leave your service.

Simple Integration – Integrating Picmeleo to your website couldn’t be easier. Just copy a few lines of embed code and Picmeleo is working on your site!

Custom Tools – Unlike other photo editors, you can customize the tools of Picmeleo any time you want in the online admin interface. Sometimes photo editors can be overwhelming. Picmeleo allows you to pick the tools your users really need. Choose from a growing list of tools including Crop, Scale, Rotate, Auto-fix, Filters and many more.

Multilanguage Support- Picmeleo has built-in multilanguage support and you can easily set the language in the online admin interface. We are still working on different language options at the moment, stay tuned for more.

Picmeleo can be utilized in numerous places. Think of these examples:

  • social network
  • let your users crop their profile images
  • eCommerce
  • let your users enhance their product images during upload
  • photo gallery
  • let your users easily edit your images online without leaving the site

The possibilities are endless…

Who This Tool is Good For

  • People who need to edit an image quickly without much hassle
  • People who are inexperienced with editing photos
  • Webmasters who want to enhance the functionality of their websites
  • EVERYONE!

How to Make a Favicon

Have you ever noticed those little icons next to the address bar while visitng your favorite website? Well thats a favicon. This is mine.

Wikipedia definition:

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab. Some programs allow the user to select an icon of his own from the hard drive and associate it with a website.

I typically make my favicons using a Photoshop plugin, but I wanted to show you guys how to make a favicon if you have no graphic experience. It’s super easy, online and FREE at Favicon Generator.

Here are the steps make your first favicon.

Step 1. Locate the image that you would like to use as your Favicon and make sure that the dimensions are perfectly square (ie. 100 Pixels x 100 Pixels). This image should typically be your logo or another image directly associated with your website.

Step 2. Browse to the file’s location on your computer and select the image at Favicon Generator.

Step 3. Press the Generate Favicon and DOWNLOAD!

Easy right? Well jump on over to Favicon Generator and make your first favicon.

TIP: If by chance you are unable to find a suitable graphic to use as a favicon, go to Iconfinder.net. They have the best free icons online!

My Moo Business Cards Rock!

moo_business_cards2

A few weeks ago, was invited to speak at a social media workshop, so I finally decided to put some effort into designing a business card – just in case someone asked. I have been asked this in the past and NEVER been prepared. This time I was determined to leave a lasting impression – and boy did I ever!

I decided to order a fabulous set of Moo business cards. Trust me, the pic below only highlights about 60% of the amazing-ness of the Moo.

cyan_moo_logo

About Moo

MOO is a printing business, creating products from your online content. Partnering with a variety different communities and networks, from Flickr, to Second Life, to Fotolog and Bebo.

The MiniCard product is delivered in a biodegradable plastic box. Each MOO partner has a custom-designed paper wrap, featuring elements of their brand and linking this in with MOO’s own. As we are increasingly aware of the MOO community, and the love they have for photographing products we always create more than one designed version of each partner wrap. It gives the unwrapping a little something extra, and is another small element for people to talk about.

MOO also prints Sticker Books and Postcards. Ninety different Stickers printed on 15 individual sheets, bound into a pocket-sized book. Users are able to select the color of their book at the end of the ordering process, and the full range of colors can be seen above. As with all MOO packaging, there are hidden messages inside. (Source)

The Crowd Reaction

Was awesome! Even though, the point of the workshop was social media, my business cards definitely took center stage. Attendees were pleasantly surprised at how nice they were. The cards are made of 16pt, sustainably sourced, matte laminated paper, which is smooth to the touch. They also offer a recycled option for the environmentally conscious. I ordered 100 cards which cost around $40  (with a sweet discount code I found online), and it was well worth every penny. I have used other online printers before (who shall remain nameless), but Moo is the best BY FAR!

Their business cards allow you to create up to 50 different back-side options, so your cards can have tons of different looks. I only choose three to coordinate with the theme of my site. Moo also offers some of the best pre-designed cards in the business. The designs are fresh, clean, new, trendy and honestly just FUN. Say goodbye to those stale business cards with the same old boring logo and contact info. Spice up your life and and taste the Mooooooo!

MooCardsNewCards

Get a Free Premium Twitter Background

Since entering Keller’s blog design contest at Fresh eVenture, I have been preoccupied with adding content and tutorials to my site. Everyday I sit down to write compelling content about getting started online. I haven’t written this much since college, but I am loving every minute of it!

In between researching content for articles, I still find time to freelance web design and browse my favorite blogs via Google Reader.

Yesterday while visiting one of my favorite icon sites 365 Icon, which has AWESOMELY FREE graphics and icons, I noticed an ad for TwitterBug.

twitterbug

TwitterBug advertised free, high quality Twitter backgrounds, so I was curious to see what exactly “high quality” meant and was pleasantly surprised! They have some of the BEST FREE Twitter backgrounds around. They also offer customization for just $4.99! What a steal! Read more