Start off by opening your functions.php within your WordPress theme folder:
(wp-content\themes\themename\functions.php)
If you don’t have a one, you can create a new file and call it functions.php.

Next copy the following code into your functions.php, save and then upload the file. Watch out for the PHP tags when copying the code, you’ll most likely only need them if you’re starting a blank document.

<?php
// Title Trimmer (Version 3)
// Sam Morris - 12.28.2009
// www.smor.tv
function title_trimmer($title , $maxLength)
{
	$titleLength = strlen($title); // get the amount of characters in the title
	// start conditional
		if ($titleLength > $maxLength) // if the title length is over the max length, then we start the trimming process.
			{
				$trimmedTitle = substr_replace($title,"",$maxLength);
				echo $trimmedTitle;
				//echo $trimmedTitle . "..."; //use this instead of the line above if you prefer having a ... after your trimmed titles.
			}
		else
			{
				echo $title;
			}
}
?>

WordPress has many built in functions, but the functions.php is where you can place your own custom functions. When your theme’s templates are loaded, so will the functions.php allowing you to use your own functions throughout your theme. Open the template that needs the title trimming, or if you just want to try it out you can open single.php (for posts) or page.php (for pages).

find the_title, which is what most themes will use by default. When you find it, you can replace it will the following code. The title trimming function has 2 arguments, the first is what should be trimmed and the second argument is the maximum length of characters. In my example I’m trimming the WordPress title down to a maximum of 10 characters.

<?php title_trimmer(get_the_title() , 10); ?>

Save, upload, and then create a test page or post to see the title trimming in action.

1. Find page.php in your template directory, which can be found at: /wp-content/themes/yourthemename/page.php.
2. Make a copy of the page.php and call it thumb.php.
3. Open up thumb.php and add the following code at the very top of the document. This is the code for creating a Custom WordPress Template.

   <?php
   /*
   Template Name: Thumbnails
   */
   ?>

4. After uploading your new template into the same folder as page.php (/wp-content/themes/yourthemename/), you should make sure it shows up. Create a new page in WordPress and on the right under Template you should see “Thumbnails” in the dropdown. Assuming it’s showing, create a new page using the template and then go back to thumb.php in your editor.
5. Next we’ll add the thumbnail code, which will need to be placed in the loop. The placement will depend on how your theme is programmed, but a good place to start would be below the_title() or above the_content() (search for these in your template). To explain this code, what we’re doing is nothing too different from standard HTML. First a div is created for styling and placement, then a link so the thumbnails will link to the article, and finally the thumbnail itself. Notice that the image src is going to be set by a post meta value of thumb. (which will correspond to a custom field of thumb when creating posts). All of this code is then put in a conditional statement, which tells WordPress to only show the thumbnail code if the post has one defined (otherwise we would get empty divs and broken images).

   <?php if (get_post_meta($post->ID, "thumb", true) != "") : ?>
    <div>
    <a href="<?php the_permalink() ?>" rel="bookmark">
    <img src="<?php echo get_post_meta($post->ID, "thumb", true); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
    </a>
    </div>
   <?php endif;?>
   

6. Save and upload the template again, then create a few test posts and give each a custom field with a name of thumb (which is what we used in the code). Define an image for the value such as http://www.site.com/wp-content/uploads/year/month/image.jpg. Publish your posts and then go to the new page you created using the Thumbnail template. You should see a list of posts, each with the thumbnail you defined.
7. Lastly, if you’re looking for a more automated way of doing this you can use WP Post Thumbnail, which is great for client’s or WordPress users that have limited computer knowledge. It will allow them to upload an image while creating a post, and then resize / crop it (meaning no photoshop or external editor is needed). If you do use this plugin the code will be the same, but the name of your customs fields may be different. The plugin uses a file named wppt.xml to configure the name of the post meta and thumbnail size, etc. This file needs to reside in your theme’s directory NOT the plugin’s directory.
8. How you style your thumbnail class is up to you, but I highly recommend having a fixed width/height with a hidden overflow (overflow: hidden;). This way when a client decides to use a 10 megapixel 3872 x 2592 image as a thumbnail (which does happen), it will get cut off rather than destroying the layout of the site.

CSS with Sprites

The CSS code for sprites is generally broken into 2 parts. The first part of the CSS code sets the basic styling for all of my icon spans. This is where the background is set to the sprite image, but by default backgrounds will be aligned to the top left. Part 2 of the CSS code sets the background-position of each icon span. The first value (X) of background-position is going to be 0 in this tutorial, since the icons in the sprite are flush with the left edge of CSS_Sprites_Icon_Tutorial.png. Alternatively, if  the sprite file used 2 columns of icons, then I would need to set X to move the backgrounds selection to the right. The second value of background-position is the vertical value (Y), which will change based on which icon we want display. Keep in mind the values will always be negative for the Y value, since the top left is 0. As we get each background section we’ll be moving down (further into negative values).

Files

