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!


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 Be sure to visit his profile if you have the chance.

    Visit the Post

Related Posts
  • Web Design
    Web Design 2014: What to Watch Out For014 retina
    This year has been a brilliant year in web design. More than any other year perhaps, huge strides have been made towards the maturing of the field. Let's have a look at some of what we can expect for the future of web design as an industry.Read More…
  • Code
    Creative Coding
    Using WordPress for Web Application Development: Features: SessionsApplication foundation 400
    In this series, we're taking a look at how it's possible to build web applications using WordPress. Thus far, we've talked about how WordPress is a foundation (rather than a framework), its architecture, how we need to conceptually think of it when approaching it especially coming from other languages, and then we began talking about the components that make up a basic web application.Read More…
  • Photography
    Let Microlancer Help Make Your Website AwesomeMl code prev 400x400
    Envato's freelance services marketplace, Microlancer, just launched coding services. You can get a website built, a WordPress theme customized, an email templates coded, and lots more. Hit the jump for the full list of available services.Read More…
  • 3D & Motion Graphics
    Get Your Website Built or Customized with MicrolancerMl code prev 400x400
    Envato's freelance services marketplace, Microlancer, just launched coding services. You can get a website built, a WordPress theme customized, an email templates coded, and lots more. Hit the jump for the full list of available services.Read More…
  • Web Design
    New to Web Design? Start Here.New to web design
    Welcome to Webdesigntuts+, an online resource dedicated to teaching and encouraging web designers of all skill levels and experience. Whether this is your first time here, you've found yourself dipping into our content in the past, or you're a regular visitor, this post will help you find the best of our content.Read More…
  • Design & Illustration
    Get Coding Done on MicrolancerMicrolancer 400x400
    Envato's Microlancer has just launched web development services. If you need help to find an HTML/CSS or WordPress developer, our talented service providers are available to work with you.Read More…