Design The Brilliante Website Layout in Photoshop




In today’s Photoshop tutorial, we’re going to learn how to create a clean WordPress-styled website/blog design. We’ll be mainly dealing with; Basic shapes (lines, rectangles, arrows), Layer Styles, and a bit of basic type. Besides some Photoshop tricks. We’ll also be focusing on keeping our layout very well-aligned. So, let’s get started!

Final Image Preview

Take a quick look at what we’ll be creating together.

Design The Brilliante website Layout in Photoshop

Tutorial Details

  • Program: Adobe Photoshop CS4
  • Difficulty: Intermediate
  • Estimated Completion Time: Around 2-3 hours

External Sources

Icons

We’ll get the bird and RSS feed icons from Function free icon set.

Fonts:

We’ll use Frutiger™ CE 45 Light (Get it from Fonts.com), Arial, and Georgia (both are web-safe/standard fonts).

Step 1

We’ll be using 960 Grid System to keep everything well-aligned. Once it’s downloaded, Open this file “960_grid_24_col” up in Photoshop.

The final outcome is taller than the current height. So, we’ll go to Image > Canvas Size > Adjust your options according to the following image.

Brilliant Layout In Photoshop

In order to fill our background with a color. Using the Rectangle Marquee Tool (M) create a selection over the whole artboard, set your foreground color to: #ededed then, click Shift+Backspace to fill your selection. (Make sure to choose “Foreground Color” as a the filling option).

Brilliant Layout In Photoshop

Step 2

Again, using the Rectangle Marquee Tool (M) create a selection of 1020x70px – This will work as our header background.

Brilliant Layout In Photoshop

Fill your selection with this color value: #1a1e27.

Brilliant Layout In Photoshop

Using the Horizontal Type Tool (U) type your navigation text with the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ffffff

Brilliant Layout In Photoshop

Using the Custom Shape Tool (U) create an arrow of about 10x10px and fill it with #ededed and give it a Stroke.

Brilliant Layout In Photoshop

Step 3

Using the same character settings I’ve shown in the previous step, type “Grab our feeds“. Then from the Function Free Icon Set place the icon “rss_48” next to it.

Brilliant Layout In Photoshop

Using the Line Tool (U) create a vertical line of 1px in width. Apply a Gradient Overlay to it.

Brilliant Layout In Photoshop

Create another line, move it 1px to the right. Apply a Gradient Overlay to it as well.

Brilliant Layout In Photoshop

Step 4

In order to create our search bar background, use the Rounded Rectangle Tool (U) to create a rectangle of 180x25px with a radius of 5px, and fill it with #ededed.

Brilliant Layout In Photoshop

Type the word “search” using the following character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #1a1e27

Brilliant Layout In Photoshop

Using the Custom Shape Tool (U) create an arrow of about 15x15px, and fill it with #646464.

Brilliant Layout In Photoshop