1. As mentioned above, the first part of the CSS for the sprite will be setting the general styling for all of the icons. div.icons is going to be used as a container for the icons. By not giving the span an ID or class we’re saying ANY span within div.icons will have the style defined below. If possible, you should always use a container since it enables you to easily define styling for all icons at once. Alternatively if my icons were not going to be placed within a container I would need to define each icon span. EX: span.icon1, span.icon2, span.icon3 {/* styling for all icons here */}. Add the following code to your stylesheet or between your <style> </style> tags. Refer to CSS_Sprites_Icon_Tutorial.html if needed.

   /*  RESET */
   *{margin:0;padding:0;border:0;}
   /*  START ICON CSS */
   /*  This is where we set the general styling for all icons. */
   .icons span
   {
   font:11px Arial, Helvetica, sans-serif;
   line-height: 16px;
   color: #666;
   background: url(Icon_Sprite.png) no-repeat;
   width: 100px;
   height: 16px;
   margin: 2px 0 4px 5px;
   padding: 0 0 0 22px;
   display: block;
   /*
   float: left;
   If you set float to left the icons will display horizontally instead of vertically.
   */
   }
   

2. Now we’ll setup the HTML code needed to display the icons. Add the following code to the body of your HTML document.

   <!-- START ICONS -->
   <div class="icons">
   <span class="one">Icon One</span>
   <span class="two">Icon Two</span>
   <span class="three">Icon Three</span>
   <span class="four">Icon Four</span>
   <span class="five">Icon Five</span>
   </div>
   <!-- END ICONS -->
   

3. At this point you should have the CSS code from step 1 added to your document (unless you’re using an external stylesheet), and the HTML code from step 1 in the <body>. Next make sure that the CSS_Sprites_Icon_Tutorial.png is saved in the same place as your HTML file. Then have a look at the results and you should see 5 icons with text to the right of each icon. If not, refer to CSS_Sprites_Icon_Tutorial.html and compare it with your own code.
4. Everything is setup at this point and the last step is going to be defining the background-position for each of the spans that will be using the icon sprite. The background image will be inherited from div.icons span, so we don’t need to define the background a second time. Add the following CSS code to your HTML document under where we placed the CSS code from step 1.

   /*  This is where we set the icon image for each icon by specifying what area of the sprite to display.
   All other properties will be inherited from above so we can easily change the styling for all icons at once.*/
   .one
   {
   background-position: 0 0;
   }
   .two
   {
   background-position: 0 -16px;
   }
   .three
   {
   background-position: 0 -32px;
   }
   .four
   {
   background-position: 0 -48px;
   }
   .five
   {
   background-position: 0 -64px;
   }
   /*  END ICON CSS */
   

When I was originally writing this tutorial, I found it somewhat hypocritical writing about how beneficial sprites can be for a website while using very few on this site. I created a sprite for my own site consisting of various images that are reused throughout my site. Have a look… sprite.png . It ultimately shaved off around 12-15 requests per page, which I’ve found has made a significant improvement in loading time for my website. If you don’t already have it installed, you should grab FireBug and more specifically YSlow which can help you benchmark your site and measure loading time.

Lastly, if you’re looking for an icon set to use on your own site check out Silk Icons at famfamfam.com. This is definitely one of my favorite icon sets, and is by far the most complete set I’ve come across (and it’s FREE).

1. Find index.php in your template directory, which can be found at: /wp-content/themes/yourthemename/index.php.
2. Make a copy of the index.php and call it featured.php.
3. Open up featured.php and add the following code at the very top of the document. This is the code for creating a Custom WordPress Template.

   <?php
   /*
   Template Name: Featured Posts
   */
   ?>

4. Towards the top of the document you should see where the loop is starting, lines 2 and 3 should already be in your document. Copy line 1 and insert it before before the other 2 lines so it looks like the following:

   <?php query_posts('meta_key=is_featured&meta_value=yes');  ?>
   <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?> 

5. What this is doing is telling WordPress to loop through posts that have a custom field of “is_featured” set to “yes”. Save / Upload featured.php to your template directory and create a new page using the newly created Featured Posts template. If you want this to be your homepage, then go to Settings > Reading, and set your new page as your front page.
6. Now to add a featured post add a new post (or edit an existing one), and under the editor add a new custom field for “is_featured”. Then give it a value of “yes”. Update the post, then go back to your Featured Posts page and you should see the featured post.
7. As I mentioned from the start, there’s many ways of creating featured posts such as categories, tags, etc. Personally I find this method to be best for a few reason…
   • Using categories means featured posts will probably need 2 categories, one for the real category, and the other just setting it as featured.
   • The category method can influence your permalinks, which may make them less descriptive.
   • Another method is tag based, but many SEO plugins automatically generated keywords from tags. Having “featured” as a keyword on many pages isn’t going to help with Search Engine Optimization.
   • Plug-ins are a good option, but in my opinion somewhat unnecessary for such a simple task.
   • The main disadvantage of not using tags or a featured category is users can’t easily view an archive page with all your featured posts.

