Skip to main content
erintoy14
erintoy14
Participant
April 23, 2017
Answered

Recreate website from Photoshop slices

  • April 23, 2017
  • 2 replies
  • 770 views

Hello, I created this layout on Photoshop and our professor wants us to create a dreamweaver website using Photoshop slices. Does anyone know how to create this in Dreamweaver? I understand creating the div boxes the size of the slices but I'm struggling on what should be relative or absolute positioning and I'm not sure what the float should be. Thanks!

    This topic has been closed for replies.
    Correct answer Rob Hecker2

    I don't want to complicate things for you in your thinking, but none of us would do what you are trying to do. That doesn't mean you should not go ahead and do what your teacher asks.

    • The background might have been better done in Illustrator and saved as a SVG or GIF. Smaller file, sharper image.
    • The text should really be TEXT, not a graphic. Search engines can't read Photoshop text. Also, the text would be easier to edit later, and that is very important.
    • Then the easel with the elephant would be a separate image with a transparent background so it would look the way you want on the aqua background. That image also could have been better done in Illustrator and saved as SVG or GIF.
    • Having the elements separate this way would make it easier to render the design for different devices. This is very important.

    I've been doing web design for 20 years and have never used Photoshop slices on a real website, though I did play with them when the feature was first introduced.

    2 replies

    Rob Hecker2
    Rob Hecker2Correct answer
    Legend
    April 23, 2017

    I don't want to complicate things for you in your thinking, but none of us would do what you are trying to do. That doesn't mean you should not go ahead and do what your teacher asks.

    • The background might have been better done in Illustrator and saved as a SVG or GIF. Smaller file, sharper image.
    • The text should really be TEXT, not a graphic. Search engines can't read Photoshop text. Also, the text would be easier to edit later, and that is very important.
    • Then the easel with the elephant would be a separate image with a transparent background so it would look the way you want on the aqua background. That image also could have been better done in Illustrator and saved as SVG or GIF.
    • Having the elements separate this way would make it easier to render the design for different devices. This is very important.

    I've been doing web design for 20 years and have never used Photoshop slices on a real website, though I did play with them when the feature was first introduced.

    Rob Hecker2
    Rob Hecker2
    Legend
    April 24, 2017

    One thing I forgot to mention is that for the text you now have the option of web fonts, which greatly extend the typeface options on the web, Google has free web fonts and The Adobe Type library has a great large collection (not free).

    Some of us would use the flexbox display property instead of floated divs. Get familiar with flexbox and your web work will be much better than what your classmates do with slices.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    April 23, 2017

    To do this properly, see Extract a Photoshop design into code in Dreamweaver | Adobe Dreamweaver CC tutorials

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices