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

Check this video out at Hi-Res here: www.tutvid.com 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, assigning 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 www.tutvid.com

Incoming searches:

photoshop cs5 export html, photoshop cs5 html export, photoshop cs5 export to html, export html photoshop cs5, export slices photoshop cs5, export photoshop to html cs5, export html from photoshop cs5, photoshop cs5 css export

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

  1. MercedesPens says:

    Thanks, its a great video!!!!!!

  2. FIRMESTREETWEAR says:

    HOW DO YOU LOAD IT TO TH ACTUAL WEB?

  3. RGHacker says:

    Big OLE Nasty Image XD

  4. ForgetfulLove says:

    @FIRMESTREETWEAR you buy or rent a server and use an ftp program to upload it

  5. FunkyEddy says:

    wow, awesum tutorial !! keep on the good work !

  6. alexviseu says:

    Thanks for the video man, It was really helpful!

  7. samkils says:

    Do you need to slice text 2?

  8. demiphonic says:

    God Bless You lol I needed this :p You explain well dude. Keep those vids coming. :)

  9. transatlant1c says:

    awesome video, best tutorial voice everrrr

  10. elfblades says:

    This creates positioning in HTML…I was under the impression that when using CSS files, presentation should be only done through CSS. Is there a way to export slices to CSS or a combination of CSS and HTML?

  11. Sam64Liz says:

    Ive got to say that your video tutorials are the best. Clear, nice pace and just great. thanks much!

  12. d1x2ter says:

    awesome

  13. m3xchampin says:

    How Do you upload it to myspace as a banner ?

  14. fvalheim1 says:

    sir what about flash? how im gonna put my flash buttons into designed template since its css based?

  15. ThePentagramRanger says:

    @fvalheim1 i need dreamweaver, ist a HTML editor, plus, this is not CSS-based but HTML-based, CSS are style sheets

  16. ThePentagramRanger says:

    @elfblades there is that option, try to look over some advanced setting in save for web and devices

  17. ThePentagramRanger says:

    @samkils no, just slice the area of the text, and in you HTML editor (like dreamweaver) delete the image, make a div from it and add text, just watch this:
    youtube.com/watch?v=lEjLciNRC8s&feature=channel

  18. aspostbus says:

    what i’m wondering is why you are allowed to upload a movie thats more then 10 minutes…..

  19. ChrisPlugged says:

    The problem that i’m currently trying to resolve is, My slices are displaying gaps when I preview in Explorer once in Dreamweaver. When I create a slice into a link it appears with an unwanted blue frame. Any tips or ideas as to what i’m doing wrong??. Good demo Thanks

  20. SparksMentalz says:

    Excellent tutorials man! Very thorough and paced enough for anyone to clearly understand what’s going on! Keep up the good work and much respect!!

  21. anakingijs says:

    How many times did he say slice?

  22. thomasmulhall says:

    update your video becuase theres a new version out

  23. webLimeWire says:

    @ChrisPlugged inside the <img src="YOUR LINK" border="0" add the border="0"

  24. say2saywhat says:

    I only see one layer….how do i connect my layers with the slice images? when i click on the Eye, nothing happens to any of the slice images, please help

  25. khajehabdollahi says:

    That was wonderful
    Thank you