Log in

No account? Create an account

Previous Entry | Next Entry

A day or two ago, olsen_systa posted a question about how to get a certain effect applied to what was once a photo of one of the Olsen twins. It's taken some time and experimentation to develop an answer, but I've developed a technique which closely approximates the desired effect and have turned the experiment into a tutorial, making a different Olsen image into something like this.

About this tutorial:

  • Made in/for Photoshop CS, compatibility with earlier versions dependent on availability of a certain filter.
  • May not be translatable to other software due to the above dependency.
  • Skill level: intermediate (layer mask, saved selection, filter use)
  • The results of the tutorial are highly dependent on the source image possessing certain characteristics. Expect your results to be different if your source image doesn't have lighting and color qualities very similar to the source image in this tutorial.
  • Dialup users should be able to load this tutorial without difficulty. Most images are linked to rather than loaded inline.

I stumbled upon an image of one of the Olsen twins (don't know which one, don't normally pay enough attention to them to be able to tell them apart) different from the source for olsen_systa's sample image, but well suited to this task. Note the white background, good range of highlights/midtones/shadows, and the lack of a shadow obscuring any part of the face. This image is ideal because it requires no manipulation prior to using the Threshold command (coming up soon). Other images may need a lot of color correcting before they could be made suitable for use in this tutorial, especially as regards shadows on the face. Choose your images wisely.

Step 1: Open your image. Duplicate the background layer and give it a useful name. (I named mine 'olsen, threshold'.) Save to PSD to get your working file established.

Step 2: Make sure your new layer (not the background) is highlighted and run menu option Image » Adjustments » Threshold... The default value in the Threshold dialog box is 128. For this image I increased it to 151 and, satisfied with the way it looked, pressed OK.

At the end of step 2 you should have something resembling the image to the left.

Step 3: With the threshold layer highlighted, run menu option Filter » Stylize » Diffuse... Select Anisotropic mode and press OK.

Step 4:Run menu option Select » Color Range... Use the eyedropper to sample the black portion of the image, then run the Fuzziness slider in the Color Range dialog box up to 200. Press OK. The black portion of the image should now be surrounded by marching ants.

Step 5: Run menu option Select » Save Selection... Give the selection a name and press OK. Press CTRL-D to deselect. We'll reload the selection later.

Step 6: Make a new layer on top of the others. Select the Paint Bucket tool. Set the tool to fill with a pattern rather than a color and fill the new layer. I used one of Photoshop's built-in patterns. You may use any pattern you like. (See the Layers palette at the end of step 6.)

Step 7: Make another new layer on top of the others and fill it with white. Add a layer mask to this layer by pressing the Add Layer Mask button on the Layers palette.

Step 8: Run menu option Select » Load Selection... Choose the selection you saved earlier from the dropdown menu in the Load Selection dialog box and press OK.

Step 9: Run menu option Edit » Fill... Fill the selection with black (which should correspond to your current background color if the mask layer is highlighted). Though you've filled the selection with black, you won't see black in the image. What you should see is the pattern fill from the layer below showing through where the selected mask was filled. Press CTRL-D to deselect. (See the Layers palette at the end of step 9.)

At the end of step 9 you should have something resembling the image to the left.

Step 10: With the mask layer still highlighted, select the Brush tool and choose a large, hard-edged brush. (I used the size 19 brush.) Painting on the mask with white as the foreground color, paint over those parts of the image you might not need, assuming you see extra stuff that doesn't need to be there. In this case, I cleaned up the lower part of the image. Here's my image after cleanup.

Adding text which shows the same properties as the image is done in much the same way the image itself was made.

Step 11: Select the Text tool, get a font you like and add some text. I chose Porky's and added a silly comic sound effect word to the image.

Step 12: Run menu option Select » Load Selection... The correct entry will already be selected by default in the dialog box, so just press OK. The text should now be surrounded by marching ants.

Step 13: Turn off visibility of the text layer. The text will disappear but the marching ants will be left behind. (Deselecting right now would be bad.)

Step 14: Highlight the mask layer and make sure the mask portion of the layer is selected. Run menu option Edit » Fill... Fill the selection with black (which should correspond to your current background color if the mask layer is highlighted, just like the last time we did this). Once again the pattern fill should show through the mask, making the text look just like the rest of the image. Press CTRL-D to deselect. (See the Layers palette at the end of step 14.)

