Artthatworks: Create A Beautiful Portfolio Landing Page In Adobe Photoshop

Posted in Tutorials, Web Interface3 years ago • Written by 10 Comments

Hello readers! In this week’s tutorial we will be making an awesome, beautiful portfolio in Adobe Photoshop. The landing page will contain a header section, slider, an eye-catching about you text, what you do, a section for your current project, a footer that will contain about you, latest news, and latest tweets. This tutorial will be detailed so that beginners can follow through. Let’s get started!

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

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1750px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one important thing when using Ruler Tool is the Info(Information) Panel. This is very useful when you are measuring using the ruler as the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Repeat the step of create a guide but now change the value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Working on Background

Fill the background layer with #d8e4d6. Download the pattern from the resource above. Now, select Paint Bucket Tool(G) set it to pattern from the dropdown menu.

Select a pattern as shown in the screenshot below. Create a new layer above the background layer and fill it, and lastly set the blend mode to Soft Light.

Select Rectangle Tool(U), set the fill color to #23353e. Create a 100% by 330px shape at the very top of the page.

Apply this Blending Option

  • Stroke: #1a272e

  • Drop Shadow: #fff

Go to Filter – Convert for Smart Filters, again go to Filter – Noise- Add Noise.

Step 3: Working on Header

The header section will contain a Logo and Navigation. Remember it is important to organize your layers by naming and grouping them. I will leave it up to you how you organize and name your layers.

First we will create a zigzag pattern the same as on the preview above. To create it create a new document size 15px by 15px, background to transparent. Using Pencil Tool (B) fill color #1a272e create a shape a shown in the screenshot below.

Go to Edit – Define Pattern name it zigzag. Now, using Rectangle Tool (U) with the same fill with our pattern, create a 100% by 20px shape at the very top of the canvas.

Using Rectangular Marquee Tool (M) create a 100% by 15px selection and fill it with the pattern we made using Paint Bucket Tool (G).

Apply this Blending Option

  • Drop Shadow: #fff

Result

Logo

For the logo I used a font name Lobster Two that you can find on Google Fonts. Let’s put up our site logo using Text Tool(T), size 36pt, color #fff.

Apply this Blending Option

  • Drop Shadow: #000

Navigation

For the navigation I used the font Museo that can also be found on Google Fonts. Select Text Tool (T), Museo 700, size 16pt, color #fff & #67b256 and add this navigation links home, portfolio, blog, contact.

Step 4: Working on Slideshow

The sideshow section will contain image preview, description, and controls.

Image Preview

We need to create a base layer to hold the images for our image preview. To do this select Rectangle Tool(U) and create a 960px by 300px shape.

Apply this Blending Option

  • Stroke: #fff

Now that we have a base layer we will create a shadow on both corners so that it will pop up and have some depth. To create a shadow create a shape using Pen Tool(P) as shown in the screenshot below.

Fill the shape with #000. Go to Filter – Blur – Gaussian Blur.

Again go to Filter – Blur – Motion Blur.

lastly set the layer Opacity to 50%.

Text Description

Using Text Tool(T) add text as shown in the screenshot below.

Slider Controls

To create the next & previous buttons select Rounded Rectangle Tool(U) Radius to 10px. Refer to the screenshot below for the guide.

Merge both shapes and resize it about 13px by 21px.

Apply this Blending Option

  • Drop Shadow: #fff

  • Inner Shadow: #000

  • Color Overlay: #cce7df

Duplicate the arrow and transform it on the other side. Change the Color Overlay to #fff and place it as shown in the screenshot below.

Now that we have our previous & next button, let’s create the identifier “circles” or what ever they call it. Using Ellipse Tool create a 19px by 19px shape color #cce7df. Apply the same Inner Shadow & Drop Shadow as we did in our Previous & Next buttons.

Make a selection of the circle by pressing Ctrl + Click to the vector mask thumbnail of the shape in the layers panel. Go to Select – Modify – Contract. Contract it by 5px and fill with #fff.

Apply this Blending Option

  • Drop Shadow: #000

Group the circles that we have just created and duplicate it 2 times. Select 1 of the circles and change the fill color to #67b256.

Step 5: Working on About Text

To start let’s create first the dashed lines pattern. Create a 20px by 20px transparent document. Using Pencil Tool(B) color #9b9b9b create a shape as shown in the screenshot below.

Name the pattern anything. Now, create a selection 960px by 20px and fill it with the pattern we just made. Duplicate the layer and apply a Color Overlay #fff.

Let’s add our About text using Text Tool(T). After placing the text add a drop shadow color #fff.

Make another selection 40px below the text and repeat the step as we did in making our dashed lines. Delete the middle section of dashed lines. You may have something that looks like in the screenshot below.

We will be placing a cool shape on the middle. Select Shape Tool(U) and select a shape as shown in the screenshot below.

Create that shape with the same fill color of our dashed lines and drop shadow.

Step 6: Working on What I Do

For this section we will just make a title header and a sample description about what you can offer. Also, we will be making a read more button. This section will be divided into 3 columns the width for each column will be 300px and the distance from each columns will be 30px I’ll leave you to create a guide for that.

Now, select Text Tool(T) and add a title header and a sample description, refer to the screenshot below for the format.

For the read more button. Select Rounded Rectangle Tool(U), set the Radius to 3px the color will be #67b256. Create a button using it the size will be 90px by 25px.

Apply this Blending Option

  • Inner Shadow: #fff

  • Stroke: #fff

Result!

Duplicate it twice and place it according to your guides.

Step 7: Working on My Current Projects

In this section we’re obviously placing our most current projects. The header will be the same text format and color as we did in our what I do. Using Text Tool(T) place the header text 60px below the read more button.

Select Rectangle Tool(U). For the images we will first make a base layer to hold the images, the size will be 300px by 150px. Place it 30px below the header.

Apply this Blending Option

  • Outer Glow: #000

  • Stroke: #fff

After applying, duplicate it twice and place it accordingly.

Step 8: Working on Testimonials

This section will contain thumbnail images of client work, testimonials, name, and a website url. For the image thumbnail create a base 90px by 90px #fff base shape using Rectangle Tool(U). Apply the same outer glow as we did in our current project. Place it as shown in the screenshot below.

Add dummy text for testimonials, name and website url using Text Tool(T). Refer to the screenshot below for the format.

Step 9: Working on Footer

Footer section will contain about, latest news, latest tweets, and copyright text. First we will need to create our base layer, this is just a repeated steps as we did in our header section. Using Rectangle Tool color #23353e cover the remaining section 80px below the testimonials. Next, you will convert it to smart filters by going to Filter – Convert for smart filters, again go to Filter – Noise – Add noise 0.5%.

Make a selection using Rectangle Marquee Tool(M) and fill it with zigzag pattern. Rotate it vertically as shown in the screenshot below.

Still this footer section will be divided into three columns. 1st column is for the about section, 2nd for latest news, and 3rd for latest tweets.

About Me

For the header the font and font color has change to #fff with a 1px #000 drop shadow. The dummy text for about me the text format is Droid Sans 13pt #a4afb4 and apply the same drop shadow.

To create the image thumbnail first you should grab a 130px by 160px image.

Apply this Blending Option

  • Outer Glow: #000

  • Stroke: #fff

Duplicate it twice and transform it by pressing Ctrl + T and rotate it a bit to the left and right.

Latest News

The same header and text. For the date and category color will be 667983, size 11pt. For the dividers color will be #0f161a, #37515e.

Grab a copy of read more button, change the color to #286065. Text wil be #fff, #0f161a.

Change Blending Option

  • Stroke: #0f161a


Result!

Latest Tweets

The same text format. Link color #67b256.

Copyright

Using Rectangle Tool(U) color #1a272e create a 100% by 70px at the very bottom of the canvas. Apply a noise using the same step as we did to our base layer in our header and footer.

