Right - Matt here with something [allegedly] fun to start you off in Flash....
Step 1: Create the images for your gallery slideshow in Photoshop
Create four images in Photoshop – make sure the image size is 640 x 480 pixels. Remember – extra marks for images of dogs in hats.
Use the Save for web function in the File menu and make sure the names of the images are in a sequence. For example, for three files, the names could be pic1.jpg, pic2.jpg, and pic3.jpg. If you don’t do this, you’ll have to import the images one by one, which is a pain if you have twenty.
Step 2: Import the images into the Flash Photo Slideshow template
* Open Flash and click on File/New. Select the Templates tab and then select Photo Slideshows. Click OK. You will see a ready-made Flash photo slideshow. To view, go to the Control menu and select Test Movie. Remember the shortcut!
* We don’t want these images so select the bottom layer in the timeline [this should be familiar from After Effects]. The layer we don’t want is called picture layer - click on the trash can icon below the timeline to delete it.
* Create a new layer by clicking the Insert Layer button [a few buttons to the left of the trashcan], and name this new layer My Pics. Important! Make sure that this new layer is the bottom layer.
* Select the first blank frame [it’s actually a keyframe but we’ll worry about that later] in the My Photos layer, select File > Import > Import to Stage, and locate your photo sequence. Select the first image in the series, click Add, and click Import. Flash recognizes your image is part of a sequence and asks if you want to import all files in the series. Click Yes to complete the import process. Flash places each image on separate keyframes. You could move the images at this point but Flash will place them accurately for you.
Once the images are in, test the movie again. Note that your captions will need changing.
At this point, it will probably be necessary to wake Parmajit up.
Now, change the captions for the images by replacing the text in each frame of the Captions layer. You do not have to worry about the photo number field as the template automatically determines how many images are in your document and indicates which photo you are currently using.
Change the title in the Title, Date layer.
If you have more than four images, make sure that all the other layers have a matching number of frames. You can do this by dragging the last frame of each layer to the same place as the last image or you can select the frame and click on F5 to add a new blank frame. Important – when you have more than four images, you will need to add keyframes to the captions layer rather than blank frames, otherwise you will lose the text field where you can insert your own caption.
Test the movie. If you’re happy with it, go to the File menu and select Save As. Save it somewhere safe. Then, go back to File > Export > Export Movie. Give it a name and save it as a Flash Movie [an .swf] Note the other formats available in the drop down menu – only the Flash Movie is interactive.
Saturday, 14 March 2009
Monday, 23 February 2009
After effects!
Welcome back one and all.
Today's session will provide you with a very basic introduction to After effects.
After effects is a state-of-the-art piece of animation software.
Most cartoons, title sequences and adverts are put together in After effects.
This will hopefully give you a basic introduction to some techniques which can later be transfered to "Flash", which is similar, yet interactive and therefore great for web design.
Task for the day
Today, you will be producing a title sequence for your class.
This will be made of moving text and images, and hopefully set to music (time permitting).
How it's done
Open up After effects from applications.
*Select new composition
*Ensure that pixels are set to square
*Select import> files, and choose any pictures that you might need off your computer
-(Remember to keep all images in the same folder, otherwise chaos breaks loose!)
*The box in the top left is where the cast of your production live.
*Drag an image down to the long box at the bottom of the screen, this is your "time-line".
A Jpeg will be a solid block. This is OK for a background.
For a "floatng" image, make sure you use a PSD with the background layer cut out so that it has checkerboard surrounding it.
*The time-line is, like the rest of the Adobe software (Photoshop, Illustrator...) based around layers and the same rules apply, the layer at the top is closest to you.
THE ALL IMPORTANT ARROW!
*Under the name of the cast member you have imported in the time line, there is a tiny drop down menu.
-This reveals a series of options: anchor point, position, scale, opacity.
*click all these on.
*Move the timeline on a few seconds, then alter the settings, or drag your image across the screen, expand it, shrink it, fade it out.
*Move the time line back to the start, and press "spacebar". You image should move- it won't be at full speed until you export it.
*Add text to the composition. This can be changed in exactly the same way.
*Repeat, experiment, learn!
Try using multiple layers. If you are feeling brave, have a play with the effects / filters menu.
*When you are happy with your animation, export it as a "quicktime" file.
*Don't forget to save your composition!
Today's session will provide you with a very basic introduction to After effects.
After effects is a state-of-the-art piece of animation software.
Most cartoons, title sequences and adverts are put together in After effects.
This will hopefully give you a basic introduction to some techniques which can later be transfered to "Flash", which is similar, yet interactive and therefore great for web design.
Task for the day
Today, you will be producing a title sequence for your class.
This will be made of moving text and images, and hopefully set to music (time permitting).
How it's done
Open up After effects from applications.
*Select new composition
*Ensure that pixels are set to square
*Select import> files, and choose any pictures that you might need off your computer
-(Remember to keep all images in the same folder, otherwise chaos breaks loose!)
*The box in the top left is where the cast of your production live.
*Drag an image down to the long box at the bottom of the screen, this is your "time-line".
A Jpeg will be a solid block. This is OK for a background.
For a "floatng" image, make sure you use a PSD with the background layer cut out so that it has checkerboard surrounding it.
*The time-line is, like the rest of the Adobe software (Photoshop, Illustrator...) based around layers and the same rules apply, the layer at the top is closest to you.
THE ALL IMPORTANT ARROW!
*Under the name of the cast member you have imported in the time line, there is a tiny drop down menu.
-This reveals a series of options: anchor point, position, scale, opacity.
*click all these on.
*Move the timeline on a few seconds, then alter the settings, or drag your image across the screen, expand it, shrink it, fade it out.
*Move the time line back to the start, and press "spacebar". You image should move- it won't be at full speed until you export it.
*Add text to the composition. This can be changed in exactly the same way.
*Repeat, experiment, learn!
Try using multiple layers. If you are feeling brave, have a play with the effects / filters menu.
*When you are happy with your animation, export it as a "quicktime" file.
*Don't forget to save your composition!
Monday, 19 January 2009
The Illustrator!
Today, you are going to get a very basic introduction to Illustrator.
Illustrator is the industry standard software for clean graphic design.
Where as Photoshop allows you to create images out of 'pixels', Illustrator allows you to create images out of mathematically recorded directions.
The proportions of these never change, no matter how big or small the image is printed-
The image will remain clean and un-pixelated or stretched whether it appears on a stamp or the side of a building.
Last lesson we looked at branding.
One of the simplest and best advertising campaigns / brands of the last few years has been the Apple Ipod commercials.
These are very simple black silhouettes of dancing people on coloured backgrounds with the Ipod and headphones highlighted in white.
It's fairly obvious where this is going....
You will need a clear photograph of yourself.
Drag it into a new Illustrator document.
Illustrator uses layers, just like Photoshop.
Create a new layer and select the pen (p)
pick a bright colour line and NO FILL
draw around your outline. Point to point (like the lasso tool)
To bend a line, click the next point and hold down the mouse, you will the be able to bend to line to follow the exact shape of your body.
This is very clumsy and awkward!
It soon becomes very easy and you'll wonder how you ever drew without it!
after each curved line, press enter / return- this stops the line continuing is the same bend.
When you have completed your shape, go to the colour selection (under the tools) and select the same colour (black) for both line and fill.
Create a new layer using the shape tool of whatever colour you want.
Put this layer behind the one of your outline.
Illustrator is essentially Photoshop with shapes.
Now in a new layer, draw your Ipod in white
Add some text. “i” .....
Done!
Simple idea, worth millions!
Next, try using the same techniques to create clean vector versions of your logos-
you might need scanners to get the originals onto the computer.
Repeat the process!
Illustrator is the industry standard software for clean graphic design.
Where as Photoshop allows you to create images out of 'pixels', Illustrator allows you to create images out of mathematically recorded directions.
The proportions of these never change, no matter how big or small the image is printed-
The image will remain clean and un-pixelated or stretched whether it appears on a stamp or the side of a building.
Last lesson we looked at branding.
One of the simplest and best advertising campaigns / brands of the last few years has been the Apple Ipod commercials.
These are very simple black silhouettes of dancing people on coloured backgrounds with the Ipod and headphones highlighted in white.
It's fairly obvious where this is going....
You will need a clear photograph of yourself.
Drag it into a new Illustrator document.
Illustrator uses layers, just like Photoshop.
Create a new layer and select the pen (p)
pick a bright colour line and NO FILL
draw around your outline. Point to point (like the lasso tool)
To bend a line, click the next point and hold down the mouse, you will the be able to bend to line to follow the exact shape of your body.
This is very clumsy and awkward!
It soon becomes very easy and you'll wonder how you ever drew without it!
after each curved line, press enter / return- this stops the line continuing is the same bend.
When you have completed your shape, go to the colour selection (under the tools) and select the same colour (black) for both line and fill.
Create a new layer using the shape tool of whatever colour you want.
Put this layer behind the one of your outline.
Illustrator is essentially Photoshop with shapes.
Now in a new layer, draw your Ipod in white
Add some text. “i” .....
Done!
Simple idea, worth millions!
Next, try using the same techniques to create clean vector versions of your logos-
you might need scanners to get the originals onto the computer.
Repeat the process!
Sunday, 14 December 2008
LOGO a GO-GO
Afternoon all, today is the day you have been looking forward to.
By the end of today's session you will have FINALLY selected a name for you "media website" and not only that-
Today is is the day where you will be designing the all important logo.
First of all, a logo quiz:
How many of the following brands can you name just from their logo?
Answers in production logbooks please...
--------------------------------------------------
These logos were taken from here:
www.goodlogo.com/
there is also another quiz here:
www.logoquiz.net/
---------------------------------------------------
YOUR TO DO LIST FOR TODAY:
* select your five favourite brands:
print examples and add to your production log.
what do you like about the brand.
* What do you want your brand to say?
What kind of logo, name and branding is suitable for a media magazine?
research this by looking at examples of existing magazines on the internet:
here are a couple of good starting points:
http://www.fusedmagazine.com/
http://www.blowback.co.uk/html/index.htm
Print examples and add to production log.
* Create your logos! Use whatever method you feel comfortable with-
Photoshop, collage, ink, pencil.
Good luck!
By the end of today's session you will have FINALLY selected a name for you "media website" and not only that-
Today is is the day where you will be designing the all important logo.
First of all, a logo quiz:
How many of the following brands can you name just from their logo?
Answers in production logbooks please...
--------------------------------------------------
These logos were taken from here:
www.goodlogo.com/
there is also another quiz here:
www.logoquiz.net/
---------------------------------------------------
YOUR TO DO LIST FOR TODAY:
* select your five favourite brands:
print examples and add to your production log.
what do you like about the brand.
* What do you want your brand to say?
What kind of logo, name and branding is suitable for a media magazine?
research this by looking at examples of existing magazines on the internet:
here are a couple of good starting points:
http://www.fusedmagazine.com/
http://www.blowback.co.uk/html/index.htm
Print examples and add to production log.
* Create your logos! Use whatever method you feel comfortable with-
Photoshop, collage, ink, pencil.
Good luck!
Monday, 17 November 2008
Slice! Slice! Slice!
Morning all.
Firstly, well done to all of you who presented your proposals the week before last.
Fantastic stuff!
Right, now down to business:
Use the first part of the lesson to re-evaluate the look of your web pages.
Think about your basic "template".
By now you should have the menu / navigation page of your individual section nearly ready. This page must lead back to your group page and on to your content pages.
I would like you get together as a group and combine your powers to make your group page in photoshop.
Try and keep a "Brand" running through all of your pages.
Save this and make sure you each have a copy to work with.
After this, I would like you to create a single mock-up page of your content.
For example, if you are a photographer, make a page demonstrating what your gallery / portfolio might look like. Don't worry about the correct text jsut yet- just copy and paste something in to give the idea of where text would go and how it affects the look of the page.
Make sure you have three pages with areas where buttons can go to link all the pages together.
.
.
.
Right then.
Next you are going to create a working website using Photoshop and dreamweaver.
Select your main group page.
Select the "slice tool" (K)
(-the one we've all used by accident at some point- now we find out what it's really for)
Chop up your page into slices
make sure that there is a slice around each button / picture / link.
Go to "Save for web and devices"
Press APPLE & A (this selects everything)
save as "images and HTML".
You have created a working web page! Easy as that.
Repeat this for the other 2 pages (your "menu" and "content")
Open Dreamweaver
Select Open file and open the "group" page you just made in Photoshop...
Click on one of the sections you want to link to your "menu" page
click on the folder next to the link box.
Select the page you want to link to
Save.
Preview in browser.
WOW! Linking webpage!
Repeat this until all pages link to each other.
This will help you assess how easy your web pages are to navigate.
Firstly, well done to all of you who presented your proposals the week before last.
Fantastic stuff!
Right, now down to business:
Use the first part of the lesson to re-evaluate the look of your web pages.
Think about your basic "template".
By now you should have the menu / navigation page of your individual section nearly ready. This page must lead back to your group page and on to your content pages.
I would like you get together as a group and combine your powers to make your group page in photoshop.
Try and keep a "Brand" running through all of your pages.
Save this and make sure you each have a copy to work with.
After this, I would like you to create a single mock-up page of your content.
For example, if you are a photographer, make a page demonstrating what your gallery / portfolio might look like. Don't worry about the correct text jsut yet- just copy and paste something in to give the idea of where text would go and how it affects the look of the page.
Make sure you have three pages with areas where buttons can go to link all the pages together.
.
.
.
Right then.
Next you are going to create a working website using Photoshop and dreamweaver.
Select your main group page.
Select the "slice tool" (K)
(-the one we've all used by accident at some point- now we find out what it's really for)
Chop up your page into slices
make sure that there is a slice around each button / picture / link.
Go to "Save for web and devices"
Press APPLE & A (this selects everything)
save as "images and HTML".
You have created a working web page! Easy as that.
Repeat this for the other 2 pages (your "menu" and "content")
Open Dreamweaver
Select Open file and open the "group" page you just made in Photoshop...
Click on one of the sections you want to link to your "menu" page
click on the folder next to the link box.
Select the page you want to link to
Save.
Preview in browser.
WOW! Linking webpage!
Repeat this until all pages link to each other.
This will help you assess how easy your web pages are to navigate.
Monday, 20 October 2008
There's no escape
Hope you didn't miss me too much yesterday. In order to support the work we've been doing on branding, click here for some truly detailed info on how media companies brand themselves.
In order to brand your site properly, you'll need to build your own style/brand. Type 'brand guide' into google and you'll see the number of media companies that have put that detail online. Have a look at a couple.
One of the key things that a brand has - that you don't - is a name. Follow this link for the google keyword tool. V useful.
And remember, your proposal assignmentis due on the first Monday after half term - 3rd Nov. 400 words on what your site is about, who the audience is, how you're going to style/brand it, what's going to be on your part of the site... + sketches and a photoshop composite graphically demonstrating what your part of the site will look like. Happy holidays.
In order to brand your site properly, you'll need to build your own style/brand. Type 'brand guide' into google and you'll see the number of media companies that have put that detail online. Have a look at a couple.
One of the key things that a brand has - that you don't - is a name. Follow this link for the google keyword tool. V useful.
And remember, your proposal assignmentis due on the first Monday after half term - 3rd Nov. 400 words on what your site is about, who the audience is, how you're going to style/brand it, what's going to be on your part of the site... + sketches and a photoshop composite graphically demonstrating what your part of the site will look like. Happy holidays.
Sunday, 19 October 2008
Lions and midgets
http://www.fmft.net/archives/BBC_NEWS.htm
A truly barbaric, heartbreaking news story.
A truly barbaric, heartbreaking news story.
Subscribe to:
Posts (Atom)
