Design a Website

ShutterPress: Design & Code

A Photo Portfolio Site (Day 1:

Design)Brandon Jones on May 4th 2011 with 2 comments

Tutorial Details

Estimated Time: 1-2 hours

Version: CS5+

Programs Used: Adobe Photoshop

Difficulty: Intermediate - Advanced

Final Product What You'll Be Creating

04/05/2011 ShutterPress: Design & Code A Photo P…

…tutsplus.com/…/shutterpress-design-c… 1/40

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, I’ll be designing the

template in Photoshop using some special tricks and techniques. In Day 2 we’ll walk through “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. Ready to get started? Let’s do this!

Intro: About the Design

As with any web design project, it’s important to identify the goals of any project… so, before we dive in,

let’s say a few words about what our eventual goals are:

Design a site template that can be used by photographers to show off their portfolios.

Use a simple, unobtrusive navigation interface.

Display images as thumbnails (without any text) in a paginated grid layout.

Allow for easy layout flexibility.

Code it! Using standards compliant HTML/CSS and free, open source jQuery plugins.

The last thing that I’ll mention is perhaps the most important: it must be 100% customizable using the least

amount of work possible! What does this mean for us? I’d like anyone to be able to re-brand and re-skin

the entire layout without ever needing to touch the mess around with rewriting any of the core HTML. That

ideally means that by swapping out a few images (the logo and a custom background image) and some CSS,



that an entirely different outcome can be created… which is why on the final day of this series, we’re going to

devote and entire session to creating customizations!

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

The Video Tutorial

The video tutorial is intended to be a companion to the written tut below. Think of it as “supplemental”

material – I won’t cover everything that’s in the written portion, but sometimes it’s just nice to see someone

else work in Photoshop to pick up other tricks, efficiency tips, and other techniques that you might not

otherwise be familiar with.

Oh! It’s worth it to turn on HD and scale up the video to fill your screen if you have the bandwidth. You can

also download the entire HD video directly from Blip (under the Files sidebar widget).

The Written Tutorial

The full written step-by-step guide is below. We’ll be starting with a blank Photoshop document, but you can

also download the demo PSD to check your work against mine.

Step 01: Setting Up Our Document



Start by creating a new document at 1280 x 800px in size. Why? Because this will give us a nice big canvas

to play around with. The width of our final design won’t actually be 1280px, but we want to see some

background color just like we’d normally see in a large browser window.

What Size Should The Container Be?

The first practical dilemma with any web project is to decide the size of the document that you’re going to be

working with. In our case, I’d like the design to sit front and center on the screen, fill up as much space as

possible on a smaller monitor – and not look too tiny on a huge monitor.

Width Considerations: I’m opting to use 994px as the total width. This number is somewhat arbitrary – it

could have been a few px wider or a few px smaller, but ultimately it will do the job. Why? Because it fits

inside the 1003px “safe zone” for the most popular browsers being used right now, with a bit of padding on

either side to be safe.

Height Considerations: I’m going to work with the height of 644px inside Photoshop The height is another

arbitrary number in the case of this design. Why? Because 1) it’s going to be adjustable from the CSS, 2)

we’re going to let this “flex” to fit the content that we throw inside and 3) I’m less concerned about the fold

height than I might be for a larger scale project.

The key thing to note here is that this is all going to be 100% adjustable from the CSS once we’re done. So,

if you happen to prefer a wider layout with a more shallow height, you’ll be able to get just this within seconds

of deciding your preference. The idea here is to keep things fluid even though we’re using a fixed size

template… so don’t get too hung up on the precise numbers just now.



Caveat: This “keep it fluid” approach is actually unique to this particular template… I’ll usually begin any

project with a lot more refined analysis to find the perfect size, which we’ll be going over in other tut series.

Should We Use a Grid System or Go

Freestyle?

While there are lots of merits to using a pre-built grid system (like 960gs or 978gs), I’ve got a pretty clear

vision of what I want to build, and not finding a grid system that will immediately accommodate my design,

I’ve opted to freestyle this layout.

What are the repercussions of freestyling a layout? For one, we’ll have to be a lot more careful about

the dimensions of each content module that we create because we won’t have guides telling us where things

should go. To create a truly uniform looking template, we’ll just have to be that much more diligent about

