Hello, my name is Ryan Boyle and I am a Motion Graphic Artist and Illustrator from sunny Florida.   Currently I create Motion Graphics and Animations for online courses for Full Sail, a local media college.   Basically I am the production pipeline, I take the raw scripts I get from instructors and turn them into visual pieces that are both entertaining and educational.   I am responsible for every aspect of production; filming, light set up, editing, art direction, asset creation, animating, and sound design.   I am responsible for producing about 9 to 12 video pieces each month.

During the beginning years of college, I formed and managed my own company creating unique displays for local store fronts.  From there I began to focus on dramatic black and white illustrations and storyboards that gave birth to many short films.  While attending UCF I was hired as an instructor to help teach the Compositing and Visual Effects course in the Computer Animation Degree at Full Sail.

Since college I’ve freelanced as a Storyboard Artist and Illustrator for several short films and music videos.  On top of storyboarding I have also worked as a freelance Editor, Producer, Compositor, 3D Camera Tracker, and Visual Effects Supervisor.

2. Your Sketchy Tutorials have quickly become some of the hottest tutorials on the net.  How do you come up with the ideas for them?

Well most of the ideas for my tutorials come from projects I’ve worked on, both for clients and personal projects.   As I work I take notes for myself , so I can always recreate the process down the road.  This was so helpful to me that I decided to post them on my site for others to use.   And ever since then I’ve been receiving requests for more tutorials. I’ve even had people send me some of their work that they did using my tutorials – its pretty cool.

3. When creating an illustration, what process do you go through to take it from start to finish?

Well that depends on the illustration – I have adopted many illustration styles and each has it’s own process.   For my most recent series “Giant Mutant Creatures”, I’d usually start by sketching out a few ideas then scanning the images I like into the computer.  Then I would create a very rough layout in Photoshop using simple shapes and colors.   Once I get the composition and colors the way I want them, I go back in and rebuild a lot of the elements like the arms, legs, eyes, etc. on separate layers.   By doing this I can make adjustments to each part of the character separately.

I use a lot of clipping masks on each layer to add color and shading.   The clipping masks in Photoshop allow me to move gradients and textures around without effecting my original shape.  Then  I can continue to make adjustments as I’m working on the illustration.   This really comes in handy when making eyes, I’ll make the pupil and place it in a clipping mask of the eyeball.  I can then change the position of the pupil at any point to make the character look in any direction I want, without having to recreate the entire eye from scratch.

My work tends to use a lot of textures in combination with gradients to create the shading.   I’ve found that by including textures it adds a more abstract and organic shading to my illustrations.  Of course because of this, my final Photoshop files usually end up being 5 or 6 gigs.  Just opening and saving the Photoshop file can take a good 15 – 20 minutes some times.

4. You’re an extremely talented motion graphics and illustration designer.  With all of this knowledge, are you still trying to expand your skills by learning anything new?

Thanks for the kind words.  Yes I’m constantly looking for new ways to build up my skill set – the industry changes so quickly that you have to continually push your skills to keep up with the newest trends and effects.   Plus I enjoy new challenges – projects that take you out of your comfort zone.  They provide the best learning experiences.   Currently I’m working on graphics and designs for a PDA game, which is a format that I’ve never worked with before.  You can imagine all the challenges I’ve run into.

5. I noticed that you like to use a lot of “sketched” or “hand-drawn” effects in your works.  What about this style draws you?  Do you think you’re an expert at it?  Why or why not?

Well I’m a doodler by nature, and I love the raw energy that the “sketched” effect has.   My work has always been quick and energetic.  I’ve found that by just trusting my instincts and keeping a clear mind when drawing I’ve come up with my best ideas.  Of course I create hundreds of concepts in the process, but it’s all worth it when I get that one great idea.

To be honest I’m probably my worst critic, and no matter how good my work becomes I’ll probably never consider myself an expert.   It keeps me in constant competition with myself and wanting to make my work even better.

6. I know that many designers these days are into these “inspirational showcase” sites. When you are in need of inspiration, do you turn to one of these sites or do you look elsewhere?

Well, I keep a huge collection of inspirational images on my computer.  I’m not kidding, the file is huge!  We’re talking gigs and gigs of hard drive space!   Even though I kept them all organized, it became impossible to find specific images quickly.  Recently I purchased  “Little Snapper” by Realmac Software and I’ve been using it to organize my image library. It’s been very helpful in that I can now add tags to each image and create smart folders to better locate certain inspirational images.

7. What advice do you have for anyone just starting out in the design/motion graphics world?

Oh sure – the first would be “don’t be afraid to make mistakes”.  Most of what has helped shape my art is all the mistakes I’ve made in getting to the final product.  Mistakes are the best learning experiences since you tend to remember what you did wrong, because you want to prevent it from happening again.

Networking is also vital – it can often be the key to landing a job in the industry.   If you know someone on the inside and they’re familiar with your work and work ethic, they’re more likely to recommend you when a job position becomes available.   Online forums are great for networking by participating in discussions. It’s also extremely beneficial to attend conferences in your field like Siggraph or the GDC.

8. Thanks again for taking the time to complete this interview.  As a final note, could you list any social networks where we can connect with you?

Sure, you can connect with me in the following social networks:

Twitter, http://twitter.com/sketchypictures
Flickr, http://www.flickr.com/photos/sketchypictures/
LinkedIn; http://www.linkedin.com/in/ryanboyle
Behance, http://www.behance.net/RyanBoyle

You can visit Ryan Boyle’s website/portfolio and see his work at http://www.sketchypictures.com/.

This tutorial will teach you how to set a web page on fire with Photoshop and CSS.  Here’s a preview of what it will look like:

If you want to see it in action, you can go to this page.

Step 1

For the purpose of this tutorial, we will be creating some very basic fire to demonstrate the effect.  If you play around on your own, I’m sure you can come up with some much better looking fire.

To start off, open up Photoshop and create a new document 500px wide and 300px tall.  Reset your foreground/background colors by pressing D, and go to Filter > Render > Clouds.  You should now have some nice black and white clouds like below:

Step 2

To colorize the clouds to look more like fire, press Ctrl + U (Image > Adjustments > Hue/Saturation) to bring up the Hue/Saturation dialog.  Inside this dialog, enter these settings:

This will give the fire a nice orange glow:

Step 3

What we want to do now is make this fire texture into a pattern that we can tile across the web page in a later step.  To do this, go to Filter > Other > Offset, and enter these settings:

This will “offset” our texture so that we can see the seam that makes it look horrible when we try to tile it.  We need to remove this seam so that the texture will run together smoothly later.

Take the Healing Tool (J), alt + click on some part of the texture other than the seam, and click and drag over the seam to “heal” it.  If this doesn’t work completely, you may need to use the Blur Tool (R) and blur out the rest of the seam.

Your texture should now look something like this:

Step 4

The last thing we need to do with this texture is fade it out towards the top.  Double-click on the Background layer (it should be the only layer), and press ok in the dialog that pops up to unlock the layer.

Press Q to enter Quick Mask Mode, take the Gradient Tool (G), and draw out a linear gradient starting from the bottom of the image and stretching up to almost the top.  Press Q again to exit Quick Mask Mode, and then press the Delete key to clear the selection.  This will make the texture fade out like below:

Our fire texture is now complete.  Press Ctrl + S to save the image to your hard drive.  While you’re at it, you should create a new folder someplace where you can keep all of the files you use for this tutorial.  Save the image as a PNG file, and name it “fire.png”.

Step 5

Open up your favorite text editor (I use Coda while I’m on a Mac, but any old text editor like TextEdit or Notepad will do) and type in some basic HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Fire Page</title>
 <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
 </head>
 <body>
 </body>
</html>

All this is doing is setting up the page with all of the necessary tags that every HTML page has.  The title of the page is “Fire Page”, and we are including an external CSS file, “style.css”, which we will create later, in it.

Step 6

Inside the body of the page, insert this line of code:

<div id="fire"></div>

This one line is all we need to set up the fire effect.  The real work is done in the CSS file that we will create.

To make the example interesting, put in a bunch of Lorem Ipsum text after the <div id=”fire”></div> line.  I just went to http://www.lipsum.com/, a Lorem Ipsum text generator, and created 15 paragraphs of dummy lipsum.  Then I copied the paragraphs into my HTML file and wrapped each one in <p> tags.

