Convert for Smart Filters

After you've typed your text, select the layer and go to Filter > Convert for Smart Filters. Your layer is now turned into a Smart Object.

Apply any filter

Now you can apply any filter, with the exception of Lens Blur (don't ask me why), and the text will remain editable. However, text has a flat color and so apart from the Distort and Blur filters, applying filters such as the Artistic filter will not always give you the result you're hoping for. You might try to make the layer a bit more interesting material first before applying certain Filters. You can do this by adding some Layer Effects first, because the Filters will be applied to the layer including the Layer Effects.

Add Layer Effects

You can either add Layer Effects first before you convert your layer into a Smart Object or you can double click the Smart Object thumbnail on your layer in the Layers panel and add a Layer Effect from there. To do this double click the right side of the layer that holds your text (in Smart Object mode).

In this mode the Filters applied on the text will not be shown. Same when you transform the text. Photoshop will warn you that the Smart Filters applied to this layer will be temporarily turned off and they will be applied again after the object has been transformed.

Go as far as you want to go

You can go as far as you want to go. Remember you can keep on experimenting with Filters and Layer Effects, and you can edit your text. Here is how my Layers panel looks after my little experiment:

Now it's your turn. Have some fun :)

This isn't 1999 anymore where the web was filled with splash screens and large intros you couldn't skip. It was Jakob Nielsen who said that 99% of Flash is bad and while he had some valid points his advice is always a little too harsh for my taste. But like anything else in life it isn't the technology that is bad it is the execution.

It's all about the user experience

When you start thinking about any good user experience for the Web, it's important to evaluate the needs of the project. I personally believe that a good Web experience should be transparent so that the users can focus on his or her goals rather than trying to grasp the interface. A perfect example of a good Flash user experience is this Swedish site from IKEA about closets.

Another fantastic user experience is found in the game "Get the Glass" created by North Kingdom, the agency where Robert Lindström works.

How to decide?

If I'm working on a project where Flash is involved I try to think in terms of user experience and usability first. I will question the purpose: do we need Flash to be able to do this or that? If we have a choice and we choose to use Flash will it enrich the user experience? Will it improve usability? In some situations where the choice is open and the options are as good as even to go either with Flash or not, the most logical option for me will be not to go with Flash. If using Flash brings a lot of added value for the user experience, then Flash will be my prefered choice, of course, as long as the usability doesn't get affected by it. It is the designer's job to make sure it doesn't. In fact with the freedom Flash gives you there comes great responsibility. Flash gives designers the ability to create complete new interactions and behaviors and it is just that what makes it hard. You have to think long and hard if the users will find this natural and expected behavior when creating these. If they aren't consistently implemented problems will rise. All in all, it's the excecution that will make it stand or fall. I believe Flash has its place. I don't see it as the "bad" way to design a site. I just think that each project should be carefully thought trough and it's wrong to just blindly decide that an entire site should be Flash based without even considering HTML/CSS.

Not being able to bookmark a webpage within a Flash site and not being able to use the browser's back and forward button is one of the dissadvantages of Flash in terms of usability. I did some research and it seems possible to have the back and forward browser button working. Back in 2001 Robert Penner experimented and found a solution to make this work, but it requires an HTML hidden frame that interacts with Flash and vice versa. So not really ideal. Today there are a few newer techniques already out there. One of them I found is Deep linking for Flash and Ajax from SWFAddress.

Is Flex any better?

I'm no expert but Aral Balkan is, and from what I read in this article there is still a bit of a way to go. For example:

The State of Accessibility in Flex

• Accessibility is not enabled by default for Flex applications (ideally with a note stating: "We will be changing this in the next release.")
• Accessibility in Flex is optimized for JAWS on Windows. (This is not necessarily a bad thing; better to have great support for one accessibility aid than shoddy support for several.)
• JAWS users will need to install additional scripts to take advantage of advanced accessibility features.
• Accessibility is more than adherence to standards and screen-reader support. For a full discussion, read Accessibility Best Practices for Flex.

Flash as complete site builder tool

One of the emails I talked about was from a person who is developing a flash platform that allows people to easily create a website. One of the questions that the person in question raised after my response that I wasn't interested was:

But if a graphic designer, new or experienced, could become a true web designer without needing to learn any code or html marking and still have the accessibility options that we are working on right now for out next mini version and all the "your own designs" upload capabilities, and with that being able to create almost any kind of website or online presentation for his customers – wouldn’t that be great?

This makes me think about the WYSIWYG applications and the promises that you can create a site without even touching a single line of code. This approach is broken in my humble opinion because if you want to call yourself a *true web designer* you got to have an understanding about what is beneath the graphical layer. A machine, how good it made be, will never have the capability to think like a human. It already starts with separating content from presentation. When I start the web development process I always start with thinking about structure first and the implications it may have.

Would any web designer want to learn code when he or she doesn’t have to when he/she knows that anything he creates in our flash platform has an HTML mirror for Seo and accessibility needs?

Same problem as above. How can you truly be good at it when you don't understand the technologies behind it. Every site and project is different and needs a different approach. A machine can't decide these things for you. Take the validator for example: your page can validate just fine when your structure is fundamentally wrong. I can't imagine a Flash application that takes all this in account. Even if it would be possible it would have to come with a questionnaire that takes every accessibility possibility in account. Hell, it's already difficult for an experienced person to understand and execute things wisely.

What features do we need in our flash platform to give the future web designers a truly strong design tool to compete with css?

It isn't about competing with CSS but about using the right tool or options for the right project. Like I said, to me personally it is impossible to build such a tool that thinks and behaves like a real human. A human that worked hard to understand web design in all its aspects. If that tool was there it would take a considerable amount of time to have enough input so that the Flash platform completely understands the situation. The only way my brain sees that possible would be in the form of a questionnaire and even than it isn't ideal because things sometimes change along the way and you have to adapt.

It's a great step in the right direction that the owner thinks about accessibility when developing this Flash application, but I have to disagree that it would ever become a replacement for a true web designer. To me this sort of thing belongs in the amateur world and should never promote itself as the solution to become a web design pro without study.

If you have no idea what I'm talking about, then here is your chance to start to learn about all this.

Why Web Standards

Learn what Web Standards are and why you should use them in every site or web page you build. Most of these articles are old but the benefits are still valid if you start coding the best practice way.

• To Hell With Bad Browsers
• The Business Value of Web Standards
• Why tables for layout is stupid
• The benefits of Web Standards
• A Web Standards Primer

Starting

Get started and turn the knowledge you've learned into practice by using CSS for layout. If you have no clue where to start this adventure you'll find these links handy I think.

• HTML Beginner Tutorial
• CSS Beginner Tutorial
• HTML Intermediate Tutorial
• CSS Intermediate Tutorial
• HTML Advanced Tutorial
• CSS Advanced Tutorial
• W3.org
• Westciv (creators of Stylemaster)
• Excerpt Build Your Own Web Site The Right Way Using HTML & CSS
• SitePoint CSS Reference

Lynda.com (video based tutorials - paying)

• CSS for Designers with: Andy Clarke and Molly E. Holzschlag
• CSS Web Site Design with Eric Meyer
• CSS2 Essential Training with: Christopher Deutsch

Books

There are a lot of good books out there and this is just a small selection of them that I think are well suited towards beginners.

• Designing with Web Standards (2nd Edition) by Jeffrey Zeldman
• Build Your Own Website The Right Way Using HTML & CSS by Ian Lloyd
• Beginning CSS Web Development: From Novice to Professional by Simon Collison
• HTML Dog: The Best-Practice Guide to XHTML and CSS by Patrick Griffiths
• Mastering CSS with Dreamweaver CS3 by Stephanie Sullivan, Greg Rewis
• Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition) by Dan Cederholm
• Transcending CSS: The Fine Art of Web Design by Andy Clarke
• The Principles of Beautiful Web Design by Jason Beaird

