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

13 04 2011

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


Actions

Information

25 responses

13 04 2011
xxmanuu

I absolutely can’t thank you enough! 🙂
The only thing I’d like to know is how include a wordpress-css file in it… The only thing I got now is my sliced image saved as a website (html+images)… But now I want to create a CSS file and I get confused everytime… What is the best way to begin?

13 04 2011
MEXICANMADESTWR

WHY DO I GET ”INDEX OF” ?

13 04 2011
BabeaaNorahio33

heh_ÀNY_gÙýs_wÃñt_tØ_chÀt_wìth_mè

13 04 2011
PirateKingsShip

test

13 04 2011
joevalle90

Thanks man! This is really a great help for me. The best tutorial!

13 04 2011
markhvlog

you sound like charlie sheen…

14 04 2011
burnttoast22879

Great way of explaining, very good tutor, made it simple and easy..many thanks

14 04 2011
BigCrazytm

You can use your hand tool on me anytime ;D

14 04 2011
meeponline

These aren’t the 2 best reasons; the main reason is to make your templates fluid.

14 04 2011
Chakdegirl

One thing u didn’t mention…how do I add text to the sliced portion ?

14 04 2011
OhmylaTheboss

helped me with my project THANKS

14 04 2011
james9610

sorry dude, had to stop watching, nearly fell asleep

14 04 2011
james9610

sorry dude, had to stop watching, nearly fell asleep

14 04 2011
mrgoldenblog

best teacher on youtube 😀

14 04 2011
anguthywali

a very help full websit for free Adobe Photoshop Cs5 step by step training fell free to visit >>>>>>> wordprestutorial.co.cc <<<<< just copy thsi url and past in ur browser

14 04 2011
orton943

did i do it wrong if i made the buttons seperately? i didnt have to slice my web layout because it was in different parts to begin with. i then opened all the stuff up as layers, put it over the background and positioned it all correctly.

14 04 2011
berniecarlin18

why would you leave out the html portion? is there a second video for the coding part?

14 04 2011
roguedjack

Very good tutorial! Saved me a lot of time. Thanks a lot!

14 04 2011
datewali

a very help full websit for free Adobe Photoshop Cs5 step by step training fell free to visit >>>>>>> wordprestutorial.co.cc <<<<< just copy thsi url and past in ur browser

14 04 2011
finkdawg5

Great video, really helpful thank you.

14 04 2011
webinventaltd

nice tutorial…..if anyone needs professional help to covert from psd to html / xhtml plz check out

14 04 2011
technologyvictim

go get the amazing membership creation software with only 15$ yes visit this site->
tinyurl dot com / membership123

14 04 2011
apper2112

Crackimg tutorial tutvid, as always.

14 04 2011
xKrazeH

does anyone know a free or cheap web hosting site that lets you upload your website design you made in photoshop onto the web. I am really wanting to get into this area of design. Also do you need to have much HTML experience to upload it onto the web. Thanks in advance

14 04 2011
nokhazali

a very help full websit for free Adobe Photoshop Cs5 step by step training fell free to visit >>>>>>> wordprestutorial.co.cc <<<<< just copy thsi url and past in ur browser




%d bloggers like this: