Create a Minimal Resume Website Design in Photoshop



In this tutorial you will learn how to create a minimal resume website design in Photoshop. We will be using simple techniques to achieve clean and professional final result. You will discover how to create simple detailed background, trendy 3D elements also you will see how to effectively stylize web typography.

Hope you will find this tutorial useful and you’ll learn something new. Please share your thoughts about this tutorial and the final result in comments section below.

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.
minimal-resume.zip (1,91 MB)

Tutorial Resources

Grid Pattern: Grid Patterns by Premium Pixels

Fonts: Aller and Arial

Preview

Click on the image below to see the work in full scale.

Resume preview

Step 1: Create a new document

Open Adobe Photoshop and start by creating a new document CTRL+N. Then make the document 1200 px by 1170 px with a white background.

Create a new document

Step 2: Guidelines

We need to add some guidelines. Go to View > New Guide… and add following guidelines: vertical at 120 px, 150 px, 1050 px and 1080 px, horizontal at 139 px, 354 px, 568 px, 783 px and 1099 px.

Guidelines

Step 3: Background

At first create a new group (Layer > New > Group…) called “Background”. After that click twice on background layer and unlock it, then move it inside the group and set foreground color to grey (#ECECEC) and fill your background with it by clicking Alt+Backspace. After that go to Filter > Noise > Add Noise… and set Amount value to 1,5%, Distribution set to Uniform and check Monochromatic option if not checked.

Add noise

Now create a new layer (Shift+Ctrl+N) called “Grid” and place it above the noisy background layer. After that go to 20 Seamless Photoshop Grid Patterns and download these awesome patterns. Load them in Photoshop and pick grid3 pattern, then click on your document to fill your background with grid pattern. Reduce layer’s Opacity to 3%.

Grid

Step 4: Header

Now minimize “Background” group by clicking a small grey arrow next to the group name. After that create a new group (Layer > New > Group…) and name it “Header”. Now drag a photo of you to Photoshop window. Resize it to about 80×80 px size by clicking Ctrl+Alt+I. After that pick Move Tool (V) and drag your photo into “Header” group.

Photo

Now go to Font Squirrel and download Aller font. After that set foreground color to (#607848) and pick Horizontal Type Tool (T), choose 30 pt size Aller Display font and write your name. Then click right mouse button on name layer and select Blending Options… and apply drop shadow option as shown below.

Your name drop shadow

Name

Now change foreground color to (#789048), then pick Horizontal Type Tool (T) again, choose 18 pt size Aller Light font and write short description. Then click right mouse button on your name layer and select Copy Layer Style, then click right mouse button on description text layer and select Paste Layer Style.

Short description

Now change font size to 13 pt and write “DOWNLOAD CV  //  PRINT CV  //  CONTACT” then place our navigation on the top right side. Also paste layer style as used on description layer.

Top navigation

Change foreground color to (#604848) and using Horizontal Type Tool (T), 13 pt size Arial font write your contact info: email, website or telephone. After that paste layer style as used before.

Contact info

Step 5: Body

Minimize “Header” group by clicking a small grey arrow next to the group name. After that create a new group (Layer > New > Group…) called “Body”. Inside the group create a new layer (Shift+Ctrl+N) called “BG”. Then change foreground color to (#F3F3DB) and pick Rectangular Marquee Tool (M) and select area as shown on the example below. After that fill selected area with set color by clicking Alt+Backspace.

Select area

Now go to Filter > Noise > Add Noise… and set Amount to 1%,Distribution set to Uniform and check Monochromatic option if unchecked.

Add noise

Now click right mouse button on “BG” layer and select Blending Options… then apply stroke option as shown on the example below.

Stroke

Create a new layer (Shift+Ctrl+N) called “Black”. Then pick Rectangular Marquee Tool (M) and select area between second and third horizontal guidelines. After that fill that area with black (#000000).

Black

Now reduce “Black” layer’s Opacity to 5%.

Reduce "Black" opacity

Create a new layer (Shift+Ctrl+N) called “Black 2″ and select area between fourth and fifth horizontal guidelines. Then fill that area with black (#000000). After that reduce “Black 2″ layer’s Opacity to 5%.

Black 2

Create a new group (Layer > New > Group…) called “White lines” and place it inside the “Body” group. Then create a new layer (Shift+Ctrl+N) inside the mentioned group and name it “White line”. After that change foreground color to white (#FFFFFF) and select Pencil Tool (B) with 1 px brush size. Finally draw a line below first horizontal guideline.

Draw white line

Now click Ctrl+J to make a copy of “White line” layer. Then move duplicated line above second horizontal guideline. After that make more copies and place them below third and fourth horizontal guidelines.

White lines

Now minimize “White lines” group by clicking a small grey arrow next to the group’s name. After that create a new group (Layer > New > Group…) called “Dark lines”. Then create a new layer (Shift+Ctrl+N) inside the group and name it “Dark line”. Change foreground color to grey (#ACACAC) and using Pencil Tool (B) of 1 px size brush draw a line above second horizontal guideline.

Dark line

Now make two more copies by clicking Ctrl+J on “Dark line” layer. After that move them above third and fourth horizontal guidelines.

Dark lines

Minimize “Dark lines” group by clicking a small grey arrow next to the group’s name. After that change foreground color to (#F8FFF3) and pick Rectangle Tool (U). Then draw 290×45 px size rectangle.

Rectangle

Now click right mouse button on rectangle shape layer and select Blending Options… then apply stroke option as shown on the example below.

Rectangle stroke

Change foreground color to (#607848) and choose Horizontal Type Tool (T). Then select Aller Display 24 pt size font and write “TECHNICAL SKILLS”. Then click right mouse button on your name layer and select Copy Layer Style, after that click right mouse button on just created text layer and select Paste Layer Style.

Technical skills

Change foreground color to (#CACACA) and create a new layer (Shift+Ctrl+N) called “Shadow”. After that select Rectangle Tool (U) and draw 50×50 px size square. Then click Ctrl+T and rotate it by 45 degrees. Finally place it below “BG” layer.

Shadow

Change foreground color to (#604848) and grab Horizontal Type Tool (T). After that choose 14 pt size Arial font and write your technical skills information. Then click right mouse button on your name layer and select Copy Layer Style, after that click right mouse button on just created text layer and select Paste Layer Style.

Technical skills information

Repeat these actions for the second, third and the fourth rows but in the last row don’t write any text. Last row will be used to showcase your newest work. For the second and fourth headlines use this color (#789048).

Filled rows

Create a new group (Layer > New > Group…) called “Work”. After that select three images that represent your work the best and drag them to Photoshop window. Then pick Crop Tool (C) and make them 270×205 px size. Finally drag them to your resume document and place in “Work” group.

Work

Create a new layer (Shift+Ctrl+N) and name it “Border”. After that place it below your first image. Then hold Ctrl and click on first image layer thumbnail to make selection. Then go to Select > Modify > Expand… and expand by 3 pixels. Then change foreground color to (#89897B) and fill your selection (Alt+Backspace). After that go to Select > Modify > Contract… and contract by 1 pixel, finally delete selected area and click Ctrl+D to deselect.

Border

Duplicate “Border” layer by clicking Ctrl+J and place it below second image. Then duplicate one more border layer for the third image.

Borders

Step 6: Footer

Minimize “Work” group by clicking a small grey arrow next to the group’s name. Then minimize “Body” group and create a new one (Layer > New > Group…) called “Footer”. Place “Footer” group below “Body” but above “Background” group.

After that change foreground color to (#607848) and pick Horizontal Type Tool (T). Then choose 14 pt size Arial font and write your copyright and additional information. Finally find your name layer and click right mouse button on it, then choose Copy Layer Style, after that go back and click right mouse button on just created text layer and select Paste Layer Style.

Footer

Congratulations! We’ve done our minimal resume website design. Hope you learned some new techniques that will help you in future projects.

Final Result

Resume preview

Try out our free testking 1z0-050 and latest sas certification training courses to get high flying success in final mcp certification & 1Y1-A19 exams, testking 1z0-052 is also very useful tool.