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

Check this video out at Hi-Res here: 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
Video Rating: 4 / 5

25 Comments+ Add Comment

  • why is it left alignment ! i want it to be strected according to browser resoution !! please somebody help me ! urgent ­čÖü and ur video tutorials r awesome´╗┐ !! ­čÖé help me plz ­čÖü

  • A very good video, helped´╗┐ me a lot with my course work

  • Amazing and really helpful but what if the layers are not taking all the layout space,´╗┐ i made lots of slices with me after doing layer based Slices.

  • i love you thanks a lot for this man´╗┐

  • Americanii creeaza website-uri, olandezii construiesc masini zburatoare, italienii fac autostrade moderne…Politia din Satu mare, Romania…manipuleaza calculatoarele, intercepteaza telefoanele, manipuleaza oamenii…SISTEM´╗┐ DICTATORIAL FASCIST…tiganii Uniunii Europene

  • Please come check out our t-shirts and promo video. we´╗┐ launched this week!


    and web site

    graffitithreadz (dot) com

  • Nice vid thanks´╗┐ bro

  • how would you get the layout´╗┐ to fill the entire page?

  • You did not explain how to link the sliced´╗┐ images/buttons from a psd file. When I go to link one of sliced images in my nav bar, the entire layout shifts. Any idea on how to fix that?

  • sorry that comment was meant for your other video where´╗┐ you work with the sliced psd file in dreamweaver.

    visit my website where you can´╗┐ learn html,javascript,css,flash,Photoshop,drreamweaver, Ms office,Autocad,Computer hardware, And download Serial keys, Watch short keys, As well as Download full version softwraes, watch live Tv Channels, download Flash,Photoshop Templates, And much more tips trickssss

  • Well i found that´╗┐ very helpful but i want to know how to set the files that are made at the end of your video onto a website..

  • Reaserch fluid´╗┐ designs.

  • This video was so helpful! I have to do a site from a psd file someone else made and completely forgot how to do it! This video made it simple for me to brush up on my slicing skills!´╗┐ thanks so much!

  • Thanks dude! This video was very helpful! ­čÖé ´╗┐

  • Thanks so much man!!! You’re a life saver!!! =)

  • Great video. ´╗┐ Well presented and explained. Many thanks.

  • Extremely helpful. Thanks!!´╗┐

  • Thanks, great work, extremely clear´╗┐ and useful!

  • If you are a photoshop designer you should try using, it is free to´╗┐ use and very very flexible …

  • How make´╗┐ the slices invisble and again visble?

  • Thank you so´╗┐ much!!

  • Awesome´╗┐ Thanks a bunch ­čśŤ

  • Great Tut, Just one question, what about them little lines in the main area? did´╗┐ not see you cut them. Id like to learn how to do that. please

  • how could I delete slices? please! I really need to know!
    using psd3 for´╗┐ mac