This is one of my important skill needed for my tutorial website. GIF animation will clearly explain steps in tutorials. I'm sure that will be useful to all. Enjoy and have fun.



How to Create Animated Gifs Using Photoshop Cs3
As webpages develop into more sophisticated works of art, it becomes necessary for designers to use different techniques to attract a viewer. One technique that is utilized is the animated .gif graphic. The animated .gif allows a designer to inject movement into webpage graphics to draw the attention of the viewer. There are many software programs available that allow the creation of these graphics. One such program is Adobe Photoshop Creative Suite 3 (CS3), which will be used for our tutorial. It is important to note that this tutorial requires basic knowledge of Photoshop CS3, along with experience using layers. For beginners, please refer to the Related wikiHows and Sources at the end before to become familiar with Photoshop CS3. The following tutorial, created by the Fighting Engineers, describes how to create an animated .gif graphic using Adobe Photoshop CS3.

1. Create a document with each frame of the animation on a different layer.

2. Select the layers to be used in the animation from the layers palette
Note1: To select a group of layers, select the layer at the top of the group. Then hold the shift key and click on the bottom layer and this will highlight every layer in # Open the animation palette by choosing window from the menu bar and selecting “Animation“.


3. When the animation palette opens, it should look like this. If it doesn’t that means it opened in the timeline view.

4. Change to frame animation view by clicking on the flyout menu in the upper right hand corner of the animation palette and selecting “Convert to Frame Animation”.

5. Change every layer showing on one frame to every layer showing on its own frame, by clicking the flyout menu on the animation palette and choosing “Make frames from layers”
Note: All layer don’t have to be selected, to select a few layers use the copy layer button at the bottom right of the animation palette to add layers.

6. Modify each frame by selecting the frame on the animation window and changing it as desired in the main photoshop window.
Note: To add or remove a graphic from another layer to any frame r, select the frame and in the layers palette, click the “eye” to toggle on or off the visibility for that layer.

7. Under each frame is an arrow head pointing downward. Click on the arrow head to display timing menu and select the display time for each frame.
From the file menu select export to export the document as a movie or under the save as option save the file as a gif. Be sure to select Save for Web and Devices.

Reference:
Eng3050fe, Jack H, Maluniu, Viral, Richard O, Anonymous, Elyne (n.d.), "How to Create Animated Gifs Using Photoshop Cs3", WikiHow website, accessed on 28th Aug 2008
http://www.wikihow.com/Create-Animated-Gifs-Using-Photoshop-Cs3

I gonna post some helpful and funnt tips on film making. These are will focus on sound, lighting, video capture and so on. It's useful for all.


Lighting Basics: http://www.howcast.com/videos/3189-AFI-ScreenNation-Lighting-Basics

Transition: http://www.howcast.com/videos/5385-AFI-ScreenNation-Editing-Transitions

Interview basics: http://www.howcast.com/videos/3191-AFI-ScreenNation-Interview-Basics

Sound tips: http://www.howcast.com/videos/3188-AFI-ScreenNation-Sound-Tips

How to shoot video transition: http://www.howcast.com/videos/1244-How-To-Shoot-Video-Transitions

How to achieve good video composition: http://www.howcast.com/videos/1369-How-To-Achieve-Good-Video-Composition

How to use a available light shooting videos: http://www.howcast.com/videos/1415-How-To-Use-Available-Light-Shooting-Videos




The final theme used for flash project. i tend ti make a website with cowboy style.















These are images i gonna use for my portfolio website created by flash. Some of the are downloaded legaly from the internet and the others are created my own.



My third one ( i like the most). This is also a wallpaper in my laptop. The high contrast and lack of colors ( 3: white, black and grey) is the reason why I wanna use this one as my flash template.
Nature is also the topic i tend to use in creating my flash.

All buttons used to link parts of my web will be put on the leaves ( 1 for each leaf): Home, My portfolio, Gallery, Contact and Credits.

I love the simple so I think this one is great. What do u think?


My second one i created from my own idea not referenced from any sources. The reason for this one is that i wanna give users the feeling like he/she is the owner of this website. They will find out that they are not guests, just visited a website, but the owner gonna edit this website.

I use the wallpaper in my laptop, make new folder icons, rename them and add recycle bin on the right bottom corner to make it a button of my website with the name "Back to the previous page".

I tend to use my laptop interface for this purpose. Some benefits: I can create myself even if no internet network connected; it's quite simple; everyone will find them as the owner when he/she visits this website.

The worst thing here is that the quality of picture is not good. As u see above, the picture is quite small and will get blur when zoomed in, especially for those icons.

So welcome everyone to give me solutions or any comments for this theme. Thanks.


My first one. I choose this one cos' it make me quite impressive with the colorful background behind. The note page also looks natural as normal one. I tend to arrange all buttons which will link to parts of my website on the left and all the right of the page will be the place i put my info or contents.

This idea comes from my poster. "A diary opened and give u guys my info and my works" <<< the original. However, i wanna make sth new not only the old style so try to make it more colorful, more impressive and simple.

In fact, this one is not the one i like the most ^_^. What do u think about this one? Leave me your comments.

I spend a few hours to look up and check many websites and finally found a great web. There are lot of tutorials and plugins and effects download which are very useful for designers. You can find ideas from these for your own works.
Link: http://www.cgtutorials.com/



Thanks to all comments, I did fix some from my first poster. Here's the final one.
I did use some effects in this poster.
1. I used render/sketch/ pen effect (PS) for my 2 tiger pictures to make it old and quite impressive.
2. Render/Posterize (PS) for whole poster
3. Lighting Effect
However, this poster is quite dark and if u wanna try to make a poster like this one you can fix the darkness . It will be better.
Finally, these are pictures i did use.



‘Yawning tiger’, 11th Aug 2006, stock.xchng, viewed on 27 July 2008 http://www.sxc.hu/photo/589945



‘White tiger’, 9th Oct 2007, stock.xchng, viewed on 27 July 2008 http://www.sxc.hu/photo/886056




“Old notebook”, 26th Aug 2007, stock.xchng, viewed on 27th July 2008, http://www.sxc.hu/photo/858303




‘Wallpaper for MAC OS X Tiger’, 19th May 2005, Techspot, viewed on 27 July 2008 http://www.techspot.com/gallery/showphoto.php/photo/535/ppuser/1

It's not the good one I need to fix some. Give me ur comments. Thanks.

Then, there are pictures i did use






Sorry all. My image quality is not good but i dont know how to fix it.



The original picture

This is the tracing file






These are two video clips show how to draw Monalisa picture. They are 2 different styles. Watch it and try. Have fun.






This web page will present to you many information and also works of many artists. I find it awesome.
Link: http://www.designmuseum.org/



To fit colors to the photos, I divided it into many parts and added each to a separated layer. That will help a lot becos u can make comparison and correct them easily. The background. hair, face, eyes, lips, the vest, the shirt and also the tie, each is put on a layer so u will have 8 layers to modify.

Sketchblog is this one. You can easily see it in Dashboard. I'm very impressive in his template, quite strange and surprising. In this blog, there are many pictures and their process also given to any readers who want to try and interested. The following picture is my favorite one





Link to this blog and you can find some instruction, the way that the author created this picture and others:
http://www.rob-sheridan.com/sketchblog/

Some about the author: He's Rob Sheridan and presently an art director
More information from Rob Sheridan and also his works: http://www.rob-sheridan.com/