Turorials (Post turorials here)

[-)RaZeR(-]

This is a blending method tut.
( Not made by me )
1. First of all gather two images you want to use. Then paste both images into two seperate layers in Photoshop. I used 450x150 as the dimension.

2. Once you have done step one, position each image so the parts you want to keep aren't overlapping.

Now comes the magic.

3. Select the rectangle marquee tool and using the top layer, select what you want to KEEP, not what you want to get rid of.

4. Now go to Selection> Feather. A window will appear, this will determine how much the images blend together.The higher the number, the more it will blend. I chose 30 for mine.

5. Now make sure the part you selected before is still selected. Hit CTRL + C. Now hit CTRL + V. This will paste the feathered image into a new layer.

6. Finally, delete the layer below the newly created layer. The end result should be blended. If not, I will try and post some pictures to give a bit more detail.


Enjoy!

[-)RaZeR(-]

This is a great grunge sig tutorial made by my good friend Fantazy.

Step 1

Firstly, let's open a new document. I like 350x150 pixels, but it's a matter of personal preference. Next, we'll set our foreground and background colours to white and black. Once we're done that, let's go filter --> render --> clouds. That's all for step 1, you should now have this:
http://img271.echo.cx/img271/1244/soccertut6si.png

Step 2

Now, let's take out our 'Rust N Grunge' brushset. Make a new layer and start brushing in black on that layer. When you've brushed enough on that layer, change the layer mode to softlight. After this one layer of brushing, you should have something like this:
http://img271.echo.cx/img271/8239/soccertut4wh.png

Step 3

Continue making layers and brushing them with the 'Rust N Grunge'. Every layer should be alternating black brushing then white brushing. At the end of every layer, change the layer mode to softlight. I like to have my last layer always finish on black brushing, and then I don't put the last one on soft light, I keep it at normal. After seven layers of brushing, I have this:
http://img278.echo.cx/img278/7330/soccertut0nw.png

Step 4

Now, I added my render:
http://img278.echo.cx/img278/2968/soccertut8cp.png

Next, I blended my render in a bit by brushing over it and the rest of the sig, in a new layer, with the 'dispirited abstract 2' brushset in white. I now have this:
http://img278.echo.cx/img278/3205/soccertut1tr.png
And then, because I thought this was blended too much, I duplicated the render layer and put it over the abstract brushing layer. Then I reduced the opacity of the duplicated render to 45%. Now I have this:
http://img278.echo.cx/img278/9113/soccertut4py.png

Part 2

Step 5

Now, because I felt the sig was too white, I made a new layer and brushed in black with the 'Rust N Grunge' brushset. Now, I have this:
http://img141.echo.cx/img141/6493/soccertut4ri.png

Step 6

Now I added some highlights to my sig with the 'Abstract Tieskievo' brushset. Now I have this:
http://img278.echo.cx/img278/5904/soccertut5jx.png

Step 7

Now, I added my text. Because I saw a huge highlight right in the middle of my render, I decided that would be a perfect place to put a huge 'S' so I made two text layers, one huge 'S' layer and one 'occer' layer. And because I wanted my text to sort of go along my highlight, I clicked on my 'S' layer and went edit --> transform--> rotate and rotated it to the angle I liked. After I added the text, I didn't add any effects, but simply lowered the opacity of both layers to 31%. I now have this:
http://img278.echo.cx/img278/5170/soccertut7to.png

Step 8

Next I added some color to my work. I took out my 'Rust N Grunge' brushset, made a new layer, set the blending mode to soft light, and then I started brushing in the colors I wanted; blue and purple. Now you should have something like this:
http://img32.echo.cx/img32/7897/soccertut6zb.png

Step 9

Next I added a brightness/contrast layer and then added a border and my name. This step doesn't really take explanation, quite simple.

Final Product:
http://i5.photobucket.com/albums/y18...gns/soccer.png
I hope you enjoyed this tutorial and most of all, learned from it. See you next time!

