Reader Tutorial: Create Vintage Traveler Diary in PhotoshopListThumbs

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

August 12, 2009

In this reader tutorial Nikola Lazarevic aka Colaja from Nis, Serbia will show us how to create a very stylish vintage traveler diary in Photoshop. We will mix brushes with stock photos and blend modes to achieve the effect.

Let's take a look at our final image.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

STEP 1:

Let's start by creating new document in photoshop. Mine is 1680x1050 pixels. Name this file diary.psd. Fill the background with #e5dfd3.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Download soft grunge texture from Bittbox. I picked up second one (free_high_res_texture_102), and palce it above the background layer. Command + T to resize it the way You like, and lower the opacity to 70%. Let's name this layer "background texture".

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Now download Waterlogged Map Brushes by ~Arbenting. Create new layer above "background texture" and name it "map". Set foreground color to #463003. Now pick up the brush tool (B), load Waterlogged Map Brushes by ~Arbenting, choose map3, set master diameter to around 1557 and place the map in the middle of layer "map". Lower the "map" opacity to 75%.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Select all three layers (background, background texture and map) by holding the command key (or control on PC) and left mouse click on every layer, then hit command + G (ctrl + G on PC), and group these layers in Group and named this Group "BACKGROUND".

STEP 2:

I found excellent picture of old Notebook. Download it and open in photoshop. Now we're going to cut out the notebook. Use Magic Wand Tool (W) to select white background, hit command + shift + I to inverse selection, so that the nootebook is now selected. Command + C to copy selection, and paste it into our diary.psd file. Name this layer "notebook", resize it and rotate a bit (Command + T) and place it somewhere in the center, but a little on the left.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Now, we want to have same pictures between pages. To achieve that effect we need to do the following steps:

  • Duplicate "notebook" layer (Command + J);
  • Name this layer "notebook top";
  • Now pick up the Polygonal Lasso Tool (L) and start selecting around notebook pages.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Inverse the selection by pressing Command + Shift + I and delete the part that we don't need.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

We'll going to give a life to a pages. Set the foreground color to #463003, create new layer above "notebook top", pick up the brush tool (B), and choose the map you like, I picked it map2, set diameter around 330px and paint with this brush in the lower right page part of notebook. Rotate this layer to match notebook paper orientation, lower opacity to 50% and name this layer "right page 1".

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Create new layer, name it "right page 2", use the brush tool (B), choose another map, I choose map3, set the diameter around 450px, and paint upper part of right notebook paper. Rotate this layer to match notebook paper orientation. Lower the opacity to 50%.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Create another new layer, name it "left page", pick up the brush tool (B), choose another map, I choose map4, set the diameter around 600px, and paint over left notebook page. Rotate and move this layer so you get something like this.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Lower the opacity to 50%. Now we should have something like this.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Apply the following layer style to "notebook" layer:

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

STEP 3:

Download the polaroid photo and open it in photoshop. Double click on background layer and then clik OK so that this layer become editable. Save this file as ploaroid.psd because we will be using it for creating our polaroid photos.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

For creating polaroid photos I used some of my pictures that I took this summer in Greece. You can find some of them on a flickr. So picked up photo you want, open in photoshop, copy and paste it in polaroid.psd. Command + T (Ctrl + T) to rotate a bit to catch polaroid orientation. Name this layer "photo".

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Now hide photo layer, click on layer0, use magic wand tool (W) to select black square in polaroid.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Unhide photo layer, select it, inverse selection with Command + Shift + I, and hit backspace to delete unwanted parts of photo. Now deselect (Command + D). You should have something like this.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

