Create a Clean and Simple Résumé Website Design

In this design tutorial, we’re going to create beautiful simple and elegant interface for a Résumé Website in Adobe Photoshop that works great for mobile phones and iPads. As we go through this tutorial, we’ll work with: Simple shapes (rectangles, lines, arrows, etc), layer styles (lots of them actually!), character and paragraph styles, and so many other design and Photoshop techniques that you can adapt to your Website interface design workflow. The fully coded version is available on ThemeForest as Stylish CV, an HTML theme

About the Author:

IvyStudio is a popular new author at ThemeForest thanks to this particular design. Passion for web creativity and communication are the key element of Ivy Studio. We love to create clean design and useful interface with a great attention to details. Enjoy our site www.ivystudio.it to see our works and feel free to contact us if you want!

You can also grab the fully coded version of this file at ThemeForest so you can see how it’s built!

Step 1

To keep everything aligned we’re going to use 960s Grid System (Get it from here). Once downloaded, open up the file “960_grid_12_col.psd”.

The height of the current document is smaller than our final design. So, we’ll go to Image > Canvas Size > Height: 1558px.

We like to work without the “pink stripes”, then if you want hide it, you have to go to layer panel and deselect layer visibility.

We also need to make sure that our Rulers and Guides are viewed. So, we’ll go to View > Extras / Rulers / Snap (so that our objects snap in alignment with our Guides).

Step 2

Let’s make our background now. Go to the layer panel, right click on the background layer and select “layer from background” and rename it “bg”.

Now, right click on bg layer, select “Blending Options”, go to “Color Overlay” and choose as background color: #dbdbdb.

Now select bg layer and create a new layer from Layer > New > Layer and rename it “noise”.

Now we’ll apply a simple Noise texture. Select layer noise and then fill it (by clicking Shift+Backspace) with this color value: #ffffff.

Go to Filter > Noise > Add Noise > Amount: 50%, Distribution: Uniform. Change this layer’s Blend Mode to: Multiply, and take its Opacity down to: 15%.

Let’s create a soft shadow effect using the Rectangle Tool (U). Create a rectangle of 780x1800px, set Fill to 0%, and in the blending options palel, set the “Drop Shadow” effect like the next image.

Step 3

Let’s start creating our header. Using the Rectangle Tool (U), create a rectangle of 780x170px and fill it with color: #7db222 (feel free to choose the color you want, it will be the same for all the tutorial). Then set the Blending Options panel like in the images below:

Step 4

It’s time to type the title of our Website. Grab the Horizontal Type Tool (T), type your Website name according to the following character settings:

• Font Family: Delicious (get it from here)
• Size: 90pt
• Weight Italic
• Anti-aliasing setting:Smooth
• Color:#fffffff
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow to our text using the settings shown in the image below:

Now add the subtitle. Grab the Horizontal Type Tool (T), type your and according it to the following settings:

• Font Family: Delicious (get it from here)
• Size: 32pt
• Weight Italic
• Anti-aliasing setting:Smooth
• Color:none (Fill to 0%)
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow to our text and Color Overlay, using the settings shown in the image below:

Step 5

Let’s start creating our block. Using the Rectangle Tool (U), create a rectangle of 780x360px and rename it “personal_bg”. Go to the Blending Options panel and set Drop Shadow, Inner Shadow, and Color Overlay, like in the following image:

Step 6

Now create the box for our personal photo. Using the Rectangle Tool (U), create a rectangle of 220x220px and fill it with color: #ffffff. Then apply a Layer Style to it, according to the following image:

Step 7

Create the box of social icons, using the Rounded Rectangle Tool (U), create a rectangle of 40x165px with radius: 5 px,rename it Social Box and fill it with color: #7db222. And now create the fold. Using the same tool to create a rectangle of 20x20px with radius: 5px, rename it Social fold, put it under “personal_bg” layer, then hit Cmd+T (Ctrl+T) to rotate it of 45°. Now set the following Blending Options settings:

Step 8

Now we’ll place the social media icons. We’ll start by downloading this vector social media icons, and then placing five icons (24x24px) like in the image below:

Step 9

Create now the “Contact” button. Using the Rectangle Tool (U), create a rectangle of 170x50px, fill it with the color: #7db222, and rename it “contact”. Select the vector mask of this layer and grab the “Add Anchor Point Tool” and create a single anchor point in the middle on the shape’s left side. Then select th “Convert Point Tool”, click on the same anchor point and move it on the left.

Now the shape is ready, so as usual, add the following Blending Options effects:

Now duplicate “social fold” layer and rename it as “contact fold” (Obviously it must be under the “personal_bg” layer).

Step 10

Now add the “Contact” text on the button. Grab the Horizontal Type Tool (T), type your text and according it to the following settings:

• Font Family: Delicious (get it from here)
• Size: 32pt
• Weight Roman
• Anti-aliasing setting:Smooth
• Color:#ffffff
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow to our text using the settings shown in the image below:

Step 11

Create the title for our section. Grab the Horizontal Type Tool (T), type your text and according it to the following settings:

• Font Family: Delicious (get it from here)
• Size: 36pt
• Weight Roman
• Anti-aliasing setting:Smooth
• Color:#7db222
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow and Color Overlay to our text using the settings shown in the image below:

Step 12

Now the content. Grab the Horizontal Type Tool (T), type your text and according it to the following settings:

• Font Family: Delicious (get it from here)
• Size: 26pt
• Weight Roman
• Anti-aliasing setting:Smooth
• Color:#7db222 (green) / #a4a6a6 (grey)
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow and Color Overlay to our text using the settings shown in the image below:

Step 13

As in the previous steps create our block. Using the Rectangle Tool (U), create a rectangle of 780px width, and variable height (depend by the content) and rename it “content_bg”, and put it under the “personal_bg” like in the following image.

Step 14

Create the title for our section. Grab the Horizontal Type Tool (T), type your text name according to the following character settings:

• Font Family: Delicious (get it from here)
• Size: 36pt
• Weight Roman
• Anti-aliasing setting:Smooth
• Color:#7db222
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow to our text using the same title’s settings in “Personal Details” section.

Step 15

Now add the first subtitle (green). Grab the Horizontal Type Tool (T), type your and according it to the following settings:

• Font Family: Delicious (get it from here)
• Size: 26pt
• Weight Roman
• Anti-aliasing setting:Smooth
• Color:#7db222
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow to our text and Color Overlay, using the settings shown in the image below:

Step 16

Then add the second subtitle (grey). Grab the Horizontal Type Tool (T), type your and according it to the following settings:

• Font Family: Delicious (get it from here)
• Size: 22pt
• Weight Italic
• Anti-aliasing setting:Smooth
• Color:#a4a6a6
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow to our text and Color Overlay, using the settings shown in the image below:

Step 17

Finally the content. Grab the Horizontal Type Tool (T), type your and according it to the following settings:

• Font Family: Helvetica
• Size: 17pt
• Weight Regular
• Anti-aliasing setting:Smooth
• Color:#a4a6a6
• Kerning:Metrics
• Tracking:0
• Leading:28pt

Step 18

Create now the year layer. As the “Contact” button, create the same shape using the Rectangle Tool (U), but now with the new dimensions 100x36px. Duplicate the “Contact fold” layer, as usual, to create the “Year fold”.

Step 19

Now add the “Year” text on the button. Grab the Horizontal Type Tool (T), type your text and according it to the following settings:

• Font Family: Delicious (get it from here)
• Size: 25pt
• Weight Roman
• Anti-aliasing setting:Smooth
• Color:#ffffff
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow to our text as the “Contact” text and finally you must have a result like in the following images:

Step 20

As in the previous step, create our block. Using the Rectangle Tool (U), create a rectangle of 780x and rename it “contact_bg”.

Create the last stripe using the Rectangle Tool (U), create a rectangle of 780x15px and fill it with color: #7db222.

Step 21

Create the title for our section. Grab the Horizontal Type Tool (T), type your text name according to the following character settings:

• Font Family: Delicious (get it from here)
• Size: 36pt
• Weight Roman
• Anti-aliasing setting:Smooth
• Color:#7db222
• Kerning:Optical
• Tracking:-50

Step 22

Now add the label text. Grab the Horizontal Type Tool (T), type your text and according it to the following settings:

• Font Family: Delicious (get it from here)
• Size: 26pt
• Weight Roman
• Anti-aliasing setting:Smooth
• Color:#7db222
• Kerning:Optical
• Tracking:-50

For both then apply the usual Drop Shadow effect.

Step 23

Create now the text field. Using the Rectangle Tool (U), create a rectangle of 210x33px and fill it with the color: #f4f4f4. Go to the Blending Option panel and set the value like in the following image:

Now use the same process to create all text fieds, only for the big field on the right the dimensions are 300x200px.

Step 24

Now create the “Send Message” button. Using the Rounded Rectangle Tool (U), create a rectangle of 210x33px, radius: 5px, and fill it with the color: #7db222. Add the Blending Option effect like in the following image:

Step 25

Finally create the text of “Send Message” button. Grab the Horizontal Type Tool (T), type your text and according it to the following settings:

• Font Family: Delicious (get it from here)
• Size: 22pt
• Weight Bold
• Anti-aliasing setting:Smooth
• Color:#ffffff
• Kerning:Optical
• Tracking:-50

Then apply a Drop Shadow to our text as the “Contact” text and finally you will have a result like in the following images:

Conclusion

That’s it, folks! We’re done with our Website interface design. We really hope you’ve found this tutorial useful. And if you’ve any comments, please leave them below, and will make sure to respond to them. Also, don’t forget to check out the follow-up part on how to get this design live!