Apr 162013
 

IMG_9256

I’m sure there are better ways to do this. I’m not the most technically gifted person (I prefer hot glue and spray paint). In my quest to design the blog, I read oodles and oodles of tutorials, and a lot were more advanced and/or written for people with photoshop or other programs. I thought I’d share this because I would have found a similar tutorial helpful! I was introduced to Pixlr through this tutorial by Girl’s Guide to Web Design. It’s a great tutorial. 

There was a time when I really wanted Photoshop. I saw all kind of tutorials for how to do cool things with photos, and they all used Photoshop. Maybe one day I’ll get it, but in the meantime I was thrilled to learn about a FREE online program called Pixlr. It’s awesome! And FREE! I haven’t ever used Photoshop so I can’t compare the two, but I’ve been able to do everything I’ve needed/wanted on Pixlr (and I’m sure there’s more that I haven’t even tried).

I’m going to share how I used Pixlr to make a Facebook cover photo (you can find me on Facebook [here]). You can use these general steps/techniques to make lots of different things- a header for your blog, a collage of photos for anything, a logo, a favicon. Lots of possibilities.

[The Prep Work]

I decided to use 4 photos in my cover photo. I gathered the pictures I wanted to use and put them in a separate album in iPhoto so they’d be easy to find. You might want to do the same.

[Let’s Get Started]

1. Go to pixlr.com. Choose ‘Open Pixlr editor (Advanced)’.

Screen shot 2013-04-16 at 9.45.45 AM

2. Choose ‘Create a new image’.

Screen shot 2013-04-16 at 9.46.12 AM

3. This is where you will set the size of your new image. A Facebook cover photo is 851 pixels wide by 315 pixels tall. So enter ‘851’ in width and ‘315’ in height. Then click OK.

Screen shot 2013-04-16 at 9.46.28 AM

4. Now you’ll have a blank image that’s the exact size of a Facebook cover photo.

Screen shot 2013-04-16 at 9.56.15 AM

5. Now go to ‘File- Open Image’. This is where you will get the pictures you want to use. If you have them in an easy to find place, it makes this step easier. Find and select your first image.

Screen shot 2013-04-16 at 9.58.01 AM

6. The size of my picture is huge. You can see below it. Thousands of pixels tall and wide. That won’t work. Go to ‘Image- Image Size’. Type ‘315’ in the height. Make sure ‘constrain proportions’ is checked. (This will make sure everything is resized to scale, so the picture doesn’t get all funky and distorted). It will automatically change the width to 210. Then click OK.

Screen shot 2013-04-16 at 10.00.34 AM

7. Now it’s going to make your picture look teeny tiny. See in the bottom left corner of the photo? It gives a percentage. Mine says 14%. You want to change it to 100%. Just double click on the number and type 100. Now you’re seeing the whole thing. Looks better.

8. Now go to ‘Edit- Select All’. You’ll see a little ant marching line climbing around your picture. That shows you that it’s all selected. Good. Then click ‘Edit- Copy’.

9. Now you want to click on the blank image you first created. Bring it to the front.

10. See the four little boxes on the right side? One is ‘Navigator’. One is ‘Layers’. One is ‘History’. The layers box just has background in it at this point. The 4th icon on the bottom of that box is for a new layer. Hover your mouse over it and it should say ‘new layer’. Click that. You want to put each image in it’s own layer. This will make it easier to move the images around individually. Think of it as having layers of tracing paper laying on each other. They’re clear, but you can move one without affecting the rest.

11. So now Layer 1 is showing in the Layers box. Make sure the Layer 1 box is checked. Then click back on your blank image. Go ‘Edit- Paste’. This will put the image that you copied onto your new image!

12. To move the image around, you need to make sure the ‘move tool’ is selected. In the picture below, my mouse is hovering over the move tool. Over there on the left. See? If you select the move tool, you can move your picture around. I’m going to put it on the right side of my image.

Screen shot 2013-04-16 at 10.07.49 AM