1. CTRL+T – Free Transform Tool
2. CTRL + Shift + N -  Create New Layer
3. CTRL+Backspace - Fill with Secondary Color
4. CTRL+J – Duplicate Layers
5. CTRL+[ / ] - Bring Forward / Bring Back
   
6. CTRL+G – Group Layers
7. CTRL+Shift+I – Select Inverse
8. CTRL+Alt+I – Image Resize
9. CTRL+Alt+C – Canvas Size
10. CTRL+E – Merge
11. EDIT: One of the many I’m probably forgetting, CTRL+D / CTRL+Shift+D for de-selecting / re-selecting your sections.

1. Create a circle with a 1pt stroke. Give the stroke a color, keep the fill color white.

2. Create a square further down on the page, around the middle. It should have a different stroke color, and should also have a white fill.

3. Create a polygon, the amount of sides isn’t too important, but you can change the amount of sides with the up and down arrows on the keyboard, while creating the shape. Give your polygon a different stroke color and a white fill.

4. Select all 3 shapes

5. With the shapes selected go to Object > Blend > Make (Alt+Ctrl+B).

6. You should now have something similar to this.

8. Go to Object > Blend > Blend Options…

8. As you play with the settings notice the different types of effects you can get. When you’re done press cancel, we don’t want to change the settings yet.

9. Select the Convert Anchor Point Tool (Shift+C)

10. Drag downwards on the middle point and make a loop.

11. You should have something like this.

12. Add some more points with the pen tool and use the Convert Anchor Point Tool (Shift+C) to make it more interesting.

13. Also try changing the Orientation in the Blend Options. Go to Object > Blend > Blend Options… Most likely it will be set to align to page, which is the default, but try settings it to the align to path and see how your results change.

15. Our blend has a white solid, but if you want you can give it no fill and it will be transparent. To edit the shapes you can choose them from the layers palette or you can double click your blend to make the shapes editable.

18. I’ll show one more type of blend which is more typical, but still cool. Create a new document and make a path with a stroke, no fill.

19. Create another stroke further down on the page.

20. Go to Object > Blend > Make Blend. Play around with your settings and path until you’re happy with the results.

If you’re looking for a tutorial going into more detail about the second method I’ve shown you, there’s a good tutorial at N.Design Studio which shows how to create a background similar to the ones that come with Mac OS X.

One last note, there is a “Blend Tool” in Illustrator. It’s one of the tools, but I generally find it harder to use than the method described in this tutorial. Also you can do blends with fills, shapes, strokes, paths, opacity, and more. You don’t need to be using strokes for the blend to work.

Files

Before you start rotoscoping I’ll explain exactly what we’re doing. Have a look at the screenshot. What we’re doing is using the footage (After_Effects_Rotoscope_Tutorial_Footage.mov) as our background, but at the same time we’ll be using part of it (The cube) as our foreground (Roto Top). We then put the text between the two layers. Roto Top will reveal the text along with Roto Bottom, but because Roto Top and Bottom are duplicates of each other the only noticeable difference will be the text revealing itself. With this particular frame the area of interest is shown by the green box. As you can see there are areas of the mask (the yellow line) that are not following along the cube (EX: Bottom right). Because nothing is being revealed except for the area in the green box, it would be extra work to trace the whole cube. Watch the footage and finished movie if you haven’t already, so you get a better idea of what you’ll be doing.

1 . Start off by creating a new project (Ctrl+Alt+N) and importing Rotoscope_Tutorial_Footage.mov (Ctrl+I) which we’ll be using as our footage. After it’s imported drag it down to the “Create a new composition” button. By dragging the footage to the icon After Effects will create a new composition based on the settings of the clip.

2. You should now have a composition with 1 layer which is your footage. Duplicate your layer (Ctrl+D), and name the top layer “Roto Top” and the bottom layer “Roto Bottom”. You can rename a layer by selecting it and then pressing the return key.

3. Create a new type layer (Ctrl+Alt+Shift+T) or Ctrl+T and draw a text box. Pick a font and then choose a size that fills up the width of the composition. Click the “3D Layer” button so we can put our type in perspective.

4. Now we’ll rotate the text layer so it fits in better. You’ll probably need to adjust the orientation and the position. My settings are shown in the screenshot below. You can see my text is a little off since I wasn’t using the grid.jpg (Attached), if you want to make it perfect make a layer for the grid and turn down the transparency. It will be easy to match up your text with the lines on the floor. This step is optional, but it will look more interesting if your text has perspective.

5. Move your text layer so it’s between Roto Top and Bottom. Set Roto Top’s opacity to 75% and move the playhead forwards until you find where you need to start rotoscoping. There’s no reason to start rotoscoping until the cube starts to reveal the text. For my example it isn’t until 0:00:01:04 that the cube starts revealing the text. After you decide where you want to start rotoscoping, put the opacity for Roto Top back to 100%. (If you want, you can create a marker by pressing the* key on the num pad)