CSS bug fixing

This is one of the things that a good web designer has to go through each time he or she codes a page using CSS for layout. Following Web Standards is the way to go and it should be an obvious choice when you take your job serious. Today I want to share some of my thinking process and the steps I usually go through when I'm at this phase of the process. But before jumping on the bandwagon to fix things consider these criteria...

Make sure your markup is well structured

Make sure your markup is well structured, in other words use the appropriate markup for the appropriate content. Use headings for titles, paragraphs for blocks of text, ordered and unordered lists to sum things up in list form or for your navigation, fieldsets in combination with legend and label elements for forms... Last but not least, use tables only for what they're meant for, tabular data.

Validate your markup

It's not just about the green check mark in the bottom right hand corner of your browser or 0 errors or warning on the W3C Validator that matters. This is only an extra check and a confirmation that your code validates. The W3C markup validator or W3C CSS validator should be your tools for sure. Tools that help you create the right coding, but keep in mind that this is just a machine that runs a test for you. Certain coding mistakes, such as using the wrong or structure-less code for certain content will not be seen as a mistake by this machine, so make sure this is in order. Validating your pages is an absolute requirement before you start to fix any CSS layout problems.

Fixing for IE 6 and/or 7

Ok, your code is well structured and your page validates. The page looks fine in browsers that follow the standards like Firefox and Safari, but you still need to fix a few things for IE6 and 7. How do you proceed? Here are the steps I usually follow. It comes down to analyzing and trying to isolate the problem...

