Contents

[hide]

1 Output Sanitation

1.1 Integers

1.2 HTML/XML

1.2.1 HTML/XML Fragments

1.2.2 Text Nodes

1.2.3 Attribute Nodes

1.2.4 JavaScript

1.3 URLs

1.4 Database

1.5 Filesystem

1.6 HTTP Headers

2 Input Validation

2.1 Slugs

2.2 HTML

2.3 Email

2.4 Arrays

3 Validation Philosophies

3.1 Whitelist

3.2 Blacklist

3.3 Format Detection

3.4 Format Correction

4 Changelog

Output Sanitation

The method of data sanitation depends on the type of data and the context in which it is used. Below are some common tasks in WordPress and how they should be sanitized.

Integers

intval( $int ) or (int) $int

If it’s supposed to be an integer, cast it as one.

absint( $int )

Ensures that the result is nonnegative.

HTML/XML

Note that many types of XML documents (as opposed to HTML documents) understand only a few named character references: apos, amp, gt, lt, quot. When outputting text to such an XML document, be sure to filter any text containing illegal named entities through WordPress’s ent2ncr( $text ) function.

HTML/XML Fragments

wp_kses( (string) $fragment, (array) $allowed_html, (array) $protocols = null )

KSES Strips Evil Scripts. All untrusted HTML (post text, comment text, etc.) should be run through wp_kses().

To avoid having to pass an array of allowed HTML tags, you can use wp_kses_post( (string) $fragment ) for tags that are allowed in posts/pages or wp_kses_data( (string) $fragment ) for the small list of tags allowed in comments.

wp_rel_nofollow( (string) $html )

Adds a “rel=’nofollow’” attribute to any <a> link.

Text Nodes

esc_html( $text ) (since 2.8)

Encodes < > & ” ‘ (less than, greater than, ampersand, double quote, single quote). Very similar to esc_attr.

esc_html__ (since 2.8)

Translates and encodes

esc_html_e (since 2.8)

Translates, encodes, and echoes

esc_textarea (since 3.1)

Encodes text for use inside a textarea element.

wp_specialchars( $string, $quote_style = ENT_NOQUOTES, $charset = false, $double_encode = false ) (deprecated since 2.8)

Encodes < > & (less than, greater than, ampersand). Will never double encode entities. Since 2.8, if called with exactly 1 argument, it will encode quote characters as well (via esc_html), as extra protection for older plugins.

htmlspecialchars( $text, ENT_NOQUOTES )

Encodes < > &. Will double encode html entities if run twice.

Attribute Nodes

esc_attr( $text ) (since 2.8)

attribute_escape( $text ) (deprecated since 2.8)

Encodes < > & ” ‘ (less than, greater than, ampersand, double quote, single quote). Will never double encode entities. See esc_url() in #URLs

esc_attr__

Translates and encodes

esc_attr_e

Translates, encodes, and echoes

htmlspecialchars( $text, ENT_QUOTES )

Encodes < > & ” ‘. Will double encode html entities if run twice. See esc_url() in #URLs

JavaScript

esc_js( $text ) (since 2.8)

js_escape( $text ) (deprecated since 2.8)

Escapes ‘, encodes “, and fixes line endings.

URLs

esc_url( $url, (array) $protocols = null ) (since 2.8)

Always use esc_url when sanitizing URLs (in text nodes, attribute nodes or anywhere else). Rejects URLs that do not have one of the provided whitelisted protocols (defaulting to http, https, ftp, ftps, mailto, news, irc, gopher, nntp, feed, and telnet), eliminates invalid characters, and removes dangerous characters. Deprecated since 3.0: clean_url()

