Adaptive Blog Theme: Starting Out in Photoshop
videos

Adaptive Blog Theme: Starting Out in Photoshop

on Oct 30th 2012 with 70 comments
Tutorial Details
  • Difficulty: Beginner
  • Topic: Photoshop
  • Screencast duration: 20 mins

Final Product What You'll Be Creating

Download Source Files
This entry is part 2 of 14 in the Adaptive Blog Theme: From Photoshop to WordPress Session
« PreviousNext »

Today we embark on a journey; a massive journey which is going to lead us through the entire process of designing and building a WordPress theme. We begin with Photoshop, so let’s kick things off by setting up our document with a grid and some basic structure.

Grid Structure and Header


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Further Resources

Adi Purdila is AdiPurdila on Themeforest
 
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.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

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

    And an awesome start.. Permissions corrected :)

  • Richard

    Hey Adi, (when) will you release the promised html to wordpress tutorial? Thanks.

    • ianyates

      I have all the videos in my greedy little hands – and I’ll be drip-feeding them over the course of the coming weeks :) In total we’re looking at nearly 50 screencasts; the first half will cover PSD > HTML > CSS, then the second lot (the WordPress tutorials) will be published over on Wptuts+.

      We’ll keep you updated!

      • lawrence77

        Awesome Ian, and welcome back Adi :) as usual awesome stuff adi.

  • Richard

    Thanks for the info Ian :) (reply link to your comment doesnt work)

    • ianyates

      Really? Could you posts some browser/system details? Our Disqus integration is still pretty new – don’t want people having problems posting comments :S

  • Richard

    Im using Firefox 16.0.2 on Win 7 64bit. For example im able to reply to Osman’s comment but when i click on reply to your comment it will just add # to the url and jump to the top of the page.

  • pdsomoza

    Super nice tut =)

  • jsfaulds

    Good to see you back Adi

  • Adi Purdila
    Author

    Glad you like this so far guys, I hope you’ll enjoy the rest of the videos, I’ve put a lot of hard work behind them :)

  • http://www.timothyeberly.com/ Timothy Eberly

    Love it already!

  • Ajeet Singh Baddan

    Thanks, that’s really cool

  • Sharjeel Hassan

    Adi can u tell us that how much Parts and Time it will take? thanks

    • Adi Purdila
      Author

      Well, there are about 25 videos in total for the PSD&HTML series, each video at around 15-20 min. I made smaller videos so you guys can follow easier.

      • lawrence77

        can’t wait, keep ‘em coming. :)

      • Sharjeel Hassan

        And you are using Twitter Bootstrap 2x as responsive as well UI framework right?

        • Adi Purdila
          Author

          I’m only using the responsive grid system from Twitter Bootstrap actually, not the other UI elements. I chose to make my own buttons ‘n stuff :)

          • http://twitter.com/borowskirafal Rafał Borowski

            Sweet :]

          • Sharjeel Hassan

            Adi Adi Adi Adi…………………wowowoowowoow thats what i want to see ………… u r rocking Adi …………… i don’t have words God Bless you.

          • Adi Purdila
            Author

            Hehe, glad you like the tuts :)

          • Sharjeel Hassan

            Adi Purdila you are UNPARALLELED

  • Pingback: Let’s Get Started! | Webdesigntuts+

  • http://twitter.com/borowskirafal Rafał Borowski

    Ohhh finaly :) My morning coffee was so lonely without you videos :) Nice series. Love your work, but really waiting for the html>wp one. Also hope you’re going to make html5 markup on this one right Adi?

    • Adi Purdila
      Author

      Yep, there will be some HTML5 in there as well :)

  • George Psaltakis

    Thanks very much

  • http://twitter.com/MMMCreative Matthew Morris

    Will I be able to follow along during the HTML/CSS parts using Foundation 3 instead? Suppose it’s just a matter of class names, huh?

  • http://www.robertbrodziak.com/ Robert | RBdsgn

    Those complete design series are the best. Looking forward for next video!

  • Steve

    Wonderful stuff Adi, I’ll be following along with this for sure.

  • pctutorials

    thanks adi,the one who makes the most instructional videos in here.

  • Talal

    How do you toggle the visibility of grid group layer? by F1? how it can be done in Photoshop CS5?

    • Adi Purdila
      • http://twitter.com/Rubiroid Rubiroid

        In that quick tip you use two hotkeys: F1 and F2. In this video you use only F1 for show/hide. Is it true? How did you do that?

        • Adi Purdila
          Author

          That’s true. I found a simpler way to do it since I released that.

          I’m using the ExtendScript Toolkit to create a .jsx file in which I basically toggle the first group/layer and I always have the grid group first in the tree.

          So, long story short:

          1. Create the .jsx file and type the following:

          activeDocument.layers[0].visible = !activeDocument.layers[0].visible;

          2. Copy that file in the Presets/Scripts/ folder of your PS installation
          3. You should now see the new script in File>Scripts.
          4. Create a new action, click Record then go to File>Scripts>”name_of_your_script”.

          5. Click Stop on the action tab and you’re good to go :) All you got to do now is assign a key.

          • http://twitter.com/Rubiroid Rubiroid

            Thanks a lot!

          • rafark

            Tremendous!

  • venkat

    I really telling u this is very useful to me.thank you for sharing this post.

  • Web Design Belfast

    Photoshop CS6 has been given some positive effects from its user base. Aside from the redesigned user interface, a lot of its already existing features have been enhanced in any terms.

  • Techeese

    So this was the surprised that you were talking about <3'd it! Thanks :)

  • anshuman

    so another screencast series by adi sir..man U rock!…after wasting lot of my time here n there…i learned..wht i learned in web design..only because of your previous screencasts! thanks…!

  • Adam Riley

    How do you get those purple guides to become temporarily visible when you drag something near them?

    • Adi Purdila
      Author

      View > Show > Smart Guides :)

      • Adam Riley

        Thank you so much!

  • http://www.welancers.com/ Aslam Doctor

    Hi Adi, great series. can you post some video on youtube guiding on how to use the Baseline grid ? That would be too much helpful.

  • Ninja_finger

    I’ve been waiting for a course like this. Just watched the first video and I’ve already picked up some nice new skills. Thank you Adi and Ian ; )

  • Abbas

    This if for anyone who needs the grid used in the video. https://rapidshare.com/files/2129339651/grid.PSD

    • John

      I’m unable to download this, could someone provide us with another link please?

      This link gives this message: “Download not available. Download permission denied by uploader. (0b67c2f5)”

  • Sebastian D.

    Great tutorial ! It will be a succesfull series. Felicitari Adi ! :)

  • http://twitter.com/TeenWolfies TeenWolfies

    Gonna watch some tutorials but I want to know how to get the red guidelines you are using. I only get stupid blocks which annoys me while designing and I’d love to know how know how much padding to add. Where do you get those values from? That went a bit too fast for me.

    • Adi Purdila
      Author

      If you’re talking about the vertical grid I’m using, it’s an exact copy of the Bootstrap grid, made for Photoshop. You can find a link to that in some of the comments below.

      About paddings… if i’m using a 14px font-size I tend to use a 14px lateral padding. Sometimes I bump that to 16 or 32px, depending on the object :) It’s not an exact science in my case.

  • Effi

    You created Top Add using rectangle tool. How did you turn off the its path ( of rectangle box)? Then you applied stroke and other layer style. Thanks

    • Adi Purdila
      Author

      Hmm, not sure what you mean by turning off its path. Can you explain please? :D

  • http://twitter.com/jfsanta juan santamaria

    hello, i’m new to this and i want to know something before i start this massive tutorial. is this focused only on WordPress or can the tutorial be followed to make a website of your own? thanks and keep the hard work!

    • Adi Purdila
      Author

      The series has 3 parts. We make a Photoshop design first, then transform that into HTML and finally make a WordPress theme. So, even if you’re not aiming for a WordPress end result, you should still find lots of interesting stuff along the way. Stuff which will help you build your own website :)

  • mart

    adi, which plugin do you use to zoom in and select 1 pixel to get the color

    • Adi Purdila
      Author

      It’s a Mac app called ColorSnapper :)

  • Amir Mehmood

    That was really needed. Thanks so much Adi.

  • Pingback: » WordPress Theme – Ares WordPress Blog Magazine Newspaper Theme Free WordPress Themes|WordPress Templates Free

  • Razvan

    @adipurdila:disqus – what plugins do you use for coda?

  • Gabe

    Hey Adi,

    I’ve followed some of your tutorials in the past and previously you were designing UI elements on the baseline grid lines; how-ever now I see you lining things (text) up in the middle of the lines rather then on the grid lines? Why the change?

    • Adi Purdila
      Author

      Hey Gabe

      You’re right, the correct way when designing with baseline grids is to position the bottom of the text on the grid line. However, CSS will render a text for example in the middle of the lines, never sitting on the lines (unless you nudge the text in place using paddings). So, I chose to make my job easier and align them on the center in Photoshop since that would give me a more realistic end result.

      And if I need, of course, I can always tweak the results in CSS and align everything to the bottom grid lines.

      I hope that answers your question somewhat :)

      PS. Here’s a great article on the subject: http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

      • ianyates

        Perfect article to link to Adi – working with a Baseline can be a nightmare :)

  • MS

    How to set up the grid and columns? I am a very beginner in web design…..

  • MS

    How to create columns and grids? I am a very beginner in web design…..

  • Steve

    Fantastic Series Adi, congratulations

    Just a small point, in the very first video you say the Baseline Grid is an exact copy of the Bootstrap grid.

    However –

    Bootstrap span1 is 60px

    Boostrap-responsive span1 is 70px which is what your using.

    Thought I was going crazy, because my grid didn’t match yours with the same page width of 1300px

    Thanks again – great tut.

    • Adi Purdila
      Author

      Hi Steve,

      Actually, the PSD grid I’m using matches the “wide” Bootstrap grid classes, the ones that work in a 1170px wide layout. In that case each col is 70px in width. 60px is the one for the normal grid, the one that fits in 940px.

  • Neoburner

    Hi Adi – A fantastic start for me in the series, should certainly give me some great tips for getting going on PS and WP design! Just a quick one relating to the grids, what is the best baseline sizes too use? Is it dependant on the framework you are using etc? Would rather fully understand how to use the grid system before diving deeper!

    • Adi Purdila
      Author

      Hi @neoburner:disqus ,

      The baseline size depends on your fonts size. It should be around 1.4-1.5x the font size. So, if you’re using a 14px font size, it’s best you use a 21px baseline (or line-height). On 16px font size you have 24px baseline and so on…

      It’s not really depending on the framework you use, but on your overall document structure. I hope this answers your question :)

      • Neoburner

        Thanks for the reply Ali so would you go on the smallest font size used on your page or the most used all over?

        • Adi Purdila
          Author

          I would go with the base font size, the one used mostly in paragraphs :)

          • Neoburner

            That’s great thanks one more thing about the grid.. Finding it a bit of a middle trying to get one right and working can you suggest a place to get a grid pre made or share yours as a template? Also notice when you hide your grid the ruler lines also go how did you manage that? N

          • Adi Purdila
            Author

            Well, I got my grid here: http://benstewart.net/2012/06/bootstrap-responsive-photoshop-templates/

            I have both the vertical grid and the horizontal one in the same group in my PS document. And I just hide that group :)

  • Pingback: From Photoshop to Wordpress Theme | MBAx.me