Slice and Export a Website Layout + HTML: Photoshop Tutorial!

September 7th, 2009 | by admin |

Check this video out at Hi-Res here: http://www.tutvid.com/tutorials/photoshop/tutorials/slicingALayout.php

Welcome to this video tutorial! We will learn how to take a Photoshop created web page layout template and slice it into individual pieces and then export it with an HTML file. We will cover user slices, layer based slices, auto slices, naming slices, igning links to slices, alternate text for slices, creating multiple slices at one time, previewing our file in a web browser, saving individual slices as gifs or jpgs from the same document, and exporting a fully functional HTML file to go along with all of it. Please enjoy and don’t forget to check out the site http://www.tutvid.com

Duration : 0:21:4


[youtube DVfxe4pqvo8]

  1. 25 Responses to “Slice and Export a Website Layout + HTML: Photoshop Tutorial!”

  2. By sl33tz0r on Sep 7, 2009 | Reply

    yeah, and dont make …
    yeah, and dont make your jpegs too small, they may look god on your monitor but on cheaper lcd screens you can see those annoying artefacts. good job again

  3. By sl33tz0r on Sep 7, 2009 | Reply

    good tutorial. But …
    good tutorial. But I always try to keep all my images compressed in the same format because different compression algorithms give you different colors, I had to deal with that in the past and now Im doing jpegs only. Also I laughed a bit when you were fighting to make that 4kb file even smaller :)

  4. By PharaoKheops on Sep 7, 2009 | Reply

    wonderful tutorial …
    wonderful tutorial on slicing. really digging it!
    though I must admit that png files are much more effective

  5. By czarspuppet on Sep 7, 2009 | Reply

    outdated, PNG rapes …
    outdated, PNG rapes GIF in terms of file size compression

  6. By Princejarethh on Sep 7, 2009 | Reply

    that was freakin’ …
    that was freakin’ sweet :D

  7. By Lamdennison on Sep 7, 2009 | Reply

    Great tutorial — …
    Great tutorial — thanks for sharing the knowledge.

  8. By spoondj on Sep 7, 2009 | Reply

    Thank you for the …
    Thank you for the video. It really helped.

  9. By greywolf907 on Sep 7, 2009 | Reply

    Thanks muchly for …
    Thanks muchly for the time and effort…learned something new so thanks a bunch.. DG (London)

  10. By DeeDigital on Sep 7, 2009 | Reply

    hi there very nice …
    hi there very nice tut, i have a qweston: how do i import the psd into flash? and is it possible to add effects such as mouse rollover to the links?…. thanks

  11. By cmorera on Sep 7, 2009 | Reply

    actually, i think …
    actually, i think he did have different layers, since he did “slice by layer” option

  12. By cmorera on Sep 7, 2009 | Reply

    yes
    yes

  13. By AnAbsenceOfColor on Sep 7, 2009 | Reply

    lol i like how he …
    lol i like how he explains the promotion but then doesn’t. good tut though

  14. By ardhanariswar on Sep 7, 2009 | Reply

    This might be a …
    This might be a dumb question
    but is the image already flattened out into one layer before he starts slicing?

  15. By Ulysses3104 on Sep 7, 2009 | Reply

    Great tutorial thx
    Great tutorial thx

  16. By Sc00by212 on Sep 7, 2009 | Reply

    Great tutorial, I …
    Great tutorial, I really learned a lot. Thanks

  17. By Aoudhubillahi on Sep 7, 2009 | Reply

    Excellent tutorial …
    Excellent tutorial man.

  18. By songsrme3 on Sep 7, 2009 | Reply

    ok someone please …
    ok someone please reply and help!!!!

    I did this have lots of images but when in dreamweaver need all the slices but as a complete page not individual images HOW DO I DO THIS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  19. By DeeDigital on Sep 7, 2009 | Reply

    what size is this …
    what size is this web layout?

  20. By JOne016 on Sep 7, 2009 | Reply

    Great tutorial, I …
    Great tutorial, I learned a lot. thanx man

  21. By Ov3rgaard on Sep 7, 2009 | Reply

    Best guide ever :D
    Best guide ever :D

  22. By MrSethos on Sep 7, 2009 | Reply

    just what i need …
    just what i need thnx,
    great tutorial(s) keep it up :D !

  23. By inteltuts on Sep 7, 2009 | Reply

    Hey check out my …
    Hey check out my channel!! My vid is as great as anyone here but please check and comment!!!

    Thanks so much!!

    GREAT JOB NATE
    5/5

  24. By PWXgame on Sep 7, 2009 | Reply

    wow thanks man your …
    wow thanks man your the reson im still in school

  25. By RetroRascaL on Sep 7, 2009 | Reply

    Great tutorial, …
    Great tutorial, very helpful. Will be checking out your tuts.

    Subscribed.

  26. By sendtoharvey on Sep 7, 2009 | Reply

    that was a …
    that was a fantastic tutorial..very helpful

Post a Comment