Burnstudio: Create An Amazing Personal Website From Scratch Using Photoshop

Posted in Tutorials, Web Interface • Posted on 18 Comments

Have you ever had a hard time designing your own personal website? Thinking of what elements, shapes, font styles will suit your design? Now if you are in the mood to do something new today, I’ll guide you in creating a stylish personal website. We will be using mostly shapes, layer styles, and fonts to create a new personal website. Hope you can follow along with this tutorial. Now let’s get started.

Here is what we will be making, click on the image for full preview:

Step 1: Download Resources

Step 2: Setting The Document Size

In the Downloads folder or on your Desktop open up “960_grid_24_col.psd”. First we need to change the canvas size, hit CTRL + ALT + C to access the canvas size option and change the width to 1200 px and height to 1500 px. Make sure to be using pixels as your measurement.

tutorial image

We also need to make sure that Rulers and Guide Lines are visible. Go to View and check Rulers, Guide, and Snap.

tutorial image

Now follow these instructions and place New Ruler Guides at:

  • Position: 40px Orientation: Horizontal
  • Position: 170px Orientation: Horizontal
  • Position: 210px Orientation: Horizontal
  • Position: 550px Orientation: Horizontal
  • Position: 610px Orientation: Horizontal
  • Position: 660px Orientation: Horizontal
  • Position: 900px Orientation: Horizontal
  • Position: 1180px Orientation: Horizontal
  • Position: 1455px Orientation: Horizontal

Step 3: Creating The Background

Fill the background layer with #f3f2ee. Now lets add some texture to it, go to Filter > Noise > Add Noise

tutorial image

Step 4: Organizing The Folders/Groups

It is important to make the Folders/Groups organized in order for the developer to easily locate the elements of the site, or for the future redesigning of the site you, as a designer, can easily locate the elements you may want to change.

Create new Folder(s)/Group(s) and name them as shown below.

tutorial image

Step 5: Creating the Header Area

Top Header

Inside the Header folder create another folder and name it Top Header. Now create a new layer and name it thead, make a selection from the first guide starting from the left across to the right fill it with any color for now. Select Type Tool(T) and type text as shown in the screen shot below according to its character settings.

tutorial image
tutorial image

Add this Blending Option to thead layer.

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

  • Stroke

tutorial image

Header

Create another folder inside header folder and name it header. This folder contains these folders: Logo, Latest Tweet, Navigation, and Search.

Create a new layer and name it header_bg. Select Pen Tool(P), make a shape as shown in the screen shot below and fill it with any color.

tutorial image

Add this Blending Option

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

  • Stroke

tutorial image

Logo

It’s time to add our Logo, so grab the Type Tool(T) and type the logo according to its character settings. Color used for the logo #ffffff and #e66324.

tutorial image

Grab the Pen Tool(P) to create that little shape, fill it with #fb824a and label it design using Type Tool(T).

Navigation

Now lets create our navigation, select Type Tool(T), add the following links according to the settings below.

tutorial image

Using the Pen Tool(P) create a shape as shown in the screen shot below that will serve as a hover or active state, and fill it with any color.

tutorial image

Add this Blending Option

  • Drop Shadow

tutorial image

  • Gradient Overlay

tutorial image

Search

To create the search form first thing we need to do is to select Rounded Rectangle Tool(U), create a shape as shown in the screen shot below and fill it with any color.

tutorial image

Add this Blending Option

  • Drop Shadow

tutorial image

  • Gradient Overlay

tutorial image

Create another shape now using the Rectangle Tool(U)

tutorial image

  • Inner Shadow

tutorial image

  • Gradient Overlay

tutorial image

  • Stroke

tutorial image

Create another shape for the button.

tutorial image

Add this Blending Option

  • Drop Shadow

tutorial image

  • Bevel and Emboss

tutorial image

  • Gradient Overlay

tutorial image

Using the Type Tool(T) type the following:

tutorial image

Tweet Feed

Time to put up our Tweet Feed. Select the Type Tool(T) type “Tweet Feed:” and a sample latest feed. Also open up the twitter icon and place it beside the text.

tutorial image

I added this Blending Option to the Twitter Icon

tutorial image

Step 5: Creating The Slideshow

The first step is to create a big box using the Rectangular Marquee Tool(M). Change the Foreground color to #282828 and Background to #191919. Now select Radial Gradient and fill the selection starting from the center.

tutorial image

Using the Rectangular Marquee Tool(M) create another shape and fill it with any color.

tutorial image

Add this Blending Option

  • Gradient Overlay

tutorial image

Using the Pen Tool(P) create a shape and fill it with any color.

tutorial image

Add this Blending Option

  • Gradient Overlay

tutorial image

