Skip to main content
Participant
September 13, 2019
Answered

How to edit gif files created in Photoshop for website design and downloaded into Dreamweaver

  • September 13, 2019
  • 5 replies
  • 513 views

I recently was given a job to edit a website created by someone else several years ago. I believe the layout was created in Photoshop and exported or saved. I downloaded the site into Dreamweaver. It looks like the layout was created with gif files that included images, spacers and text. Some of the gif files have text and photo images or portions of images. Is there anyway I can edit the text without having the original psd files? Will I have to delete the gif files and recreate the text and images to make the requested changes? Any ideas would be appreciated!

    This topic has been closed for replies.
    Correct answer melissapiccone

    Image Ready is ancient and so is what you are describing. We designed websites like this more than 15 years ago. I suggest you start over, from scratch. If the text is real text and not part of any image, you should be able to pull it out and re-use it. 

    5 replies

    Legend
    September 13, 2019

    Hi,

    Image spacers and sliced images = very old layout - in an ideal world you would create a complete new website.

     

    It could also be  the original layout was created, sliced up and exported from Adobe Fireworks (formerly Macromedia Fireworks) ? If you have a bunch a files within the project look for some .PNGs, possibly ending .fw.png these would be your editable Adobe Fireworks files


    If you don't have the original editable Photoshop or Fireworks file(s) then you've got a job on your hands and even then I'd say its just not worth it given the layout sounds like its been sliced up and exported to html from either Fireworks or ImageReady (Photoshop).

     

    Paul-M - Community Expert
    Nancy OShea
    Community Expert
    Community Expert
    September 13, 2019

    I agree with melissapiccone  Image Ready slices and spacer GIFs are a throwback to the late 90's.  It was a quick way for non-coders to build a mockup site.  But it was never a good approach to building real websites.  The code is invalid and the table based layouts were too rigid and unstable for production use.  Editing content usually introduced unslightly gaps and broken images. 

     

    Fast forward to 2019 and that approach is unthinkable.   Site owners expect RWD (responsive web designs) that fit ALL devices.  You cannot do that with table layouts and spacer GIFs.   Discard everything and start over with Bootstrap or another RWD framework of your choice.

     

    Dreamweaver has starter templates to help you.  Go to File > New > Starter Templates.   See screenshot.

     

     

     

     

     

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Community Expert
    September 13, 2019

    You would definitely need the original art to make changes without losing your mind.

    Sliced/table layouts were abandoned years back, partially for this reason.

    Sliced images require the original art in order to make edits (in the original program) and re-slice on the same guides. Without doing that, the EXTREMELY rigid and fragile table structure created by Photoshop/ImageReady would break instantly after adding a new image that was off by a pixel or two on either axis.

    Without the original art, your only real option is to start over using more modern techniques.

    melissapiccone
    Community Expert
    melissapicconeCommunity ExpertCorrect answer
    Community Expert
    September 13, 2019

    Image Ready is ancient and so is what you are describing. We designed websites like this more than 15 years ago. I suggest you start over, from scratch. If the text is real text and not part of any image, you should be able to pull it out and re-use it. 

    Melissa Piccone | Adobe Trainer | Online Courses Author | Fine Artist
    Participant
    September 13, 2019

    Just to add what I posted before, I believe the website layout was created in Image Ready.