Adaptive Blog Theme: Post Layout
videos

Adaptive Blog Theme: Post Layout

on Nov 6th 2012 with 19 comments
Tutorial Details
  • Screencast duration: 55 mins
  • Difficulty: Beginner
  • Topic: Photoshop

Final Product What You'll Be Creating

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

It’s time to wrap up the Photoshop part of this process – let’s now concentrate on the single post page layout. We’ll be looking at the post content itself, post elements (such as images, typography etc.) then the all-important comments section.

Single Post Structure


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

Comments Area and Form


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

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

    Awesome, awesome to the max!

  • Jess

    Wow this is an amazing design which give me more option to choose from. You may want to check others as well which will give you idea on cheap web hosting

  • Luca

    This tutorials are awesome but I think mighty ne more intesting to see you designing it for the first time to see the creation process instead of this kind of tutorial where you simply repeat the design you have created earlier. Thanks

    • Adi Purdila
      Author

      That would be interesting to see, indeed. I’ve tried to do that on a couple of occasions by including a timelapse video of the whole process, but the truth is, on more complicated designs, it takes many many hours to design it (sometimes I spend 2-3 weeks to perfect a design). So a tut about the whole process would be incredibly long :(

      • Ian

        I’m really glad you said that Adi. It’s good to know how long it can take for a pro. As a newby it gives me hope :-)

        • Adi Purdila
          Author

          Hehe, thanks Ian but I don’t consider myself a pro. I still have loads of stuff to learn :)

      • Luca

        Yes Adi, I fully understand the problem, sin, it would be the best way to learn! thanks for reply and congratulation for the wonderful tutorial.

        P.S. probably because what you do is “copy” your design already done so, perhaps it would be enough to post only the phase of coding, what do you think?

        • Adi Purdila
          Author

          Hmm, you make a good point Luca but there’s always the flipside of the coin. There are readers who also want to see the initial Photoshop parts so that’s why we post those as well.

          • Luca

            Yes I understand you! I also watch the Photoshop part because in really interesting. Thanks for reply and congratulation for your wonderful tutorial! Thanks

  • Sharjeel Hassan

    East or West Adi is the Best :)

    • Adi Purdila
      Author

      Haha, that’s awesome :D Might steal it for a very humble forum signature LOL.

      • http://www.wordpressguru.com.au/ Wordpress Developer Sydney

        Hi Adi, which framework is best one at the moment. I kinda like Bootstrap any suggestions …

  • http://twitter.com/skids89 skids89

    Go Adi! Just when I needed it you started this series. Hope it is done soon!

  • krim belkacem

    thank you very mutch

    we were waiting for this

    and you did it with the best way

    with adi purdila as designer

    but i have to say the design is premitive

  • Arif

    Nice tutorial.1. its an adaptive. can we say that it is fully responsive ? 2. you have used container. what if i use container-fluid instead of container? 3. i want to use fluid grid but i also want to make the percentage of container-fluid almost 960px. for example : container-narrow. is it possible ?
    Please let me know, Thanks.

    • Adi Purdila
      Author

      Hi Arif,

      There is a slight distinction between the two terms (adaptive/responsive), but I guess we can call it fully responsive if we had a fluid layout which can be achieved by changing a couple of class names in the code (yes, adding that -fluid to the containers and rows :D).

      About the narrow container, I guess that can be done pretty easy by fiddling around with some css classes and width values :)

  • website design

    Its really impressive and beautiful tutorial.i love this one.

  • http://www.facebook.com/sarhov Sar Hov

    Hello Adi, perfect tuts ! Аnd I’d like to know, why don’t you use Adobe Fireworks, the same things you do in photoshop must be much easier in Fireworks. I’d like also to know your opinion about Adobe Fireworks

    Thank You

    • Adi Purdila
      Author

      Hello,

      I guess it’s because I haven’t used Fireworks yet. I started designing in Photoshop so I just stuck with it since then and it would just seems weird to start learning a new workflow now :)