Slice and Export a Website Layout + HTML: Photoshop Tutorial!
February 7th, 2010
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
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!
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!
Help! Now where to i get photoshop psd templates???
great tut. you are so thorough in your explanations and answer questions that pop in my head as you go along. love it. thanks!
beautiful man thanks
awasome!!!!
brilliant
thanks for this mate! this will help me for my new website
Good stuff man, good stuff. You’ve opened my eyes. I’ll definitely be visiting your site often. TUTVID to di worl!
thanks very much!
Nice work with this video. Very Helpful.
@SophisticatedMike There is a rollover effect, but I don’t know if tutvid has it, although there are very easy ways to do this, ust search it in youtube.
I love it!!! it’s awesome!!!!!!!!!!!!!!!!!
how do you make it so that when a user hovers over them sliced buttons, the button will change? Is there a tut for that.
Like, a user will hover over a home button, and there is a rollover effect, like colour change or something along those lines.
Excellent tutorial. Everything broken down so well and explained. I was totally clueless before this tutorial.
Thanks so much!!
i am really freaking dumb.. i don’t get it.. i learned to make a homepage, but still no idea how to get it working on web
WOW!! This was Really HELPFUL. THANX
ONE QUESTION: would it be a good (?) idea to make the slices of the buttons somewhat bigger so they sort of touch, so there are less of the “empty” ps slices in between? I’m just a hobbyist okay, so maybe it’s a stupid question.
There is a lot of white space on the right side when you preview it on the web. How do you either get rid of the white space, center the webpage on the white space, and/or fill in the color (so it’s not white and blends with your page)? Thanks!
Hey Tut vid I really enjoy your videos You seem to know what your talkin about compared to these other people who just seem like they are guessing. I have a question… When I slice up my layout in photoshop then export it into dreamweaver and turn the slices into links the sliced areas seperate and leave a white gap inbetween them. Why does this happend and how can i fix it?
Wow!!Thanks again.
I mostly heard slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice slice
Excellent tutorial - both in production and in content. Screen-cap was flowing smoothly, with all the right parts emphasis (even with time skipping). Your voice sounds perfectly clear with no background noises. And as for the content - everything is clearly understood and I even learned some new tricks! This is definitely one of the best video tut I have seen. One thing thought - you could use a higher resolution (it was blurry sometimes).
@Xsmooth102X Use an FTP client.
Another fantastic tutorial. 20 minutes went so fast! Thanks
Seems awesome, going to give it a go