Advertisement

Adaptive Blog Theme: From Photoshop to WordPress

14 Posts

Word of warning: this Session is not for the faint-hearted! Throughout the course of nearly fifty screencasts Adi Purdila will walk you through conception and completion of an entire WordPress blog theme. You'll start out in Photoshop, translate the design into an adaptive HTML and CSS build, then jump over to our sister site Wptuts+ where you'll rig everything up with WordPress.

There's rarely a better way of learning web design than to watch over someone's shoulder for the duration of a complete project; this is your chance to do just that.

Posts in this series
  • General
    Let's Get Started!Session preview
    13 shares
    There's rarely a better way of learning web design than to watch over someone's shoulder for the duration of a complete project; this is your chance to do just that!Read More…
  • Complete Websites
    Adaptive Blog Theme: Starting Out in PhotoshopPreview 1
    37 shares
    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.Read More…
  • Complete Websites
    Adaptive Blog Theme: Homepage LayoutPreview 2
    7 shares
    Continuing on with our Photoshop layout, let's now finish off the homepage design. We'll be looking at the main content area, the sidebar and the footer.Read More…
  • Complete Websites
    Adaptive Blog Theme: Post LayoutPreview 3
    7 shares
    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.Read More…
  • Complete Websites
    Adaptive Blog Theme: Initial HTML MarkupHtml1 preview
    18 shares
    We've finished working in Photoshop, so now it's time to begin translating our designs into working web pages. Let's begin by setting up a project and setting out some basic markup.Read More…
  • Complete Websites
    Adaptive Blog Theme: Basic StylesCss1 preview
    20 shares
    Having built the majority of our HTML markup, let's now turn our attention to styling it. We'll begin by looking at our LESS reset file, then we'll grab Twitter's Bootstrap grid CSS, after which we can get slicing our original Photoshop files.Read More…
  • Complete Websites
    Adaptive Blog Theme: Finishing up the HeaderCss2 preview
    12 shares
    Continuing with styling our web page, let's now finish off the header. We'll sort out the logo, the leaderboard ad and we'll style our navigation, including the multi-level dropdown.Read More…
  • Complete Websites
    Adaptive Blog Theme: Styling PostsCss3 preview
    7 shares
    Last time we finished styling our header section and got the navigation working properly; today we're going to look at the post listings and the various types of posts we're making available.Read More…
  • Complete Websites
    Adaptive Blog Theme: Styling the Sidebar and FooterCss4 preview
    16 shares
    It's certainly true that the bulk of this tutorial lies in the styling, so let's continue with our CSS by working on the sidebar and the footer.Read More…
  • Complete Websites
    Adaptive Blog Theme: Single Post MarkupCss5 preview
    12 shares
    In the screencasts leading up to this point we've been building the homepage of our theme. Let's now turn our attention to the single post page, beginning with some markup.Read More…
  • Complete Websites
    Adaptive Blog Theme: Single Post StylingCss6 preview
    Okay guys, you know the drill. Let's start writing some LESS styles for our single post layout. In these two screencasts we'll look at general styling, blockquotes, images and buttons.Read More…
  • Complete Websites
    Adaptive Blog Theme: Single Post DetailsCss7 preview
    6 shares
    There are still plenty of details on our single post layout which we need to take care of. At the very least we have the tags, post navigation, the author bio and the comments - so let's dive in!Read More…
  • Complete Websites
    Adaptive Blog Theme: BreakpointsCss8 preview
    14 shares
    At this point in our theme development it's time to look at the adaptive nature of the layout. We're going to examine our breakpoints, tidy up the layout in its various states, deal with the navigation and any images we encounter. Notably, this is the last of the screencasts before we dive into WordPress theming!Read More…
  • General
    Adaptive Blog Theme: Session Complete!Adaptive preview
    22 shares
    We've reached the end of our Adaptive Blog Theme Session - what a session it's been! If you've followed along from the beginning; starting off in Photoshop, through to HTML, CSS and ultimately into WordPress development, hats off to you. If you've yet to dive in, take a look at what's in store for you..Read More…