Advertisement

Create a Clean and Simple Résumé Website Design

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

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.

Web Design Resume CV Template title=

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.

Web Design Resume CV Template title=

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).

Web Design Resume CV Template title=

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".

Web Design Resume CV Template title=

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

Web Design Resume CV Template title=

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

Web Design Resume CV Template title=

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

Web Design Resume CV Template title=

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%.

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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.

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=

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.

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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

Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=

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

Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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.

Web Design Resume CV Template title=

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.

Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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
Web Design Resume CV Template title=

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".

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=

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".

Web Design Resume CV Template title=

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

Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=

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

Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=
Web Design Resume CV Template title=

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:

Web Design Resume CV Template title=

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!

Advertisement