Try Tuts+ Premium, Get Cash Back!
Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup)
videos

Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup)

on May 12th 2011 with 32 comments
Tutorial Details
  • Difficulty: Intermediate
  • Programs: Adobe Photoshop + HTML Editor
  • Estimated Time: 90 minutes

Final Product What You'll Be Creating

Download Source Files
Demo View It Online

It’s day two of the Basics Design tutorial! Having just finished the design session of this series, today we’ll be continuing on with the PSD slicing and markup. Adi has recorded another HD video tutorial covering the crucial PSD > HTML conversion process. Whether you’re a seasoned veteran or a new designer, we hope you enjoy the walkthrough!

About this Tutorial Series

Adi Purdila is going to walk us through an entire project – from design to coding – all here on Webdesigntuts this week! Here’s the outline of what we’ll be going over in each day:

  • Day 1. Homepage and blog single page PSD files
  • Day 2. Homepage PSD slicing and markup
  • Day 3. Styling the homepage and blog single page
  • Day 4. Let’s create some more pages: gallery, contact, full width
  • Day 5. Finishing touches: installing and customizing SlideDeck and some JavaScript work


A note on the downloadable files for today: the full HTML will be available for download in the next session of this series (Day 3), so today is going to be working from the same PSD files that we created in Day 1.

Now on to Day 2, the slicing and markup session!

Day Two: PSD Slicing and HTML Markup

We’ve recorded these videos in full HD resolution, so be sure to turn on the full screen HD version if you’re able to! This video includes the full slicing and markup session, recorded at 720p with full audio commentary throughout.


Video 3: Slicing the PSD and HTML Markup – 720p

About the 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.” – Adi

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