Friday Photoshop

Happy Friday! I know there was some confusion over Wednesday’s post “What’s In Your Bag?” as to how to post pictures of in the comments, so I’ve come up with a solution and a fun collaboration between all of us! If you want to, take a picture of your bag and its contents and email it to me at: I’d love to post all of your submissions and play a guessing game as to which bag goes which blogger (thanks for the idea, Theresa (oops!) Annie!) on Monday, so if you could make sure to send me your picture no later than Sunday at noon EST (that’s 5pm for you UK folks!) that would be awesome. Don’t feel obligated to clean out the receipts or junk, and don’t even feel obligated to even participate if you don’t want to! But I’d love to be nosy and see what you all have, and I think it will be really neat for everyone to try and “match” the bag and its owner. If you want to play along, just send me your photo! xoxo

I’m going to deviate a little from the program here, but this week I don’t have a Friday Five. In fact, I didn’t even have a Friday Two. All I had on my list was a box of decaf vanilla tea I’ve been chugging all week. Not exactly stimulating reading material, unless my goal was to be a total bore. I really tried, since you know, Friday Fives are my weekly thing, but it just wasn’t happening this week. And I didn’t want to force something or produce a post that wasn’t 100% to my liking, because I’d always feel irked over it.

Anyway, earlier in the week, Annie posted a mini-tutorial on how to achieve text with a picture filling in Photoshop. There are a million ways to do everything in Photoshop, and I am not pretending to be an expert in any of them. I do, however, spend a large chunk of my time working in Photoshop, and this text treatment is one I love and was happy to learn how to do a few years ago. Theresa emailed me with a request to explain further and do a variation on the text. With nothing else filling up today’s post, I figured I might as well oblige. SO. Here is my first attempt at a Photoshop tutorial, complete with screen-caps and poor explanations. I hope I don’t confuse all of you!

(FYI, I’m working in Photoshop CS4 on my work laptop, but the steps are identical for CS5 and CS2, I checked. I’m assuming they are the same for Photoshop Elements, since these are basic steps that Photoshop offers.)

First, open the image you want to use in Photoshop. Then, your tool bar on the left, select the Text Tool, and select “Horizontal Type Tool Mask.”

Things will look weird while you’re typing your text, but don’t worry, it will go back to normal.

Once you have your text, select the Move tool (the little arrow, very top icon) from your tool bar. The weird red color will disappear as inexplicably as it appeared. You’ll be left with your text, outlined by little marching ants.

At the top of your screen, click the “Select” menu, and from the drop down, click “Inverse.”

Everything will look like it is selected with the little dashed line of marching ants.

Hit delete on your keyboard. You’ll be left with this:

But since you’ll be left with the text in a document that is as large as your original picture, you’ll need to crop it. On your tool bar, select the Crop tool.

Using the Crop tool, select the area you want around your text, and hit enter. Et voila. You’ll have this:

You can now save it as it’s own image under File, Save As. Yay! Text filled with an image! You did it!

Theresa specifically sent me this image below, from DesignLoveFest, and asked if I could explain how to achieve this in Photoshop. It’s like the opposite of the tutorial above; you want to remove the text from the image, leaving an outline.

My way of doing this is time consuming, but doable. It’s just a lot of little steps, more than the tutorial above. My method is not as simple as I’d like, and again, there is probably a waaaay easier way to do this somewhere out there on the internet, but this is the way I learned it. Don’t take it as gospel.

Open the image you want to use in Photoshop. I’m just using the same macaron picture again.  From your top menu, select Layer, New Layer.

Don’t worry about naming it. Just click Okay when the dialogue box pops up.

You’ll now have a new layer in your Layers window on the right. From your tool bar on the left, select the Rectangular Marquee Tool.

Make a shape on top of your image. It’s just going to be an outline right now. On the tool bar, select the Paint Bucket Tool. You’re going to fill this shape with color. I chose white because, hello, it’s me.

Repeat the New Layer step from above. You will now have two new layers on top of your Background image on your Layer pane. On this layer, we will be putting the text we’re going to cut out. In the image Theresa sent me, that text was “Rainy Days…” Select the Text tool from your tool bar.