6. Select the Pen Tool (G) and select Roto Top. Your playhead should be at where ever you decided to start in step 5. Draw your mask around the left side of the cube. Remember, you do not need to trace the right side of the cube. You also may not need to go around the top left corner, but this depends on the font/size of your text. In my example I didn’t need to start tracing the corner of the cube until a few frames in. After you’ve drawn your mask turn on automatic keyframing by clicking the stop watch. This will make it so as you make changes to each frame a keyframe will automatically be made.

7. To jump to the next/previous frame you can use the Page Up / Down keys, or the Time Controls palette (Ctrl+3), I generally prefer using the keyboard. After you’ve gone to the next frame, adjust your mask. You can do this by moving the whole mask or free transforming (Ctrl+T), or you can use the arrow keys and nudge the mask. If you want to move an individual point you can shift click it and then you will have one point selected. If you want to select all the points again you can double click the edge of the mask, use Ctrl+A, or click “Mask Path” in the timeline. You should see keyframes starting to accumulate as you make changes on each frame. If you need to zoom in on your timeline you can try Alt+Scrolling on the mouse wheel, or the bar right above the numbers in the timeline. It’s easy to move your layer’s position instead of the mask, especially when zoomed in. Your layer position will be 360.0, 243.00 (default and centered for NTSC). If you move the layer’s position every frame after it will be correct, but all the frames before will be off. Make sure your layer position does not get changed and check it every few frames.

8. Each time you go to a new keyframe you’ll need to realign your mask by moving the whole mask or point/s of your mask.

9. Remember that only a few points of your mask are important and the rest will not have any effect. In this screenshot the 3 points in red and 1 point at the bottom right (Off screen) are the only important points.

10. You’ll want to zoom back out to 100% and turn off the masks so you can see how it’s looking. The best way to do this is with the “Toggle Mask and Shape Path Visibility” button. Make sure to regularly check and play through your frames to avoid any developing issues.

11. Now go through all the frames, or as many are needed until your type is completely revealed. You can expect it to take at least an hour if not a couple. It may be hard to work on smaller monitors with low resolutions. If you need more space you can move the mouse over the Viewer and press the ~ key. This will make your viewer window take the whole screen. You can use the ~ key again to go back to normal, be sure to check the timeline every few frames to make sure everything looks alright. You can zoom in and out with the Magnifying glass tool (Z) or Ctrl+ +/-.
This is probably the simplest form of rotoscoping you’ll find. It’s an extremely commonly used technique and it’s important to have a grasp on how it works. Any comments, questions, etc are welcome. If you make it through the tutorial, submit a comment with a link to your finished movie file.

Notes:
My AEP file will have “Rotoscope Outlines” and it will be a shape layer instead of a type layer since most people don’t have the font I used.

There’s also a fade in/out and the text moves off the screen after it’s revealed, just like the Rotoscope_Tutorial_Finished.mov.

I also added some layer styles to my text (Gradient Overlay and Stroke) which are not part of the tutorial. You can add layer styles to your text by going to Layer > Layer Styles. You’ll see the change when looking at my type in step 5 vs step 10.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
THE CONTENT
<?php endwhile; else: ?>
<?php _e('No Results'); ?>
<?php endif; ?>

The issue is in many scenarios you may want to include posts from one or a few categories. The archive feature of WordPress has the capabilities to display posts from a certain category, but it lacks flexibility so instead I prefer to create a custom loop using a page template.

The new loop is:

<?php if (have_posts()) : ?>
<?php
$thePosts = get_posts('numberposts=50&category=1');
foreach($thePosts as $post) :
setup_postdata($post);
?>
THE CONTENT
<?php endforeach; ?>
<?php else : ?>
No Results
<?php endif; ?>

Assuming you use this loop with a custom page template you now have a way to loop through a certain category as well as the ability to make template customizations without having to modify the built in WordPress archives feature.

One last improvement…In my experience if you’re creating a custom loop like the one above you’ll probably be having more than one page with specific categories. That being the case, having a hard coded category ID is not efficient. Instead we can use a custom field to add some flexibility:

<?php
$category = get_post_meta($post->ID, "category" true);
$myPosts = get_posts('numberposts=50&category=' . $category. '');
foreach($myPosts as $post) :
setup_postdata($post);
?>
THE CONTENT
<?php endforeach; ?>
<?php else : ?>
No Results
<?php endif; ?>

When creating a new page you can choose your custom page template and will have the ability to loop through one or multiple categories by adding a custom field for “category”, then listing the category ID. In addition, if you wanted to add even more flexibility you could create a second post_meta option for limiting the number of posts that are displayed:

<?php
$category = get_post_meta($post->ID, "category", true);
$postLimit = get_post_meta($post->ID, "posts limit", true);
$myPosts = get_posts('numberposts=' . $postLimit. '&category=' . $category. '');
foreach($myPosts as $post) :
setup_postdata($post);
?>
THE CONTENT
<?php endforeach; ?>
<?php else : ?>
No Results
<?php endif; ?>

Now you would add two custom fields, one for “category” and a second for “posts limit”. If you wanted to add more than one category for a page you would list out all the category IDs, seperating them with commas (EX: 1,2,3,4).