Save the HTML file we’ve been working on as “index.html”, and put it into the same folder as the image (fire.png) we created before.

You should now have a bland page with a bunch of text in it.  Not much, but the fun is just beginning…

Step 7

Now create a new text file.  This will be the CSS file that styles index.html.  Inside this new file, put in this text:

body {
 background: #000;
 color: #FFF;
}

This styles the page so that the background color is black and the font color is white.  This will make our fire texture really stand out from the rest of the page.  After the above code, enter this text:

#fire {
 background: transparent url(fire.png) repeat-x;
 position: fixed;
 left: 0;
 bottom: 0;
 height: 300px;
 width: 100%;
 z-index: 999;
}

First, this sets the background of the #fire div to the fire.png file we created before.  Then, it sets the position, height, and width of the div so that it covers the entire bottom of the page.  The last line makes sure that the fire div is always on top of all other content on the page.

Save this file as style.css, and make sure it’s in the same directory as the index.html and fire.png files.

Final Result

That’s it! If you open up index.html in a web browser, you will see this result.  Notice that if you scroll down on the page, the fire will stay hovering over the bottom of it.  It’s a very versitile effect that you can use for lots of different effects.

Enjoy!

It just did.

Say hello to Wordpress 2.8, or version “Baker” as they call it, named after noted trumpet player and vocalist Chet Baker.  Living up to Wordpress standards, there are many new features in this version, as well as over 790 bug fixes from the previous version.

Inline Theme Installation

In Wordpress 2.7, a great new feature was released called “One-Click Plugin Installation”.  Now this same idea has come to the themes section!  No more do you need to download a theme, unzip it, upload it to your site, and activate it.  Now you simply browse the theme gallery right from the dashboard, pick the theme you want, and press the “install” button.  Bam – it’s up and running on your server!  No hassle with zip files or uploading.

Syntax Highlighting

Editing template files (via the file editor in the dashboard) used to be dull black and white.  Now, with the new CodePress editor, it comes to life with colorful syntax highlighting.

Widgets Improvement

Previously, editing widgets was a pretty big hassle.  If you had multiple sidebars, there was no easy way to get one widget from one sidebar to the other, and if you deleted a widget, you’d love all of its settings.  If you wanted to use that same widget again, you’d have to reenter all of the settings that you had before.

Wordpress 2.8 fixes both of these issues.  Now you can see all of your sidebars on the same page (no need to edit, save, switch sidebars, edit, save) and drag and drop widgets between them.  Also, if you set up a widget just the way you like it, and want to save it for later use, you can drag it to the “Inactive Widgets” area.  If you need it again in the future, just drag it out from that area and into one of your sidebars.

Screen Options

The great new interface that was added in Wordpress 2.7 gave you the option to drag and drop sections in the dashboard to suit your needs.  Now, Wordpress 2.8 gives you many more options for customization.  Here are a few of them:

• You can specify if you want 1, 2, 3, or 4 columns on the dashboard.
• In the Posts and Pages sections, you can specify what info you want to be displayed, such as Author, Categories, Tags, etc.
• Also in the Posts and Pages sections, you can specify how many items you want to display per page.

Speed Optimization

According to the Wordpress.org blog, Wordpress 2.8 is even faster than 2.7 due to optimized javascript and behind-the-scenes tweaks.  This means that the everyday actions such as approving comments, switching pages, and editing posts are even faster than before.

Conclusion

Taking into account the new features in Wordpress 2.8 Baker, I would strongly encourage you to download it and give it a spin yourself.  If you already have 2.7, it’s as easy as pressing “Automatic Upgrade” in the admin.

As always, if you’re looking for information on the next version of Wordpress (version 2.9), you can simply change the URL of the documentation from http://codex.wordpress.org/Version_2.8 to http://codex.wordpress.org/Version_2.9.  There’s not much there yet, but there will be pretty soon!

And be good, find the best hosting for your needs. I love 1&1 but there’s something for everyone.

In today’s tutorial, we’ll be creating a slick folder icon with a 3D glossy backdrop. Here’s a preview of the final result:

Step 1

Let’s get started! To begin, open up Photoshop and make a new document. Size doesn’t matter that much here, but I’ve used my favorite dimensions of 1680 x 1050 for this tutorial. Fill the background with #004d96, get the Pen Tool (P), and turn on the grid by going to View > Show > Grid or by pressing Ctrl + ‘ (single quote).

Step 2

If you don’t have “snap to grid” enabled, go to View > Snap To > Grid to enable it. This ensures that the Pen Tool snaps to the grid lines for precise drawing.

Now that snapping is enabled, click and hold on one of the grid cross sections to create a new anchor point. Without letting go of the mouse, drag up one grid section until the bezier handles snap into place. Finally, click up and over two grid sections and drag to the right one square. See the image below for reference:

Step 3

Count out about 14 squares to the right of that last point, click, and drag to the right one square.  Go over three and down two squares, and click again.

Step 4

Count out another 14 squares to the right of the last point, click, and drag to the right one square.  Go down and over two squares, click, and drag down one square.

Step 5

Count down 18 squares, click, and drag down one square. Go down and to the left two squares, click and drag left one square.

Step 6

Count left seven squares and click to make a new anchor point.  Go up four squares, click and hold the mouse, hold down the alt/option key, and drag to the right one square.  Count up two squares, click, and drag to the left one section.  Here’s a reference:

Step 7

Go two squares to the left, click, and drag over one square.  Count down two squares and click.  Without letting go, drag to the right two squares, press and hold the alt/option key, and drag down and left one square.  Finally, count four squares down and click again.

Step 8

Count six squares to the left, and repeat steps 6 and 7.

After completing those steps, go left seven squares, click, and drag to the left one square.  Then go up and to the left two squares, click, and drag up one square.  Finally, finish off the entire shape we’ve been creating by clicking on the first point, 20 squares up.

Step 9

Fill the shape you just created with #bcc1c5, and apply the following layer styles to it:

Drop Shadow

Outer Glow

Inner Glow

Gradient Overlay

Drag Gradient

Still in the Gradient Overlay dialog, click outside of the layer styles window and drag upward, like the image below.  This moves the gradient up so it’s not in the center of the icon.

Result

You should now have this:

Step 10

Now we’ll create the silhouette of a person for the middle of the folder.  To make sure that both sides are equal, we will create the left half first and then mirror it for the right half.  I can’t be as precise with the position of the Pen Tool anchors here, but it is fairly easy to make the shape below.  You don’t have to be exact, just make something that resembles a human being.

Step 11

Duplicate the shape layer you just created by selecting it in the Layers palette and pressing Ctrl/Cmd + J.  With the new layer selected, hit Ctrl + T to transform it, right click on it, and select Flip Horizontal from the context menu.  Click and drag it to the right so it’s just barely overlapping the other half of the silhouette we created before.

To merge the two halves together, make sure the Vector Mask of the current layer is selected (see below).  Press Ctrl + C to copy it, select the Vector Mask of the other half of the silhouette, and press Ctrl + V to paste it.

You can delete the single half shape layer that you created now, which should give you this:

Step 12

Center the silhouette to the folder by Ctrl + clicking on the folder layer’s icon, getting the move tool, and pressing “Align Horizontal Centers”.  Move it vertically to a position that looks good to you.

Now we’ll apply some layer styles to the silhouette to make it pop off the screen (or sink into the folder).  Use these settings:

Drop Shadow

Gradient Overlay

Gradient

Stroke

Result

And that should give you this:

Step 13

Now that we’re done with the folder icon itself, we can give it a cool 3D background to sit on.  Before we do this, let’s center the icon to the document.  Select all the layers above the Background layer (there should be two layers – the folder and the silhouette), and press Ctrl + G to put them into a group.  With this group selected, press Ctrl + A to make a selection of the whole document.  Take the Move Tool (V), and in the toolbar at the top of the screen, press both “Align Vertical Centers” and “Align Horizontal Centers” like below:

Now that the icon’s centered, you can deselect everything by pressing Ctrl + D.  Make a new layer below the group we just created, get the Rectangular Marquee Tool (M), and drag out a selection like this:

Step 14

Press D and then X to reset the foreground/background colors and then swap them.  Get the Gradient Tool (G), and in the toolbar, modify it to this:

Starting from above the document, drag out a gradient to almost the bottom of the image like this:

If you deselect everything (Ctrl + D), you should now have this:

Step 15

It’s looking pretty good!  However, the icon looks a bit like it’s floating up and not sitting on the 3D shelf.  To fix this, we’ll add both a reflection and a shadow to it.

Let’s start with the reflection.  Duplicate the group we created by dragging it down to the “New Layer” icon in the Layers palette.  Merge all the layers in the new group together by selecting it and pressing Ctrl + E.  Move the created layer below the original group, but above the gradient layer.  Press Ctrl + T to transform the layer, right click, select Flip Vertical, and drag it down so it’s just below the original folder icon:

With the new layer still selected, press the “Add Layer Mask” button at the bottom of the Layers Palette (third button from the left).  Get the Gradient Tool (G), set it to a linear black-to-white gradient, and drag out a gradient like this:

Finally, fade out the opacity of the layer to about 50%.  You should have this:

Step 16

Now we’ll make the folder shadow.  Duplicate and merge the folder group once again to make another layer.  Move this layer below the original group, but above the reflection, and go to Image > Adjustments > Hue/Saturation.  Move the lightness slider all the way to the left (-100) to make the layer totally black, and press enter.

Press Ctrl + T to transform the layer, and squash it way down like this:

Not right click on the transformation, and select perspective from the context menu.  Drag out the top right handle a bit to make the shadow look like it’s spreading out from the folder:

Press enter to complete the transformation, then go to Filter > Blur > Gaussian Blur and set the Blue Amount to 8 pixels.  Press ok in the dialog, set the layer’s Blending Mode to “Soft Light”, and lower its opacity to around 30%.

Final Result

And that’s it!  You’ve just created a stunning folder icon with added backdrop, shadow, and reflection.  Here’s the final result:

The Winner…

Congratulations to Mikah Sargent! Here is the winning comment:

Wow, I’ve seen Uprinting’s cards in “the wild” and they really do have fantastic quality. I’m trying to get my graphic design business off of the ground, and 500 cards would be a huge help. I’ve just recently designed a business card, and I was wondering who to go to for my print job. My goodness, five hundred cards isn’t cheap. I’d love to win.

I’ll be sending an email to him shortly with information about how he can claim his prize.

Thanks for everyone who participated in this giveaway! Make sure you subscribe to the RSS feed – I’m sure to be posting more giveaways as time goes on.

So in this contest, I will be giving away 500 of UPrinting’s amazing business cards to one lucky person. I have used UPrinting in the past for my own cards, and I can sincerely say that the ordering process was easy and the quality was amazing.  Not only is their business card printing great, but their web interface is extremely easy to use.

How can I win?

To win, all you have to do is leave a comment on this page explaining why you want the business cards or what you are going to do with them. For “extra credit”, you can tweet about this contest by posting the following on Twitter:

“Win 500 Free UPrinting Business Cards: http://u.nu/8bj5″

After the contest ends, I will pick one lucky winner from all of the commenters, and will email him with info on how to claim the prize. Make sure that you leave a valid email address so that I can contact you with the winning info.

When does it end?

Submissions will be open until May 20th, so hurry up and comment!

Design inspiration sites are sites that link to interesting and cool designs that can be used to “boost the creativity” of other designers.  Usually the links are to web or illustration designs, but sometimes a gallery links to creative logos or brands.

Below I’ve put together a list of 10 of these such sites that link to cool logos.  If you’re in the process of creating your own brand, then these sites can really help you out.

1. Logo Pond

2. Logo Galleria

3. Logo Faves

4. Logospire

5. Creattica

6. Logo Fury

7. Logo of the Day

8. LogoMoose

9. Design Dosage

10. LogoGala

11. Logotwo

12. Logolog

13. Logoed

And Finally…

Though it isn’t exactly logo inspiration, YourLogoMakeMeBarf.com is a great site to go to if you want to know how not to design your logo.  Warning: not for the queasy-stomached!

