Best Design Tutorials

Design Tutorials provides the best and educational tutorials for your skills improvement

Wikipedia

Search results

Burnstudio: Create An Amazing Personal Website From Scratch Using Photoshop


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 RulersGuide, andSnap.
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 itthead, 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 AboutWhat 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 Thumbnailsfolder.
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 itExplore, 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

No comments:

Post a Comment