Using the Single Row Marquee Tool create a 1px selection. Fill it with white (#ffffff).

Brilliant Layout In Photoshop

Since this 1px line should appear behind the arrow we’ll load the pixels of the arrow layer (by holding down Ctrl key and clicking on the arrow layer’s thumbnail), then hit Delete while selecting the 1px line layer.

Brilliant Layout In Photoshop

Step 5

Type your site’s name using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 30px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #1a1e27

Brilliant Layout In Photoshop

Duplicate the text layer, place it beneath the original one, fill it with white, then nudge it down 1px.

Brilliant Layout In Photoshop

Type your site’s slogan using the following character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #646464

Brilliant Layout In Photoshop

Using the Line Tool (U) create two lines of a width of 1px each. Then fill them with these color values: #ffffff & #d1d1d1.

Brilliant Layout In Photoshop

Write a brief description about your site, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: None
  • Color: #646464

Brilliant Layout In Photoshop

Before we move to the next step, make sure to keep your layers organized. Take a look mine:

Brilliant Layout In Photoshop

Step 6

Drag two new guides according to the following image:

Brilliant Layout In Photoshop

Using the Rectangular Marquee Tool (M) create a selection of 600x250px. Fill it with any color for now.

*Call this layer: “image_holder”.

Brilliant Layout In Photoshop

Place an image, put its layer above “image_holder” layer. Right-click on the image’s layer > Create clipping mask

Brilliant Layout In Photoshop

Using the Rectangular Marquee Tool (M) create another selection of 350x250px and fill it with #1a1e27.

Brilliant Layout In Photoshop

Drag two new horizontal guides according to the following image:

Brilliant Layout In Photoshop

Type a heading of a featured project/post using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 30px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ededed

Brilliant Layout In Photoshop

Write a short description about the project/post using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 30px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ededed

Brilliant Layout In Photoshop

Using the Line Tool (U) create a line of 320x1px and fill it with #393939.

Brilliant Layout In Photoshop

Using the Rectangular Marquee Tool (M) create a selection of about 70x60px. Fill it with any color, then add some layer style to it according to the following image:

Brilliant Layout In Photoshop

Place an image of your choice, create a clipping mask for it – refer to a previous step on how to do that – then make two more copies of your image.

Brilliant Layout In Photoshop

Step 7

Using the Rectangle Tool (U) create a rectangle of about 110x40px and fill it with #1a1e27.

Brilliant Layout In Photoshop

Using the Horizontal Type Tool (T) type “Hire Us” using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 20px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ededed

Brilliant Layout In Photoshop

Using the Ellipse Tool (U) create an ellipse of 20x20px, then apply some Layer Style to it according to the following image:

Brilliant Layout In Photoshop

Using the Custom Shape Tool (U) create an arrow of 10x10px and fill it with this color value: #1a1e27.

Brilliant Layout In Photoshop

Step 8

Drag a new horizontal guide after 50px.

Brilliant Layout In Photoshop

Using the Rectangle Tool (U) create a rectangle of about 310x30px and fill it with #1a1e27.

Brilliant Layout In Photoshop

Type a heading using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 26px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: Won’t matter since we’ll apply a Gradient Overlay.

Brilliant Layout In Photoshop

Apply a Gradient Overlay to your text. Use the image below for reference.

Brilliant Layout In Photoshop

Drag a new horizontal guide according to the following image:

Step 9

Brilliant Layout In Photoshop

Type a heading of a blog post using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 25px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #1a1e27

Brilliant Layout In Photoshop

Beneath the post’s heading type the words “posted in:” using the following character settings:

  • Font Family: Arial
  • Font size: 14px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #1a1e27

Then next to it, type a name of a category using the following character settings:

  • Font Family: Georgia
  • Font size: 14px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #646464

Brilliant Layout In Photoshop

Keep adding the post’s details according to the following image:

Brilliant Layout In Photoshop

Using the Rectangle Tool (U) create a rectangle of 150x150px. And apply some Layer Style to it.

Brilliant Layout In Photoshop

Hold down Ctrl key and click on this layer’s thumbnail to select it. And go to Select > Modify > Contract: 5px. Then fill this selection with any color for now.

Brilliant Layout In Photoshop

Place an image. Apply the “Create clipping mask” command to it.

Brilliant Layout In Photoshop

Write a description about the post using the following character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #1a1e27

Brilliant Layout In Photoshop

Using the Line Tool (U) create a line of 390×1 and fill it with this color value: #bdbdbd.

Brilliant Layout In Photoshop

Add some more details to your post according to the following image:

Brilliant Layout In Photoshop

Step 10

Create a rectangle of 110x30px, and apply a Gradient Overlay to it.

Brilliant Layout In Photoshop

Write the words “Read More” using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 15px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: Any color for now

Give it a Gradient Overlay according to the following image:

Brilliant Layout In Photoshop

Create two more copies of your latest blog post, and leave 100px between each one.

Brilliant Layout In Photoshop

Step 11

We’ll start working on the sidebar. Add some content to your sidebar according to the following image:

Brilliant Layout In Photoshop

Type your name using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 20px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #646464

Brilliant Layout In Photoshop

And your job using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #818181

Brilliant Layout In Photoshop

Step 12

Drag a new horizontal guide according to the following image:

Brilliant Layout In Photoshop

Create yet another heading according to the following image:

Brilliant Layout In Photoshop

Create a rectangle of 165x165px, and fill it with any color just for now.

Brilliant Layout In Photoshop

Apply some Layer Styles for it. Check the image below for reference.

Brilliant Layout In Photoshop

Type the words “Advertise Here” using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 30px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: Any color just for now.

Then, apply a Gradient Overlay to it according to the following image:

Brilliant Layout In Photoshop

Make another copy of what we’ve created in this step:

Brilliant Layout In Photoshop

Step 13

Create another heading:

Brilliant Layout In Photoshop

Create an arrow of 10x10px and fill it with this color value: #646464.

Brilliant Layout In Photoshop

Write a name of a category using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 16px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #1a1e27

Brilliant Layout In Photoshop

Keeping adding more arrows and categories…

Brilliant Layout In Photoshop

Drag a new horizontal guide according to the following image:

Brilliant Layout In Photoshop

Step 14

Using the Rectangular Marquee Tool (M) create a selection of 1020x290px and fill it with any color.

Brilliant Layout In Photoshop

Set the color values in your Gradient Editor from #1c202a to #1a1e27. Select the pixels of the footer background layer. Then drag with a Radial Gradient.

Brilliant Layout In Photoshop

Drag two new horizontal guides according to the following image:

Brilliant Layout In Photoshop

Step 15

Write a heading using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 22px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: #ededed

Brilliant Layout In Photoshop

Using the Line Tool (U) create a line of 270x1px and fill it with this color value: #393939.

Brilliant Layout In Photoshop

Write some links using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ededed

Step 16

Brilliant Layout In Photoshop

Create another heading. Check the image below for reference.

Brilliant Layout In Photoshop

Create a rectangle of 80x80px, fill it with #646464, select its pixels, contract selection, place an image, create a clipping mask for it. We did that previously in another step.

Brilliant Layout In Photoshop

Keep adding some more images…

Brilliant Layout In Photoshop

Step 17

Create a one final heading. Check the image below for reference.

Brilliant Layout In Photoshop

Write some text as an example of a tweet, using the following character settings:

  • Font Family: Georgia
  • Font size: 15px
  • Font weight: Italic
  • Anti-aliasing setting: Smooth
  • Color: #ededed

Brilliant Layout In Photoshop

Write some more text that represents the tweet information, using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #ffffff

Brilliant Layout In Photoshop

Write “Follow Us on Twitter” using the following character settings:

  • Font Family: Frutiger CE 45 Light
  • Font size: 20px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #818181

Brilliant Layout In Photoshop

Place the bird icon from the Function free icon set.

Brilliant Layout In Photoshop

Create two selections of 1px in height for each at the top and the bottom of the footer, then fill them with white (#ffffff).

Brilliant Layout In Photoshop

Step 18

Type your small footer text, using the following character settings:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #646464 – #1a1e27

Brilliant Layout In Photoshop

Download The PSD file

Download the ZIP file here (6.5MB) (downloaded 9666 times already!)

Your Turn To Talk

I hope you enjoyed this tutorial! Please take a minute to leave a comment below :)





About the author:

Mahmoud is a young web and graphic designer from Egypt. He's also a blogger and tutorial writer. Send him a tweet @MahmoudKhaled, connect with him on Facebook, or visit his blog/site called mkhaled.com.

Comments:

Scroll back to the top