** This sig was NOT made by me. It was made by my good friend Fantazy **

[-)RaZeR(-]

In this tutorial, I'm going to show you how to make a nice, abstract-ish signature, like this one:
http://i5.photobucket.com/albums/y18...lamewithin.png

Resources used in this tutorial

Despirited Abstract 2 brushset

Night Sky brushset

Alien League font

Bitdust Two font

Part 1
Step 1

Okay, so I started by opening a new document. Then, I go filter-->render-->clouds Easy, right? Now I have this:
http://img97.echo.cx/img97/7944/flamewithintut4pz.png
Step 2

Next, take out the Despirited abstract set 2 brushset and, after making a new layer, brush on it in black. The set it to soft light. Next, reapeat this step, alternating black and white, but always setting to soft light. I wish I could show you each layer, but, I had to maerge them, so I don't have each layer

But I can show you what I have after all the layers of this brushing:
http://img97.echo.cx/img97/9093/flamewithintut7gs.png
Step 3

Now, we must merge all the layers. CTRL-Shift-E. Next, duplicate the layer. Now, go filter-->blur-->motion blur. I'm not sure which settings I exactly used, just don't go overboard. Next, we take the top layer (the blurred one) and reduce it's opacity. I have mine at 35%. Now I have this:
http://img78.echo.cx/img78/1447/flamewithintut9vj.png
Now, duplicate that layer, put it to 100%, but put it on overlay. Now you should have this:
http://img78.echo.cx/img78/2629/flamewithintut1cu.png
Step 4

Now, zoom in to 1600%. Take out the rectangular marquee tool and just select one pixel lines wherever you want. Then, fill them with black. Now reduce the opacity until it looks good. I now have this:
http://img25.echo.cx/img25/2752/flamewithintut8lq.png
Part 2

Step 5

Now we make a new layer and brush on some night sky brushes. Now it should look like this:
http://img73.echo.cx/img73/7158/flamewithintut7si.png
Step 6

Now, let's add our text. For this, I simply put a 1 pixel balck stroke then reduced the opacity. I also created a mirror effect by duplicating the text layer, then going edit-->transform-->flip vertical, then reducing the opacity of the fliped one even more. Now, with the text, I have this:
[/url]http://img73.echo.cx/img73/4277/flamewithintut2oo.pnghttp://<br /> Step 7<br /> <br /> ...ke this:<br />http://img73.echo.cx/img73/7217/flamewithintut3ip.pnghttp://<br /> Step 8<br /> <br /> ...y a bit.<br />http://img73.echo.cx/img73/4663/flamewithintut1ir.pnghttp://<br /> Step 9<br /> <br /> ... border:<br />http://i5.photobucket.com/albums/y187/frozenflamedesigns/flamewithin.pnghttp://<br /> I hope you enjoyed an...azy again. ***

[-)RaZeR(-]

Note: This tutorial, or really set of tutorials, is designed to teach the basics of animation in Adobe ImageReady. As with all graphic design the most important thing is creativity. This tutorial is meant to give readers the knowledge required to make their own unique animation in ImageReady. I will cover the basic interface for animation and ways to create several of the commonly used effects. It is up to you to apply this information in your own work, hopefully in a creative and unique way. This is not a tutorial of a single technique, but really a tutorial of a program. As such it is meant for those new to the program and focuses on basics.

