Final Product What You'll Be Creating
Good designs should never go to waste. This design was originally done for a client that never paid, and since there was such overwhelming positive feedback, I decided to create a tutorial for it. Rich & creamy textures give this design a unique theme. Hope you love coffee!
The Source Files
Not only are we giving away the Photoshop files for this design, we’ll also giving away the HTML files so you can check out how it’s been coded after the design phase! You should work through this tutorial from the start, but feel free to grab the source files as well.
Setting Up Our Document
As with any design, we’ll need a good grid to get started. I always start with a document that is 960px wide (which will be the width of our page). Make sure to give your document enough height to allow for all of the elements we’ll be creating — I chose 1100px.
Drag guidelines to the sides of your document. These will act as the gutters for our design area, which will be 960px wide. Also drag guidelines at 10px and 960px on the horizontal. These will act as an ident to keep everything squared up as we move down the page.
Once you have your guidelines set, go to Image -> Canvas Size and change the value of your canvas width to 1000px. This will give us a little extra room to work with on the outsides, and show how the site will expand in the browser.
The top left corner of your document should look like this:
We need to create a few more guidelines, as we have a few columns running vertical down the page. Create 6 more vertical guidelines at 330px, 350px, 650px, 670px, 730px and 750px. These should help us get going and keep everything aligned.
Create the Background
Next, we’ll be filling in the background. We’re obviously going for brown because of it’s richness (and it’s the color of coffee). Start by creating a new layer, and filling the entire document with any solid color (we’re going to alter it with Layer Styles). You can do this quickly by hitting Shift+F5 to “Fill”.
Rename this layer to “bg”, and right click it in the Layers palette and select “Blending Options”. Select “Gradient Overlay”, and create a gradient from #67331c to #2e1308; we’ll want the darker brown at the top of the page, and the lighter brown at the bottom.
Now we need to add a little texture so the gradient doesn’t look so flat. Create a new layer, above your “bg” layer, and name this layer “Pattern”.
- Hit Command+A to Select All
- With the entire document selected, Hit Shift+F5 to Fill the layer
- Select your favorite pattern — I had created mine earlier, but you can fine tons of pixel patterns here at Tileables.
- Depending on the color of your pattern, you may need to add a Layer Style of “Color Overlay” with color #4c2919.
The result should be something like this:
Create the Yellow Navigation Bar
Now that we have our background created, we’ll go ahead and start creating some of the elements on the page — starting with that fancy yellow navigation bar.
Create a new Layer Group, and rename this group “Navigation”. Inside the “Navigation” group, create a selection that is 100px tall and the entire width of your document. Create a New Layer, and hit Shift+F5 to fill the layer. As your fill color, use #edd38d (yellow). Rename this layer “bg” within the “Navigation” group.
You now have your navigation bar. It’s looking a little flat, so we’ll go ahead and add some Layer Styles to it to make it stand out a bit more. Right click the “bg” layer and select Blending Options.
- Drop Shadow: Opacity: 36%; Angle: 90 degrees, Distance: 5, Spread: 0, Size: 5
- Gradient Overlay: #b98045 to #eacf9e
The “Navigation” bar should look like this:
Once again, we need a some texture — otherwise it will end up looking flat. I used this sand-like texture I had lying around. The important part here is the color. You can use any texture you’d like, but the color should be similar to the fill color we used earlier. Add this texture in a new layer above the “bg” layer we previously created, and set it’s opacity to 30%. Rename this layer texture, and make sure it is the exact same dimensions as the “bg” layer.
We want to give a little more depth to the yellow bar, so we’re going to manually create a darker shadow on the bottom edge. To do this, make a selection at the bottom the yellow bar and create a new layer.
Fill this new layer with a gradient (Shift+F5) from Transparent to #2f1408 (at 30% Opacity)
That should do it for the yellow bar. It should look something like this:
Create a new group named “Nav”, and create all of the following text and layers within it.
Pretty simple navigation here, large and easy to read. The font is Georgia, 30px. Make sure your text has good spacing between each word (to allow for possible active states). Make the text color #92583f, with the active item (Home in this case), #64311b.
To create the “active” underline for the navigation, I used the brush tool to eyeball a somewhat titled underline. This ties the logo together with the rest of the site. Don’t worry if you don’t get it right on the first try — I probably drew it 50 times before I found the line I liked.
Now we need the “Sign Up” button. Duplicate the navigation text (select the text layer and Command+J) and change the words to read “Sign Up”.
Next, select the Rounded Rectangle Tool and draw a rectangle with Radius 20px; This will give us the shape around the Sign Up text.
Set the Fill of this layer to 0%, and apply the following Layer Styles:
- Inner Shadow: Multiply; Opacity: 56%; Color: #592b17; Angle: 120 degrees; Distance: 3px; Choke: 0px; Size: 5px;
- 1px Stroke, Inside with color #d1bc8d
Logo on a Napkin
To create the logo, I found a free stock napkin and trimmed the edges a bit. You can find your own at: iStockPhoto or other free sites.
I added a drop shadow to make it appear that the napkin was sitting above everything else:
- Distance: 0; Spread: 0; Size: 27px; Color: #000
I used a stock texture of a coffee stain (to give a little more authenticity to our coffee site and napkin). You may need to tinker with the opacity until it looks right. You can also try setting the Blending Mode of the stain to Multiply to make it stand out a bit more.
As for the rest of the logo, I chose a handwriting font and quickly drew a coffee cup. Nothing too tricky here.
We’ll now create that translucent search box. Create a new Layer Group, below the “Yellow Bar” layers (because we want the search bar to appear like a tab sticking out below the header). Your layer stack should be something along these lines:
We’ll start by creating the rounded rectangle that has the search bar in it. Grab the Rounded Rectangle tool and create a rectangle that is 300px wide and about 70px tall. Make sure that the rectangle fits in our “right column gutter” with the guides that we had created in the first step of this tutorial.
- Rename this layer to “container”
- Set “container”s Fill to 0%
- Add a Drop Shadow: Color: #000000; Opacity: 45%; Angle: 120 degrees; Distance: 1px; Spread: 0px; Size: 5px
- Add a Gradient, from Transparent to #3c2014
The result should look like this:
Next we’ll create the input box with the Rounded Rectangle tool. Create a rectangle, with Radius 5px, Width: 280px, Height: 30px. Center this new rectangle within the “container” rectangle you previously created. Rename this layer “input”
- Set “input” Fill to 0%
- Color Overlay: #61301a at 43% Opacity
- Inner Shadow: Color #000000; Angle: 120 degrees; Distance: 1; Choke: 0; Size: 5px
Grab the text tool and add some text with #af8753 as your color. Choose your favorite stock icon (I recommend using IconFinder for icons).
3 Introductory Boxes — Browse/Particpate/Enjoy
Now that we have the entire header created, we can now get into the real content. We’ll create those 3 main buckets of content first. Once again, grab the rounded rectangle tool with a radius of 20px and create 3 rounded rectangles in the 3 columns we had created earlier.
To get these boxes to look like what I just showed in the screenshot, apply the following layer styles:
I found some great coffee icons on the web that fit the design perfectly, which I used on these 3 sections. Once again, we’re just making use of our resources — and no sense in recreating the wheel here.
I then added a heading, using the same font Georgia, and some bulleted text, and this section is done.
Since the design uses transparency throughout the design, I felt the table styles shouldn’t be any different. The table is clean and simple, which helps it blend into the design perfectly.
Grab the marquee tool and create a square selection where you’d like your table to be. My table is 700px wide (following the guidelines we set earlier), and 220px tall.
Create a new layer and fill this layer (Shift+F5) with a darker brown (I chose #3c2014). Rename this layer to “table bg” and set the opacity to 70%. Now using the single line selection tool, we’ll create the separation between columns and rows. Once you’ve selected where you want your divisions to be, hit Delete and remove the filled pixels from the “table bg” layer.
You should now have a nice table grid like this:
I use Georgia to fill in the cells with text, and I’ll leave that up to you to choose colors/sizes. Make sure to add the main heading, and table headings.
Now we’ll create the ratings icons. For the “price” ratings, I chose a font with a thick dollar sign and applied some layer styles to it. When you find your font, type in 4 dollar signs. Duplicate this layer, then shift it right and type in 1 dollar sign (they will have separate layer styles applied to them). For the “active” yellow dollar signs, we’ll apply the following layer styles:
And for the inactive dollar signs, we want them to look inset (as if they aren’t filled). We’ll be applying different layer styles here:
For the star rating, I used the Photoshop Custom Shape tool and chose the star. Same technique as we used for the dollar signs (simply Copy/Paste the Layer styles from above) to these stars.
Your result should be along these lines:
Group this single row you created and Duplicate the group twice, shifting the row downward to fit in the grid you created earlier. The final result should look like this:
Most Active Users
Our last main section is the most active users list. We’re continue our use of Georgia, but adding a nice touch for those users that don’t have avatars. You will see the pattern is actually from the icon in the “Browse” box near the top — the steam coming from the mug. Another fine detail to tie the designer together. Here’s how you create it.
In our right column gutter, add the heading (reuse what you had created for “Recent Reviews”) and fill a rectangle area with 40% Opacity (color doesn’t matter here). Name this layer “container”, and then we’ll add some Layer Styles (Color Overlay & Stroke) to it:
The result should be an opaque box with a nice outer border that is darker than the inner background:
For the avatar, use the marque tool to create a 50px by 50px selection. Create a new layer, and fill your selection with any color (Shift+F5).
Now we’ll add some Layer Styles to make this avatar look a little better for those users that do not have an avatar set.
Add some text for the user’s name and country, and the steam swirls from the coffee cup, and duplicate the row a few times to fill the space.
Finally, the footer. To give a little separation, there is a dark brown to transparent gradient from top to bottom to provide a visual line to break up the two sections. To create this separation, use the marquee tool to make a selection and fill the selection with a gradient (brown to transparent). Adjust the opacity of the gradient until you can see the patterns from the background shine through.
Once again, we’ll use Georgia here to create some supplemental links about the site. I used 18px for the links, and 14px for the Copyright notice below. Make sure the left side is aligned with the guidelines we created earlier.
The finishing touch is reusing the coffee cup icon from the “Browse” box above in the lower right corner; once again aligning the right side with the guidelines.
Not so hard right? It’s pretty simple when you can break it into piece, reusing some of the same styles and techniques you’ve done over and over again. The sliced files are also included, so you can see how this was coded. A lot has changed since I designed & coded this, and many of the images could probably be recreated with CSS3 and gradients, but almost 3 years ago, this is how I had done it. You may have seen this design at www.coffeenatic.com; now that the site is gone, I thought it would be a good idea to share it with everyone as I received such positive feedback about it. Hope you enjoyed it!