Photoshop to HTML: Slice your Designs Like a Pro

Photoshop to HTML: Slice your Designs Like a Pro

on Apr 22nd 2010 with 118 comments

Hey, everyone! I have some exciting news (at least for me)! Late last year, I was asked to prepare a book and video series that covers exactly how to convert PSDs into standards-compliant HTML/CSS websites. This is what web designers do day-in and day-out. I’m proud to announce that it’s now been released by Rockable Press! So, if you’re at the point in your learning where this might be helpful, please do read on and consider checking it out.

Slice Your Designs Like a Pro!

Within its pages, Nettuts+ editor Jeffrey Way takes you through the entire process of converting a design from Photoshop into a complete HTML/CSS website. If you can create gorgeous designs in Photoshop but don’t know how to convert them into solid, functioning website, this book will teach you how. With these skills in your arsenal you can begin working as a professional web designer, or increase the money you earn for every web design gig you do.

But this is NOT just an eBook. It also comes packed with extras, like a directory of Photoshop, HTML and CSS files for you to use as you work through the book AND a series of 14 screencasts (over 4 hours of training) taking you through the whole project from beginning to end. The eBook and training were created by Jeffrey Way, a superstar in front-end development and veteran editor of Nettuts+, one of the biggest web development learning sites on the internet.

You get a 145 page eBook + Example Photoshop, HTML and CSS files + 4 hours of screencasts

What’s Covered?

This eBook is for anyone who has an elementary understanding of HTML and CSS. You should be familiar with HTML tags and the most common CSS properties. Some of the topics covered in the book are as follows:

  • 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 there’s plenty more!

Sample Pages

If you’re undecided, you can Download the Sample Pages (17 pages). But, don’t forget, it also comes with four hours of video training that covers the entire book. So you have your choice: read or watch!

About the Author

Jeffrey Way is part of the Envato team. He is the Editor of Nettuts+, a web development tutorials blog with over 50,000 daily readers, and he’s also the manager of two marketplaces for web developers: ThemeForest and CodeCanyon. He has been in the web industry for over 5 years, with expertise in HTML, CSS, PHP, JavaScript, jQuery, CodeIgniter, Database Development and WordPress.

