The Portfolio of Mary McCutchen » Photoshop

Photoshop Tutorial #4: Blue to Real

Mary — Mon, 01 Mar 2010 17:41:29 +0000

Sometimes, you’ll find a great image that just isn’t the right color. Blue can be a hard one to get rid of. Here’s a quick and easy tutorial that can help!

From to

Follow the link below…

1. I started with this image from Firefly, of River holding Simon’s hand. It’s way too blue.

2. First things first, I duplicated that layer and then went to my Hue/Saturation panel (either Command/Control-U, or Image-Adjustments-Hue/Saturation) and lowered the saturation to -58. We’ll punch up the color again later, but for now, having less blue to work with means less blue to get rid of.

3. Next, I duplicated the less-saturated layer, and opened up my Color Balance (Image-Adjustments-Color Balance) panel. I know a lot of Photoshop users will argue for Curves, and curves does a good job for overall color shifts, but isn’t easy to use. I’ve found you can achieve much more subtle coloring with the Color Balance panel. I lowered all the blues and shifted them to yellow, and took the cyans into red. Here are the settings I used:

I ended up with this:

4. Duplicate the layer again. To brighten it, I changed the levels (Image-Adjustments-Levels). I used the settings below.

And ended up with this:

5. While nice, I felt it needed a bit more. So I duplicated the last layer, and set it to Soft Light, opacity 100%. It ended up looking like this:

That’s it! It’s super-easy. This technique can be used to get rid of any color. Obviously, your settings will never be the same, but if you play around with it, you’ll find something that works for you.

My final layers panel:

Photoshop Manipulation: Fallen

Mary — Mon, 01 Mar 2010 16:41:28 +0000

A new Photoshop manipulation. This one didn’t start with the people or the clouds in the picture.

Here are the pieces:

Images from here, here, and here, respectively.

Click below to see the final product…

Online Photo Editors, CSS stuff

Mary — Mon, 08 Feb 2010 17:00:46 +0000

Collection Of 10 Professional Web Based Image Editors | Graphic and Web Design Blog -Resources And Tutorials

From 1stWebDesigner.com. These are resources that every designer should have, cause you may not always have Photoshop on hand. I've been a fan of Pixlr for a while, but I'm definitely going to give the other editors a shot.
CSS3 Techniques You Should Know

From SixRevisions. Especially notable for the inclusion of drop shadows and column counts. You can create multiple columns with older CSS (as you can see in my sidebar), but this is a great new way.

(tags: css3)
15 Fantastic Finds on the Google Code Repository

This from SixRevisions, a neat list of some useful stuff.

(tags: code,)

Online Photo Editor: Pixlr

Mary — Fri, 21 Aug 2009 17:59:36 +0000

While away from my own computer the other day (and, therefore, away from Photoshop), I was looking for an online photo editor. Most of what I came across wasn’t worth it. I couldn’t copy or paste bits and pieces of my photo.

Enter Pixlr.

It’s a Flash-based photo editor that works almost like Photoshop. Of course you don’t get the power and all the features of Photoshop, but for someone who can’t afford it or doesn’t need it on a daily basis, Pixlr is a really cool little editor. I was able to do the quick edits I needed without waiting for hours until I got home.

Check it out here, and donate to them if you enjoy it.

Rivers of Praise Ministries website is live

Mary — Mon, 10 Aug 2009 15:26:22 +0000

As of Saturday, the website for Rivers of Praise Ministries is now live.

A custom WordPress template was created, to allow for easy updates. The layout was designed in Photoshop.

Visit Rivers of Praise Ministries.

Photoshop Tutorial #03

Mary — Mon, 22 Jun 2009 04:13:18 +0000

