<em>Photoshop to HTML: Slice Your Designs Like a Pro!</em> – The New eBook from Tuts+

Photoshop to HTML: Slice Your Designs Like a Pro! – The New eBook from Tuts+

on Apr 22nd 2010 with 45 comments

Tuts+ has just released Photoshop to HTML: 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

To get a feel for the book you can Download the Sample Pages (17 pages).

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.

Skellie is the Tuts+ Premium manager.  

Plus Premium
 
 
  • http://www.josemiguelgonzalez.com Jose Miguel González

    This is great! I was waiting the book since the day that you posted it.
    Thanks!

    - J -

  • http://lenatailor.designerteam.info Lena Tailor

    Great book. Content is good, presentation is good and above all the examples are good. I would definitely recommend this book to anyone wanting to learn more about.

  • Matt

    I picked up the book yesterday and at first glance it seems very helpful. I’ve been trying to download the screencasts and have been having trouble doing so (I realize that vids will take a long time to download, but the download has stopped on it’s own twice). Any one else have this problem?

    • Shelley

      I’m having trouble with it too. Not exactly the same problem you’re having- I was able to download it (although it took about 12hrs), but when I tried to unzip it, I got an error message: “Error: Fatal Error: cental dir signature not found” It creates a file, but there’s nothing in it. If anyone’s got a solution, please let me know.

      • artdir0

        Just purchased the book. I’m getting a DOWNLOAD ERROR too! I wonder when will this get fixed?
        Not too happy right now :(

  • Misterbremer

    I have almost zero web design understanding as far as coding goes but consider myself tech savvy and pick up new software quick. I’m interested in this book, but am wondering if I should start somewhere else first.

    I’m getting CS5 when it comes out w/ Dreamweaver. I’d like to be able to design and slice.

    Any recommendations of what I should do before I pick up this book? Is this book written in a way that I’ll be able to figure it out?

    • http://aevion.net AEVION

      I’ve designed and coded nearly 50 different websites… never once used Dreamweaver to make one.

      I’ve tried it out too, I just don’t find it that helpful. For me, it would be a waste of $400

      • misterbremer

        Well, I’m getting the package because I want flash, so Dreamweaver will just come along with that. I just didn’t know if it is better to start w/ or not.

      • http://aevion.net AEVION

        @misterbremer

        I would argue that even flash is becoming extinct. People are staring to use jQuery to do effects that used to be done only in flash like fading, and motion in websites.

        I think you could save your money by only getting Photoshop, and accomplish what Dreamweaver and Flash can do by learning to code in HTML, CSS, and jQuery.

      • Goombatz

        Aevion,
        What software do you recommend for building a website??

        I design in PSD, slice psd, and build html/css in Dreamweaver. I hand code in Dreamweaver, it has great visual aides and also auto-fill / code suggestions. It also works seamlessly with other Adobe software i.e. -Fireworks, Flash. Dreamweaver allows you to organize your files and links, perform site-wide coding changes, FTP, and even lets you create a testing server on your machine for testing code -.php, .asp, .cfm.
        Although Dreamweaver has WYSIWYG, I never use it and I don’t think any modern-day web designer/developer uses that feature anymore because that is the old way (tables and .gif spacers) of building a site.

        I’ve tried using a text editor to hand code a site but, that’s all the software was good for — coding. Dreamweaver allows you to do so much more!

        @MISTERBREMER — I recommend getting the Adobe Suite – Photoshop, Dreamweaver, Illustrator

    • flyingfox

      @misterbremer

      Which goal are you trying to accomplish? What is your foundation you are coming from?

      Are you a designer who wants to learn how to code a web user interface or are you an application developer (coder) who wants to learn web design?

      Do you want to be able to do the full package (design, interface implementation and application development)?

      If you are a coder or have coding experience, what technology are you primarily working with (PHP, ASP.NET, RoR)?

      I am asking to be able to address your question more precisely.

      • misterbremer

        Well…. I’m a teacher. I teach 35mm and digital photography and cartooning and animation. I have Photoshop skills and Photography skills. Currently, I’m laid off for next year (huge problems w/ funding in the state of Illinois) so I’m thinking of spending my summer on the computer learning web design. I’d like to start by designing my own website and possibly branch out. If I do get hired, I’d like to learn these skills so I can teach my students how to do this as well. I think an art program that combines web design is critical in the 21st century so I need to raise my skill levels.

        So… I’m coming from knowing graphics software, but not knowing the transfer process to web, or really even the basics (I’ve used Dreamweaver in the past, and I’ve used blogger for minor things, but nothing serious in web design). I guess I’d ultimately like to know the full package to make me more well rounded, I’m just a bit overwhelmed at where to start.

        Thanks for the replies. (I wish envato had a forum!)

    • flyingfox

      1 of 5

      Wow. I would love to be a good photographer. I just don’t have the time to get past amateur level, though. I have a small advertising agency located in Berlin, Germany. I have spent the last 4-5 years learning about graphic design, web design and coding.

      Here is what I would recommend:

      1. Never, ever use a WYSIWYG editor. Try to feel comfortable with the pure source code (either HTML or CSS). It’s like learning an instrument. Unless you are comfortable reading the notes you will always be limited in what you can play and you will never dig deep.

      Which editor you use is to some extent a matter of taste. In my opinion it makes sense to choose an IDE depending on the server technology you want to use later (more about that under point 4) and to use that IDE for HTML / CSS as well. Dreamweaver should be OK for the PHP universe but Aptana for example could be a great choice as well (see 4).

      • Gavin

        I agree, stay away from Dreamweaver. If you can learn how to code with notepad(+) or coda and the like, then you will be saving yourself time in the long run. Dreamweaver has so many features that will just get you bogged down.

        Learn HTML and CSS, you can do this online for free and in a shorter time than you think, if you do a little everyday. Even if you only had the summer holidays free, you could learn both of these.

        Then once you have a good understanding of these move on to jquery to add animation to your designs.

        Another great tip I was given, buy or find a free template for a site you like the look of. Then as you are learning, go through the code and find out how it is done. There is no magic, hidden methods, they are just great designers and developers who know the code inside out.

        As for Flash, only use it for non-web animations. It is a great tool for students to learn the basics of animation and then develop onto flash games etc. But if your just starting out, stay away from Flash.

        Just one more thing…. Once you have learnt HTML and CSS, that wont make you a great web designer. You have to apply it in great designs. I highly recommend looking at the marketplaces and comparing what you design with what sells. If they are of similar quality, then you are on the right track.

  • Bryan

    pure heaven for starters like me :)
    Thanks!

  • http://luisgrassitelli.blogspot.com Luis

    Hello there,
    I’m here to say that this book is a very nice composition of what designer need to know about CSS styles and Photoshop Slicing as well.

    In my point of view, the most difficult task is to see how the composition (HTML,CSS, Layout) will work together. In this e-book, people will see how stuff are working today. And these skills that Jeffrey are teaching on his book, are extremely important to build a project.
    Nice work mate, nice work!

    Sry for the english by the way.

  • http://www.modny73.com/ Cook

    incredible book….thnx for sharing

  • Childesign

    Photoshop to HTML is very easy to do :D

    • http://aevion.net AEVION

      Agreed

  • http://www.pocheco.us Sarah Nichols

    Already bought the book! Haven’t read it through yet, just glanced over it. But I’m really excited, because it looks very thorough and extensive. Thanks guys for making this!

  • http://www.webguide4u.com WebGuide4U

    Looking for something new and get it but paying a price for something that doesn’t makes a good sound

    • http://www.joshuabriley.com Joshua Briley

      Wanna give that another go? I’m not sure I understand…

  • http://www.joshuabriley.com Joshua Briley

    Excellent book. I’m a big fan of PS keyboard shortcuts. The “save for web” shortcut justified the entire cost of the book. That one will save me loads of time. Thanks a bunch.

  • michael

    Thank you so much for writing this ebook. It literally provides the information to help me with my core problem. I have the photoshop skills, but know next to nothing about web design and this ebook is helping tremendously. Awesome release! Thanks again!

  • http://www.lukeeatondesigns.blogspot.com Luke

    Awesome! I have been waiting for this book! I need this badly!

  • Dara

    Thanks! I look forward to checking this out more.

  • ikoshowa

    Bought the book :) Waiting for the looooong download of the screecasts… :D

  • Gensael

    There is an open tag on this page… thus the massive fonts!

  • 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!

    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!

  • thenewguy

    Hey guys! Just a quick question for ya:

    Seeing as i don’t have an internet connection from home yet (might be another month) and i really don’t want to miss out on this book, i’m wondering if the book will still be available? (just wanna make sure hehe)

  • said nasser

    amazing explaniation

  • Plenty

    I purchased this ebook as it looked very interesting. There definitely is a problem with the ZIP file containing the screen casts, it appears to be corrupt. I have contacted the developer and have yet to receive a resolution to my original message.

    Frustrated :(

  • http://www.buitenaardig.nl/ Phil

    Wish I wasn’t strapped for cash right now :x
    Book look’s awesome.

  • Dan Hyam

    Am tempted to buy this but seeing as £ to $ is pretty rubbish at the moment means i would be paying as much as i would be for a retail O’Reilly book from a shop.

    So think i will wait for now :(

  • http://www.leehughes.co.uk Lee Hughes

    Hi,

    I am quite interested in this book.. I need to build various landing pages for my wordpress site. I am quite poor at coding but i’m looking to learn to save myself money in the future..

    Would the final result of this product work for wordpress? If not how easy would it be to adapt this to fit wordpress?

    Thanks

  • http://tamad.net lhoylhoy

    when my screencast download reached 2.2 gb it stopped! what can we do about it jeff?!

    • moneyxl

      my one doesn’t even reach that….can u sort this out pls? I paid for this and all of a sudden you guys are ignoring all these because it’s not first page anymore? You were asking ppl to support and I did but cant get the screencast to download…first one stopped at 1.6 gig, tried again, 480mb or so,…sort it out it’s been well over a month

  • http://startvshowonline.com reezluv

    Thanks a lot, I will purchase it soon!

  • Sergio

    Do you guys offer the printed version?
    or when will be released to get it?

  • Ant

    To be honest — photoshop is not ideal for html slicing. But it’s best nowadays.

    Hope that in future there will be more specialized program, or adobe at least make Fireworsk better (it has buggy UI and very bad text tools).

  • gozdzik

    I buy this e-book 30.04 but i don’t have nothing in my e-mail to this day…… ;/

  • currybill

    I already have Coffee Cup but am worried that it might not be compatible with the ebook instructions.

    I am considering buying this book, looks like what I need however, I’ve just tried to download the Komodo editor without success – I keep getting the message that the download was interrupted and suggests that I try again.

    After four attempts I am sending this comment in the hope that this problem can be addressed.

    After noting the negative comments above from the many earlier customers I am even more concerned.

  • currybill

    Hi, I also bought the book and have failed to download the files itemized on the back page. e.g. “http://rockable-extras.s3.amazonaws.com/Project%20Files%20-%20Photoshop%20to%20HTML.zip ”
    Doesn’t work. Infuriating Yes!?? Not good value in my estimation. When will it be fixed so that I can continue coding my design?

  • currybill

    Hi, rant emailed me to say that he had successfully downloaded from the links given at the end of the book. I still cannot get them despite trying a number of browsers. I am waiting his reply to see if we can go any further. Otherwise I am sorry to say that without the source files the book is a waste of money as far as a beginner in coding as I am. Jeffrey Way hasn’t responded to an email to his web site. Needless to add I am rather disappointed at the support.

  • Colin Evans

    Sorry, must agree – a major rip-off if the source files are not available – and I keep getting the dreaded “FORBIDDEN” messge.
    $29.00 wasted. There are better books on teh market for this AND they supply the source files. How about a reply to the emails you have been sent?