Step 15: Save the PSD, then Save For Web in your preferred format, and you're done!

Here's the final image...

Translation note: The Diffuse (anisotropic) filter may make translation difficult, but you might be able to replace the use of that filter with Gaussian Blur, which I think is more widely available. When I tried using Gaussian Blur it didn't work particularly well due to my source image being relatively small. If you use a very large, high quality image and leave it at the very large size while working on it, Gaussian Blur may work well.


( 45 comments — Leave a comment )
Page 1 of 2
<<[1] [2] >>
Oct. 17th, 2006 04:34 am (UTC)
I really like this. Very nice, and will try it tomorrow, thanks for posting this.
Oct. 17th, 2006 04:37 am (UTC)
Very neat. It was nice to learn some new tools like save and load selection. :)

I was wondering if you could explain the color range tool a bit more? I'm wondering exactly what it does.
Oct. 17th, 2006 04:53 am (UTC)
I also forgot to say that I've always wondered how to mask with text. I've learned how to now! Thanks. :)

This is what I made...the starting picture wasn't as good, but I still like it...it has a style that is still pleasing.

(no subject) - aquamarcia - Oct. 17th, 2006 07:12 am (UTC) - Expand
Oct. 17th, 2006 09:15 am (UTC)
Oct. 17th, 2006 09:42 am (UTC)
Those look good. :)
Oct. 17th, 2006 11:02 am (UTC)
WOW!! This is awesome, deffo saving!! :D
Oct. 17th, 2006 12:14 pm (UTC)
I tried this earlier and it works really well, thanks!

And also: I don't know if it's just me but I can't get any of the images to work. They were earlier, and now they come up with a 403 Forbidden error when I click on the links... Might just be me.

Anyway, great tut, have added to mems! XD
Oct. 17th, 2006 07:06 pm (UTC)
It wasn't just you. I was editing a file on the webserver I use that controls access to images (defeats hotlinkers) and you were almost certainly looking at the tutorial while I was making experimental changes. The files should all be accessible now.

Glad you like the tutorial. :)
Oct. 17th, 2006 01:47 pm (UTC)
That's very neat, thanks!

As a comment, to make the pattern work easier: since everything's in black and white anyway, filling a layer with the pattern and setting it to Screen over the image and text would look almost exactly the same, and be a touch less stressful. ;)
Oct. 17th, 2006 07:12 pm (UTC)
I have used the screen blend method you describe before and like it under some circumstances, but there's no substitute for masks when you want flexibility. And at the very least, the tutorial is as much about teaching a technique as it is making an image. :)
Oct. 17th, 2006 05:48 pm (UTC)
I'm saving this to my favorites. This looks like a great opportunity to learn something different. Thanks.

You know you love the Olsens. Hee. :)
Oct. 17th, 2006 08:04 pm (UTC)
this is really great!! I love this tutorial. I'm memming this :D

This is my result and here is the original image.
Oct. 17th, 2006 08:07 pm (UTC)
Very nice. I like the subtlety of the pattern you used.
(no subject) - maytel - Oct. 17th, 2006 09:34 pm (UTC) - Expand
Oct. 18th, 2006 12:09 am (UTC)
*___*~Memed~...Thank You,Very useful~
Oct. 18th, 2006 01:19 am (UTC)
Neato! And don't worry.. I'm not an Olsen fan either.
Oct. 18th, 2006 03:36 am (UTC)
Miss Knightley is a big improvement. ;)
(no subject) - schroder3000 - Oct. 19th, 2006 08:44 am (UTC) - Expand
(no subject) - aquamarcia - Oct. 19th, 2006 09:09 am (UTC) - Expand
(no subject) - schroder3000 - Oct. 20th, 2006 12:04 am (UTC) - Expand
Oct. 20th, 2006 08:16 pm (UTC)
Nice Tutorial
I wanted to say Way to go! I enjoyed your tutorial and I am already very familiar with Photoshop I never thought to put these commands together. I added it to my memories. My only suggestion is why not use the type mask tool instead? It would simplify the end of your tutorial a bit. It would allow you to skip steps 12 and 13. Basically you type the text the way you want it and when you are done you accept (hit the check mark in the upper right) and it becomes a selection.
Just a suggestion,
Laura G.
PS. My image is here (keep in mind I had to subtract the background from mine)
Oct. 20th, 2006 08:52 pm (UTC)
Re: Nice Tutorial
I'm glad you like the tutorial.

