PSDFan Extra

Design a Space Themed Portfolio Landing Page

Final Image

Here is a preview of the image that we are going to be creating:

Step 1

Start by creating a new document (1000X1600px).

To help construct our layout we’re going to need to create some guides.

Lay out the follow content guides:

Vertical Guides:

50px, 100px, 300px, 500px, 550px, 700px, 900px, 950px

Horizontal Guides:

175px, 225px, 450px, 750px, 900px, 1100px

Step 2

Create a new layer called ‘background’ and fill your canvas with 050d25.

Step 3

Let’s create a space themed background design.

Start by pasting your space texture into the top of your canvas. The colors are already pretty nice, so no adjustments are needed here.

Reduce the texture layers opacity to 70%. You also want to avoid having a harsh edge at the bottom of your texture image, so create a layer mask and mask off the bottom of your texture using a soft, black paintbrush.

Step 4

Paste in your planet image, positioning it at the very top of your canvas.

Again, the colors are quite nice in the original image, so no adjustments are needed for now.

Apply a layer mask to this layer, and use a soft, black paintbrush to mask off the edges of your planet image, blending it smoothly into your main background:

Step 5

We want to add some subtle color highlights to our background now, just to make it more visually interesting.

Create a new layer called ‘pink light’.

Grab your paintbrush tool and select a large, soft, pink (ee01f3) paintbrush. Apply several ‘light spots’ over your header area.

Reduce this layer’s opacity to 20% and change it’s blend mode to ‘overlay’. This will make the color effect very subtle, yet still visible:

Create a new layer called ‘purple light’. Apply several light spots using a 7a00f8 colored, large soft paintbrush.

This time reduce this layer’s opacity to 15%, but keep the blend mode at ‘normal’. This creates a softer type of light effect:

Step 6

We want to create a background area for our footer also.

Start by duplicating your space texture, moving the duplicate down to fill your footer area.

Again, you’ll notice a seam at the top of this texture, so simply mask off this top line using a soft, black paintbrush.

Step 7

Duplicate your planet layer too, moving the planet to sit at the bottom-center of your canvas.

I also reduced the size of the planet image, as this helps establish a visual hierarchy within the design.

Step 8

Using your canvas guides, drag out a content area using your rounded rectangle tool.

Drag out a white rounded rectangle, radius: 10px.

Step 9

Time to create a futuristic menu!

Duplicate your rounded rectangle content area layer. We’re going to use this rounded rectangle shape as the basis for our menu.

Ensure that the shape is rasterized, and then use your marquee tool to select and then delete all of the shape, EXCEPT the top 50px.

Go to blending options for this layer and apply an inner shadow and gradient overlay.

Inner Shadow Blending Option Settings:

Blend Mode: Normal
Color: ffffff
Opacity: 100%
Angle: 90
DIstance: 1px
Choke: 0%
SIze: 0px

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: c5c1ba to f4f4f4
Style: Linear
Angle: 90

Select your menu shape by option+clicking on your menu layer in your layer’s palette.

With your selection still active, create a new layer called ‘menu highlight’.

Drag out a white to transparent radial gradient from the top-center of your menu area. Because of your active selection around your menu area, your gradient won’t go outside the bounds of this selection.

Change the blend mode of your ‘menu highlight’ layer to ‘overlay’ and reduce this layer’s opacity to 30%.

Step 10

Apply some text to the center of your menu.

Menu Text Settings:

Font Face: Proxima Nova
Styling: Bold
Kerning: -50
Color: 5a5752

To make this text stand out more, and give it a subtle indented look, apply a white drop shadow blending option.

Drop Shadow Blending Option Settings:

Blend Mode: Normal
Opacity: 80%
Color: ffffff
Angle: 90
Distance: 1px
Spread: 0%
Size: 2px

Step 11

To create a simple menu active state, create a new layer called ‘menu active arrow’.

Use your lasso tool to create a small arrow pointing down from the menu, underneath your ‘home’ link. Fill this arrow with the color at the bottom of your menu gradient (cac5be).

Step 12

Create a series of dividers between your menu items. Each divider should be constructed of a 1px white line, next to a 1px black line.

Now reduce the opacity of all layers relevant to your dividers to 10%. Alternatively it’s easier to group all of your divider layers into a single layer folder, and reduce this folders opacity to 10%:

Step 13

In the top center of your white content area, apply some large logo text.

Logo Text Settings:

Font Face: Proxima Nova
Size: 48pt
Kerning: -50
Color: cac5be

Apply a drop shadow and stroke blending option to your logo text layer:

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 20%
Angle: 90
Distance: 2px
Spread: 0%
Size: 5px

Stroke Blending Option Settings:

Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Color: ffffff

Step 14

Paste your planet image to overlap your logo text, on a layer directly above your logo text layer:

Apply a clipping mask to your planet layer, and this will cause it to become clipped to the shape of your logo text. This will give the impression of your logo text allowing your main page background to show through, in a kind of ‘window into space’ effect:

Step 15

Time to create a subtle reflective shadow effect for our logo text.

Start by duplicating your logo text. (This may cause your planet layer’s clipping mask to release, so just reapply it when necessary). Move the duplicate text beneath the original, and go to edit>transform>flip vertical. Change the text’s color to black.

Then apply a layer mask, and use your mask to fade your text into the white background.

Reduce the opacity of your drop shadow layer to 10%:

Step 16

Apply some slogan text underneath your logo. I used the wonderful free font Jenna Sue for my slogan text:

Slogan Text Settings:

Font Face: Jenna Sue
Size: 30pt
Kerning: 0
Color: 84878b

Step 17

Time to add some details to our header!

Paste in some icons from the circular social media icon set found in the resources section for this tutorial. Position them with help from your grid.

Desaturate your icons, and reduce their layer opacity to 40%.

Also download the simple dividers FanExtra pack found in the resources for this tutorial and paste in one of the dividers, positioning it underneath your logo area. This will help structure your content:

Step 18

Download the design related icons from the resources for this tutorial.

Paste them into the content area underneath your logo area, and use your canvas guides to help position them properly.

Use one of the FanExtra dividers to create a vertical, central divide between your icons:

Step 19

Apply some text beneath your icons.

Heading Text Settings:

Font Face: Proxima Nova
Styling: Bold
Kerning: -50
Color: 031634

Detail Text Settings:

Font Face: Proxima Nova
Styling: Regular
Kerning: -50
Color: 7c7c7c

Use your rounded rectangle tool (10px radius) to create a call to action button, filled with a gradient ranging from 3d4cbd to 1c2a96.

Group your text/button layers into a layer group folder, and then duplicate this folder, positioning the duplicate areas of text underneath each icon. Alter the text to relate to the icon above it:

Step 20

Paste a screengrab of one of your client’s websites into the bottom left part of your content area.

I chose to use the design from our Blogs.FanExtra FREE 7 Day Blogging Course, which many of you have already been enjoying.

Apply an outer glow and stroke blending option to your website screenshot layer.

Outer Glow Blending Option Settings:

Blend Mode: Normal
Opacity: 20%
Color: 000000
Spread: 0%
Size: 35px

Stroke Blending Option Settings:

Size: 3px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Color
Color: ffffff

Step 21

Apply some text to the right of your website shot:

Step 22

Finally, apply some centralized text to your footer area.

Footer Text Settings:

Font Face: Proxima Nova
Size: 18pt
Kerning: -50
Color: 98a9d3

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome.

Download Source File for this Tutorial

Related Posts

• Create a Professional App Store Web Layout
• Design a Quick and Clean Portfolio Website
• Design a Bold and Vibrant Portfolio