SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Design The Brilliante Website Layout in Photoshop

June 2, 2010 by Mahmoud Khaled 30 Comments

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 [download#13#hits] times already!)

Your Turn To Talk

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

Author: Mahmoud Khaled

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.

Filed Under: Design, Photoshop, Tutorial

Comments

  1. David C. says

    June 2, 2010 at 2:07 pm

    I assume the blog headers will change and be generated dynamically as the blog is updated.

    So how will each blog header be rendered on a live site when the font used is Frutiger (not a system font…)?

  2. Jon Phillips says

    June 2, 2010 at 2:27 pm

    @David C.: You could probably use Cufon or sIFR to render those :)

  3. designfollow says

    June 2, 2010 at 8:10 pm

    great tutorial, thank you very much.

    “mashae allahe 3like akhi mohammed ;) “

  4. Steve says

    June 2, 2010 at 10:57 pm

    Nice Article, Thanks for this – I would love to take it to the next step and see how it gets pulled into Dreamweaver and made into web-standard code. PSD to DW would be an excellent topic.

  5. Duy Nguyen says

    June 2, 2010 at 11:34 pm

    Thanks for this nice tutorial

  6. Nagarjun Palavalli says

    June 3, 2010 at 6:12 am

    Very nice tutorial. Would love a tutorial on how to convert this into a website using HTML and CSS. Also, it would be great if you could tell us how to make a WordPress layout with this.

  7. Peter says

    June 3, 2010 at 8:36 am

    Is there a WordPress theme for this?

  8. Mahmoud says

    June 3, 2010 at 10:21 am

    Thanks a lot for your comments guys!

    Concerning the HTML/CSS part, I think Jon Philips — the founder of SpyreStudios — may be working on this part.

    Peace,
    Mahmoud

  9. Jon Phillips says

    June 3, 2010 at 10:29 am

    @Steve, Nagarjun Palavalli, Nagarjun Palavalli: Mahmoud is right, I’m working on converting it to css/html/WP :)

  10. Laira says

    June 3, 2010 at 1:43 pm

    Marvelous tutorial .Thanks for sharing with us

  11. Tutorial Lounge says

    June 4, 2010 at 2:24 am

    beautiful and really professional website design tutorial.

  12. vp says

    June 4, 2010 at 11:35 am

    awesome! im also lookin forward to DW or CSS tutorial from here…kep it up!

  13. Marc says

    June 6, 2010 at 12:04 pm

    Nice and pro. Waiting for HTML and CSS. Maybe not so easy to convert.

  14. Dave Tek says

    June 7, 2010 at 1:54 pm

    This is a very nice detailed tutorial. Passed this on to a buddy of mine. Thanks Again

  15. Kasie Thomas says

    June 11, 2010 at 4:11 am

    Amazing tutorial! I was just wondering, how did you make a link for all of the buttons?

  16. abey says

    June 16, 2010 at 2:58 pm

    good tutorial

  17. Daniel Pintilie says

    July 10, 2010 at 2:15 am

    really amazing…perfect…all the details presented..a very good work!

  18. Dale says

    July 12, 2010 at 12:14 am

    Great site and nice post. I was intrigued at your gradient pallet, could you post a link to where you downloaded those from, or if you created them it would be awesome to have them as a pallet.

  19. Mahmoud says

    July 12, 2010 at 10:19 am

    @Everyone: thanks a lot for your nice comments! :)

    @Kasie Thomas: this part of the tutorial is actually about designing the interface/layout inside Photoshop. However, there may be another part on how to code it. :D

    @Dale: Happy you liked it. :)
    You can download these gradients for free here: http://mkhaled.com/freebie-clean-gradients-set/

  20. Chris says

    August 8, 2010 at 4:38 pm

    Really looking forward to seeing the HTML/CSS or WordPress version of this tutorial. Great work!

  21. Giulia says

    September 17, 2010 at 9:43 am

    Really thank you for this handsome tutorial!!!

  22. Taty says

    September 30, 2010 at 8:50 pm

    Guys, I’ve been working on the HTML CSS from this PSD file. Take a look there at my Github repo. Still a lot of work to do. I plan writing a tutorial on how I got here and how to create a WordPress theme with it.

  23. Taty says

    September 30, 2010 at 8:50 pm

    Brilliante_Layout link:
    http://github.com/tatygrassini/Brilliante_Layout

  24. huijun says

    October 17, 2010 at 5:42 am

    seems quite useful

  25. Ludwig König says

    November 16, 2010 at 1:18 pm

    Very cool website layout. It could be one for me. Maybe I modify it for using this one for my own needs. Currently, because I need really much a website layout or maybe the idea behind. And with this useful tutorial you wrote for us -your readers- I’m able to create my own one for free.

    Thanks a lot for your cool website layout tutorial for creatinf a really nice theme/ template for free with Photoshop (or something like this (like Gimp, Fireworks and so on)

  26. Nelson says

    May 24, 2011 at 8:29 am

    Thanks very much for your tutorial. helped me realize that it isn’t that hard, just the mentality that denies you!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

SpyreStudios © 2018