PSD HTML Slicing Tutorial

Posted on by

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.

No related posts.

34 thoughts on “PSD HTML Slicing Tutorial”

  2. Pingback: Cum s? transformi un PSD într-un HTML? | Staicu Ionut Bogdan

  5. Pingback: Layout slicing and coding » hwpedia

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

  7. Pingback: Tutorial PSD slicing « Cosmin Chiru

  9. 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. Great tutorial! i hope you will do more psd html slicing screencasts in the near future, maybe with more complex layouts ;)

  13. How are you all doing? nice tutorial by the way the only problem is why don’t you use more complex layout like form here http://www.talk-mania.com/web-layout…me-layout.html this design is more complex and can you show some tutorial on how to slice that particular layout because this way many designers will have some experience on how to make a complex layout load fast in the browsers.

    As for CSS you need to show these new vibes hot to use CSS hacks to make the layout more compatible with all Browsers and how they can avoid mess off CSS codes. Show them the easy way to code this in CSS, XNHTM to reduce the files size.

    This way it will help populate your site even more.

  15. Hi Goldy, thanks for visit :)
    Actually, this isn’t a real tutorial, is more a workflow video.
    My plans are to record a full real tutorial with enough explanation for beginners. Yes, with voice, even my spoken english is not brilliant. The main problem is my free time though. I’m FULL with various projects and don’t have enough time for this blog, that’s why i wrote only small posts lately :)

  16. But are you going to show some real training, paid training. Because there are some designers/coders are struggling with css and xhtml. why don’t you use advance layouts and slice them and code them with less css codes and use hacks, because that what new vibes are looking for these day, I am too I know little bit off css, xhtml but not how to slice the more complex layout like the URL above in the previous posts.

    If you can’t and don’t have time it’s all good. You’re doing a good job by the way thanks.

  17. Can also explain how to or how much slicing is need for certain images or backgrounds. Like the design I showed you in the previous comments. Please I am having a bit problem with that particular layout.
    Please I can send you the file if you wish just email putjatt@yahoo.com

  20. Thank you so much. This really helped. Could you teach on how to slice really complex layouts and converting them to html. Alot of the templates that you get at boxedart.com is so complex i kinda fell lost and i don’t know where to start.

    Thanks again

  21. Hi Jaysone and thanks for comment.

    As soon as i will have some free time, i will try to redo this video with a more complex layout (and also i will struggle to add some voice too :D )

  22. este pentru a doua oara in viata cand traiesc stanjenitoarea experienta de a vedea folosindu-se o limba straina intre compatrioti pentru a se realiza o banala comunicare. suntem, noi, romanii, chiar atat de frustrati incat avem nevoie la orice pas sa ne afirmam inteligenta? oricum, daca memoria este o latura importanta a inteligentei, simtul ridicolului poate fi un etalon…
    evident, observatia mea nu-l are in vedere pe ionut, a carui tinta poate fi si publicul strain.
    felicitari pentru tutorial, mi-a fost de mare folos!

  23. @corneliu: chiar dac? nu e un blog mare, încerc s? respect cititorii str?ini având cât mai pu?ine (niciunul?) comentarii în alt? limb? decât englez?. Pentru comentarii în limba român? am http://blog.iamntz.com :)

    Mul?umesc pentru aprecieri ?i pentru comentariu. Te mai a?tept ;)

  24. ionut, trebuie sa iti spun ca:
    -daca e vorba de respect, marimea nu conteaza. daca la tine conteaza, ai o problema.
    -daca limba romana este o insulta pentru straini, in mod cert strainul are o problema. dar daca tu crezi ca un strain poate fi insultat de de niste comentarii pe care, neintelegandu-le, oricum le ignora, inseamna ca problema ta nu este una obisnuita.
    -”strainii” pot fi si altceva decat englezi, vorbitori nativi de limba engleza sau adulatori ai acestora. asadar, ai putea experimenta o stare de perplexitate afland ca unii dintre ei se simt insultati de limba engleza (avand si ei o problema, desigur).
    –chiar daca e blogul tau, regulile impuse sunt discriminatorii, deci inacceptabile.nici eu nu sunt in culmea fericirii cand vad atata mizerie in universul romanesc, dar asta e un motiv in plus de a ma feri sa fac ceva care sa ma plaseze tocmai in tagma celor care imi provoaca greata.
    concluzie: chiar daca esti un tip extrem de talentat si inteligent, nu ma voi amagi considerand ca esti unicul de acest fel. si fiindca tot e la moda sa folosesti limba engleza, am sa caut un alt “ionutz” printre straini. sunt si eu un mic admirator al limbii lui shakespeare, dar un maaaaare iubitor de autenticitate!
    multumesc pentru ingaduinta, am disparut de aici!

  25. @Corneliu: s? în?eleg c? tu pe blogurile în limba englez? tu comentezi în român?? :)

  26. ionut, ma vad silit sa retrag epitetul “inteligent” din caracterizarea de mai sus. asadar,ionut, esti un tip extrem de talentat, dar chiar trebuie sa dispar de aici!

  28. Cornele…omule…ai probleme…
    Care e faza daca el vrea ca acest blog sa fie in engleza, si sa se comenteze in engleza?
    Cu ocazia asta ne mai desteptatim la minte… nu citim toate regionalismele tale.

  29. Pingback: Essential Web Designers Guide on PSD to HTML/CSS | tripwire magazine

  31. Great Work Dude…infact it’s worth to admire your hard-work for making such a useful video.
    Thank you very Much !!! :)

Leave a Reply