ImageReady Basics
Adobe ImageReady is essentially Photoshop's sidekick animation program. The general appearance and setup is almost identical to Photoshop's. Imagready is missing a few of Photoshop's features, such as some adjustments, but it has a key feature required for animation, so for optimal use it is best to design in Photoshop and only use ImageReady for animation. In ImageReady you get a window called the 'animation window' where, suprisingly enough, all of the animation is done.
If the animation window is not visible on your screen, go to window, then click the option animation.
http://img283.echo.cx/img283/7056/imagetut5co.gif
As this is the most important part of ImageReady, as well as the only part that is truly unique from Photoshop, I have broken it down into the 9 important aspects, numbered 1-9.
1. The frame you are currently working in. This is always highlighted in blue.
2. Other frames have a grew box around them. These should not be affected by changes you make in your selected frames.
3. This bar changes the number of times your animation will be shown. If it is on one, then your animation will go once and stop. If it is on forever it will restart everytime it finished. You can chose any number of repetitions by selecting the other option.
4. This option changes the amount of time the frame will be on the screen for. If it is at 0 sec. then the frame will disappear almost instantly, making animation seem smooth. If you wish to have it pause on a frame, you may select any number of seconds from the list, or simply choose your own by selecting other.
5. This is the tween feature, which will be explained in depth later.
6. This option, which looks like a piece of paper being peeled back copies the previous frame. This can be used to create new frames, just as the similar looking button creates a new layer in the layer window.
7. Similar to layers, the trash can deletes frames.
8. This is the test animation area. Pressing play will make your animation play in ImageReady. The skip arrows move forward or backwards one frame, while the double backwards arrows return you to the first frame.
9. This is a master button that lets you make almost any change to your animation, including things that have their own button, and a few that do not.

In each frame you make the change that you want the animation to do. To make sure that the changes happen only in the frame you are working with it may be necessary to turn off Propagate Frame 1 Changes on any layers you are animating. As a habit I would do this to any layers you plan on animating before doing any animation so as to avoid realizing you made changes throughout the animation that you only wanted in one frame. To turn this off, right click on the layer and turn it off.
http://img102.exs.cx/img102/9378/image-tut3.gif
That should cover most of the basics, now it's time to get to the fun part: animating.

Frame by Frame Animation
The simplest of animation is done by creating each separate frame yourself. This can create any effect in ImageReady, but it may be a tedious process depending on what you want to make. Certain effects require frame by frame animation. These effects will be the focus of this section.

Written/Typed Text

One of the simplest of frame by frame animations is making text appear as though it is being written or typed across your screen. I

will use this effect as a basic example for making a useful frame by frame animation.

Start with any pdf (Photoshop) image with text on it. I'll use this as a simple example:
http://img290.echo.cx/img290/7569/example26nq.gif
Start by duplicating the text layer. Lower the opacity of the bottom layer to around 50%. This layer will be used as a guide for repositioning letters. Next rasterize the text layer that is at 100% opacity so that you can cut out parts of it. Select the first letter with a marquee or a lasso tool. Then edit>cut (ctrl x) the letter out of the current layer and edit>paste it (ctrl v). Pasting it will automatically put it in a new layer. The letter may now be in the center of your image, instead of where it fits in the text. Simply move it using the move tool back to where it belongs. Repeat this process for each letter of your text. You can now delete or turn off the text layer with lowered opacity. When you finish you should have a seperate layer for each letter. Now would be a good time to turn off Propagate Frame 1 changes on your new layers.

At this point your layer window will look something like this:
http://img290.echo.cx/img290/7061/example8fa.gif
Now create/copy one frame for each letter you have in your text with one extra frame. In the first frame turn off all of the text layers. Your layer window will now look similar to this:
http://img289.echo.cx/img289/4151/example32ih.gif
And your animation window will look similar to this:
http://img289.echo.cx/img289/3994/example48pq.gif
In the second frame turn on the layer that contains the first letter of your text. In the second frame turn on the first two letters, and so on until you reach your final frame where all letters should be visible. Change the final frames time to around 2 sec. All other frames should still be at the default 0 sec. If they are not, change them to 0 sec.
Your animation window should now look similar to this:
http://img287.echo.cx/img287/1908/example52me.gif
Test your animation by hitting the play button. The text should appear like this:
http://img287.echo.cx/img287/1126/example67lx.gif
With this basic setup you can create a few more advanced effects.

Select all the frames except the first and the last by selecting frame 2 and holding shift then selecting the second to last frame (in this case frame 6).
http://img269.echo.cx/img269/5476/example75yb.gif
Copy these frames by clicking the copy frame button. This will duplicate all of the selected frames. Now drag these to the end of your animation.
Then, using the animation 'master button' (number 9 in the animation bar explanation), select "Reverse Frames". This will now make the letters disappear in reverse order to the way they appeared. Test your animation by hitting play, it should look similar to this now:
http://img262.echo.cx/img262/2663/example83xl.gif
You may want to increase the pause on the first frame where there is no text to a second or two so as to add a break between the text disappearing and appearing.

You can also make the text disappear from left to right instead of right to left. To do this create as many new frames at the end of your animation as there are frames between your first and your last frame (number of letters minus one). In the first of these frames make all except the first letter visible, then in the second frame have all except the first 2 letters visible, etc. You should end with an effect like this:
http://img264.echo.cx/img264/2262/example93xk.gif
Again, you may want to increase the pause on the first frame where there is no text to a second or two so as to add a break between the text disappearing and appearing.

As with every tutorial, it is up to you to find a creative way to incorporate the techniques and information presented in a creative and unique way. You can try to apply these techniques to more than text, or find new ways to use them. The possibilities are endless

Blinking Objects

Making things blink is probably the easiest of all animations in ImageReady, however the concept has several applications, many of which can be slightly more complicated. At the most basic level, to make something blink, simply have the layer that it is on appear in one frame, and disappear in the next. Not a very tough concept. Standing alone, blinking often accomplishes little, but it can be incorporated into other things to make them more interesting.
For example, something like this line blinking does very little:
http://img266.echo.cx/img266/8946/example119ig.gif
This image was created by having a layer with a line on it turn off and on with the frames appearing for .2 sec.
However, if you add this to text appearing like in the previous section, then it can create an effect like the blinking line that appears in a word processing program:
http://img278.echo.cx/img278/1151/example107ee.gif
All I did to create this last image was take animation similar to the text appearing animation and mix it with the simple animation of a line blinking. As most of this has already been explained, I won't go into detail about it. You should be able to create a similar effect with the information you already have.

Tweens
To enhance animation you can use the tween feature. Tweens take two unique frames and automatically fill in additional frames needed to make the animation smooth. Tweens are extremely useful as they allow you to skip having to create every individual frame by hand. Instead you can simply create the first and last frame, and then let ImageReady make all of the ones in between.

When you click the tween option you get a menu that looks like this:
http://img128.exs.cx/img128/1679/image-tut4.gif
Once again I will break this down, this time by function instead of numbers.
Tween With - this option simply chooses which frames are tweened. Previous Frame means that whichever frame you have selected and the one before it are tweened. Selection means that, if you select two frames, the two you select are tweened. First Frame tweens your current selection with the first frame.
Frames to Add - this option changes the number of frames ImageReady adds in-between your selected frames. This is the most commonly adjusted option, as you want to use as few frames as possible to maintain a low file size, but you need several frames to make animation smooth.
Layers - this allows you to animate any changes you have made or only ones on a layer of your choice. Usually this will remain on All Layers.
Parameters - this is the option that decides what parts of a layer or layers is tweened. If you have all three boxes checked, then your tween will include all of your changes. There are very few situations where you would not want to tween all of the parameters.

The most common uses for tweens is fading or moving text, images or layers.

For an example of fading I will use this text:
http://img34.echo.cx/img34/3522/example143vc.gif
Note: fading is not limited to text, it can be applied to pretty much anything.
Fist make 2 frames. One with the layer containing your text/image visible, and one where it is not. Your animation window should look similar to this now:
http://img34.echo.cx/img34/2731/example159fq.gif
Now select both frames by holding shift and clicking on them. Press the tween button. Leave all the settings at their default and press okay. Your animation will now look similar to this:
http://img201.echo.cx/img201/2002/example164om.gif
As you can see, the text/image smoothly fades out. At this time you may want to change the frame time to 1 or 2 seconds for the frames where the text/image has either fully appeared or disappeared.
If you have file size limitations, you may want to only have 2 or 3 tweened frames instead of the default 5. Usually 2 or 3 is enough for a fading effect, and it will help lower file size.

