Build a Flash portfolio

Getting your work on the web is essential when it comes to self-promotion. Any professional print materials should include a URL so that prospective clients can see more of your work at their convenience. Also, an online design portfolio is a cost-effective way to keep your recent work in front of your clients' eyes. Updating your website is quicker and cheaper than sending out printed promotional pieces every time you do something new.

For this particular portfolio, we're looking to showcase some of Derek Lea's more whimsical and vector-based work. The overall design reflects the content of the illustrations featured in this online gallery, but the design is also subtle and subdued enough so that it doesn't compete with any of the images on display. Any successful portfolio design should always complement the work within, without drawing attention away from it. Before you begin, launch the .swf file included in the support download. Viewing the portfolio before you get started is an excellent way to make sense of things ahead of time.

If you look at the background, you'll notice that it's mostly white with groups of outlined objects scattered about as well as some filled shapes in varying shades of grey. The circular motif is one that appears repeatedly in this style of work and is an excellent background element because of its simplicity and versatility. This motif also lends itself nicely to simple animation techniques.

So, we've created a simple looping animation in the background out of a few circles. This adds a little life to the static portfolio, creating some subtle movement without causing the viewers' eyes to tire. You'll also notice that the circular motif gets put to good use as an interface element, carefully containing all the illustration thumbnails at the left of the design. These thumbnails initially appear grey, until a simple rollover reveals a glimpse of colour that the full colour image will contain.

The Flash file is comprised of elements that were created in Illustrator as well as Photoshop. It is always a good idea to prepare elements well ahead and according to plan, so that once you're inside the realm of Flash you can concentrate on nothing but creating a working portfolio.

Click here to download the support files ( 8MB)

Click here to download the tutorial for free