creating our own grid system that’s native to this template.

Drawing the Content Module

Draw the Rounded Rectangle: Now that we’ve decided on 994px by 644px as our container size, go

ahead and draw a rounded rectangle of that size (using a 12px radius). Open up the Info panel (Window >

Info or F8) to view the size of your rectangle as you draw it.



Note that the color of the rectangle doesn’t matter at this point. While we’ll eventually turn it white, for now

we want to see it stand out from the background.

Creating the Shadow Effect: I’m going to use the same method we used in the “Create Your Own Juicy

Tabbed Slider” tutorial because it’s the easiest way to get a shadow that will be easy to slice and turn into a

transparent PNG when it’s time for coding.

To create this shadow, just grab your brush tool and set it to 60px in size and 0% hardness.



Then, create a new blank layer to draw on, hold down the Shift key to draw a straight line, and simply

drag your cursor across about half of the container rectangle.



Finally, we’ll use the Free Transform tool (Cntrl + T) to angle it very slightly to create a bowing effect (I

used about 2.5 for the angle). Why angle this at all? Because it’ll help create a bit of extra dimension if the

light source appears to bow out a little bit.

Now let’s duplicate that brushed layer (Cntrl + J while selected on the layer) and flip it horizontally (Edit >

Transform > Flip Horizontal). Slide the new flipped brush layer over until it just about matches up with the

other side of the container rectangle. The result should a shadow that’s the opposite of the first one.



Move both shadow layers behind the “frame” layer and scale them (select both layers and press Ctrl+T) so

that they fit just inside the total width of the frame rectangle.



Finally, merge both shadow layers together (Ctrl+E) and nudge the shadow layer into the right spot (use the

basic selection tool [V] and use the keyboard to nudge). You can also adjust the opacity of the shadow layer

to suit your own personal preferences. I used about 60%, you can do more or less according to what you’re

after.

Bonus Step: To add even more depth, use the Perspective Transform on the shadow to make it appear

to be going back in space. Just apply a small Gaussian Blur on the layer once you’ve transformed it to

remove any pixel artifacts.



Here’s one more bonus step if you’re looking for even more drama: try creating a duplicate shadow layer

that’s 70% smaller (use the Free Transform and the percentage scaling to adjust this), blurred out more, and

at a different opacity (70%) to create a “core shadow” on the inside of the primary one.

Go ahead and name your shadow layers (once you’re done playing with them) and place them in a new layer

folder called Shadows. Organization will make customization a lot easier when we’re ready to slice this up!

Creating the Background:

The background that we’re going to create is a subtle light blue “noise pattern“. I’ll go over this quickly, but

to find out more about creating these patterns, check out our full blown tutorial on them here.

Start by creating a new blank layer and filling it in with white (Shift + F5).



Now let’s add some noise using Filter > Noise > Add Noise. You can adjust this to your own preferences,

but I’ve used 14% for the amount.