Now above the two shape layers create 2 layers and name them Light and Dark. Now select the Rectangular Marquee Tool(M) and make a selection and fill it with #ffffff.

tutorial image

Add a Gaussian Blur to the layer, to do this go to Filter > Blur > Gaussian Blur.

tutorial image

Set the layer mode to Soft Light and Opacity to 50%. Now select the Dark layer and create a shape using the Rectangular Marquee Tool(M) and fill it with #000000.

tutorial image

Add the same amount of Gaussian Blur but this time set the Opacity to 80%.

tutorial image

Below the Orange and the Black colors we will add a background shadow. So create a new layer below it, select the Elliptical Marquee Tool(M).

tutorial image

Add a Gaussian Blur Radius: 6px.

Using the Type Tool(T) and the Elliptical Marquee Toll(M) create what is shown in the screen shot below and make sure that it is on a separate layer. On the left side I used 12 pt Arial. On the right side I used 16pt Arial.

tutorial image

The first circle will serve as the hover/active state.

Add this Blending Option

  • Inner Shadow

tutorial image

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

The second Circle will be the next button.

Add this Blending Option

  • Drop Shadow

tutorial image

  • Bevel and Emboss

tutorial image

  • Gradient Overlay

tutorial image

I added a small arrow to the second circle using the Pen Tool(P) with fill color #606163. Duplicate it and move the original layer once using the down arrow key. Also, for the text, I duplicated it and changed the color to #5d5d5. I colored number 1 with #ffffff. With this step it will give the arrow and the numbers an embedded or letterpressed effect.

tutorial image

For this tutorial I will not add any slide images. So it’s up to you to add your own.

Step 6: Creating 3 Columns (About, What I Do and Testimonials)

Inside 3 Columns folder create 3 folders and name them About, What I Do and Testimonials. Now we’re going to add our About information, so select the Type Tool(T) and type your information.

tutorial image

Notice that line. I used Line Tool(U) 3px color #000000.

Read More Button

Create a new folder and name it Read More. Using the Round Rectangle Tool(U) with a radius 5px create a shape and fill it with any color.

tutorial image

Add this Blending Option

  • Drop Shadow

tutorial image

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

Using the Type Tool(T) and the Pen Tool(P) I added ‘Read More’ and an arrow shape. You can just duplicate the arrow shape as we did in our slide show. Again you can use the same technique to achieve an embedded effect, just duplicate each layer. The original layer must move once using arrow key and change the color to #ffffff.

tutorial image
tutorial image

Time to add a separator to separate the text and arrow. Using Line Tool(U), add 2 lines the first line must have a fill #ffffff and the second #aeaeaf.

tutorial image

Nice and sexy eh? Now lets proceed to What I Do.

What I Do

For this step simply duplicate all the elements inside the About Folder and move it to What I do Folder, then change the Heading and Information.

tutorial image

Testimonials

Just duplicate again. I added a 60×60 image and added italic text and aligned it to the right.

tutorial image

Step 7: Creating My Portfolio

In this step we are going to display our best designs. To start select the Type Tool(T) and type “My Portfolio” then add a 3px line color #000000 as shown in the screen shot below.

tutorial image

Now were going to add thumbnails for our design images. Create a new folder and name it Thumbnails. Now what you’re going to do is create a new file (CTRL + N) 210 x 150 in this file you’re going to create 4 thumbnails with your chosen images. When you’re done drag it to our canvas and place to the Thumbnails folder.

tutorial image

I added a Stroke to each thumbnail.

tutorial image

Now were going to add a Client Name and Website URL below each thumbnail. So, select the Type Tool(T) and type some dummy text.

tutorial image

Last thing we’ll do for the Portfolio section is add a previous and next button at the right top corner. Select the Shape Tool(U) select an arrow from the list of shape and fill it with #362f2d.

tutorial image

Step 8: Creating The Footer

Inside the Footer folder create a new layer and name it footer_cont. Now select the Rectangular Marquee Tool(M) and create a big rectangle selection from the guide. Set the Foreground color to #151515 and Background to #212121. Select Linear Gradient(G) and drag starting from the bottom up to the top of the selection.

tutorial image

Add this Blending Option

  • Inner Glow

tutorial image

  • Stroke

tutorial image

We will divide our footer area into four columns, so inside the Footer folder create 4 folders and name it Explore, My Services, Latest Frog The Blog and Stay Connected. Lets work first on heading titles. Using the Type Tool(T) type your heading.

tutorial image

I added a drop shadow in each header

Add this Blending Option

  • Inner Glow

tutorial image

Explore

Lets work on Explore folder. Using the Type Tool(T) type create another section heading for Explore.

tutorial image

My Services

Here I used the same character settings but with a different color. Use this color for the text #c3b7a4. I colored it differently so that services is more noticeable than the others.