We want our photo to look old, so download Heavy Scratch brushes, open the brush tool (B), load Heavy Scratch brushes, pick up Scratch Heavy brush, set diameter to max 2500px, create new layer above "photo" layer, and paint with brush tool. Name this layer "scratch". Resize it to be bigger then the polaroid.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Then hide "scratch" layer, select "layer0", use magic wand tool (W) to select white background, Command + Shift + I to inverse selection, unhide "scratch" layer, select it, inverse selection once again and hit backspace to delete unwanted part of "scratch" layer. Lower the fill to 30%.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Photo now look scratchy but not old enough. To give more vintage look do next: Choose Create new fill or adjusment layer, choose photo filter, warming filter (85) for filter, set Density to 77% and click OK.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

This one is now look pretty good and old enough.

STEP 4:

Select all layers, choose Layer>Merge Layers. Now pick up magic wand tool (W), select white background, inverse selection,

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Copy it, and paste it in diary.psd between "notebook" and "notebook top" layers, and name this layer "photo 01 bp". Resize it and rotate, and place it on the left between pages like this.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Apply drop shadow layer style to "photo 01 bp".

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Now create another polaroid photo and place it also between pages, using the above method. Name this layer "photo 02 bp" and apply Drop Shadow layer style to this layer, same as previous. We should have something like this.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Create another polaroid photo using the above method and this one we're going to place it on open pages. Name this layer "photo03".

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Create paperclip to hold this photo. Set the foreground color to #583f0d, open custom shape tool, find paperclip shape, and draw paperclip. Hold Shift key to constrain proportions. Resize it and rotate. Name this layer "paperclip". Be sure that this layer is above "photo03" layer. Rasterize this layer and apply following "Bevel And Emboss" style to this layer.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

We need to delete some parts of paperclip, choose eraser tool (E), pick Hard Round 5px, and start erasing.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Ok, let's continue. Create another polaroid photo, insert it in diary.psd, name this layer "photo04", and place it below "photo03" layer.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Let's add more details. Download Sticky Tape Photoshop Brushes, load into photoshop, set the foreground color to #dab05d, pick up brush tool (B), then pick up brush SpoonGraphics Tape2, set diameter to 116px, create new layer above "photo04", paint with brush tool. Name this layer "sticky tape 1" and apply drop shadow effect.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Duplicate "sticky tape 1" layer and clear layer style. We should have something like this.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

With this, the left page is finished.

Now let's move on to the right page. Let's add Paragraph layer. To add a Paragraph layer you must create the bounding box first. You can Click and Drag the cursor diagonally until you've got your desired size. Write some text into Paragraph layer. I used font Journal. Set the text color to #463003, rotate and resize it to fit the right page of notebook. Name this layer "text".

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Make this page a little more dirty and grunge. Download Coffee Stain 1 photo, open in photoshop, copy and paste it into dairy.psd. Name this layer "caffe strain page". Change the Blend Mode to Multiply. Resize it and palce it above "text" layer.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Now download Torn PostCard, open it in photoshop, select white background with Magic Wand Tool (W), inverse selection,

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

copy and paste into our photoshop file. Name this layer "map background". Resize it, rotate and place it on top of the right page. Add Drop Shadow Effect.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Select "map background" with Command + Click on thumbnail, create new layer, make sure that foreground color is #463003, pick up Brush Tool (B), choose any of the Waterlogged Map Brushes by ~Arbenting and paint it over. Name this layer "map1" and lower the opacity to 60%.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Add sticky tape, using the above method, to hold "map1" to the page.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Let's add a small detail to the pages. Download Italian Flag, open it in photoshop, with Rectangular Marquee Tool (M) make a selection, copy and paste it into diary.psd.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Name this layer "italian flag", resize it, rotate it and place it below "photo03". Now go to Image - Adjusments - Photo Filter.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

And apply Drop Shadow Effect.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

With this we finished notebook.

STEP 5:

Let's add more details! Create couple of polaroid photos, palce it into BACKGROUND group, in separate layers, above layer "map", give them a names starting with "photo 05 bg" respectivly. Apply Drop Shadow Effect to every layer.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Now add Cofee Stain over top picture. Create new layer, name it "caffe strain big", use Coffee Stain 1 photo, change the Blend Mode to Multiply, resize it and place it over photo.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

