Updated with the HTML Coding Tutorials! - Not long after Webdesigntuts launched, we posted this excellent tutorial that details the process of designing a warm and cheerful home page in Photoshop. After high demand, we’ve started taking that completed design and we're converting it into a standards-compliant HTML and CSS web page! Along the way, we’ll review a variety of nifty techniques that will help you to improve your own workflow.
Even better, when Nettuts hits 80,000 RSS subscribers, Jeffrey has agreed to take things even further and convert the finished product into a custom WordPress theme. Check out our progress below.
The PSD to HTML Coding Tutorials
Jeffrey Way has produced some spectacular coding tutorials at our sister site Nettuts on converting this design from PSD to HTML, so do yourself a favor and check them out once you've completed the design portion! There are 8 chapters total (we're up to Step 8 at the moment), and they are well worth checking out if you've ever had any questions about converting a PSD to HTML/CSS.
The Design Phase
In this tutorial we're about to learn how to design a warm, cheerful, and cozy interface for a portfolio / blog Website in Adobe Photoshop. As we go through this tutorial, we'll work with: Simple shapes (rectangles, lines, arrows, etc), layer styles (lots of them actually!), layer masks, patterns, character and paragraph styles, and so many other design and Photoshop techniques that you can adapt to your Website interface design workflow.
Step 1
To keep everything aligned we're going to use 960s Grid System (Get it from here). Once downloaded, open up the file "960_grid_24_col.psd".
The height of the current document is smaller than our final design. So, we'll go to Image > Canvas Size > Height: 1820px, Anchor: Top center.
We also need to make sure that our Rulers and Guides are viewed. So, we'll go to View > Extras / Rulers / Snap (so that our objects snap in alignment with our Guides).
Let's fill our background with a sloid color. Select the layer “Background,” right-click on it, and choose: Layer from background, and give it a meaningful name (for example: “bg”).
Now, using the Rectangular Marquee Tool (M), create a selection over the whole canvas, set your foreground color to: #f8eedf, then click Shift+Backspace to fill your selection.
Step 2
Let's start creating our header. Using the Rectangular Marquee Tool (M), or the Rectangle Tool (U) (or whatever tool you prefer to use), create a rectangle / selection of 1020x100px and fill it with any color just for now.
Go ahead and apply a Gradient Overlay to your header, by right-clicking on our layer > Blending Options > Gradient Overlay > use the image below as a reference:
Now, in order to stop our header background from looking flat, we'll apply a simple Noise texture. So, create a new layer (obviously it needs to be above the background layer itself), create a selection over the header background, and then fill it (by clicking Shift+Backspace) with this color value: #ffc05e.
Go to Filter > Noise > Add Noise > Amount: 48px, Distribution: Gaussian. Change this layer's Blend Mode to: Luminosity, and take its Opacity down to: 5%.
Step 3
It's time to type the name of our Website. Grab the Horizontal Type Tool (T), type your Website name according to the following character settings:
- Font Family: Archer (get it from typography.com)
- Size: 30pt
- Weight: Bold
- Anti-aliasing setting: Crisp
- Color: #ffffff
- Kerning: Optical
- Tracking: 50
Apply a Drop Shadow to our text using the settings shown in the image below:
To make sure that the Website name is aligned vertically with the header background, select both layers, then click on “Align vertical centers” which you can find in the Control panel.
Step 4
In this step, we'll place the social media icons. We'll start by downloading this really awesome social media icons, by KomodoMedia, and then placing four icons like in the image below:
In order to make sure that the spaces between the four icons are even. Select the four layers, and click on: Distribute horizontal centers in the control panel.
Let's now create a separator next to our icons. Using the Line Tool (U), create two lines each of them should be 1x60px, fill the one on the left with this color value: #ffd593, and the one on the right with this color value: #c08c3a.
Also, make sure to leave 20px of horizontal white space between the two lines and the four icons.
Select the Gradient Tool (G), open up the Gradient Editor dialogue box, set your gradient settings according to the image below.
Then, right-click on the layer of one of the lines we just created, choose: Add layer mask.
Drag with the Gradient Tool (G) from top to bottom. Do the same with the layer of the other line (or, you can just copy the layer mask and paste it in the other layer).
Step 5
It's time to start working on the navigation bar. Select the Rectangular Marquee Tool (M), create a selection of 1020x600px, and fill it with this color value: #40312a.
Using the Single Row Marquee Tool, create a 1020x1px, and fill it with this color value: #f9ba59.
We'll add a highlight by creating a selection of 1020x1px, filling it with this color value: #735a4f, and taking its Opacity down to: 70%.
Step 6
In this step, we'll create our navigation text. So, using the Horizontal Type Tool (T), type the word “Home” using the following character settings:
- Font Family: Gotham Rounded (get it from typography.com)
- Size: 16pt
- Weight: Medium
- Anti-aliasing setting: Crisp
- Color: #2c8897
- Kerning: Metrics
- Tracking: 50
Then, apply a Drop Shadow to it according to the following image:
In a new text layer, type the rest of the navigation text, using the same character settings we used above, except that this time we'll change the color value to: #ffffff.
Again, apply a Drop Shadow to this layer according to the following image:
Step 7
Now let's create our search bar, why don't we? We'll start by typing the word “SEARCH” using the same character settings we've applied to the navigation text, but this time we'll change the font weight to: Book. We'll also apply to it the same Drop Shadow we've applied to the word “Home”.
It's time to create the input field. Using the Rounded Rectangle Tool (U), create a 190x25px rectangle, with 3px radius, fill it with this color value: #2c8797, and apply a Layer Style to it, according to the following image:
Try finding or creating a very simple magnifying glass icon, place it like in the image below, and don't forget to apply the same Drop Shadow we've applied to the word “SEARCH” to this icon.
Step 8
Let's start working on the featured / welcome area. Using the Rectangular Marquee Tool (M), create a selection of: 1020x400px, and fill it with this color value: #deccaaa.
We'll create a simple and subtle pattern to make our background look more interesting. Go ahead and create a new document of 25x25px, and fill its background with this color value: #deccaaa.
Using the Ellipse Tool (U) create a circle of around 4x4px, fill it with: #aa9364, and make sure that's aligned to the center of the document.
Create another copy of this circle, nudge it down two pixels, and change its fill color to: #f2e5cb.
Go to Edit > Define Pattern > Give it a name.
Apply the following Layer Style to the background layer (the one we created at the beginning of this step):
Step 9
Drag a couple of Horizontal Guides according to the following guide:
Using the Rounded Rectangle Tool (U), create a 950x260px rectangle, with 5px radius, and fill it with this color value: #40312a.
Apply an Inner Shadow to it. Use the image below for reference:
Apply a Noise effect to this rectangle (we've already done that to the background of our header), add layer mask to this layer, and drag from top right to down left with a Black to White Linear Gradient.
Step 10
Create a rectangle or selection of 230x250px, fill it with any color, align it according to the following image, and apply Layer Style to it also according to the following image:
Go to File > Place > and place an image of a featured design project. Right-click on this layer > Create Clipping Mask.
Step 11
Now, we'll create a shadow for our image. So, using the Ellipse Tool (U), create an ellipse like the one in the image below. Then, go to Filter > Blur > Gaussian Blur > Radius: 3.0px.
Open up your Gradient Editor, and set your settings according to the following image. Create a clipping mask for the ellipse's layer, and drag with the Gradient Tool (G) from right to left with a Linear Gradient. Also, make sure to hold down the Shift key while dragging to constrain your angel.
We'll place another image. But the only thing we'll change is that the holder of our image will be: 230x220px.
Step 12
It's time for some welcoming text. Grab the Horizontal Type Tool (T), and type a welcoming title, using the following character settings:
- Font Family: Archer
- Size: 24pt
- Weight: Bold
- Anti-aliasing setting: Crisp
- Color: #3da2b4
- Kerning: Optical
- Tracking: 50
Now, type some text, using the following character and paragraph settings:
- Font Family: Verdana
- Size: 12pt
- Weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ffffff
- Kerning: Metrics
- Tracking: 0
- Leading: 18pt
- Paragraph: Justify all
Step 13
Let's create our two call-to-action buttons. Using the Rounded Rectangle Tool (U), create a 160x45px rectangle, with 5px radius, and fill it with any color for now. Also, make sure to align it according to the following image:
Apply a noise effect to this button (we've already done that several times). Add layer mask, and using a Black to White Linear Gradient drag from top to bottom.
Apply a Layer Style to this layer. Use the image below as a reference:
Using the Horizontal Type Tool (T), type something inside that button (for example: “Learn More”), using the following character settings:
- Font Family: Gotham Rounded
- Size: 16pt
- Weight: Bold
- Anti-aliasing setting: Crisp
- Color: #ffffff
- Kerning: Optical
- Tracking: 50
Apply a Drop Shadow to this text layer. Settings can be seen in the image below:
Make another copy of this button, and make sure to align it according to the following image:
Step 14
Let's go ahead and create a Breadcrumb. Using the Rounded Rectangle Tool (U), create a 950x40px rectangle, with 5px radius, align it like the image below, and apply a Gradient Overlay to it according to the following image:
Using the Horizontal Type Tool (T), type some text that shows where the user is, and apply the following character settings to your text:
- Font Family: Archer
- Size: 13pt
- Weight: Bold
- Anti-aliasing setting: Crisp
- Color: #ffffff
- Kerning: Metrics
- Tracking: 50
Then, apply a Drop Shadow to your text. Settings can be found in the image below:
Using the Polygon Tool (U), create a 12x12px triangle, and fill it with this color value: #e0cfad.
Step 15
In this step, we'll create a simple separator that consists of three lines that set on top of each other. So, using the Line Tool (U), create a 1020x2px line and fill it with this color value: #bba67b.
Then, create another line of 1020x1px and fill it with this color value: #e6d6b8.
And finally, create yet another line of 1020x1px and fill it with this color value: #bba67b.
Step 16
Drag a couple of horizontal Guides according to the following image:
The first section of our content area will be the “From The Blog” section. Grab the Horizontal Type Tool, type a title using the following character settings:
- Font Family: Archer
- Size: 24pt
- Weight: Bold
- Anti-aliasing setting: Crisp
- Color: Any color for now
- Kerning: Optical
- Tracking: 50
Apply a Layer Style to this text layer, according to the following image:
Type the name of the first blog post, using the following character settings:
- Font Family: Gotham Rounded
- Size: 24pt
- Weight: Light
- Anti-aliasing setting: Crisp
- Color: #40312a
- Kerning: Optical
- Tracking: 50
Type some details about the blog post, using the following character settings:
- Font Family: Archer
- Size: 13pt
- Weight: Bold Italic
- Anti-aliasing setting: Crisp
- Color: #ce953c
- Kerning: Metrics
- Tracking: 0
We'll now create a holder for the lead image of our blog post. So, using the Rounded Rectangle Tool (U), create a 550x140px, with 5px radius, fill it with any color, and then apply a Layer Style to it, according to the following image:
Place your lead image, and create Clipping Mask for this layer.
Type three lines of text as an introduction of our blog post, using the following character settings:
- Font Family: Verdana
- Size: 12pt
- Weight: Regular
- Anti-aliasing setting: Smooth
- Color: #000000 - #247184
- Kerning: Metrics
- Tracking: 0
- Leading: 18pt
Create another copy of this blog post, and make sure to align the elements according to the following image:
Step 17
Grab the Rectangle Tool (U), and create a 110x30px rectangle, fill it with any color, and apply a Layer Style to it according to the following image:
Again, apply a noise effect to this button, apply layer mask, and drag from bottom to top with a Black to White Linear Gradient.
Using the Line Tool (U), create a 110x1px line, and fill it with this color value: #b2988d.
Type a word inside the rectangle ("The Blog," for example), using the following character settings:
- Font Family: Archer
- Size: 16pt
- Weight: Bold
- Anti-aliasing setting: Crisp
- Color: #ffffff
- Kerning: Optical
- Tracking: 50
Apply a Drop Shadow to it according to the following image:
Step 18
We'll start this step by dragging a new horizontal Guide according to the following image:
It's time to start working on the sidebar. Grab the Rectangular Marquee Tool (M), create a selection of 385x720px, and fill it with any color for now.
Apply a Gradient Overlay to this layer, according to the following image:
Add layer mask to this layer, then using the Gradient Tool (G), drag with a Black to White Linear Gradient, from right to left.
Using the Line Tool (U), create a 1x720px line, and fill it with this color value: #dfcdb2.
Add layer mask to this layer, and again using the Gradient Tool (G), drag with a Black to White Linear Gradient, but this time from bottom to top.
Duplicate the layer of the line we've just created, nudge it 1px to the left, and change its color to: #fff7ea.
Step 19
We'll create our sidebar tab. Using the Rounded Rectangle Tool (U), create a 310x200px rectangle, with 5px radius, fill it with any color, then apply Layer Style to it according to the following image:
Drag a new horizontal Guide according to the following image:
Ctrl+Click on the thumbnail of this layer to load its pixels. Grab the Rectangular Marquee Tool (M), set its selection settings to: Subtract from selection, then make a selection over the areas shown below to deselect them. Now you're left with an area that's still selected, create a new layer, and fill it with this color value: #40312a.
Using the Line Tool (U), create two lines next to each other (see the image below), each one of them should be 1px. Fill the one on the left with this color value: #134a56, and the one on the right with this color value: #257386.
Do the same again, but this time horizontally.
Step 20
Type the word “Comments” in the first tab, using the following character settings:
- Font Family: Archer
- Size: 16pt
- Weight: Medium
- Anti-aliasing setting: Crisp
- Color: #ffffff
- Kerning: Metrics
- Tracking: 50
Apply the same Drop Shadow we've applied to the breadcrumb text, to it.
Type the words “Categories“ and “Archives” using the following character settings:
- Font Family: Archer
- Size: 16pt
- Weight: Medium
- Anti-aliasing setting: Crisp
- Color: #ffffff
- Kerning: Metrics
- Tracking: 50
Make sure to align them like the image below. Also, apply a Drop Shadow to it according to the following image:
Step 21
Type an example of a comment, using the following character settings:
- Font Family: Verdana
- Size: 12pt
- Weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ffffff
- Kerning: Metrics
- Tracking: 0
- Leading: 18pt
Type some details about the comment, using the following character settings:
- Font Family: Archer — Gotham Rounded
- Size: 12pt
- Weight: Bold Italic — Medium
- Anti-aliasing setting: Crisp
- Color: #f8eedf
- Kerning: Optical
- Tracking: 0
Create a copy of this comment, and create between them a separator like the one we created in Step 19.
Step 22
Create another title (that says: “WHO WE ARE”) like the one in the image below:
Using the Rectangle Tool (U), create a 310x100px rectangle, apply a Stroke to it (settings can be seen in the image below), and then place an image inside that rectangle.
Using the Horizontal Type Tool (T), type some words about who you are, using the following character settings:
- Font Family: Verdana
- Size: 12pt
- Weight: Regular — Bold
- Anti-aliasing setting: Smooth
- Color: #000000 — #247184
- Kerning: Metrics
- Tracking: 0
Step 23
Create another title (that says: “SPONSORS”). Then, using the Rectangle Tool (U), create a 138x138px, and fill it with this color value: #febf5d.
Place an image of an ad like the image below:
Create a copy of this ad spot.
Using the Line Tool (U), create two lines next to each other, each one of them should be 1x95px, fill the one on the left with this color value: #ffffff, and the one on the right with this color value: #cfbea3.
Open up your Gradient Editor, set your settings like the image below, select one of the layers of the two lines, add layer mask, and then drag from top to bottom with this Gradient. Also, do the same with the layer of the other line.
Step 24
Drag a new horizontal Guide according to the following image:
Using the Rectangular Marquee Tool (M), create a selection of 1020x420px, fill it with any color, then apply a Gradient Overlay to it, according to the following image:
Using the Single Row Marquee Tool, create a selection, and fill it with this color value: #b2988d.
Step 25
Drag two horizontal Guides according to the following image:
Using the Horizontal Type Tool (T), type the first title of the footer, using the following character settings:
- Font Family: Archer
- Size: 24pt
- Weight: Bold
- Anti-aliasing setting: Crisp
- Color: Any color
- Kerning: Optical
- Tracking: 50
Then, apply a Layer Style to it according to the following image:
We'll now create our contact form. Well, I don't have to say anything, the image below says it all.
Apply the following Layer Style to all the fields / rectangles we've just created:
Now, type some text inside these fields that indicates what they're for, using the following character settings:
- Font Family: Archer
- Size: 13pt
- Weight: Bold
- Anti-aliasing setting: Crisp
- Color: 247184
- Kerning: Metrics
- Tracking: 0
Step 26
Let's create the “SUBMIT”. Using the Rectangle Tool (U), create a 110x30px rectangle, and fill it with this color value: #febf5d. Then, apply a Layer Style to it according to the following image:
Again, apply a Noise filter, add layer mask, and then drag from top to bottom with a Black to White Linear Gradient.
Ctrl+Click to select the pixels of the button background. Then, go to Select > Modify > Contract > Contract By: 1px, and fill this selection with: #ffffff.
Again go to Select > Modify > Contract > Contract By: 1px, then hit Delete.
Deselect the selection, and take the Opacity of this layer down to: 15%.
Type the word “SUBMIT” inside the button, using the following character settings:
- Font Family: Archer
- Size: 16pt
- Weight: Bold
- Anti-aliasing setting: Crisp
- Color: #ffffff
- Kerning: Optical
- Tracking: 50
And then apply a Drop Shadow to it according to the following image:
Step 27
The second section of our footer will contain images of our recent projects. So, using the Rectangle Tool (U), create a 125x95px rectangle, apply a Stroke to it, place an image, and create clipping mask to it.
Keep adding images, and create yet another button.
Step 28
The third and the final part of our big footer is is the Twitter stream. So, using the Horizontal Type Tool (T), type some text as an example of tweet, using the following character settings:
- Font Family: Verdana
- Size: 12pt
- Weight: Regular
- Anti-aliasing setting: Smooth
- Color: #f8eedf
- Kerning: Metrics
- Tracking: 0
Then, type some details about the tweet, using the following character settings:
- Font Family: Archer
- Size: 12pt
- Weight: Bold Italic
- Anti-aliasing setting: Smooth
- Color: #2e91a0
- Kerning: Metrics
- Tracking: 0
Keep adding more examples of tweets...Also, create a “follow us” button like the one below:
Put each of the three sections in an individual Layer Group. Select the three Groups, then click on Distribute horizontal centers in the control bar.
Step 29
It's time now to create the small footer. Using the Rectangular Marquee Tool (M), create a selection of 1020x70px, and apply a Gradient Overlay to it according to the following image:
Apply a Noise effect to this layer (the same effect we've applied to the header).
Using the Single Row Marquee Tool, create a selection, and fill it with this color value: #38a4bs.
Using the Horizontal Type Tool (T), type the copyright notices, using the following character settings:
- Font Family: Archer
- Size: 13pt
- Weight: Medium
- Anti-aliasing setting: Crisp
- Color: #ffffff
- Kerning: Metrics
- Tracking: 50
Then, apply a Drop Shadow to it, according to the following image:
And finally, type a small navigation, using the same character settings, and Drop Shadow settings mentioned above.
Conclusion
That's it, folks! We're done with our Website interface design. Really hope you've found this tutorial useful. And if you've any comments, please leave them below, and will make sure to respond to them. Also, don't forget to check out the follow-up part on how to get this design live!
