The Best PSD to HTML to WordPress Video Series Available

The Best PSD to HTML to WordPress Video Series Available – New Plus Tutorial

Apr 15th in News by Jeffrey Way

Since I began running Nettuts+ nearly a year ago, the number one tutorial request I've received is for a PSD to WordPress screencast. Today, we're releasing a complete series on our Plus site. Over the course of fourteen videos, I will personally teach you how to take a PSD design and convert first to HTML, and then to a dynamic WordPress site. This was a massive undertaking; I hope you'll consider signing up if it interests you.

PG

Author: Jeffrey Way

Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. During my free time, I sporadically write articles for my own personal blog. If it will keep you in the good graces of the church, follow us on Twitter.

Our Goal

Take a somewhat simple blog design and turn it from a PSD into a dynamic WordPress website.

Finished Project

Lesson Overview

  1. Intro - (3:53)
  2. Slicing the PSD - (16:32)
  3. Coding the HTML - (3:53)
  4. The CSS - (55:52)
  5. Installing WordPress / Working on the Server - (24:57)
  6. WordPress Header - (9:17)
  7. From Static to Dynamic - (12:04)
  8. Search / Sidebar - - (8:53)
  9. Sidebar Widgets - (9:47)
  10. Revising the CSS - (37:21)
  11. Single Page Template - (4:44)
  12. Comments - (10:26)
  13. The Page Template - (5:15)
  14. Finishing Up - (16:54)

Is This Series For Me?

If you can answer yes to any of the following, this series should help a great deal.

  • I have zero experience with WordPress, but have some PHP knowledge.
  • I have some CSS and HTML knowledge, but still struggle when converting a PSD
  • I've never sliced a PSD before.
  • I've used WordPress, but have never created a theme for it.
  • My CSS skills are rusty.

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called "TUTSPLUS". For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you'll learn from some of the best minds in the business. Join today!

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    Sirwan April 15th

    big sector to get into if your looking to make lots of money.

    this looks good to read.

    thanks tuts+ team.

    ( Reply )
  2. PG

    iPad April 15th

    OMG!! This is my favorite! Downloading

    ( Reply )
  3. PG

    Kyle April 15th

    Looks like fun! I am going to check it out in a bit.

    ( Reply )
  4. PG

    Philo April 15th

    Looks like a great tutorial! :) Will watch it soon!
    Thanks, Jeffrey

    ( Reply )
  5. PG

    iPad April 15th

    711MB ??? This is amazing!!!

    ( Reply )
    1. PG

      Jeffrey Way April 15th

      I know – I’m sorry! That was the smallest I could get the file size, without sacrificing quality. I’m going to work on it more tonight though. I hope it’s worth it.

      ( Reply )
      1. PG

        iPad April 15th

        Don’t worry Jeffrey, I mean, for me isn’t a problem this tutorial worth it, this is a 100% Quality Tut! I’ve downloaded in about 30Minutes with 1 MB/S connection, maybe you can put two links (1. HQ, 2. LQ) for those people who prefer the low quality because of the space, but I personaly think that this size is fine considering the 14 HQ Videos!

      2. PG

        Luke April 17th

        Yeah Jeffrey, these are amazing tutorials, the best I have found on the web :)

      3. PG

        kiziel April 17th

        I downloaded it also (~400kb/s for me). Tutorials are awesome and looong ;)

      4. PG

        davidzw April 22nd

        i signed up as soon as i realised the quality being served up here.
        Luckily the whole thing download in about 2 mins on my 20 meg connection! :)
        When i play it however (in preview or quicktime player) the sound seems a bit garbled and cuts out after a few seconds…
        is there something i should run or read on how to run it. Being a newbie to this site an all.

  6. PG

    Jay April 15th

    Omg! I’m so glad that I’m plus member :P

    Thanks

    ( Reply )
  7. PG

    Brenelz April 15th

    Download right now…. Thanks once again Jeffery

    ( Reply )
  8. PG

    Rachel April 15th

    Looks amazing, really been looking forward to this after following you on twitter and hearing about it so much! Going to be really useful to me as the tutorials I normally went through for this were complicated, unhelpful and not user-friendly. However, NetTuts Plus is definitely one of the best resources for learning and have an excellent standard for their tutorials…so this, I have no doubt, will be brilliant.

    ( Reply )
  9. PG

    till April 15th

    Hey Jeffrey,

    i’ve followed you on your jquery screencast and half of your php-screencast;)
    I was asking myself, if i can still watch this tuts+ video series when my tuts+ account (i am going to create one soon) is not active anymore?

    thanks for your answer.
    till.

    ( Reply )
    1. PG

      Jeffrey Way April 15th

      You’ll be able to download this series. So even if your account expires, you’ll still have the download. :)

      ( Reply )
  10. PG

    Jen April 15th

    Oh if only i was not on Satelite internet I would download this straight away, but instead I will have to wait until I can hitch a ride on someone elses Broadband.

    Living in the middle of nowhere has its pitfulls. Lack of broadband being one of them. But the large quantities of sheep almost make up for it.

    It sounds fab though! Thanks!

    ( Reply )
  11. PG

    Keegen April 15th

    This will go along great with the themeforrest screencasts!!

    ( Reply )
  12. PG

    Nic Luciano April 15th

    Great post- but I can’t wait for some more attention to be drawn to Thesis. I bought, learned, and rolled out a Thesis theme exact to my PSD specs in under 5 hours. It was really awesome- though I only imagine it’s beneficial time wise to people with a really strong grasp of CSS. Maybe some tutorials on hooks and functions sometime soon? :)

    ( Reply )
  13. PG

    James Black April 15th

    ah cool. I do this pretty much every day at work!!.. All our websites are wordpress based. Do you cover browser testing?.. thats always a fun part.. haha.

    ( Reply )
  14. PG

    Sanne Terpstra April 15th

    It looked great, until I saw the screencasts..

    The video is good, but the sound is crappyyy!

    I see everything on the video, but you voice/audio just falls away..

    I here “hello.. my.. is… Wayne.. Today.. talking.. about..” end then I hear nothing any more, but the video is still playing.

    Or the videofiles are bad, or my iMac is going crazy. I’m using Quicktime 7.6

    Somebody has this too?

    ( Reply )
    1. PG

      Jeffrey Way April 15th

      I just downloaded the files and checked on my computer. Everything sounds perfectly normal. I’m guessing that your computer might be slow. Try download the VLC media player. It’s the best one I’ve found. Let us know if that’s fixed it.

      ( Reply )
      1. PG

        Sanne Terpstra April 16th

        Well my computer isn’t slow at all (iMac 2.0Ghz 2GB RAM).

        But with VLC player it plays perfectly indeed :)

        Thanks for the awesome screencast series Jeffrey!

    2. PG

      iPad April 15th

      I’m having the same problem with Quicktime in Windows Vista Jeffrey, I’ve downloaded VLC Media Player and all goes just fine, but in Quicktime doesn’t work correctly

      ( Reply )
    3. PG

      Bryan April 15th

      Same sound issue here using QT 7.6. Sound is garbled with popping, as though it has compression issue. However video appears to be normal.

      Opened in VLC. Playback audio & video in sync and smooth.

      VLC gets extra cake at dessert.

      Thank you for your work Jeffery Way. You should request extra cake for dessert too.

      ( Reply )
      1. PG

        Jeffrey Way April 15th

        Sorry everyone. It turns out that the codec that Camtasia uses isn’t available on most computers. As Bryan said, download the VLC player. It’s fantastic, free, and should be on your computer anyways. :)

        I’ll fix the codec issue tonight. Sorry everyone. I’ll take two lashings tonight.

      2. PG

        iPad April 15th

        It wasn’t Bryan, it was me… I’ve mentioned the VLC player

    4. PG

      mary April 15th

      Same sound issues here, will try VLC! Great work Jeff!!

      ( Reply )
    5. PG

      Luke April 17th

      Works great on VLC but not on Quicktime for me. (I use windows) .

      ( Reply )
    6. PG

      Joel Glovier June 25th

      I have had issues with Quicktime streaming Lynda.com videos. The same thing – the sound disappears. Also the controls don’t show up if you’re watching from a QT browser pluggin.

      I was able to get around the sound issue by simple keeping my mouse inside the QT video window. Sounds strange, I know, but when I move the mouse outside the QT/Browser window, the sound starts to but in and out.

      I’m on a Vista 64 bit PC, and I found out part of the issue is with Quicktime in a 64 bit environment.

      Just FYI.

      ( Reply )
  15. PG

    Alex April 15th

    Best post till now. Man…

    ( Reply )
  16. PG

    Pete April 15th

    Sounds awesome. Thanks Jeffrey!

    ( Reply )
  17. PG

    Hassan April 15th

    Hey jeff! I wanted to ask you that how can i check how many days left for my account. I signed up for 1 month and does not show any where that how many days left?

    ( Reply )
  18. PG

    David April 15th

    I download the files looks great but something is wrong with the audio…is anybody having the same problem?

    ( Reply )
  19. PG

    Hassan April 15th

    Jeff, Why is your site down? Are you working on the design or something?

    ( Reply )
    1. PG

      Luke April 17th

      Jeff doesn’t have the time to keep his site up as well as work for Tuts+ and the other blog he works on.

      So, he uses his site for his tutorial only.

      ( Reply )
  20. PG

    Berlin April 15th

    A mi parecer ya era hora de que alguien hiciera algo., pero que lo hiciera como debe de ser. Muchas Gracias.

    xD

    ( Reply )
  21. PG

    Spartacus April 15th

    I signed up to the Plus program today for this video series and I’ve downloaded it twice and the sound for the video files is constantly breaking up in the videos.

    Is anyone else having this problem?

    ( Reply )
  22. PG

    Spartacus April 15th

    Every video is affected and they’re un-watchable as the sound is totally screwed up.

    ( Reply )
    1. PG

      Skellie April 15th

      A few readers have reported this problem in Quicktime, but apparently it works fine in VLC Media Player (free and *awesome* software)

      ( Reply )
      1. PG

        Jeffrey Way April 15th

        Hey Spartacus – I’m thinking it’s the codec that was used. I’ll fix them and reupload.

      2. PG

        Spartacus April 15th

        Hi there,

        That works thanks. That’s a cool media player too.

        Cheers,

        Spartacus

    2. PG

      Jeffrey Way April 15th

      Yeah – it’s a really nice media player. It’ll play just about any file format too!

      ( Reply )
  23. PG

    namelessfaceless April 15th

    How about a “buy now” option for individual tutorials. I’d gladly pay $9 for this tutorial, but I don’t want to sign up for a monthly subscription. Even if I can ditch the subscription whenever I want, I still don’t like doing that.

    I just want to pay-per-tut!

    Any chance of this happening??

    Cheers

    ( Reply )
    1. PG

      Luke April 17th

      Thats a good idea but think of it this way, pay $9 for one tut, or $9 for every tut on all the Tuts+ sites.

      ( Reply )
      1. PG

        Taylor Satula April 19th

        I’ll drink to that

  24. PG

    henry April 15th

    just use vlc or download CCCP Codec Pack and use media player classic which is my favorite along with vlc. This has to be the main reason why today i finally joined tuts+ thanks for this and hopefully Jeff you can make a PHP and jQuery one like this awesome!

    ( Reply )
  25. PG

    Caesar April 15th

    Looks great. Thanks Jeff!

    ( Reply )
  26. PG

    Eddie April 15th

    Is this for WordPress 2.7? If so, I will definitely consider joining tuts+ for this!

    ( Reply )
    1. PG

      Jeffrey Way April 15th

      Yes it is.

      ( Reply )
  27. PG

    Muhammad Adnan April 15th

    Good Step !

    ( Reply )
  28. PG

    kevin April 15th

    this is the best, thanks for this, I will check out when I buy myself a premium.Indeed most request tutorials like all over the web.

    ( Reply )
  29. PG

    Piyush April 15th

    This is pure awesomeness…. hats off to you jaffrey… joining Nettuts+ now.. will be downloading later today..
    m sure you would see a rapid increase in plus members after this screencast.. buddy u simply ROCK..!!! keep up the good work going..

    ( Reply )
  30. PG

    henry April 15th

    Hey Jeff, Im watching the screencast right now have to say i have already learned something! The way you slice is pretty neat and precise I was thinking you can even make an PS action to make it even faster!

    ( Reply )
    1. PG

      Jeffrey Way April 15th

      Definitely! Many people prefer the slice tool, but I’ve found that the method demonstrated in the videos is much quicker for me. Plus, you get to the point where you can do it lightning fast.

      ( Reply )
      1. PG

        mary April 16th

        Yeah, learning this slicing method was a great hurrah for me! Wish you’d included the psd though!

    2. PG

      Joel Glovier June 25th

      Hey I have been using another method that works really well. If you have a layer in a document, you can “Create a Smart Object from Layer,” then when you open the smart object, the Smart Object document will automatically be sized to the dimensions of the content. This is great also for layers that have layer styles applied, as it will crop right up the edge of your drop shadow, etc. I even created a keyboard shortcut for it b/c I use it so much.

      ( Reply )
  31. PG

    Josh April 15th

    Hi there,
    I’m really interested in your tutorial “The Best PSD to HTML to WordPress Video Series Available – New Plus Tutorial”

    How much should i pay for just that tutorial.

    thanks

    ( Reply )
  32. PG

    Matt April 15th

    Downloading now, though I have learned a lot about wordpress on my own(theme options, widgets, etc). I’m sure I’ll learn quite a bit from this. Tuts+ = best thing ever!

    ( Reply )
  33. PG

    Norwitz April 15th

    Insteresting and helpful lessons. I want to make my own World Press blog. Good to study this.
    Some screencasting tool like DemoCreator would be great for make video tutorials like this.

    ( Reply )
  34. PG

    Bryan Kwon April 15th

    Simply Amazing!! : o
    well, I am not a member yet(but looks fantastic),, I have been waiting for more quality tuts to come and I am convinced that I can get a lot out of this tutsplus.

    ( Reply )
  35. PG

    MC April 15th

    The layout of the comments on this site is the best I have ever seen

    ( Reply )
  36. PG

    Hassan April 15th

    Jeff, It would have been a better idea if you were to include a PSD as well… I have trouble designing stuff.. any idea on how i can design site templates better?

    ( Reply )
    1. PG

      Oliver April 16th

      Jeff,is the PSD file included ? I want to join and this is important for me.

      ( Reply )
      1. PG

        Luke April 17th

        No its not (unfortunately) but you can sort of make a mockup in photoshop of it.

      2. PG

        Jeffrey Way April 17th

        I’ll be adding a PSD link. I didn’t realize that everyone would want it. I’m more than happy to include it. Check for the file on the TUTSPLUS site later today.

  37. PG

    lawrence77 April 16th

    wow! :o

    ( Reply )
  38. PG

    imsraaia April 16th

    awesome..

    ( Reply )
  39. PG

    Hamza Oza April 16th

    Is the entire thing finished or are you going to release on a weekly basis.

    ( Reply )
    1. PG

      mary April 16th

      It’s complete! purely amazing!

      ( Reply )
  40. PG

    Rik Girbes April 16th

    OMG WOW GREAT THANKS!!!! (thats all i can say) :)

    ( Reply )
  41. PG

    Kuldar Kalvik April 16th

    You guys are taking online tutorials to a whole new level!

    ( Reply )
  42. PG

    Nina Morena April 16th

    I tried one from css-tricks.com about a year ago and it got me started. I’m in the process of redesigning my podcasting site so this is a perfect weekend project and refresher’s course.

    The subscription has been worth it with all of the tutorials from all of the tuts sites.

    ( Reply )
  43. PG

    Dan April 16th

    I think you just made me a tuts+ member, Jeffrey. As much as I’d love to go at this on my own, having this video series as a backup seems like a good idea

    ( Reply )
    1. PG

      Jeffrey Way April 16th

      Thanks Dan! Glad to hear it.

      ( Reply )
      1. PG

        iPad April 17th

        Hey Jeffrey we have to redownload all the files to get the PSD? My plus account expires today and I really want the PSD for practice.- Thanks

      2. PG

        Jeffrey Way April 19th

        iPad, No – there is a separate link on the TUTSPLUS site for just the PSD.

  44. PG

    john Dangerous April 16th

    I’m def going to reup on my membership for this.

    ( Reply )
  45. PG

    DailyDesigns April 16th

    I really need to get some money so I can join tuts+, this tutorial looks amazing..

    ( Reply )
  46. PG

    barry April 16th

    You guys should really have a “Pay Per Tut” function. Like $0.99 a Tut. That would be awesome.

    Also, I don’t have an PHP knowledge. Would this tutorial be over my head?

    Thanks for the great work.

    ( Reply )
  47. PG

    Matt P April 16th

    Thanks Jeffery, Not watched this series yet, but have it downloaded and ready to rock.

    This was the final straw which got me to signup for the plus account. Loving all the series currently going on with you and Drew.

    Now this mammoth screencast is done will you be back to “Diving into PHP”?

    ( Reply )
  48. PG

    barry April 16th

    Hey, PMS?

    PERFECT name, according to your message…

    ( Reply )
  49. PG

    Benjamin Reid April 16th

    Wow! Looks great!

    ( Reply )
  50. PG

    chrisberthe April 16th

    Thanks Jeff. Been thinking of getting a tut+ membership for a few weeks now. Sold :)

    ( Reply )
    1. PG

      Jeffrey Way April 16th

      Thank you! I hope you enjoy it. :)

      ( Reply )
  51. PG

    Lufutu April 16th

    Oh my Wordpress ! i wish have a plus account :( !

    ( Reply )
  52. PG

    fark April 16th

    This is great! I cant decide if I should go with joomla or wordpress to create client sites. I want to create the design but leave it to the client to add / edit info. Help anyone?

    ( Reply )
  53. PG

    mary April 16th

    I stayed up most of the night and watched parts 1 to 8. Purely amazing. Can’t wait to finish watching the whole thing. I think this tuts+ account was more than well worth the pizza I missed to buy it… lol

    ( Reply )
  54. PG

    Barry April 16th

    F*ck it. I’m getting a damn Tuts account…

    ( Reply )
  55. PG

    Barry April 16th

    Eh, I’m a member now. :)

    ( Reply )
  56. PG

    konsehal_14 April 17th

    I have a problem downloading the file, please advise.

    The file source is damage..

    ( Reply )
  57. PG

    Scott April 17th

    I’ve been planning on joining plus for a while and this got me to finally do it. Thank you for this, I haven’t got to the Wordpress part yet but so far this is great.

    ( Reply )
    1. PG

      Jeffrey Way April 17th

      Thanks, Scott!

      ( Reply )
  58. PG

    Daniel April 17th

    hey im new at tutplus and i got plus account and i love it. =P
    great tutorial.

    ( Reply )
  59. PG

    IBF- April 17th

    Ive been looking for something like this for the longest time!

    YOU GUYS ROCK!!!

    ( Reply )
  60. PG

    Chaitanya VRK April 18th

    This itself worth my subscription amount!! Thanks for the great resource.

    ( Reply )
  61. PG

    Kenny April 18th

    I’ve been looking for a good tutorial about this for months now! I’m so glad I’m a plus member!!

    Jeffery, your tutorials are amazing.

    ( Reply )
  62. PG

    oliver_l1 April 18th

    Unfortunately i can’t join tutsplus because it’s not barrier-free.

    I have PayPal but it seems that you can’t access this service without a credit card.Not everybody has a credit card.PayPal has more options available.For example payments with direct debit.Hope that you change this really quick.

    I WANT TO JOIN:-) !!!

    ( Reply )
  63. PG

    Arnor Bogason April 18th

    This is a great screencast! I would have paid $9 or even more for this one. A subscription to tutsplus is definitively worth it.
    I’ve been looking into making my own theme for some time now, but never really gotten the hang of it, been really intimidated by the template tags and the loop! But Jeff makes it so easy and understandable and logical that I’m getting very confident in making a theme from scratch. Kudos to Jeff!

    ( Reply )
  64. PG

    nilsdenon April 18th

    Hello Everyone,

    I too agree with your comments and find this tutorial awsome, but let me allow just one critique: I downloaded the +700MB which was okay for me, but as I just started to follow part 2 “slicing the psd” I was a bit confused not to find the psd file to just slice the thing myself. At first I thought I was mistaken but then I checked twice and found there was simply no psd file provided. Of course you can just take the graphics alredy sliced but this really frustrated me…

    ( Reply )
    1. PG

      Jeffrey Way April 19th

      You’re right. That’s why I’ve updated the TUTSPLUS site with a separate download for the PSD. :)

      ( Reply )
      1. PG

        nilsdenon April 19th

        Great thank you very much!

  65. PG

    Smuliii April 18th

    My subscription has ended but because that was absolutely fantastic I’m probably going to spend $22 and buy Quarterly and wait for more videos. Thanks for making these videos, these are very helpfull.

    ( Reply )
  66. PG

    Yaseen April 18th

    I downloaded and it stopped at around 85% trying it again.
    Hope it works this time, just posting this comment to let you know.
    I’m not sure what the problem was though.
    The series sounds like it will be excellent though. :-)

    ( Reply )
  67. PG

    Kenneth Jaysone Francis April 18th

    Hi Jeff, is it possible for you to put links to individual videos that plus members can download from the members area. I’ve extracted the file but i don’t have the last video: Finishing Up – (16:54)

    Thank you for the great tutorials.

    ( Reply )
  68. PG

    Randy April 18th

    Just finished watching. Fantastic job! A little quick toward the end, but very informative. I am moving on to the “beginning to master” series now. I am happy I joined and giving up the “pizza” has made me feel healthier already.

    To others: Take a look at craigslist some day, Wordpress developers are in BIG demand. $9 is hardly a sacrifice for the skills you’ll learn just in this series.

    Nettuts+ membership is like re-enrolling in college for $9 (without the dorms and bongs).

    ( Reply )
    1. PG

      mary April 25th

      Spot on!!

      ( Reply )
  69. PG

    Daniel April 19th

    hey Jeffrey
    can you upload the psd for the plus members?
    and if no, what the size of the psd?

    ( Reply )
    1. PG

      Kenneth Jaysone Francis April 19th

      Hi Daniel, the PSD file is actually uploaded in the members area, you can find a link to download it right above where they recommend you to use the VLC media player.

      ( Reply )
      1. PG

        Daniel April 19th

        oh tnx i didnt see that.

  70. PG

    ilker April 19th

    Greate tut thanks

    ( Reply )
  71. PG

    Kenneth Jaysone Francis April 19th

    Thank you for the 3 part download

    ( Reply )
  72. PG

    Tom Cameron April 19th

    Just want to say you’ve got me convinced for at least a month by releasing this! If the other content is anywhere near this standard I’m sure I’ll be staying a Tuts+ member too!

    ( Reply )
  73. PG

    Kenny April 19th

    Just finished going through all the videos.

    I just wanted to say that this tutorial is amazing, and if you don’t already have a plus membership, this tutorial alone is worth the price.

    I’ve been searching the internet for a few months now trying to find out how to convert my static HTML site into a dynamic wordpress theme. There are many tutorials out there, but none of them helped me a bit.

    In this tutorial Jeff explained to me well, how everything works, what to do, and why to it that way. I went into the tutorial knowing nothing about wordpress, and came out feeling like a had a good foundation with it.

    This Plus membership never seizes to amaze me.
    Thanks and keep up the good work guys.

    ( Reply )
    1. PG

      Jeffrey Way April 19th

      Hey Kenny,

      I’m really happy to hear that you enjoyed it. :)

      ( Reply )
  74. PG

    Ray Ray April 19th

    This is going to make me a money making machine in the near future.

    ( Reply )
  75. PG

    Taylor Satula April 19th

    Hey jeff you should have a big link up at the top that says works best with VLC media player. Reminds me of the “works best in IE” days

    ( Reply )
  76. PG

    leksa April 19th

    da*m!
    Its mean, ..I need to get TUT+ .

    Look everyone satisfied here…

    ( Reply )
  77. PG

    Wisam April 20th

    Hey JW,

    Awesome tutorial so far, I just finished part one. I noticed something that might make your unique “slicing” method even quicker – instead of having to toggle off the background layer (to make the image background transparent) for each new file, when you create a new file you set the “background contents” as transparent within the new file dialog.

    Wisam

    ( Reply )
    1. PG

      Jeffrey Way April 20th

      Great point; very true.

      ( Reply )
  78. PG

    ant April 20th

    Hi Jeff

    Not a Tut+ member yet, seriously considering it. Just want to double check, can we download the screencasts to view on our machines whenever we want. The reason I ask we in the third world (South Africa) unfortunately only have capped ADSL, and am currently only on a 5GB limit per month and have to pay extra for more bandwidth when thats up. So as you can imagine to download almost a Gig would be a considerable dent in my quota. Although I’d happily pay for more if it meant I could download the screencasts to my hard drive, instead of having to use up valuable bandwidth everytime I wanted to view the tuts. Look forward to your response. Love the Envato sites – phenomenal. Also bought the Wordpress Rockstar book – very good.

    ( Reply )
    1. PG

      Jeffrey Way April 20th

      Yep. You’re free to download this series straight to your computer.

      ( Reply )
  79. PG

    Jaysone April 20th

    Hi Jeffrey,

    Thanks again for these videos. Really learning alot.

    In video 4 – The CSS, at about 35:10 i think you wanted to add a border-top and you skipped to move on.

    You typed.

    -post-item img {
    float: left;
    padding: 30px 20px 30px 30px;
    border-top: 1px solid white;
    }

    then you tried to change it like this.

    -post-item img {
    float: left;
    padding: 0px 20px 30px 30px;
    border-top: 1px solid white;
    margin-top 30px;
    }

    Just to share, i think you can do it like this. I did it like this:

    div#main div#primary div.post-item img {
    float: left;
    margin: 30px 20px 30px 30px;
    border-top: 1px solid #fff;
    }

    Used margins instead of padding and then applied the border.

    ( Reply )
  80. PG

    Laneth Sffarlenn April 20th

    I signed up to Plus today because of this series of instructions.
    I’d recently gone through Collis’ PSD to HTML tutorial for the Portfolio site, which was wonderful.

    I’ve basically got one, potentially two clients waiting for me (the second because it’s the accountant helping me set up my business!) so I’ve really got to learn some Photoshop & HTML skills. PHP and things like that still escape me, but that’ll come with time as ye say.

    Just wanted to thank ye for this – I’ve downloaded it and will get a chance to explore the vids tomorrow night after work.
    Keep up the awesome work!

    ( Reply )
  81. PG

    Jaysone April 21st

    Hi Jeffrey, in video, 5. installing wordpress, you show the changes on the html site that you made. How did you position the “read more” button? is it an anchor outside the paragraph or is it in the paragraph?

    I notice the paragraph is not overflowing. So i’m assuming you used overflow hidden for the paragraph like so:

    div#main div#primary div.post-item p {
    color: #7e7e7e;
    font-style: italic;
    overflow: hidden;
    }

    Did you just add a margin-left to the “read more” button and pushed it all the way to the center?

    Would be great if you could share how you made those slight changes. The other changes are pretty straightforward.

    ( Reply )
  82. PG

    Nikola April 21st

    Amazing work Jeff! Thank You! Worth every cent!

    I have one question: How can I change default gravatar in wordpress, I want to have one of my own, that I create in photoshop?

    Once again Thank You!

    ( Reply )
  83. PG

    rich April 22nd

    when you continue with this series, i.e. extend it with plugins as you mentioned, can you take the wp super cache plugin configuration step by step? it confuses me a bit

    ( Reply )
  84. PG

    Starstuff April 23rd

    Jeff, great job on the tutorials. They got me convinced to finally sign up for Tuts+ for a 3-months period and I am extremely happy I did. This tutorial of yours is priceless – I am primarily a designer with HTML and CSS skills, but creating a WP template myself has been something that scared me for quite a while. Now it doesn’t look that intimidating at all anymore.

    I especially benefited from your technique of ’slicing’ images – never thought of that but now it finally paid off that I memorized those PS shortcuts ;) and it also helped me to see how you worked with FF add-ons to create the stylesheet and inspect the WP code. I had no idea that was at all possible. And sheesh – you are a fast typer! I follow along while watching and I found myself hitting the space bar to pause VLC quite often because I just couldn’t keep up.

    Absolutely awesome, overall, and I look forward to the time when you continue this series.

    Thank you!

    ( Reply )
    1. PG

      Laneth Sffarlenn May 23rd

      Starstuff, I too was spacebarring all the time. Rewinding and re-watching him go zooming through his code :)

      I also signed up for this series on a 3-month membership – I think I’ll be sticking around.

      Did ye end up creating a wp theme and put it online? It’d be cool to see what we all achieved through this series.

      ( Reply )
  85. PG

    Katrina April 23rd

    Just finished watching. What a breadth of information. I’m definitely going to be putting this info to great use!!

    thanks a bunches.

    ( Reply )
  86. PG

    Karl April 23rd

    Jeffrey Way, you’re God!

    ( Reply )
  87. Really useful thanks!

    ( Reply )
  88. PG

    Deven May 1st

    Is it Necessary to have a CC attached to a paypal account to buy a Tuts+ account? i was about to go for a Tuts+ plus account, But i cant cause i don’t have CC attached in my paypal account. Any Solution guys?

    ( Reply )
  89. PG

    mssmotorrd May 3rd

    It’s the first time I commented here and I must say you share us genuine, and quality information for bloggers! Good job.
    p.s. You have a very good template for your blog. Where did you find it?

    ( Reply )
  90. PG

    EliteUser May 17th

    Hey,

    I also have that problem. I can’t seem to buy the $9 membership because I don’t have a CC attached to my account.

    I have the $9 but I can’t buy it. Could you please change it so we don’t need a Credit Card? Because MANY people are missing out on this type of membership.

    Please fix it, thank you!

    ( Reply )
  91. PG

    Bryce May 19th

    I’ve downloaded the series, but theres something wrong with audio. This happened just with me or with someone else?

    ( Reply )
    1. PG

      Jeffrey Way May 19th

      Use the VLC player. Just google it; it’s free!

      ( Reply )
  92. PG

    Laneth Sffarlenn May 23rd

    Jeff,

    I just finished the series (I contacted ye through your site with my result, as asked) and can honestly say that my investment in the Tuts+ Network has paid off in my mind – I’m completely at ease being a member because I know only quality tuts will be put on here.

    The archives, freebies and tutorials in the whole Envato™ network are awesome, and I know that I’ll most likely find everything I need right here, or in the posts referring to other networks.

    This series has set my mind to rest about the decision to become a small-time freelancer – I’m starting my first paid design job in June thanks to ye and Tuts+!

    Thanks so much again for this, and make sure to let us know when the expanded series comes out! I’d love to know more about the plugins and widgets, and how to craft our own.

    ( Reply )
  93. PG

    Sean Turtle May 26th

    Hi

    Can’t seem to download any of the files – Flock gives XML errors and Safari says decompression failed. any ideas?

    ( Reply )
    1. PG

      Niles May 27th

      Hey did you happen to find a solution to this I just signed up yesterday and tried to get in and get a similar error…
      I hope this is a temp problem my whole reason for joining was to get in on this great tut

      Does anyone have an idea what may be wrong???

      ( Reply )
  94. PG

    Franklin May 30th

    I’ll definitely be using this tut when I redesign my blog!

    Great read!

    ( Reply )
  95. PG

    Mitko Yanakiev June 16th

    The sound of the first video is awful…

    ( Reply )
  96. PG

    Mitko Yanakiev June 16th

    Did you saw the template in IE6, its a disaster , also you tell how to slice items in png but you dont tell how they run under ie6 .I know how this stuff happens but for someone which is new it will be difficult to understand …

    NOTHING PERSONAL , i just give opinion for the tutorials to be better

    ( Reply )
    1. PG

      Jeffrey Way June 16th

      I mention numerous times in the series that we’re ignoring IE6. For personal sites — especially ones focused on web development — there’s no reason to. Please don’t criticize before watching.

      ( Reply )
  97. PG

    DRUPAL THEME July 1st

    Spectacular Drupal Theme use for any web designers….. andf very useful too.

    ( Reply )
  98. PG

    Daniel Monday July 2nd

    Truely great tutorial, Keep up the good work!

    ( Reply )
  99. PG

    Joel Glovier July 4th

    Where in the tutorial does it explain creating the custom fields for post images? I’m having a tough time with that.

    ( Reply )
  100. PG

    Mary July 23rd

    This is my first tutorial that I’ve completed since I got my membership a month ago, and I wanted to say just how great these videos are. Jeff is thourough, and goes through everything step by step. I was looking everywhere for something like this, I am a graphic designer who has wanted to learn html/wordpress, and these videos were exactly what I needed. They even helped me with a project I was recently assigned at work, one that I know I would have greatly struggled with without having watched these tutorials. Great job!

    ( Reply )
  101. PG

    Crystaldream August 3rd

    Ive got the tuts plus suscription and i fucking love it, i learned so much on this video, I also can submit a theme on ThemeForest!! Thank Guys

    ( Reply )
  102. PG

    yann August 20th

    This is so great, I think you’ve just made me a +member. 9$/month is ridiculous for what you get here. can’t believe it. so awesome :)

    ( Reply )
  103. PG

    Dallas Clounch October 6th

    Hello i have made my front page a “static page” and have added at the bottom so you are able to submit comments on the front page of my blog but when you hit submit it just goes to a blank page of wp-comments-post.php ?? when i switch back to the default theme i notice i will submit the comments but links to the blog page where the posts are but when i got back to the home page of the default theme it works… but when i am on my custom theme it does not work. Help?? lol

    ( Reply )
  104. PG

    j October 27th

    how do i download this? i just registered for a 3 month membership

    ( Reply )
  105. PG

    Mikael November 6th

    hi guys, I downloaded this and the 3rd file is damage I can’t zip it. I downloaded the 3rd file many times but its still damage. Please help me guys!

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    November 6th