There’s a reason why our various tutorials on slicing PSDs are consistently among the most popular articles on Nettuts. Every one of us, at one point or another, has needed to convert a PSD into a working website. The only problem is that, until you’ve gotten a few projects under your belt, it can be significantly confusing. As such, I was asked to prepare a book and video series that details the entire process from start to finish for Rockable Press.
1. What You’ll Learn in this Book and Video Series
- Different methods for slicing a PSD.
- Create semantic mark-up, and learn how this HTML relates to the original PSD.
- How to utilize techniques, such as background replacement and sprite generation.
- Use custom fonts with Cufon font replacement.
- The differences between absolute and relative positioning.
- How to compensate for the dreaded Internet Explorer 6.
- Take advantage of advanced CSS3 features.
- How to take advantage of a variety of helpful browser extensions to expedite your coding.
- Utilize the jQuery library to add a touch of interactivity.
- And plenty more…
2. Accommodates All Learning Styles
Prefer the written word, perhaps even on your new iPad? If so, the immediately downloadable PDF can be viewed on your computer, or any of your eReaders. On the other hand, if you’re more of a visual learner, like myself, and would prefer to have someone “sit next to you,” so to speak, through the entire process, I’ve also included the book in video form, separated into a dozen chapters, where I slowly and succinctly explain each step.
3. Rockable Members Receive a Discount
If you’re not a Rockin’ List member yet, why not? Did you know that, if you sign up (quick and free), you’ll immediately receive Skellie’s – our awesome Tuts manager – “Rockstar Personal Branding” mini-book for free?
Not only that, but when my book launches (very soon), you’ll receive a discount on the book. Signup for the Rockin’ List.
So if you’re at the point in your learning where this would be helpful to you, I really do hope you’ll consider picking up this ebook and highly in depth video series when it launches very soon!
In “Photoshop to HTML”, Nettuts+ editor and author Jeffrey Way will take you through the entire process of converting a design from Photoshop into a complete HTML/CSS website! This book also comes with the completed demo site, which you’re free to use as you wish in your own projects. But not only that, you also get an additional series of screencasts where Jeffrey covers the entire process from start to finish. So you have the choice of either reading or viewing!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
i dont read ebooks but this one i will. How much will it be?
My guess is it will be $29. Most of their books are. I got Collis and Harley’s eBook that was PSD to WordPress, and that alone taught me WordPress completely. This one will definitely be worth getting. I’ll be getting one for sure (yay discounts).
Ill have to try that “Collis and Harley’s eBook” and thank you for the reply.
Would someone have a link to that PSD to WordPress eBook ? I’d be interested in buying both :)
Will definitely be purchasing this!
Even though I can code psd to css/html, I haven’t really studied this at college or Uni and I always learn a lot from your tuts, Jeff, even on things that I already know. They teach me a more professional approach towards getting things done.
:)
When can we expect this? Can you give us an ETA…I will as well definitely be purchasing it as well!
Hopefully, within the next week or so. :)
@Jeffrey
(when) is it ready for release? Are you interested in an example for an “ultimate css sprite” website to use in this eBook? I have an example, that use only 12 images istead of… 160? or so. Could send it to your email adress, if it’s interesting enough for you.
Jeff, I noticed on the list of things covered you used Cufon. Is there any reason to use that over CSS3 @font-face? I’m just curious.
I think you answered it your self right there.
“css3″
@font-face while being supported by early builds of IE isn’t available on older versions of FF/Chrome
Cufon works on (almost) all browsers, perfectly.
only PDF version?
when will be available?
Great! I can’t wait to get it!
As usual, cool goods for yo’ll! I approve this:)
Sound cool….converting psd to a website can be challenging.
This should be interesting. This is a definite purchase on my shopping list! Can’t wait Jeffrey
Definitely worthy of an investment… Are Nettuts members the same as Rockable members?
Nice work Jeff, i know the most stuff but i still gona buy this book(if there’s gona be a hardcover)
Cant seem to find if there’s gona be an paper version of this book……
Wow, this is awesome, I will definitely be getting this one!
If this book is half as good as Jeffrey`s Video Tutorials this will be more than good. The Ninja on the background is Jeff!
I don’t know about you guys, but PSD to HTML is bar-none the favorite part of my job as a web designer
Okay, sometimes my observation skills are freaky. But is there a reason why the green around “net” is lighter than that around “tuts+” for the logo on the book cover. The design for the web logo (top of the page), it’s the other way round.
@ Envato’s Staff
there’s some errors in the markup, nothing serious though..
can’t wait!! When is this coming out??
The ninja does it.
Slicing is great, but then what? Will it cover turning the HTML into a dynamic site or managing your site?
That would be great Jeff! Can you really cover in your book that thing: psd -> xhtml/css -> WordPress
Three part series book ;)
This one is really for those who are just getting into conversions. But yeah, I’ve definitely thought about adding a further html -> WordPress option for the buyers at some point in the future.
Loved Photoshop to WordPress, so I’ll surely be looking into this.
Could you please give a link where I could buy this one ? Thanks :)
It’ll be available next week. :)
I waiting for a giveaway of this book on 2nd anniversary of nettuts :D
cool ;) can’t wait for take a look on another Jeffrey cool work ;)
oh my…… need this one, defenitly going to buy this one :D I’m allready used to slicing from psd to html/css but I’m sure there will be a few things I had no clue about it :D (especially IE6) and I haven’t used much of the new CSS3 features.
again nice work guys (and girls, if any) :D
No girls allowed.
oh…. really?
He he ;)
I will be getting this one!
When will be available?
Thanks
Hopefully, next week!
The plan is next week.
One question Jeffrey: Where do you get the time for all these things you do? Tutorials, author, quick tips and now a book! I take my hat off to you and your work. Keep it going ;)
Ehh – It’s not too bad. It helps when you enjoy doing it. :)
AWSOME! This is what I have been waiting for, something to learn the basic HTML and CSS, cause there are no such tuts on this site. :(
I’m pumped to read it!! Keep up the good work!
Although I’m not a Photoshop aficionado, but really congrats Jeff for the hard work you’ve done to release the book. I know writing books is no writing tutorials, and how it can be energy and time consuming to write a lot of ‘words’ in order to create a ‘book’ ;-) So really I hope that this book takes you to the next level (writing for O’reilly for example .. -just kidding-).
If I understand correctly when buying a book video is included?
holy shit cant wait for this
Like most said, i know how to convert but there must be a few things i never heard of! And it’s time to solve the bugs for ie 6 haha.
Going to buy this… with the discount ofcourse >_>..!:D
How perfect! Beautiful advice!
Can’t wait to get my hands on it
Jeffrey if this book is like all the screencasts you have done before, im pretty sure is gonna be pretty awsome. im getting one for sure your tuts are the best on the net!!!!!
This is what i want!
Can’t wait…….
Will have to get myself a copy of this
Hmm, probably be being this one.
Where can I find previous releases? Might be interested in the wordpress one i’m reading about here aswell..
Very cool. I signed up a few days ago @ rockablepress and the Personal Branding book is very insightful. I really can say that I’m a better designer because of it. Thanks, NETTUTS+. You guys rock!
Looks like a neat book.
This book sounds really interesting and although I do possess some knowledge of slicing in Photoshop it is always valuable to read and learn how others do certain techniques to improve on your own work-flow and ability to produce great looking sites.
Can’t wait for this. :D
An HTML/CSS > WordPress in depth with be really awesome! I just love the way you explain things! Worth gold!
Congrats!
Cheers!
A lot of people have been talking about a PSD to WordPress book written by Collis and Harley but I can’t get my hands on it. Could someone help ? :)
Here you go :) http://goo.gl/NYls
Thanks a lot buddy :)
So is this book out yet?
Come on Jeffrey do something we are impatient :)
I’m hearing next Monday as the publish date. :)
looking forward to this! it’s difficult to find quality tutorials on this subject matter.
Is there a way to get an email notification when the book is released? I might forget about it in a week.
Can someone tell me the meaning of “Coming Soon”? :)
You guys still havent released this? Pretty much all the hype and enjoyment for this book is completely gone for waiting so long and Im sure everyone feels the same way.
Jeffery…. in the video tutorial you use coda (great) but how did you do the beginhtml thingy?
Is it in the software or is this something you have made as a preset?