Tutorial Details
Program Used: Adobe Photoshop CS3 or higher. Difficulty: Intermediate Estimated Completion Time: Around 2-3 hoursFinal Outcome
Take a look at what we'll be creating together. Click the image to enlarge.
Step 1
As I mentioned earlier, we'll use 960 Grid System to keep everything aligned. Once it's downloaded, open the document "960_grid_24_col.psd" up in Photoshop.
Since we'll use guides a little bit too much, we need to get them and the Rulers viewed. In order to do that, go to View > Extras, Rulers, and Snap (to make our objects snap in alignment with the guides). By the way, the keyboard shortcuts of these three commands are definitely ones you wanna memorize.
Also, notice that the height of the final outcome is taller than the current one. So we need to adjust our Canvas Size, by going to Image > Canvas Size > Height: 1637px.
We need to fill our Website background with a light gray color. To do that, create a new layer, create a selection over the whole canvas (1020x1637px) using the Rectangular Marquee Tool (M), set you foreground color to: #f5f3f4 then click Shift+Backspace in order to fill the selection with that foreground color.
Step 2
In this step we'll create a thin bar at the top of the page, that would state your availability status. So go ahead and grab the Rectangular Marquee Tool (M), create a selection of 1020x40px, and fill it with this color value: #e5e6e8
Type some text, using the Horizontal Type Tool (T), that
represents your availability status (like: Available for hire), using
the following character settings:
(Notice that I'll only mention the settings that may be changed, the
other settings can be seen in the image below. For example: the default
Tracking value is set to zero, which is what we want, which means it
doesn't need to be changed, therefore, I won't mention it below).
And type your email, so that people can get in touch, using the following character settings:
Font Family: Georgia (available in all the operating systems) Font size: 15px Font weight: Italic Anti-aliasing setting: Smooth Color: #9a1447 Kerning: Optical
Step 3
Let's create a new bar that will contain the Website's logo and navigation. We'll start by creating a selection of 1020x100px using the Rectangular Marquee Tool (M). Then filling it with this color value: #9a1447
Using the Horizontal Type Tool (T), type your Website's name, and apply the following character settings to it:
Font Family: Gotham Rounded (learn more & buy at Typography.com) Font size: 45px Font weight: Book Anti-aliasing setting: Smooth Color: any color for now, as we'll apply a Gradient Overlay Kerning: OpticalNow, we'll go ahead and apply a Gradient Overlay to our text, according to the following image:
Select the Horizontal Type Tool (T), and type your navigation text using the following character settings:
Font Family: Gotham Rounded Font size: 25px Font weight: Light Anti-aliasing setting: Smooth Color: #f5f3f4 Kerning: Optical
We'll separate these words using by putting small circles between them. So using the Ellipse Tool (U) create a perfect circle (hold down the Shift key while drawing) of 5x5px, and fill it with: #ffffff.
In order to align the vertical centers of the logo/navigation with its background (the dark India pink bar), we'll select the layers of the both of them, then click on "Align vertical centers" in the control bar while having both layers selected.
As you work with Photoshop, I really encourage you to get into the habit of giving your layers reasonable names, and even grouping them. I personally rename every single layer in my document! Take a look:
Step 4
It's time to create an area where we can write some welcoming text to our site visitors, and put some images of our featured work. We'll start by creating a selection using the Rectangular Marquee Tool (M) of 1020x300px.
Let's give this selected area a gradient color overlay, why don't we? So select the Gradient Tool (G), open up the Gradient Editor dialogue box, set your color values from: #ececee to: #f5f3f4, and while selecting Radial Gradient as you dragging option, drag from the top-right of your selection to the bottom left of it you may also hold down the Shift key to constrain your angel.
Grab the Single Row Marquee Tool, and create two selections each one of them is: 1020x1px don't worry about the dimensions of your selection, since the tool itself will do that automatically place them like in the image below, and finally fill them with White (#ffffff).
Step 5
Drag two new horizontal guides according to the following image. These two guides will indicate the top and bottom borders of our image slider that we'll start creating in just a moment.
Let's start creating our image slider! First, we'll create a holder
for our images, we'll do so by creating a rounded rectangle, using the
Rounded Rectangle Tool (U) of: 390x145px, radius of: 3px don't worry
about its fill color, an image will be placed there, anyways.
Call this layer: "image_holder."
Now let's apply some Layer Style to our image holder to stop it from looking plain. Will leave you with the image below...
In order to place an image of a featured piece of work. Go to File > Place > locate to where your image is > Place. Make sure that the layer of your placed image is right on top of "image_holder" layer. Then right-click on your image's layer and choose: "Create Clipping Mask."
What we'll create now is an arrow to slide between images. So we'll draw a circle using the Ellipse Tool (U) of 40x40px, fill it with Black (#000000) and take its opacity down to: 30%.
Using the Custom Shape Tool (U) create a 20x20px arrow and fill it with any color just for now.
Apply some Layer Style to it according to the following image:
Drag a new horizontal guide according to the following image. This will indicate the top border of the text that will come below the image.
Using the Horizontal Type Tool (T) type the name of your featured project/design using the following character settings:
Font Family: Archer Font size: 20px Font weight: Medium Anti-aliasing setting: Sharp Color: #ab114a Kerning: Optical
Beneath your title, type a very brief description about your project; using the following character settings:
Font Family: Georgia Font size: 15px Font weight: Regular Anti-aliasing setting: Smooth Color: #630d28 Kerning: Optical
Step 6
Drag a new horizontal guide according to the following image:
It's time to write our Website's first read well, probably the welcoming title, using the Horizontal Type Tool (U), and the following character settings:
Font Family: Gotham Rounded Font size: 41px Font weight: Light Anti-aliasing setting: Smooth Color: #ac114a Kerning: Optical Tracking: 5Notice: I wanted my title to fit in 10 columns of my gird, but it was a little bit short, so I had to increase my tracking value. However, if you'll write another title you'll probably do that then you should adjust your tracking value depending on how long you title is. For example: if it was too long, then you may have to decrease your tracking value.
Then type a subtitle using the following character settings:
Font Family: Archer Font size: 25px Font weight: Medium Anti-aliasing setting: Smooth Color: #9a1447 Kerning: Optical
I know it's a little bit weird, but I'll start with creating the buttons first, then, typing the welcoming text (the text between the title and the two buttons). So using the Rounded Rectangle Tool (U), create a 150x40px rounded rectangle, with 3px radius, and fill it with any color for now obviously, as we'll apply a Gradient Overlay.
Now let's apply some Layer Style to our plain old button/rectangle so that it looks more interesting. Will leave you with the image below:
Now using the Horizontal Type Tool (T) type some text inside the button ("hire us," for example), and apply the following character settings to it:
Font Family: Gotham Rounded Font size: 24px Font weight: Medium Anti-aliasing setting: Smooth Color: #ffffff Kerning: Optical Tracking: -25
Apply a Drop Shadow to your text. Use the image below for reference.
Duplicate the button you just created, move to the right, and change the text on it (maybe something like: "see more.")
Back to the welcoming/about text we've not written yet. Using the Horizontal Type Tool (T), create a text block and type around four lines inside of it; using the following character settings:
Font Family: Georgia Font size: 15px Font weight: Regular Anti-aliasing setting: Smooth Color: #9a1447 Kerning: Optical Leading: 25px
Our text now is probably not centrally aligned between the title and the two buttons. Maybe you can align it visually. But *personally* I use a little trick that you may be familiar with to do that. Using the Rectangle Tool (U), create a rectangle that fills the area where you want to align your text (the area between the title and the two buttons, in our case), select the layer of the rectangle that you've just drawn, and shift click to select the text's layer, then click on "Align vertical centers" in the control panel while having both layers selected.
Don't forget to keep your layers panel organized. Here's how mine looks:
Step 7
Drag a new horizontal guide according to the following image.
Using the Rectangular Marquee Tool (M) create a selection of 1020x50px and fill it with this color value: #630d28
Grab the Rounded Rectangle Tool (U) and create a 190x30px rounded rectangle, with 3px radius and again fill it with any color just for now.
We'll apply some Layer Style to it to stop from looking flat. Follow up with the image below:
Using the Horizontal Type Tool (T) type some words inside the rounded rectangle that shows that this is a search box, using the following character settings:
Font Family: Georgia Font size: 15px Font weight: Italic Anti-aliasing setting: Smooth Color: #636363 Kerning: Optical
Next to this field, type the word "search," using the following character settings:
Font Family: Archer Font size: 15px Font weight: Bold Anti-aliasing setting: Smooth Color: #f5f3f4 Kerning: Optical
Now let's create the "GO" button. Create a rounded rectangle of 25x25px, with 5px radius, and fill it with this color value: #a41240.
Inside that rounded rectangle and using the Horizontal Type Tool (T), type the word "GO" and apply the following character settings to it:
Font Family: Gotham Rounded Font size: 12px Font weight: Medium Anti-aliasing setting: Smooth Color: #f5f3f4 Kerning: OpticalThen, apply a Drop Shadow to it; according to the following image:
We'll finish off this step by creating a simple breadcrumb. So grab the Horizontal Type Tool, and type this sentence "You are here: Home > Latest Stuff" or whatever that tells that this is a breadcrumb. And apply the following character settings to your text:
Font Family: Archer Font size: 15px Font weight: Bold Anti-aliasing setting: Smooth Color: #f5f3f4 Kerning: Optical
Now tell her where she is, again, using the following character settings:
Font Family: Georgia Font size: 15px Font weight: Italic Anti-aliasing setting: Smooth Color: #f5f3f4 Kerning: Optical
Step 8
It's time to start working on the content area. We'll start by
dragging a new horizontal guide according to the following image:
Oh, before we go any further, would like to ask you a question, mind you! Have you organized your layers panel?
Okay, back to our content area, let's start working on the sidebar. So using the Line Tool (U) create a 1x43px line, fill it with this color value: #630d28, and place it like in the image below:
Using the Horizontal Type Tool (T), type a title (for example: "Advertisement.") using the following character settings:
Font Family: Gotham Rounded Font size: 30px Font weight: Light Anti-aliasing setting: Smooth Color: #630d28 Kerning: Optical
Beneath your title, type a sub-title to support it. Using the following character settings:
Font Family: Archer Font size: 20px Font weight: Medium Anti-aliasing setting: Smooth Color: #ac114a Kerning: Optical
Drag a couple of new horizontal guides according to the following image:
Using the Rectangle Tool (U), we'll create a 110x110px rectangle, which will work as an ad block. Also, fill it with any color cause an image will be there, anyway. After you do that, apply a Stroke to it, use the image below for reference.
Make two copies of your ad block, then align them like in the image below:
Step 9
Drag a new horizontal guide according to the following image:
Create a new title using the same techniques we've gone through in the previous step.
Assuming your second title was "Categories," let's type some popular categories in our Website, using the following character settings:
Font Family: Georgia Font size: 15px Font weight: Regular Anti-aliasing setting: Smooth Color: #630d28 Kerning: Optical Leading: 30px
Using the Ellipse Tool (U), create a 6x6px circle next to each category, and fill it with this color value: #acaead.
Step 10
Create yet another title something that has to do with Twitter this time using the same techniques we've used above.
Now type some text as an example of a tweet, using the following character settings:
Font Family: Georgia Font size: 15px Font weight: Regular Anti-aliasing setting: Smooth Color: #630d28 Kerning: Optical Leading: 20px
After that, let's type some information about the tweet, using the following character settings:
Font Family: Archer Font size: 15px Font weight: Semi-bold Anti-aliasing setting: Smooth Color: #636363 Kerning: Optical
Make another copy of your tweet and its info, and make sure to align it according to the following image:
We'll end this step the same way we started it. By dragging a new horizontal guide according to the following image, that will indicate the bottom border of our content area.
Step 11
It's time to design the featured blog posts area. Again, create a title for it like in the sidebar and make sure to align it according to the following image:
Using the Rectangular Marquee Tool (M) create a selection of around: 253x115px, fill it with any color, and apply a Stroke to it. Use the image below for reference.
Place an image, and create a clipping mask for it we already have seen how to do that.
We'll now create a small bar that will contain some information about the blog post. So using the Rectangular Marquee Tool or the Rectangle Tool (U) or whatever tool you prefer to use create a 253x20px rectangle, fill it with: #9a1447, and leave 10px between it and the image above it.
Inside that rectangle, write some information about your blog post I've written its categories and number of comments using the following character settings:
Font Family: Archer Font size: 15px Font weight: Medium Anti-aliasing setting: Smooth Color: #f5f3f4 Kerning: Optical
Drag a new horizontal guide according to the following image:
Using the Horizontal Type Tool (T), type the title of your blog post, using the following character settings:
Font Family: Archer Font size: 25px Font weight: Medium Anti-aliasing setting: Smooth Color: #636363 Kerning: Optical
Now, and again, using the Horizontal Type Tool (T), write some few lines of your post, using the following character and paragraph settings:
Font Family: Georgia Font size: 15px Font weight: Regular Anti-aliasing setting: Smooth Color: #630d28 Kerning: Optical Leading: 26px Paragraph: Justify allAlso, make sure to leave 20px between your body text and your title.
Let's create the "Read More >>" button, why don't we? Create a 110x20px rectangle and fill it with this color value: #9a1447. Also, make sure to align it according to the following image:
Type the word "Read More >>" inside of it, using the following character settings:
Font Family: Archer Font size: 15px Font weight: Bold Anti-aliasing setting: Smooth Color: #ffffff Kerning: OpticalThen, apply a Drop Shadow to it. Settings can be seen in the image below:
Make a copy of this blog post and align it to the right. Use the image below for reference.
Step 12
In this step we'll create an area for our featured work. So, again, create another title, like the others we created before, and make sure to align it according to the following image:
Place an image of a featured work with the same specifications of the blog post's image.
Type a title and a short description using the same character settings we applied for the blog post's text.
Create a "Case Study >>" button, that looks like the "Read More >>" one. Also align it according to the following image:
Step 13
Drag a new horizontal guide according to the following image, that will indicate the top border of our footer area that we're just about to start creating.
Using the Rectangular Marquee Tool (M), create a selection of 1020x300px.
Fill your selection with this color value: #9a1447.
Create another selection, this time of: 1020x290px (which means to leave 5px in the top and the bottom).
Grab the Gradient Tool (G), open your Gradient Editor up, adjust your colors/settings according to the following image. With your selection still selected, and with Radial Gradient as your dragging option, drag according to the following image. Make sure to hold down the Shift key to constrain your angel if necessary.
Step 14
Drag two new horizontal guides according to the following image:
Type the first footer title ("Who's behind this," in our case) using the following character settings:
Font Family: Gotham Rounded Font size: 30px Font weight: Light Anti-aliasing setting: Smooth Color: #ffffff Kerning: Optical
Use the Line Tool (U) to create a 270x1px, fill it with White (#ffffff), and make sure to align it according to the following image:
Create a 270x70px rectangle using whatever tool you prefer, place an image inside of it, using the "Create Clipping Mask" command, and give it a Stroke of 4px and a color value of: #e5e6e8. Finally, don't forget to align it like in the image below:
Type some text about you, using the following character settings:
Font Family: Georgia Font size: 14px Font weight: Regular Anti-aliasing setting: Smooth Color: #ffffff Kerning: Optical Leading: 27px
Step 15
In this step, we'll create an area that contains recent comments. So, create another title that says "Latest Comments," that looks like the title on the left.
Then, type an example of a comment, using the following character settings:
Font Family: Georgia Font size: 15px Font weight: Regular Anti-aliasing setting: Smooth Color: #ffffff Kerning: Optical Leading: 20px
And type some information about the comment, using these character settings:
Font Family: Archer / Gotham Rounded Font size: 15px Font weight: Bold Italic / Medium Anti-aliasing setting: Smooth Color: #acaead Kerning: Optical
Make a duplicate of your comment and its information, and make sure to place them like the image below:
Step 16
The right part of our footer will contain some contact information. So, again, create a new title that looks like the others on the left, also it should say something that has to do with getting in touch. Then, place an image like the one on the left, but this time, it should be an image of map.
Now we'll create a button that says "Locate Us." So, using the Rounded Rectangle Tool (U), create a 100x30px rectangle, with 5px radius, fill it with: #f5f3f4, and take its Opacity down to: 50%.
Type the word "Locate Us" inside the rounded rectangle, using the following character settings:
Font Family: Gotham Rounded Font size: 15px Font weight: Bold Anti-aliasing setting: Smooth Color: #ffffff Kerning: Optical
Then, apply a Drop Shadow to it, so that it looks more interesting. Follow up with the image below:
It's time to add some contact information. Grab the Horizontal Type Tool (T), and type some information. We'll start by typing "Adress," using the following character settings:
Font Family: Gotham Rounded Font size: 15px Font weight: Bold Anti-aliasing setting: Smooth Color: #ffffff Kerning: Optical Caps: All CapsThen, type the address itself, using the following character settings:
Font Family: Archer Font size: 15px Font weight: Bold Italic Anti-aliasing setting: Smooth Color: #ffffff Kerning: Optical Leading: 20px
Keep adding more information...
So far, probably, the centers of the three parts of our footers are not horizontally aligned. So, we'll put each one of them inside an individual Layers Group, select the three of the groups, and click on "Distribute horizontal centers."
Step 17
Using the Rectangular Marquee Tool (M), create a selection of: 1020x40px and fill it with this color value: #e5e6e8. Call this layer: "footer_small_bg"
Use the Single Row Marquee Tool, to create a selection like the one in the image below and fill it with White (#ffffff).
Type your footer navigation text, using the following character settings:
Font Family: Archer
Font size: 15px
Font weight: Bold
Anti aliasing setting: Smooth
Color: #9a1447 #636363 Kerning:Optical
Then write your copyright text, using the same character settings shown above.
Put the text of the footer in an individual group, Shift click and select the layer "footer_small_bg" then click on "Align vertical centers" in the control panel, to make sure they're vertically well-aligned.