Set the new “noise layer” to Multiple under the blending mode panel, and draw a rectangle (fill color

#e1ebef) behind this layer.



Last, let’s add a New Adjustment Layer (Layer > New Adjustment Layer > Hue/Saturation) over these

other two layers so that our noise isn’t boring old grey.



Under our adjustment layer’s Adjustment panel (Window > Adjustments), I used the settings of (Hue: 200,

Sat: 100, and Lightness: +60) with the Colorize box checked. You can play around until you get your own

desired effect.

Go ahead and place these three new layers (the adj. layer, the noise layer, and the background color layer)

into a new layer folder called “Background Colors”.

[Checkpoint] : Setting the Container Box’s

Color

Finally, let’s go ahead and make our container box’s color White now that we’ve added some background

color. I’ve also added a light 1px stroke around our container box (#d8d8d8 in color) to help it stand out

from the background.

At this point, your document should look something like this:



Your layers should also be organized like this:

Step 02: Creating the Navigation Sidebar

Now that we have our basic content container created and styled, it’s time to start filling it in with content.

We’ll start with the Navigation Sidebar because that’s going to define how much space we have for content

later on.

Creating the Sidebar Space

How Wide Should It Be? The width of the sidebar is really up to you… I’ve selected to use 235px as the

width, because it can more or less fit the stuff that I want in there (plenty of room for long page titles, the



social media widget, and a search bar). You can adjust this to suit your own needs though… and like I’ve

been saying all along, this will all be adjustable from the CSS later on.

To start, simply draw a 1px line using the same color we used for our container’s border (#d8d8d8) along

the vertical axis of the container. Place it about 285px from the left of the edge.

Next, it can be helpful to draw a guideline at this point – about 20px away from the edge of the container’s

border. We’ll be using this as a guide for where to place all of our content so that things look uniform and

well aligned.

The Logo

I won’t go into too much depth here because, well, you’re probably going to use your own logo . In short



though, I’ve started with a simple frame icon (from the Noble set of icons), and added my own photo to the

frame. Then I used the font Museo at 26pt; Using 2 different weights and colors to create some visual variety,

I set the title of our template, “ShutterPress” nicely next to the icon.

Again, you’ll probably want to use your own logo (or a client’s) at this stage… so I’m going to skip over the

layer styles and other tweaks. Feel free to check them out inside the demo PSD though!

Simply place the logo inside the sidebar space. Note that we’re using about the same amount of top-padding

and right-padding that we used for the padding on the left side.

Little tricks like keeping the space around an object as important as the logo uniform is one of

those things that will make the difference between good design and a great design.

The Accordion Navigation

The accordion navigation is the first functional element that we’ll be mocking up. As such, it’s worth noting

that we’re going to enter some grey-area here. We want to mock this up as if it were being used… mainly so

that if we show this to someone (like a developer), they’ll understand what it should look like at all possible

interactive states.

As such, we want to show an active link, as well as at least one open accordion and one closed

accordion.

I’ll use a simple font for this – Lucida Sans at 12pt with the leading set to 36pt with the off-black color of

#252525. I happen to prefer using the Sharp anti-alias setting for web fonts in Photoshop mockups, but you

can use whatever you’d like.



I’m also using a small variant for the active link: Bold with the color set to #0285da, which happens to mimic

the logo as well as the background hue.

Use a few simple keyboard spaces to indent the links that will eventually become our accordion nested links.

Note that we’re using that same vertical guideline to hang the text so that it lines up nicely with the logo.

The 36pts of leading is plenty to set a simple horizontal line between each link, so let’s go ahead and do that

at this point. Use the color #EAEAEA for these horizontal lines, which is slightly lighter than our primary

border color. Why? It’ll help establish that these rules are slightly less fixed than the others.



Now let’s add the accordion buttons. Start by creating a 2px radius rounded rectangle sized at 11px by

11px. Add the following layer styles:

A light grey gradient (#E6E6E6 to white) from bottom to top, respectively.



A 1px Outside Stroke of #bfbfbf.



Duplicate that button layer, and add a simple text “+” and “-” to finalize the buttons. Place them as shown:

The Social Media Widget

From here on out, we’ll be using the same basic styling rules for all new elements. Borders should match the

same grey’s that we’ve used before. The padding should also be about the same as we’ve used for previous

elements. Font styles and colors will do likewise. As such, I won’t bore you with re-writing these notes, just

keep them in mind!

For the Social Media Widget, go ahead and grab the icon set of your choosing (or check out our big roundup

of icons sets here). We’ll be using 16px by 16px versions of whatever icon set you choose. The demo uses

this set, but you can use whatever you’d like.



I’ve also opted to Desaturate the social icons (Image > Adjustments > Desaturate) so that they don’t

distract from the core content area. Add the icons or your choosing (spaced out by a few px), and add in

your “Social:” text so they have a title.

Add in our horizontal line borders for separation and leave a bit of space underneath for our search bar.

The Search Widget

The search widget is super easy to create. Just draw a 25px tall rounded rectangle (8px radius) with a

1px stroke of #e0e0e0 and drop in a magnifying glass icon. I used the one from the Fugue set of icons (it’s

free), but you can use your own to add some style or flare.

Whallah! Our sidebar is now done. You can add your own custom widgets or leave it as it. It’s time to

populate our content area with some, well, content!

Step 03: Creating the Grid Template

I’m going to do things a little bit backwards in these next two steps. Normally, you’d start a web-design with

the homepage design… the page that people will first arrive at. However, this happens to be a rare case

where the sub-page (ie: the gallery template) is arguably more important than the actual landing page.

So, knowing that I can always create a slick homepage design, I’m going to start our content design with the

Gallery Template, because it poses more problems for us. Chief among these problems are:

What size thumbnails we’ll use

How to best space these thumbnails out

How many thumbnail images we’d like to see per page

How to address the problem of pagination in a fixed layout

The funny thing is that once we’ve solved these problems, we can actually create the homepage rather

quickly. By starting here, we’ll allow ourselves the ability to create a killer thumbnail gallery without trying to

meet any constraints that we might accidentally set upon ourselves by starting with the homepage.

Ok, let’s get started!



Creating the Content Space

I’m going to start by establishing a basic amount of padding that I’d like to always remain around the content

area. In our case, I’ve selected 32px to be the amount. It’s a bit smaller than the line-height of the navigation,

but not so small that things feel tight or constrained.

That leaves me with an active area of roughly 696px by 586px (again the height is flexible, so we’re not

terribly concerned about that).



Finding the Perfect Thumbnail Size and

Padding

With our active content area defined, now we want to select the ideal thumbnail size and padding. Figuring

this out isn’t rocket science… I essentially just played around with several arrangements of crudely drawn

rectangles until I found something that looked harmonious.

Now, I know the word harmonious isn’t very specific… so what do I mean? Knowing that I want to fit about

15-20 images per page, I tried our various thumbnail size/space combinations until I found one that reflected

a good balance of positive and negative space as well as a refined sense of hierarchy. Things like the Golden

Ratio play into this, but I’ll be honest and just admit that I eyeballed it in this particular case. There’s no magic

going on here… just lots of experimenting.

So, what’s the final formula? A 155px wide by 125px tall thumbnail image, set into 4 columns (and in our

case, 4 rows as well, which fills up our height).

The padding: There is about 21px of horizontal separation between each thumbnail and about 18px of

vertical separation. Why the difference?

Because we’re dealing with a “landscape” layout (meaning that it’s more wide than it is narrow),

it just feels right to maintain that same shape ratio across our entire design.

Notice how the final thumbnail size that I picked also reflects this landscape ratio. So, it makes sense that we

leave a bit less padding between rows than we’ll place between columns.

Here’s the final outcome:

Note that I’ve left about 50px of space at the bottom to insert some sort of pagination (the way that users will

navigate from one page of thumbnails to the next). Naturally, if there aren’t enough thumbnails to trigger the



pagination, we’ll crop the layout in more closely at the bottom.

Adding Some Visual Styling

The visual styling of the thumbnails is important as well. Because we’re taking such care to create lots of little

polish details across our entire design, seeing plain old image thumbnails with hard edges feels crude.

We’ll add some subtle styling to lighten this up and give our gallery grid a sense of refinement. Apply the

following layer style to each of your thumbnail images:

A 2px Inner Stroke (in CSS terms, this will become padding) #EAEAEA

A 1px Drop Shadow (in CSS terms this will become the border) #F2F2F2



I’ll zoom in at 100% here to show you the final style:

Now that we’ve established our grid, let’s add some real images to give this layout some life:



Pagination

We’re almost done with this page… now all we need is a way for users to navigate from one page of

thumbnails to the next. This is called pagination. There are lots of ways to do this (some more complex than

others). In our case, we want a simple method of pagination… so I’m opting to use a simple left-arrow |

right-arrow approach – ie: (<) and (>). This is one of the more intuitive methods of pagination, so it makes

sense for our situation.

Let’s go ahead and create two 18px diameter circles:



Notice that I’ve simply copy/pasted the layer style from the accordion buttons that we used before. Why?

Because duplicating visual styles helps ensure that our layout feels uniform… and there’s really no reason to

waste effort on trying to design a completely new style. Consistent layer style usage will actually aid the

usability of our site.

Once you’ve drawn your circles, add in the arrows (this is already shown above). In my case I used a custom

> shape in Photoshop, but you can just as easily use a custom text “>” symbol. Since this isn’t a beginner tut,

I’ll assume you can sort out how to get this shape in there somehow

Fin! That actually completes this content page. Using the same basic styles and padding rules that we’ve

established, we can easily turn this into other grid layouts as well (such as a 2×2 grid, or a 3×3 grid).

Step 03: Creating the “Splash” Page Template

Alright – On to the final stage in the design session! We can probably sort out how to create various other

support pages, but what we really need now is the homepage design. Being that this is a photographer

targeted template, a photograph should obviously take center stage. We also need some descriptive text

though (for a photographer to explain who he/she is, what kinds of services they offer, etc.)

Recycling Our Content Space

Width Considerations: In most circumstances we’d just copy over the active content space that we used in

the Gallery Template. I’m going to switch things up a little bit by changing the padding from 32px to 20px.

Why? This will give us just a little extra space to use a “FULL size” image. It’s a very subtle shift in the overall

layout, but the impact should be enormous because we’ll be able to fit a massive image into the space.

Height Considerations: As we’ve been saying all along, the height is really variable and will ultimately be

left up to individual users/designers/clients to determine just how much content you want on this page… in my

case, I’m going to attempt to keep the dimensions of this page the same as our gallery page though.

The result of these considerations is an active space that’s slightly larger than what we used in the gallery

template: 720px by 604px.



This makes sense for us for a few reasons: 1) it gives us plenty of space to design around and 2) it will fit

inside most popular browsers’ “fold” space. So long as we don’t place any crucial information near the very

bottom of this area, we should be fine to use this space in any way we might think up.

Creating the Image Slider

Drawing the Image: Begin by drawing a 716px wide by 438px tall rounded rectangle (Radius: 10px).



Apply the following layer styles, starting with a 2px Stroke:

And also add an inner shadow (which will help make our image “pop” more on the page):

The final visual style should look something like this:



Creating the Tabs:

The tabs will be the way that users will be able to cycle through images on the homepage. This is essentially

just a basic jQuery carousel when you think of it in terms of coding… but there’s no reason to limit ourselves

to the visual styles that most pre-built sliders will use by default.

So, let’s get a bit more creative with the left/right tabs by creating some visually interesting inner circles.

Start with a 92px diameter circle shape. Use Black for the fill color and set the opacity to 57%.



Use the Rectangle Marquee tool to make a selection that runs along our “image container” and use that

selection to make a Layer Mask.

Now add the “<<" symbol using some basic text. I happened to use Lucida Sans at 42pt size. Use White for

the color and add a simple outer glow:

So you should have this:



Go ahead and group these layers into a group, then duplicate it, flip the copied group horizontally, and slide it

on over to the right side:

Now all you need to do is drag an image onto the rounded rectangle layer (make the image a Clipping

Mask of that layer) so we can see what this will actually look like:



This is what your layer organization should look like (more or less).

Creating the Three Text Modules

Creating the Spaces: Determining the size of these spaces has as much to do with how much space we

want between them as how much space we want them to take up. I want no less than 20px of separation

between each module (to prevent them from looking jumbled up), so what we get is a module layout

something like this:



In reality, these modules will appear more spread out than this because the text won’t be justified at the right

side… so that’s plenty of room. Keep in mind these modules are invisible… or rather, there is no background

color or anything like that. The image above is just to illustrate how I’ve arrived at my spacing.

Adding Titles: We’ll now add some titles for each text module. Position each title at the far left of the hidden

rectangles that we created in the last step. In the demo, I’m going to use the font Museo for the titles… which

happens to be the same as the logo font. Obviously, you’ll want to adjust the typeface to suit your own

project. Here’s how the demo text is rendered:

Adding Descriptive Text: The descriptive text for each module comes next. We’ll use basic Lorem Ipsum



script here, but you may want to use some actual text to test out the line height and font size that will work

best for you. Here’s what the demo is rendered as:

Adding Image Icons: Finally, let’s add some 16px by 16px icons to add some visual interest to the

modules. Remember to nudge over the titles as well:

And that’s it! Here are the final images that we created today. Click each one to view it full size:



End of Day 1: Review

At this point you should have spent about an hour or two setting up this document; Speed designers might

have gone faster, but I’m allowing for some “creative time” where you might want to play around with

different sizes and styles.

Brandon Jones is epicera on Themeforest

Like 5 people like this. Be the first of your friends.



Tags: codeconversiondesignphotographyportfolioPSD>HTMLsitetemplateweb designwebsitewordpress

By Brandon JonesBrandon Jones is the Webdesigntuts+ 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.



Design a Website

Documents

Transcript of Design a Website