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 :)

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

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

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022