Files

1. Start of by downloading the Layer_Styles_Start.psd and opening it in Photoshop. Alternatively, you can create you own text if you like. I chose Myriad Pro (Semibold Condensed) at 150pt, I also turned on all caps.

2. Go to Color Overlay, which is located under the “Add new layer style” button. Choose a color and press OK. We won’t be using the color overlay, but it’s good to know about and is generally easier to manage color overlay. Also, you can copy and paste layer styles by right clicking on a layer.

3. Create a new layer and fill it with gray. I used #7C7C7C. This is the background so move it under your text layer.

4. Add a new layer style and choose Gradient Overlay. You’ll notice that nothing is happening. This is because the Color Overlay is on, turn it off (uncheck it) and then you’ll see the Gradient Overlay. Double click the gradient to bring up the Gradient Editor. Choose two colors, I choose yellow and orange for mine.

5. Next we’ll add a Drop Shadow. To turn it on check off the box and then match my settings. Generally, many of the effects like the glows and shadows are too harsh by default and will look rather amateur if you don’t turn down the opacity and size a little.

6. Next we’ll add an Inner Glow.

7. And a stroke.

7. Create a new document with a width and height of 3px. The background should be transparent and resolution 72.

8. Use the pencil tool to create 3 pixels going across at a 45 degrees angle. Refer to pattern.psd if needed.

8. Go to Edit > Define Pattern. Give the pattern a name and click OK.

9. Go back to your document with the text and create a new layer and move it above your text layer. Then choose the Pattern Stamp. Photoshop may show the clone stamp which is the default tool, so you may need to click the clone stamp and select the pattern stamp. At the top you’ll see Pattern: choose the new pattern we defined which will be at the bottom of the list.

10. On your new layer with the pattern stamp selected draw over your text. No need to be neat, but make sure to cover all the text with the pattern.

11. Control click the thumbnail of your text layer in the layers palette to load the selection or go to Select > Load Selection with your text layer selected. Right click on the selection and go to Select Inverse. Then press delete.

12. It looks, better, but I don’t like the way the pattern touches the edge so we’ll cut some more. With the text layer selected load the selection again. Then go to Select > Modify > Contract. Put in 2px and click OK, then Select Inverse and delete. You’ll notice we cut away 2px from the pattern so it isn’t touching the edge of the text anymore.

13. At this point your document should look similar to this.

14. Choose your layer with the pattern, then select the marquee tool and set the feather to 50px. Then drag a marquee around the top half of your text and press delete. You can press delete multiple times to slowly delete more of the pattern.

16. I decided to change the color of my Gradient Overlay. Double click the layer style in the layers palette to bring up the settings. I changed my orange color to a light yellow.

17. The final results…

Files

1. Open Vector_Mask_Tutorial.psd and select your Pen Tool (P). Then select the “Paths” button and “Add to path area” button toward to top left of Photoshop. Now start tracing the car, first go around the outer edges, we’ll delete the inner areas like the headlights, and windows later.

2. This is your first pass, if you make some mistakes you can leave it and fix them later. Keep going around the outer edge of the car. If you deselect your path by mistake, click on the end with the pen tool and you will be able to continue the path. Also, if you hold the alt key handles will appear which will be needed for some areas.

3. When you reach your starting point your mask will be closed. Right click the mask and select “Create vector mask”.

4. If you hide the background layer you’ll be able to see the mask you created. Turn the background layer back on since you’ll need it for reference. Select the Pen Tool (P) again, but this time select “Subtract from path area” located towards the top. After you have it selected start going around the headlights, grill, and driver side window. We don’t want these areas to be effected by the color changes we make, so we need to remove them. Remove the non-silver areas until your mask looks like this.

5. Now you’ll add an adjustment layer which is what will control the color of the car. In the layers palette select your top layer (Silver) and then click the “Create new fill or adjustment layer” button located at the bottom of the layers palette.

6. When the Hue / Saturation menu comes up turn on “Colorize” and then click OK. You’ll notice everything is being effected, but we’ll fix that next.

7. Now hold the alt key and move the mouse between your adjustment layer and your top layer (Silver). You’ll see an icon with 2 circles appear, click and the adjustment layer will shift to the right and an arrow appears. The adjustment layer now only effects the layer below it.

8. I decided to start of with an orange car. Open up the Hue / Saturation settings again so the values can be changed. Double click the icon on the adjustment layer to bring up the menu. Then change the settings to Hue: 43, Saturation: 90, Lightness: -30.

9. Now that we have a bright orange car we can see difference between the silver and orange quite easily. Select your vector mask from the layers palette and select the Direct Selection Tool (A), make sure it’s not the Path Selection Tool. They are under the same icon. When you click your mask the points will appear. Move the points and handles until all silver areas of the car are orange. If the path is getting in the way Ctrl+H will toggle visible Extras on and off. Fix any areas of your mask as needed. You can see in the screenshot there’s a little silver above the tire which I had to fix as well as some other areas. You’ll want to zoom in when moving your points, but be sure to zoom out to 100% regularly to make sure you’re staying on track.

