Create an astonishing resumé with Adobe Photoshop

In this tutorial, you’ll learn how to create an astonishing resumé with Adobe Photoshop. The final resumé design can be used for print as well as sliced into xhtml and css for creating a website.

Create an astonishing resumé with Adobe Photoshop

Author:

Jean-Baptiste Jung

Category:

Photoshop

This will be the final result:

1 - Create a new document. The example dimensions are 1000*1024 pixels, but you can easily change 1024 by the desired height. Fill the background with white (#FFFFFF)

2 - Create a new layer set, named “left sidebar”, and create a new layer (name sidebar) within this layer set.

3 - Pick up the Rectangular Marquee Tool, and create a 352 pixels wide rectangle on the left part of the document. Fill the rectangle with dark grey (#21211F)

4 - Time to write your name. I have picked a fake name “Eddy Thoreau”, for the example. For the font, I have used Futura. As this font isn’t open source, I can’t give it to you in this tutorial. However, the same design looks very good with other fonts as such as Helvetica or Myriad Pro.

The color used is #1CB7EA and font size is 72pt. If you have (as me) a long name, you should consider reducing font size.

5 – Once you wrote your name, open a picture of you and scale it to 147*197 pixels. Integrate it on the design, just below your name.

6 - On the layers window, right-click on the picture layer and select blending options. Use the following parameters to add a white stroke around the pic.

7 - Time to add your info. In the example, I have added website, email adress, street adress, telephone, fax and social websites urls.

Pick up the text tool, set a white (#FFFFFF) font size of 14pt and write your infos. Don’t forget to justify the text on the right. Font used is Futura.

8 - Below the contact informations, we have to insert a nice separator. Select the sidebar layer, pick up the Single row marquee tool and click on the design, below the contact info. Fill the selected part with grey (#454544).

9 - Now, let’s talk about your skills. Pick up the text tool, select the Futura font in 36pt size and #1CB7EA color. Write “What I do” or whatever text you’d like to use to introduce your skills.

10 - Pick up the text tool again and set font size to 14pt, color to white (#FFFFFF). Type your skills. Once you’re done, select the whole text and justify it to the right.

11 - To note my skills, I have used a star icon found on IconFinder.net. You can grab it here, but it is also inclued in the psd.

12 - Duplicate the star icon as many times as necessary to achieve a similar result:

13 - Repeat steps 8 and 9 to create a new separator below the “skills” part, and a title for your latest designs.

14 - Take some screenshots of your latest designs, and scale it to 285*152px. Once done, right click on the screenshot layer in the layer window and use the following settings to add a white stroke around the screenshots.

15 - We’re done with the left part of the document. At this point, your design should look like this:

16 - Now, let’s populate the main content area. Create a new layer set named “main content”, and another layer set named “experience”. This layer set should be placed inside the “main content” layer set.

I have divided the main content area into 3 parts: experience, education, and others. Let’s start with the experience part. Pick up the text tool, set the Futura font with a size of 36pt and #1CB7EA as text color. Write “experience” or whatever else.

17 - I have choosen to display my past work experience with the following format: Company, date/position, descriptions of tasks.
The font used is 14pt Futura. Colors goes as follow:
Company: #1CB7EA (Bold)
Date/Position: #6B6B6A
Tasks: #21211F

Type your previous work experience and use the above settings to style it. Once done, your design should look like this:

18 - Time to create two new layer sets, one named “education” and the other “others”. For the titles, pick up the text tool, set the Futura font with a size of 36pt and #1CB7EA as text color.

For the texts, use the following settings:
Title lines: Futura font, bold, #1CB7EA 14pt.
Texts: Futura font, normal, #747473 14pt.

19 - We are done with the content. The resumé looks great, but we still can do better. Create a new layer set, name it “right bar” and create a new layer inside it. Select the rectangular marquee tool and draw a 83px wide rectangle on the right side of the document. Fill the shape with #21211F.

20 - The last part of the tutorial is to add a good looking vector attach to our resumé. Download the attach icon from IconFinder and paste it on the upper right part of the design, with the right bar layer set. Name this layer attach.

21 - Make sure the attach layer is selected, then grab the Polygonal Lasso tool and select the part of the icon we don’t need (as seen in the screenshot below) and finally erase the selected part.

You’re done! Look how stunning your resumé is. Do you thing that guys with Microsoft Word made resumés can still handle the competition? ;)


Get a commercial/public use licence for this PSD (More info)

Show Some Love
Thank you for your support

27 Responses

  • Lenin

    Great Design + Tutorial

  • Mike

    Awesome tutorial, thanks! I love this simple and clean layout.

  • Martin Leblanc

    Thanks for the links to Iconfinder :-)

    Best regards,
    Martin Leblanc

  • T-Law

    Thanks that’s great.

  • Jean-Baptiste Jung

    @Martin Leblanc: Iconfinder is a “must-know” website for every webdesigner! Thanks for this great resource!

    @all: Thanks for the comments, I’m glad you enjoy the tutorial!

  • Niki Brown | The Design O'Blog

    I like the design of this resume, but it would be better to create some of it in InDesign. This is the probably the proper program to use for layouts like this.

  • Kiper IT-konsult

    Great example of creating a goodlooking resume in photoshop! But I agree with Niki that if you’re going for a paperversion then InDesign or Illustrator is a better option.
    Otherwise I would keep working on it and create a wordpress template!

  • Jean-Baptiste Jung

    @Niki Brown & @Kiper: To be honest, I never tried InDesign, but I’ll check it asap.
    The idea of this design was to create a resume which can be used both as a web page and as a printed version.

  • TheFrosty

    Sweet, Just might do a redesign with you insight.

  • Jean-Baptiste Jung

    Glad to see you on here Austin! Don’t forget that the public use of any of our designs require you to get a (cheap) licence.

  • Brian Purkiss

    Niki is right. Print design = InDesign.

    Now as for the tutorial…
    This could be done with powerpoint or word. The paper clip is the only reason Photoshop or some semi-advanced image editor may be needed. You could probably insert that paperclip with PowerPoint if you fiddled with it enough. This tutorial has no meat to it. You just used the type tool, the marquee tool, and the paint bucket tool.

    Don’t get me wrong – the Resumé looks nice, as well as your web site. But anyone who knows the utter basics of Photoshop or even Word could create this if they have a mind for design.
    If you’re going to create a tutorial (especially when it’s addressing Photoshop techniques), try and cover some advanced or unique techniques. Otherwise it’s just hot air.

    That’s just my two cents.

    Again, you have a good mind for design. Your stuff looks great.
    This tutorial is simply too basic for any competent Photoshop user. Don’t write tutorials simply for the sake of writing tutorials.

  • Jean-Baptiste Jung

    @Brian: Thanks for the comment. In my opinion, a good webdesigner isn’t the one who will overuse lots of techniques, but the one with enought taste to do the things right without being too much.

    The goal of this tutorial is to create a good looking résumé, not overuse lots of techniques. A résumé have to stay clean and minimalist ;)

    But I understand your request. As you (and other readers) wants some more advanced tutorials, I’ll cover some advanced techniques in future posts.

    Thanks again for the input. While it’s nice to hear that people enjoyed your stuff, negative feedback allow you to improve yourself and be better.

  • Rodrigo

    Your design looks really good.

    It’s great the fact that you used simple techniques to achieve a sweet design.

    Keep tuts coming!

  • matt

    One question about when sending this via email. What are some good ways to compress this down so the pdf isnt too large? Have you found a good method or have any suggestions there? Thanks, and great looking design!

  • ChrisH

    Jean-Baptiste, a great looking design indeed.

    However, like a few others, I am greatly concerned at you promoting using Photoshop for print design.

    InDesign is the right tool for the job.

    Part of the value of using the right tool for the job is it helps you do things right.

    For example, where are your bleeds? If you don’t have bleeds you will encounter edge printing problems.

    Also, what printer will you be printing this on? That has to be taken into consideration when doing print design. A lot of desktop printers don’t even print to the edge, so your design gets cut off. And those that do do borderless often using scaling which again messes with the design. And if you go to a commercial printer, you’ll definitely need those bleeds.

    But Photoshop doesn’t do bleeds, so you’ve got to make them artificially, which isn’t a good way to work.

    Also your dimensions of 1000×1024 pixels don’t correlate with any standard paper size. Not that that entirely matters as you can trim but it still should be considered.

    And it’s at 72dpi, not 300dpi. Printing usually defaults to 300dpi.

    And print design should always be done in print units, eg inches, mm, points, etc at least so you know your dimensions are right.

    And yours is RGB not CMYK as in print design you should work in CMYK.

    So many other things to consider when doing print design, just as there are when doing web design.

    Using the right tool greatly reduces the chances of encountering problems later on.

    And as Brian said, there is nothing in this design that makes it astonishing because of Photoshop. It’s a beautiful design, astonishing if you will, but that’s because of you, the designer.

  • Ryan

    You really shouldn’t be putting your picture on your resume, it doesn’t make the best impression. Especially one of you just taken in a restaurant where drinks are in view, and just taken from a regular digital camera.

    I also agree with ChrisH, should be done and promoted through InDesign, leave layouts to layout programs.

    The effort is there, just needs some tweaking.

  • CgBaran Tuts

    Great tutorial thanks

  • Jean-Baptiste Jung

    @Ryan: The pic is an example. In a “real” resumé, I’ll not put a picture of myself drinking ;)

  • photo retouching

    Great looking resume. In Spain it is the norm to include your picture. Also I dont see the problem with the picture, it is not exactly like you are rolling around the floor drunk!

  • NJ open mics

    Wow. I wish there was a PDF of this. This is a really great tutorial, like something I would wish to come across on instructables. Great job!

  • Anne

    Verrry nice design. One thing: in step 21, I wouldn’t delete the part of the paperclip I didn’t need; I’d mask it. That way if you decided to move things around, you’d still have the whole image to play with.

  • Jean-Baptiste Jung

    @Anne: You’re definitely right, thanks for sharing your advice!

  • Mathew

    Wow this is great. I am late with this.
    When i created my resume that’s too simple.
    I guess this would be a very nice and impressive resume…
    I will be trying it using Photoshop.

  • Peter K

    Great simple tutorial – I wonder how big would the file size be if I were to convert it to a PDF and send it as an email attachment.

  • Web 2.0 Tools

    Awesome work… You make my life easier :)

  • Jim

    Wonderful tutorial! The output resume is simple yet with distinction. Let me try it myself. Thanks for sharing.

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors