Instead, I decided on a stock image which seemed manageable to remove the background easily enough… Or so I thought at the time. My plan was to use the Pen Tool to create a Mask and remove it from the background. I realized quickly (well, actually not that quickly) that this particular item was way too complicated for the Pen Tool treatment.

Here's the Tree Stock Image I started with.

All I wanted was the tree; the sky and ground had to go, including the sky behind the tiny little branches. Now, because this was for a printed poster, the image is large, and has to be very detailed even when viewed close, so there wasn’t much room to fudge the details; I needed to remove the sky from behind each and every branch…

My first attempt was to use the Pen Tool and try to mask out the tree. But after 3 hours of work, this is all I had done…

Cellphone photo of Tree Mask using Pen Tool.

This was just ridiculous, at this rate I would have been masking out this tree for 6-7 hours and been less-than-satisfied with the final result; because of this, I gave up immediately on this method (scratch 3 hours from my life… but better to save the rest than continue on with a poor method).

I ended up using Channels to do the task, and it turned out better than I thought it ever would!

How to use Channels in Photoshop:

I’m using Photoshop CS3 to explain this, but the method is very similar across the entire CS – CS5 tree (no pun intended).

Step One:

With an image (preferably the one you are trying to remove an object on) opened in Photoshop, choose Window – > Channels if it’s not already open. By default, the panel is tied in with the Layers panel.

Click on Window -> Channels to open Chennel Menu

Step Two:

Find which Channel gives the most contrast between the foreground and the background by clicking on each one Red, Green and Blue one at a time; the more contrast there is, the better your results. In my case, Blue turned out to have the most contrast.

Find the Channel which offers the most contrast

Step Three:

Using the Magic Wand Tool with a tolerance of 50 I clicked on the tree. The tolerance settings may need to be adjusted depending on your image, however this worked well for me. It did though also pick up the ground:

Select the Tree using the Magic Wand Tool with a 50 Tolerance

I simply used the Rectangle Marquee Tool to unselect the ground, leaving the tree the only selected object.

Step Four:

Head over to the Layers Panel by Clicking on Window -> Layers. You will see the image has returned to full color, yet the tree is still selected. Then it’s just a quick click of the Mask icon in the Layers Panel.

Click on Layers Panel and your object, in full-color is now selected.

Click the Mask Icon and watch the background disappear

That’s it! 5 minutes of work beats hours and hours every time!

I was then able to use the tree in my final composition, and the space between branches showed the design elements behind it!

Final Composition

]]> http://www.orkron.com/using-channels-in-photoshop-to-remove-backgrounds/feed 3 http://www.orkron.com/website-planning-checklist http://www.orkron.com/website-planning-checklist#comments Wed, 21 Apr 2010 17:44:45 +0000 Orkron http://www.orkron.com/?p=1246 One of the best things you can do when planning a site is to get the client involved. Forcing them to confront, and iterate, their expectations can save you time (and money) down the road. The best way to do that is to listen to them. The following is designed not to be a hard-and-fast checklist, but a tool to stimulate thought, and, from that, to stimulate conversation.

You can either give it to the client to fill out in advance of a meeting or simply use it as a guide while you talk to them. It is best for small- to medium-sized projects.

Website Planning Checklist:

1. What is the primary goal of your web site? (generate sales, give information, etc.)
2. Who is your target audience or demographic?
3. What do you think your audience will be trying to achieve or receive from your site?
4. Please list the names of five other sites that you like. Why are they attractive to you?
5. What is the deadline for a new site? Why?
6. Who are your competitors?
7. From visiting your competitors’ websites, or those in a similar field, what are some aspects you like and would like included on your site?
8. What type of content would you like to include?
   • Text
   • Images
   • Audio
   • Video
   • Blogs or Forums