10. When you’re all done your mask should look like this. Hide the background layer if you want to see just your mask. (I decided to remove the orange from the stripe on the mirror and the keyhole)

11. The last step is making the logo on the front of the car show up if you have not done so already. I decided to use the brush since it’s so faint. You can draw directly on the adjustment layer. The areas you paint with black will return back to silver. Zoom in and grab a very small brush, then paint black around the logo with the Hue / Saturation Adjustment layer selected. (Ignore the 3 other adjustment layers you see in the screenshot)

There’s a lot of debate over which adjustment layer works best for changing the color of something like a car. There is no best adjustment layer, most of the time there will be a few you can choose from to get the same results. I chose Hue / Saturation for this tutorial since it’s very simple to use. My final will be shown below, but I also did a few other tests with other types of adjustment layers. The Vector_Mask_Tutorial_Finished.psd has all my Adjustment Layers.

Here’s the final for the orange car that we made in the tutorial, using a Hue / Saturation Adjustment Layer.

This one was made with a Channel Mixer Adjustment Layer.

This one was made with a Gradient Map Adjustment Layer.

This last one was made with a Channel Mixer Adjustment Layer and a Hue / Saturation Adjustment Layer. I will say although Hue / Saturation controls are very easy to use, they can easily wash out your image. I added the Channel Mixer to bring back some of my shadows and midtones.

The Code:

<?php
/*
Template Name: Your Template Name
*/
?>

Most likely right after the page template code will come <?php get_header(); ?> . As a side note, there doesn’t need to be any correlation between the filename and page template name.

1. Select your pen tool, set it to “Path” and “Pen Tool” using the buttons towards the top left.

2. Next create your path.

3. Select the type tool and move the mouse over the start of your path. You’ll see the icon will change, when it does click and you’ll be able to start typing on your path. Type in some mock up text and then click the green check at the top or press the return key.

4. You’re done, but if you want to finesses your path a little, choose the Direct Selection Tool.

5. With the Direct Selection Tool click your path and the handles will appear. Move your points and handles until you’re happy with the text.

6. The final results.

Files

Start off by creating a new document in Illustrator. Your settings will need to be the same as mine.

1. We’ll start of by setting up our guides. The goal is so have them look like this when we’re done. The next steps will show you how to do this.

2. Create a square, the size and location doesn’t matter yet, but make sure it’s a color that you can see. Do not use a stroke, just a fill color. You’ll notice the diagonal line going across my screenshot. That’s the smart guides feature of Illustrator and although I’m not using them yet I will be soon so you can turn them on if needed by going to View > Smart Guides, or Ctrl+U. Also go to View > Snap to point if it isn’t checked already.

3. Select your square and you’ll see the width and height at the top. Set them both to 0.125 in. Make sure you’re not setting the X and Y by mistake. Also you’ll need to turn off Constrain width and height proportions, which is the icon to the left of the blue H. If your rulers are not on turn them on by going to View > Show Rulers (Ctrl+R). If you’re measurement units are in pixels or another unit right click on the ruler and set it to inches.

4. Deselect your square (click the background), then move the mouse over the top left corner of the square until the smart guides show “anchor”.

5. Drag your square to the top left corner of the document. Don’t let go until the smart guides show “intersect”.

6. When the square is selected notice the X and Y are at what seems like random values. To fix this we’ll reset the 0 point. If you look at the rulers you’ll see a white box in the top left where the 2 rulers meet. Drag from the box until you get to the top left of your square. It will say “anchor” with the smart guide. When you let go the rulers will update and 0 is now the top left of your document.

7. You’ll see that when you have the square selected the X and Y are both set to .063, this is because the reference point is the center of the square. Although it doesn’t matter for this tutorial if you wanted to change it, it’s the set of buttons to the left of “X:”. You can see when I set it to top left my X and Y show 0.

8. Lets move on, change your reference point back to center. Click your ruler and drag a guide to the right side of your square. Don’t let go until the smart guides show “path”. Drag a second guide from the top ruler to the bottom of the square.

9. When you’re done it should look like this.

10. Now we’ll do the same thing for the bottom right of the document, but instead of dragging the square using smart guides I’ll use the align tool for the sake of variety. If your align palette isn’t open go to Window > Align (Shift+F7). Before you click anything you’ll need to turn on “Align to Artboard” which is the icon on the bottom right of the align palette. Now click horizontal align right and then vertical align bottom. If you’re not sure which icon is which you can hold the mouse over an icon and it will tell you what it does.

11. Now that it’s at the bottom right create guides just like we did before. Remember to use the smart guides and snap to the edge.

12. Select the bottom right corner of your square (smart guides will show anchor) then drag up and left so the bottom right corner of the square is where your guides meet. It will say anchor again. Drag a guide to the top and another to the left side of the square.

13. Next repeat the same step for the top left. After you place your guides it will look like this.