tutorial image

Latest From The Blog

Here we showcase the 3 most recent article from the blog. I styled it using numbers to make it unique and avoid redundancy of styles.

tutorial image

Stay Connected

Time to open up the social media icons and place them on the canvas. Place it correctly with proper spacing. On this part don’t add a divider :)

tutorial image

Step 9: Creating The Footer Copyright

Make a selection in the remaining white space area in the bottom and fill it with any color.

tutorial image

Add this Blending Option

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

  • Stroke

tutorial image

Time to add your copyright text, so select Type Tool(T) and type in with correct character settings.

Finally we’re done! I really hope that you have learned something from this tutorial that can be used for your future projects. If you have questions just drop it below. Thank you and please don’t forget to subscribe.

Final Preview

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

18 Comments Best Comments First
  • Abhishek

    Tuesday, February 15th, 2011 12:19

    4

    You should atleast offer a download of the PSD..Other than that a very good tutorial! :D

    +2
  • G369

    Tuesday, February 15th, 2011 13:13

    1

    Nice! thanks!
    I like the colors and the layout, very inspiring.

    0
  • Marques

    Wednesday, February 16th, 2011 18:46

    7

    Is it a typo that you tell the user to open “960_grid_24_col.psd” but in your procedure and screen shots you use the 16 col system?

    0
  • Edison Leon

    Tuesday, February 15th, 2011 22:10

    6

    Great tutorial, easy to follow and a nice design. Thank you!

    0
  • ferdi

    Tuesday, February 15th, 2011 14:51

    5

    nice tutorial but i think the 960grid system is useless. If you know photoshop probably you’ll not need it.

    0
    • Tim

      Sunday, April 17th, 2011 06:35

      16

      I, too, think a grid like that isn’t very useful. If you are a designer you should not need something like that. Additionally, no web design should be based on predefined templates. Design is a free flowing process that ends in an organized result. By starting off with specific guides, you are taking half the process out of design. You are putting restraints on yourself that should not be there.

      0
  • Rene

    Tuesday, February 15th, 2011 15:35

    2

    Thanks for this detailed tutorial.
    I already saw a few tips that i wanted to learn.
    Gonna try this out at home.

    0
    • Saad Bassi

      Thursday, February 17th, 2011 19:17

      10

      We will try to do some variations next time :)

      0
      • Kenny Brijs

        Wednesday, April 6th, 2011 15:04

        15

        I really enjoyed the tutorial and learned some things from it, thanks for all your effort.

        I’d like to give some constructive criticism but keep in mind that I really appreciate your effort, it’s just some improvements ;)

        1: You are using the 960 grid template, but throughout the tutorial, you are not making proper use of it, gutters are being ignored and many elements are placed where they break the grid. While it’s perfectly possibly not to do that. And indeed, at the beginning the 24 col grid gets mentioned while you use the 16 col grid. Every element can be placed perfectly using the 24 column grid.

        2: Some more attention to the alignment of certain elements would have given the design a better finish.

        3: In some cases, when you are selecting an area and filling it with a color/gradient, a shape layer with color/gradient overlay would have been a better solution, since a shape layer can still be transformed later, if you would want to make some changes.

        4: The text in the orange box (in the slider) benefits from a 1px dropshadow, it improves readabilty.

        5: Some elements in the header would also benefit from more contrast, I don’t know about your screen, but on mine, some elements are difficult to spot (since they are dark-gray on dark-gray).

        All that being said, thanks again for you effort and this tutorial, I hope you learn something from these comments just as I have learned from you tutorial ;).

        PS: Michael Burns, if you want to see my design using the 24col grid, send me a tweet ;) (@kennybrijs)

        Greets

        0
      • David Mejias

        Thursday, February 17th, 2011 22:59

        8

        Why not how to make a wordpress simple template?

        0
  • Chris McAllister

    Thursday, February 17th, 2011 17:11

    9

    Great looking site, though if you’d have done a section on how to slice it up that would have been even more useful

    0
  • Brett Widmann

    Tuesday, April 19th, 2011 19:27

    17

    This is a great tutorial. I love how mine turned out!

    0
  • Amr

    Wednesday, June 15th, 2011 20:01

    18

    Thanks for the tutorial.
    I really enjoyed the tutorial and i learned new things from this good tutorial.

    Thank You

    0
  • Cyril Pantoli

    Sunday, April 3rd, 2011 16:22

    14

    Thank you so much for this well-realized tutorial. I have followed every single stage of this tutorial step by step and changed a few things to fit with my own expectations. Here is the result :

    I’m now following the “convert Burnstudio from PSD to HTML” tutorial and hope I will get a satisfying outcome. ;)

    0
  • Paul Janssen

    Friday, February 18th, 2011 12:31

    11

    After 10 years of webdesign I still don’t understand why someone wouldN’T do such a layout in Fireworks…

    0
  • Rory

    Monday, February 21st, 2011 13:36

    12

    Sweet, lovely techniques Mr Burns

    0
  • Gavrilo

    Tuesday, March 15th, 2011 20:39

    13

    awesome idea for header love it x]

    0
  • Amr

    Wednesday, June 15th, 2011 20:01

    18

    Thanks for the tutorial.
    I really enjoyed the tutorial and i learned new things from this good tutorial.

    Thank You

    0
  • Brett Widmann

    Tuesday, April 19th, 2011 19:27

    17

    This is a great tutorial. I love how mine turned out!

    0
  • Cyril Pantoli

    Sunday, April 3rd, 2011 16:22

    14

    Thank you so much for this well-realized tutorial. I have followed every single stage of this tutorial step by step and changed a few things to fit with my own expectations. Here is the result :

    I’m now following the “convert Burnstudio from PSD to HTML” tutorial and hope I will get a satisfying outcome. ;)

    0
  • Gavrilo

    Tuesday, March 15th, 2011 20:39

    13

    awesome idea for header love it x]

    0
  • Rory

    Monday, February 21st, 2011 13:36

    12

    Sweet, lovely techniques Mr Burns

    0
  • Paul Janssen

    Friday, February 18th, 2011 12:31

    11

    After 10 years of webdesign I still don’t understand why someone wouldN’T do such a layout in Fireworks…

    0
  • Chris McAllister

    Thursday, February 17th, 2011 17:11

    9

    Great looking site, though if you’d have done a section on how to slice it up that would have been even more useful

    0
  • Marques

    Wednesday, February 16th, 2011 18:46

    7

    Is it a typo that you tell the user to open “960_grid_24_col.psd” but in your procedure and screen shots you use the 16 col system?

    0
  • Edison Leon

    Tuesday, February 15th, 2011 22:10

    6

    Great tutorial, easy to follow and a nice design. Thank you!

    0
  • ferdi

    Tuesday, February 15th, 2011 14:51

    5

    nice tutorial but i think the 960grid system is useless. If you know photoshop probably you’ll not need it.

    0
    • Tim

      Sunday, April 17th, 2011 06:35

      16

      I, too, think a grid like that isn’t very useful. If you are a designer you should not need something like that. Additionally, no web design should be based on predefined templates. Design is a free flowing process that ends in an organized result. By starting off with specific guides, you are taking half the process out of design. You are putting restraints on yourself that should not be there.

      0
  • Abhishek

    Tuesday, February 15th, 2011 12:19

    4

    You should atleast offer a download of the PSD..Other than that a very good tutorial! :D

    +2
    • Saad Bassi

      Thursday, February 17th, 2011 19:17

      10

      We will try to do some variations next time :)

      0
      • David Mejias

        Thursday, February 17th, 2011 22:59

        8

        Why not how to make a wordpress simple template?

        0
      • Kenny Brijs

        Wednesday, April 6th, 2011 15:04

        15

        I really enjoyed the tutorial and learned some things from it, thanks for all your effort.

        I’d like to give some constructive criticism but keep in mind that I really appreciate your effort, it’s just some improvements ;)

        1: You are using the 960 grid template, but throughout the tutorial, you are not making proper use of it, gutters are being ignored and many elements are placed where they break the grid. While it’s perfectly possibly not to do that. And indeed, at the beginning the 24 col grid gets mentioned while you use the 16 col grid. Every element can be placed perfectly using the 24 column grid.

        2: Some more attention to the alignment of certain elements would have given the design a better finish.

        3: In some cases, when you are selecting an area and filling it with a color/gradient, a shape layer with color/gradient overlay would have been a better solution, since a shape layer can still be transformed later, if you would want to make some changes.

        4: The text in the orange box (in the slider) benefits from a 1px dropshadow, it improves readabilty.

        5: Some elements in the header would also benefit from more contrast, I don’t know about your screen, but on mine, some elements are difficult to spot (since they are dark-gray on dark-gray).

        All that being said, thanks again for you effort and this tutorial, I hope you learn something from these comments just as I have learned from you tutorial ;).

        PS: Michael Burns, if you want to see my design using the 24col grid, send me a tweet ;) (@kennybrijs)

        Greets

        0
  • Rene

    Tuesday, February 15th, 2011 15:35

    2

    Thanks for this detailed tutorial.
    I already saw a few tips that i wanted to learn.
    Gonna try this out at home.

    0
  • G369

    Tuesday, February 15th, 2011 13:13

    1

    Nice! thanks!
    I like the colors and the layout, very inspiring.

    0

Comments are closed.

54.80.225.32 - unknown - unknown - US