It helps to make the font a different color than the shape we made on Layer 1. I typed the word “Yum.” Because, hello, it’s me.

From the tool bar, select the Magic Wand tool. It looks like a magic wand.

Now, here’s where shit gets tedious. Making sure your text layer is selected on your Layers pane to the right, use the Magic Wand and select one of the letters of your word. Here come the little marching ants again!

Switch layers, to the layer that has the white box on it. MAKE SURE you have the white box (Layer 1) selected, and hit the delete key on your keyboard. Nothing is going to happen that you can see, at least for right now.

After you hit delete, go back to the text layer, the one above it that says YUM. The Magic Wand will still be selected. Click on your next letter.

Remember when I said it got tedious? You have to now go BACK to your white box layer (Layer 1) and hit delete on your keyboard, again. Repeat this step, switching back and forth between layers, for all of the text you have on your text layer. The more words, the more you’re going to have to go back and forth selecting text with the Magic Wand and then going to Layer 1 and hitting delete.

When you’re all done, aka, when all of your letters have been selected and then the corresponding “delete” has been made on the white box layer, make the Text layer invisible. Sounds crazy! But on your Layers pane, you’ll notice that each layer has a little eyeball next to it. This controls the visibility of the layer. If you click the eye, it disappears, making the layer invisible. In this case, we want our text layer to be invisible. Click the little eye.

But you’ll notice that the outline of the last letter you selected with the Magic Wand is still selected. On your top menu, click Select, and then Deselect. This step accomplishes pretty much exactly what it says.

You’ll be left with a white box with text-shaped holes cut out of it. You now have the ability to move the white box anywhere on the image that you want, to allow the image to show through the text cut-outs.

Once you have the white box positioned where you want, flatten the image by selecting Layer from the top menu, and then clicking Flatten image all the way at the bottom. This literally flattens the image together so that the white text box isn’t selectable or movable.

You should be left with an image that looks like this (although the white box is too big for the text inside of it, for these purposes, you hopefully catch the drift).

And there you go! I hope these helped somewhat. Or maybe I made things worse, I don’t know! I certainly hope not. I just love Photoshop and would be totally lost without it, so I’d like to think this made it at least a teensy bit more approachable to those of you who are scared or overwhelmed or totally lost working in the program. If you have any questions about either of these or want me to explain anything in more detail, I’d be happy to! Or if you have a totally different tutorial you want to see, let me know! I could maybe make this a regular thing if you guys would like.

Have a great weekend, ladies! What are you up to? Tonight, Boyfriend and I are going out for a friend’s birthday, and maybe going to the American Swedish Museum on Saturday (what are the odds it’s in Philadelphia??). Sunday is the Superbowl, so I will likely spend the day catching up on Project Runway Allstars and pretending football isn’t on (sorry, Lauren :) ). Don’t forget to email me your “What’s In My Bag?” shot if you want to be included! xoxo

