Flash is notorious for being one of the least intuitive animation programmes available, but when it’s learned, it is an extremely useful tool.

Check out these top ten Adobe Flash tutorials to help you learn the basics of how to use Flash:

Web Monkey – Introduction to Flash

This two-part series covers the fundamentals of Flash: what it can do and how to use the controls.  If you aren’t familiar with the programme, this is a great place to start.

Simple Flash Header

This tutorial will show you how to make a basic header with rotating fan blades in the background.  It’s a graphic that is simple enough to be eye-catching without distracting the viewer.

Broder Jakob – Drawing in Flash

This tutorial is designed to help you draw in Flash—great tips for when you need to create your own images.

Steves Tutes – Basic Flash Animation

Get a feel for basic Flash MX animation with this tutorial.  It goes over tweening and key frames.

Flash Picture Animation

This tutorial will show you how to create an animation from a static image by using the Brush Tool and mask.

Slideshow Image Gallery

Making a slideshow-style image gallery is an easy way to present multiple images in a style that can suit just about any type of website.  And here’s a tip: if you’re trying your hand as a freelance designer, this Flash gallery is a great way to showcase your work on your website.

Interactive Content Box

This tutorial will show you how to make an interactive content box.  This is a great, user-friendly element to use in your web designs.

Preloader Flash Tutorials

Preloaders should be used for any videos or sites that take a little time to load.  This tutorial will show you how to make a preloader out of any simple image that applies to your site.

Flash Menus with Masking

Easy and intuitive navigation can make or break a website, so it’s important that you learn the Flash techniques that make for a great navigational menu.  This tutorial will give you some solid tricks of the trade with room to grow as you develop your Flash skills.

Drop Down Flash Menus

Another navigational menu tutorial.  This one offers an easy way to build an attractive drop down menu that you can customize with colour changes and fonts.

Students in our Adobe flash courses will learn all the tricks and tips they need to create interactive and engaging websites, but if you need a refresher or just want to start exploring on your own, there are plenty of great tutorials on the web to get you going. Natcoll has short courses to upgrage your skills in flash based in Wellington, Christchurch and Auckland. Natcoll also has an Flash games course for students that might like to learn some more advanced Flash.

What makes a great web design?

Great web design is not easy. You need to create something clean to the eye, but also something that conveys some personality. Not to mention something that grabs the viewer’s attention. Plus the elements should be consistent throughout. And don’t forget to make it useable!

It’s no easy task, which is why so many web designers start by enrolling in web design school. Natcoll’s web design courses cover all the basics of graphic design, the fundamentals of working with the web, plus the skills needed to pull off the advanced that will make a site really pop.

Web design combines creativity with technological know-how to form a medium that communicates ideas visually and encourages the viewer to explore deeper. It’s unlike traditional print design in many respects, but when it’s done well the results can be just as stunning as any work of art.

One of the best ways for designers to figure out what works for web design is to look at examples of other works. Here are some great blogs that regularly post the best designs on the web. Check them out for some inspiration and who knows? Maybe something you design will make the list!

1. www.makebetterwebsites.com

This site is dedicated to supporting beautiful and well-designed websites—all in the name of protecting the web from ugly sites.

2. www.cssheroes.com

CSS Heroes showcases a range of design styles that have been executed to perfection. Check out this site for some truly impeccable pieces of work

3. www.smashingmagazine.com

Smashing Magazine has a number of great design resources attached to it… the Showcase area features lists of great example sites categorized in groups such as e-commerce sites or bad examples.

4. www.siteinspire.com

This showcase (which is a pretty stunning site in itself) lets you browse over 2,000 sites which can be browsed by genre, theme or type.

5. www.designbombs.com

Showcases a range of great websites (you can browse by category from the sidebar) and also offers up the occasional blog post with more inspiration.

6. www.lightondark.com

This site only features sites that make use of white text on a dark background. A great resource if you’re planning on using a darker theme for your site.

Web development describes the technical aspects of creating a web site.  This can involve simple coding for a static page or developing complicated applications or eCommerce functions.  Great web developers can make a page easy to use, look great and work smoothly with applications.

As far as job security goes, this is a great choice: the Internet isn’t going away any time soon and a web presence is becoming increasingly important in the lives of businesses, organisations and individuals.  Web development is also a great choice for people who love to learn new things and continue to develop their skills: new web programmes are being innovated all the time.

Getting started: Learn the basics

Just like learning any new skill, you want to start by learning the programmes and techniques involved.  Of course, we recommend Natcoll’s Diploma of Web Development for this, but if you want to get a head start on your own, check out our previous post which has a list of great web design tutorial sites that will help get you started.

Online tutorials are also great for polishing up skills you already had reminding you about techniques you may have learned once but forgotten.

Develop your abilities: Surf the web

Aspiring writers are often given the same tip when it comes to their career: read constantly.  The idea behind this is that exposure to other styles and genres, both good and bad, is a powerful learning experience.  Aspiring web developers should take the same approach and surf the web diligently, paying attention to the function of the sites.  Look at sites that work, and look at sites that don’t: both will help you learn.

It might be helpful if you choose a type of web site each month (eg. online banking, eCommerce, blog) and view samples of these, taking note of functions that work and those that don’t.  Pay attention to any cool new features you find and anything that inspires you along the way and try to figure out how to do it yourself.

Launching your career: Put together a portfolio

Once you’ve perfected your web development skills, you’ll want to put them to use!  Finding a job in web development is often a matter of presenting a portfolio of your work to potential clients.  Of course, having a portfolio usually means having done some web development work already…  It can be something of a paradox.

Fortunately, if you’ve enrolled in a web development course, you will have a completed portfolio by the time you complete the diploma.  And because your instructors have experience putting portfolios together, you’ll benefit from expert advice.

And once you’ve got your portfolio ready?  You’re good to go!  Start sending out resumes and going to interviews: you’re on your way to a career in web development.

Your first job is always the hardest to get.  If you’re launching your 3D animation career, there are a few things you should know about to to make the transition from school to career a smooth one:

Putting together your show reel and CV

Just like any job, getting hired requires first sending out a CV and cover letter to potential employers.  These will highlight your relevant skills, your interest in working for them and what special qualities you can bring as an employee.

To make sure you have an edge on the competition, you’ll also want to have a really stellar show reel on hand.  A show reel (sometimes known as a demo reel) is similar to a portfolio a 2D graphic designer or artist would use, but in the form of a DVD.  Your show reel should only be about two minutes long, and should be carefully planned and edited to show the best of your work in regards to depth and breadth.

For some thorough tips on how to put together a winning 3D animation show reel and CV, check out some showreel hints in our previous post from one of Natcoll’s tutors.

Prepare for the interview

You’ve probably received job interview tips before…  Dress appropriately, make eye contact with everyone, practice your hand shake, etc.  You should definitely take all of these into account, but also consider a few of the quirks that are unique to 3D animation job interviews:

• Prepare answers to questions about your experience with certain animation programmes, how you work in teams and what you do to maintain a high quality standard in your work.
• Be very familiar with the kind of work your potential employer does: you’ll be expected to fit to their expectations.  If you have a really good idea of the type of work they do, and the type of work they like, you can even tailor your demo reel appropriately.
• Be positive about your previous work.  No artist loves everything he or she has created, and that’s OK.  But rather than being negative about past work, highlight what you’ve learned from the experience and how your work has developed since then.

Get some help

Natcoll students in our 3D animation course are guided through the process and finish their course with a completed show reel.  We incorporate lessons in industry practices to give students an understanding of what they are stepping into after graduation.  We also offer a few networking opportunities throughout the year and encourage our students to make connections in the industry while they study.  There’s nothing like a little bit of help to get you ready to launch your career!

A digital designer is a broad term used to describe anyone who uses a computer to design.  This includes we designers, print designer, animators and more.  An individual with the skill set that makes a great digital designer has a wide range of fun career paths and opportunities to choose from.

At Natcoll, we teach some of New Zealand’s best aspiring digital designers and we’ve noticed a few things about what makes a great digital designer.  Read on for some qualities that make for a successful career in digital design…

Willingness to learn

Digital design changes rapidly.  Programmes become obsolete, new technologies are developed and colour schemes fall out of fashion.  To succeed as a digital designer, you’ll need to stay on top of all of these changes.

This means that not only will you need to learn digital design and then be quick to adapt to new developments, but also excited about seeking them out.  Changes in the industry won’t happen overnight, and it’s important that you’re willing to dedicate an amount of your time keeping up-to-date by reading digital design blogs and talking to digital designers about your field.

Communication skills

You’ll need to be able to communicate verbally and visually as a digital designer.  First, even though the nature of the work forces you to sit in front of a computer for hours at a time, you’ll also need to talk to people.  Specifically, your clients.  If you can’t communicate a clear vision of the work to your clients, your expectations may be in different places resulting in an unfortunate surprise at the end of the project.