STEP 6:

We'll add a cup of coffee now. Download Isolated Cup of Strong Coffee, open it in photoshop, open Paths, hold Command Key and click on Path thumbnail to select cup of coffee.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Copy and paste it into dairy.psd, name this layer "caffee" and place it on top. Resize it, apply Drop Shadow Effect.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Make it old. Go to Image - Adjusments - Photo Filter.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

This is what we have now.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

STEP 7:

Let's add compass. You can download compass from my flickr photostream. Extract compass from background, copy and paste it into diary.psd. Name this layer "compass". Place this layer below "caffee" layer. Go to Image - Adjusments - Photo Filter.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Add Drop Shadow Effect.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Make it a liitle bit scratchy. Create new layer above "compass" layer, name it "compass scratch", set the foreground color to #000000, pick up the brush tool, choose Scratch Heavy brush, select compass by holding Command Key and click on compass layer thumbnail, select "compass scratch" layer, and paint it with brush tool. Change the Blend Mode to Soft Light.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

This one is looking pretty good right now.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

STEP 8:

It's time to finish. Let's add the final detail. Write out the word abduzeedo using some random font. I used HumstSlab712 Blk and set it in this colour #c5c6ba. Set the font size to 120px. Change the blending mode to Colour Burn and add a 1px stroke.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Now duplicate this layer, and lower the opacity to 65%, blend mode is still Colour Burn.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

And this is it.

Reader Tutorial: Create Vintage Traveler Diary in Photoshop

Hope You all enjoy this tutorial.

About the author

Hi! My name is Nikola Lazarevic aka Colaja from Nis, Serbia. I'm web designer and photoshop addict! I started webexpedition18 less then a year ago. And of course, You can find me on Twitter!

More content from:

Help us to share this!

77 Comments

Vincent Baijens08/12/2009

looks great:) I'm going to try this tut!

Justice08/12/2009

Great work! Thanks for the tut Nikola!

Gustavo Lemos08/12/2009

Good tut. Thanks

Gustavo Lemos08/12/2009

Good tut. Thanks

punkd08/12/2009

The outcome is really great. I didn't learn anything new, but the idea is great. Thanks.

Motti Horesh08/12/2009

very nice tutorial, i really enjoyed reading it.

Jasmin Halkic08/12/2009

Good tutorial neighbour ;)

Anton Kokin08/12/2009

It's very cool. Thank you very much from Russia.

zeemiDesign08/12/2009

Great tutorial. The true art really is to find the right resources for such a creation!

Fernando Gobbo08/12/2009

Incrível. Cada dia fico mais surpreso com a sua criatividade e habilidade! Grande Sucesso pra você!

kilinkis08/12/2009

i totally love it! i used some of this resources for my site.

JD08/12/2009

Fantastic tute. Thank you!

Aly08/12/2009

I have been looking around for good travel themed designs to inspire me to re-do our site. It's hard to find really good travel designs except for the travel posters from back in the day. Thanks!

Ivan Minic08/12/2009

Very good looking!
Great tutorial :)

mariuzzo08/12/2009

Amazing tutorial, awesome. Thanks

mrks08/12/2009

Nice tutorial and thanks for sharing it! :)

colaja08/12/2009

Thanks guys :)

Commie08/12/2009

Bravo prijatelju super tutorijal... Good job there my friend excellent tutorial. Greetings from Macedonia

Amatatomba08/12/2009

I love these kinds of designs. I've done something similar for a wallpaper, but not with the vintage look. Might try something like this soon.

LAQO08/12/2009

REALLY GREAT, AMAZING!
THANKS!!! VERY INSPIRATIONAL :D

KGile08/13/2009

Wow great tutorial. I won't be following the tutorial, however I might try something similar, but a bit more modern looking and with a folder.

Good work.
www.knrdesigns.com

Remus08/13/2009

Tanks nice works i like it

Anonymous08/13/2009

