#skyline {
    width: 400px; height: 200px;
    background: url(test-3.jpg);
    margin: 10px auto; padding: 0;}
  #skyline li {
    margin: 0; padding: 0; list-style: none;}
  #skyline li, #skyline a {
    height: 200px; display: block;}
  #panel1b {left: 0; width: 95px;}
  #panel2b {left: 96px; width: 75px;}
  #panel3b {left: 172px; width: 110px;}
  #panel4b {left: 283px; width: 117px;}
  #panel1b a:hover {
    background: transparent url(test-3.jpg)
    0 -200px no-repeat;}
  #panel2b a:hover {
    background: transparent url(test-3.jpg)
    -96px -200px no-repeat;}
  #panel3b a:hover {
    background: transparent url(test-3.jpg)
    -172px -200px no-repeat;}
  #panel4b a:hover {
    background: transparent url(test-3.jpg)
    -283px -200px no-repeat;}

plaguedoctor fucked around with this message at 10:22 on Jun 10, 2009

RobertKerans fucked around with this message at 23:57 on Jun 16, 2009

Shmoogy fucked around with this message at 21:05 on Jul 6, 2009

1. Using Illustrator, put the raster image on a layer and lock it.
   
2. In a new layer, select the pen tool, and just click at all of the 'significant points' on the raster image of the mouse, on the layer below. (This would be the end of the nose, end of the ears, between ears -- any time the line changes direction). It will look very blocky and straight, but that's OK.
   
3. Because this is an organic shape, there aren't any of these aforementioned straight lines -- select all the anchor points (press 'A' to switch to 'Direct Selection Tool' [it's the WHITE cursor], click and drag on the artboard and select all the points), and press the 'Convert selected anchor points to smooth' button at the top pane. It looks like a square with a curve going through it.
   
   1. IF you don't see it, and instead see the fill/stroke options, select all the points except one, convert to smooth, then select the last one and convert that. Sometimes it does this, others it doesn't.
4. Now you should have a squiggly semi-mouse. Good! Move the points better into place using the 'Direct Selection Tool' if any are off or need fixing.
   
   1. You should see that the lines don't quite match up -- this is alright. Remember before we hit that 'Convert to smooth' button? What that pretty much did is shape the point's handles such that the line became a curve. This means we are now free to go back in and readjust the handles, shaping the curve to fit the mouse's body.
5. Do this now; click any point, and then click and drag either of the little white balls coming off of it. This will adjust the curve.
   
   1. If you want to adjust one side independently of the other, you'll need to switch to the 'Convert Anchor Point Tool' (Shift+C, looks like a cursor with no fill. Or a V, rotated to point northwest.) Then just click and drag a handle as normal, it'll move without affecting the other.