14. Your document should now look like this. The area between the artboard or edge of the document and the first guides (outer) is the bleed. The first guides (outter guides) represent the crop line. The inner guides represent the safety.

15. Make a large square, bigger than your artboard. It should be around 3x the width and height of your artboard. It doesn’t need to be precise in size or location.

16. Bring up the pathfinder. Go to Window > Pathfinder or Shift+Ctrl+F9. Make another square in the inner part of your first guides. Have a look at my screenshot, remember to use the smart guides when creating your square.

17. Now we’ll use the pathfinder to cut the green area out of the larger blue area. Select both the green and blue square, then press the Subtract from shape area button under Shape Modes: and then press the expand button. Change the fill color to white. You’ll see the layer is now called “<Compound Path>”.

18. There’s nothing on the business card yet, but I added a few things so you can see what we made in action. Here’s my mock up business card, you’ll see the image in the background is going outside of the area of the card. Although you can design a card like this it’s very hard because visually you’re seeing a very inaccurate representation of the card.

19. Now I’ll turn on the Compound Path we made, I currently have it hidden. You can see with it on all of the content outside of my business card is now not showing. Make sure your compound path layer is at the very top and isn’t under anything. Also, notice that my text is going to be way too close to the edge of the card, almost hanging off.

20. Now I’ll turn my guides back on (Ctrl+;). You can see even though I moved my text already it’s still outside my safety (inner) guides so I’ll need to move it in more.

21. I moved my text back into the safety, I also was getting annoyed with the artboard (black box). You can turn it off by going to View > Hide Artboard. Also, notice how my layers are organized. I generally keep my overlays on top and keep them locked so I don’t move them by mistake. Lastly I always keep my guides on there own layer. If your guides are scattered throughout many layers you’ll end up deleting them by mistake when you remove a layer you don’t want.

As I said at the start this tutorial is for a business card template, but you can use these same techniques in a few other adobe applications like Photoshop (with the marquee) or InDesign. In addition, when I create a website I always use the these same techniques for creating my template in Photoshop.

Files

1. Create a new composition with After_Effects_Motion_Tracking_Tutorial_Footage.mov. You can drag the footage to the new composition button to keep the settings of the clip.
2. Open up the tracker controls.

3. In the Tracker Control palette select the layer with the footage as the Motion Source:.

4. Create a new Null Object which will be used for your tracker data. You should always put the position data on a null so there will be more flexibility. Rename your null object to Tracker Data.

5. Click the Edit Target… button and then select the Tracker Data layer (Null Object).

6. Move your tracker point to the yellow ball. When you move the point you’ll see a box which will show you exactly where the point is being placed.

7. In the tracker control click the play button. You should be able to get a good amount of points before the tracker starts to loose the ball. When it does click the stop button and move the playhead back until you find the frame where the tracker lost the ball. Click the Analyze 1 frame forward button in the tracker controls. Then reposition the tracker back onto the ball. You may need to do this in the areas where the ball is at the bottom of the arc, on the lighter background. After you notice it’s able to keep track of the ball (going frame by frame) you can try clicking the play button again. It should be able to get another chunk of the footage before loosing the ball. Don’t use the rewind button when your tracker loses the ball or you’ll rewrite your previous points. Instead move the playhead or go back frame by frame.

8. Eventually you’ll have all your points (up to where the ball goes off screen). Once you’re happy with your points you can click the apply button and your points will be translated into position data on your Tracker Data layer.

9. After you click the apply button you’re Tracker Data should have many keyframes on the Position property.

10. Create a new solid, make it comp size. The color doesn’t matter.

11. With your solid selected go to Effect > Simulation > CC Particle Systems II.

12. In the timeline go to the CC Particle Systems II effect, then go to Producer. Alt click on the stopwatch button which will an add expression to the property.

13. Now that you have the expression you need to pick whip the Position under your effect to the Position keyframes on your Tracker Data layer.

14. Your done, now just play around with the effect settings for CC Particle Systems II until you find something you like.

Files

1. Start off by importing the footage and dragging it to the new composition icon. You can use the test footage I’ve provided or recreate what I have on screen.

2. Select the layer with your footage in the Timeline and then go to Layer > Time > Enable Time Remapping (Ctrl+Alt+T). The Time Remapping properties will appear.

3. You should have 2 keyframes on your Time Remap. One at the start of your footage and one at the end. Drag your keyframe from the end until it’s at 6 seconds or if you’re using your own footage, 50% of the composition duration. When playing back the video you will notice the 15 seconds of footage have been compacted into 6 seconds.

4. Undo your change so your last keyframe is back at the end of your video. Now we’ll use Time Remapping to create a freeze frame. Move your playhead to around 4 seconds. Right click Time Remap and create a new keyframe.

5. With the keyframe you made at 4 seconds selected, go to Edit > Copy, or Ctrl+C. Move the playhead to 6 seconds and then go to Edit > Paste, or Ctrl+V. When you playback your movie it should move from 0-4 seconds, then hold until 6 seconds, and then continue playing from 6 seconds to 15 seconds.