This function encodes characters as HTML entities: use it when generating an (X)HTML or XML document. Encodes ampersands (&) and single quotes (’) as numeric entity references (&#038, &#039).

esc_url_raw( $url, (array) $protocols = null ) (since 2.8)

For inserting an URL in the database. This function does not encode characters as HTML entities: use it when storing a URL or in other cases where you need the non-encoded URL. This functionality can be replicated in the old clean_url function by setting $context to db.

urlencode( $scalar )

Encodes for use in URL (as a query parameter, for example)

urlencode_deep( $array )

urlencodes all array elements.

Database

$wpdb->insert( $table, (array) $data )

$data should be unescaped (the function will escape them for you). Keys are columns, Values are values.

$wpdb->update( $table, (array) $data, (array) $where )

$data should be unescaped. Keys are columns, Values are values.  $where should be unescaped. Multiple WHERE conditions are ANDed together.

$wpdb->update(

‘my_table’,

array( ’status’ => $untrusted_status, ‘title’ => $untrusted_title ),

array( ‘id’ => 123 )

);

$wpdb->prepare( $format, (scalar) $value1, (scalar) $value2, … )

$format is a sprintf() like format string. It only understands %s and %d, neither of which needs to be enclosed in quotation marks.

$wpdb->get_var( $wpdb->prepare(

“SELECT something FROM table WHERE foo = %s and status = %d”,

$name, // an unescaped string (function will do the sanitation for you)

$status // an untrusted integer (function will do the sanitation for you)

) );

esc_sql( $sql ) (since 2.8)

$wpdb->escape( $text )

Escapes a single string for use in a SQL query. Glorified addslashes().

$wpdb->escape_by_ref( &$text )

No return value.

like_escape( $string )

Sanitizes $string for use in a LIKE expression of a SQL query. Will still need to be SQL escaped (with one of the above functions).

Filesystem

validate_file( (string) $filename, (array) $allowed_files = “” )

Used to prevent directory traversal attacks, or to test a filename against a whitelist. Returns 0 if $filename represents a valid relative path. After validating, you must treat $filename as a relative path (i.e. you must prepend it with an absolute path), since something like /etc/hosts will validate with this function. Returns an integer greater than zero if the given path contains .., ./, or :, or is not in the $allowed_files whitelist. Be careful making boolean interpretations of the result, since false (0) indicates the filename has passed validation, whereas true (> 0) indicates failure.

HTTP Headers

Header splitting attacks are annoying since they are dependent on the HTTP client. WordPress has little need to include user generated content in HTTP headers, but when it does, WordPress typically uses whitelisting for most of its HTTP headers.

WordPress does use user generated content in HTTP Location headers, and provides sanitation for those.

wp_redirect($location, $status = 302)

A safe way to redirect to any URL. Ensures the resulting HTTP Location header is legitimate.

wp_safe_redirect($location, $status = 302)

Even safer. Only allows redirects to whitelisted domains.

Input Validation

Many of the functions above in #Output_Sanitation are useful for input validation. In addition, WordPress uses the following functions.

Slugs

sanitize_title( $title )

Used in post slugs, for example

sanitize_user( $username, $strict = false )

Use $strict when creating a new user (though you should use the API for that).

HTML

balanceTags( $html ) or force_balance_tags( $html )

Tries to make sure HTML tags are balanced so that valid XML is output.

tag_escape( $html_tag_name )

Sanitizes an HTML tag name (does not escape anything, despite the name of the function).

Email

is_email( $email_address )

returns boolean false if invalid, or $email_address if valid

Arrays

array_map( ‘absint’, $array )

Ensures all elements are nonnegative integers. Replace callback with whatever is appropriate for your data.

Validation Philosophies

There are several different philosophies about how validation should be done. Each is appropriate for different scenarios.

Whitelist

Accept data only from a finite list of known and trusted values.

$possible_values = array( ‘a’, 1, ‘good’ );

if ( !in_array( $untrusted, $possible_values ) )

die( “Don’t do that!” );

// Be careful here with fancy breaks and default actions.

switch ( $untrusted ) {

case ‘a’ :

…

break;

…

default :

die( “You hoser!” );

}

Blacklist

Reject data from finite list of known untrusted values. This is very rarely a good idea.

Format Detection

Test to see if the data is of the correct format. Only accept it if it is.

if ( !ctype_alnum( $data ) )

die( “Your data is teh suX0R” );

if ( preg_match( “/[^0-9.-]/”, $data ) )

die( “Float on somewhere else, jerky” );

Format Correction

Accept most any data, but remove or alter the dangerous pieces.

$trusted_integer = (int) $untrusted_integer;

$trusted_alpha = preg_replace( ‘/[^a-z]/i’, “”, $untrusted_alpha );

$trusted_slug = sanitize_title( $untrusted_slug );

$wpdb->update(
  'my_table',
  array( 'status' => $untrusted_status, 'title' => $untrusted_title ),
  array( 'id' => 123 )
);

$wpdb->get_var( $wpdb->prepare(
  "SELECT something FROM table WHERE foo = %s and status = %d",
  $name, // an unescaped string (function will do the sanitation for you)
  $status // an untrusted integer (function will do the sanitation for you)
) );

$possible_values = array( 'a', 1, 'good' );
if ( !in_array( $untrusted, $possible_values ) )
  die( "Don't do that!" );

// Be careful here with fancy breaks and default actions.
switch ( $untrusted ) {
case 'a' :
  ...
  break;
...
default :
  die( "You hoser!" );
}

if ( !ctype_alnum( $data ) )
  die( "Your data is teh suX0R" );
if ( preg_match( "/[^0-9.-]/", $data ) )
  die( "Float on somewhere else, jerky" );

$trusted_integer = (int) $untrusted_integer;
$trusted_alpha = preg_replace( '/[^a-z]/i', "", $untrusted_alpha );
$trusted_slug = sanitize_title( $untrusted_slug );

Updated with the Coding Tut! This time I’ve got for you a fun tutorial for everyone. In Part 1 we will create a very original design for all the comicbook fans out there. We will create this blog layout from scratch using several tricks in Photoshop to make it look awesome. Then in Part 2 we will learn how to slice it, code it, and get it ready to be converted into a blog CMS theme. Are you ready?

---

The Coding Phase is Available

The coding phase of the tutorial (Part 2) is now available over at our sister site, Nettuts! When you’re finished with this design phase, head on over to Nettuts to slice and code it in HTML/CSS. Thanks for all of the feedback and requests for the followup everyone!

---

Before Getting Started

Let’s get it started! In order to speed up the reading I will avoid some of the most basic explanations (like how to create a layer mask or how to edit the handlers or Beziers of a vector shape). You will need some basic knowledge about Layers, Guides, Vector and Layer Masks, Brushes, the Pen Tool, and working with Typography (Character and Paragraphs).

The assets for this tutorial are:

• The Paper Texture – Scraps
• Sunburst Shapes
• Comic fonts from Font Squirrel (Komika Title and Komika Text)
• Social Media Icon Pack by Komodo Media

The first step is creating a mock up, doodle, or even just a sketch the layout on a napkin. Having a rough draft of the site’s structure makes easy placing the elements on the design. Below you will see a simple sketch showing the following elements:

A header, with the logo, search bar and social media links, besides the main navigation bar.
A banner, with featured posts, notice how the post text is placed over the image into a talk bubble to depict the “comic” style.
A content area, with a list of posts displayed in two columns, each post have a picture associated and the text is shown into a talk bubble as well.
A footer, with a list of the blog’s categories, archive and popular post and recent comments and the copyright information.

Step 1: Setting Up the Document

Open Photoshop, download the 12 columns Photoshop template from 960 Grid System or create a new document 960px with and make draw some Guides to the left and right borders.

Increase the working area to see how it looks on wider resolutions and increase the height as well. I’m setting the document dimensions to 1420px width and 1200px height. Finally go to Layer > New Fill Layer > Solid Color… and set a Black (#000000) background for the canvas.

Step 2: Header Background

Draw a horizontal Guide around 450px from the top border, we will use it as a reference guide to add a shade on top of the page. Using the Rectangle tool, draw a wide rectangle using this color as foreground (#AA0001). Then apply a Gradient Layer Mask (Black to White) to the rectangle in order to hide the bottom part of it.
Tip: do not ever use a Gradient Layer for backgrounds, because when increasing the height of the canvas (a very common practice in web design) the background gets distorted.

Step 1: Add a Texture to theBackground

Open the “Paper Texture” from the assets Copy and Paste it above the red gradient layer. Scale it in order to make it fit into the bounds of the design and change the layer’s Blending Mode to Linear Burn. We will slice this as a large image background, but for wider resolutions we need to subtle merging the edges of the paper with the black background, for this, using the Burn Tool, darken the areas close to the Left and Right edges of our paper texture. You can use a big and soft Brush (0% Hardness).

Always keep your layers organized, put both layers (”Paper” and “Rectangle”) into a folder named “Header Bg”.

Step 1: Sunbursts

Moving forward with the comic style, let’s add some sunburst stripes to create a dramatic background for the logo.

Open the “Sunburst” shapes from the assets. On the Custom Shape tool, choose your favorite sunburst shape an draw it over the red gradient layer. Place the shape to near to the left border of the 960 template (show the Guides to see the bounds). Apply to the “Sunburst” layer a Radial Gradient Layer Mask (white in the center and black in the outside). Change the Layer Opacity to 50%. Optional: using an irregular Brush, paint with Black over the Layer Mask to create a more grunge merge between the sunburst and the background.

Step 1: Halftone

In order to enforce the comic style, we will add some Halftone points over the header background. Create a new layer above the “Sunburst” layer, and render some Black and White Clouds in there (Filter > Render > Clouds). Then go to Filter > Pixelate > Color Halftone. Change the “Halftone” layer’s Blending Mode to Multiply and add a Layer Mask > Hide All to it. Then using a big and soft Brush (Color: White and Opacity and Flow to 75%) paint some areas of the layer mask to make visible only a bit of the halftone pattern.

Step 1: The Title

Now you have the header background finished, let’s add the Logo. First draw a reference Guide around 180 px below the top border, the logo shouldn’t be below that guide. Using the “Komika Title” font face from the assets type the title of the site (”Comicastic”) Font Size: 68pt and foreground color: #FFB401. Then Add more text element, like the exclamation sign or the slogan in white (font size 16pt).

Then using the Free Transform Tool rotate the text a few degrees left to make it look less formal. Try to get something like the image below, but remember not to place any element below the guide. Finally put all these layers into a folder labeled “Logo”.

Step 7: Logo Layer Styles

Add a Layer Style > Gradient Overlay (#EA9403 – #FFC501) a Stroke (Size:1px, Inside, #FCB600) and a Drop Shadow (Black, 50% Opacity, Distance and Size: 2px) to the “logo” layer. Use a similar Style to the slogan, but change the colors of the Gradient Overlay to #EDEDED - #FFFFFF and the Stroke to White (#FFFFFF). If you place the exclamation sign to the logo, you can try converting it into a shape (Layer > Type > Convert to shape) and distorting it a bit as shows the bottom of the image below.

Featured Posts Banner

Step 8: Background

Use the Rounded Rectangle Tool (Radius 5px) to draw a wide rectangle all across the banner below the logo as shows the image below, the height if the rectangle is up to you, I’m setting 250px. Then apply a Gradient Overlay (Colors: #DA7E00 – #F0AD00, Angle: 90°) and Stroke (Color: #F2AA00, Size: 1px, Position: Inside).Layer Styles to it.

Step 9: Changing the  Top Banner

Using the Direct Selection Tool (A) over our brand new rounded rectangle, grab the points of the top left corner and move them to the right (you can use the cursors for an accurate move). Then move the bottom right points a few pixels left.

Step 10: Adding the sliding picture container

Now, using the Rectangle Tool draw a gray rectangle inside the yellow banner (630px x 250px aprox.), you can leave the bottom part of the gray rectangle a few pixels away to the bottom of the yellow banner to create an out-of-bounds effect. Add a Stroke (Size: 1px, Position: Inside, Color: #FFFFFF) and a Drop Shadow (Color: #000000, Opacity:50%, Distance: 0px, Spread: 0px, Size: 5px) and try to place the rectangle as shows the image below. Finally, put both layers (Gray and Yellow rectangles) into a folder named ”Top Banner”.

Step 11: Main Navigation

Using the font family “Komika Text” type the pages navigation at the top right of the top banner, set the font Size to 18px and color: #FFFFFF. Put it on a folder named “Pages Navigation”, be sure this folder is behind the “Top Banner”. Then using the Rounded Rectangle Tool (Radius: 3px, Color: #EFA800), draw a rectangle just behind the first word of the navigation, name the layer “Selected Tab”. Next using the Direct Selection Tool (A) move the points of the bottom left as shows the image below. Next apply a Gradient Overlay to the “Selected Tab” layer (Colors: #F0A900 – #FEBF00, Angle: 90°). If you want to, you can add a very subtle Drop Shadow (Color: #000000, Opacity: 25%) to the navigation text.

Step 12: Add the banner images

To show an actual sample, paste any image over the banner. If the image is bigger that the rectangle you can use a Clipping Mask, for this paste the image above the gray rectangle, then Option / Alt – Click between the two layers, this will clip the image inside the rectangle no cropping needed.

Step 13: Banner Controls

Select the Custom Shape Tool and chose one of the arrows, and draw a couple one next to the other, both pointing left. Then Apply to both a Gradient Overlay (#6D0004 – #980000) and a Stroke (Size: 1px, Position: Inside, Color: #B20002). Put both arrows into a folder named “Prev” and using the Free Transform Controls and holding the Command / Ctrl key, distort the arrows a little bit. Then duplicate the folder and rename it to “Next”, move it to the right of the banner and go to Edit > Transform > Flip Horizontal to change its direction. Finally put both folders “Next” and “Prev” into a new folder named “Controls”.

Step 14: Controls Hover

Now duplicate the “Next” and “Prev” folders and apply a different layer style to the arrows in order to create a hover effect for each one. I’m Copying the Layer Style from the exclamation sing of the title.

Step 15: Halftone details

With the same process of Step 5, create a Halftone Layer above the yellow banner. With the “Halftone” layer selected do Command / Ctrl – Click over the yellow banner, then hit Command / Ctrl + Shift + I to invert the selection, then delete the exceeding. Change “Halftone” layer’s Blending Mode to Overlay and Opacity to 25%. Finally add a Layer Mask > Hide All and using a big soft White Brush, paint over some areas on the layer mask to make visible only a few portions of the pattern.

Step 16: Featured Article Talking Bubble

Now is time to add a field to put the featured post’s content. For this, using the Custom Shape Tool look for the Rounded Cornered and Rectangular talking bubble. Draw it over the “Featured Image” Banner and place it on the right as shows the image below. Before designing any of this features you need to do some research if it’s possible to achieve this kind of effect, even if you don’t know how to code, you can look for some existing libraries of Ajax (JQuery / MooTools) and see what is already done and working, and then adapt your design to an existing library.

Then, using the Direct Selection Tool (A) distort the shape of the bubble a little bit. Finally apply a Drop Shadow (Color: #000000, Opacity: 25%, Distance: 5px, Spread: 0px, Size: 10px).

Step 17: Featured Post Text

It’s time to add the title and a brief to our featured post. For the title use “Komika Title”, 18pt. #680001. For the Body text, use “Komika Text Tight”, Size: 16pt, Color: #1B1B1B. Place the text layers right aligned as shown on the image below.

Step 18: Comments Box and Post Meta

Now, add another bubble, but smaller this time, use this color as foreground: #9C0001 and add a Stroke layer style (Color: #D00000, Size: 1px, Position: Inside), just as shows the image below, then add the comments number with “Komika Title” font face, Color: #FFFFFF and Size: 24pt. And the word “Comments” with “Komika Title”, Size: 12pt, Color: #FFB301.

Finally add a small Meta (information about the post) below the post brief with “Tahoma” font, Size: 10pt, Color: #1B1B1B. If there’s no enough space to put the Meta text, you can use the Direct Selection Tool to increase the height of the featured post bubble box a little bit.

Tip: Do not ever transform a Vector Rounded Corner element using the Free Transform Tool in Photoshop, this will distort the corner, select the points you want to move using the Direct Selection Tool and then displace them.

Step 19: Featured Post Title’s background

Duplicate the featured post background bubble, hide the drop shadow, change the fill color to yellow (#FFC001) and rasterize it. Then, using the Rectangular Marquee Selection Tool, select all the yellow bubble below the title line, then Delete the selection. Next, add a line of border, with the “Bubble Title” layer selected, Command / Ctrl – Click over the “Bubble Background” Vector mask. Then Go to Edit > Modify > Contract and set the value to 1px. Finally, hit Command / Ctrl + Shift + I to invert the selection and delete it.

This is a good time to set everything related to the top banner organized into folders and add more detail if you want to, I’m adding a yellow line between the Post brief and the Meta.

Main Content

Step 20: Content Background

Now let’s move forward with the main content background, create a Folder named “Page Content” and draw a white (#FFFFFF) Rounded Corner Rectangle (5 px radius) several pixels height (If the original canvas size becomes too small at this time you can increase its size, just ensure to keep the top border as is).

Step 21: Post Image

It’s time to start adding content to the page, as default on blogs we will design a list of the latest posts.

Draw two squares (3 columns width aprox.) and place them as shows the image below. Doing the same process than step 12 add some images over the squares using them as Clipping Masks. Finally select the square and add a Stroke Layer Style to it (Color: #FFB801, Size: 1px, Position: Inside).

We will work over one of this images adding the content around it, and then duplicate it as many times as post want to show on the homepage.

Step 22: Add posts’ Titles and Categories.

Draw two wide rectangles, one yellow (#F2AA00) and another White with yellow border below (#FFB401). Over the yellow stripe, type the title of the post using “Komika Title”, Color: #670003, Size: 18pt. And on the white stripe, type the Categories names using “Komika Text Tight” Size: 13pt, Colors #212121 for links and #670003 when mouse over.

Step 23: Post brief and Meta

Draw a talking bubble again, over the picture and the yellow stripe, fill it with this Color: #333333 with a 1px Stroke (Color: #696969) and also apply the Drop shadow we did before on the banner. Then add the a sample brief text using “Komika Text Tight” Size: 14pt, Color: #FFFFFF, a sample Meta text using “Tahoma” 10pt Color #979797 and if you want to a line between both texts (#4B4B4B).

Step 24: Finishing the main content

To finish this part add a Comments bubble, basically repeating the process of Step 18. Then put everything on folders, I’m naming the post folder “A post”. Then, duplicate it (Command / Ctrl + Drag) and place it on the right. Repeat the process with two or three rows of post as shown at the bottom of the image below. Increase the height of the white background as needed to fit all the post in.

Step 25: Page Content Corner

To increase the “comic book” style, we will add a simple page curl at the bottom right of the white background.

First draw a Black Triangle at the bottom right corner (you can use the Pen Tool), then duplicate it and move the triangle making it a “reflex” of the black one, you can fill this copy with any other color. Next warp the second triangle making it a little curve. Then, apply to the warped triangle a Gradient Overlay using a nice mix of colors: (#9C0001 – #FE0000 – #9C0001) and change the Angle to anything that looks good according the angle of the curl, in this case 108 degrees. Next using a Soft Brush (Black, Opacity and Flow 50%) paint some shadows in a new layer behind the warped triangle. If you want to, add some points to the warped triangle in order to add a rounded corner to the tip just as shows the bottom of the image below. Finally, put all the curl related layers into a folder named “Page Curl”. Keep it handy because we are using it later.

Step 26: Footer Background

We are almost done, first create a folder named “Footer” and ensure is below the “Page Content” folder, inside it draw a red (#9C0001) circle, then apply a Gaussian Blur of at least 65px radius. Then transform the resultant blurred circle to make it match with the bounding guides.

Step 27: Background sunbursts

Now, with the Custom Shape Tool, select one of the Sunburst shapes and draw a black one in the middle, then down its Opacity to 50%. Then add the Halftone Pattern over the red glowing circle, hide it using a layer mask and show only some parts of it. Finally down the opacity of the red circle to 50%..

Step 28: Footer content background

We will add common elements of a blog such Categories and Archive on the footer.

Now, let’s add a background for the footer elements, draw a Rounded Rectangle (5px radius) Color:#1A1A1A and set its Fill value to 50%, making it around 3 columns wide. you can create copies of it to make fit 4 boxes at the footer.

Step 29: Footer content background – Curl

Select the first rectangle, (you can delete the others at this point). Then duplicate the “Page Curl” folder and place it inside the “Footer” folder, transform it to make it match with the bottom right corner of the rectangle, then change the colors of the gradient to different tones of gray. Finally add to the rectangle layer a Stroke style (1px, Inside, #242424).

Step 30: Categories

Now, add the title of the section, in this case “Categories” using “Komika Title”, Size: 14px Color: #F2AA00. Use guides to delimit the title baseline, keep it at least 20 px below the end of the page content background. Then add some rows as sample categories, using “Komika Text Tight”, Size: 16px, Color: #FFFFFF, and Red (#EC000A) as hover effect. As an additional detail for the hover effect, add a little yellow (#FFB301) arrow using the Custom Shape Tool. Put all the layers into a folder named “Footer Element”.

Step 31: Duplicate the footer section

Duplicate the “Footer element” folder and move it to the right, change the words to depict “Archives” this time.

Then duplicate the folder again but this time expand the translucent background to make it twice wider, on top, type the titles for “Popular Posts”, “Latest Posts” and “Recent Comments”, use yellow for the first one and gray for the other two. As you guess, this will have a similar functionality than a tabbed pane. Then add a little yellow triangle to mark the selected tab.

Step 32: Tabbed pane content

Since this part will have mostly lists of posts, lets add them, basically is a combination of “Komika Title” and “Komika Text Tight” with different colors (See the screenshot below). The first row will be a sample of the selected (hover) item, on this, add a black (#000000) rounded rectangle behind the text and add a Horizontal Gradient (Black to White) Layer Mask.

Finally, add a little Pager at the bottom of this section.

Step 33: Search Bar

It’s time to add some details to finish up our graphic. Let’s start with the search bar. Create a folder named “Search Bar” on top of everything, create a Rounded Rectangle (3px Radius, Color: #000000 with a Stroke Effect Size: 1px, Position: Inside, Color: #7C0000) as the search input, and a small rectangle for the search button; Copy the Layer Style of the selected item on the main navigation and paste it to the search button. For the actual button, type the word “Go!” over it with White, and apply the same Drop Shadow than the main navigation text (recycling layer styles is a great time saver). On the Search input, type the Word “Looking for something” using “Komika Text Tight” Color: #F9A600.

Then add a Rectangle behind all the layers inside “Search Bar”, fill it with a dark red #380001 (Fill: 50%) and apply a Stroke using this Color: #890101. Convert it to a Smart Object and apply a Layer Mask > Hide All to it, fill the mask with a Reflected Black – White Gradient to create the effect show at the bottom of the image below.

Step 34: Social Media Icons

Repeat the process of the search bar background but this time using a less height bar and with a sightly different Stroke color (#860001). Then type the word “Follow us” using “Komika title” and paste all the icons you want to add, you can use the mini icons from the assets. Don’t forget to keep your layers organized under folders.

Step 35: Footer navigation and copyright information

Finishing today’s work, let’s add the Footer navigation. Delimit the section with a white Line, masked with a reflected black – white gradient. Type the navigation links using Arial, Size 10px, Color: #515151 and highlight a hover effect with yellow: #F2AA00. Then add the copyright text Right aligned.

Step 36: This is it!

Finally double check all the layers are on its respective folder.

Conclusion

We finished the graphic part of the process, now it’s time to jump over NetTuts+ to see how to slice this and turn it to HTML+CSS, are you ready?

What’s the number one thing you want your portfolio site to do? Stand out! Today, Paul J Noble is going to walk us through the creation of his own uniquely designed portfolio site. He’ll show us tips and tricks in Adobe Photoshop, as well as some clever approaches to standing out from the pack of other portfolio sites.

---

Creating a Memorable Portfolio Site

Think of your portfolio site is your online spokesperson to potential clients. If done properly, it should tell people what you do, show off your best work, and give them the opportunity to get in contact with you. That’s all pretty obvious stuff – so what’s the difference between an ordinary portfolio site and a truly remarkable one?

The key to an effective portfolio site isn’t just having great projects – it’s leaving a lasting impression on visitors. Sure, this might mean having incredible illustrations if you are a graphic designer – but for web designers and developers, this often means needing to push the boundaries of UI/UX and coding in order to show off our strongest points.

In this tutorial, Paul J Noble is going to show us how he used some simple, but remarkably innovative approaches to the UI/UX on his own site to create a portfolio site that stretches the user’s expectations using interactivity and subtle lighting effects.

Let’s dive in!

---

Step 1 The Canvas

Create a new document in Photoshop that’s 1400 x 900. The final, HTML rendered site will feature ‘liquid’ (i.e. scalable) elements so we’ll need to keep in mind that the final design will not be a fixed size.

---

Step 2 Lay the Foundation

Creating a solid background is an easy way to get things started. For this design we’re going to be using a base color
that’s dark enough to accentuate foreground images while also offsetting pure black that may appear in the folio images. We’ll also use include some blue to create a ‘cool’ dark color that will integrate with the interface elements.

Select Layer > New Fill Layer > Solid Color and assign the color #252a3b.

---

Step 3 Laying the Guidelines

As we’re using a scalable layout, we need to define the minimum horizontal width. For most commercial sites this is around 1000 pixels to accommodate users with 1024×768 resolution displays. However for this site we’ll aim for 1100 pixels as a minimum width.

Firstly, make sure your guide units are set to pixels. This can be set by going to Preferences > Units & Guides.

Then, go to View > New Guide. As we’re going to put our content in the center and we’re aiming for a total minimum width of 1100 pixels, we should place vertical guides at 150px and 1250px.

---

Step 4 Create the Texture Pattern

Subtle diagonal striping will help lift the design by creating a separation between the foreground portfolio items and textured background.

To achieve this we will apply a Pattern fill layer. However, first we must create the pattern.

Create a new document 12×12 pixels with a transparent background and add a new fill layer with a black fill (#000000).

Now, add a new layer (Layer > New > Layer). Using the pencil tool with a brush size of 1px, draw three lines exactly as they appear in the image below.

Turn off the fill layer and set the lines layer opacity to 6%. To save this as our pattern select Edit > Define Pattern.

Returning to our original canvas, create a new layer with the texture by selecting Layer > New Fill Layer > Pattern and select the previously defined pattern.

---

Step 5 Navigation

Now that we’ve created our base we can drop some flat layers that comprise the major elements of the site

First, our navigation. As this site will be designed to have no vertical scrolling we can position the navigation to align to the bottom of the screen.

Create a new Group in the layers palette and label this group ‘Navigation’.

Then create a new layer using the Rectangle Tool (U). With the Info window open, draw this shape so it’s 1400×61 (the full width of the document window and 61 pixels high). Align this layer at the bottom of the document window.

Now, apply a gradient to the layer by right-clicking the shape layer in the Layers palette and selecting Blending Options then checking Gradient Overlay (alternatively, select Layer > Layer Style > Gradient Overlay).

In the Graident Editor, click the bottom color selector to open the Color Picker. For the left color (bottom of the shape) use #2f313a. For the right color (top of shape) use #3c3f49.

Next, create a new layer and lable this ‘highlight’. Using the Pencil tool with a 1px brush and color #ffffff, draw a line while holding shift across the top of the rectangle shape previously created. Then set this layer’s opacity to 6%.

---

Step 6 The Logotype

Create a new text layer 20 pixels from the left side of the document and align the text to be vertically centred on the navigation rectangle layer.

In this example the font DIN Light has been applied at 14px with a loose tracking of 200. To create a shift between two parts of the logo type two colors are used. For the first part #dddddd and the second, darker part #737375.

Next, add a subtle drop shadow to create the appearance of the text being inset to the background. Select Layer > Layer Style > Drop Shadow.

Unselect ‘Use Global Light’, change the direction to -45 degrees, set size to 0px, distance 1px and opacity 30%.

---

Step 7 Navigation Buttons

For the main navigation buttons we will use a rounded rectangle shape.

Create a new group called ‘buttons’.

Create a new Rounded Rectangle Shape that’s 279×31 and offset 20 px from the right side of the document window and vertically centred in the navigation rectangle.

Right click the layer in the layers palette to and select Blending Options. Check Gradient Overlay and use the values #292c33 to #43464f. Click OK and then check Bevel & Emboss.

For Bevel & Emboss set the size to 0px with a direction of 122 degrees. Then set the Highlight and Shadow opacity to 10% to create a consistent, subtle lighting effect.

Add text labels using the same font settings as were applied for the logo type. As the button labels are contained in a smaller vertical space we should reduce the size to 12 px and tighten the tracking to 100. Use the same colours as the logo type however apply the lighter colour for the active page label.

To separate the buttons while maintaining the softly lit appearance of the navigation we should draw two lines, each 1px width. The first should be black (#000000) and the other white (#FFFFFF). Set the opacity for the white layer to 6% and the black layer to 12%. Duplicate these layers by Shift-clicking each and then right clicking to selection. Position the duplicate layers with consistent spacing inside the navigation.

---

Step 8 Social Media Buttons

These buttons have a different function from the rest of the nav so we’ll apply a style that suggests this. Let’s inset these buttons to complement the main navigation.

Firstly, create a new group called ‘social’ and nest this group in the ‘navigation’ parent group.

Now, using the Rounded Rectangle tool with a radius of 4 px and holding the shift key, create a square aspect shape of 25×25 px. Vertically center this in the navigation and position the shape 22 px to the left of the main navigation buttons.

Right click the shape just created and select Blending Options.

Add a drop shadow. For this drop shadow we’ll use white (#FFFFFF) and set the blend mode to Lighten. Set distance to 1px, spread to 0% and size to 0px. This will create an effect of the bottom edge being lit and hence the button being inset.

Next, while still in the Layer Style window, check inner shadow. Use black (#000000) with opacity at 39%, distance 1px and size 4px.

Finally, select Color Overlay and use #353741. This will flatten the appearance of the shape and add contrast with the background.

For the social media icons we’ll take an existing image and trace the edges using the pen tool to create a path (make sure Paths is select in the tool Options menu).

After you’ve created a path of the icon, use the Path Selection Tool and right-click the path you just created (make sure the path is selected in the Paths palette). Select Define Custom Shape… Save the Shape.

We can now use the icon as a scalable vector object. Using the Pen tool, change the Options to Shape Layers (top left item on the Options bar) and select Custom Shape Tool, then select the icon just created. Holding the Shift key, drag the object so that it fits within the icon tile.

Set the icon opacity to 20%.

Repeat these steps for any remaining social media icons.

---

Step 9 More Guides

In this example we’re going to be displaying folio images that are 640×480 px.

As we’d like to vertically center the featured image within the space above the navigation, we need to add some more guides. Select View > New Guide and Add horizontal guides at 180px and 660px. This will position our viewed image in the middle of the vertical space above the navigation.

We’re also going to need some text at the left of the featured image so we’ll add vertical guides at 400px and 350px to provide margin for the text and allow space for navigation next to the image. Finally add vertical guides at 1040px and 1070px to define the edge of the viewed image and the margin between the adjacent image.

---

Step 10 Create the Image Placeholders

Create a new group called ‘Projects’. Then, using the Rectangle tool, draw a rectangle 640×480px that aligns to the top left of the vertical guide at 400px and the top to the horizontal guide at 180px. This will serve as the placeholder for our main image.

Right click the layer just created and select Rasterize Layer.

Now, holding the Alt key, click and drag the layer to create a duplicate. Move this layer to the right of the layer with 30px margin to align with the guide at 1070px and using the same baseline.

Create two more duplicates and align these to the bottom of each with 30px margin between each.

Then, using the Paint Bucket tool, fill each of these shapes with the color #252a3a.

---

Step 11 Vignette

Create a new Group called ‘Vignette’ below the ‘Navigation’ group and above the ‘Projects’ group.

Create a new layer and use the Paint Bucket tool to fill the layer using the foreground color #0f1219.

Using the Ellipse tool, draw an outline that intersects at the corners of the main image guides.

Now, to create a vignette effect, we’ll need to cut out this section while feathering the edge of the cut. To achieve this we’ll use Select > Modify > Feather. Feather the selection by 60px and then cut the layer selection (Ctrl-x / Command-x).

---

Step 12 Create Project Masks

As we’re going to be showcasing work we’ll need to place some screenshots on the placeholders. Go back the ‘Projects’ group and paste a screenshot while the main placeholder is selected. This will insert the layer above the placeholder. Then, right-click the layer and select Create Clipping Mask.

Paste three more screenshots onto the other placeholders.

Reduce the opacity for all screenshots except for the centred screenshot to 20%.

---

Step 13 Inserting Text

To annotate each project we’ll use three text layers. Create a new group above the ‘vignette’ group to house these layers.

For the first, the heading, we’ll use a light font. In this example I’ve used DIN Light however another similar typeface may also work fine. Using the Text tool draw a text box within the guides to the left of the main image and 40px below the top guide. Set the color to #FFFFFF, tracking to -25 for a tighter letter spacing and use a font size of 28px.

We’ll also add a line for the project category and date. Set the size to 14px, tracking to 100, force caps and apply the color #338966 to accent this line.

Then, for the body text, we’ll use a system font such as Lucida Grande or Lucida Sans Unicode at 12px with a color of #8C8F95 and line height of 18px.

---

Step 14 Add mouse controls

To navigate our folio site we’ll allow mouse or keyboard control. An intuitive placement for navigation directional buttons is according to their function. For example, the right arrow button will go to the right of the main image.

For the buttons we’ll use translucent shapes that can shift opacity on hover or click events. Create a new group called ‘Buttons’ that’s above the ‘Vignette’ group.

Then, create a new document with the dimensions 37×37px. Using the pen tool, draw a chevron shape such as below. Repeating the process in Step 8, using the Path Selection Tool, right click the shape and select Define Custom Shape. Save the shape.

Going back to our main canvas, use the Custom Shape tool to insert the previously created shape.

Then, select Edit > Transform > Flip horizontal. This will point the arrow to the right. Clone this shape and use Edit > Transform > Rotate 90 degrees Clockwise to create the downward pointing shape.

Position each of these shapes in the center of their respective directional side. Allow 15px margin so the buttons can overlap the adjacent images and reduce the opacity to 12%.

---

Step 15 Orientation Map

To let the user know where they are in the portfolio as a whole we’ll abstract the grid design and use lines of differing height to represent columns of images and an indicator to establish the present viewing position.

Create a new group called ‘Orientation’ and place this group above the ‘Vignette’ group.

Using the Pencil tool, select Square brush set from the fly-out menu. Then, with the color #FFFFFF and a thickness of 5px, draw a line to align with the far left boundary guide and 60px high.

Clone this layer and position this 2px to the right. Repeat this for up to 12 lines.

Set the opacity for all layers to 12%. And easy way to do this is set the opacity for the first layer, then right click on the layer and select Copy Layer Style. Then select all remaining layers and select Paste Layer Style.

Stagger these layers by using the Edit > Free Transform command to shorten / heighten each line.

Finally, create a new layer and use the pencil again to draw a marker on the first line. This is our position indicator.

---

Step 16 Keyboard controls

Often keyboard control will offer an intuitive navigation experience. However, we must allow the user to know that the keyboard may control navigation. To accomplish this we’ll create keyboard arrow icons.

Create a new group called ‘Keyboard’ and place this above the ‘Vignette’ group.

Using the Rectangle Shape tool, draw a square (hold Shift) 20×20px with a color #262a34. Right click the layer in the Layers palette and select Blending Options. Check Stroke and apply a 1px stroke on the outside with the color #32343f.

Then, using the pen tool (ensure the style is set to Default in the Option bar) and with color #fff draw an arrow with a slightly squared point. Adjust as necessary with the Direct Selection tool. Set opacity to 20%

In the layers palette, shift select the two layers just created. Right click and select Duplicate layers. Then, using the Edit > Transform menu option rotate the duplicated layers to their correct orientation. Repeat this step to create all four icons.

---

Conclusion

Alright! Now we’re done with the design portion of the project… which means all we need to do is code it using some basic HTML/CSS, jQuery Hotkeys, and a few extra jQuery tricks. If anyone wants to see how Paul coded this design, let us know in the comments so we can arrange it!

Today, in part 2 of this massive tutorial, we’re continuing this session with the second day of design. We’ve already designed the homepage – so now we’ll be designing the four support pages that form the rest of the complete site design (Portfolio, Blog List, Blog Post, and the Contact Form Page). Let’s dive in shall we?

---

About the Mini Series

You’ll find lots of web design and development tutorials out the net… but very few tuts that take you from start to finish. Lots of tutorials are only for design, and others are only for coding. Today we’re starting a new series where we’ll design and develop a complete website from scratch; We’ll take you from the initial wireframe to the full site design (including 5 pages). Then we’ll be coding the design (in Nettuts of course) and finally converting this complete XHTML theme to a working WordPress theme!

Check out the entire process as it happens at our Session Page!

---

Project Objectives!

Let’s briefly review our project objectives that we set up on Day One:

Our aim is to design and develop a simple site design with a modern layout that’s conducive to CMS systems like WordPress. We won’t be applying any wild and crazy style effects in our design (the point here is to keep it simple), but we are going to approach the entire process, from start to finish, as a study in layout and a proper use of margins and padding.

We’ll be using the 960 grid system from start to finish – and this won’t be any different for our Day Two design session.

A Brief Course Outline. We might break this up differently once we hit the coding phase, but this should give you a good idea of where we’re heading with this series:

• The Design Phase
• Session 1: Laying The Groundwork and Designing the Homepage
• Session 2: Designing the Support Pages (You’re reading it now!)
• The Coding Phase
• Session 3: Slicing and XTHML Coding (Available Soon)
• Session 4: Convert To a WordPress Theme (Available Soon)

---

Let’s Continue! Day Two of the Design Phase

Let’s start by taking a peek at what we’ll be creating:

• Homepage [Done]
• Portfolio [Today]
• Blog List Page [Today]
• Blog Post Page [Today]
• Contact [Today]

Today’s design phase is also divided in four parts and we’ll design all the other pages of Iconify in this session. As we designed the homepage already, our primary task has been completed – so we just need to fill in the blanks for the rest of the sitemap.

This is a crucial step that’s often overlooked in lots of design projects, but designing some specifications for these support pages is something you won’t want to skip. Remember, a website design isn’t complete after just setting up the homepage – at the very least you’ll need a couple extra templates designed for the additional pages that make up a site.

As our layout is pretty straight forward, we’ll just be swapping out the primary content area for each page. The universal site elements (Header, Navigation, Footer) will all stay the same from one page to the next. This is important to keep a consistent foundation for the site so users always know where they’re at.

---

Part E: Design the Portfolio Page

The Portfolio Page is the first support page that we’ll design. Remember that we’re using the 960 Grid System for the entire site design, so we’ll be using the same basic layout and column structure as we setup on the homepage design.

Step E1: Basic Setup For Portfolio Page

Create a duplicate of the index.psd file and rename it to portfolio.psd. Open it up with Photoshop. Delete everything from within content layer group except the bg layer.

Now create the “breadcrumbs” and “notes” layers for the portfolio page. For the “notes” background shape, use the same layer styles as we did it for recent project‘s bar rectangle. Use image E – 1a as a guideline.

Next, we are going to use a simple technique to work in a handful of different column variations inside this one page for our portfolio items.

Step E2: Creating Portfolio Items

Use the image creation technique from Day One (Step C3) to create two column portfolio items as shown in image E – 2a. If you recall, we’re simply drawing in rectangles that fit the column guides, applying a layer style, and then cropping in images to create a subtle border effect.

Now repeat this same technique for three column and four column portfolio items. Use image E – 2b and E – 2c as a guideline. Note that we’re flipping between the different 12_column and 16_column guide layers to get this perfect. Finally, organize your layers as shown in image E – 2d.

---

Part F: Design The Blog List Page

The Blog List page is intended to be the location where “excerpts” of each blog post are shown. These “excerpts” are also called “loop” elements – and usually are comprised of a title, thumbnail image, a short text preview and some meta information (like the date, author, tags, etc.).

Step F1: Creating the Blop “Loop” Elements

Just like we did with the last page, we’ll start by creating a duplicate of portfolio.psd page and renaming it to blogs.psd. Inside the blogs.psd file, delete everything inside the content folder except bg, breadcrumbs, and pages layers. Now we have a blank blogs file, we can begin to populate it with some content.

For the first time we’re going to use a standard two column blog layout – one for content and another one for the sidebar. Use image F – 1a as guideline to design the blog and sidebar content – notice that we’ve placed the vertical separation line between two of the column layers so it’s perfectly spaced.

The actual designing here is pretty simple so we’re not going to go into too much detail – just follow the set rules for the type layers (the red text on the examples), and use all of the styles that we’ve already setup in our other pages. Take special note about the spacing between elements (also marked in red text) as that’s going to tell you exactly where to place everything.

When you’re done, organize your layers as shown in image F – 1b.

---

Part G: Design the Blog Single Post Template

Now that we have our Blog List page setup, we need a template for each full blog post. This is a pretty hefty page in terms of content because we also need to plan ahead for a commenting system and lots of other little details. Pay special attention to the example images in this section!

Step G1: Creating Blog Posts Page

Once again, start by resaving the blogs.psd file with a name of blog-post.psd. Inside blog-post.psd, delete all the blog list content so we can start fresh. In the content section, grab your text tool and start to populate with some text and image as shown in image G – 1a.

Step G2: Design The Popular Blog Post Box

Draw a rectangle and apply the same layer styles of recent project‘s bar from the index.psd file. Populate it with content and position as shown in image G – 2a. For the horizontal ruler styles please check image G – 2b.

Step G3: Design The Comments Section

Draw a rectangle with 630px width and any height for now. Name it bg and place it inside a layer group named comments. Copy the layer styles from popular post box’s bg, then paste to this layer. Use image G – 3a as a guideline.

For the comment boxes’ arrows, draw a triangle inside the comment box (enable Add to shape area while drawing) measuring 10X10px rotate the arrow and position them as shown in image G – 3b and apply the layer styles as shown in image G – 3b.

We are leaving a 40px left margin for the second comment to indicate that this is a reply. By using this same technique, we can go even more deep – showing a third, fourth, or even fifth reply depth by just indenting another 40px for each level. We’ll do the same in our XHTML version, so remember these basic style rules.

Step G4: Design The Comment Form

Draw another rectangle with same style as of comments‘s bg layer and name this layer bg. Place it inside a layer group named comment form. Use image G – 4a as a guideline.

---

Part H: Design Contact Page

Once more time, copy blogs.psd and paste it with a name of contact.psd. Open it in Photoshop. Delete everything except breadcrumbs and sidebar from content layer group. Copy comment form and paste it as shown in image H – 1a. Once again, type in the content as shown in the image.

You’ll notice that a lot of this is repetition by now – we’re just copy/pasting in content, fitting it to the guides that we want to use, and using the same typography and layer styles from the previous pages.

Things should be moving pretty quickly by the time you’ve finished this page. You can repeat this same basic process for as many pages as you need to mockup – just stick to the column guides and use the same basic typographic and layer-style rules for each new design and should be able to knock any more of these that you might need very quickly.

---

End of Day 2

This concludes the second part of our massive tutorial! By now, we’ve successfully designed our website. In the next session (coming soon over at Nettuts), we’re going to begin the coding process, so check back here (and at Nettuts) as we post the new portions of this tutorial!

You’ll find lots of web design and development tutorials out the net… but very few tuts that take you from start to finish. Lots of tutorials are only for design, and others are only for coding. Today we’re starting a new series where we’ll design and develop a complete website from scratch; We’ll take you from the initial wireframe to the full site design (including 5 pages). Then we’ll be coding the design (in Nettuts of course) and finally converting this complete XHTML theme to a working WordPress theme!

Project Objectives!

Our aim is to design and develop a simple site design with a modern layout that’s conducive to CMS systems like WordPress. We won’t be applying any wild and crazy style effects in our design (the point here is to keep it simple), but we are going to approach the entire process, from start to finish, as a study in layout and a proper use of margins and padding.

We’ll be using the 960 grid system from start to finish, so if you’ve ever wondered what it’s like to use the system, now’s a great time to learn! We’ll be making a few deviations from the norm, but for the most part we’ll be using 960gs in the design and coding phases.

Once you guys/gals are done, you’re welcome to customize the design all you want with your own fonts, colors, styles and textures! Remember, this is just a starting out point – you’re welcome to go as nuts as you want when it comes to the personality of your own version of the design.

A Brief Course Outline. We might break this up differently once we hit the coding phase, but this should give you a good idea of where we’re heading with this series:

• The Design Phase
• Session 1: Laying The Groundwork and Designing the Homepage
• Session 2: Designing the Support Pages (Available Next Week)
• The Coding Phase
• Session 3: Slicing and XTHML Coding (Available Soon)
• Session 4: Convert To a WordPress Theme (Available Soon)

Resources Used For This Project

You can use your own resources if you’d like, but here’s the full list of the images and icons that I’ve used in the tutorial:

• Images – Lil Rhody Dan, Flickr
• Merry Christmas (photo)- from PSDTuts flickr group
• Social Icons – wefunction
• Twitter Bird – webtreats
• Use these values for text colors- Heading color: 0f5193; Text Color: 7c7c7c; Link color: eaa000

---

Let’s Get Started: Day One of the Design Phase

So, without further delay, let’s start on the design phase! This design phase is divided in two parts. Today, we’ll lay out the wireframe using the 960gs system, and we will design the homepage. In second part (coming next week), we’ll design the other support pages.

The main thing you’ll want to keep track of today is how we’ll be using two different variations of the 960gs (a 12-column layout and a 16-column layout) together in the same file. I’ll explain more about this later, but keep track of when we use each different layout as it’ll play a big role in the coding phase later on!

Today’s four sub-parts are:

• Part A Laying Out the Site Wireframe
• Part B Designing the Header
• Part C Designing the Main Content Area
• Part D Designing the Footer

---

Part A: Laying Out the Site Wireframe

Step A1: Creating A New Document Using 960gs

As we are going to work with 960 grid system, go ahead and grab the 960 grid system from here (or grab it from 960.gs if that link ever goes down).

Inside the main folder (what you have just downloaded from http://960.gs), go to “templates->photoshop” and open “960_grid_16_col.psd” in Photoshop. Rename this file to “index.psd” and save it in a new folder of your choosing, as shown in image A – 1a.

Now that we have the 16-column file setup, we want to also import the guide-layer from the 12-column file.

Open the “960_grid_12_col.psd” in Photoshop (from the same folder you have opened the “960_grid_16_col.psd” file. Now unlock “12 Col Grid” layer and position, then drag it to our newly created index.psd file as shown in the image A – 1b and A – 1c. Also unlock the layer and position of “grid_16_col”.

You may be asking yourself, “Why should I to use two different grid files“? As the grid_16 can’t give us three equal columns, we need to use grid_12 as well. The 960gs system is actually built to be used this way, so it won’t cause any conflicts down the line. We’ll also use these two grids in the XHTML conversion phase.

Select the “grid_12_col” and “grid_16_col” layers, then select “Align top edges” and “Align horizontal centers” from the options panel as shown in image A – 1d (while selecting these options, make sure you have also activated the Move Tool (V)). And your final result should look like image A – 1d.

Step A2: Setting Guides, Rulers And Units

It’s the time to set up our guidelines and rulers to easily position our elements. Go to “Edit->Preferences->Units & Rulers” or press “Ctrl+K” to call the Preferences dialogue box. Then select “Units & Rulers” tab. In the “Units & Rulers” pane’s Units sub-section, set “pixels” for both “Rulers” and “Type” options as shown in image A – 2a.

Now select “Guides, Grid & Slices” tab and in its Grid sub-section, set value “100″ and unit to “pixels” for “Gridline every” option. And set “10″ for “Subdivisions” field as shown in image A – 2b.

Step A3: (Re)Sizing The Document

Now press “Ctrl+Alt+C” or go to “Image->Canvas Size” to call Canvas Size dialogue box and change settings as shown in the image A – 3.

As we have increased our canvas height, now we have to select and enlarge our grids according to the height of our document.

Select both grid layer and press “Ctrl+T” or go to “Edit->Free Transform” then drag those grids as shown in image A – 3b. Now lock both grid layers and hide the “grid_12_col layer” as shown in image A – 3c.

By default we have positioned the guides of grid_16_col as we are started from the grid_16_col.psd file. We don’t have guides for grid_12_col, but we really don’t need them as we’ll only use grid_12_col in rare circumstances.

You also can check your document’s grids and guides by pressing “Ctrl+’ (View->Show->Grid)” and “Ctrl+; (View->Show->Guides)” respectively as shown in image A – 3d.

Step A4: Creating The Wireframe

Our document width is 1020px; When using the 960 grid system, we are supposed to use 940px for our content width. We’re going to deviate just a bit from the 960 model by using a 20px left and right padding (40px total) for its content column. So our total content width is going to be 980px. Select the Background layer and press “Ctrl+Backspace” or “Ctrl+F5″ or go to “Edit->Fill” to call Fill dialogue box, then select “Color…” option from “Use”. And set the value to “e7e7e7″ as shown in image A – 4a

If you’re having trouble doing this in older versions of Photoshop like CS4, first “rasterize” the Background layer then apply the background using above step.

Now select the “Rounded Rectangle Tool” set “Radius” to “10 px” in the Options panel and set “Foreground” color to “f1f1f1″. Draw a rounded rectangle in the artboard measuring size 980 x 150px. Name this layer header bg and place this layer inside a layer group and name that group Header. And organize your layer palette as shown in image A – 4b. And always keep grid layers above all the layers in the layer palette.

To create a group, simply select the layer(s) you want to set in a group (holding down the Ctrl or Shift key) and then press “Ctrl+G” or go to “Layer->Group Layers”. And to change a group name or layer name simply double click on its default name then it’ll become an editable textfield as shown in image A – 4b.

Select the Convert Point Tool from tool palette’s Pen Tool group. Then “Ctrl+Click” the header bg rectangle and click on the four upper corners as shown in image A – 4c. And delete very upper two points using Delete Anchor Point Tool from Pen Tool group as shown in image A – 4d.

Now our header bg rectangle should have a height of 140px as we have deleted the upper two points. Select header layer group and background layer then select Align top edges and Align horizontal centers from Options palette as shown in image A – 4e.

Apply a layer style in the header bg layer using settings shown in image A – 4f. Nudge this layer 1px top to hide the top glow.

Now once again select the Rounded Rectangle Tool and draw content region (measuring 980 x 1400px). Name it bg and place it inside a layer group named content and apply the same layer styles as header bg. Draw another rectangle (measuring 980 x 570px) call it footer bg and place it inside a layer group named footer and also apply the same layer styles. Delete bottom two points of footer bg rectangle using the same method of header bg. Keep 20px distance between each section (e.g. header, content, footer). Place everything as shown in image A – 4g.

Wire-framing everything then adding actual content would eat up our valuable time… So we are going to go straight to adding some “real” content for this mockup in the next section.

---

Part B: Designing The Header

Step B1: Populating The Top Portion of the Header

Select the Line Tool then draw a line with 1px weight and 940px in length (press and hold “Shift” key while drawing for perfect line). Place it as shown in image B – 1a. Name this layer hr, fill its background with color cdcdcd and a layer style as shown in image B – 1a.

Now select the Rectangle Tool and draw a 200 x 24px rectangle, apply layer styles and place it as shown in image B – 1b. Set its background color to 000000 then reduce its fill opacity to 10%.

Type some quick link text on the left side of our search field. Select the Text Tool from the Paragraph pane, and select Right align text. Then type some menu names and separate them with a “|” (vertical bar). Use image B – 1c as a guideline. Set its text color to ababab. For the search field type label Search with color ababab then select Custom Shape Tool and from Shape menu select Search shape then draw and place the magnifier shape as shown in image B – 1c. Set magnifier color to f1f1f1.

Step B2: Setting The Logo And Creating Navigation Menus

I’m not going to guide you how to create this logo as this is not super important that you duplicate it perfectly; I hope you’ll be able to easily create your own logo to use. Place the existing logo (or your own) as shown in image B – 2a.

Select the Text Tool, then enable the Right align text from PARAGRAPH pane. And type some menu names using the settings as shown in image B – 2b.

span>Step B3: Creating Sub-Menus

Since most keyboards don’t have the “>>” key, first select and copy this arrow (») then paste it in the Photoshop and name this layer arrow. Use the same color as the menu color and set Horizontally scale to 150% and select arrow layer (if not already) press “Ctrl+T” then rotate it as shown in image B – 2c.

Draw a rounded rectangle with radius of 4px with any measurement. Then set its fill color to d5d5d5, apply the shown layer styles and type some submenu names as shown in image B – 2d.

---

Part C: Designing The Main Content Section

Step C1: Designing The Image Slider

Draw a rectangle measuring 940 x 338px, then apply layer styles as shown in image C – 1a. Name this layer slider bdr. Place slider bdr in the content area as shown in image C – 1b.

Place and select an image above the slider bdr layer then Ctrl+Click slider bdr layer to gain slider image area (image C – 1c). Then go to “Select->Modify->Contract” in the Contract dialogue box set 1px and press “Enter”. Now press “Shift+Ctrl+i” or go to “Select->Inverse” to inverse selection then hit “Delete” key from keyboard. Now we should have a perfect image slider as in image C – 1d.

Select the Ellipse Tool and draw a circle measuring 16 x 16px. Apply a layer style as in image C – 1e and position them as shown in image C – 1e. Group those circles and name their layer group: radios.

Step C2: Creating the Promos & Testimonial Box

First, we are going to create four column promo items. To create four columns group, enable grid_16_col. Divide those 16 columns with four and you’ll find four equal width columns. Populate your columns with the content as shown in image C – 2a. Next, place a line with the same settings of header‘s hr position it according to image C – 2a.

When creating multiple line rules such as HRs and VRs, it’s usually important that they have the same basic styling and color.

Those icons are from tutorial9. You can download them from here.

Step C3: Creating the Second Promo

This is a three column promo section. For this, we’ll hide the grid_16_col and unhide grid_12_col. Use every fourth column as a single column to place promo items. First draw a rectangle measuring 300 x 140px and place it as shown in image C – 2b. Now place an image on top of this layer then select and crop image areas (which are overdrawn from its lower rectangle area) as we did it for image slider section. Now apply layer styles as shown in image C- 2b.

Let’s add some text now. Select Text Tool and draw a text block as shown in image C – 2c and type some heading also type some short description and a link text as shown in image C – 2c.

Now make a group with these layers with a name of “promo”. Then copy and paste the “promo” group two times, and then finally group all three “promo” groups with a name promo-col-3 and position them and your layers as shown in image C – 2d.

Step C4: Creating The Testimonial Box

Select Rectangle Tool draw a rectangle with 940px in width and set its height according to your need. Fill this rectangle with 000000 color and reduce its Fill opacity to 5% and name it testi bg.

Now select the Custom Shape Tool from Shape menu and select the Triangle Shape. Click on the Vector mask thumbnail of the testi bg layer. You should have a shape selection now.

Enable Add to shape area (+) from the Options panel and draw a triangle inside testi bg shape. Then with the Delete Anchor Point tool delete one side of the triangle and place it as shown in image C – 2e.

Next, apply the shown layer styles, position it, and populate it with some text as shown in image C – 2f.

Step C5: Creating Recent Project Items

Select the Rectangle Tool draw a rectangle measuring 940 x 40px and name this layer bar. Put this rectangle inside a layer group and label this group recent projects. Set rectangle’s fill color to FFFFFF, and set its Fill opacity to 15% then apply layer styles to the rectangle as shown in the image C – 2g and position and place some pictures below it with the settings and position shown as in image C – 2h and those pictures size is 220 x 180px.

For images, use the same techniques and layer styles we have used for the promo-col-3 sections. From now on, use this very same technique and styles for designing any images for this theme in first part and second part. Why? Because it’ll help our design have a unified, consistent style scheme. From now on, I’ll only reference this styles and techniques using “apply image styles” instead of repeating all these steps.

---

Part D: Designing The Footer

Step D1: Creating the Twitter Section and Social Icons

In the footer layer group create a layer group and name it top. Inside this group place contents and format them as shown in image D – 1a. For the vertical ruler use the same color and layer style of horizontal ruler hr. Finally place your layers as shown in image D – 1b.

Download those social icons from wefunction and twitter bird icon from webtreats.

Now create the footer’s main content. Populate and position the content as shown in image D – 1c. Position your layers as shown in image D – 1d.

Select the Custom Shape Tool, from Shape menu select Triangle shape and draw a triangle measuring 10 x 10px. Fill this with color cdcdcd and apply a stroke from layer style as shown in image D – 1e, and name this layer top arrow. Finally add some text and place the elements as shown in image D – 1f.

Now your design should look just about like our demo:

---

End of Day 1

This concludes the first part of our massive tutorial! By now, we’ve successfully setup the basic framework for the site and designed our homepage. In the next design session (coming next week), we’re going to design the support pages. Finally, we’re going to slice the design and get it ready for XHTML, and eventually WordPress coding!

Now Updated with a Coding Tutorial and the free PSD! In this tutorial we’ll be using Adobe Photoshop to design a sleek web interface that can be used for any mobile app website. We’ll be covering an array of techniques including shapes, textures, masks, custom icons, typography and much more that can be easily adapted and applied to your own web designs.

---

The Coding Portion of the Tutorial

Eric has offered the PSD for Leaflet for free to all of our readers here. If you’re a premium Tut+ member, hop over to our sister site, Nettuts, for the full coding portion of the tutorial as well. Eric will walk you through how to take this design into a full coded HTML/CSS template!

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Phototuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Alright, on to the free design portion of the tut!

---

About This Design

This tutorial is based on the dark, clean website design for Leaflet, an iPhone app designed for Envato marketplace publishers. Eric Alli of Trilab Media helped design and code the site, so he’ll be walking us through the step by step tutorial. Whether you’re looking to use a similar design for your own projects or just want to see how it was made, there are plenty of excellent tricks and techniques in this tutorial that you’ll be able to pick up on. Enjoy!

---

Step 1

Let’s begin by creating a new Photoshop document by selecting File > New.

Set both the canvas Width and Height to 1100px, Resolution to 72, and the Background Contents to White.

Next, we need to create two guides that will act as the container for our page.

Select View > New Guide…

For the first guide, set the Orientation to Vertical and the Position to 70 px.

For the second guide, select View > New Guide… again and create another Vertical guide with the Position set to 1030 px.

We should now have an outlined space that is 960px in width for our page.

---

Step 2

Next step is the background. Select the Paint Bucket Tool (G) and set your Foreground Color Swatch to “1e1e1e”. Then, click anywhere on the canvas to apply the color to our Background layer.

Let’s also add a bit of texture to our background by selecting Filter > Noise > Add Noise…

Set the Amount to 2.5 and click OK.

---

Step 3

Next we’re going to create a spotlight that will help add focus to the top area of our page.

Select the Brush Tool (B) and change the Master Diameter to 400px and set the Hardness to 0%.

Create a new layer by selecting Layer > New > Layer… and give it the name of “Spotlight”.

Change your Foreground Color Swatch to “FFFFFF” (white) and create a circle near the top of the canvas using the Brush tool.

To help blend the spotlight into the background, lets add some noise to the spotlight layer by selecting Filter > Add Noise…

Set the Amount to 20, check Monochromatic and click OK.

To smooth out our spotlight, select Filter > Blur > Gaussian Blur…

Set the Radius to 50.0 and click OK.

Finally set the Opacity on the Spotlight layer to around 25%.

---

Step 4

Next we’re going to be adding our phone graphics. For this tutorial I will be using the iPhone graphic from the superb Vector iPhone 4 PSD from Psdtuts+ which can be downloaded for free here. Also keep in mind, you may use any phone graphic that suits your particular needs (Android, Blackberry, etc…).

Once downloaded, open the PSD in Photoshop. Expand the “Phones” folder in the Layers panel, right click the “FRONT” folder and select Duplicate Group… Here, give the group a recognizable name (I used “iPhone”), set the destination to “Leaflet” (or whatever it is you named your PSD for this tutorial), and click OK. Once you’re finished, close this PSD.

Position our first iPhone touching the left guide and around 100px from the top of the canvas.

This is also a good time to customize the screenshot within the iPhone.

An easy way to do this is to expand the “iPhone” folder in our layers panel then click on the “SCREEN CONTENTS” folder. Now select File > Place, choose your screenshot from the browser, then click Place.

Drag your placed layer over the iPhone and resize to fit into the screen. Once finish, click Enter to save the changes.

Duplicate the “iPhone” group by selecting Layer > Duplicate Group… name it “iPhone 2″ and click OK on the dialog.

Select Edit > Transform > Scale and expand the duplicated iPhone to 107.0% width and height. Position this iPhone around 50px from the top and 200px from the left guide.

Repeat the step mentioned above to replace the screenshot within the “iPhone 2″ folder.

---

Step 5

The final touch for our iPhones is to create a reflection of them. Lets start by selecting both iPhone groups (“iPhone” and “iPhone 2″) then select Layer > Duplicate Layers… and click OK. Then select Layer > Merge Layers.

Next we need to flip our iPhones upside down. Select Edit > Transform > Flip Vertical, then position the flipped layer directly under the original iPhones.

Add a Layer Mask by clicking the Layer Mask icon in the Layers Panel.

Select the Gradient Tool (G) and choose a black to white swatch. Draw a line from top to bottom on the flipped iPhones that is around 50px in height.

Finally, lower the opacity on the layer to 30%.

---

Step 6

Next is to add our app’s main details to the right of our phones. Before we start, lets add another guide to keep things aligned. Select View > New Guide… select “Vertical” for orientation and 550 px for position.

At around 100px from the top of our canvas, we’re going to add in our logo. I’m using a logo I’ve previously made, you can simply use text or insert your own logo here.

Below the logo, we’re going to add a paragraph of text for our app’s description. Select the Horizontal Type Tool (T) and draw a rectangle between the center guide and the right guide. Set the character settings as follows:

• Font Family: Helvetica Neue
• Size: 16 px
• Style: Regular
• Leading: 26 px
• Tracking: -25
• Anti-aliasing: Crisp
• Color: #FFFFFF

---

Step 7

Next we’ll create a button for visitors to purchase our app. Using the Rounded Rectangle Tool (U), draw a 240×75px rectangle with a 4px radius. Align it so the left side of the button touches the center guide and it’s 45px below the text.

Now we’ll apply some layer styles. Double-click the right side of the layer in the Layers Panel and use the below image for reference.

To add the Apple icon, draw a small text box inside the button using the Horizontal Type Tool (T), then copy and paste this symbol:  into the text box and set the character settings as follows:

• Font Family: Helvetica Neue
• Size: 50 px
• Style: Regular
• Anti-aliasing: Crisp
• Color: #000000

Finally, change the opacity on this layer to 30%.

Create another text box to the right and add 2 lines of text (ex: “Download now on the App Store”). Apply the following character settings:

• Font Family: Helvetica Neue
• Size: 11 px (first line) 24 px (second line)
• Style: Bold
• Leading: 26 px
• Tracking: -25
• Anti-aliasing: Crisp
• Color: #FFFFFF

Add a Layer style to this text using the following image for reference:

Next, we’re going to add a separator to the right of the text we’ve just added. Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the top of the button to the bottom, then change the line’s color to “FFFFFF” (white).

Change the opacity of this line to 15% and duplicate it by selecting Layer > Duplicate Layer… and click OK. Change the color of this duplicated line to #000000 (black) and change it’s opacity to 10%. Then, move the duplicated line 1px to the left.

The last element to add to this button is an icon that indicates download. Begin by selecting the Ellipse Tool (U) and creating a circle that is 25px in diameter.

Then, add the following Layer Styles:

Finally, grab the Custom Shape Tool (U) and choose an arrow shape (I’m using a default shape called “Arrow 9″). Create a small arrow 10px in width inside the circle and change the color to “FFFFFF” (white).

---

Step 8

Now to create a small box to display our app’s price. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rectangle that overlaps our download button and is 52px in height and any width greater then 100px.

Change the color of this box to “2B2B2B” and move it below the download button in the Layers Panel.

Next, add a Stroke Layer Style to this box with the following settings:

Now we can add the actual price information. For this we’re going to create two separate text boxes since the content within requires different styling.

For the first text box, add some text (I used “ONLY”) and apply the following character settings:

• Font Family: Helvetica Neue
• Size: 19 px
• Style: Bold
• Anti-aliasing: Crisp
• Color: #FFFFFF

For the second text box, add your price (I used “$1.99″) and apply the following character settings:

---

Step 9

Moving on to the bottom portion of our page, we need to create some separation. For this, we’ll use the two-line technique we applied earlier on the download button to give the separator an “inset” look.

Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the left guide to the right guide, then change the line’s color to “000000″ (black).

Change the opacity of this line to 80% and duplicate it by selecting Layer > Duplicate Layer… and click OK. Change the color of this duplicated line to “FFFFFF” (white) and change it’s opacity to 10%. Then, move the duplicated line 1px down so it’s under the black line.

---

Step 10

In the section below the line separator we’ve just created, we’re going to be adding two columns, for screenshots and a list of features.

Starting with screenshots, begin by importing your first screenshot by selecting File > Place. Choose our screenshot from the file browser and click Place. Resize the screenshot to 80% width and height, then move the screenshot near the left guide and click Enter.

Select the layer in the Layers Panel and click the “Add Mask” button twice to add a Vector Mask.

Now select the Rounded Rectangle Tool (U) and change the radius to 6px and create a rectangle over the screenshot with the size of 175×120px.

Lastly, we’re going to add a Stroke Layer Style with the following settings:

Repeat the above steps for all of your screenshots and give them 35px of space between each other.

---

Step 11

To separate our screenshots from the features, draw a 1px line from the top of the first screenshot to the bottom of the last screenshot that is around 55px from the screenshots.

Change the line’s color to “FFFFFF” (white) and set it’s opacity to 5%.

---

Step 12

Let’s add a title that will describe our features (I used “Leaflet Features”). Position the text 55px from the left separator line and use the following character settings:

• Font Family: Helvetica Neue
• Size: 24 px
• Style: Regular
• Tracking: -10
• Anti-aliasing: Crisp
• Color: #FFFFFF

Now let’s create our list of features and position it below the title. Create a text box and add five or six lines of features and give them the following character settings:

• Font Family: Helvetica Neue
• Size: 15 px
• Style: Regular
• Leading: 28 px
• Tracking: -10
• Anti-aliasing: Sharp
• Color: #8d8c90

Repeat the above steps to add the app’s requirements.

---

Step 13

To make our list of features stand out, let’s create some simple, custom bullets.

Start by shifting the list of features text box 25px to the right.

Now select the Ellipse Tool (U) and create a circle that is 9px in diameter to the left of the first feature. Change the circle’s color to “bce086″.

Add the following Layer Style to the circle:

---

Step 14

Now we need to duplicate our bullets and align them to each feature. Start by duplicating the circle layer by selecting the layer then clicking Layer > Duplicate Layer…

Next, move the duplicated layer down 28px (the amount of Leading we applied to the feature list). Repeat the above steps three times.

---

Step 15

Moving on to the footer portion of our page, we’ll once again apply the two-line technique we applied earlier in Step 9 to add some separation.

---

Step 16

Now we can add some useful links to our footer area. First we need to create four text boxes, side-by-side, that will hold our links.

Start by creating a text box that is around 160×40px. Add some text to it and repeat 3 times. Here is some sample text you can use:

• Box 1: Follow @mycompany on Twitter for news and updates.
• Box 2: For help & support head to our Support area.
• Box 3: Download our press and media kit.
• Box 4: Copyright 2010 My Company, LLC.

Use the following for the character settings:

• Font Family: Helvetica Neue
• Size: 12 px
• Style: Regular
• Leading: 20 px
• Anti-aliasing: Sharp
• Color: #5555552

As you may notice our boxes are uneven and not aligned properly, don’t worry, we’ll be fixing this in the next step.

---

Step 17

To fix our alignment issues, begin by placing the four text boxes we’ve created above into a folder and name it “Footer”.

First, position the first text box 55px from the left guide and the last text box touch the right guide.

Now select the four text layers in the Footer folder and grab the Move Tool (V). Click on the Align vertical centers button, then click Distribute horizontal centers button from the Move toolbar.

---

Step 18

Now we can add some custom icons to accentuate our links.

Select the Ellipse Tool (U) and create a circle that is 36px in diameter next to our first text box. Change the color of this circle to “FFFFFF” (white).

Now select Layer > Rasterize > Layer.

Next up is to add our icon to this circle. For the first icon, I’m using the Twitter “t” that i’ve downloaded for free here.

Once downloaded, select File > Place in photoshop to import the icon into our document. Once imported, resize the icon to 28% width and height, position it over our circle, then click enter.

Next, right-click on the thumbnail of the Twitter icon in the Layers Panel and click Select Pixels.

Now select the circle layer in the Layers Panel then select Edit > Clear.

Delete the imported Twitter Icon by selecting it in the Layers panel and click or drag it to the Trash icon.

Finally, lower the opacity on the circle layer to 15%.

---

Step 19

For the rest of the icons shown above, repeat the steps in Step 18 by using other icons or with custom shapes in photoshop.

---

Step 20

To add a finishing touch to our footer links, lets give them a hit of color to help them stand out.

Using the Horizontal Text Tool (T) highlight a part of the text in each text box and change it’s color to “83b546″.

Conclusion

That’s all! I hope you’ve enjoyed this tutorial and have found some useful techniques that you can adapt / apply to your next design.