Related Posts Plugin for WordPress, Blogger...
February 3, 2012 / Photoshop Tutorials / LEAVE A COMMENT / 10


  • Hey that wasn’t Theresa’s idea it was mine! Hurumph 

    I’ve sent you my photo, hope you go it.

    Marching ants :o)

    Wow what a comprehensive tutorial, thank you darling. I will have to look properly when I have more time. No doubt we will all be posting this next week! Maybe you can award a prize to the best one you see?

    I am slight disappointed that your first tutorial wasn’t lamputation though.

    This weekend? Not much. Just, you know, going skiing.

    Have fun kiddo Xx

    • Gah! I’m so sorry! I totally though it was Theresa. My bad! I’ve updated it to correct it. Whew, thank you for pointing that out. My brain has been mush the past few days, I’m blaming it on work.

      Ha, I’d never judge all your work! Feel free to use the tutorials to your liking, but I definitely don’t want to be a Photoshop Judge or anything, haha. I’m sure (assuming this tutorial makes sense to any of you once you go in and attempt it) you guys will all produce awesome stuff!

      Next tutorial: lamputation. THANK YOU for the new slang term!!

      Have a BLAST skiing! Take lots of pictures of your chalet and don’t get hurt skiing! Have a really wonderful time!

  • THANK YOU so much, Erin!!!…!!!
    I cannot wait to give both of these techniques a try. If all goes well, don’t be surprised to see it in next week’s posts. Erin, I know this took you a long time to put together. I mean, just putting all the screen grabs together and explaining everything, is time-consuming business. So, thank you ever so much for being so generous with the info share. This could definitely be a weekly, bi-weekly, or monthly column for you.
    I will be attending an SB party on Sunday, but not really watching. I just read a tweet reporting that the amount of chicken wings that will be consumed on Sunday could circle the world, twice! Disgusting!
    Have a great weekend not watching the Super Bowl, Erin. :)

    • So many exclamation points!! Yay! It means I must’ve made you happy :) I was happy to do it, especially when Photoshop is so confusing if you’re not comfortable with it, and I wish it wasn’t that way. I wish it was more user-friendly, and if I can help Mah Blog Gurls out with some easy tutorials, why shouldn’t I? I can’t wait to see what you guys come up with! But like I said to Annie, assuming that these make any sense once you attempt them!

      That’s a truly gross stat about chicken wings. Whoa. America! Land of the free and home of the morbidly obese. Have a great weekend, love!

  • Oh WOW. This is awesome. I’ve always found Elements plenty for my needs, so I’ll have to go see if this translates, but I bet it does. I should see if I can fit it in before the pre-game shows start on Sunday! ;) But your tutorials are GREAT! And like Theresa, I will use them often, as long as they show up often. I’ll totally send you a pic of my bag too. Look for it tomorrow. Happy weekend dearie. xo

    • Honestly, Elements was enough for my needs as well but the version I have wouldn’t run on my new iMac or macbook. It was a little outdated. I got CS2 through a friend at college for my desktop, and then my mom bought me CS5 with a heavy, heavy discount from a student/educator online software store for Hanukkah/my birthday. And truthfully, despite all the I do in it, I really only scratch the surface of what Photoshop can do. I don’t get too in depth with it, so I don’t necessarily need all the bells and whistles. I hope this all translates to Elements! I’d love to see what you come up with! If you need any more explanation, tweet me over the weekend and we’ll arrange a tutorial session. (THIS GOES FOR ALL OF YOU, LADIES!)

      Have a great Superbowl! I love that you love football. Don’t think I’m being a brat about you personally! xoxo Can’t wait to see your bag pic!

  • You are such a sweetie…..
    1. Yes, will send photo of my bag & content.
    2. Love your tutorial ( I do it similar to you:)
    3. Love so much colour (macarons)
    4. Agree with T this could be regular feature, especially with Erin lingo!
    5. Marching ants? Love that:)
    6. Went to see Hockney this eve, Great, then we had dinner.
    7. Weekend very busy. Seeing a Dangerous Method tomorrow. Playing Tennis. Some work.
    8. Must still comment on rest of gang and go to sleep as exhausted.

    • Lists! I love lists.

      1. I got your picture! Thank you for sending and playing along :)
      2. Yay! Thank you! Good to know I’m not alone.
      3. Ha! Color! My brain sees macarons and thinks “DROOL” not “color” but that’s okay, right?
      4. I’ll have to throw some lamps into the mix to make it really “Erin” I think, but thanks for the support about making this a feature!
      5. That’s the term I’ve always heard used, and I don’t know what else to call it! Moving-dashed-line doesn’t have the same ring to it.
      6. How was Hockney? Where did you eat?? I’m nosy.
      7. Tennis! Tell me how Dangerous Method is, it just opened here and I’m curious!
      8. I’m sleepy too. Hope you got some much needed shut-eye!

  • Thank you for the great tutorial! I need to learn so much and I’m not using my CS3 to its full potential. Well I might use about 1% of it ;) I will go off and practice a bit, hopefully being able to use the technique soon…

  • […] The first Photoshop tutorial I made. filed under // […]