4/30/08
In Class Thur May 1st
Collect your Images
Start creating your web site.
* pick a size smaller then 960x640, keep this size for every page of your site
* 72 dpi
* make your layout in Photoshop then open it in Imageready to optimize, slice and make roll-overs
* pay attention to the important things to remember on tuesdays blog
4/28/08
In Class Tue Apr 29th
Imageready
1) Optimize
- Get your images ready for the web
* JPEG = good quailty and small file size best for photographs
* GIF = need for animations & transparency, limited to 256 colors (bigger file sizes especially with animations)
2) Slices
- use the slice tool to select areas to become roll overs
- the slices will turn into a 'table' with background images when saved as HTML
- if you would like to change the optimization of a slice, choose the slice you want to change and click the optimize tab, then select the new file type for that slice
3) Animations
- an animation should be contained in one slice
- animations need to be Optimized as a GIF
- you animate by changing layers size, transparency and position
- change the rate of speed for your animation
4) Roll overs
- slices define roll over areas
- you must cut out the slice to access it as a roll over
- a roll over is made of at least 2 layers, the normal layer and the over layer (you only show one layer at a time)
* select a slice
** click on new roll over state
*** turn off the visibility of the layer for the normal state, turn on the visibility of the layer for the over state
**** click back on the normal state and continue.
- there are other states besides 'over', keep clicking on the 'new roll over state' button to se the different states
- you can make links from roll overs
4) Image maps
- used to invisibly define an area on an image
- can be used as an invisible button (you can make a link from it)
- can create circles and odd shapes (unlike slices)
5) Set your file up for the web
- the name of the PSD is the name of the slices, so kep your names short, ie... index, pg1, bio
- when you 'save optimized as' when your finished with your project Imageready will create an HTML file and a folder full of images. you need to remember to change the name of your image folder for each page you create
Things to keep in mind for the web
* always try to keep your file sizes smaller then 600 K, you can check this when optimizing
* the first page of your website MUST be named 'index.html' (your home page)
* the web can only understand numbers, letters and the '-' & '_'
* you can not have spaces in the names of your HTML files or image folders
* caps matter! the web sees the letter 'A' as being different then the letter 'a', therefor save all your file names as lower case. joe.html instead of mixed Joe.html
* remember your imageready PSD is your working file. it is the file you need if you want to make changes.
1) Optimize
- Get your images ready for the web
* JPEG = good quailty and small file size best for photographs
* GIF = need for animations & transparency, limited to 256 colors (bigger file sizes especially with animations)
2) Slices
- use the slice tool to select areas to become roll overs
- the slices will turn into a 'table' with background images when saved as HTML
- if you would like to change the optimization of a slice, choose the slice you want to change and click the optimize tab, then select the new file type for that slice
3) Animations
- an animation should be contained in one slice
- animations need to be Optimized as a GIF
- you animate by changing layers size, transparency and position
- change the rate of speed for your animation
4) Roll overs
- slices define roll over areas
- you must cut out the slice to access it as a roll over
- a roll over is made of at least 2 layers, the normal layer and the over layer (you only show one layer at a time)
* select a slice
** click on new roll over state
*** turn off the visibility of the layer for the normal state, turn on the visibility of the layer for the over state
**** click back on the normal state and continue.
- there are other states besides 'over', keep clicking on the 'new roll over state' button to se the different states
- you can make links from roll overs
4) Image maps
- used to invisibly define an area on an image
- can be used as an invisible button (you can make a link from it)
- can create circles and odd shapes (unlike slices)
5) Set your file up for the web
- the name of the PSD is the name of the slices, so kep your names short, ie... index, pg1, bio
- when you 'save optimized as' when your finished with your project Imageready will create an HTML file and a folder full of images. you need to remember to change the name of your image folder for each page you create
Things to keep in mind for the web
* always try to keep your file sizes smaller then 600 K, you can check this when optimizing
* the first page of your website MUST be named 'index.html' (your home page)
* the web can only understand numbers, letters and the '-' & '_'
* you can not have spaces in the names of your HTML files or image folders
* caps matter! the web sees the letter 'A' as being different then the letter 'a', therefor save all your file names as lower case. joe.html instead of mixed Joe.html
* remember your imageready PSD is your working file. it is the file you need if you want to make changes.
4/23/08
In Class Thur Apr 24th
How the web works!
- a massive network of interconnected computers
- your conection is through an ISP. (the school acts as your ISP)
- web space = hard drive realestate
- cost for web space and where to get it
--- godaddy
--- 10 best free web host
- want your own .com, but want to connect it to free web space, check out namesecure
HTML ref
Size Guide lines for websites:
- the average screen resolution is 1024x768 of this about 940x620 is useable if you want your website to fill the screen.
- web site resolution is always 72 dpi.
- a massive network of interconnected computers
- your conection is through an ISP. (the school acts as your ISP)
- web space = hard drive realestate
- cost for web space and where to get it
--- godaddy
--- 10 best free web host
- want your own .com, but want to connect it to free web space, check out namesecure
HTML ref
Size Guide lines for websites:
- the average screen resolution is 1024x768 of this about 940x620 is useable if you want your website to fill the screen.
- web site resolution is always 72 dpi.
4/20/08
In Class Tue Apr 22nd
The Art213 & Art216 class Photoshopmotion Animation is up.
Lets Talk about the Web!
- what does it do?
- how does it work?
- what do you use it for?
Lookin' at Image Ready
- what can it do?
--- Optimize
--- Animations
--- Slices
--- Roll overs
--- Image maps
- whats where?
--- tools, options & other windows
- Optimize
--- always do it first!
--- pick a file type
File types
gif - animations, transparency & 256 colors or less
jpg - photo quality, small file size
png - use for getting images into flash, transparency & photo quality
Save as a PSD, this is the working file
Lets Talk about the Web!
- what does it do?
- how does it work?
- what do you use it for?
Lookin' at Image Ready
- what can it do?
--- Optimize
--- Animations
--- Slices
--- Roll overs
--- Image maps
- whats where?
--- tools, options & other windows
- Optimize
--- always do it first!
--- pick a file type
File types
gif - animations, transparency & 256 colors or less
jpg - photo quality, small file size
png - use for getting images into flash, transparency & photo quality
Save as a PSD, this is the working file
4/16/08
In Class Tue Apr 17th
Your Folder(s) full of images are due today at the beginning of class!
Lets take a look at Framed.
- opening Framed
- give it a name
- set the size
- set the frame rate
- test your movie
- save your movie
Next is iMovie
- opening iMovie
- importing your video
-- clip view / timeline view
-- moving the marquee
-- 'split video clip at playhead' = editing your video
- importing audio
-- editing audio
- effects and transitions
- titles
- export "share"
* Remember you need to export a video for DVD (a DV-Stream) and for Youtube 320x240 at 30fps
Lets take a look at Framed.
- opening Framed
- give it a name
- set the size
- set the frame rate
- test your movie
- save your movie
Next is iMovie
- opening iMovie
- importing your video
-- clip view / timeline view
-- moving the marquee
-- 'split video clip at playhead' = editing your video
- importing audio
-- editing audio
- effects and transitions
- titles
- export "share"
* Remember you need to export a video for DVD (a DV-Stream) and for Youtube 320x240 at 30fps
4/14/08
In Class Tue Apr 15th
Photostopmotion Animation
You need to have all your images ready in a folder on thursday at the start of class. Today is your last day to get your images together and ready.
Ask questions, I will be checking your progress.
You need to have all your images ready in a folder on thursday at the start of class. Today is your last day to get your images together and ready.
Ask questions, I will be checking your progress.
4/7/08
4/2/08
In Class Thur Apr 3rd
Today I will be asking each of you about your animation and taking a look at your images.
MAke sure you read the project 4 instructions for specific details
MAke sure you read the project 4 instructions for specific details
Subscribe to:
Posts (Atom)