9. Is the content already created? If not, who will create the content?
10. For describing your company on the web, what sets you apart from your competition—what makes you special?
11. What content will need to be updated and how often? Who’s going to do the updating?
12. Do you have existing brand elements (logo, business cards, letterhead, etc.) that need to be incorporated or that can be provided as brand representation?
13. Will you be using existing brand colors? Do you have a color scheme you’d like to use?
14. In addition to the Home Page, what will be your other content pages? (About Us, Services, Products, Press Release, Blog, Links, Location, Contact Us, Directions, Site Map, etc.)
15. When someone looks at your Website, what words would you like people to associate with it? (fun, funky, conservative, trustworthy, informative, etc)
16. Is there a theme you’d like to use?
17. Do you have a specific style of design in mind?
18. Would you like a search engine on your website?
19. Would you like to sell products on your website? If so, are you already set up to accept credit card payments?
20. List the words your target audience will use to find you on the web.

If you’d like a printable version of this list, you can download the Word file here:
Website Planning Checklist (121)

About the Author:

Stuart Phillips is the Business Development Director and Project Manager at Bravo Web Solutions, a full-service web development company in Eugene, Oregon. He specializes in putting the internet into human-speak, so clients can grok it. www.bravoweb.com (888) 772-7286

Today I’m going to walk you through the steps to create a StickyNote paper with realistic shadow using Photoshop CS3. This tutorial will work with any version of the Creative Suite too, you’re tools may be located slightly different however. I also have the Photoshop CS3 file for download at the end if you’d prefer to work on the original.

Steps to create StickyNote:

Step One: Creating the Document
1. Create a new document (File -> New), make the dimensions 800×600 pixels (72 dpi is fine for this tutorial).
2. Create a second layer, fill the first layer with white, and in the second layer create a rectangle as shown.
3. I used #f9f498 for the Sticky Note color.

Step Two: Adding a Drop Shadow
1. Double-Click on the Sticky Note layer to open the “Layer Style” dialog box – Or select the layer and choose Layer -> Layer Style -> Blending Options to open the dialog box.
2. Click on Drop Shodow on left, and make settings similar to image below.

Step Three: Separate shadow from Sticky Note layer
1. On the Layers panel, with the FX expanded, right-click on Drop Shadow and choose Create Layer

Now you will have 3 layers: A background (white) layer, a Shadow layer, and a Sticky Note Layer:

Step Four: Curving the Paper
1. Select the Sticky Note layer in the Layers Panel
2. Choose Edit -> Transform -> Warp
3. Click and drag the individual vertices to pull and push the “mesh” until the bottom two corners look slightly longer and higher than before.

This is about what yours should resemble:

Step Five: Changing the Shadow
1. Select the Shadow layer in the Layers Panel
2. Change the Fill percentage to 40% in the Layers Panel
3. Choose Edit -> Transform -> Warp
4. Click and drag the individual vertices like before to change the shadow slightly.

This is where you should be:

Step Six: Adding a sheen to the paper for the “bend”
1. Double-Click on the Sticky Note layer to open the “Layer Style” dialog box – Or select the layer and choose Layer -> Layer Style -> Blending Options to open the dialog box.
2. Click on Gradient Overlay on the left side
3. Click the default Gradient color (not the drop-down arrow though) to open the Gradient Editor window.
4. In the Gradient Editor window, the Type should be Solid, the Smoothness should be 100% as shown
5. Click in the gradient panel area to create a third keypoint in the gradient
6. The outside 2 keypoints should remain #f9f398
7. Change the color of the middle keypoint to #faf7c1
8. Drag the middle keypoint to the left to Location: 24%
9. The Smoothness Transition diamond should be at Location: 30%

Click Ok, and Ok again to lock in the effects. Here’s how yours should look:

Step Seven: Adding some text
1. Create the text “Buy Milk” – I used Comic Sans in a dark blue color and enlarged it to fill up more of the note paper.
2. Rotate the text slightly so it appears to be hand written. To rotate the text, select the Text Layer in the Layers Panel and either CTRL + T (CMND + T on a Mac), or choose Edit -> Transform -> Free Transform. Then hover the cursor over the corner until the cursor changes into a rotate icon. Simply click and move the mouse until the desired rotation is obtained; let go of the mouse.

