Advertisement
Complete Websites

ShutterPress: Design & Code A Photo Portfolio Site (Day 2: Slicing & Code Prep)

by

I'm a huge fan of photo-centric site designs... so today I'm excited to launch a new "complete site" tutorial that's geared towards photographers, illustrators, and other visual creatives. In Day 1, we designed the template in Photoshop using some special tricks and techniques. Today, in Day 2, we'll walk through the final design phase and then do some "pre-flight" preparation for the coding phase, which we'll go over in detail in Day 3. In Day 4, we'll show you how to create three completely different sites using the same raw HTML.


Intro: Day Two, "Pre-Flight" Preparation

Today's session is going to be relatively quick in terms of technical tricks... but we'll be going heavy on the "workflow" tips, so pay attention if you're curious about the phase of a project that happens after design and before the coding begins.

Let's begin today's session with some general notes about what "pre-flight" is: When you're finished designing a website, there are a few crucial steps that should ideally take place before you begin the actual coding process. The first step is to start slicing up our design.

The full written step-by-step guide is below. We'll be starting with the Photoshop document that we created in Day 1, but you can also download the demo PSD to check your work against mine.

Ok, with our goals now clearly defined, let's begin!


Step 01: Image Slicing and the Almighty CSS Sprite

Identify What Images We'll Need to Slice

The first step is slicing up any images that will be required in the coded template. In our case, this process is quite simple: take a good hard look at the template and point out all of the design elements that can't be duplicated with CSS or other coding tricks. Here's our list:

  1. The Logo
  2. The Background Image
  3. The Footer Shadow
  4. The Accordion +/- Graphic
  5. The Slider Left/Right Tabs
  6. The Grid Pagination
  7. Social Media Icons
  8. Search Bar + Magnifying Glass
  9. The Content Photos (Slider Images + Grid Thumbnails)
  10. The Rounded Corner Images (yes, we can recreate this with CSS3, but we'll stick with images to be safe for the time being)
  11. The Homepage Slideshow Overlay (the inner shadow)

Let's label where these are on our design (click for the full size image):

Slicing these isn't difficult so I won't go into too much depth, but before we get started it's worth considering if some of these images can be combined into a single CSS Sprite.

What's a CSS Sprite? Put simply, a sprite is a method of using a single image as a means of storing several smaller images. For instance, take a look at the sprite that's being used at Webdesigntuts:

When we start coding, we can simply use CSS positioning and cropping of the image to show the piece of the sprite that we want.

Why Use a CSS Sprite? Speed! Using sprites to store images will reduce the time it takes to load an entire web page... when images get re-used over and over again on multiple pages, this can mean a lot of saved time.

Sprites are best used with smaller images that get used over and over again. For instance, most of the assets discussed above can actually be reduced to this sprite:

In a single sprite, we've already prepped the bulk of our design for coding... and it's all under 19kb! Not bad right?

To create your own sprite, just create a blank document (start out with any size, you'll eventually crop this down to just barely fit each element on the sprite), then add in the design elements with a reasonable amount of padding between each element. Here are some additional tricks:

  • Elements that are spaced out evenly in the design should be spaced out evenly in the sprite (like the social media icons)
  • If an element is transparent (like our slider tabs), make sure it's showing up as properly transparent in the sprite
  • Save the final sprite image as a transparent PNG-24... then you're ready to rock and roll!

For the remaining images, we can simply create our own generic slices. I'll list them below and describe each one (and why it's not a sprite):

The inner shadow overlay for the Slidedown. It's not a sprite because it's large (which means that it would unnecessarily beef up the size of the sprite).

The top and bottom rounded corners: These aren't sprites for a few reasons: 1) like the above example, they are large and unwieldy; 2) these are likely to be re-skinned or resized at a later date, which means loading them into a sprite just makes for additional work and 3) there's a good possibility that we might decide to ditch these images for CSS methods in the future.

The background image: This one's not a sprite because 1) it is likely to be swapped out with another BG image and 2) it needs to repeat indefinitely, which sprites just don't do well.

Other "Not-Sprites": Obviously, we won't be loading our thumbnails or any other content images in as sprites. The main reason here is practicality... Sprites are intended for basic UI and branding elements that can load quickly and speed up a site... if we loaded EVERY image into a single sprite, it'd make for an extra long loading time, even if it sped things up after it loaded. Think of the pre-loaders for those huge Flash websites a few years back ;)

