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
← Older Comments
  • http://cmstutorials.org krike

    PURCHASE !! :D woot. must have because it covers everything. I don’t see what you guys are complaining about. It does not only have an e-book but screencast and source files so it worth it’s money (only paid $23 thanks to the voucher). … I mean what’s $23, just 3 pizza’s :D

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

      Thanks! :)

  • Jeremy

    Hey,

    I’m just a student trying to learn the ropes and was wondering if I’d be able to make use of this ebook and the majority of tutorials with just adobe elements or would I need to get the normal photoshop?

    • Serge

      If you considering to learn a good deal i would strongly recommend full photoshop :P
      just wait for cs5. Still waiting for it @ work.

  • Wessel Olivier

    Hi to all,

    Love the ideas behind this eBook!! Keep up the great work Jeffrey!!

    I was hesitant to make the purchase this morning after all the discussion about the download issues relating to this eBook. I however went forward and tried the download (for me its a must have)…

    1. It is horribly slow, even just to download the 13.8MB pdf file! But it downloaded just fine!!
    2. I attempted to download the video files using Speed Download Lite. It stopped at 2.2GB… NOooo!!

    I’m from South Africa and out internet is among the most expensive in the world. It costs me roughly $10/GB on a 4mb/s line!! The file transfer stopped at 2.2, hence I’ve already paid $50 for this and still haven’t received the full download. Don’t know how much its going to cost further but this may well stop me from doing this in the future. Hope something solid can be done about this cause I think it is owed to a very dedicated educationist in the online field – Jeffrey Way!

    • Samad Yakob

      Hi Wessel,

      I am from South Africa & very keen on getting this tutorial & was wondering how much this cost you in rands? Do I need any other software other than IE to download this?

      Please advise.

  • http://www.codecrunchers.net Kevin Groenendaal | codecrunchers.net

    Thanks Jeff.

  • Niels Pilon

    Just want to thank Jeffrew for this really helpfull e-book. Just started with coding HTML and CSS myself and this book really explains it all very well for a beginner.

    Also a big thank to PSD and Net Tuts for offering so many great guides and tutorials about webdesign. Learned so many things from them, only my own creativity is the limit.

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

    Hey, everyone. Sorry I haven’t chimed in here more in the last 48 hours. Between being sick, attending the jQuery conference, and some issues on our marketplaces, I neglected this thread more than I should have.

    I’m told that the fixes should be released soon, if they haven’t been already. Follow us on Twitter, (@NETTUTS), and I’ll keep you posted.

    Once again, thanks so much to everyone who purchased.

  • http://www.mizko.net Michael

    Will be ordering this once my internet bandwidth resets lol!

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    Thanks for it

  • Alex

    Hi Jeff,

    i just purchased the book but where can I download it?
    I was on the paypal page where go now to download?
    thanks

  • b_osk_o

    Great Jeffrey!!! I will buy it this week!!!! xD

  • Gotti

    For the Mac users who can’t download the screencast;. USE SPEED DOWNLOAD 5

    It works perfect. It took me about 20 min to download everything.

  • Anouck

    For all of you that has problem with downloading the screencasts, use Orbit Downloader. When the download fails do not delete the file, Press the link again to download with Orbit and you will copy the url that appears in the new download and paste it in the previous download that failed.
    When you do that the download will resume from where it failed. You keep doing this procedure if it keep failing and on the long run you will reach 100% of download.

    Hope this will help you guys!!!

    • http://www.israblogger.com valeraz

      Anouck,
      Thank You for tip!
      For now its working, resumed where stopped.

  • http://www.hypercreativ.com D’Artagan

    I downloaded Speed download 5 and it still stops at 20.88 percent. what gives?

  • D’Artagan

    I got it. thanks for the book.

  • Shaun Dunne

    When payday comes, this book will be mine. Look forward to it.

  • mm

    Bought the book but no luck downloading the screencasts, even with Orbit Downloader it keeps failing. A little help please! Could you pls provide us with a dl link that works?

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

      Can you email support@envato.com? They’ll fix that for you. :)

  • http://www.delizade.com Burak

    hi,

    is this entry a tutorial? or an ads?

    Thank you for your useful and charming title. I liked the title because it say to me “you can learn if you click and enter”

  • Adii

    I need it

  • ektyrp

    I need it, let me know if u wanna resell it …. :)

  • http://startvshowonline.com reezluv

    nice looking product..I will consider to purchase it soon..:D

  • jmarreros

    Hi, I Bought the book yesterday, I don’t have any problem downloading the screencasts, It looks interesting, keep up the good work Jeffrey.

  • http://www.Altramax.com Dylan Opet

    I just purchased this e-book and contents about 20 minutes ago and I’m currently downloading at the moment! I can’t wait when I read this whole thing and done everything! I will come back and quote this message about this experience right now and post my experience now after I’ve read and done everything to see how great this e-book is!

    Thanks so much, I’m very confident this is worth the couple bucks!

    Best Regards,
    Dylan O

  • http://www.evisua.com Sam Mathews

    Whats the best way to get this ebook onto your iphone. I have bought it but want to read it as i travel on my iphone, but seems to big to download over email.

    Sam

    • http://www.corsicaweb.fr Eric Roux

      Hello Sam,

      I use “Air Sharing” app on my iPhone to transfer docs (PDF, JPEG, etc.) from my Mac to the iPhone.
      It works perfectly.

      Best regards,
      Eric

  • http://www.cnglobal.com.au Thush

    I cant download this ebook. Its getting timeout all the time.
    Its just a 13MB file still cant download from your servers.
    I have send an email to support@rockablepress.com.
    jeffery please look in to this.

  • Brian

    Hi Jeff,

    First, thank you for putting so much thought, time, and effort into the e-book and screen casts. It it the most comprehensive guide to coding a website I’ve seen. Honestly, I wish it had been available when I started learning!

    Thanks in large part to you, I have become very confident with my html and css skills. However, I still lack behind with Photoshop. So, I was hoping you would have devoted a little more time to slicing complex PSD designs. Even to a Photoshop amateur, it seemed pretty obvious how to slice that design.

    When I finished the material, I decided to practice on the “Elementia” theme you offered for free on Themeforest.

    Much to my satisfaction, I was able to build an almost exact replica in very little time.

    But, I continue to struggle on one part. In the file “elementia_air.psd” there is a horizontal shadow/dark gray streak that extends to the left and right at the bottom of the main picture. (on the gray background… not the drop shadow on the semi-transparent white box.)

    How would you slice this? My first instinct was to take a vertical slice from the header to below the streak and repeat it across the page. But, the streak fades at the tips.

    It looks to me that the streak itself cannot be copied. Is there a way to isolate it in Photoshop? Would I have to flatten the image, copy the shadow with the background, and then position it absolutely over the background?

    I know you are really busy. But, if you could take the time to look at it, I’d appreciate it. Thanks for your time, and once again, thanks for the great tutorials.

  • Peppe

    Finally I got this purchased…

  • Jay

    I already have a Premium Account, and I have to Pay 3mths Membership for 1 TUT?
    Am I getting this right? I thought everything was FREE for Premium Users.. :(

    I just wanted to know how large the PSD Canvas is, you should mention this in tuts.

    As Dimensions are changing so much, it would be helpful to start with the dimensions of your layouts!

    cheers

    @jaycameron

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

      Hey Jay — No. This isn’t a premium tutorial. This is a book. :)

  • Isaac

    thanks, i bought and watched the videos, your a big help , i Can design like mad now, im a PSD guy and watching all the tutorials on this site on slicing and converting to HTML/CSS im amazing now at webdevelopment.

    Thanks…

    P.S. the only thing i suck at now is jQuery, can you make a tutorial on how to make a slideshow, And ill be all set on my webdevelopment JOURNEY, thanks

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

      Thanks, Isacc!

      • http://www.nunomedia.com Nuno

        Thinking on getting the book because I already have nettus account. Can you make a tutorial how to use or deal with diferent jquey plugins without one interefere with other? ( I think is the conflict command). I have a lot of problems when I put 2 jquery plugins into the same page. Thanks. Can you also have a wordpress 3 series? Thanks.

  • Mani

    Many thanks for the book it is the best book that I ever bought.

    May question is can you let me know how to put it on my iphone.
    I have the videos on my itunes. I am using pc. but it will not sinc to iphone.

    Many thanks

    keep up the good work.

  • saeed

    Thanks Jeff

  • Todd

    Hi, is this included with nettuts premium or is it a separate purchase?

← Older Comments