I didn't use the Type Mask tool because I am not familiar with it. The tutorial was made up entirely on the spot to answer olsen_systa's question and I went with what I know. It may also be that repetition of the mask technique I used will be helpful to those getting used to using masks.

Even so, I appreciate you bringing the Type Mask tool to my attention. No matter how much I think I know about Photoshop, (and I really know rather little) I always find there's something new to learn about it, and Type Mask is one of those things. :)
Re: Nice Tutorial - aquamarcia - Oct. 20th, 2006 10:19 pm (UTC) - Expand
Oct. 20th, 2006 09:13 pm (UTC)
Wow, this is great! I'm definitely memorizing this, thank you so much!
Oct. 20th, 2006 09:36 pm (UTC)
And since other's have been sharing theirs, this is what I came up with:

(no subject) - aquamarcia - Oct. 20th, 2006 10:20 pm (UTC) - Expand
Oct. 21st, 2006 01:38 am (UTC)
Excellent tutorial I've added to my mems. Using PSP I'm sure I'll have to fiddle a bit in order to make the translation, but the effect is worth pursuing.

Oh, did you know that Lifehacker's picked up this post and is promoting it on their blog? The post's here.
Oct. 21st, 2006 02:37 am (UTC)
Once you have a translation, please post notes for it here. That will greatly extend the usefulness of the tutorial.

Thanks for letting me know about the reference from Lifehacker.
I love Lifehacker! - humbaaba - Oct. 26th, 2006 07:07 am (UTC) - Expand
Oct. 21st, 2006 03:21 am (UTC)
I must be stupid. ..
I really want to get this, but I keep getting hung up on step 9. I won't post my questions here - anyone interested in helping me through this via email?
Oct. 21st, 2006 03:49 am (UTC)
Re: I must be stupid. ..
I have a feeling I know what the problem is. Look closely at the highlighted layer on the screencap of the Layers palette at step 9. In the highlighted layer there are two thumbnail-sized representations of that layer with a chainlink icon in between them (indicating linkage between the two representations). The thumbnail on the left represents the fill (the actual content of the layer). The thumbnail on the right is the mask. See how there's an additional box surrounding the mask thumbnail? That box indicates that when you edit they layer, you're editing the mask. If that box is surrounding the fill thumbnail, it would mean you were editing the fill. Make sure that the mask portion of the layer is what you're editing by clicking on it to get that extra box to surround it. At step 9 (and at step 14) you must edit the mask, not the fill.

As for how masks work, when editing the mask white represents what's masked and black represents what you can see through. At step 7 you fill that new layer with white, the add the layer mask. (The Layer Mask button is second from the left of the buttons on the bottom of the Layers palette.) At step 8 you load the saved selection from earlier in the tutorial. When you reach step 9, with the new fill layer highlighted and the mask thumbnail selected, the effect of filling that selection with black isn't that you see black when you fill the selection. You're not filling it with black as such. You're filling it with the color that represents a portion of that layer where the mask has been removed, allowing you to see through to the layer below.

One slightly confusing bit is that when you highlight a layer containing a mask and then select the mask portion of that layer, the two colors on the Tools palette are arbitrarily reversed. Don't let that throw you. Just remember than when you fill, you want to fill with black regardless of whether or not black happens to be the foreground or background color.

Hope this helps... :)
Oct. 21st, 2006 05:00 am (UTC)
Found this through LifeHacker. This is pretty nifty. I tried this out in Gimp (with your image just to see if I can make it through). Gaussian blur (with radius of 2 or 3) worked well for me.
Oct. 21st, 2006 05:10 am (UTC)
Hey, that's excellent. I take it there was nothing unusual in making the translation from Photoshop to GIMP?
(no subject) - camomiletea - Oct. 21st, 2006 06:06 pm (UTC) - Expand
(no subject) - aquamarcia - Oct. 21st, 2006 08:40 pm (UTC) - Expand
Page 1 of 2
<<[1] [2] >>
( 45 comments — Leave a comment )

Latest Month

February 2019


Powered by LiveJournal.com