Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2009
    Location
    West Yorkshire
    Posts
    23
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Two images stacked in a GIF

    Hi,

    I'm trying to create some buttons like this:

    http://www.elated.com/articles/css-rollover-buttons/

    the problem I have is finding out how to create the GIF in CS3? I've searched the web but can't find an appropriate guide.

    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You mean that actual graphic or just a graphic and then combining them? The easiest is probably to create a new file with canvas size of double the image height, then have the layers for each part of the image or make the images separately in two different psd files and then drag them to a new psd file. They may need to be merged first or you can export then open them again.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    Photoshop CS3

    Please see http://www.lineforeline.com/

    I went crazy looking for good old ImageReady (which was where you created and edited animated GIFs) in Photoshop CS3 -- couldn't find any reference at Adobe. The basics are there under Window>Animation. You manipulate your layers/modes etc. so certain things show in certain frames.

    Then, File>Save for Web...

    You cannot use Photoshop to edit the animated GIF so be sure to also save PSD with layers intact. I would imagine that Fireworks would be used for editing animated GIFs but have not tried it yet.

    Not sure what you mean by "stacked"?

    Otherwise, what I do is have static JPEG version in place (for rollover) and have animated GIF onclick. See http://www.auntnini.com/new/index.htm or http://www.chanit.com (the "chanit")
    Last edited by waxdoc; 07-11-2009 at 11:14 PM. Reason: "stacked" ?

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    CSS? not CS3?

    #emailUs
    {
    display: block;
    width: 107px;
    height: 23px;
    background: url("emailUsNormal.gif") no-repeat 0 0;

    }

    #emailUs:hover
    {
    background: url("emailUsRollover.gif") no-repeat 0 0;
    }
    You mighe want to create anchor and CSS style rule for a:hover pseudo class so hover wil work in IE.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •