Design a Site From Scratch

This is Part 1 of the 3 part series, “Site From Scratch: Localmost”. In Part 1, we’ll be designing a dark and sleek web layout in Photoshop. I will walk you step by step through the process in designing our fictitious company’s layout. In Part 2, we’ll be moving our design to the web using clean, semantic, and valid HTML & CSS. Finally, in Part 3, we’ll be adding the interactive elements, the bells, and the whistles with my favorite javascript library, jQuery. So, I hope you’re ready for the first installment of Site From Scratch, let’s get started on Part 1: Design.

Introduction (Part 1, Design)

Everyone has their own ways of designing for the web using Photoshop. There are typically numerous techniques available to achieve the same, or similar, results. I’ve recently migrated to Fireworks for my interface designing, but thought it would be best if the first installment of Site From Scratch were in a more familiar, or popular, tool like Photoshop. If you are following this tutorial and find me using a technique that you find tedious, or you have a more efficient way of achieving the same result, by all means, let us know!

Site From Scratch: Localmost

1. Part 1: Design
2. Part 2: HTML & CSS (Coming Soon!)
3. Part 3: Interaction (Coming Soon!)

Localmost is a fictitious company we’re using for our Site From Scratch model. I’m using CS4, but I’m pretty sure everything we’re doing in this tutorial can be done in any CS version of Photoshop. If you have any problems implementing any of the tutorial, please feel free to ask questions in the comments.

Step 1

We’ll be creating Localmost with a width of 960px so go ahead and create a new Photoshop file and give it a size of 1160 x 1200px.

Guides

Let’s set up some guides to start our document. To do this go to View > New Guide and set the following guides:

Vertical

• 100px
• 110px
• 580px
• 1050px
• 1060px

Horizontal

• 90px
• 440px
• 1150px

If you downloaded the source files, I already did this for you.

Color Palette

This is the color palette we’ll be basing our layout on. If you downloaded the source files, I’ve included an adobe swatch exchange (.ase) file.

Step 2

Fill background layer with #473743. Double click the background layer and rename it “Main Background”.

We want to add some noise to our background layer, but want it to be done in a non-destructive manner so let’s convert it for smart filters. Go to Filter > Convert for Smart Filters.

Now let’s add some noise. Go to Filter > Noise > Add Noise and give it an amount value of 1%, select Gaussian, and make sure Monochromatic is unchecked.

Step 3

Change your foreground color to #332a32 . Starting from the 90px horizontal guide and finishing at the 440px horizontal guide, create a new rectangle shape wider than your document width. If you used the guides (90px and 440px) you should end up with a rectangle with a height of 350px. Hint: it’s easier if you go to View > Snap To > Guides.

Convert the rectangle layer for smart filters (Filter > Convert for Smart Filters ), like we did with the Main Background layer. Now apply the same Filter > Noise > Add Noise settings as we did with the Main Background layer. Rename this layer “Large Header BG”. With the Large Header BG layer selected, click on the layer styles (at the bottom of your layers palette) icon and select Stroke. Use the following settings:

You should now have 2 layers; Main Background and Large Header BG.

Step 4

We want to give our Large Header BG some depth by adding a subtle shadow to the top and bottom edges. Create a new blank layer above Large Header BG and name it Large Header Shadow Btm. You should now have 3 layers total.

We’ll create the bottom shadow first. Make sure you’re on your new layer, Large Header Shadow Btm. From the 440px horizontal guide create a marquee selection 10px high and 100% the width of the Large Header BG.

Zoom in and nudge your marquee selection just above the Large Header BG stroke line.

Once you have your selection ready, select the gradient tool , set your foreground color to black (000000), select linear gradient, and choose “Foreground to Transparent” from your gradient options in the top left.

Start from the bottom of the marquee selection and create a gradient up about 5px (half the marquee selection).

Now drop the opacity of this layer to 25%.

Once you’re happy with the shadow, duplicate the Large Header Shadow Btm layer and rename it Large Header Shadow Top. With your new layer selected (Large Header Shadow Top) go to Edit > Transform > Flip Vertical and move it up to the 90px horizontal guide just below the stroke line.

Group all Large Header layers together by selecting all 3 (Large Header BG, Large Header Shadow Btm, Large Header Shadow Top) in the layers palette and clicking the “Create a new group” icon at the bottom of the layers palette. You should now have 3 layers grouped together. I named my group “Large Header”.

Step 5

Duplicate your “Large Header” group by right-clicking and choosing “Duplicate Group”, or by going to Layer > Duplicate Group. Once it’s been duplicated, change the name of your new group to “Footer”. Select the “Footer” group and move it just below the 1150px horizontal guide. Go ahead and rename the layers accordingly, and you can delete the Large Header Shadow Btm layer from the “Footer” group since it won’t be needed.

