tutorial: creating pregnancy progress photos without photoshop

Friday, September 25, 2015

Hi friends!  I have a fun tutorial for you today.  If you don't already know, I'm a graphic designer by trade and spend 8-9 hours every day in Adobe Photoshop, Illustrator and InDesign.  Since I posted the pregnancy progress photos I created in Photoshop (back in 2013, see them here), I've gotten so many e-mails from lovely pregnant women wanting to know how to create some for themselves!  I struggled with this because I knew these ladies probably didn't have access to Photoshop, so how could I create a tutorial that would be useful to them?

Well, all you cute pregnant women, wait no longer because I have an awesome tutorial for you that will allow you to create a photo like the one below, all from your web browser!


I am going to do my very best to explain every step of the process (I promise it's not difficult!), but if something is unclear, leave a comment and I'll respond asap.

When I was doing research to try to find a program that would work for this editing process that was FREE and available to everyone, I stumbled upon Pixlr and can't believe I'd never heard of it before.  It actually operates really similarly to Photoshop, but you can do all the editing in your web browser and then save the photo you create right to your computer.  How great is that?!

Before you start going through my tutorial, you will need a photo of a cute pregnant belly (although this chalkboard look would also be great for documenting your kid's milestones!).  My recommendation is to take your photo on a dark background.  If you can stand in front of a dark painted wall in your house, great, if not, you can create a dark backdrop with a couple yards of fabric or even take to the outdoors and find a solid gray wall of a building or something.  This will still work if you take your photo on a light background, but it will be easier and you will have better results if your background is dark.

This tutorial is to create a 5 x 7 image, but the process is the same no matter what size photo you want to end up with.  I've used yellow arrows to show you where to click and to point out where certain functions are.  I know it's still a little hard to see at times, but when you hover your cursor over the buttons on Pixlr, it will tell you what they are.  The biggest thing to know about graphic/digital design is that you can't really screw something up.  That's what they make Undo for.  Don't be afraid, you can do it!  Pep talk over, let's get started.

Go to the Pixlr web site (I use Safari, so I'm not sure how the site works in other browsers, but I'm sure it works just fine.).

On the main page, you will have to scroll down a little bit to see this:


Under Pixlr Editor, click LAUNCH WEB APP.


When the above box pops up, choose OPEN IMAGE FROM COMPUTER.  Navigate to where you've saved your pregnancy photo and click Open.


If your photo comes in sideways (if it's right-side-up, skip this part!), click on the IMAGE menu and choose ROTATE CANVAS 90ยบ CW (or CCW if it's rotated the other way).


In the TOOLS palette on the left side, choose the CROP tool (upper left).  Right above your photo in the menu bar, under CONSTRAINT, choose Output Size, then in the box beside WIDTH, type 1500 and beside HEIGHT type 2100.  This is the correct pixel size for a 5 x 7 photo at 300 dpi.  Once the parameters are set, draw a rectangle around your body to crop the photo.  You want to make sure to crop really close to your back and leave plenty of room on the other side for text.  Once you're happy with the placement of the crop box, press ENTER on your keyboard.


Now we need to unlock the photo so we can make changes to it.  In the LAYER palette, double click on the layer named BACKGROUND.  Where there was a lock on the layer, it should change to a checkmark (see below photo) and the name should change to Layer 0.  When it does that, you know you're good to go.



Now we are going to get rid of that messy background.  In the TOOLS palette, choose the ERASER.  Using your mouse, erase all the excess background around your body.  At this point, just do a rough outline around yourself, we will go back and do the detail work next.



When erasing the background closest to your body, you want a softer edge on the eraser tool.  Softer edges hide a lot of imperfections and look more natural.  I set the eraser to DIAMETER 50, SPACING 9 AND HARDNESS 75, but it might be different for your photo.  You can play around with these settings to see what looks best to you.


Also, when going into tighter spaces, make your eraser size smaller so you don't lose the detail.  Erase all the background image next to your body until you are happy with the result.  To zoom in on your photo, change the percentage to a higher number in the bottom left hand corner of the image window.


Now you should have a little something like the above!


Now we're getting to the fun part!  I've created a chalkboard background for you to use for your photos.  Download a copy here.  We need to open that file into Pixlr, so go to FILE > OPEN IMAGE...  Navigate to where you saved the chalkboard download and open it.


In the LAYERS palette, click on the BACKGROUND layer and drag it onto your photo layer, which you should be able to see behind the chalkboard.  See that little blue ghost layer that I'm dragging?  That's what you want to see.  Let your mouse go to release the chalkboard image onto your photo.  At this point, you can close the chalkboard download so you're only left with your photo.


The chalkboard is already sized at 5 x 7 so it should fit on the canvas perfectly, but it will be above your photo layer so you won't be able to see yourself.  Drag the layer titled BACKGROUND COPY (the chalkboard) beneath LAYER 0 (your photo).


Now the chalkboard is behind you.  Just.like.magic.


Now is the time to tweak your photo a little more.  I had some white showing around my hair so I got the eraser tool again and just erased a little more (making sure that I was clicked on the LAYER 0 layer in the LAYERS palette - otherwise you will start erasing the chalkboard and we don't want that).


Okay, onto the text.  In the TOOLS palette, choose the TYPE tool and click on your photo where you would like some text to go.  Type what you wish and change the font/size/etc. to whatever looks good to you.


To position each type layer, select the layer in the LAYERS palette, then select the MOVE tool (next to my yellow arrow above).  Use your mouse to position the type where you would like for it to go.

Continue on with these steps to add as much or as little type as you want.  If you look at my pregnancy photos, you will see that I have doodles on some of them.  All of those are just dingbat fonts.  Have fun on 1001Fonts or Dafont to find cute doodles for your photos.


Once you have your photo the way you want it, it's time to save!  Go to FILE > SAVE.


Type in a name for your photo and all of the other settings are usually good so just click OK.


Another window will pop up prompting you to save the photo to your computer.  Choose a location and a name for the photo, then click SAVE.

And that's it!  You're done!  Now you have a cute photo to post on Facebook and make all your friends jealous. :)


P.S. If you liked this tutorial, please consider pinning or sharing.  Thanks loves!

P.P.S. The folks at Pixlr have no idea who I am and I was in no way compensated for this post.

20 comments:

  1. this is amazing. can't thank you enough!

    ReplyDelete
    Replies
    1. You're very welcome! Your e-mail finally kicked my butt into gear to get this done!

      Delete
  2. Hey there! Thank you so much for this tutorial! I have been working so hard at it but am stuck. The chalkboard is not the size of my picture. It's only covering about 1/4 of my picture even though I set the output size to 1500 x 2100. Any advice?

    ReplyDelete
    Replies
    1. Hi Allie, sorry I am just now seeing your comment. After you set the output size, did you draw a rectangle and crop the image? If it's cropped to 1500x2100, the chalkboard should fit perfectly. You have to crop the image first, though. Let me know if I can help further.

      Delete
  3. How did you get all the different fonts and banners on here?

    ReplyDelete
    Replies
    1. In each new text box you create, you can change the font to any you have installed on your computer. Go to 1001fonts.com or dafont.com to download and install some cute fonts!

      Delete
  4. So i figured out how to get the banners on but for the life of me i cant figure out how to change the size of it, its so small.

    ReplyDelete
    Replies
    1. The size of the banners? You should be able to just highlight them and change the font size. Feel free to send me an e-mail with a screenshot if you need help further.

      Delete
    2. I too cannot figure out how to make the banner larger! I have the font at the max size of 130 and it is very small. Any ideas how to fix this? I love this tutorial and am excited to use it! :)

      Delete
    3. Nicole - sorry for the delayed response. It might be an issue with the banner font you're using. All fonts display differently, so while one font might be HUGE at 130 pt, another might be tiny. Try using a different font and see if that helps. Thanks for the comment!

      Delete
  5. Do you have to do the editing/ erasing around your photo each week?

    ReplyDelete
    Replies
    1. Did you personally erase around you each week in all your photos? Or did you just use a black background? Your boards are adorable :)

      Delete
  6. How do you make the banner outline around the "6 Weeeks" at the top?

    ReplyDelete
    Replies
    1. It's a dingbat font - Google search "banner font" and something usable should come up. Then just install the font on your computer and you can use it like you would any other font. Hope this helps!

      Delete
  7. HI Jenna,
    Not sure if this was asked yet or not, how do you get the shading around your body to look like a shadow and you are really in front of this chalkboard wall?? I love that it looks real!
    Thanks
    Kate

    ReplyDelete
  8. Hi, excuse me I cannot get it to type. I tried in both layers. each time i press type a new layer is created but still no typing allowed. what am i missing? thank you so so much

    ReplyDelete
    Replies
    1. Hi Nancy, I'm not sure what you're doing wrong here. I tried to recreate the problem, but I'm not having the same issue. Make sure you choose the type tool (the one that has an A for the icon) and just click once on your photo. Before you click anywhere else, type whatever you want. I hope you can figure it out! Thanks for the comment!

      Delete
  9. I'd like to make a chalkboard back ground but with a white border. I found a template I like but its not working the same way as your above direction. (probably bc its not configured to 5x7) Do you know how to configure the backgrounds so I can change it?

    ReplyDelete
  10. Hello, I have downloaded fonts from 101fonts and they wont show up in my font list when I go to use them. Any idea?

    ReplyDelete