Apply this Blending Option

  • Inner Shadow: #fff

Using Text Tool(T) add your copyright text. Droid Sans 12pt color #667983. Also, add a 1px drop shadow. Place this copyright text on the left side, on the other side duplicate a copy of the logo and place it at the bottom right side of our footer.

Wew! Here is our Final Result!

I hope you enjoyed and learned something from this tutorial! Oh and if you want to follow up and convert this website to live version? I have just created handy PSD to HTML tutorial just for you!!!

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.

10 Comments Best Comments First
  • Dainis Graveris

    Friday, October 21st, 2011 20:40

    5

    Indeed very beautiful tutorial from you – you’re really a very promising designer! Glad to have you in our team!

    +1
  • tomer

    Tuesday, March 13th, 2012 19:20

    10

    Very intersting post. thank you very much for the info. Very enriching site.
    Thank you,
    Tomer

    0
  • Mian

    Saturday, October 22nd, 2011 00:09

    4

    A Great Tutorial Ever Thanks.. it’s very helpful

    0
  • Larry James

    Friday, October 21st, 2011 05:11

    3

    Great tutorial Micheal. I look forward to you doing a follow up tutorial showing how to slice the graphics, and export the files to create the template.

    0
  • tristan

    Thursday, October 20th, 2011 13:35

    2

    “Artthatwroks” hehe. Otherwise very nice :)

    0
    • Michael John Burns

      Thursday, October 20th, 2011 15:02

      1

      Oh I didn’t notice it. My bad :D Thanks for pointing that.

      0
  • eirc

    Saturday, October 22nd, 2011 10:43

    6

    Will you show us how to code this layout please.

    0
  • melanie

    Saturday, November 12th, 2011 07:43

    9

    Great Layout and awesome tutorial! proud to be a Filipino!

    0
  • Mark Andrew

    Friday, November 11th, 2011 07:28

    8

    HI!

    I like this tutorial for newbie like me. Thanks a lot dude. I have learn new things. keep on sharing.
    God bless,

    Mark

    0
  • Jani

    Saturday, October 29th, 2011 12:53

    7

    very helpful…very nice…I hope you show us how to code this layout… Pleas ;O)

    Jani

    0
  • tomer

    Tuesday, March 13th, 2012 19:20

    10

    Very intersting post. thank you very much for the info. Very enriching site.
    Thank you,
    Tomer

    0
  • melanie

    Saturday, November 12th, 2011 07:43

    9

    Great Layout and awesome tutorial! proud to be a Filipino!

    0
  • Mark Andrew

    Friday, November 11th, 2011 07:28

    8

    HI!

    I like this tutorial for newbie like me. Thanks a lot dude. I have learn new things. keep on sharing.
    God bless,

    Mark

    0
  • Jani

    Saturday, October 29th, 2011 12:53

    7

    very helpful…very nice…I hope you show us how to code this layout… Pleas ;O)

    Jani

    0
  • eirc

    Saturday, October 22nd, 2011 10:43

    6

    Will you show us how to code this layout please.

    0
  • Dainis Graveris

    Friday, October 21st, 2011 20:40

    5

    Indeed very beautiful tutorial from you – you’re really a very promising designer! Glad to have you in our team!

    +1
  • Mian

    Saturday, October 22nd, 2011 00:09

    4

    A Great Tutorial Ever Thanks.. it’s very helpful

    0
  • Larry James

    Friday, October 21st, 2011 05:11

    3

    Great tutorial Micheal. I look forward to you doing a follow up tutorial showing how to slice the graphics, and export the files to create the template.

    0
  • tristan

    Thursday, October 20th, 2011 13:35

    2

    “Artthatwroks” hehe. Otherwise very nice :)

    0
    • Michael John Burns

      Thursday, October 20th, 2011 15:02

      1

      Oh I didn’t notice it. My bad :D Thanks for pointing that.

      0

Comments are closed.

54.82.66.236 - unknown - unknown - US