PSD HTML Slicing Tutorial into CSS at Ionut Staicu

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:

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.
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.
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: CSS/XHTML, Tutorial Comments (33)

Bookmark this article!

Did you like this article?

Don't hesitate to subscribe to my RSS feed!

Also, don't forget, you can also read me on twitter!

33 Comments »

May 25, 2008 latest-mtv.net said:

Amazing dude, i really appreciate it.This tutorials are really good steps for the beginners.
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. [...]
May 25, 2008 Filip said:

Excellent, Ionut!
But .wmv?? Why not something friendlier?
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.
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 [...]
May 25, 2008 Marius said:

I’ve just re-acquired confidence in the human race:)
Awesome tutorial, dude.
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 [...]
May 25, 2008 Alin said:

Great tutorial! I now know how to properly slice!
May 25, 2008 Ionut Staicu said:

Thank you guys
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 )but my spoken english is waaaaay worst. And i don’t want to be the first Dracula with blog

@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

Meanwhile… Enjoy
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
July 18, 2008 DHEERAJ said:

IS THERE ANY SOUND IN THESE TUTORIAL OR NOT?
July 19, 2008 Staicu Ionut said:

No sound this time sorry
September 22, 2008 Goldy said:

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.
September 22, 2008 Goldy said:

by the way if you cannot get to the URL Above please go to http://www.talk-mania.com and look for the Most Advance gaming Layot in the Design Tutorials and go to the web layouts you will see it there.
September 22, 2008 Ionut Staicu said:

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
September 23, 2008 Goldy said:

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.
September 23, 2008 Goldy said:

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
December 5, 2008 homemarket said:

Excelent tutorialul.10X
December 29, 2008 wmurillo71 said:

thx really a great effort, I hope you continue with your labor
March 18, 2009 Jaysone said:

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
March 18, 2009 Ionut Staicu said:

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 )
March 20, 2009 corneliu said:

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!
March 20, 2009 Ionut Staicu said:

@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
March 20, 2009 corneliu said:

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!
March 20, 2009 Ionut Staicu said:

@Corneliu: să înţeleg că tu pe blogurile în limba engleză tu comentezi în română?
March 20, 2009 corneliu said:

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!
March 20, 2009 Daniel Enache said:

@corneliu Trolling FAIL?
May 18, 2009 Alberto said:

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.
July 15, 2009 Essential Web Designers Guide on PSD to HTML/CSS | tripwire magazine said:

[...] PSD HTML Slicing Tutorial [...]
September 14, 2009 hirakumar@gmail.com said:

nice block , I like it.
November 20, 2009 Fawaz said:

Great Work Dude…infact it’s worth to admire your hard-work for making such a useful video.
Thank you very Much !!!
November 26, 2009 R Aflec said:

“Great compilation! Thanks a lot for putting it all in one place, but there is another one to add to your list.

http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly

Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.
“
December 28, 2009 suvanno said:

nice tuts dude i learn much more from this tut………..thanks