Complete Websites

Adaptive Blog Theme: Starting Out in Photoshop


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

Related Posts
  • Design & Illustration
    Create a Magazine Cover, Inner Spread With Mock-Ups in Adobe InDesignIsometric tut mockupreview
    In the second of our two part tutorial, I'm going to show you how to use our cityscape graphic to create a magazine cover and then two versions of an inner spread in Adobe InDesign. I'll then go on to create a mock up in Photoshop.Read More…
  • Web Design
    Applications and Tools
    The ThemeForest Author’s Guide to Unbounce TemplatesUnbounce preview
    In this tutorial I'm going to introduce you to Unbounce, a tool for building campaign-specific landing pages. We'll walk through the anatomy of various types of landing page, go through the tool’s features, then cover what’s needed to sell your own Unbounce templates on Themeforest.Read More…
  • Web Design
    How to Establish a Modular Typographic ScaleScale retina
    Possibly the most obvious typographic question in the hands of a designer is "which typefaces should I use?" The second question, one which rarely gets the kind of attention it ought, is "at what sizes should I set my type?" Establishing a modular scale is the best way to determine typographic sizes, in fact, it can help with laying out measurements and proportions across your whole page layout.Read More…
  • Web Design
    Design Theory
    All About Grid SystemsDsfd grid systems retina
    Now you know all about colour, typography and various things you should undertake before you start a design project, it’s time to start getting down and dirty with some of the basics of working with grids in your designs.Read More…
  • Web Design
    Design Theory
    Improving Layout With Vertical RhythmDsfd vertical rhythm retina
    Learning all about the ins and outs of the technical side of typography is good. It will give you a solid grounding when looking for typefaces or fonts and will help you understand a little more about the art of typography itself. You'll soon realise how much hard work it takes to get type right at any time, not just on the web.Read More…
  • Web Design
    Setting a Baseline Grid With GuideGuide for PhotoshopPreview
    Setting out a baseline grid for your Photoshop-based designs is an indispensible first step in any new website project. A baseline grid will establish consistent spacing between your page elements, creating harmonious rhythm throughout the page. Additionally, during the development phase, using a CSS framework with a compatible baseline grid can make translating design into code far easier.Read More…