I had so much fun working on that and adding my own photos and details.

Thank You!

Luiz M.08/14/2009

Awesome job in this tuto. Since i saw, i started to download all what is needed to do another similar one. And then, i'm trying to do, right now...bus is not finished. I will put some pictures that i took in New Zealand last year, and, may be i will send to my friends over there. Thank's a lot for this great tutorial. I think my friends will be more than happy to see my "old" memories from Wanaka, New Zealand.

chungdesigns08/14/2009

That's a really cool and different tutorial. I like the use of different effects and techniques to create one image.

iGee08/15/2009

Good job, I'm gonna make one right now

colaja08/16/2009

Again thanks guys :) i'm glad you like it!

aliaskajan08/18/2009

great tutorial
thank you

www.alias3dmedia.com

nieda08/18/2009

wow!! i really love ure tut...

lordCovenant08/19/2009

I enjoyed the tut! very clever!

the concept was very nice. . .

René Tuin08/20/2009

Hi,

I'm just trying this tutorial only i can download the heavy scratch brushes because the link don't work.

So my question were can I get the same brush??

Greetz

Mira08/21/2009

Really loved this tutorial as it finally inspired me to create a wallpaper I have had in my mind for a very long time.

Thank you for a great tutorial!

alain 08/21/2009

thank a lot Nikola ,it's original and very funny to do
merci beaucoup

zabala1508/21/2009

enjoyed the tut! very clever!

GREAT TUT!!!

Niek van Oost08/24/2009

:( The link to the old notebook is dead :S

yata08/24/2009

Very Good Looking!

YATA Wholesale Korean Fashion is one of chinese leading Wholesale Clothing distributors of women's clothing and Korean Fashion Wholesale bring you stable quality at wholesale prices.

djisan08/25/2009

hi, good tuto, i'm looking for the jpeg avec the old book, it's missing, please send me by mail at kenshin108@hotmail.com or give me a link please thanks

Anonymous08/26/2009

wow, this turned out great! :-D

Mira08/26/2009

Thanks again for this great tutorial.
My version: http://www.flickr.com/photos/miranl/3856090530/

Nathan Nash08/30/2009

Great looking result, the journal photo isn't on the sxc website anymore though. Anyone have a copy they can share?

Nikola08/31/2009

@Nathan Nash
I can send You old notebook on email.

msannie09/01/2009

Oh, my this came out beautifully. I used this tutorial to scrapbook part of a cross-country trip my husband and I took on our Harley this summer. I am impressed. Your directions are clear and easy to follow and the results are fantastic! Thank you for taking the time to put this together. It's a great tutorial.

naveed09/01/2009

beautiful result, and very clean way to work thanks for sharing :)

kangur9109/01/2009

Someone can send me old notebook image?

SilesianLaska09/02/2009

AWESOME tut !
I've tried it, and it looks great !

Thanks for this tut !

>SilesianLaska wants more ! :)

lots of greetings :)

Fluffi09/02/2009

Hey, it's a great tut ! i love them.
i make my one, it's not other than yours,
but i add some details and it's not about greece but about london. :) !

http://www.bilder-upload.eu/show.php?file=mbx6qckxu6PF9B3.jpg

jos_ti09/02/2009

Thanks for your excellent work ! Great !!! Cordially, from France

sLaV09/03/2009

awesome tute bravo :D :D
could i PLEASE have the notebook image + polaroid image sent to me via email (slavlazar@gmail.com) ... thank you so much for the effort you put into this :D :D

Anamir09/08/2009

C'est magnifique...

Merci beaucoup.

A quand le prochain Tuto?

Orkut scraps09/09/2009

Beautiful tutorial.... its really cool effect

Marcie_H09/09/2009

Very fun tutorial. It's always interesting to see someones creative process. I really enjoyed the files you linked to download.

Thanks!

Anonymous09/10/2009

cool and beautiful...can someone send me the notebook and polariod image ? Thanks

Maegan09/14/2009

great tutorial.. unfortunately the journal photo isn't there and there aren't any out there as good as that one.
Would you mind emailing it to me?
emelme3@hotmail.com
thank you!

winnie09/14/2009

Hi, I loved the tutorial, I really would love to try it.
Would you be able to email the notebook and the Polaroid image to me?

thank you :D

tv09/15/2009

hi love that tut. learned a lot
can someone sended me the note book + polaroid to teevee01@yahoo.com?

Anonymous09/18/2009

Hi the tutorial is really good but the brushes that were suggested in this tutorial really mucked up my photoshop and took me hours to sort (uninstalling and reinstalling). As soon as those brushes were deleted everything was fine. Hopefully in the future this wont happen again but a warning to people who want try this out

dearmissnji09/21/2009

Hi,loved the tutorial, I really would love to try it.
Would you be able to email the old notebook image to anggiberacun@yahoo.com
thank you :D

Jucelino Nunes09/21/2009

Fantástico o tutoria, confesso que foi muito aproveitoso. Meus parabéns!

Jucelino Nunes09/21/2009

Muito bom, meus parabéns!

Morgan09/30/2009

fabulous tutorial!!!

I cant figure out how to get to the Layer Style menu...but I kind of made things work.

Dirk09/30/2009

Hi Colaja,

this is a great tutorial. I learned a lot and I am going to apply it to tweak my photos and make backgrounds for my desktop and my website. I could not find the notebook image; could you perhaps send it to my email address, please? (dmbtemp at dmagiclens.nl

Thanks very much!
Kind regards,
Dirk

Maximus10/01/2009

Hey love the tut but the old notebook img is not on the download site anymore anyway you could post the file so i could start the tutorial?

SarpBKS10/01/2009

thank you its great tut ..

colaja10/03/2009

Thanks to all of you guys for positive comments

Anonymous10/13/2009

absolutely great
thanks for sharing with the noobs around here :D

greetings from Chile

colaja10/19/2009

Check my new photoshop tutorial!

Caffe-Break Themed Blog Layout Photoshop Tutorial

http://webexpedition18.com/articles/caffe-break-themed-blog-layout-photo...

thanks!

BLAISEAU10/30/2009

great a fabulous tutoriel

thak's a lot

Anonymous10/30/2009

Can you send me the picture of the old Notebook?

OulirO11/01/2009

And I was also very necessary. Please.

INEKE11/02/2009

I love this tutorial! Can you send me the picture of the notebook!?
ineke.razr@hotmail.com
GREATS FROM HOLLAND! <3

Anonymous11/03/2009

love the tutorial and I'm gonna try it out!
Can someone please email me the journal and the poloroid picture?

mikeh88@hotmail.com

Yalidda11/04/2009

Great site. Keep doing., Herpes Viral Infections Transmission, [url="http://cottonbalers.iespana.es/herpes-viral-infections-transmission.html"]Herpes Viral Infections Transmission[/url], http://cottonbalers.iespana.es/herpes-viral-infections-transmission.html Herpes Viral Infections Transmission,

Mimi11/04/2009

Love this Tutorial. Can't download the notebook though. Would you please send it to me? Thanks a lot!

Tutorial Lounge11/15/2009

awesome techniques in complete tutorial which will help you for learn about tools and tricks.

Todd11/15/2009

That really is quite stunning.

Always a very high standard on this site.

Well done

Christina11/16/2009

What a fantastic tutorial, thank you very much! I had a lot of fun putting together a great spread of photos and the finished product looks great :)

A couple of the iStock photos are no longer available or can't be found on iStock - but other options are available if you search.

Thank you! Looking forward to more ! :)

Diana11/19/2009

Awesome tutorial! I want to complete this tutorial but several of the links to images no longer work (notebook, coffee stain 1, torn postcard and isolated cup of strong coffee). Could you send them to me or is there somewhere else I can find them?

Looking forward to more of your tutorials. Thank you!

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?