1. The PSD File with the calendar “pages” on it
2. The PHP
3. The CSS

You’ll also need to get the font “Downcome” if you want to keep the font of the Months & Dates the same.

1. First things first, you need to make the calendar. I’ve included a support folder with a PSD file called “datecolumns.psd”. You’re welcome to make any adjustments to it that you’d like, use it as is or completely wipe it clean and make your own, just remember that later on you’ll have to figure out your own background-positions.
2. Second, we need to create an unordered list in the index.php of your site. We’re going to do something like this:

   
   <ul class="smallentrydate">
   <li class="class="date<?php the_time('M'); ?>">
   
   <a>
   
   <?php the_time('M'); ?>
   
   <?php the_time('d'); ?>,
   
   <?php the_time('Y'); ?>
   
   </a>
   
   </li>
   <li class="date<?php the_time('d'); ?>"></li>
   </ul>
   
   

3. That’s it as far as PHP & HTML go. Here’s what we’ve done so far:
   1. Created a class called “smallentrydate”. This is a wrapper for our total calendar page.
   2. Created a class called “date-fill-in-the-blank”. The big M takes whatever month it is and gives an output of “sep” for September, giving you the class, “dateSep” or for August”DateAug”. Using the shorthand for the month with the big M is going to be vital for when we start on the CSS.
   3. We’ve also created a class called “date-fill-in-the-number-date”…So if the post was written on the 5th, it outputs a class=”date05″.
   4. In the <a> tag, you’ll see that we also requested the output of a date in the form of ‘M’ ‘d’, ‘Y’, which would give us “Jan 09, 2009″ in text form. If you turn off CSS, you’ll see this shows up in the place of the calendar image. This is important for accessibility reasons and search engines…so don’t leave it out.
4. Simple so far, right? Let’s move on to the CSS
5. We’re going to start out with defining some things about the smallentrydate class in our style.css:

   
   .smallentrydate {
   	float: right; /* floats it to the right */
   	height: 55px; /* Total Height of Calendar Image */
   	margin: 0 0 10px 0; /* Keeps a good space from text below */
   	padding: 0;
   	width: 60px; /* Total Width of Calendar Image */
   }
   .smallentrydate li {
   	background: url(images/datecolumns.png) no-repeat;
   	list-style: none;
   	margin: 0;
   	padding: 0;
   	top: 0;
   }
   .smallentrydate li, .smallentrydate a {
   	display: block;
   	margin: 0;
   	overflow: hidden;
   	padding: 0;
   	text-indent: -1000em; /* Pushes Text off the page, to keep it from showing up with a stylesheet */
   	width: 55px;
   }
   .smallentrydate .dateJan { background-position: -6px -303px; height: 15px; width: 55px; }
   
   .smallentrydate .date01 { background-position: -6px -318px; height: 45px; width: 55px; }
   
   
   

6. So to break it all down, this is what we’re looking at:
   
   1. We defined the characteristics of our smallentrydate.
   2. Defined the characteristics of our smallentrydate li, most importantly the background-image, and no list-style and the width, which is 55px for every replacing image.
   3. We pushed the text off of the page that would appear on top of the smallentrydate without a text-indent. It gives us the aesthetics of image replacement with the accessibility of text.
7. You’ll also see that I defined .dateJan & .date01 for you. All I did was find the left and top most boundary on Photoshop of January and put background-position: the left (-6px) & the top (-303px) position where I want it to start. (Make sure to use negatives in front of the values), I also defined the height & width.

You’re going to have to set this background-position system up for all 12 months & 31 days, but 43 is a lot nicer than having to do 365 background-positions. You can also use the CSS included in the support folder, which will save you time typing .smallentrydate .date”whatever” everytime.

Hopefully this helps somebody out there. It’s been a great project for me to take on and complete.

1. I want to use a song that has a secret song 5 minutes after the song is over, thus taking up at least 2 songs worth of music on the mix
2. I want to put the secret song & not the first song or the dead space included, in the mix.

The Old Solution: I would take it into Garage Band (which isn’t readily available to EVERYONE) which took about 5 minutes to splice it down and export it and reimport it into itunes.

All along, I could have done it easily in iTunes.

Here are the simple, quick steps I use to accomplish 3 things:

1. Separate the first track from the secret song
2. Separate the secret song from the original track
3. Keep the original LONG track because it doesn’t hurt to have it

Let’s begin.

1. First figure out the song you want to use. I am going to use “Eskimo” by Damien Rice on his Album O, because it’s my FAVORITE song of all time, and finds itself as a “signature” on most mixes I make. I renamed it “Eskimo (Full Version)” so that I can keep up with the three tracks later. You’ll see here that there are actually two tracks, the first is the End Result of Eskimo & the second is the original, 16 minute full length track. We’re going to edit the FULL length track. Find the end of the first song of the original track and make a note of the timestamp. You’ll need this when in a minute.
2. Select the track title and ctrl+click for mac (right-click for pc) and select “Get Info”.
3. In the tabs at the top of the Get Info pane, select “Options”.You’ll see a box for both “Start Time” & “End Time”. You want to put the timestamp from earlier in the End Time box & click OK.
4. Now right click the same track & select Create ACC version. Rename it, “Eskimo”. Now you have a 5:15 minute version of Eskimo.

All you have to do to do the same thing for the secret song is find the beginning & end of it, and use those timestamps in the “Start Time” & “End Time” boxes, create the AAC & rename it “Secret Song” or something along those lines.
Make sure to reset the times on the Full Track version, just to be sure you don’t spend hours trying to figure out why the song won’t play all the way through next time you listen to it.

Now you have:

1. The Original Full Version Track
2. The First Song
3. The Secret Song

No more using Garage Band or settling for 16 minute tracks anymore. Enjoy!

1. Create a new document (cmd+n for macs ctrl+n for pcs; this is a VERY useful keyboard shortcut to know) with a width of 300 px & height of 400 px @ 72 dpi. (The 72 dpi is only important if you want to create web-only graphics)

2. Select the eliptical marquee tool & make a large, symmetrical circle by holding the shift key as you drag the circle.

3. Create a new layer (cmd+shift+n on macs or ctrl+shift+n on pcs), name it “top turn” & stroke the marquee on the inside through Edit > Stroke with a width of 10 px with a stroke color of black (#000000).
   
   Result:
   

4. Now, deselect your marquee by using Select > Deselect or cmd+d, and Repeat step 2 with a circle about half the size of the first circle, & repeat step 3 (naming the layer “bottom turn”).

5. Now left align those layers by selecting the Move Tool (keyboard shortcut of V).
   

6. Create a new layer, naming it “straight aways”, and using the rectangular marquee, create a rectangle that is as wide as the smallest circle, and has ends at the center of both circles. The circles can be moved later, so it’s not that important to align just yet, but it is important that it’s the exact width of the smallest circle. When you stroke the rectangle, it is imperative that you stroke the inside in order for it to look right. Stroke it at 11 px, rather than 10 px.
7. Now align all layers left, & “clear” out the parts of each layer that aren’t part of the paperclip. For instance, the bottom of the top circle, the top of the bottom circle, and the horizontal bars of the rectangle. The best way to do this non-destructively is to use the layer mask, which is at the bottom of the layers palette.
8. • 

9. Select the “top turn” layer, and use the marquee to select the top half of the circle. When using marquee to select what you want to layer mask, select what you want to show. Repeat the same steps for the subsequent layers. If you feel the straight away layer isn’t long enough, simply use Edit > Free Transform (or cmd+t for macs, ctrl+t for pcs), and drag it vertically. Be sure not to let it change horizontally, because it will adjust the width of your straight sections, making for a “disconnected” paper clip.
   

   • After you’ve layer masked:
     

   • Tip: If the straight sections don’t quite line up with your bottom circle, use the marquee to select the right half of the straight section, select the Move Tool (V), and simply use your right or left arrow buttons on your keyboard to move it directly over the right side of the bottom circle.

10. At this point, your paper clip should look like a dull, “clip art”-esque paper clip. This is where the magic of layer styles comes in.
    

    • Tip for Noobs & Professionals: Go to your history palette (if you can’t see it select Window > History), and create a snapshot of your work before moving onto the next step. This way, if anything goes terribly wrong in the next step, and you continue without realizing you’ve made a horrible mistake along the way, you have your snapshot to revert to.

11. Select all of the layers you’ve created (do not select the background layer) and merge them by selecting Layers > Merge Layers or using cmd+e for macs or ctrl+e for pcs. Now you should have one layer, which you should rename “paper clip”. Now using the eliptical marquee, create a symmetrical circle, to go at the top of the “bitter” end of the paper clip (the long, right straight part) to make it look rounded, and fill it with black by selecting Edit > Fill or pressing D to reset your foreground color to black, and using option+delete on macs or alt+delete on pcs to fill it with the foreground color.
    
    
    Do the same for the top circle’s loose end.
    
    

12. Select the effects button (fx) at the bottom of your layers palette, and begin by selecting “drop shadow”. This will make our paper clip look like it’s above the page that it is clipped to.
    

    • Use these settings:
      
      

13. Next, under the effects button, select “Bevel & Emboss”, and use these settings:
    
    
    Now we’ve got some “3d” effects, it’s time to make the paper clip really “shine”.

14. Under the effects panel, select “Satin” and use these settings:
    
    

    • I found that playing around with the contour shapes really helped to tweak my paper clips “almost touchability”. So roam. Play. Find new things.
    • One more little finishing touch. Create a layer mask on your “paper clip” layer, make a  rectangular marquee at the “big circle” loose end, and fill it with black, which will make it look like it’s “clipped” to another piece of paper. It may look strange right now, but we’re going to use a really neat-o, not so well known blending option.

    • Double click on the effects title under your layer and click on Blending options.
      

    • In the Advanced Blending section you’ll find a check box that says, “layer mask hides Effects”. Check “yes”, Romeo!
      
      

    • As you’ll see when you check it on & off, the layer’s effects assume that the “layer” itself is being hidden by the layer mask when the check is off, and makes it do some really funky effecting. When it’s checked on, it makes it almost like the entire layer, effects & all, are hidden behind whatever it is your paper clip is clipped to. The work around for this used to be to merge this layer with another layer & simply cut off the part that looked “icky”. This is nice, because it keeps your effects entact & allows you to make it look like it’s a truly, used, paper clip.

• Your finished paper clip should look a little, if not entirely, like this:
  

• Hope this tutorial was helpful, please feel free to review the tutorial itself, as it was my first ever.