A photoshop how to: Get your pictures ready to post on the web | Overstuffed Overstuffed

Friday, May 16, 2008

A photoshop how to: Get your pictures ready to post on the web

I've had a lot of questions from people about two things I do in Photoshop. How to make and stamp my logo on the pictures and how to make the frames I've been posting with lately. If you couldn't care less about this, then just stop reading now and come and visit me tomorrow.

If you do care about this, it's your lucky day, because I'm going to teach you!

Here's the catch. I have Photoshop Elements 5.0. If you have any version of Elements it will be pretty much exact, but if you have CS3 or any of the other versions it will be a bit different, and I really have no idea how. But I do imagine it will work similarly.

So we're going to start by creating a logo and making a brush out of it.

Step 1: You need to open a new, blank file. A dialog box will come up (didn't get a screen shot, sorry) asking you for specific parameters. The only one that matters for this is that the background is white. Size and resolution don't make any difference. (Clicking on the screen shots in this post will bring them up full size so you can tell better what's going on.)
Step 2: Pick the type tool. You can do this by pressing "T" on your keyboard, or by clicking on the T icon along the left hand side. Press "D" on your computer to make sure that your foreground is black and your background is white.

Step 3: Make your logo. Have fun. We won't go into how to use the type tool, but it's pretty self evident, I think. There are font and point size pickers at the top. For making a logo brush you do need to make sure it is black (see step 2 for getting your foreground black, as that will be the color the type tool uses).
Step 4: Once you have made your logo, you will need to flatten your layers. Do this by clicking on "more" at the top of the layers pallette and then choosing "flatten image."
Step 5: Choose the Marquee tool, either by pressing "M" on your keyboard, or by clicking on the dotted square icon along the left hand side of the screen. Use your mouse to select your logo (i.e. make a dotted line around it).
Step 6: Go up to Edit and choose "define brush from selection."
Step 7: A new dialog box will pop up, asking you to give your new brush a name. I have named mine "new logo" but of course you can choose whatever you darn well please. Click ok.
Step 8: Before you leave this screen, you'll want to make sure that you did, indeed, make a brush. So, get the brush tool, either by pressing "B" on your keyboard, or by clicking on the paintbrush icon on the left hand side. Your new brush will be in the "Basic Brushes" menu, and it will be the very last one there. If you click on it you will see the ghost-like version of your logo, and you know that you have a logo brush! Hooray!
Okay, so now we're going to get a picture all ready to be posted on your blog. As a side note, the reason I do the logo brush on all my pictures, is not because I'm a photography snob or anything like that. There is actually a lot of photo stealing that happens on blogs and other websites. We all know how easy it is to just right click on an image and take it for our own use. I do not want my pictures being used by others, because I don't know how they'll be used. I'm sure the likelihood is low, but I watermark them so people will not want to take them. According to things I've read, the watermarking is a big deterrent for these internet photo thieves. So there you have it. Definitely something to think about. Okay, now, back to getting your photo ready for blog postage.

Step 1: Get a photo and bring it up in photoshop. The first thing you need to notice is how big it is and what its resolution is. You can find this information right under the picture.

You're going to want to resize your picture for web. I have purchased an action that does this for me very quickly, but you can almost as quickly do the same thing yourself. Obviously, my picture is very large, and will have nightmarish loading time if I post it how it is now. So, your goal is for it to be 4x6 and 72 dpi. To resize, go up to Image>resize>image size.
Step 2: A dialog box will come up, asking you parameters for your resize. For the photo I have up, I want it to be 4 inches wide and 6 inches tall. You may have to reverse this depending on your picture. Then choose 72 for the resolution. In order for this to work correctly, the resample box must be checked.
Step 3: Click ok, and your image will magically be resized. Don't freak out, because it will probably look smaller than a postage stamp. All you need to do is use your zoom tool ("Z" on the keyboard, or the little magnifying glass icon to the side) or if you have a scroll mouse you don't even need your zoom tool. You can just click outside of the picture and scroll up and down to change the zoomage.

Step 4: Now we're going to make a nice little frame for your picture. To do this, go up to Image>resize>canvas size. A dialog box will come up for your parameters. Here you can do whatever you want. Play with it to see what kind of funky frames you can make. Here is what I have been doing lately. First, I do a canvas resize of .05 inches in white. Then I go back up to Image>resize>canvas size and do another one of .5 inches in black. Easy peasy. Oh, you need to make sure the "relative" box is checked, or funky, undesirable things will happen.
Step 5: Now that you have your frame, you're going to want to logo-ize your photo. First, you need to make a copy of your background layer. Do this by pressing "CTRL J" on your keyboard. You want to make sure that layer is highlighted on your layers pallette.

Step 6: Press "B" to get your brush tool, or use the brush icon, and find your logo brush from your basic brush menu. Since we checked on it earlier, it will probably come up automatically.

Step 7: Play a bit with the pixel size slider at the top until you find a brush size that works for your photo. Then stamp it right on that picture by clicking with your mouse. I usually alternate between stamping in black or white, depending on the lightness or darkness of my picture. Sometimes I use a random color, but not usually. For this particular photo I used white. The brush tool will use the foreground color, so if you need to switch them around, just click the arrow between the two squares. (The icon of which I speak is in the lower left hand corner of your screen at the very bottom of the toolbar.)

Step 8: Now you need to play with the opacity of the layer you just stamped on. The opacity slider is located at the top of the layers pallette. I don't like my logo to be glaringly there, so I usually slide it to around 50%. Sometimes more and sometimes less, depending, of course, on your photo.

Step 9: Once you're happy with the way your logo looks, flatten your layers (see step 4 on the making of the logo if you forgot how) and save your image.

Step 10: Go post it on your blog!

Okay, I realize this whole step by step thing makes this look totally cumbersome and time consuming, but it really isn't. Once you have a logo you like, all those first steps are done forever. And getting a photo resized, framed, and logo-ized takes about one minute once you have it all down. Totally fast and easy. And I hope I helped you learn something new and fun today.

So here is the photo I prepared (story behind it coming soon):
Do you think I should keep this new logo? Or do you like my old one better? Do tell.

17 comments :

  1. Wow, it's everyone's lucky day!

    ReplyDelete
  2. Mmm... I like the new logo.
    it's hot.
    And you're not on the computer.
    bad you.

    ReplyDelete
  3. I like the old one....and thanks for making me feel completely overwhelmed about photoshop!! I feel so in over my head at this point!

    ReplyDelete
  4. Thanks for the great tutorial, Lara! Your new logo is nice, but I must admit, I'm partial to the old one.

    BTW, how do you capture your screen to make the tutorial?

    ReplyDelete
  5. This was very interesting.

    I'm torn on the logo. I like the Lara in your other one quite a bit, but this one is nice too. Hm...I guess it depends on what you want to do. I think the old one is more noticeable.

    ReplyDelete
  6. I love th old one! It doesn't overwhelm the photo like this one. It is in a corner. HOpe that helps

    ReplyDelete
  7. I like both your logo's. Can the new one be put more at the bottom of the page? And can I just say that was a lot of work, to write that tutorial, but I know that if nothing else, Sam really appreciated it and was up for a few hours last night trying out the new info.

    ReplyDelete
  8. Hi Lara, It's Katie Minharo. I love your blog, and I've been meaning to leave you a comment for a while. Your family is so cute, and I can't believe how old everyone is getting! I saw a picture a few posts back of Chloe, and I automatically thought it was Bria.
    Anyway, I really like your pictures, and I'm torn about the logo. I would prefer the new logo if it could be moved down or possibly broken up into 2 staggered lines in a corner. (I hope that made sense.) Good luck.

    ReplyDelete
  9. That's really really nice of you to do the tutorial. I'm buying Photoshop for my mom, so this will help a lot!

    PS-I think I like the old logo better, but do which ever one you like best!

    ReplyDelete
  10. I like the old one, but I also love change. (If you couldn't tell by my blog templates.) I have Adobe Elements 6, but I get so overwhelmed by it, I use the free software that came with my computer. I really should venture out and learn how to use the I paid for because I think the possiblities are endless with it.

    ReplyDelete
  11. um... i need to get any version of photoshop and i'll be set! i really liked your old logo though ;)

    ReplyDelete
  12. I like your old logo best. As always your pics are great!!

    Mom Neves

    ReplyDelete
  13. Hi Lara. I also liked the old logo better, though the new would also work. The only thing I would say about the old one is to make your signature a tiny bit smaller, I think that is what I like more of the new logo. But whatever you choose will serve you well, you are great at it all!

    ReplyDelete
  14. thank you for this. I like that you are experimenting with different looks for your logo.

    ReplyDelete
  15. Lara! I'm ever-so-pleased that I found your wonderful tutorial :) I have the newer Photoshop and it worked great! Thanks! Do you know, by chance, how I can delete a logo as a paintbrush, though? I did one that was super tiny and I want to delete it but dunno how!

    Also, I am way with you on photo-stealing. I really like taking pictures and I don't want people taking credit for the 1 nice picture out of the 100 that I post, lol.

    ReplyDelete
  16. Also, Lara, I really like Lakme, too :) Very VERY pretty.

    ReplyDelete