Flashing Banner Tutorial

Discussion in 'PC Support Archive' started by Curtis129, Nov 25, 2008 with 8 replies and 271 views.

  1. Curtis129

    Curtis129 Newbie

    Messages:
    4
    Ratings:
    0
    Flashing Banner Tutorial [PS CS3]

    Flashing Banner Tutorial

    tut made with photoshop cs3

    ok first up we are going to make a simple image which is 300 X 75 pixels
    [​IMG]

    select background as white ^

    now simply create text on that background Curtis129
    [​IMG]

    save this as PNG

    now with the same image make the text at 90% opacity
    [​IMG]

    save 'as' this image again as a diferent file name keeping it as PNG

    change opacity 10% lower to 80%
    [​IMG]

    now save again etc..

    keep doing this method each time going down 10% in opacity until 0% then saving as.

    once all of those images are completed make a new image
    300x75 px again

    [​IMG]

    now open those other pictures you just made in photoshop

    on each one in order from 100% opacity through to 0%
    Ctrl+A on each and then copy
    paste this onto the new image IN order
    you should have 10 layers all on the new image,
    now duplicate each layer except for the first layer which is 100% opacity,

    place each duplicate layer in the same order but backwards in the layer list by dragging
    you should now have something like this
    [​IMG]

    leave only first layer visible

    now go to window>animation
    [​IMG]

    after slecting animation a window should apear that looks like this
    [​IMG]

    now duplicate that first frame 18 times
    [​IMG]

    you should now have this
    [​IMG]

    now what we are going to do is quite complicated for most people
    we go through each FRAME which is in the animation bar and set one LAYER after another visible like this
    [​IMG]

    go through each layer doing this and it should start to like like this
    [​IMG]

    now that is done should look liek this
    [​IMG]

    now this is very simple from here
    all we do now is slect the 2nd fram hold shift and click on frame 19
    then click the little black down pointing arrow and select 0.2 seconds delay time
    [​IMG]

    do the same for the first frame but make it 0.5 second delay time
    [​IMG]

    now we are just going to add a border to this banner,
    we go to the last layer and creat a new layer or "Ctrl+Shift+N"
    [​IMG]

    grab the selection tool and highlight the whole layer then right click and go down to STROKE
    [​IMG]

    now that you have slected stroke make the pixel size 2px and change the colour to black or #000000
    [​IMG]

    you should have this all up
    [​IMG]

    now its just to save
    click file go to save for WEB & DEVICES!!
    [​IMG]


    now just click save and name the banner as you wish
    [​IMG]


    this is the result!!!
    [​IMG]


    tutorial made by me "Curtis129"

    please say thank you


     
  2. Chotton

    Chotton Computer Specialist

    Messages:
    4,808
    Ratings:
    722
  3. Gerlo

    Gerlo Enthusiast

    Messages:
    53
    Ratings:
    2
    Yeah, nice tutorial, but what application are you using in the pictures?
     
  4. B-rad

    B-rad Press On

    Messages:
    3,306
    Ratings:
    920
    Very complete tutorial! :thumbup:
     
  5. David5534

    David5534 Premium Premium

    Messages:
    2,831
    Ratings:
    267
    Photoshop.
     
  6. Gerlo

    Gerlo Enthusiast

    Messages:
    53
    Ratings:
    2
    Is that available on the Mac? Sorry, I just got a new Mac. I'm a Windows guy.
     
  7. David5534

    David5534 Premium Premium

    Messages:
    2,831
    Ratings:
    267
    Yes, you can get it for mac.
     
  8. Gerlo

    Gerlo Enthusiast

    Messages:
    53
    Ratings:
    2
    Okay, thank you dude.
     
  9. OP
    Curtis129

    Curtis129 Newbie

    Messages:
    4
    Ratings:
    0
    yah photoshop CS3 i should probs add that to the tut ey lol