Isolate the problem via XHTML

You can try to disable certain blocks of code in your XHTML. Use comment tags and put certain blocks of XHTML coding in comments. View the page and see if the problem is still there. Do this block by block starting with the bigger ones: left column, right column, content, header etc. At a certain point chances are you see your problem disappear. If you commented out a big block of content, uncomment smaller nested blocks of content now to isolate the problem until you have as less code in comment as possible.

Isolate the problem via CSS

Isolating the problem via XHTML is not always an option and so you can also try to disable certain properties of styles or certain styles all together to see what happens. Some styles might interfere with other styles. Some styles need to be more specified before they have effect because they've been overwritten by another style etc.

Everybody has his or her own method to try to solve things and we all have our favorite tools. Mine are Adobe DreamWeaver for the HTML coding in combination with CSSEdit for my CSS styling. Especially CSSEdit's Preview feature in combination with the XRay mode has saved me a ton of time. When you are in XRay mode you simply select an element, and you'll see its margins and padding (if any) and the space this element takes. At the top of the Preview page you see the all the parent elements with classes and id naming etc. All of them are clickable as well. In the Inspector panel you'll see all CSS styles that apply to the selected element. Clicking on one of the styles in the Inspector panel will open the CSS stylesheet (if it's not open yet) and will bring you to the selected style. You can preview URLs and import the styles and use the overwrite method. I use that a lot when I try to help someone out. When you need to experiment while you debug, you can use the Milestones feature. Compare this a bit with the Snapshot function in the History panel of Photoshop. I say this is pretty neat stuff :)

Color the background of elements

In a lot of cases div containers are jumping down or they've moved to the left or right. It might be that the div has grown in width. Try adding background colors to your divs or elements to see the exact box of space they take.

Is it a known bug?

Check the Internet Explorer vs. the Standards "list" of known bugs or check the Explorer Exposed! list. At the bottom of this article I list a few sites that are good resources for CSS bug fixing.

Use conditional comments

I always use a separate CSS stylesheet for Internet Explorer 6 and 7 and link to the stylesheet via a conditional comment. With this conditional comment you address Internet Explorer lower than version 8:

1. <!--[if lt IE 8]>
2. <link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
3. <![endif]-->

Avoid hacks

