Adi Purdila
Photoshop, HTML, CSS? Yep, that's what I do best. Mix that with lots of head nodding from trance music and you've got me in a nutshell.
Tutorials
  • Web Design
    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…
  • Web Design
    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…
  • Web Design
    Adaptive Blog Theme: Initial HTML MarkupHtml1 preview
    15 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…
  • Web Design
    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…
  • Web Design
    Adaptive Blog Theme: Homepage LayoutPreview 2
    5 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…
  • Web Design
    Adaptive Blog Theme: Starting Out in PhotoshopPreview 1
    16 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…
  • Web Design
    Design a Modern Pricing Table in PhotoshopPreview
    13 shares
    We're going to create an enticing and informative pricing table. During this screencast we'll tackle the design stage in Photoshop, then next week we'll complete the process by building the HTML and CSS version, ready for web deployment. Let's dive in!Read More…
  • Web Design
    Adding a jQuery Countdown to Our "Coming Soon" PagePreview jquery
    23 shares
    To finish off our Coming Soon page let's now give the countdown timer some functionality. We're going to use a jQuery plugin which will allow the timer to count down to a given date and time.Read More…
  • Web Design
    Building a "Coming Soon" Page With HTML and LESSPreview less
    31 shares
    Having designed our Coming Soon page in Photoshop, let's now kick off the build process with some markup and styling. We'll speed up the whole process by using LESS - if you haven't yet used dynamic stylesheets I promise you'll want to after watching this!Read More…
  • Web Design
    Designing a "Coming Soon" Page in PhotoshopPreview psd
    20 shares
    Today we'll begin working on a Coming Soon page based on the countdown timer which I recently designed. In this particular screencast we'll complete the Photoshop design stage and (just for kicks) you'll also find a timelapsed video of the whole process.Read More…
  • Web Design
    Quick Tip: Design a Countdown Clock in Under 15 MinutesPreview
    26 shares
    In this Quick Tip I'll demonstrate how to design a countdown clock interface in Photoshop. We'll go over some simple techniques and, in under fifteen minutes, we'll have a great finished product to show for our efforts. Let's jump in!Read More…
  • Web Design
    Quick Tip: Sharpen Your Workflow With Photoshop's Auto-SelectPreview
    7 shares
    If you're not using Photoshop's auto-select tool, I can only imagine you've never heard of it! Once you make it part of your design workflow, you'll find that it can save you a lot of time, especially when your PSD documents have complex layer structures.Read More…