in 12 steps with Photoshop CS2. Can be easily translated, semi-Newbies to Advanced.

	*Step 1:* I chose this image of Claire from Lost. I’ve cropped it already, obviously.
	*Step 2:* The first thing I usually do with all my icons is work with the levels, which is like working with the brightness and contrast, but gives you more flexibility. Duplicate your base, Sharpen it once (Filter-Sharpen-Sharpen) then open up the Levels pallette (Image-Adjustments-Levels). Play around with your base until you find something you like. Here, I only darkened the image a bit.
	*Step 3:* She’s looking a little old, so I duplicated the newly edited layer and smoothed out her skin with the blur tool. It’s barely noticable here, but you’d notice it later.
	*Step 4:* I duplicated the blurred skin layer and set the mode to Soft Light, Opacity 100%.
	Step 5: The blues are a little too bright for my taste, so I duplicate the blurred skin layer again and blurred it (Filter-Blur-Gaussian Blur, set to 2.0). Then, I erased most of what covered her skin (it doesn’t have to be perfect) and set the layer to Linear Burn, Opacity 38%.
	*Step 6:* Select the entire icon, Copy-Merged, and paste the whole thing onto a new layer. I then duplicated it. Now, I mess with the saturation a tiny bit (Image-Adjustments-Hue/Saturation, lower the saturation to -25).
	*Step 7:* Too much yellow and green, so I duplicated the desaturated layer and opened up the Color Balance pallette (Image-Adjustments-Color Balance). In Midtones, I upped the blues, cyans, and magentas. Highlights upped the reds and magentas, while Shadows played up the blues and cyans.
	*Step 8:* After all that work, I dupliacted the colored layer, and opened the Hue/Saturation panel again, this time lowering the saturation to -42.
	*Step 8:* I duplicated the desaturated layer, and desaturated it (Image-Adjustments-Desaturate). I also played with the Levels quite a bit to make it more contrast-y. I set this layer to Multiply, Opacity 36%.
	*Step 9:* To up the colors a little bit, I selected the entire icon, Copy-Merged, and pasted it into a new layer. Then I set this new layer to Soft Light, Opacity 60%.
	*Step 10:* I Copy-Merged all the layers again, pasted it into a new layer, and smoothed out minor imperfections (such as the harsh angle of her cheek and pixels in the sky) with the blur tool.
	*Step 11:* Text! Very simple, white text at the top. The X is the font Hans Hand, and "little girl lost" is in Jane Austen, both of which can be found at dafont.com.
	*Step 12:* You can leave it like above, but I went one step further and created a new layer, filling it with #ffebd5. I set it to Multiply, Opacity 60%. And Voila! We’re done!

Photoshop Tutorial #02

Mary — Wed, 03 Jun 2009 01:54:39 +0000

Photoshop Creative Suite (any version).

	Layer 1: We’re gonna start with this picture. I’ve cropped it already, and as you can see, I’ve placed it so there’s extra space on one of the sides. Not really what I want, so we’re gonna fix it.
	Layer 2: I’ve duplicated the layer, sharpened it once (Filter-Sharpen-Sharpen), and adjusted the levels (Image-Adjustments-Levels) a tiny bit.
	Layer 3: Duplicate your sharpened layer, and desaturate it.
	Layer 4: I took this texture by , desaturated it, and erased everything that covers the icon itself, which gave me something like…
	Layer 5: I created a new layer, and filled it with #001F3B, and set it to "Difference" at 100%.
	Layer 6: I duplicated the first sharpened layer, and cut out Willow and Giles using the Polygonal Lasso Tool (though however you like to cut stuff out will work). It doesn’t need to be perfect. I set it to "Screen" at 100%.
	Layer 7: Finally, I took the first sharpened layer again, and set it to "Overlay" at 63%. And voila! You can add text if you’d like or leave it as is.

Disclaimer Stuff: Please don’t steal the icon and claim it as your own. These ideas are for you to maybe use on your own stuff.
Comments are love!

Photoshop Tutorial #01

Mary — Mon, 01 Jun 2009 01:17:49 +0000

This is a fairly easy one that has a lot of dramatic impact. We’re gonna be going from
to in Photoshop (any version. There are no special steps, from what I can tell)

	Layer 1: We’ll start off with this picture. It’s a great shot, but the quality is horrible, which is a real shame.
	Layer 2: To fix the blurriness a bit, duplicate the layer once, then sharpen it once (Filter-Sharpen-Sharpen).
	Layer 3: Duplicate the sharpened layer, then take your smudge tool (I used a soft, round brush at size 5) and go over the background areas to make the foreground stand out more. I went over everything behind River, plus the side.
	Layer 4: Duplicate the smudged layer, and desaturate it (Image-Adjustments-Desaturate).
	Layer 5: Now duplicate that layer, and blur it. I used Gaussian Blur (Filter-Blur-Gaussian) set at 1.9.
	Set your blurred black and white layer to ‘Overlay’ at 100%. While it’s kinda interesting as it is, especially if you want something dramatic and striking, I felt it needed something more.
	Layer 6: Go back to your sharpened colored layer, and cut out the swingset (or whatever item you’d like to use). Copy and paste that item above your blurred black and white layer.
	Also, kinda interesting, but it needs a bit of text.
	Layer 9: Using Courier TT, size 6, I type “let it burn” and angle it, which makes it look crooked and dirty.
	Layer 8: The “burn” is a bit hard to see, so on a new layer right beneath it I cut out around the text with the lasso tool and fill it with white.
	Layer 7: Add the lyrics from “Walk Through the Fire” (from Buffy: Once More With Feeling), set at Courier TT size 3, on the layer beneath your little strip of white. Set the opacity to 17%, and you’re done!

Please note, this isn’t here so you can go and make an exact duplicate of this icon. But if you do try these techniques on your own, please post it in the comments. I’d love to see it!
This tutorial was originally posted January 05, 2006.

View All Tutorials Here