The other obvious reason is that these content images will likely be changing each time someone updates the site. The Sprite image is intended to be pretty much unchanged so long as the site design remains the same.

Final slicing notes: It probably goes without saying, but there are other ways of slicing this particular design. Different approaches may make sense for your own variation of this design... so don't limit yourself to using the ideas above. If you want to attack the rounded-corners and the background shadow using CSS3, the z-index property and a transparent PNG, by all means go for it!


Step 02:Gathering the Scripts/Plugins/Add-Ons We'll Need to Use

Now that we've got our image assets all ready to go, it's time to gather our scripts in one spot so that when we sit down to the hard coding, we'll be ready for action. Taking a look again at our design, let's identify the key areas that will require additional scripts or plugins:

The Lightbox: prettyPhoto

Every good photographer template needs a lightbox... and there are few better than prettyPhoto out there right now. It's easy to install/customize, and it's going to offer quite a few extra features that other lightboxes don't - like thumbnail navigation, custom sharing add-ons, and more.

The Accordion Menu

This is a pretty simple problem using some basic jQuery... so we'll actually be using a custom, lightweight script for this one. Check back on Day 3 to see how it works!

The Sliders: jQuery Cycle

jQuery Cycle is going to handle the heavy lifting for our image sliders. It's an incredibly well documented plugin, which means it'll be easy to setup (and customize) to fit our template's needs.

Font Replacement:

I've used the font Museo in the design, so we'll need to find a way to use this in the coded version. The quickest way to set this up is with @font-face. So, we ran the font through Font Squirrel (http://www.fontsquirrel.com/fontface/generator) to create our font files that we can use in Day 3.

Make sure you download the prettyPhoto plugin and copy the necessary assets to their respective folders (javascript in the "js" folder, stylesheets to the "css" folder, etc. ), the cycle plugin can be linked from Github and jQuery can be linked from Google APIs.


End of Day 2: Review

At this point we should now be ready to start the HTML/CSS conversion. We've designed our site template, sliced any images that we'll need to use, and gathered all of the third party scripts that we're going to require to make the site function as we want it to. In the next stage, we'll be doing the actual coding... so get ready for Day 3!

Related Posts
  • Web Design
    Photoshop
    How to Export Photoshop Assets For the Web With PNGHatPnghat thumb
    The recently released "PNGHat" plugin for Photoshop, made by Source, creates an entirely different workflow for exporting PSD elements for use in websites, games, apps or whatever other types of projects you design for.Read More…
  • Web Design
    Case Studies
    How They Did It: Apple’s “Elevating the Expedition”Ipad thumb
    We're tackling a big one today: Apple’s "Elevating the expedition" iPad marketing page. Apple have taken the concept of target audience very seriously in their decisions with this site. Let's dive in!Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Making the Perfect WordPress Theme: Bad PracticesWp white 400
    We discussed how to do good in the previous part of this series: We learn how to write better code, how to comply with the standards, how to make our code readable by others and so on. In this article, we're going to see how to do bad: We'll go through some of the worst practices that one can follow when building WordPress themes.Read More…
  • Code
    Cheat Sheets
    The Complete Guide to Proper JavaScript Usage With WordPressJavascript 400
    I remember thinking "What the heck do we need JavaScript for, when we have Flash?" when I was fourteen. Although I still remember how I enjoyed coding stuff with ActionScript 2.0 back then, I saw how much one can achieve with JavaScript and fell in love with it. I'm not an expert on JavaScript (yet) but I can say I'm over and done with Flash for a long time. When it comes to WordPress, the biggest blogging platform and content management system worldwide, JavaScript is - of course - very useful for many things: content sliders, lightbox galleries, slick shopping carts, UI elements like tabs or accordions... you name it. But how exactly should we use JavaScript with WordPress? Returning or echoing a bunch of HTML script elements is one way to do it - and it's wrong. In this tutorial, we're going to see how to enqueue JavaScript files inside our pages and how to pass translatable data to the JavaScript code.Read More…