You could stop here, but I wanted to make the text look less perfect, like a ballpoint pen with ink issues

Step Eight: Distressing the Text
1. Rasterize the type by clicking the Type Layer in the Layers panel. Either right-Click the layer and choose Rasterize Type, or click Layer -> Rasterize -> Type. This makes the layer a bitmap image rather than an editable type layer.
2. CTRL + Click (CMND + Click on Mac) the icon for the text in the Layers Panel to select all the contents of that layer (in this case it selects around the lettering).
3. Click the Mask icon on the bottom of the Layers Panel, or choose Layer -> Layer Mask -> Reveal Selection.

Step Eight (Continued): Distressing the Text
1. Select the Brush tool
2. Right-Click on the art board – the Brush Tools window will open, I chose the Brush “Dry Brush Tip Light Flow” Leave the size at default of 66.
3. Make sure the foreground color is black.
4. Lightly click, and drag in short lines to create the effect of the ink being thin. You are removing the mask in small scratches, revealing the Sticky Note below. The reason to use this method is that if you don’t like the results, change the foreground color to white and brush again to re-reveal the ink. his is the preferred non-destructive way.

Final Result:

And as promised: Download StickyNote source file (641) – Zip .PSD 400KB

This will really just cover how to add a pattern to the text, without much fuss or sweat; I did notice that the pattern I chose turned out to not work great in this instance, so be careful on the pattern you choose beforehand to make sure it will tile well (within text).

Okay, let’s get started: First off head over to a really kool site Patternwall.com to find a good tilable pattern.

Patternwall has a really neat system for picking a pattern, simply click on a swatch to see it tiled:

and click the download text to download the pattern you want; I chose to open this JPG file with Illustrator since that’s where we’re going to using it.

So this is your swatch opened in Illustrator – some swatches from Patternwall.com are bigger than others.

So at this point we want to convert this rasterized, 72 dpi image into a vector image with points/paths etc. We are going to use the Live Trace function to achieve this, but before you go hitting the “Live Trace” button on your toolbar there, we need to approach it from a better angle:
With the pattern image selected, click on Object -> Live Trace -> Tracing Options:

And you get a dialog box that pops up like so:

Choose “color” as the mode, and the default of 6 colors is fine; if you check the “preview” box you will see the output results on your screen – this is very handy when playing with something and not knowing the best results beforehand.

When you see the results you like, hit the “Trace” button in the box; the dialog box will disappear and you will be back on the main stage of Illy. Close to the upper-right of the toolbar has a button labeled “expand”. while the traced object is still selected, click on Expand.

Now open your Swatches palette by clicking on Window -> Swatches if it’s not already open.

Drag the expanded object from the stage into the Swatches pallet. This makes a swatch from the selected artwork.

Now start with a blank document – we’re going to type out some text.

Once you have your text, keep it selected and make sure the “fill” not the stroke is selected on the main toolbar. Then click on the pattern we created in the Swatches pallet.

The pattern is applied to the Fill of the text, but the first result isn’t ideal. We are going to transform the pattern inside the text to find a better fit.

Open the Transform dialog box by clicking on Window -> Transform.

For this step we want to make sure we transform only the pattern and not the object. In the upper-right corner of the Transform box there is an icon that looks like 3 lines and a downward-pointing triangle. Click this and choose from the dropdown menu “Transform Pattern Only”

You can play with the numbers until you get a result you like.

Adding a stroke to the outside of the text will help it stand out from any background you may be using.

I wasn’t too thrilled with the pattern at the very end so decided to try another pattern from Patternwall; here is the final result:

There is a lot you can do with this feature, and the text is completely editable so can be changed to read whatever you like. I hope you found this useful.