That is really all there is to a simple fading tween. With this technique you can make text/images/layers both fade out, fade in, or fade between two different layers. Just try out different things.

Another way to use tweens is for making images/text/layers move. This time I will use a simple arrow as an example:
http://img219.echo.cx/img219/1392/example179cc.gif
Now create a new frame. In this frame move the layer with your image/text (in this case the arrow) to wherever you want the endpoint of your animation to be. I'll just move it over to the other side:
http://img219.echo.cx/img219/9692/example186kv.gif
Once again select both frames and click the tween button. Again I will use the default 5 frames, however more or less may be required depending on the distance your object is being moved.
Test your animation. Your object should now move smoothly like this:
http://img227.echo.cx/img227/441/example190kn.gif
That is really all there is to motion with tweens. Now just find some creative ways to apply tweening into your animation and you are almost ready to be a master of ImageReady. There is only one more thing you need to know, optimizing and saving your work.

Optimization in ImageReady
The very last thing you need to know about in ImageReady is how to save your work in a way that can be used. Unlike Photoshop, there is not "Save for Web..." option. Instead there is "Save Optimized". Optimized is the exact same thing as save for web except the options for it are in a separate window like the layers or animation window. To open this window go to

Window>Optimize. The window looks like this:
http://img287.echo.cx/img287/9701/example129de.gif
There are a lot of things you can adjust here to change your file size, however, there is a way to make it all very simple. The first thing to do is make sure you are set to Gif. Gifs support animation, while Jpegs do not. Next click on the button that looks like an arrowhead pointed to the right in the top right corner of the window. From here, select "optimize to file size." This will create a window that looks like this:
http://img267.echo.cx/img267/1690/example130se.gif
Choose "Current Settings" so that you remain with a Gif. Then all you have to do is type in the highest file size you need or are allowed to have in any situation. ImageReady will automatically mess with the more complicated optimizations stuff to give you the set file size.

To lower file size one of the things ImageReady may do is lower the quality some. If it is lowered too much to the point where the image becomes grainy, or just bad looking, then you will need to find other ways to lower file size. Try to simplify your animation, or remove a few unnecessary frames. If you used tweens you may be able to remove a few tweened frames and still maintain the animation. Really, just try playing around with your image in ways that may simplify it.

Once you have your optimization set all you have to do is go to File>Save Optimized As... This will save your optimized image.

That ends the tutorial. Hopefully by now you have enough understanding of ImageReady and some examples of what it can do to create some cool animation of your own. For a final time, remember to use this in a unique and creative way, and have fun animating!

[JokingClown]

Heres a list of sites with alot of tutorials...


http://www.80four.co.uk/

http://www.absolutecross.com/tutorials/

http://www.alanhettinger.com/tut.php

http://www.alpha-shade.com/www/Tut/Tutorials.htm

http://www.gurusnetwork.com/tutorial...6908c658722bc8

http://www.pegaweb.com/tutorials/web...-tutorials.htm

http://www.phong.com/tutorials/

http://www.pixel2life.com/tutorials/...Photoshopll/

http://www.planetphotoshop.com/tutorials.html

http://www.shadowness.com/tutorial - You have to sign up.

http://www.spoono.com/

http://www.teamphotoshop.com/tut_photoshop/ps_tut.php

http://www.tutorialkit.com/

[Pepper]

here are tutorials that i have made......check it out.... http://www.tutorial-search.com

[Blood[B]ath]

Full Clean Proffessional Layout - Part 1 the top navagation bar

[View the tutorial]

A tutorial by me. All pictures included on that page, nice and easy to read, have fun!!

[mavahntooth]

WOW great! this will help me a lot! thanks.

[raven1083]

thanks for the free tutorial

[[ugly_cat]]

why this useful thread was dead?