I'm using the * html selector for IE 6 specific styles and I place them in a separate stylesheet using a conditional comment that only lower versions of IE 8 will read. The rules starting with * html will not be executed by IE 7. Rules without * html are for both IE 6 and 7.

CSS bug fix resources

You'll run into trouble sooner or later and these sites can help you to figure out what's going on.

• Position is Everything
• CSS Advisor
• BrowserBugs
• QuirksMode - Bug Report - Latest reports
• CSS contents and browser compatibility
• Bugs in MSIE 7 for Windows

Start by selecting the Spiral Tool from the Toolbox and draw a spiral (click and drag). Hold down the shift key while doing that. You can also hold down the spacebar meanwhile to move the position of the object. While we are still holding down the mouse we can use the up or down arrow keys to add or remove segments of the spiral shape. Once you're happy with everything release the mouse, then the shift key.

Select the Ellipse Tool from the Toolbox. With exception of the arrow keys, the same keys can be applied: use the Shift key for a circle, use spacebar to put the circle in position. Release the mouse, then the shift key.

Draw sperm head

Draw 2 other circles as shown in the image above. Us the Shift key and the Spacebar again while dragging to position them in the correct spot.

Now select the Scissors Tool and click on the 2 intersections as shown above. Select the Direct Selection Tool (white arrow) to select the segment of the path you've just cut and hit the delete key (once or twice depending on how you've selected the path) to get rid of the path segment.

Repeat the above steps for the other circle: click the 2 intersections using the Scissors Tool and delete the path segment.

Select the Direct Selection Tool (white arrow) and select the 2 intersecting points on the smaller circle: click on the first point, hold down Shift and click the 2nd point. Hit command/control + j to join both points (Object > Path > Join). Do the same for the other 2 points. You might need to lock the spiral first to be able to proper select both points: select the spiral shape and go to Object > Lock > Selection or hit command/control + 2. Don't forget to unlock the path again when you're done Object > Unlock All or just hit command/control + alt/option + 2.

Select the Selection Tool (black arrow) from the Toolbox and select the smaller circle and the other object that forms the shape of the sperm head. Go to the Pathfinder panel (Window > Pathfinder) and option/alt click the Add to shape area option. Turn the stroke into a filling by toggling the arrow/switch icon above the Stroke and Fill at the bottom of the Toolbox. Now select both spiral and sperm head and duplicate the object by holding down the option/alt key while dragging the object.

Create the other side of the spiral ornament

Double click the Scale Tool and uncheck the Scale Strokes & Effects option. This way when we scale the object the same stroke weight will be remained. Scale the object down to almost 1/3 of its original size.

Place the smaller spiral into position as shown above and delete 2 segments of the spiral. Move the ending point of the bigger spiral using the Direct Selection Tool (white arrow). Just click in the point and drag.

Connect both spiral objects

Select the Pen Tool. Click in the ending point, hold down the mouse and drag into the direction of the smaller spiral as shown in the image above on the left. Now click the in ending point of the smaller spiral while holding down the mouse and dragging upwards as shown in the above image on the right. If the path isn't perfect you can select the Direct Selection tool, click in a point to select it and tweak the curve by moving its handles.

Create a Symbol

Ornaments are usually elements that you'll use more then once in your design. It's useful to create a Symbol from your creation. This way you not only save yourself time it'll also keep your file low in size. If you are familiar with Adobe® Flash you'll know what Symbols and instances are. It's exactly the same in Illustrator. Even the shortcut used to create a symbol (F8) from an object is the same. Symbols are reusable objects which are stored in a Symbols Library. You can create your own libraries of Symbols or you can explore the many libraries that come with Illustrator accessible via the panel's menu. Just click the top right arrow icon on the panel: Open Symbol Library. There is a whole bunch to explore.