Screen shot 2013-04-16 at 10.09.49 AM

13. Then you can click on the image that you opened. The window that is behind the new image window. Go ahead and get rid of it. You don’t need it anymore. Click x. You don’t have to save the changes.

14. Then you’re going to repeat steps 5-12. Seems like a lot. It really isn’t. Especially when you get the hang of it. Do it a couple of times and it goes really fast!

I’ll walk you through it again.

15. Go ‘File- Open Image’. Select the next picture you want.

16. Once the image is opened you need to resize it. Go ‘Image- Image Size’. Type 315 in the height. Make sure ‘constrain proportions’ selected. It will automatically change the width to 210.

17. Your picture’s going to look teeny tiny. In the bottom left corner of the image, change the percentage to 100. Looks better now.

18. Go ‘Edit- Select All’. You’ll have the ant line marching around your picture. Then ‘Edit- Copy’.

19. Click back to your new image. Make sure you have a new layer selected. You can see what is on each layer by unchecking the box. When a box is unchecked, the layer won’t show up. The layer that is highlighted in blue is the layer you’ll be working on.

20. Go ‘Edit-Paste’. The picture will show up on your new image! Remember to choose the ‘move tool’ on the left and your can move your picture around. I moved my second picture over beside the first.

Let’s say I want to move the first image. I just have to click on the first image’s layer. I can easily identify what is on each layer by unchecking the box beside each layer and seeing what disappears! If I want to move the first image, make sure that layer is highlighted in blue, you have the move tool selected, and you can move it around!

Go ahead and close the window to the second picture you got. It just makes it less crowded to get rid of it.

Then do the same thing to get the last 2 pictures. Steps 15-20.

*You want to keep in mind that whatever picture you put on the far left, the bottom portion of that will be cut off by your profile picture.*

This is my finished product. You’ll notice that I moved around the pictures and have them spaced to show a little gap between each one. I think this makes it easier to look at. (I also went back to iPhoto to re crop the picture of the succulent).

Screen shot 2013-04-16 at 10.51.45 AM

Now you just have to save your new image and then you can upload it to Facebook!

Go ‘File- Save’. Name the image. I’m calling mine ‘coverphoto’ as a JPEG file. How original! For Facebook, the file needs to be 100KB or less. So I adjusted the quality of the image so that the quality was as high as possible, without making the image file size too big. For my image, a quality of 90 gave me a 100KB image. Perfect! You can play around to see what quality gives you what KB size.

Screen shot 2013-04-16 at 10.53.20 AM

Choose where you want the file saved. I saved mine to my desktop, so it’d be easy to find and upload to Facebook.

Then I uploaded it to my Facebook cover photo. Go ahead, check it out [here].

So what do you think? My first technical/computer tutorial. I hope it was helpful and easy to follow. If you haven’t used Pixlr, you should check it out. It really is a great online program, especially for those of us without Photoshop!

I’d love to hear some feedback on this tutorial. And if it helped you make anything, I’d love to see your creation!

Have a happy day!

 April 16, 2013  Posted by at 11:27 diy  Add comments

  4 Responses to “diy [make a custom cover photo using Pixlr]”

Comments (4)
  1. You are a gun!! Thanks for the info! I also have serious issues with the ‘tech’ stuff, although my never give up attitude causes me to waste a huge amount of time trying to nut things out. Also a lover of the glue gun and the paint brush like you. I have added you as a link on to my blog thriftystyling.blogspot.com. I’m off the main road down a dirt track in blogger city so I wont be directing crowds your way…………but at least I can visit you regularly :)

    • Thank you for such kind words! Technically challenged bloggers unite! It’s nice to ‘meet’ you. Btw- I quite like dirt roads! Nothing wrong with that :)

  2. OMG this is EXACTLY what I was looking for! Thank you so much for taking the time to create these instructions. I didn’t come across any that were half as good as yours. You are AWESOME!!

 Leave a Reply

(required)

(required)