You also need to be able to communicate visually.  Your work won’t just be about using lines and colours to make something look good, your clients want you to create something with meaning.

Creativity

Digital design is an area where creative types excel.  Traditional artists will find the fundamental rules of design are familiar and intuitive, but that doesn’t mean you have to have any artistic expertise to succeed.  The great thing about working in digital is that even if you can’t draw a straight line, you can still create stunning images on a computer.

Training

You won’t get far as a digital designer without knowing how to use a computer.  There are a handful of programmes you’ll need to become intimately familiar with in order to succeed as a digital designer: Photoshop, Dreamweaver and Illustrator just to name a few.  Mastering these programmes will allow you to turn whatever you imagine into reality.

Still, you need more than just training in the relevant computer programmes.  It’s important that you choose a training programme that gives you all of the tools you need to succeed as a digital designer, including design basics, typography, branding and advertising principles and industry practices.

Natcoll offers comprehensive programmes to help you learn digital design and succeed in your career.

• Animation and Digital Video
• Computer Graphic Design
• Interactive Design
• Web Development
• Animation Advanced
• Digital Filmmaking
• Digital Media

Here’s a quick lesson on how to use the Photoshop  ‘Content-Aware Spot Healing’ tool, taught by one of the fantastic instructors at our school of design.

Download the image for this tutorial.

The tool we’re going to use today is new to Photoshop CS5, so if you have an earlier version of Photoshop you won’t have this.  It’s a tool called ‘Content-Aware Spot Healing’, and is really handy for getting bits and pieces out of the image.

We’re going to use a picture of some elephants in a zoo.  You can tell it’s a zoo because of the wires that run across the background of the image.  What I want to do is remove the wires, so the elephants look like they’re in a more natural setting.

In older versions of Photoshop, we might have used ‘Clone’ or ‘Healing Brush’ or maybe even ‘Patch’, but in CS5 we have an easier way.  Click on the ‘Spot Healing Brush’ in the toolbox on the left.

The toolbar up top will present you with some new options:

What we’re looking for is the ‘Content-Aware’ button.  Make sure that’s selected.  In older versions, I would recommend using the ‘Spot Healing’ brush only for spots, but with ‘Content-Aware’ we can use it for lines as well.  If you click and drag the brush along the wire and then let go, you’ll see that the wire is replaced with a natural-looking background.

This feature allows you to remove the wires and makes the image look more like you stumbled across the elephants in Africa than at a zoo.

And one more feature you should be aware of is the use of layers when you are using ‘Content-Aware Spot Healing’.  I’m going to undo my ‘Content-Aware Spot Healing’ and go up to the toolbar to the ‘Sample All Layers’ box.

This function means that if you have multiple layers on the file, it will sample all of the layers together.  I’m going to go down to the bottom and create a new layer by clicking on ‘Create a New Layer’.

When I use Content-Aware Spot Healing to eliminate the wire after I’ve made a new layer, the change gets put on the upper layer.  This means that we can change the strip that now covers the wire by moving it or taking pieces out of it…  It just gives us more flexibility with the image.

I hope that was a helpful introduction to ‘Content-Aware Spot Healing’.  It’s a very useful tool, and I expect that once you’ve played around with it a bit you’ll find a number of great uses for it.

If you’re interested in learning more about Photoshop and other digital arts techniques, consider enrolling in a graphic design course.

To pick up more skills in Photoshop and other design software check out our range of great resource books offered through Natcoll Publishing or see our range of short design courses. And keep checking back with the Natcoll blog for more Photoshop tutorials!

In this Photoshop class, we’ll look at using the Content-Aware Scale function, available in Photoshop CS4 and CS5.  I’m going to use this tool to make my portrait-type shot (taller than it is wide) look like a landscape (wider than it is long), but without the distortion that would occur just by stretching it.

Download the image for this tutorial.

The first step is to unlock the layers, so Photoshop can identify the background layer from the foreground objects.  So to do that, I’m going to go to the lower right corner and double click the lock icon.

You can name it the layers, but it’s not really important.   I’m just going to click OK.  Now I’m going to add some more canvas.  Under image menu, go to ‘canvas size’.

The box that pops up tells me that the current width is 8 and the height is 10.  So what I’ll do is double the width.  I’m going to type in 16.

Then I’m going to click the left-facing arrow below.  When this is greyed out, it means that the extended canvas width is going to be added onto the right side only.  So our extra canvas will look like this:

To fill this blank canvas, we’re going to us Content-Aware Scale, a new feature in CS4 and also available in CS5.  To use it, select ‘Edit’ on the toolbar and drop down to ‘Content-Aware Scale’.