To create a Symbol you simply drag the object into the Symbols panel. To reuse it you drag it from the Symbols panel onto your canvas. To edit a Symbol, just double click it in the in the Symbols panel. Doing this will bring you into Isolation mode. You'll see a grey bar at the top with a 'back' arrow. After you've done editing, click the arrow and your Symbol will be updated. Editing the Symbol means that all instances of that Symbol will be updated in your artwork. If you want to change an instance of the Symbol you've used in your artwork, you'll need to Expand it first so it's 'disconnected' with its original Symbol. You do this by going to Object > Expand and check the Object and Fill option. Now you can edit the paths apart from all other instances.

Cameron announced two new things that could possibly interested you and they are:

Affiliate Program

Cameron love the traffic send to Authentic Jobs as it is the reason why the site is there in the first place. The affiliate program is our way of giving back. So now you have your chance to become an authorized affiliate.

So how does it work?

The process is pretty simple. First, fill out the form below. Once you're approved, you'll be given a personalized affiliate code. Add one of our banners to your site and include your affiliate code in the link to our site.

Every time a new job is posted as a result from the link on your site, we'll pay you $75 per full-time listing and $25 per freelance listing! It's our way of saying thanks for helping us connect talented people with great opportunities.

Payments are made through PayPal and are paid instantly each time a referral listing is purchased. Interested? You can apply here.

API

If your are the type of person that loves to play around you'll love the new API. Authentic Jobs now provides an Application Programming Interface (API) that allows you to combine our job listing data with your web app, or to build an entirely new app of your own.

So how does it work?

Fill out the form below to request an API key. Upon completing the form, you'll immediately receive a unique API key. You'll need this key to use our API.

Once you have your API key, take a look at our API documentation and you're all set to begin building your own Authentic Jobs mashup. Feel an itch? Get started.

If you are an employer and you are looking for talented people give the service a spin. You won't regret it and in the case you do there is a money back guarantee.

First of all, this is not one of my typical tutorials where I explain things from A till Z. Instead, I'll give you some hints on how I created the illustration above and along the way I give you some tips on how to keep your effects flexible. Let me start with some basic information...

Create rings using the Pathfinder

If you've followed my previous article, the above image doesn't need much of an explanation since you had some practice already. Just to refresh your memory, here is how you create a ring:

• Select the Circle Tool and craw a circle (holding down shift key)
• Draw another smaller circle on top
• Select both circles using the Selection Tool (black arrow)
• Click Horizontal Align Center and then Vertical Align Center from the Align palette or Toolbar at the top
• Click the Subtract from shape area option from the Pathfinder palette and click the Expand button

Add Pucker & Bloat Effect

With the ring still selected go to Object > Path and select Add Anchor Points. Now go to Effect > Distort & Transform > Pucker & Bloat.

Move the slider to the left.

Move the slider to the right.

Experiment with the shape of the object. Try a circle, a square or a hexagon etc., add (more) anchor points, then apply the effect.

Good to know tips!

Advantages of Effects versus Filters

Remember when you apply an effect, the Effect can be modified at all time after it has been applied. You can double click the effect in the Appearance palette. If you apply a Filter however, this isn't possible. The path is permanently modified. Make sure to choose Effect > Distort & Transform > Pucker & Bloat. This way you remain this flexibility.

Only if you are 100% you won't change the result of the effect, you can choose to expand it via Object > Expand. This way the path will be adapted to its new shape. Here is what I did to achieve the effect shown in the image:

• Fill the shape with a Radial Gradient (Orange in center to yellow)
• Duplicate the Fill in the Appearance palette
• Apply white color to the duplicate Fill
• Select the Gradient Fill in the Appearance palette
• Choose Effects > Path > Offset Path.. (Offset: 24, Joins: Miter and Miter Limit: 4)
• Choose Effects > Stylize > Feather... (40 px)

Create Graphic Styles for the Effects you like

If you like the effects you've created and you want to apply them to other objects in the future, then you can create a Graphic Style simply by dragging the object into the Graphic Styles palette. You can reapply the style effect by selecting the object and then clicking the Style in the Graphic Styles palette.

Editing the appearance of an object via the Appearance palette