As web design has progressed and grown older, it has gone through many phases, and taken on many different styles.  Some of these are web 2.0, grunge, typographic, and “sketched” or hand drawn.  There is lots of diversity in what designers like and dislike, so I thought I’d ask you all what your opinion is.

Vote for your favorite style in the sidebar, and we’ll see what the most popular one is.

What are inline comment replies?

Inline comment replies is a feature that lets you reply to comments on a blog, and have your reply show up directly below the comment you are replying to.

Imagine this scenario: you’re reading an interesting article on one of your favorite topics, and after you finish reading, you decide to read through the comments and see what other people are saying about it.  You start going through the comments, and see one towards the top that’s from a guy who has a question about the article.  Since you have a lot of experience on the article’s topic, you immediately know the answer to his question and decide to answer it.  There’s only one problem – after that guy posted his question, 50 other people posted comments below his.  Now, if you were to post a comment in reply to his question, it would be so far away that he probably wouldn’t ever see it.  This is a pretty big problem, right?

Enter inline comment replies.  Now, if the blog you’re reading has this feature installed, you can simply click “reply” on the guy’s question, type your answer, and your comment will show up right below his (indented a bit so it stands out from all the other comments).  Pretty nice, right?  Or is it?

The problem

Though this may sound like a great feature, and in fact it is useful most of the time, there is one problem with it.  If you have an extremely popular blog that gets tons of comments within seconds of a new article being posted, then everyone is going to want to be one of the first to comment so that their website link is clicked most.  Normally, you could only do this if you literally sat on the site and clicked refresh every couple of seconds until a new article showed up, and then typed a comment as fast as you could.  However, with inline replies, you can just reply to the first comment on a post, and your reply is displayed right below the first comment.

If the first comment is an actual question, and the reply is an answer to that question, then this is fine.  But if the reply is nothing more than a way to get a link to the top of the comment list, then this can become a problem.

The solution?

The obvious solution for this is to simply not use inline comment replies on your blog.  However, sometimes it is a nice feature to have on your blog, and you don’t want to give it up.  So what do you do?

One thing you can do is manually delete comments that are obviously from people trying to just get to the top of the comment list.  The problem with this is the 1) the commenter might wonder where his comment went and get angry at you for deleting it or 2) the comment could actually have some good content in it, but doesn’t have anything to do with the comment it’s in reply to.  Deleting it would be removing legitimate content.

Another thing you could do is just move the reply comment to the bottom of the list.  The commenter might get annoyed that his comment was moved, but at least he didn’t get away with his scheme.

So now I ask you – do you worry about this on your blog, and if so, how do you prevent it from happening?

This can be extremely hard to do, especially if you have a lot of things to say, and a lot of people don’t even bother to sign up because of it.  Don’t give up on Twitter yet, however.  Though it may be hard to sum up your thoughts in 140 characters, there are ways that you slim them down without really removing any content.  I like to call it “making the most of your 140 characters”, and below I have listed a few of the ways you can do just that.

1. Shorten URLs

If you’re posting a URL in your tweet, then the best way you can cut down space is by using a URL shortening service.  Basically, you type your long URL into one of these services, and out pops a tiny URL that you can use in your tweets.  Here are a few of my favorite shorteners and why I like them:

• u.nu
  • It is the absolute shortest URL possible.  No url can be shorter than three characters, and that is exactly what u.nu is.  If you’re looking to make your URLs as short as you can, then this is the service for you.
  • After you shorten a URL, it gives you the shortened link, HTML code for the link, and even BBCODE for the link so you can use it on a website of forum without typing code.
  • To see information about a URL shortened with u.nu, simply put a question mark, “?”, at the end of it.  This shows you where the URL redirects to, when it was shortened, and how many people have clicked on it.
• tr.im
  • It has lots of extensions that let you access it from FireFox, your Mac dashboard, or any other browser.
  • It is very fast, which means you can shorten URLs with lightning speed.
  • After you shorten and post a URL to Twitter, you can see statistics on how many people clicked the link, where they are from, and more.
  • You can customize it so that it works just like you need it to.