8. Lastly we’ll use the Graph Editor to make some more tweaks. First turn on the Graph Editor and enable it on your Time Remap layer.

9. Move your points around so it looks similar to what I have.

Here’s the breakdown of what this is doing:

From 0:00-0:04 seconds it will play my whole clip, which is 0:15 seconds long. This means it will be playing at around 400% speed.

From 0:04-0:08 seconds it will play my whole clip, which is 0:15 seconds long. EXCEPT it will now play it backwards. It will still be playing at around 400% speed.

From 0:08-0:15 seconds it will play my whole clip, which is 0:15 seconds long, but because it playing over a longer period of time it will playback at around 200%.

There’s many uses for Time Remapping, but there’s 2 uses which I’ve found to be most useful. One is using the freeze
frame use on logos/endtags etc. Sometimes you may realize the logo you’ve used is not holding on the screen long enough. You can create an extra 1 second hold using a freeze frame without changing the duration of your whole video. Although, other parts of the video will play slightly faster it most likely won’t be noticeable.

The other great use for Time Remapping is if you’re using any 3D applications or high end camera. Instead of rendering/shooting your video at 30fps you can try 60fps. This will give you the ability to manipulate your footage much more than when shooting at 30fps.

Two warning when doing Time Remapping…

One is, Time Remapping will effect audio so be careful that you’re only using it on video. Put your audio back once you’re finished.

The other warning is, Time Remapping isn’t going to solve all timing issues. There’s a limit to how much you can slow down footage. If you have footage shot at 30fps you can make it so it plays back at 1000% with no issues, since you’re simply throwing away frames/data. Going the other way isn’t as simple. If you have footage shot at 30fps you will be very limited to how much slower you can make the playback before it start to stutter, especially if there’s a lot of motion. This is why you may want to consider shooting at a higher framerate when possible.

2. Bring your audio into the composition then right click and go to Keyframe Assistant > Convert Audio to Keyframes.

3. A null called Audio Amplitude will automatically be created with your data. Under the effects you’ll see Left, Right, and Both channels. You can delete Left and Right since we won’t be using them for this tutorial. With scale selected on your shape layer go to Animation > Add Expression.

4. Use the pick whip and choose “Slider”.

5. Do a RAM Preview by pressing the 0 key on the numpad and you’ll notice the animation is rather unpleasant to watch since it’s so quick. Next we’ll change the expression so we can tweak the settings.

Paste this over your expression:
temp = linear(thisComp.layer(“Audio Amplitude”).effect(“Both Channels”)(“Slider”), 0, 40, 50, 100);
[temp, temp]

6. You’ll need to find the max value for your Slider data. Turn on the graph editor and then include the Slider in the graph editor. Move the playhead to where the audio peaks and then look at the corresponding value of the slider, it will probably be around 40-50.

In the expression there was 4 numbers: 0, 40, 50, 100.
To break this down in human terms, when the Slider value is 0 the scale of my circle will be 50%. When the slider value is 40 (my max), the circle will be 100%. Replace “40″ with your max value.

7. We’ll add a outer glow as a finishing touch.

8. Pick whip the Slider after making the Size of your outer glow an expression. RAM Preview your movie again to see the results.

The end result is nothing too interesting, but you can apply the same techniques to particle systems or more advanced effects to make nice graphics driven by your audio.

Also you may want to have a look at Trapcode Soundkeys which will allow you to do what we just did, but with a lot more control. You can target certain frequencies and more. You can see a demo here.

1. Generally when working in After Effects you’ll constantly be setting the work area start/end points (B key / N key) so you can preview only the part of your composition that you’re working on. Before you add your composition to the render queue you’ll need to reset this (assuming you want to render the whole composition).

2. Place the playhead at the start of your composition. You can drag, but pressing the home key is the easier and more reliable method.

3. Now that the playhead is in the right location press B to set the work area start location. Again, you could drag the bar below the playhead, but using the shortcut keys is easier, more efficient, and more reliable.

4. Now drag the playhead to the end of the composition or press the end key.

5. Press the N key and set your work area end location. Then add the composition to the render queue.

6. The Render Queue tab will appear in the timeline area. I’ll be leaving the name of my file and output location alone, but if you want to give your movie a filename to be saved as you would click on the “Comp1.mov” text and it would bring up the “Output Movie To” menu. The menu will also allow you to change the location of where your movie will be saved.

7. Before you render you’ll want to check your settings. Click the text (in red box) to bring up the Output Module Settings window. I can’t tell you what settings to use since it depends on your project and what you’ll be using it for, but I will mention that by default audio output is turned off in After Effects. If you want to export with audio then you’ll need to check off Audio Output at the bottom of the Output Module Settings. When you’re happy with your settings click OK.

8. Click the render button and that’s it. When your movie is done rendering go to the location you picked for the movie to be saved to and your file should be there.

Lastly, I’ll mention you can also export by going to File > Export, but you’ll loose the ability to set some settings and it’s generally not the preferred method for rendering. You should get in the habit of using the render queue if you don’t already.