Site News: PSD > HTML Tutorials Coming to Webdesigntuts!

Big site news! We’ve been getting lots of requests for PSD > HTML conversion tutorials lately… so after quite a bit of behind-the-scenes debate, we’ve finally decided to try out some fully coded tutorials here on Webdesigntuts!

You Asked For It! PSD > HTML Conversion Tutorials Are on the Way!

Up until now, we’ve covered lots of web design tutorials… meaning that we’ve shown how to design a website in Photoshop or Fireworks, but we’ve always stopped short of fully coded tutorials (read more on why we’ve done this below). That’s all fine and well, but we’ve been receiving lots of requests for tutorials showing how to convert these designs into fully working HTML/CSS files. So, that’s exactly what we’re doing!

Why Haven’t We Done This Until Now?

Honestly, we just never anticipated so much demand for these complete “concept to design to coding” tutorials. Yes, in hindsight, it seems like an obvious connection… but when we first launched Webdesigntuts back in October, our primary mission was to act strictly as the design-minded counterpart to our sister site, Nettuts.

Since then, we’ve published a handful of crossover posts with Nettuts where we’ve gone over the HTML/CSS phase – all of which have been hugely popular; The problem is that it’s hard to track down an entire tutorial series across two different sites. So, to simplify things, we’re going to keep some of these new tutorial series together here on Webdesigntuts, as much as possible.

We’ll continue to have plenty of crossover posts with Nettuts in the future, but we’ll be publishing a lot more PSD > HTML conversion tutorials here on Webdesigntuts when it relates to a design that we started over here.

What Does This Mean For You?

It means a better learning experience! Instead of just learning one or two tricks in each tutorial, we’re hoping to show you more of the entire process of creating a web design – starting from basic sketches and all the way to having a functional HTML/CSS site.

This ultimately means that anyone looking to step up their game as a web designer will have a wide array of “project centric” resources available here on Webdesigntuts where they can follow through the entire process!

When Are They Arriving?

This week! We’re kicking off the new category with Adi Purdila’s Corpora design screencast - which he’s painstakingly recorded in full HD! We’re breaking this one up into 3 pieces – design day 1, design day 2, and a full session on the coding.

We’ve also got a special CSS typography series coming soon as well, so keep an eye out for that!

I can’t promise that every design tut that we cover is going to get the fully coded HTML/CSS treatment, but we’re going to make a serious effort to bring as many of these as we can for the major site designs that we cover.

If any of our readers are interested in writing some of these PSD > HTML tutorials, let me know in the comments and I’ll be glad to work with you!

A little bit of overlap isn’t a bad thing!

Additionally…

Until the new PSD > HTML tutorials are ready, check out these awesome tutorials from Nettuts:

• 

  Create a Comic Book Themed Web Design, Photoshop to HTML + CSS

  Today, we’ll tackle the second part: it’s time to slice the design and turn it into a functional HTML layout, ready to be ported to any CMS. Let’s get started!

  Visit the Post

• 

  Convert a Warm, Cheerful Web Design to HTML and CSS

  In this screencast Session, you’ll learn exactly how to convert a warm, cheerful web design into a standards-compliant HTML and CSS website. If you’re just beginning to step into the web design and development world, this is the perfect introduction!

  Visit the Session

• 

  From PSD to HTML: Building a Set of Website Designs Step by Step

  Today I’m going to take 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!

  Visit the Post

• 

  Slice and Dice that PSD

  In this video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.

  Visit the Post