a. s. h. k. e. ([info]ashke_icons) wrote,
  • Mood: crazy
  • 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 [info]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 [info]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 [info]



I flood fill the layer and set it to softlight at 60% opacity.



Now using a texture brush by [info]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!!


  • Post a new comment

    Error

    Your IP address will be recorded 

  • 21 comments

[info]selinachan

January 3 2005, 09:35:52 UTC 7 years ago

Thanks for the tutorial. I tried following but I got lost somewhere near the begining around the gradient part. O well I'll keep trying until I get it right^_^ Thanks again and I'll let you know if I get any results^^

From Selinachan

P.S. I'm using PSP9 but that shouldn't make a huge difference should it?

[info]abberellax

January 3 2005, 09:50:09 UTC 7 years ago

Dunno if PSP9 makes a difference. Maybe reading it over again..?

[info]selinachan

January 3 2005, 11:37:19 UTC 7 years ago

:whew: I finally came up with something**. I kinda got a little lazy and cheated near then end.

I'll try again another time but thanks a bunch for the tutorial it's inpired me to do more animated icons. I'll do it properly next time^__^

From Selinachan

[info]ashke_icons

January 3 2005, 16:58:53 UTC 7 years ago

I'm glad my tutorial inspired you ^^ I'll try to work on clearer directions. Everything here should work on PSP9 but some of the steps might be in a different place (I know they moved things around when they went to PSP8.

[info]kata5trophe

January 3 2005, 15:21:22 UTC 7 years ago

Beautiful. I'll have to try it later, I just hope it can convert nicely into PS7.

[info]ashke_icons

January 3 2005, 17:00:07 UTC 7 years ago

It shouldn't be hard to convert... It's mostly gradients and blend modes.

[info]wanderingdream

January 3 2005, 15:28:10 UTC 7 years ago

i saved this into my memories. you did what i thought you did, but i love the colors you used for the overlays =D

[info]ashke_icons

January 3 2005, 17:00:35 UTC 7 years ago

Glad I could help in some way ^^;

[info]emuka

January 17 2005, 16:46:49 UTC 7 years ago

This really helped for me...I use psp9. I added it to my memories...Thanx!!!

[info]dreamful_girl

January 18 2005, 04:55:32 UTC 7 years ago

I flood fill a new layer above all the others with this gradient and set the layer to softlight at 100%
I'm sorry but I'm not sure I get this part. How do I get the graphic in there. I open the blue gradient in there. then I go to the color palette and put it on pattern onpen it up on there and flood fill it. But it covers the whole picture.

[info]ashke_icons

January 18 2005, 05:28:09 UTC 7 years ago

which version of PSP are you using? If you are using 7 just goto Layers -> New Raster Layer and flood fill that layer with the color. At first it'll cover the picture yes but then go to your layer tool palette (if you don't have that up it should look like a blue and red box in the top toolbar) and set that layer to soft light.

If you have PSP8 just make a new raster layer and follow the above steps.

[info]dreamful_girl

January 18 2005, 05:54:27 UTC 7 years ago

Ohh, haha I was thinking diffrently. Thanks for clearing it up ^__^
<33

[info]ashke_icons

January 18 2005, 06:13:53 UTC 7 years ago

no problem ^^ *goes back to working on layout @.@*

[info]weirdo_freak

March 8 2005, 23:13:12 UTC 7 years ago

This is such a cool tutorial and I have been looking for something like this. I have PSP7, I was wondering how do I put in the grdient thats the one thing I am confused at. I would appciate it if someone could tell me
Thanks, Jenna

Anonymous

March 22 2005, 07:12:25 UTC 7 years ago

Border

Fab tutorial, but I'm lost at the border! How do you do a dashed border? Cheers!

[info]dance_kyo_dance

March 29 2005, 19:16:51 UTC 7 years ago

How do I get Paint Shop Pro 7? Download, buy a disc?

[info]elizakay

July 30 2005, 22:58:27 UTC 6 years ago

i don't understand the end where you're moving the border? it doesn't make any sense to me. maybe you could like im me or something & help me? please&thankyou. ♥

[info]erroxmysox

August 23 2005, 02:29:52 UTC 6 years ago

Damn. Too bad I have photoshop and Image Ready.

[info]chinni

March 23 2006, 03:43:38 UTC 6 years ago

ooo that site is no longer working

[info]uhx0h

April 16 2006, 06:38:08 UTC 6 years ago

yeah and i had psp 7 an ani to do it, damn I wanted
to try it out.

[info]_ligaya_

November 25 2006, 04:22:43 UTC 5 years ago

Please post the pictures again. :(

Thanks! :D
Create an Account
Forgot your login or password?
Facebook Twitter More login options
English • Español • Deutsch • Русский…