After applying a style to an object, you can still change the settings for each Effect, Fill or Stroke such as changing the color of the gradient, the Feather settings etc. in the Appearance palette.

Create Symbols of objects you want to reuse

It can be a good idea to create Symbols of objects you want to reuse in your design. To create a Symbol, just drag the object in the Symbols palette. To add an instance of the Symbol in your design, just drag the Symbol from the palette on the Canvas. When you change the Symbol's original object (simply double click it in the Symbol's palette), all instances of the Symbol will be updated.

Using Symbols in combination with the Spraying Tool can be handy when you create patterns and you want to keep a certain randomness. Experiment with the Symbol Tools to edit the sprayed symbols. This tool can be a real timesaver in your production process.

Dark version

No Pen Tool was used to create the above illustration. Remember, just use your creative brain and your curiosity to learn and experiment and you'll come a long way :) Enjoy!

Before you start you might activate Smart Guides (View > Smart Guides). Select the Rounded Rectangle Tool from the Toolbox and draw a shape as shown in the image above. You can modify the corners of the rectangle using the up or down arrow keys while dragging the shape. Make sure the radius of the rounded corners of the rectangle is big enough. Next, select the Rectangle Tool and draw a small vertical rectangle shape below as shown in the right-hand side image. Now select the Polygon Tool and draw a small hexagon below the small rectangle (see image above).

Select the Selection Tool (black arrow) and select the 3 shapes. Click the Horizontal Align Center from the toolbar at the top. Select the Direct Selection Tool (white arrow) and drag a selection over the bottom 2 points of the hexagon.

Resize and align the shapes

Click in one of the points, hold down the Shift key and drag the 2 points downwards as shown in the left-hand side image above. Now select the Selection Tool (black arrow) again and select the small rectangle above the hexagon. Hover your cursor somewhere on the middle of the bottom border until you get the resize cursor icon. Drag the border of the rectangle downwards so it overlaps the hexagon shape.

Finalize the grip, merge and align shapes

Select both the rectangle and the hexagon using the Selection Tool (black arrow). Go to the Pathfinder palette. If you can't find the palette on your screen, go to Window > Pathfinder. Click the Add to shape area option, then click the Expand button. Now select the Rounded Rectangle Tool from the Toolbox again and draw a vertical shape to finalize the grip of the screwdriver. Don't forget to use the up or down arrows to modify the radius. Also, you can use the spacebar to move its position while you draw the shape. Select the Selection Tool (black arrow) to select the shape you've just drawn. Now we're going to duplicate this shape. Hold down the Shift and Option/Alt key while dragging the shape to the right. Select the grip lines and group them: go to Object > Group or hit command/control + g. Now select all 3 rounded rectangles and select the Horizontal Align Center from the toolbar at the top.

Subtract shapes

With the 3 rounded rectangles still selected, go to the Pathfinder palette again and choose Subtract from shape area and click the Expand button in the palette. Hold down the Shift key and select the other shape of the screwdriver. Group both shapes into 1 object: Object > Group or command/control + g.That's it for now for the screwdriver. Now we're going to draw the wrench. Select the Ellipse Tool and draw a circle (hold down the shift key). Select the Rounded Rectangle Tool and draw a rounded rectangle shape on top of the circle as shown in the right-hand side image. Use the up and down arrow keys to modify the corner radius meanwhile you drag the shape. Use spacebar to move the rectangle while dragging.

Select both the rounded rectangle shape and the circle using the Selection Tool (black arrow) and click the Horizontal Align Center from the toolbar at the top. Go to the Pathfinder palette again and choose Subtract from shape area. Click the Expand button in the palette to expand the object. Select the Rounded Rectangle Tool from the Toolbox again and draw a vertical shape for the grip of the wrench. Then select the Ellipse Tool again and draw a small circle (holding down the shift key) at the bottom and on top of the wrench's grip. Now select all shapes of the wrench using the Selection Tool (black arrow) and click the Horizontal Align Center from the toolbar at the top.