Step 6

Create a new blank layer inside the Large Header group, just above the Large Header BG layer. Name this layer “Large Header Gradient”. Change your Foreground color to White (#FFFFFF). Select the gradient tool , and choose “Foreground to Transparent” in your gradient options, as well as the Radial Gradient option. Create a gradient based on the image below.

You should have a radial gradient similar to the image below.

Drop the opacity to 5-10%, whatever makes you happy. I went with 5%. Then right click your radial gradient layer and choose “Create Clipping Mask” (or go to Layer > Create Clipping Mask). Make sure your layer is above the Large Header BG layer.

Step 7

We’re going to create a simple logo for Localmost real quick. Before we start, go ahead and download the ATCrillee font (the download link is hiding amongst their Google Adsense on the right). We’ll be using this for the logo, as well as branding throughout our layout. You can choose to use a different font, if you wish. I’ll be using ATCrillee Bold Italic.

Let’s start out by going to Photoshop’s shape tool and choosing custom shape . Go to your custom shape choices and choose the “campfire” shape (it’s easiest to list “All” of your shapes). Change the color to #fb810a.

Make sure in your shape options (top left) you have “Shape Layer” selected. In the top left of your layout, just right of the 110px horizontal guide, hold shift and drag a campfire shape, approximately 60px in height.

Now rasterize the shape layer by right clicking it and choosing “Rasterize Layer”, or Layer > Rasterize > Shape.

Once it’s rasterized, use the rectangle marquee selection tool and delete the wooded portion of the “campfire” shape.

If you have any remnants left of the “wood”, just use the marquee selection tool and delete it as well.

Click the Layer Styles icon and apply the following Stroke and Gradient settings.

Now put some text next to it using the ATCrillee font. I also put a 1px black stroke (20% opacity) around the text layer and gave it some spacing between the letters.

I grouped my two logo layers together and named them accordingly.

Step 8

We’re just going to add a basic navigation menu to the right of our layout.

Step 9

Group the Nav Menu text layer and the Logo Group Layer together. I named the group “Top Header”.

Step 10

In our Large Header or secondary header, if you will, we are going to add some “introduction” copy. Let’s start with the title text “Get the most out of localhost”. I’m using a 30px font size, ATCrillee, and the color #a2badb.

Let’s play off of the brand name “Localmost” and put emphasis on the word “most” in our title. Let’s change the color of the word to #fb810a and add an underline.

Now we’ll add a drop shadow and gradient overlay to our title. Go ahead and click on the layer styles icon at the bottom of your layers palette and add the following styles.

I added some filler text below our title, using lipsum.com. I used Arial for my font, gave it a size of 18px, and a font color #f2f7fb.

Step 11

Let’s create a call to action button right below our intro text. This will be our “Take a Tour” button. Select your rounded rectangle tool. In the tool options (top left) change the radius to 5px and make its color #fb810a. Go ahead and draw a rounded rectangle approximately 150 x 35px.

Now give our new button the following layer styles:

You should now have something similar to what I’ve got.

Now, let’s add some text. I used white for my text color (#FFFFFF) and centered it inside of our button background. I also added a subtle drop shadow to the text.

Step 12

In the Source Files, I included an image with the name “screenshot.png”. Go to File > Place and locate screenshot.png and place it on your layout. Position it to the right guide. Keep in mind that the image has a shadow 5px all around it, so be sure to align the screenshot.png image to the 1050px vertical guide as pictured below.

Once you have it where you want it, you should now be ready to add the main content!

Step 13

Before we get started on the main content, let’s go ahead and add 2 more vertical guides. Add a vertical guide at 770px and 790px.

Now it’s time to download the WebAppers Free Web Application Icons Set. Once you have it downloaded go ahead and go to File > Place and locate and choose, from the PNG-48 folder, the Add.png icon. Place it on the left main content section of the page, just about 50px from the Large Header.

Step 14

Now we need to emulate a “text-wrap” effect. To do this we’re going to be drawing some rectangle paths and path combining techniques discussed in the Noobcube Quick Tip article “Combining Shapes in Photoshop”.

Let’s start out by selecting the rectangle shape tool, selecting the “paths” option in the toolbar, and drawing a rectangle approximately 300 x 80px as seen below.

Now we want to delete a portion of this path. We do so by switching to “Subtract from path area” in our path options and drawing a square approximately 55 x 55px over the top left portion of our original rectangle path.

Now you need to choose the Path Selection Tool from your tool palette.

Holding shift down, select both rectangle paths. You’ll know they’re both selected because all the path anchors are solid.

Now go to the Path Selection Options in the top left, and click on the “Combine” button.

You should now have one path that looks like the one below.

Select your text tool, and click anywhere inside the path and begin typing. You’ll now notice you’re typing inside the path. I pasted some more text from the Lipsum site and decided to adjust the height of our now Text Path until I was happy with how the text wrapped.

I then added a title using the ATCrillee Bold Italic font (size 20px), with the color #a2badb, and added the following Layer Styles:

You should now have something similar to what I have below.

I want to give the title text and description text some breathing room, so I nudged the description text down about 5px.

To make things a bit cleaner, go ahead and combine the new layers into a group. I called my group “Feature 1”.

Step 15

For the 3 other features, I just duplicated the Feature 1 group, and replaced the text and icons. You can duplicate the group by right clicking and choosing “Duplicate Group”, or simply go to Layer > Duplicate Group.

Step 16

We’re going to create a “Download Trial” button, so let’s start by picking the Rounded Rectangle Shape tool. We are going to be placing this on the top right of our “Main Content” area. We’ll start with a a fixed size rounded rectangle. Choose these options for your rounded rectangle:

So we have a 5px radius, and a fixed size of 258 x 68px. You may be asking why such an off size? Well, we’re going to be adding a 1px stroke to our button rounding it off to a size of 260 x 70px.

Add the following layer styles to your rounded rectangle.

Now your rounded rectangle should be sitting nice and snug between the two guides.

Using the Ellipse Shape tool, create an ellipse using #f2f7fb for the color, and using the info palette to make it 48 x 48px.

Add a 1px stroke to your ellipse layer.

Using the WebAppers Free Web Application Icons Set, place the Save.png icon in the center of your ellipse. I used the Save.png icon from the PNG-32 folder.

Just add the text “DOWNLOAD TRIAL” using Arial Bold (18px) and white. I also added a slight drop shadow to it. I then added the text “Get the full version for 30 days” under it. This text was also White, Arial Regular, and 12px.

Step 18

We’re going to create another rounded rectangle below the “Download Trial” button. We’re going to be adding a 1px stroke around it so we’re leaving room for it between the guides.

Next, let’s give our rounded rectangle a 1px white stroke at 10% opacity.

Now add the text “Sign up for app updates” using the ATCrillee Bold Italic font (color: #a2badb; font size: 18px). Add the following layer styles to this layer:

I added a little more text using Arial Regular just below it.

Add a rectangle shape for our Input Field using #473743 for the color. Add a 1px white stroke at 10% opacity using layer styles.

For the Submit button, create a rounded rectangle (approx. 85 x 25px) using #fb810a for its color, and add the following styles to it:

Add the “SUBMIT” text to the button, and “Email Address” inside the input box, and you should now have something similar to what I have.

Step 18

Select the Marquee Selection tool from your tool palette. Go to the drop down menu titled “Style” in the options bar and choose “Fixed Position”. Input 960px for width and the 1px for height. Then create a marquee selection about 30-40px below our “Main Content” area. Make sure you zoom in and see that your selection is within the outside guides.

Create a new layer and fill the marquee selection with #332a32. Duplicate the layer by hitting Ctrl + J (Mac: Cmd + J) or by going to Layer > Duplicate Layer. Nudge the duplicate layer down 1px. Hold Ctrl (Mac: Cmd) and click on the duplicate layer’s thumbnail to put a marquee selection around it and fill it with #574853.

We’re going to fade out the edges of our bevel by using a masking technique. First, group both horizontal lines together. I called the group “Beveled Border”. Select the Group in your Layers Palette and click on the “Add a Vector Mask” icon at the bottom of your layers palette.

Select the Gradient Tool . Hit “D” on your keyboard to reset your foreground color to Black and your background color to White. Then hit “X” to reverse your foreground and background colors. You should now have White as a foreground color and Black as a background color. Select “Foreground to Background” from your Gradient Options in the top left. Choose “Radial Gradient”.

Click inside the “Layer Mask Thumbnail” of your “Beveled Border” group. You’ll know when you have it selected because there will be a black border around it. Take your radial gradient cursor and start from the middle Vertical Guide and drag to the top of your layout.

If you don’t get it right the first time, just Undo and try it again until you’re happy with the results. You should see a subtle “fade out” on both sides of your beveled border.

Step 19

For the next section of our layout, we’ll be creating the tabs container you see in our final demo. In Part 3 of Site From Scratch: Localmost we’ll be using jQuery to bring this to life. For now, let’s add some new guides to our layout to help position our tabs.

We’re ultimately going to want 4 tabs; each tab having a width of 240px. Having 4 tabs with a width of 240px equals 960px (the width of our page content). Each tab will have a 10px gutter on each side, so the 4 sections will have a content area 220px wide.

Add the following Vertical Guides:

• 330px
• 340px
• 350px
• 570px
• 580px (You should already have this guide. It marks the horizontal center of our layout.)
• 590px
• 810px
• 820px
• 830px

Step 20

Create a fixed size Rounded Rectangle with a width of 960px and a height of 250px. We’ll stick with the radius of 5px like we’ve done with the other rounded rectangles in our layout. Create this shape using #f2f7fb for the color. Place it in between our main layout guides (100px and 1060px).

Step 21

Our Tabs are going to have a height of 50px, so let’s create a couple Horizontal Guides to help guide us. We want our tabs to be 40px below our beveled border, so let’s create a horizontal guide at 795px. This will represent the top of our tabs, so we want another horizontal guide 50px below the 795px guide. Create another horizontal guide at 845px.

Step 22

Create another Rounded Rectangle, this time with a width of 240px and a height of 250px. Use the same color and radius as the last rounded rectangle. Position this shape’s top left corner to our Horizontal Guide of 795px and Vertical Guide of 100px.

Step 23

Duplicate this layer and move the duplicate layer right next to the original shape. Change this shape color to #000000. Drop the opacity to 15%.

Go ahead and move this layer below the main tab content area. Do some organization by grouping the layers and naming them accordingly.

This Layer is not needed for the time being. It’s going to be used as a “Hover state”. For now you can hide the layer by clicking on the eye icon to the left of the layer.

Step 24

If you remember how we combined paths from Step 14, we’re going to do something similar by combining our two tab shapes into one. This method is discussed in the Noobcube Quick Tip article “Combining Shapes in Photoshop”.

In your layers palette, click on the “Tab Content” layer’s Vector Mask Thumbnail (the one on the right, next to the “Tab Content” text) and follow the directions in the image below.

You can go ahead and delete the “Tab Content” layer now. You should end up with 1 shape representing the Tab Content and the Tab itself.

Step 25

Let’s add a little texture/color to our new shape. While holding Ctrl (Mac: Cmd) click on the shape’s Vector mask thumbnail to put a marquee selection around it.

Select your “Marquee Select” tool and hold Alt (Mac: Option) drawing a rectangle selection around the entire content portion of your “Selected Tab”, minus the tab itself. When you hold Alt (Mac: Option) and use any Selection tool, it subtracts from the selection. What you should end up with is this:

Go to Select > Modify > Contract and input 2px. You should now have a selection that’s contracted 2px.

Create a new blank layer and name it “Tab Gradient”. With your new layer selected in the layers palette, fill the marquee selection with #f2f7fb. Give this layer the following Gradient Overlay layer styles.

Your tab should now look like this:

Step 26

Let’s do the same thing with the bottom section of our “Selected Tab”. Just hold Ctrl (Mac: Cmd) and click the “Selected Tab” Vector mask thumbnail to make a selection around the shape. Using the Marquee Selection tool, hold Alt (Mac: Option) and subtract from selection all but approximately 50px height (100% width) of the “Selected Tab”. Go to Select > Modify > Contract and input 2px to contract the selection 2px.

Create a new layer with the name “Tab Content Gradient” and fill the marquee selection with #f2f7fb. Select the “Tab Gradient” layer and go to Layer > Layer Style > Copy Layer Style. Select the “Tab Content Gradient” layer and go to Layer > Layer Style > Paste Layer Style. You should now have a gradient at the bottom of your “Selected Tab”. Double click the “Tab Content Gradient” layer styles and check the “Reverse” checkbox in the Gradient Overlay options.

Your “Selected Tab” should now look like what I have below.

Step 27

We’re going to add some text to our “Selected Tab”. I used Lorem Ipsum for the tab’s title using #332a32 for the color and ATcrillee Bold Italic as the font. I chose 18px for the font size. I also added a sub-title to the tab right below the title using #a2badb for the color and Arial Italic (font size 12px).

Step 28

Go ahead and create the other Tab titles using the same fonts, but change the Title color to #f2f7fb.

Step 29

Next, I added some basic content to our “Selected Tab”. The text I used is Arial Regular, using #332a32 for color, and a size of 12px.

Before I started, I added another Horizontal Guide at 870px. This gives our Tab Content a 25px gap from the top.

I used the following free images from www.sxc.hu:

• Image 1 (I just cropped out the top graph)
• Image 2
• Image 3

This is what I ended up with:

The first one is with guides on, the second is without.

Step 30

For the footer, I just added some text as some secondary navigation. I also duplicated the logo from the header and resized it to fit in the bottom right of our footer.

Last Minute Touches

I decided I wanted to separate the left from the right in the Main Content section. I used the same technique used in Step 18 to create a vertical beveled border.

That’s it! If you made it this far, you’re probably ready for a break. Here’s the final outcome.