Post by ::Ellen:: on Sept 14, 2006 0:23:42 GMT
In this tutorial, we are going to make a simple Animated Tech Sigi. This tutorial has been written for Photoshop PS & PS2.
You need to do everything, step by step according my tutorial to make a tech sigi like mine:
Step 1:
Create a New 400.100 px document , RGB mood and with a white background, and create a new Layer on it. Choose the Paint Bucket from your Photoshop Tool bar and fill Black (000000) into your New Layer area.
This Image
Step 2:
Now Double Click on Layer 1 and add these Effects step by step:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Now you must have something like this:
This Image
Step 3:
Now create a New Layer and choose Rounded Rectangular Tool from your Photoshop Tool bar and create a Rounded Rectangular this like:
This Image
Step 4:
Now create a New Layer again, push Control on the keyboard and choose Shape 1 layer in your layer palette:
By this job, Shape 1 Layer will be selected. Now choose Layer 2 ( your new layer which you have created) and first choose Paint Bucket from your Photoshop Tool bar and fill into selected area with your favorite color then choose Brush Tool from your Photoshop Tool bar and start adding Brush Works on Black surface. In this job, I have used Fractal Brushes ( you can download from Deviantart, also you can use your favorite Brush and create an Abstract background like mine:
Image 1
Image 2
When you finish, you can press CTRL+D and reselect the area again.
Now add this Stroke Effect on this layer: ( Double Click on the Brushwork Layer and then add Stroke)
This Image
Now you must have something like mine. But remember, I have choosen Green color, you can choose your favorite color to do that.
This Image
Step 5:
Now go to the Menu Bar, Layer and choose Duplicate Layer and create a New Copy from your Brushwork Layer. Go to this Copy Layer and then go to Menu Bar, Image, and choose Hue and Saturation, and change the color on your copy layer.
This Image
Step 6:
Duplicate Layer again and go to Menu Bar, Image, Hue Saturation and change the color on New Duplicated Layer again.
I have done this job 9 times and have 9 different colors from my Brushwork Layer. Its completely up to you that how many colors and layers do you like to have, but I suggest you when you are working on this tutorial for the first time, create 9 layers in 9 colors like mine. these colored layers will be your Frames in Animation Part.
This Image
Step 7:
Create a New Layer again and this time choose Polygonal Lasso Tool from your Photoshop Tool bar
This Image
Now press CTRL+R on your Keyboard, the Ruler will appear on your Photoshop page. Now Click Right on the Ruler and choose Percent. Now create a shape like mine,
Ruler will helps you to create your Shape directly. And then choose Paint Bucket from your Photoshop Tool bar and fill Black (000000) into it.
This Image
Press CTRL+D to reselect. now its time to add Effects on this Shape. Double Click on the Layer and then add these Effects Step by Step like me:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Now you should have something like mine :
This Image
Step 8:
Now create a New Layer. Choose Rounded Rectangular Tool from your Photoshop Toolbar and create a Rounded Rectangular like mine:
This Image
Now Double Click on its Layer and add these Effects step by step like me:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Now you must have something like mine :
This Image
Step 9:
Now create a New Layer. Choose Rounded Rectangular Tool from your Photoshop Tool bar and create a Tiny Rounded Rectangular like mine.
This Image
Now Double Click on your Layer and add similar Effects with the previous shape. (bigger Rectangular). also there is a simple way for you to add Effects here, you can choose Bigger Rounded Rectangular Layer ( Previous Layer) in your Layer Palette and then a Right Click and choose Copy Layer Style. Then choose your New Tiny Rounded Rectangular Layer and a Right Click again and choose Paste Layer Style. Now you must have something like mine:
This Image
Step 10:
Now go to Menu Bar, Layer, and from there choose Duplicate Layer and create a New Copy from this Tiny Rectangular Layer. As you see I have repeated 10 times this step and have 10 Tiny Rounded Rectangular. You need to do this too.
Now you must have something like this:
This Image
Step 11:
Now again create a New Layer, then choose Ellipse Tool from your Photoshop Tool bar and create a Tiny Circle like mine:
This Image
Here Effects are the same with Previous Layer. Then you need to choose Previous Layer ( Tiny Rounded Rectangular ) from your Layer Palette and Right Click on it and choose Copy Layer Style, then choose your Tiny Circle Layer and Right Click and this time choose Paste Layer Style. After that you must have something like this:
This Image
Step 12:
Now you need to go to the Menu bar, Layer, and from there choose Duplicate Layer and create a New Copy from your Tiny Circle Layer. I have repeated this step 4 times and have 4 Tiny Circles. Its completely up to you that how many Circles do you like as the Top Decoration of your Sigi. Now you must have something like this:
This Image
Step 13:
Now its time to add a Text on your Sigi. You can write everything you like on your Sigi, for example, here I have written my name With Impact Font you can Download from www.dafont.comand have added it some Effects. You can also write a Text and add it your favorite Effects. Here I have choosen these Effects on my Text: ( Double Click on your Text Layer and then add these Effects) :
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
And this is my Sigi after adding these Effects on the Text:
This Image
Step 14: Animation
Now is the time to add Animation on to your Sigi. For this job, you need to send your Project to Image Ready by clicking on the Image ready Icon on your Photoshop Tool bar.
Step 15:
When you sent your Project to Image Ready , first you should remove all Eyes from beside of all your Coloured Brushworks Layers in Layer Palette like this Image: Remember, just let the First Coloured Brushwork Layer stays Visible and don't remove its Eye.
This Image
Now you need to create your first Frame. as I told you before, all these Coloured Brushwork Layers are your Frames and here in Image Ready, you just work with them to create Animation on your Sigi. Now start from Animation table and Frame Palette. First you can see a Frame there, you need to change the Number in the Bellow to 0.1 Sec and under it Loops must be Forever.
Now Click on Duplicates Current Frame on the bellow of Frame Palette and create a New Frame.
Step 16:
Now go to your Layer Palette and click on the Eye of the Second Coloured Layer to be appear. Then remove the Eye from Previous Coloured Layer.
Step 17:
Create another Frame again by Clicking Duplicates Current Frame. Now you have your Third Frame. You need to go to Layer Palette again and click on the Third Coloured Layer Eye to be appear and remove the Eye again from Previous Layer. like this:
This Image
Here in this Image , you can see my Third Frame , I have removed all other Eyes from Coloured Layers and just you can see the Eye beside Third Coloured Layer. And it makes my Third Frame.
Attention! When you create a New Frame, you need to just the Frame Coloured Layer appears and you need to remove the Eye from other Coloured Layers.
As I told you before, I have created 11 Coloured Brushwork Layer and now I have 11 Frames.
Now go to Menu bar, File , Preview In Browser and choose Internet Explorer or Fire Fox and see a Preview from your Sigi. Your Sigi must be Animated. like mine.
Step 18:
Now its time to Save. You need to go to Menu bar and choose "Save Optimized As" and then save your Sigi in your desired name. it saves in Animated Gif format, and you must have a Sigi like mine. a Tech Sigi, so simple, with Animated Background.
Written By Ellen
You need to do everything, step by step according my tutorial to make a tech sigi like mine:
Step 1:
Create a New 400.100 px document , RGB mood and with a white background, and create a new Layer on it. Choose the Paint Bucket from your Photoshop Tool bar and fill Black (000000) into your New Layer area.
This Image
Step 2:
Now Double Click on Layer 1 and add these Effects step by step:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Now you must have something like this:
This Image
Step 3:
Now create a New Layer and choose Rounded Rectangular Tool from your Photoshop Tool bar and create a Rounded Rectangular this like:
This Image
Step 4:
Now create a New Layer again, push Control on the keyboard and choose Shape 1 layer in your layer palette:
By this job, Shape 1 Layer will be selected. Now choose Layer 2 ( your new layer which you have created) and first choose Paint Bucket from your Photoshop Tool bar and fill into selected area with your favorite color then choose Brush Tool from your Photoshop Tool bar and start adding Brush Works on Black surface. In this job, I have used Fractal Brushes ( you can download from Deviantart, also you can use your favorite Brush and create an Abstract background like mine:
Image 1
Image 2
When you finish, you can press CTRL+D and reselect the area again.
Now add this Stroke Effect on this layer: ( Double Click on the Brushwork Layer and then add Stroke)
This Image
Now you must have something like mine. But remember, I have choosen Green color, you can choose your favorite color to do that.
This Image
Step 5:
Now go to the Menu Bar, Layer and choose Duplicate Layer and create a New Copy from your Brushwork Layer. Go to this Copy Layer and then go to Menu Bar, Image, and choose Hue and Saturation, and change the color on your copy layer.
This Image
Step 6:
Duplicate Layer again and go to Menu Bar, Image, Hue Saturation and change the color on New Duplicated Layer again.
I have done this job 9 times and have 9 different colors from my Brushwork Layer. Its completely up to you that how many colors and layers do you like to have, but I suggest you when you are working on this tutorial for the first time, create 9 layers in 9 colors like mine. these colored layers will be your Frames in Animation Part.
This Image
Step 7:
Create a New Layer again and this time choose Polygonal Lasso Tool from your Photoshop Tool bar
This Image
Now press CTRL+R on your Keyboard, the Ruler will appear on your Photoshop page. Now Click Right on the Ruler and choose Percent. Now create a shape like mine,
Ruler will helps you to create your Shape directly. And then choose Paint Bucket from your Photoshop Tool bar and fill Black (000000) into it.
This Image
Press CTRL+D to reselect. now its time to add Effects on this Shape. Double Click on the Layer and then add these Effects Step by Step like me:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Now you should have something like mine :
This Image
Step 8:
Now create a New Layer. Choose Rounded Rectangular Tool from your Photoshop Toolbar and create a Rounded Rectangular like mine:
This Image
Now Double Click on its Layer and add these Effects step by step like me:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Now you must have something like mine :
This Image
Step 9:
Now create a New Layer. Choose Rounded Rectangular Tool from your Photoshop Tool bar and create a Tiny Rounded Rectangular like mine.
This Image
Now Double Click on your Layer and add similar Effects with the previous shape. (bigger Rectangular). also there is a simple way for you to add Effects here, you can choose Bigger Rounded Rectangular Layer ( Previous Layer) in your Layer Palette and then a Right Click and choose Copy Layer Style. Then choose your New Tiny Rounded Rectangular Layer and a Right Click again and choose Paste Layer Style. Now you must have something like mine:
This Image
Step 10:
Now go to Menu Bar, Layer, and from there choose Duplicate Layer and create a New Copy from this Tiny Rectangular Layer. As you see I have repeated 10 times this step and have 10 Tiny Rounded Rectangular. You need to do this too.
Now you must have something like this:
This Image
Step 11:
Now again create a New Layer, then choose Ellipse Tool from your Photoshop Tool bar and create a Tiny Circle like mine:
This Image
Here Effects are the same with Previous Layer. Then you need to choose Previous Layer ( Tiny Rounded Rectangular ) from your Layer Palette and Right Click on it and choose Copy Layer Style, then choose your Tiny Circle Layer and Right Click and this time choose Paste Layer Style. After that you must have something like this:
This Image
Step 12:
Now you need to go to the Menu bar, Layer, and from there choose Duplicate Layer and create a New Copy from your Tiny Circle Layer. I have repeated this step 4 times and have 4 Tiny Circles. Its completely up to you that how many Circles do you like as the Top Decoration of your Sigi. Now you must have something like this:
This Image
Step 13:
Now its time to add a Text on your Sigi. You can write everything you like on your Sigi, for example, here I have written my name With Impact Font you can Download from www.dafont.comand have added it some Effects. You can also write a Text and add it your favorite Effects. Here I have choosen these Effects on my Text: ( Double Click on your Text Layer and then add these Effects) :
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
And this is my Sigi after adding these Effects on the Text:
This Image
Step 14: Animation
Now is the time to add Animation on to your Sigi. For this job, you need to send your Project to Image Ready by clicking on the Image ready Icon on your Photoshop Tool bar.
Step 15:
When you sent your Project to Image Ready , first you should remove all Eyes from beside of all your Coloured Brushworks Layers in Layer Palette like this Image: Remember, just let the First Coloured Brushwork Layer stays Visible and don't remove its Eye.
This Image
Now you need to create your first Frame. as I told you before, all these Coloured Brushwork Layers are your Frames and here in Image Ready, you just work with them to create Animation on your Sigi. Now start from Animation table and Frame Palette. First you can see a Frame there, you need to change the Number in the Bellow to 0.1 Sec and under it Loops must be Forever.
Now Click on Duplicates Current Frame on the bellow of Frame Palette and create a New Frame.
Step 16:
Now go to your Layer Palette and click on the Eye of the Second Coloured Layer to be appear. Then remove the Eye from Previous Coloured Layer.
Step 17:
Create another Frame again by Clicking Duplicates Current Frame. Now you have your Third Frame. You need to go to Layer Palette again and click on the Third Coloured Layer Eye to be appear and remove the Eye again from Previous Layer. like this:
This Image
Here in this Image , you can see my Third Frame , I have removed all other Eyes from Coloured Layers and just you can see the Eye beside Third Coloured Layer. And it makes my Third Frame.
Attention! When you create a New Frame, you need to just the Frame Coloured Layer appears and you need to remove the Eye from other Coloured Layers.
As I told you before, I have created 11 Coloured Brushwork Layer and now I have 11 Frames.
Now go to Menu bar, File , Preview In Browser and choose Internet Explorer or Fire Fox and see a Preview from your Sigi. Your Sigi must be Animated. like mine.
Step 18:
Now its time to Save. You need to go to Menu bar and choose "Save Optimized As" and then save your Sigi in your desired name. it saves in Animated Gif format, and you must have a Sigi like mine. a Tech Sigi, so simple, with Animated Background.
Written By Ellen