Select the small circle and the rounded rectangle, go to the Pathfinder palette again and choose Subtract from shape area and click the Expand button in the palette. Now select all shapes of the wrench and click the Add to shape area option, then click the Expand button.

Rotate and finalize

Select the screwdriver using the Selection Tool (black arrow). Hover with the mouse on one of the corners of the selection until you see your cursor changing into a rotation cursor icon. Hold down the mouse to rotate the object and hold down the Shift key while rotating. Release the mouse and the shift key at 90°, so the screwdriver is horizontally. Click the Horizontal Align Center and then the Vertical Align Center from the toolbar at the top (see right-hand side image above).

Select the Rectangle Tool and draw a rectangle shape on top in the center of both tools as shown in the left-hand side image. Select both the rectangle and the screwdriver (use shift key in between selections, to select both objects). Go to the Pathfinder palette again, choose Subtract from shape area and click the Expand button.

Select all objects using the Selection Tool (black arrow). Hover with the mouse on one of the corners of the selection until you see your cursor changing into a rotation symbol. Hold down the mouse to rotate the object and hold down the Shift key while rotating. Release the mouse and the shift key at 45° as shown in the image above. That's it! Congratulations, you have created your 'tools' icon :)

Had a great time in New York and the huge buildings make you feel small :) Hope you'll get an idea of the NY atmosphere by these pictures.

Central Park

Columbus Circle

Small in New York City

Great Buildings

Yellow cabs

Penelope

Great breakfast place in New York.

Others

Aaron Gustafson

Having some fun :)

Apple Store NYC

Click them to see the bigger version to get the best view.

Make sure your photo is in a separate layer. Select the layer with your photo and select 'Convert For Smart Filters' in the Filter menu. There is a message window telling you your layer will be turned into a Smart Object. Click OK.

Step 2: Change color mode to Lab

Now go to the Image menu and choose Mode > Lab Color. Choose 'Don't Rasterize' in the next message window and choose 'Don't Flatten' in the second message.

Step 3: Select the Lightness Channel

Go to the Channels palette (Windows > Channels) and click on the Lightness channel. This channel contains only the detail and not the color in the photo.

Step 4: Apply Unsharp Mask Filter

Go to the Filter menu and choose Sharpen > Unsharp Mask.... Here is a rule of thumb I learned from Scott Kelby's book 'The Digital Photography Book' (Volume 1):

• For people : Amount 150%, Radius 1, Threshold 10
• For cityscapes, urban photography or travel : Amount 65%, Radius 3, Threshold 2
• For general everyday use : Amount 85%, Radius 1, Threshold 4

For my photo I used : Amount 150%, Radius 1, Threshold 10. Click OK.

Step 5: Change color mode to RGB

Choose 'Don't Rasterize' and next 'Don't Flatten' in the messages that follow, so the layer with the photo stays a Smart Object and the Unsharp Mask Filter is a Smart Filter. This way you can experiment with the Unsharp Mask Filter.

Applying the Unsharp Mask Filter a second time

Sometimes you can apply this Fitler a second time and then go to the Edit menu immediately after you've applied this filter and choose 'Fade Unsharp Mask' to reduce it back in case you use an older version of Photoshop. Be aware that this fading only works right after you've applied the filter. With the Smart Filters however you double click the Filter and edit from there.

You need to make sure you don't overdo and the photo doesn't get too hard around the edges. In my example I didn't do this, because it would have been too much as you can see in the image below.

The end result is subtle but nice

I've created an animated gif to show you the difference with and without the Unsharp Mask Filter applied:

For people using CS2 or older...

For people who uses an older version of Photoshop, you can use basically the same technique described here, except the only difference is that the Filters aren't Smart Filters. You just skip that part and use the 'Fade Unsharp Mask' under the Edit menu to reduce the filter effect if needed.

A tip I learned from reading 'The Digital Photography Book' (Volume 1) by Scott Kelby.