| a. s. h. k. e. ( @ 2005-01-02 23:56:00 |
| Current mood: | |
| Current music: | The TRAX - On the Road |
Border Tutorial
After being asked how I did this effect I decided to write my first icon tutorial. I use Paint Shop Pro 7 and Animation Shop3 for everything I make but this should work in Photoshop also.
We'll be making this icon ::![]()
First thing is first...I need to do is get my picture and crop it down...I open THIS picture in PSP7 and crop and resize it and get this....![]()
At this time I usually clean up the base and make it even better quality so first I goto Effects -> Enhance Photo -> Fade Correction and put my settings at 50%
Next step you goto Colors -> Adjust -> Brightness/Contrast and put your Brightness to -5 and Contrast to 10 and your image should look like this...![]()
Now copy that and paste it as a new layer. Set the new layer to Screen and goto Color -> Adjust -> Hue/Saturation/Lightness and put the Saturation to -100. Put the layer at 30% opacity and it should look like this...![]()
At this point I decide to continue the blue hue that the picture already has and select this Gradient made by
crumblingwalls![]()
I flood fill a new layer above all the others with this gradient and set the layer to softlight at 100%![]()
Next I take a texture made by
booster_rocket ![]()
And apply it to the image as a new layer and set the blend mode to softlight at 100% opasity...I didn't like how the dark part was at the top so I flipped the layer...this is what it looks like now...![]()
I want to darken the look of the icon up a bit so I make another layer and with another gradient made by
crumblinwalls![]()
I flood fill the layer and set it to softlight at 60% opacity.![]()
Now using a texture brush by
crumblingwalls for horizontal scanlines I make a new layer and with the color #5E7FB7 (I picked it up from the picture) I set the layer to Screen at 30% opacity.![]()
Now I think I have the base icon ready...it's your choice to add text or not....I added a simple bit of text to complete the look of the icon.... I used the Georgia Font at size 12. Play around with fonts to get different effects.![]()
Merge all of your layers and go ahead and open Animation Shop to get ready.
Now to start making the frames for the icon....make a new layer and draw on the border.
Each Dash is 4px wide and start in the top left corner.
Now do a color redution (Ctrl + Shift + 3) and set your reduction to Optomized Octree. Copy the resulting image and paste it as a new animation in AS3.
Now go back to PSP7 and using (Ctrl + Z) go back a step and you should be just before you optomized your colors. Using the layer with the border move the top side and right side of the border to the right and down one pixel to make the border "move". Do the same to the left and bottom side to make them "move" and repeat the step for optomizing and copying the image. Now when you paste it into AS3 this time use (Ctrl + Shift + L) to paste it into the same animation behind your previous frame. So so far you should have two frames.... continue moving the border over one pixel until you've got 8 frames...
![]()
Once you have all your frames finished and pasted into Animation Shop choose how fast you want them to move (I have mine set to 10) and make sure you have the animation properties set to loop undefinetely. Save the animation and you should be done.
If you've done everything your icon should look like this ::
I hope you found this tutorial useful. Feel free to comment and leave feedback!!