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.

tutorial image
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.

tutorial image

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.

tutorial image

Step 3

Change your foreground color to #332a32 tutorial image. 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.

tutorial image

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:

tutorial image
tutorial image

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

tutorial image

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.

tutorial image

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.

tutorial image

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

tutorial image
Noobnote:

To nudge a marquee selection, you must have the marquee selection tool selected. Once it’s selected, just simply use the arrows on your keyboard to nudge it in place.

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

tutorial image

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

tutorial image

Now drop the opacity of this layer to 25%.

tutorial image

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.

tutorial image

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 tutorial image at the bottom of the layers palette. You should now have 3 layers grouped together. I named my group “Large Header”.

tutorial image

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.

tutorial image
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 tutorial image, and choose “Foreground to Transparent” in your gradient options, as well as the Radial Gradient option. Create a gradient based on the image below.

tutorial image

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

tutorial image

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.

tutorial image

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 tutorial image and choosing custom shape tutorial image. 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.

tutorial image

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.

tutorial image
Noobnote:

When using the info palette, your measurements may not be in pixels. To change your unit preference, go to Edit > Preferences > Units & Rulers. Just adjust the Rulers via the dropdown options.

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

tutorial image

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

tutorial image

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

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

tutorial image

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.

tutorial image

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

tutorial image

Step 8

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

tutorial image

Step 9

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

tutorial image

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.

tutorial image

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.

tutorial image

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

tutorial image

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.

tutorial image
Noobnote:

Some of you may be wondering how and/or why I’m using pixels in my font sizes. Photoshop default settings have fonts measured in points. Because we’re designing a web layout, I’m using pixels. To change how your font sizes are measured, simply go to Edit > Preferences > Units & Rulers..

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.

tutorial image

Now give our new button the following layer styles:

tutorial image

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

tutorial image

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.

tutorial image

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.

tutorial image

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

tutorial image

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.

tutorial image

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.

tutorial image

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.

tutorial image

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.

tutorial image

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

tutorial image

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

tutorial image

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

tutorial image

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

tutorial image

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.

tutorial image

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

tutorial image

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

tutorial image

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

tutorial image

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

tutorial image

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.

tutorial image

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:

tutorial image

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.

tutorial image

Add the following layer styles to your rounded rectangle.

tutorial image

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

tutorial image

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

tutorial image

Add a 1px stroke to your ellipse layer.

tutorial image

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.

tutorial image

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.

tutorial image

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.

tutorial image

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

tutorial image

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:

tutorial image

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

tutorial image

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

tutorial image

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

tutorial image

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.

tutorial image

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.

tutorial image

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.

tutorial image

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 tutorial image at the bottom of your layers palette.

tutorial image

Select the Gradient Tool tutorial image. 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”.

tutorial image

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.

tutorial image
Noobnote:

How the mask works is simple. Whatever is “painted” with Black will not be visible. Whatever is “painted” with White will be visible.

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.

tutorial image

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
tutorial image

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).

tutorial image

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.

tutorial image

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.

tutorial image

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%.

tutorial image

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

tutorial image

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.

tutorial image

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.

tutorial image
Noobnote:

People new to Photoshop may not know how I’m showing my guides in some screenshots and not in others. To easily Show Guides and Hide Guides you can simply hit “Ctrl + ;” (Mac: “Cmd + ;”).

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.

tutorial image

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:

tutorial image

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

tutorial image

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.

tutorial image

Your tab should now look like this:

tutorial image

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.

tutorial image

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.

tutorial image

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

tutorial image

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).

tutorial image

Step 28

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

tutorial image

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:

This is what I ended up with:

tutorial image

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.

tutorial image

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.

tutorial image

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

tutorial image

Leave a Reply

Your email address will not be published. Required fields are marked *