ShutterPress: Design & Code A Photo Portfolio Site (Day 2: De... http://webdesign.tutsplus.com/tutorials/complete-websites/sh...

ShutterPress: Design & Code A Photo

Portfolio Site (Day 2: Slicing & Code Prep)
Brandon Jones on May 4th 2011 with 24 comments

Tutorial Details
Programs Used: Adobe Photoshop
Version: CS5+
Estimated Time: 1 hour

View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.

Final Product What You'll Be Creating

Im a huge fan of photo-centric site designs so today Im excited to launch a new complete site tutorial thats 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, well walk through the final design phase and then do some pre-flight preparation for the
coding phase, which well go over in detail in Day 3. In Day 4, well show you how to create three completely different sites using
the same raw HTML.

Intro: Day Two, Pre-Flight Preparation

Todays session is going to be relatively quick in terms of technical tricks but well be going heavy on the workflow tips, so pay
attention if youre curious about the phase of a project that happens after design and before the coding begins.

1 of 6 09/09/2013 04:05 PM
ShutterPress: Design & Code A Photo Portfolio Site (Day 2: De... http://webdesign.tutsplus.com/tutorials/complete-websites/sh...

Lets begin todays session with some general notes about what pre-flight is: When youre 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. Well 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, lets begin!

Step 01: Image Slicing and the Almighty CSS Sprite

Identify What Images Well 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 cant be duplicated with CSS or other coding tricks.
Heres 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 well stick with images to be safe for the time being)
11. The Homepage Slideshow Overlay (the inner shadow)

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

>

Slicing these isnt difficult so I wont go into too much depth, but before we get started its worth considering if some of these
images can be combined into a single CSS Sprite.

Whats 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 thats 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:

2 of 6 09/09/2013 04:05 PM
ShutterPress: Design & Code A Photo Portfolio Site (Day 2: De... http://webdesign.tutsplus.com/tutorials/complete-websites/sh...

In a single sprite, weve already prepped the bulk of our design for coding and its all under 19kb! Not bad right?

To create your own sprite, just create a blank document (start out with any size, youll 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 its showing up as properly transparent in the sprite
Save the final sprite image as a transparent PNG-24 then youre ready to rock and roll!

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

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

The top and bottom rounded corners: These arent 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) theres a good possibility that we might decide to ditch these images for CSS methods in the future.

The background image: This ones 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 dont do well.

3 of 6 09/09/2013 04:05 PM
ShutterPress: Design & Code A Photo Portfolio Site (Day 2: De... http://webdesign.tutsplus.com/tutorials/complete-websites/sh...

Other Not-Sprites: Obviously, we wont 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, itd 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 dont 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 Well Need to Use

Now that weve got our image assets all ready to go, its time to gather our scripts in one spot so that when we sit down to the hard
coding, well be ready for action. Taking a look again at our design, lets 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. Its easy to
install/customize, and its going to offer quite a few extra features that other lightboxes dont like thumbnail navigation, custom
sharing add-ons, and more.

The Accordion Menu

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

The Sliders: jQuery Cycle

4 of 6 09/09/2013 04:05 PM
ShutterPress: Design & Code A Photo Portfolio Site (Day 2: De... http://webdesign.tutsplus.com/tutorials/complete-websites/sh...

jQuery Cycle is going to handle the heavy lifting for our image sliders. Its an incredibly well documented plugin, which means itll
be easy to setup (and customize) to fit our templates needs.

Font Replacement:

Ive used the font Museo in the design, so well 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. Weve designed our site template, sliced any images that
well need to use, and gathered all of the third party scripts that were going to require to make the site function as we want it to.
In the next stage, well be doing the actual coding so get ready for Day 3!

Brandon Jones is MDNW on Themeforest

5 of 6 09/09/2013 04:05 PM
ShutterPress: Design & Code A Photo Portfolio Site (Day 2: De... http://webdesign.tutsplus.com/tutorials/complete-websites/sh...

Tags: codeconversiondesignphotographyportfolioPSD>HTMLsitetemplateweb designwebsitewordpress

By Brandon Jones
Brandon Jones is the old Wptuts+ Editor. From sunny Southern California, Brandon has been designing, drawing, photographing,
and coding the world around him for the past several years. Not content to pick one media and stick with it has left Brandon with
a broad range of talents that have allowed him to work on projects ranging from grungy digital art kits to Fortune 500 software
prototyping. He loves design, but even more, he loves the passion and creative spirit that embodies the design community. Check
out Brandon's work at ThemeForest.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

6 of 6 09/09/2013 04:05 PM