Responsive Video Embeds

Tips

FitVids [Website ]

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Use: include jquery, include jquery.fitvids.js
Add: fitvid class to video container divs

$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(".fitvid").fitVids();
});

Artwork: From Pencil/Ink to Digital

Tips

Tools: Scanner, Adobe Illustrator

1. Start your artwork on a large format to start with.  If it is an existing drawing that is small you can enlarge the image with a photocopy machine.
2. For the final line-art you want to take tracing paper and use pen or sharpies.   This will produce nice crisp lines.  If there are minor mistakes we can fix this in Illustrator provided there isn’t too much adjusting that needs to be done.
3. Scan your nice clean ink work at 300 dpi.
4. Open a new document in Illustrator. Go to File > Place and select your scanned document. Resize the image to fit inside the document edges.
5. Go to “Object” in the top menu and select “Image Trace.”  This will turn your artwork into a vector format.
6. Ungroup the modified artwork.  Delete the background.  Group sections of the art together (pants, shirt, etc.) and apply basic colors.
7. You now have scalable vector art of your drawing.  You can now either make your stickers or pull it into other art programs for further adjustments.

Poster Tips: PowerPoint

Tips

Here are some general guidelines I follow when working posters.  You can skip to relevant sections and use my suggestions as you see fit.

1. Set the document size:
   • Create a new document.  Go to the tab “Design” and then “Page Setup” button.  Set your final width and height.  This is the first thing you do with a new document because if you change this later it will do bad things to your images and text.
2. Adding screen shots:
   • When your window is ready you press “Print Screen” then paste it on your slide.
   • You will want to crop your image to just the portion of the screen you want to use.  Right click your image and “Format Picture” and select the “Crop” section.  Under “Crop Position” you want to first set the “Left” and “Top” sections to the top left edge of your screen.  Then set the “Width” and “Height”.  You should now have a nicely cropped screen for your poster.  Note: You want to set the Width and Height last because these will shift if you change your Left and Top afterward.
   • I will usually put a solid border with a drop shadow to help make the screen pop.
3. Text boxes:
   • I prefer to put my text inside white rounded boxes, no border, with a drop shadow. It is a clean look that is easy to read. I usually make my headings bolded black text and my paragraph text grey.  This helps your viewer pick out the different sections of the poster quickly and will look nicer.
4. Spacing:
   • Try to keep the spacing the same around all elements. So your paragraph text will have 1cm before the edge of the text box.  All the images and text boxes should have 1cm between each other. That 1cm can be any size the important thing to remember is that you keep it uniform for all elements.  Try not to have too much empty space on your poster.
5. Images:
   • If you are familiar with Photoshop or Illustrator, I recommend exporting your images as a PNG with a transparent background.  This will allow you to drop all your images into PowerPoint or other programs and allow the background to show through the image.  This is particularly helpful if you are working with a group and they may need your graphics for other uses in the future.

Great looking data: using Excel and Illustrator for high-quality graphics for publication

Tips

1. Make your graphs/charts in Microsoft Excel.  We are going to do a few things before we export our graphics to Illustrator:
   1. Fonts.  You want to use Arial as both programs work well with this font.  Sometimes with other fonts when you transfer your artwork over to Illustrator strange things will happen to the text so just go with this for now and you can change this in Illustrator after the import.
   2. No effects or shading.  Use only solid colors (no gradients).  No shadows. Nothing.  You want plain graphics at this point.  We can spice things up in Illustrator, the important thing to remember is that you want your data to stay intact in a vector format.  When you add shadows or gradients the program will render it as a raster graphic in pixels and we don’t want that.  Vector all the way!
2. Now that our graphic is ready we will select the main container in Excel and do a File > Copy.
3. Open a new document in Illustrator. Any size is fine you can adjust this later.
4. Go to File > Paste and we will need to do a few things with our graphic at this point before we can work with it.
   1. Drag your cursor across the entire figure so all elements are selected.  Ungroup 2-3 times, go to your menu Object > Clipping Mask > Release, Object > Compound Path > Release.
   2. When we transfer the graphics there are a number of extra objects that get transferred. My best guess is that these empty boxes are grouped to the other objects to keep things in the right position during the transfer but at this point we no longer need the placeholders so they can be deleted.  Click one of the empty boxes and go to menu Select > Same > Fill and Stroke.  This will select all the other empty boxes in your document and hit delete.  Select > Same is a useful tool for selecting groups of objects that are similar so keep that in your mental tool-bag for future projects.
5. Now you want to create a container so you can get the perfect sizing done for your graphics.  Create a new layer and label it “Workspace”.  You will now select the rectangle tool and click on your art board.  This will bring up a menu where you can enter an exact size for your box.  I usually will measure my document in inches and enter that as my size.  This box will only have an outline color visible and you want to fit your final figure inside this area.  Lock this layer so you don’t accidently move or delete it.
6. Select your whole figure and resize it to fit inside your Workspace box.  Then you will select your text and adjust the font type and sizing.
7. When you are finished sizing everything you will delete your “Workspace” layer and save your final document.