Thursday, February 9th, 2012

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

25

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]

Comments

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

    Hi, do you flatten …
    Hi, do you flatten the layers before slicing?

  2. FAh1en says:

    Thank you very much …
    Thank you very much :)

  3. captainfarktard says:

    @aspx101

    STFU …
    @aspx101

    STFU script kiddie

  4. SrFilipeGoncalves says:

    @captainfarktard

    @captainfarktard

    Google? Front page? OHHHHHHH MYYYYYYYYYYYY GOD!!!! You’re totally crazy man! Do you think before speaking? Stop and think about what you’ve just told. Front page is the shittiest web program I’ve ever used to design webpages. Also, it’s from Microsoft, and google doesn’t normally uses microsoft apps..

  5. aspx101 says:

    @captainfarktard


    @captainfarktard

    You asshole, where’s your proof that google uses front page? Well I’d love to burst ya bubble so… Google uses a program called GWT (Google Webkit) this program allows them to code their pages in a java style language and have it rendered in pure HTML / CSS / JavaScript. Their server-side technology is a mixture of Java, Python and C. How do I know this? I flew to America to go and see one of their seminars. GO YOUR SELF CAPTINFARKTARD

  6. micha3l87 says:

    Great Video! I …
    Great Video! I didn’t understand anything about slicing before I watched this!!

  7. santhu223 says:

    Thank you for the …
    Thank you for the tutorial. You are very good in explaining the concept. For such a 100% helpful video, I didnt understand how the 47 rating ‘Didnt like’. Hats off to your explanation. expecting more from you,. Santhosh

  8. KissAMillion says:

    fantastic tutorial, …
    fantastic tutorial, thanks!

  9. fjjuhasz says:

    I have been …
    I have been following all your videos. Just wanted to let you know that I’m so grateful to you for all of them.

    Judit

  10. G4nt3ng22 says:

    wow thanks a lot .. …
    wow thanks a lot .. i appreciate

  11. ilactore says:

    Thank you so much! …
    Thank you so much! Excellent tutorial.

  12. eldiab21 says:

    thanks for the …
    thanks for the tutorial !!

  13. captainfarktard says:

    @willsmidlein


    @willsmidlein

    Being a janitor does not count. You are an idiot to even argue with me.

  14. willsmidlein says:

    @captainfarktard i …
    @captainfarktard i call bullshit. i used to work at google. they hand code it. so fark off.

  15. pattyw8 says:

    You’ve helped me a …
    You’ve helped me a great number of times allready. You’re very good in this!
    Thanks alot!!
    5*

  16. captainfarktard says:

    @x3nNoN4u
    Any …

    @x3nNoN4u
    Any mildly retarded monkey knows that this is fake. Anyone who knows ANYTHING about making web pages knows that MICROSOFT FRONT PAGE is the best tool for making web pages. It is a little known FACT that GOOGLE uses FRONT PAGE for almost EVERYTHING THAT THEY MAKE. Go back to school before talking to me you
    knit wit!!!!1eleventyELEVENTEEN!!!!11

  17. x3nNoN4u says:

    if u can’t do it .. …
    if u can’t do it .. don’t say it’s fake .. troll

  18. kaiqom says:

    thanks, been helped …
    thanks, been helped with quite afew of your tutorials, much appreciated

  19. angeldilbeck32 says:

    Photoshop basics… …
    Photoshop basics… Step-by-step tutorials… Visit Free-VideoTutorials.infoR (remove R)

  20. promusic2k6 says:

    Tx a lot man!! …
    Tx a lot man!! helped me lots today!!

    cya!

  21. captainfarktard says:

    Totally FAKE!!!
    Totally FAKE!!!

  22. chrispoage says:

    Awesome! this is a …
    Awesome! this is a huge help for my new website!

  23. garytylee49 says:

    You are beast man! …
    You are beast man! Really thorough Videos!

  24. kanedogg08 says:

    dude half of what …
    dude half of what your saying is true and the other incorrect man! your image explenation is average at best, because theres a lot more to images and the web, especially colours & size!

  25. alienkaze says:

    Is there any …
    Is there any tutorial on how to make this hole layout for a web page? I found the navigation bar one it is very good. I can`t seem to find that one though. Thank your very much!

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

*