• is.gd
  • It also has lots of extensions like a FireFox plugin, bookmarklet, Dashboard widget, and Mac app.
  • You can preview a shortened URL (see where it redirects to without actually going there) by putting a hyphen, ‘-’, at the end of the is.gd URL.
• bit.ly
  • Just like the two mentioned above, it gives you extensions like a FireFox plugin, bookmarklet, sidebar, and even a Gmail gadget.
  • You can see real-time analytics of how your links are doing, like how many people are clicking on them.
  • You can save your preferences and always use it the way you want.

Though those shorteners have extremely short domain names,

Note: If you’re looking for some good Twitter apps for your Mac, you should read another post here at TutWow named 7 Free Twitter Apps for Your Mac.

2. Remove multiple RT sources

In Twitter, when someone else tweets something cool and you want to tweet the same thing, you use something called a “Retweet”.  This is how it works: your friend Joe (username joe987) posts a link to an amazing portfolio, and you want to spread it around among your followers.  To do this, you copy his tweet, post it into a new tweet, and add “RT @joe987″ to the front of it.  This not only shows the cool tweet, but it also gives credit to the original tweeter.

Sometimes you see a retweet, or a tweet that already has a “RT @username” on it, but you want to share the tweet with your friends as well.  Most people just add another RT onto the front of the tweet (”RT @one RT @two tweet“), but this adds a bunch of extra characters that aren’t really necessary.  The important thing is that you give credit to the original tweeter, so to make the most of your tweet space, you should remove the first RT.  So if you had “RT @secondary RT @original tweet“, you would change it to just “RT @original tweet“.

3. Use one space at the end of sentences

As your grammar teacher used to tell you, “always use two spaces at the end of your sentences”.  This is great, if you’re writing articles or papers, but for Twitter, it just grows your tweets.  Though this may not save tons of space, it can help if you’re really pressed for characters.  For example, take a look at this tweet:

Hey tweeple!  How’s your day going?  I’m feeling great today, and I hope you are too.  I’m working on a new article for my blog.  How about you?

If you put that into Twitter, you’ll see that it’s four characters too long.  But if you remove the extra space between the sentences, you come out with an even 140 characters.  Not huge, but useful!

4. Use Contractions

Often, when tweeting, you talk about yourself, saying things like “I am eating spaghetti” or “I will go for a walk tomorrow”.  To save extra space, use contractions as often as possible.  So instead of the previous tweets, you would say “I’m eating spaghetti” or “I’ll go for a walk tomorrow”.

5. Substitute Letters for Words

Though I don’t recommend it since it looks rather unprofessional, you can replace words like “you” and “are” with their sound-alike letters “U” and “R”.  This saves lots of space, but as I said, you shouldn’t do it if you’re trying to sound professional.

One thing you can do that doesn’t look as unprofessional is use the “&” and “@” signs in place of “and” and “at”.  Since most people are used to reading these symbols every day, they won’t notice the difference as easily. (thanks Chris and Malcolm Coles for sharing this tip in the comments!)

A good website that does this for you automatically is Twonvert.  You just type in your original, long tweet, and Twonvert converts it to SMS shorthand on the fly.

6. Use multiple tweets

Ok, this might not be a way to make the most of your 140 characters, but the fact is, if you have something great on your mind and you can’t possibly let it out in 140 characters, then you’re going to need multiple tweets to convey your message clearly.  To do this, post the first half of your thought in the first tweet and the second half in the second.  True, this makes people read bottom up, but sometimes it’s necessary.

7. Remove unnecessary words

When we write, we often use words that aren’t really necessary or could be removed without taking away from our meaning.  As I said above, this can be good if you’re writing articles or a paper, but it doesn’t make sense for Twitter.  When tweeting, you should remove your flowery language and post just the basic meaning of what you’re trying to say.

For example, instead of writing “I am being filled with such an awesome sensation of joy and gratefulness that I can barely portray it with mere words”, you could just say “I’m happy”, or “I’m so happy I can’t describe it”.  See the difference in length?

Note: Thanks to Jaremy in the comments for this tip.

More?

There are many ways to shorten your tweets, as you can see.  Did I miss one of your favorite techniques?  Let me know in the comments below, and I’ll add it to the list.