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

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!