30 Tutorials On Converting A PSD To XHTML And CSS
- May 25th, 2009
- Tutorials
30 of the best tutorials on web for converting A PSD to a XHTML & CSS layout. These tutorials you will learn the process on how to create a Photoshop web layout and be able to convert it into a valid XHTML & CSS web page. The tutorials are a step by step process which are easy to follow and keep up with.
1. Create a clean modern website design
Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding.
2. Build a Sleek Portfolio Site from Scratch
In this tutorial we’re going to take that PSD file and build it with some nice clean HTML and CSS.
3. Build a Sleek Portfolio Site from Scratch
Takes you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!
4. Converting a photoshop mock up
In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website.
5. Converting a photoshop mock up
In this tutorial you will learn how to create a corporate wordpress styled layout. Also this tutorial contains the PSD which is available for download.
6. Design Lab TV Styled Layout (PSD)
Design Lab TV Styled Layout (HTML & CSS)
In this tutorial you will learn how to make a Design Lab layout for your portfolio by making it look as if your work is being displayed on a TV.
7. Web Design Layout #9 (PSD)
Web Design Layout #9 (XHTML & CSS)
another tutorial by the hv-designs team in this tutorial it will show you how to create a web design layout, currently the 9th one in our tutorial database and also how to code it.
8. Convert PSD to HTML
A great video converting a cool layout from photoshop to XHTML to Css.
9. BLOOpress WordPress Mockup (PSD)
BLOOpress WordPress Mockup (XHTML & CSS)
The tutorial will again be split in to parts like the last one was, only this series will be slightly longer and in-depth, but still your learn a lot from it.
10. How To Build Your Own Single Page Portfolio Website
A great looking portfolio site is crucial for any designer to instantly present their work to potential clients or employers. A simple, single page site can do this effectively by displaying three key features of large header with short introduction, examples of your work and methods of contact all in one, extremely browsable page. Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.
11. Design a Beautiful Website From Scratch
Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs.
12. Your PROject Pt.1 (PSD)
12. Your PROject Pt.1 (XHTML & CSS)
In this series we’ll be creating a website in photoshop then later on code it into a 5 page template. We’ll also be adding a nice jquery slide effect for our featured content section using JFlow.
13. From PSD to CSS/HTML in Easy Steps – Part 1
This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page.
14. Create a Vibrant Blog Design in Adobe Photoshop,
Create a Vibrant Blog Design in Adobe Photoshop (XHTML & CSS)
This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page.
15. Converting a Photoshop Mockup: Part Two, Episode One
There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time.
16. Converting a Design From PSD to HTML
A very cool detailed tutorial with an awesome out come.
17. Create a Magic Night Themed Web Design from Scratch in Photoshop (PSD)
Create a Magic Night Themed Web Design from Scratch in Photoshop (XHTML & CSS)
A very cool detailed tutorial with an awesome out come.
18. CSS Template Tutorial
What you will be doing in this part is setting everything up to begin coding your template for your website. This tutorial is for slicing a design made in photoshop and coding it in dreamweaver.
19. Tutorial coding a layout
So, you’ve designed your next site but you’re having a little trouble turning your lovely PSD into a coded layout. This tutorial should help you learn how to analyze either a new template, or even your current layout to find the best way to code it.
20. From PSD to HTML
Learn how to slice up your design and then use CSS and HTML to turn it into a powerful web interface.
21. From PSD to HTML
A screen cast that shows you exactly how to convert a PSD into perfect XHTML/CSS.
22. Creating a CSS Layout from scratch
A great tutorial on how to create a CSS Layout from scratch including the photoshop process.
23. Creating a CSS Layout from scratch
A dark photoshop layout to a xhtml/css webpage.
24. Slice and Dice that PSD
In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate.
25. The Design Lab: PSD Conversion
A great tutorial which you will learn a lot of photoshop techniques and HTML/CSS tricks.
26. PSD > HTML/CSS
A great tutorial to create a website for a design studio.
27. Portfolio Layout – Learn To Code It
A good photoshop tutorial and even better it shows you how to convert it to XHTML/CSS layout.
28. Coding The Creative Design Layout
Another great tutorial from HV-designs which is worth trying out.
29. Car Sales Layout Tutorial
A simple tutorial with some cool html tricks and tips.
30. PSD to CSS to WordPress
converting a PSD file into a working CSS template ready for when you convert it over to wordpress.
cool post
@website design nyc – Glad you enjoyed the article.
A very inspiring compilation. I will dedicate a block of time in the near future to work through all these great tutorials.
Thanks again!
@mordrin – ye its best to dedicate a block of time because these tuts can be very time consuming but i suppose its worth it because your learn a lot of new skills from theses tuts. thanks for the comment
great compilation of tuts…thanks for getting all of them in one place…I’ve just bookmarked this post, I’ll get back here lots of times…
Very nice article and great compilation of tutorials. I’m just suprised by the first tutorials that does not all deal with the PSD conversion and work directly on the HTML/CSS part (and vice versa on the fourth and fifth). But I didnt read them all (yet). Thanks!
Great list of tuts. Thanks for sharing!
@ Logofreestyle – ye heres a link for the first one to the HTML and CSS part http://tinyurl.com/r244gb thanks for taking time out to leave a comment.
@wiphone – Thanks for the comment and bookmarking the article.
Great roundup! :)
Featured here: http://www.presidiacreative.com/web-picks-22/
Great post, and I have used many of these in our content.
@Eric Shafer – Thanks for featuring our article on your website.
Carl Web Courses Bangkok – I’m glad they have helped.
What a great collection of tutorials you’ve come across. I’ve been trying to find a good way to convert PSDs to CSS and now here’s quite a few of helpful sites pulled together for me. Thank you!
Nice post…very nice post…i have recommend this link to many people.
@ Australian SEO – Thanks for recommending it to other people
Don’t forget Sitegrinder. (www.medialab.com/sitegrinder). It is a Photoshop plug-in that can convert designs into web sites. It’s pretty easy to use and has a lot of features.
I am one of the SiteGrinder programmers.
Nice post, thanks!
Have a nice posting here and smart ways to blog in.
Hello, can you please post some more information on this topic? I would like to read more.
U ARE THE BESt !!!
It’s a masterpiece. I have never thought people can have such ideas and thoughts. You are great.
This is great, I usually use http://www.htmlsplash.com
Still a great tutorial!
Nice posting Thanks!
You did a good job if we go step by step which you mention in your tutorials, it is really very easy.. thanks for sharing
If you’re not up to coding yourself, you could just go with an xHTML/CSS coding service.
Very nice work. This compilation would be very handy for a lot of beginners out there. Great job. Keep it going….
All the best,
Chandan
Great post, its always better to have your work professionally coded though :-D
Thank you mate!!!
tnx a lot 4 u rcollection of tutorials
good compilation of useful links about pds and css, i like it.
Very informative.. keep it up kudos
good collection thanx for sharing
I am completely new to any type of website design. I have very limited experience with html (just enough to make a myspace page) and no flash experience. My employer has given me the duty of making a company website, I am just supposed to teach myself and figure it all out. They want our site to function like this one:
Any idea where I should start or whether this is even possible? I am extremely fluent in photoshop and indesign and many other programs, so I am computer literate, but not web creator wise. I have been looking over tutorial pages for hours, I have no idea where to start. Any help would be appreciated.
Great collection of resources. I found this very useful. Thanks for sharing.
Nice list.
hiiiiiiiiiiiiii i really like ur post and i need ur help i want to design a web site in percentage so plz post some thing that can help me in this plz
I’m extremely impressed with your writing skills well with the structure in your blog. Is this a paid subject or did you modify it your self? Either way keep up the excellent quality writing, it’s uncommon to look a nice blog like this one nowadays.
You have done a good job. I just thought of dropping down a comment to let oyu know that your work is really appreciated. You have done a great compilation of tutorials available on the web. It would have taken a good quality of time and search, making it easier for us to get. I went through some of them and I could answers to all my questions. Thanx for sharing.
Hi, a couple of month ago i was searching for a psd to xhtml company service, and tried a couple of them, but, soon realised the good company’s are company’s like http://www.psdconverted.com
They are small, fast, with excellent service.
Give them a try.
Best Regards
Rachel
Hi, at I give u a special thanks for this tutorial. It’s helps me a lot about HTML CSS coding.It is very important tutorial for beginner.
Thanks
Saky
Thanks man, i bookmark this page. Will be visit this page a lot to learn