PDF eBook, $29 – Purchase

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • conkolas

    Smells a bit of propaganda.
    But it is mine opinion.

    • http://wptricks.net WP Tricks

      propaganda to create better design? ;)

  • Morellothegreat

    Ahh yeah!!! Thanks JW

  • http://www.tacklereviewer.com Branson

    Congrats Jeffrey. I have been following your article and videos for a while, and the way you present material is great. I can’t wait to read the book…it looks to include a lot of best practices.

  • http://ds.laroouse.com esranull

    bir kez de bunları bedayava verin yav

  • http://www.slicemachine.com Zvonko

    HI!

    I want to buy the book but in Croatia, PayPal is a no, no. Can i pay thru Moneybookers and how?

    Thanks

    • http://wpcanyon.com Slobodan Kustrimovic

      Haha, same problem in Serbia. I can’t even pick up my earnings from freelancing and my blog without losing 20% on provisions :)

      Hopefuly in 10 years paypal will finally stop thinking about us as “high-risk” countries.

  • Seth

    Hey Jeffrey,

    Congrats on the release. I purchased it last night and got started right away. Everything is very well explained and easy to follow so far. I am, however, having trouble downloading the videos. It takes almost 3 hours to download and then three fourths of the way through…it fails. I’ve tried it twice now. I get some error that says it can’t finish downloading because the file can’t be read…something like that. Any suggestions?

    Seth

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      That’s no good. The videos are the best part. :) I’ll check with Naysan right now, and make sure that we get this fixed ASAP.

      • Seth

        Yea I bet…I was anxious to watch them. Thanks for the response and quick action to find a fix. I’m going to go ahead and try again in a minute

  • John

    Reading the book at the moment and just popped my head up for a breath.
    I don’t think anyone will be disappointed if they purchase it.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, John!

  • Carlos

    Jeffrey,

    Is there a way I can buy your book without a credit card? I have my pay pal account but don’t have a credit card.

    Please help me, I want to read your book.

    Thankyou

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      I’m not certain – but I believe you can connect Paypal to your debit card.

    • http://skelliewag.org Skellie

      Hey Carlos, you should be able to pay with your PayPal balance or from your bank account. PayPal only requires a credit card for subscription payments.

      • Carlos

        Yes!

        Now I can, before i had to connect my Paypal account to a credit card.

        Envato did something to the purchase options?

        Anyway Thank You!!

  • john

    It also happened to me, I reached 2.5 gig and it seemed the connection to the server was interrupted.
    So I tired resuming the download and it seems the server doesn’t allow the download to resume.
    I’m now at 1.2 gig hopefully all will go well this time.

    • john

      Whoops stopped again

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Don’t worry; we’ll get this figured out soon. :)

      • Nizar Shalabi

        This interruption happened with me too

  • http://www.fatlizardmedia.com Juan C. Rois

    Congratulations Jeff.
    Hope the book is a hit as I’m sure the content is top quality.

  • nimbus

    It should be OPEN SOURCE and FREE!!!

    Just kidding. I plan on buying this. Does the video download not work?

    Thanks again, Jeff.

  • http://twitter.com/Shaimifch Shaimifch

    Congrats Jeff!

    and good luck in the upcoming :)

  • Paulu

    This is a buy for me. You presentation is always top-notch. I’ll add this to my collection. Congrats!

    Paul

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Paul — and everyone else!!

  • Matt Geer

    I also had trouble with downloading the videos. I already commented on psdtuts and submitted a ticket. I will comment with the solution (if applicable) when I hear back.

  • Hassan

    Hey jeff. Great just asked bro for the card and purchased your Book :) Also , i saw (nothing huge) but the active state of the menu; there is a shadow/glow over it in the PSD which isn’t in the HTML version. Just wanted to point that out, would be really nice if you can tell us how to do that. Because I was always interesting in knowing how to do that. Thanks !!

    • Seth

      I noticed this too…and also curious of how it is done. I’m assuming css sprite technique.

  • wafi

    Congrats on the release. I purchased it today, everything is very well explained and really easy to follow. had no problem so far with the download.

    I thank you very much jeffrey

  • http://garota.mobi Grace

    I got it yerterday.

    I am already reading it. Does Rockable have plans about offering a epub version too? I wanted to read it at my iPad but being able to highlight too. At Air Sharing I can only bookmark :(

  • http://www.awmcreative.com Aaron

    This is not a good way for a beginner to start coding. This only hurts the web design community.

    If you don’t know the fundamentals of coding or design then you need to go out and get a book or read up online. You need to understand web standards and best practices instead of blindly splicing up things and turning them into templates.

    • http://vampa.org Alex

      I don’t know about the rest of the community, but I learned more about coding by doing stuff like this (taking apart photoshopped images and working off of that) than I did from anything else. According to the description it seems like JW covers most of the necessary fundamentals of coding.

      Getting a dictionary of the different snippets of code you should use was a great way to work before, but lets face it, changing a background from white to blue isn’t that exciting, but having something great right off the bat by slicing up an image is quite a motivation boost to keep on exploring the field.

      Anyways, Jeffrey, I’ve followed this website since it was still nettuts.com in the beginning, and learned everything I know now from here, which has been enough for me to earn some cash. You’re vids have always been awesome, and I’m sure this book will do you justice.

      Alex

  • http://rockablepress.com/ Naysan

    Hi everyone!

    It’s Naysan here from Rockable Press.
    Just wanted to say a big thank you to everyone for supporting Jeffrey’s book!

    It’s truly a great book and he deserves all the credit he’s getting! Someone mentioned on one of the posts that the Ninja on the cover is Jeffrey – it’s true! Writing a book is a huge task, and his book is so solid and thorough – we still don’t know where he finds the time!

    As for any download issues, it’s true, the file for the screencast is huge (2.7GB), but we’re using Amazon’s S3 server, so it’s pretty good, but next time I think we’ll have to definitely split them up.

    If anyone’s unsure about whether this book is for them, don’t forget that you can download the first 17 pages of the book from the books product page (http://rockablepress.com/books/photoshop-to-html/), and on page 7 and 8, he clearly explains what the reader should know before getting into the book.

    Thanks again everyone for the support!

    • Seth

      Is there any updates on the download of the screencast file? It is still failing in the middle and we CAN’T download it.

      • http://www.fl3x.be Remmelt

        Indeed, have the same problem, download stops right in the middle. Is there any way, that buyers get a different link mailed to their account. Even say as per a rapidshare or dropbox quicklink?

  • mg

    Jeffery,

    Congrats on the book. I just purchased it and look forward to going over the material. I was unable to actually complete the download of the screen casts because it was taking way to long (2 hours to complete the download) and I am on a pretty fast connection. Would it be possible to break the files up into smaller downloads so that you can access them when you need them instead of downloading them all at once.

    Thanks,

    MG

  • http://pollyfolio.com/ Polly

    Congrats on the new book, Jeffrey! I got myself a copy yesterday and it’s everything I wanted to see and more. I sound like I’m selling the damn thing, but that’s just how much I love it! Thanks and I’ll be waiting for the next one :)

  • al_m473

    plan on purchasing this package.

    sure hope that this does not mark the end of free tutorials on Net Tuts for PSD to HTML/CSS conversions though.

    Al

  • Nizar Shalabi

    Congrats,
    Thanks a lot jeffery this is a great and will help me to sliced the designs into xhtml perfectly i am glad that i have purchased the book and videos.

    keep it up.

  • http://twitter.com/KGTheNerd Karthik

    Master thank you came in just right time i was struggling to slice my own psd from 1 week :)

  • notta

    The link I received is dead. I imagine the distro server is down atm? I’ll try again later.

  • http://www.apoorvvaidya.com Apoorv

    Looking forward to getting this!

    Are there any plans to release a paper copy of the book? I prefer those to eBooks.

  • John

    I just reached 97% of the download and It stopped. :(

    • John

      Has anyone completed the download

  • http://www.twitter.com/shakingtree Niels Schuddeboom

    Just submitted a ticket since the distro link to the ebook and files doesn’t load over here. :)

    • notta

      I get the same thing. How did you create a ticket? I thought it was a temporary thing last night, but I checked first thing this morning and the link is still dead.

  • http://www.furtuna.ro ADrian

    I bet its top notch quality. Sadly I can not afford to pay 30$ for an ebook. You guys planning to release a paper version?

    Thx

  • Akshay Aurora

    Any plan to have a Giveaway.Would luv to read this book and watch the Screencasts.

  • http://madebyross.com ross

    Hi Jeffrey,

    congrats for the book, i just have a simple question, is the content of the book/screencasts different from the Nettuts+ Premium content?

    cheers,

  • http://youhack.me Hyder

    yaay . i have just bought it . I will write a review after viewing it . (It might take some weeks! I’m not free :) )

  • http://www.fl3x.be Remmelt

    If we cannot get the files appending to the book, do we have to file a ticket or will there be a re-release in different filesizes?

    Congratz on the book though, i’m halfway through and it’s really good!

  • Marcin

    Hi there,

    I hope that book will turn out to be great, as most of the articles by Jeff are. However, I am also experiencing issues with the download – it stopped suddenly after 2.3 GB.

  • http://www.jordanwalker.net Jordan Walker

    Looking into this book.

  • http://twitter.com/nickplekhanov Nick P.

    Hi Jeffrey,

    congrats for the book

    i have just bought it but let me note that the download link is not working. I asked rockable support team for another one, but she is not working too: Address not found:

    You tried to access the address http://distro.rockablepress.com/download/****/*************, which is currently unavailable. Please make sure that the Web address (URL) is correctly spelt and punctuated, then try reloading the page.
    ;(

    What is it ? How it can be fixed ? Maybe alternative download ways ? How can help me ?

    I want to get my copy and read/watch it.

    Cheers,
    Nick P.

  • stefan

    I can’t download the video, any ideas on how to do this?
    I have the pdf and the back of the book contains, the links to the psd’s but the other one doesn’t work :(

    Wouldn’t it be easier to add the locations to the email reciept then its an easy matter of downloading the resources?

    • stefan

      Figured it out ie8 was smushing all the links together into a terrible mess.

  • Marcin

    Well, you really need to figure out this download issue. I can’t download the file to my computer, so I thought I would try to wget it from one of the two dedicated servers that I am managing.

    Well, I am sad to report that both attempts failed – in both cases I was disconnected from the server after a certain percentage of the file was downloaded.

    If you don’t fix this, I think you will have a lot of refund requests.

    To make things even worse, the downloads cannot be resumed – you just get error 403 – access forbidden. It really is annoying to wait for the file, have it 70 or 80% ready, and then redownload it again, and again, and again.

  • notta

    This is getting ridiculous At least say something why the download links are not working. I feel like Herman Munster when he bought the car from Fair Deal Dan. Spent the money, but the link is dead and not getting any responses. Very shotty business handling in my opinion.

  • Matt

    I don’t do Photoshop much but I imagine I’ll be able to translate much of this to Fireworks and still benefit from the non graphic design / developer parts. I just find FW to be a better prototyping tool “for me”. With FW CS5 now supporting near complete editing of PSD / AI files, I hope to be spending even less time in PS.

    One reason I’ll be buying this book is because I respect your work Jeff and know that’ll be be first rate job. I’ve also already expressed my desire before to support tuts+ efforts. Though, as I’ve said until a subscription access alternative to paypal is offered…it won’t be happening. You’ve probably heard the saying, “The squeaky wheel, gets the grease.”

    For the time being, I’m content to show my support by continuing to shop at the Envato marketplaces and buying this book. Keep up the awesome work!

  • Gareth Segree

    I’d like to know why everyone uses Photoshop and not Illustrator or Expression Design.
    I have Expression Design & Web and cannot afford Photoshop.
    Coul you guys do a tutorial on how to prototype and design a site using Expression Design and Web!!

    Thanks.

  • Pat

    Is there anyway to get a hard copy?

  • August

    Again congrats Jeffrey! for the Book i have it now but, I can’t download the screencast or the psd from the link????!!! Not good. :’(

  • John

    I managed to extract some of the videos from an unfinished download and they are well worth waiting for
    so hang in there.
    I’m sure Jeffrey is doing all he can to sort this.

  • Seth

    Guys, just be patient. I’m sure they are busy getting things in order for a solid fix for the download. Although it may be frustrating for some of us, it certainly isn’t Jeffrey’s fault, so let’s not put a damper on his release and accomplishment. Things like this happen :)

  • John

    I’ve just finished downloading the videos
    looks like things are working :)

    • Seth

      Hmm…that’s weird. Not working for me :(

      • Carlos

        Me neither.

        Still can’t watch the screencast :(

  • http://envato.com Vahid Taeed

    Morning everyone (Australia time). We’re very sorry that there has been a problem with the video links failing and are investigating the cause the problem.

  • http://twitter.com/collis Collis Ta’eed
    Staff

    Hi folks, sorry about the download issues for those screencasts, the files are enormous so it’s been causing some problems for some buyers. We’re looking at breaking the file into pieces and recoding the system to give you a set of download links, but it’ll be a few days before that can be deployed as it’s the weekend here and it’s a bit of a big job.

    In the meantime our on-call developer John is working with support to find a way to let Download Manager’s work with the download a bit better.

    If you contact support (http://support.envato.com) one of the support guys can walk you through the problem, or offer a refund if you don’t have the time to mess about with download managers.

    Thanks for your patience guys!!!

    • notta

      Any chance we can at least get the book? I can hold off on the video, but I can’t even get the book. It’s the weekend and I would love to read it.

    • Carlos

      Maybe you could setup a private bitorrent tracker and everything will be fixed in half an hour, for bittorrent file size is a no worrie.

      Just an Idea

    • MG

      Collis,

      Thanks for chiming in. I think that people just want to know that they have been heard and something is in the works. I for one appreciate the fact that you are letting us know what the issue is and that you guys will have something worked out in a few days. I will check back on this thread next week and look for an update.

      Thanks again.

      Keep up the good work.

      • http://www.twitter.com/shakingtree Niels Schuddeboom

        Still no working distro link here. As requested 10+ hours ago I forwarded the link + transaction ID to a support rep. this morning. (Dutch time). So, no ebook or vids for me. I hope issues will be resolved soon!

  • tgroff

    I have to disagree with the positive feedback on this e-book. I love all things Envato, and most everything Jeffery posts, but this is not a good e-book for the money in my opinion. If you have read other PSD slice tutorials on the web then you already know more than this book will teach you. If you are a beginner I don’t think these are the best practices to start with, if you’ve been slicing for a while with your own techniques this book won’t teach you anything new.

    Specifically, the author uses the “Copy > New document > Paste > Save for web” option, you will not learn to slice with the Photoshop Slice tool in this book. Everyone has their own way of doing things, but I think the Slicing method should have been demonstrated on at least on one page in the e-book.

    Lastly, the demo navigation glow doesn’t work, and how to create it isn’t covered in the e-book, which honestly would have been the most interesting part of the e-book. I could pick other nits, but I’ll just leave it at “I didn’t like the book”, and it didn’t contain $20+ worth of material for me. Your money would be better spend for a quarterly subscription to the Tuts+ Premium content in my opinion.

    • http://net.tutsplus.com Jeffrey Way

      Of course you’re entitled to your own opinion, and I’m sorry you didn’t enjoy it. You’re free to request a refund. Though, I’d love to have some examples of what you feel aren’t best practices. In reference to slicing vs. the “Save for Web” pattern, I do note that most people fall into one group or the other. However, personally, I can slice a design with my method very…very quickly. But sure, the slice tool works well too. :)

    • http://nathanhangen.com/blog Nathan Hangen – Digital Emperor

      I think you feel this way because you’re beyond the skill level of this book, not because of the methods inside.

      I know very little about css, decent html, and very little PSD.

      This was one of the best guides I’ve read, and I’ve read many.

      Will I be able to sell premium web designs after reading this? No, but at least now I understand how this works. I learned a lot, and I can’t wait to do some playing with it.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Thanks, Nathan! Exactly.

  • John

    The way that worked for me was to use orbit downloader. ( http://www.orbitdownloader.com/ )
    When you click the link on the pdf a blank page in chrome opens and at the top it says orbit downloader
    is taking over the download, leave the chrome page open until the download is finished.
    The good thing about orbit downloader is if you only manage 80% of the download you can still extract it.
    ( not to confuse I’m not the on-call developer John )

Newer Comments →