What this does is have Photoshop compress the image while trying to maintain objects that standout, like the birds and the boat.

If you look at the toolbar you’ll see the amount set at 100%.  Leave that where it is: it’ll minimise the distortion.

You don’t need to worry about the Protect button, since there’s nothing else in there.  The man icon on the right is for images with people in them.  Clicking this will tell Photoshop to scan for skin tones when it separates the objects from the background.

I can now start adjusting the dimensions of the image by dragging the borders.  You’ll see when you change the size of the image the background will stretch and contort but the objects, like the gull in the foreground, will remain the same.

I’ll play around with it a bit.  If I stretch it too far the gull will start to distort, so we need to test the effects to get it to look right.  I’ll push the bottom up a little, push the top back up and drag the sides out until it looks the way I want it to.

Now, to deal with all the excess canvas, go under Image on the toolbar, and select ‘Trim’.

It will give you the option to trim away all transparent pixels.  Click ‘OK’ and we’re done.  And now we’ve got a landscape image that started off as a portrait:

Pretty amazing, right?  That’s how to use Content-Aware Scale.

To pick up more skills in Photoshop and other design software check out our range of great resource books offered through Natcoll Publishing. Learn more awesome techniques with Photoshop classes and other short design courses at Natcoll and don’t forget to keep checking back with the blog for more Photoshop tips and tricks.

The tool I want to talk about today is called ‘Refine Edge’.  This came out in Photoshop CS3 or CS4, but it really wasn’t very well refined until Photoshop CS5.  What this tool does is make it easier to select certain objects and make them look more realistic when imposed on a new background.

Download images for this tutorial:

• Image of lady
• Image of sky

Hair is one of the hardest things for selections, especially hair with curls or frizz sticking out.  What I’m going to show you now is the best way to handle these types of tricky selections.  We’ll start with this image of a woman with wild hair:

And we’re going to try and put her in front of a sky background.  First, I want to put this image on top of a sky layer I also have opened.  I’m going to click and drag the woman’s image onto the sky.

Once I have the images layered, I want to change the size of the woman to better fit onto the sky.  So I’m going to hit ‘Command’ and ‘T’ on my keyboard, which allows me to resize her.  Then I’m going to drag the corners to make the image the size I want.

Once the size is all set, we need to try and select as much of the woman as we can.  It might be tempting to use the ‘Magic Wand’ tool on this, to select out the background, but if we do that what we end up with is this:

That halo effect is exactly what we’re trying to avoid.  So instead, we’ll use the ‘Quick Selection’ tool to select the woman by clicking and dragging across her skin and hair.  Once you’ve selected as much of her as possible, go up to the top toolbar and click the button that says ‘Refine Edge’.

A box full of options will appear after you click ‘Refine Edge’, and then can be a little overwhelming so we’ll take a closer look at them.

First, the ‘View Mode’ describes how you want to see your image.  You can choose whatever background is the easiest for you to work with.

For this project, I think ‘On Layers’ is the easiest.  Once I’ve selected that, I’m going to move on to this little button to the left of the Edge Detection box.

The ‘Refine Radius’ tool will let you paint the areas that you want Photoshop to revisit and enhance.  So I’m going to paint over the spots where the selection tool has missed some of the hair.

When I let go, Photoshop is going to have another think about these sections and try to refine the selection.  Once I’m finished, it should look better:

That’s much better.  The sliders on the toolbox will also change the look of the image.  Every image will be different, so experiment with it to see what looks the best.  I’m going to play around with these a bit, just until it looks the way I want it to…  And here’s the end result:

So that’s how to handle tricky selections like hair.  If you want to learn more about this technique and other fun and innovative ways to use Photoshop, try one of Natcoll’s short design courses at out Auckland, Wellington or Christchurch campuses.

In this tutorial we’re going to look at the ‘Mixer Brush’, a new function in Photoshop CS5 and a very cool one at that.  What we use it for is to make Photoshop images look like paintings.  This is a very artistic technique, one that I teach in my graphic design courses for the benefit of artists rather than image manipulators.

Download the image for this tutorial.

So the first thing we’ll do, once we have our image opened, is to select the ‘Mixer Brush’.

What the ‘Mixer Brush’ does is sees what’s in the image and mixes the tones for you, making it flow together.

There are a few toolbar options to be aware of when using the ‘Mixer Brush’:

This green box is the swatch that the brush is using.  This is where you can clean the brush or load a new brush.  You can also use this toolbar to control the wetness of the brush, how much colour is on it, how much it mixes and how much it flows.  Play around with it to find the sort of effect you’re looking for.

