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

Posted by admin on December 22nd, 2009 and filed under websites | 25 Comments »

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, 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 http://www.tutvid.com

Duration : 0:21:4


[youtube DVfxe4pqvo8]

25 Responses

  1. EhabIT Says:

    thanx dude!!
    thanx dude!!

  2. HatchetGirlz Says:

    You just became my …
    You just became my new best friend lol!!! Thank you.

  3. kallfil Says:

    Nice! Thanks! :D
    Nice! Thanks! :D

  4. Brandlax Says:

    YOU ROK!!
    YOU ROK!!

  5. serboots Says:

    Thanks!
    Thanks!

  6. MellorDesign Says:

    thanks that was …
    thanks that was great!

  7. sade7998 Says:

    I personally use …
    I personally use TemplateDrop to get my website templates. Google it

  8. J4M3SPR Says:

    use css to make it …
    use css to make it gayer

  9. grunge65432 Says:

    bluexon WEBSITE …
    bluexon WEBSITE with great FREE Website Templates and have the website of your dreams created by proffesionsal website designers starting at as low as 40$

  10. almister999 Says:

    thanks boh myne …
    thanks boh myne still look pretty amteur, please any tips to make it betttter?

  11. Boydgamer Says:

    PNG is better than …
    PNG is better than gif or jpeg OMG but is big size

  12. nusakara Says:

    sound*
    sound*

  13. nusakara Says:

    U shound like …
    U shound like Christian Slater man!

  14. DigitalDailyStore Says:

    I would just like …
    I would just like to say you are one smart cookie. Thanks for all your tuts! I think I’m going to go donate!

  15. mateo032367 Says:

    Thank you! The …
    Thank you! The best spent 21 minutes I’ve spent on a tutorial all year! Excellent job.

  16. sh4d0w4rri0r Says:

    i have a question …
    i have a question wut size does it have to be to be the same has the web-page?

  17. manley09 Says:

    very good
    very good

  18. mcryhoo Says:

    great, fantastic …
    great, fantastic etc. Man, you rox! Than you very much!!!

  19. 3wer Says:

    Very very good …
    Very very good tutorial, I was just gonna find the slice selecting tool but I ended up watching the whole vid and Im really glad I did, thanks for this great video tutorial!

  20. vygis50 Says:

    brilliant lesson
    brilliant lesson

  21. TechnologicHelp Says:

    Can i email this to …
    Can i email this to a person??

  22. DarkAshelin Says:

    Thanks a lot for …
    Thanks a lot for taking your time to make this tutorial. I’m sure it helped a lot of people like me :D

  23. AzinFiro Says:

    You sound Like Ike …
    You sound Like Ike from ‘The entity’..

  24. shisomiso Says:

    great toots man… …
    great toots man…I’m using a PSD from a template and everything is fine but the colours of my slices often do not match those in the PSD. It’s quite frustrating. I’ll export slices to use on a site and it’s sometimes easy to notice my own slices because the colours of the backgrounds look different. How can I fix this? Thanks

  25. MicrosoftHQ500 Says:

    Thanks man you’re …
    Thanks man you’re the best! Your tutorials are so understand and do! Keep up the great work!

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.