Tuesday, January 15, 2008

Make Your Design Portfolio Slideshow POP For Cheap

Those who know me, know that my main focus is graphic design, I love designing and creating things using unconventional software and resources. However, my 9-5 job focuses on managing a community technology center for a non-profit organization. Working for a non-profit has taught me, and my IT staff, how to make things happen technologically for pennies on the dollar. I have learned how to use open source and low priced software to make things work that outsiders think we spent thousands of dollars on.

Drawing upon that experience, and my love for graphic design, I’ve put together a tutorial on making a sleek design portfolio/slideshow to embed into your website using free or cheap resources. Note this tutorial is not for photographers but it is made for graphic designers, fashion designers, or other artist whose designs are not already in picture format. Also, this is not a quick five minute tutorial, REMEMBER THE CHEAP WAY IS THE LONGER WAY IN DESIGN. This tutorial is a design process allowing you to use your own creativity every step of the way. I assume that you know how to do some basic things such as upload pictures to Flickr and copy and paste code correctly. So let’s get started.


Timeframe: 2-3 hours

There are many ways that you can go about getting all of your designs in a jpeg format. My personal favorite is using a free program called Screen Print & Capture 32 3.5 which can be downloaded at http://www.download.com/. This program is very handy if you know how to use it. Let’s say you created a brochure for a company and want to display that in your portfolio, you can find yourself easily frustrated because screen printing can take a long time if you don’t use it correctly.

  1. Create a folder that you want all you pictures to go to (ex: C:\Documents and Settings\TechStarlet\Deskstop\PortfolioPics)
  2. Open ScreenPrint 32 and go to the Save Options Tab. For the file format choose JPG and for Folder browse to the folder you created above.

  3. Click Okay
Now every time you press the Prnt Scrn button on your keyboard, an image of your screen will go directly to your folder. You can crop or edit in your favorite image editor if needed.


Timeframe: 2-3 hours (depending on number of images and your level of perfection)

Now for the fun part, designing your portfolio slideshow. Many people will disagree with me when I say to design your portfolio slideshow before you design your website. But if you are like me and have an eye for design, you want your website to compliment your portfolio slideshow not your portfolio slideshow to compliment your website. Others will also say “why not just stick a caption on my images”. If that ‘s the way you want to do it you can skip to part 3. But designing around each image is ascetically pleasing and can be done using Microsoft Office PowerPoint or Open Office’s Impress to make a slide show of all of your images.

  1. Put each image on a separate slide
  2. Format your images (use shading, reflections, 3D effects, or glows)
  3. Put a caption on each image. If you are a freelancer you want to be sure to add what the end product is, what client it was for, and what the client used it for.
  4. Make sure your slides have some sort of uniformity (consistent text or style).


Time Frame: 10-20 minutes

Before we can even get ready for this you need to save each slide as an image (see below) and upload to Flickr.

1. In your presentation software Go to File and Saves As. Choose jpeg from the drop down, browse to your folder and select okay.

When prompted to save every slide or current slide choose Every Slide.

Now every slide is saved as an individual image in your selected folder!

Okay now it’s time to make some decisions. How do you get your portfolio slideshow web ready? Below are some options with an example under each.

  1. Use slideshare and upload your presentation. Grab the embed code and embed it into your website.

  2. Use Slide.com and embed it into your website.

  3. Use a Flickr slideshow (my favorite tool is the Flickr Slideshow Generator)

  4. Use Open Office Impress and export as an HTML or flash file for instant web readiness (the help section on Open Office’s Impress is a great resource for the step by step process)

5. Use PictoBroswer and create a embeddable slideshow

6. Use slideoo to display your images.


Now embed your portfolio into your website!

If there are other ways that you have used open source or free resources to display your design work, let me know!

Like This? Love This? Let me know!