You should also turn on ‘Sample All Layers’ for better control over the image and the changes you’re making.

I’m going to do my brushing in a new layer, so first I’m going to go to the bottom right corner and make a new layer by clicking the ’New Layer’ icon in the far right corner.

[img 3]

Now I’m going to get started by cleaning the brush and loading it up with a new colour.  I’m going to load the brush by holding the cursor over the object I want to paint (in this case, the tree trunk), holding the ‘Option’ key on my keyboard and clicking.  This will load a new colour into the swatch box on the toolbar.

I’m going to enlarge my brush the same way we enlarge all of our brushes in Photoshop: with the square brackets keys.

Now I can start painting by clicking and dragging.  You can see how it picks up and drags the bottom layers across the top, leaving you with a rendition of what was underneath the top, textural layer of the image.

There’s the first tree trunk.  I’m going to make a new layer for the bird.  Then I’m going to sample the bird just as I did with the tree.  I’m going to use a smaller brush for this one, since the bird is smaller and has a more complicated silhouette.

If we want to play with it some more, we can go into the toolbar and select different loads.  The options will probably be very intuitive for anyone who knows how to paint and can imagine what sort of effect a wetter brush might have.  For the rest of us though, it’s good to just have a play around.

To do the background, I’m going to make a new layer again, clean my brush and load a new swatch.  The background is big, so I’m going to use a large brush to sweep across the tree trunk.

I’m going to do the same to the green leaves in the background, until we have a final product that looks a lot like a real painting:

It’s enough to make anyone feel like an artist.  If you liked that and are interested in learning more about Photoshop and other digital arts programmes, check out some of the neat design courses offered at Natcoll!

To pick up more skills in Photoshop and other design software check out our range of great resource books offered through Natcoll Publishing. And keep checking back with the Natcoll blog for more Photoshop tutorials!

The tool I want to show you today is called ‘Puppet Warp’ and it’s new to Photoshop CS5.  This is a really cool feature, and great to play around with when you’re learning digital design: it’s simple to learn but can be used for more complicated effects once you get the hang of it.

For this tutorial, I’m going to use an image that was originally made on Illustrator, so it already has two layers:

We’ve got the Match Girl and birds as one layer and then we have the Snow and sky as another.

I want to use ‘Puppet Warp’ to move part of the Match Girl image around, so I’m going to select the Match Girl layer as the one I’m working on.  OK, let’s get into it…  ‘Puppet Warp’ is found under the ‘Edit’ menu.

Once you select that, your image will be overlaid with a number of lines and angles, making it look like this:

That’s the mesh that’s been loaded into the layer, and there’s a lot that you need to know about it.  Check out the toolbar at the top:

First, the ‘Expansion’.  The ‘Expansion’ means how much this mesh affects the imagery it’s on.  You can expand it to give it more, and this brings the mesh out past the lines of the Match Girl.  We can also adjust the ‘Density’ to add more mesh, but for this tutorial we’re just going to leave it on normal.  You can also turn the visible mesh off with the ‘Show Mesh’ button, if you find it distracting.

What we’re going to do now is start putting pins into our puppet.  Click to place pins on the joints of the Match Girl.

Click on a pin a second time and you can drag it to move the character like a puppet.  You can also pin the birds (one pin only) to move them around the sky.

I moved one of the birds above the head of the girl, and now I want her to look upwards at the bird.  To do this, I need to rotate the pin in her head.  This can be done by holding down the ‘Option’ key on your keyboard while clicking on the pin.  A circle will appear around the pin and I can use that to rotate the head.

It’s also possible to select multiple pins.  You can do this by clicking one pin, then holding down ‘Shift’ on your keyboard and clicking the others you wish to select.  I’m going to select the pins in her right arm.  This way I can move her whole arm towards the birds.

Once you’ve got the image looking the way you want it to, click the green check mark in the upper toolbar.

That will save your image and get you out of the ‘Puppet Warp’ function.  Now you can see how the new image looks:

That was just a basic introduction, but as you can imagine ‘Puppet Warp’ has a number of possibilities.  This is a great tool to play with when you are learning digital design, because the possibilities of it are endless.  Think about using it on text or photographic images!   Just play around and see where you can go with it.

To pick up more skills in Photoshop and other design software check out our range of great resource books offered through Natcoll Publishing or see our range of short design courses or design diplomas. And keep checking back with the Natcoll blog for more Photoshop tutorials!