PSD HTML Slicing Tutorial

25 May

Ok, as I’ve said HERE, my great psd slicing tutorial is done. Please note that it is my very first video tutorial so I’m sorry for this things:

  1. If I cut out too much parts (yes, some parts like ALT-TAB window, start menu showing, and so on are missing). I considered that those parts are not essential so, to reduce size, I’ve cut them out.
  2. If it’s taking too long. The tutorial consists in two parts, both are around 30 minutes. I wanted to play them at 150-200% speed, but I quit. I offer a download alternative (besides the online playing), so you can download files and play them in your favorite media player with higher speed.
  3. If I have language errors. English is not my native language, so I made mistakes. Some mistakes I’ve seen, some not. But it takes way to long to edit the videos again and again. I consider that errors are acceptable because the final result (which is that you understand how it’s made) is more important.

Download:

Part one Part two. Great for offline views.

Files used in movies: HERE.

EDIT: Because i received complains about codec and browser crash because of videos, i put only FLV version. If you prefer, under each player, you find a link for VMW version (which have waaaay better quality).

Part one

VMW version, higher quality.

Part two

VMW version, higher quality.

I use E-texteditor, which is THE BEST editor i ever seen, so don’t worry if things appear from nowhere. Is just my snippets.

READ THIS PLEASE

I really need feedback on this movies, because i want to know if i should continue or not on creating (video) tutorials. So, you like it? If you don’t like it, what was wrong? What is missing? And the most important: did you understand what’s happening there? After you did this tutorial, you are able to make this on your own?

Thanks and enjoy!

I almost forgot.
The host for videos is provided by Miodrag, because on my host i have limited amount of both space and bandwidth.

Tags: ,

Bookmark this article!

Del.icio.usDiggStumbleUponFurlRedditTechnorati

SlashDotWindows LiveYahooGoogleFacebookBlogLines

12 Comments »

  1. May 25, 2008 latest-mtv.net said:

    Amazing dude, i really appreciate it.This tutorials are really good steps for the beginners.

  2. May 25, 2008 Cum să transformi un PSD într-un HTML? | Staicu Ionut Bogdan said:

    [...] tutorialul AICI. Azi am avut o zi un pic mai liberă şi m-am apucat frumuşel să fac primul meu video tutorial. [...]

  3. May 25, 2008 Filip said:

    Excellent, Ionut!
    But .wmv?? :D Why not something friendlier?

  4. May 25, 2008 stefan alexandru said:

    Nice tut dude. Helpful for beginners and even for advanced people. who’d like to know some of your tehniques. :P

  5. May 25, 2008 Layout slicing and coding » hwpedia said:

    [...] adobe, online, video, webmaster 25May Un tutorial video foarte bun despre slicing si coding realizat de Ionut Staicu. Ca tot vroia recomandari si [...]

  6. May 25, 2008 Marius said:

    I’ve just re-acquired confidence in the human race:)
    Awesome tutorial, dude.

  7. May 25, 2008 Tutorial PSD slicing « Cosmin Chiru said:

    [...] 25, 2008 Ionutz a realizat un tutorial video de slicing al unui PSD si respectiv asamblare in HTML. Daca-l considerati util nu ezitati in a lasa [...]

  8. May 25, 2008 Alin said:

    Great tutorial! I now know how to properly slice!

  9. May 25, 2008 Ionut Staicu said:

    Thank you guys :D
    I also received a lot of greetings on Y!Messenger for this videos and some people ask me why doesn’t have sounds? There is an error, or what? Nope. There is no error. My written english it is how it is (we have to admit, not to brilliant :D )but my spoken english is waaaaay worst. And i don’t want to be the first Dracula with blog :D

    @Filip: i didn’t know how to convert in a friendly format. Anyway, i converted in FLV overnight and i put some alternative links to videos. But these FLV version have lower quality. I learned a lot from this tutorial (what i need to show, HOW i need to show) so in the next tutorial i will you will see some improvements about how i explain :D

    Meanwhile… Enjoy :D

  10. May 25, 2008 m0onlord said:

    Great tutorial! i hope you will do more psd html slicing screencasts in the near future, maybe with more complex layouts ;)

  11. July 18, 2008 DHEERAJ said:

    IS THERE ANY SOUND IN THESE TUTORIAL OR NOT?

  12. July 19, 2008 Staicu Ionut said:

    No sound this time :( sorry

Leave a comment