Retouching skin

There's a facinating discussion about the right and wrong way to retouch skin going on over on the Tutorial Blog. If you've ever grappled with this in Photoshop you might pick up a tip or two from reading the tutorial and the comments.As ever, it enforces the fact that there are several ways to approach almost every photo restoration and retouching task in Photoshop. It's no wonder confusion develops!
"The broader questions are: when retouching skin, should you eliminate blemishes with the clone stamp tool, and should you blur out all detail in the pores. The answer is ABSOLUTELY NOT on both counts. It’s bad advice; following it will limit your Photoshop proficiency rather than developing it.For skin and many other surfaces, the clone stamp tool has been almost completely superseded by the Patch tool and the Healing Brush tool. These tools are easier to use, faster, and give better results. Yes, you can simulate their effects with careful, laborious use fo the clone stamp, but you are better off just using the right tool.As others have noted, skin has pores. You can’t just turn them into mush and expect to get a believable image back. The target appearance is not a featureless, blurry surface but the appearance of fine, shallow, barely-noticeable pores. "

Is Photoshop PS3 worth the upgrade for photo restoration?

Photoshop CS3 is here at last and has some exciting new features, but is there enough to upgrade for if you use Photoshop for photo restoration?The workflow features have been improved through the streamlining of palettes and self-sdjusting docks, but the workflow and interface in CS2 wasn't exactly clunky or intrusive to begin with.Adobe Bridge has been improved too ... big deal. Most people I know don't use it anyway. I find it useful, but not essential. Adobe say it is now faster, and yeah, it was kind of sluggish, but the improvements don't sound exactly mind blowing!One new feature that is really worth a closer look, and should have made it into Photoshop a long time ago in my opinion, is non-destructive smart filters. Up until now you could only apply image adjustments (eg. levels, brightness/contrast, invert, etc.) non-destructively. With CS3 you can now apply filters, say a gaussian blur, to an image or a layer with the option of coming back later and adjusting the blur settings or removing it completely. Whether this feature will be limited to certain colour modes or a limited number of the available filters remains to be seem.I am delighted to see a feature I have desired for ages, and that is rotated/scaled cloning. I've lost track of the number of times I've cursed it's absence. Wait and see, give it a year and you won't be able to live without it!The Healing Brush tools have been improved too, which is more good news for photo restorers. Changes to the Channel Mixer and extended options for creating black & white images from colour will have obvious uses too.I reserve judgement on whether it's worth the upgrade.

CSS Media Types Create Print-Friendly Pages

Don't Create Multiple Pages or Fiddle with Scripts
You've decided to make your site "printer-friendly". You read the article on what it means to be printer friendly, but now you have to decide how you want to do it. There are several options:

1.Make a copy of every page or article - and manually remove all the non-printer-friendly stuff.
2.Use a (CGI, PHP, JavaScript, other) script to remove the non-printer friendly stuff on the fly.
3.Write a style sheet for print.

The drawback to option one should be fairly obvious to most people. It is very labor intensive and requires that for every page on your site, you create a second, duplicate page.
Option two is the most common choice right now, because it mitigates the problems of option one, and with a small change in how you write your Web pages, you can set it up for every page on your site. But if you don't have access to CGI or you just don't feel comfortable with programming, this method can be challenging, if not impossible.
Cascading Style Sheets to the Rescue
Luckily, CSS was not written with just Web pages in mind, and with just a few extra codes you can create a printer style sheet that removes all the non-friendly options on your page and even takes into account issues such as typography and readability. And you don't have to write two different copies of your page or do any programming to build it.
Defining a Style Sheet for Print
As with screen style sheets, you use the element to define the print style sheet your Web page should use:
The only difference between this link element and the link to your screen style sheet is the attribute:media="print"Most style sheets are written for the screen, so the media can be left off, or written as:media="screen"
Building the Style Sheet
Change colors to black on white.
Change the font to serif.
Watch the font size.
Underline all links.
Remove non-essential images.
Remove navigation.
Remove some or most of the advertising.
Remove all JavaScript, Flash, and animated images.
Change these rules into CSS

: Black on white with 12-point, serif fonts:
body { color : #000000; background : #ffffff;
font-family : "Times New Roman", Times, serif; font-size : 12pt; }

Underline links:a { text-decoration : underline; color : #0000ff; }
I also like to make the links blue, to stand out on color printers.
Remove Non-Essential Images, Ads, Navigation, and ScriptingThe best way to do this is to put

elements around each section of your page. For example, you might have the following sections:
top, bottom, left, and right navigation
.┼internal advertising
.┼content
.┼other elements
.┼Define each of them with a element:

Then, in your style sheet, get rid of the ads, navigation, and other information:
#navigation, #advertising, #other { display : none; }
The print.css Style Sheet
The print.css style sheet would look like this:
body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }
a { text-decoration : underline; color : #0000ff; } #navigation, #advertising,
#other { display : none; }
Save print.css in the same directory as the file, include the in the head of your document,
and your page will print perfectly while displaying however you would like.

Conflicting Absolute Positions

On two separate occasions this month, I’ve been required to produce a layout in which a fixed-width scrolling side “pane” and flexible scrolling main “pane” must resize to fill all available space in a browser window.
As a CSS purist, I’ve always tried to avoid such dynamic layouts, but sometimes they’re required. When they are, I like to have a good old grumble about the fact that I’ve resorted to using JavaScript for my layouts.
The most advanced way of achieving such a layout is to use a JavaScript toolkit such as DOJO—but for what I was trying to achieve, even DOJO felt too bloated and seemed liable to create further complications.
We can, of course, achieve these layout goals by using JavaScript to resize the divs every time the page is loaded or resized. Unfortunately—among other headaches—that’s made more complicated by the choices between window.innerHeight and document.documentElement.clientHeight and document.body.clientHeight, and the need for cross-browser event listeners.
It seems that using JavaScript is an attainable but inelegant solution for this layout. What I really want is a lightweight, easy-to-understand, pure CSS template…
The problem with percentages
We often use elements that have dynamic widths and heights by defining those attributes as percentages. But there’s a problem with percentages: they don’t play well with others. Despite everyone’s best attempts, you just can’t mix up pixels and percentages (although I’ve read rumors that it’s in the cards).
While we can create relatively effective layouts using just percentages, we can’t then have a fixed-width side panel or a fixed-height header. So percentages just aren’t going to do the job in our layout.
The nature of divs
Adopting a tried and tested philosophical technique, I went back to the basic assumptions to try and find something else I’d missed. I realized that I thought the following statements about divs were all true:
In all browsers
A div is rectangular.
Only one corner of a div can be absolutely positioned on a page.
The location of the diagonally opposing corner must be determined by the width and height of the div.
If the width and height are dynamic, they must be determined using JavaScript.
It struck me that assumption no. 2—that only one corner of a div can be absolutely positioned on a page—should be very easy to either confirm or deny. What happens if we absolutely position a div by defining its top, left, bottom, and right properties, all at the same time? After all, although I think of it as being a “conflict,” it’s actually perfectly valid CSS.
Assigning “conflicting” absolute positions
I had assumed that if you assigned top, left, bottom, and right properties that most browsers would simply ignore two of those properties.
It seemed like a fair assumption at the time. I expected some variation between the browsers, but I also expected all of them to ignore two of the four positions.
I was utterly wrong about that. What actually happens is something rather magical. In every browser I tested, with the exception of IE5 and IE6, all four rules are obeyed. The result is that the div is effectively “stretched” to fill the viewport.

fig. 1, DIV size is computed in most browsers when absolute positioning is specified.
A bit of research revealed that I’m certainly not the first person to discover this.
“In browsers that support CSS you can specify all four edges and let the browser compute the width and the height. Unfortunately this doesn’t work in Internet Explorer…”—Autistic Cuckoo
“Technically you can use both a right and a left property and leave the width as auto. But unfortunately IE does not support this…”—css-discuss
In general, this little bit of CSS trickery seems to have been discarded due to its incompatibility with IE5 and IE6, and as a result has remained largely unnoticed, although it’s nice to see that IE7 now supports these “conflicting” absolute positions.
Incompatibility doesn’t make the discovery useless. Our original statements may still apply to IE5 and IE6, but we now have a different set of statements for all other browsers.
In all browsers except for IE5 and IE6
A div is rectangular.
All four corners of a div can be absolutely positioned on a page.
If the location of diagonally opposing corners has been determined the width and height is implied.
An alternative solution for IE
What does this mean? It means our assumption that only one corner of a div can be absolutely positioned on a page creates a problem specifically for IE5 and IE6. As it turns out Internet Explorer actually offers us its own alternative. Earlier on, I said that you can’t mix pixels and percentages, but that wasn’t strictly true: you can in Internet Explorer.
Using the power of dynamic properties, it is now possible to declare property values not only as constants, but also as formulas.
Dynamic properties are undeniably powerful, but as they’re only supported in IE, they tend to be of little real use.
But, once again, incompatibility isn’t a reason for discarding this little trick. Being able to determine the width and height of our divs as a formula means we can specify “the width of the page minus 40px.” As long as we can do that in IE5 and IE6, we can modify our original assumption #4 just a little bit and settle on our final set of statements.
In IE5 and IE6
A div is rectangular.
Only one corner of a div can be absolutely positioned on a page.
The location of the diagonally opposing corner must be determined by the width and height of the div.
The width and height can be determined using dynamic properties.
In all other browsers:
A div is rectangular.
All four corners of a div can be absolutely positioned on a page.
If the location of diagonally opposing corners has been determined, the width and height is implied.
Ah! Now that’s much more like it. As long as all of the above statements are true, we really should be able to put our entire template together using (almost) pure CSS.

In modern browsers
Our CSS for all modern browsers is now strikingly simple.
We specify the width and height of the body as 100%. (This is actually only needed for our Internet Explorer solution, but there’s absolutely no harm in including it in our main CSS.)
We hide the overflow in the body and html because we never want to see those scroll bars again.
We set the overflow to “auto” for the left and right panels, and hide it in the header.
The header has a width of 100% and a constant height of 80px.
For the side panel we specify the top (header height + padding), left (padding), and bottom (padding) positions. Then we give it a constant width of 200px.
For the right panel we specify the top (header height + padding), left (padding + side panel width padding), right (padding) and bottom (padding) positions.
All of that is very easily translated into the following CSS:
Creating the exception for IE5 and IE6
In IE5 and IE6 the bottom and right attributes of the main and left panels are just ignored.
This means that the top left corner is still pinned in place for each of our divs, and we just need to define our widths and heights.
We want the height of both the main panel and the side panel to be 100% of the height of the page minus the header height and the top and bottom padding (100%-80px-20px-20px).
We want the width of the main panel to be 100% of the width of the page minus the width of the side panel, the left padding, the right padding, and the gutter padding (100%-200px-20px-20px-20px). The width of the side panel is a constant, and has already been defined, so nothing needs adding here.
By using a conditional comment we can include these expressions for IE5 and IE6. (Line wraps marked » —Ed.)
Don’t forget: we specifically had to set the height and width of the body to 100% for this to work, but we didn’t need to hide that from other browsers, so it’s included in the main style sheet.
Beautiful
And there we have the finished layout.
Okay, those dynamic expressions aren’t valid, but they are at least hidden from the browsers that don’t need them. Although they’re presented as CSS those dynamic expressions are in truth JavaScript, and as such they won’t work in IE5 and IE6 if JavaScript is turned off.
But then, none of the alternative solutions would work in that situation either.
{Although this technique was developed independently, an article that suggested many of the same methods was published in 2004 by Alex Robinson. —Ed.}
Known issues
There’s a small and annoying bug in Opera 8. Although the side div resizes correctly when the page first loads, it doesn’t dynamically resize when the window size is changed.
This seems to be because we’ve given it a constant width, and I have, so far, been unable to find a way around this issue. Happily, it’s fixed in Opera 9, and it isn’t a particularly critical bug to begin with.

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

Progress always comes at a cost. In the case of web browsers, users bear the cost when developers take the rendering of certain authoring tools and browsers (especially Internet Explorer) as gospel. When a new version of that browser comes along and fixes bugs or misinterpretations of the spec (or introduces new ones) or in any way changes behavior, sites break and our clients, bosses, and users get very unhappy.
We could spend hours explaining why our sites broke, but wouldn’t it be better if they didn’t break in the first place?
A little background
Building on the momentum created by the release of Internet Explorer 7, which included major advances in CSS support, the IE team began work on a completely new rendering engine for IE8—one that followed the CSS 2.1 spec as closely as possible. The culmination of their efforts is a browser capable of rendering the Acid2 test accurately. For those of you keeping track, this means that IE will soon support generated content and data URLs, and, it has been confirmed, will banish hasLayout forever. This will put its rendering on par with other browsers that have passed Acid2, including Safari, iCab, Konqueror, and Opera. (Firefox 3, which passes Acid2, had not been released as of this writing.)
Throughout the development of the new engine, the IE team has been mindful of the backlash they received upon the release of IE7. Some standards zealots and even a few Microsoft fans felt that they didn’t go far enough in IE7 with bug fixes and improvements to CSS support. But a far greater number of developers gasped in utter disbelief as their websites, which looked great in IE6, broke in IE7. On his blog, standards advocate Roger Johanssen offered three reasons for the breakage, and in their drive to improve standards support, the IE team discovered a fourth: the DOCTYPE switch, a core technique enabling modern CSS layouts, is fatally flawed as a way to protect compatibility.
The DOCTYPE switch is broken
Back in 1998, Todd Fahrner came up with a toggle that would allow a browser to offer two rendering modes: one for developers wishing to follow standards, and another for everyone else. The concept was brilliantly simple. When the user agent encountered a document with a well-formed DOCTYPE declaration of a current HTML standard (i.e. HTML 2.0 wouldn’t cut it), it would assume that the author knew what she was doing and render the page in “standards” mode (laying out elements using the W3C’s box model). But when no DOCTYPE or a malformed DOCTYPE was encountered, the document would be rendered in “quirks” mode, i.e., laying out elements using the non-standard box model of IE5.x/Windows.
This concept was first implemented in IE5/Mac two years later, and was quickly adopted by the other browser makers. Standards-aware developers were already including a DOCTYPE declaration in their documents for validation purposes, so it required no extra effort on their parts to get browsers to render documents according to the spec. Developers who weren’t standards-minded were blissfully unaware that their documents were being given special treatment because neither they nor the tools they were using inserted well-formed DOCTYPEs.
Unfortunately, two key factors, working in concert, have made the DOCTYPE unsustainable as a switch for standards mode:
egged on by A List Apart and The Web Standards Project, well-intentioned developers of authoring tools began inserting valid, complete DOCTYPEs into the markup their tools generated; and
IE6’s rendering behavior was not updated for five years, leading many developers to assume its rendering was both accurate and unlikely to change.
Together, these two circumstances have undermined the DOCTYPE switch because it had one fatal flaw: it assumed that the use of a valid DOCTYPE meant that you knew what you were doing when it came to web standards, and that you wanted the most accurate rendering possible. How do we know that it failed? When IE 7 hit the streets, sites broke.
Sure, as Roger pointed out, some of those sites were using IE-6-specific CSS hacks (often begrudgingly, and with no choice). But most suffered because their developers only checked their pages in IE6 —or only needed to concern themselves with how the site looked in IE6, because they were deploying sites within a homogeneous browserscape (e.g. a company intranet). Now sure, you could just shrug it off and say that since IE6’s inaccuracies were well-documented, these developers should have known better, but you would be ignoring the fact that many developers never explicitly opted into “standards mode,” or even knew that such a mode existed.
Chris Wilson, Platform Architect for Internet Explorer, has often said that one of the core tenets of development on IE is that any choices the IE team makes must not “break the web”. Sadly, IE7 did just that for quite a number of people. Unwilling to make the same mistake twice, Microsoft reached out to The Web Standards Project (of which I am a member) and to several other standards-aware developers, and asked for our help in coming up with a better method of allowing developers to “opt in” to proper standards support. The goal was to find a method that was more explicit than the DOCTYPE switch, and could be implemented in any browser, not just IE.
Future perfect
At last year’s SXSW, I had the good fortune to watch a fantastic panel led by New York Public Library’s Carrie Bickner (who also happens to be the wife of ALA’s publisher, Jeffrey Zeldman). The panel, “Preserving our Digital Legacy and the Individual Collector,” amounted to a discussion of the problems libraries and individuals run into when trying to maintain digital archives. Most of these problems stem from advances in file formats and applications: Microsoft Office 2007, for example, cannot reliably render a Word 1.0 document as it was originally intended to be rendered. The panel got me thinking about how the web has changed since its creation and how it will continue to change as web standards evolve.
As a proponent of web standards, I want to see browsers continually improve their implementations of standards while adding support for new ones, but I also see it’s important to preserve the web we’ve worked so hard to build—table-based layouts and all. Sure, most trips through the “Wayback Machine” don’t suffer in modern browsers because the DOCTYPE switch still serves them well, but what about a site built to IE6’s implementation of “standards” mode? We already know that, in many cases, IE7 won’t render it properly. Does that mean that we need to keep a copy of IE6 on hand in order to view the page as the author intended? That’s exactly what many libraries have done in order to be able to view elderly files. With IE8 on the horizon, we have the same potential problem with documents created using IE7’s rendering engine. What’s the solution?
Targeting a browser version
In an ideal world, of course, all specifications would be perfect from the get-go, and their implementation in user agents would be immediate and flawless. In a slightly more down-to-earth version of an ideal world, browser vendors would immediately integrate regularly updated standards into new user agents—and users would have instant access to the latest version of those browsers without having to lift a finger. Were that the case, we developers would be able to build sites and applications that take advantage of the latest and greatest web technologies without worrying about backward compatibility. But as we all know, the world is nowhere near even that level of perfect.
Standards are developed and advanced in fits and starts, sometimes taking several years to find their way to “recommendation” status. Browser release cycles are driven by product management and marketing concerns—security, features, speed—and rarely coincide with the finalization of standards specifications, even when the browser makers themselves have been intimately involved with the development of those very standards. And users, especially within an organizational context, are often slow to upgrade their browsers.
All of these factors leave us, the website developers, in a bit of a pickle when it comes to making websites. How do we ensure that browsers continue to render what we want them to?
We could specify the version of the languages we use, such as CSS 2.1 or JavaScript 1.5. Unfortunately, browser vendors often implement only part of a spec and the interpretation of a specification often differs from browser to browser, so any two contemporary browsers may offer completely different renderings of the same CSS or may trigger completely different events from the same form control.
With this spanner in the works, we’re really only left with one option for guaranteeing a site we build today will look as good and work as well in five years as it does today: define a list of browser versions that the site was built and tested on, and then require that browser makers implement a way to use legacy rendering and scripting engines to display the site as it was intended—well into the future.
This is exactly what our group decided to recommend for IE8, and we hope to see it implemented in other browsers as well.
Keeping the syntax simple
One key to ensuring that this browser “version targeting” was easy for developers to adopt was to make it easy to implement by hand or in an authoring tool. We considered many syntax options, including a conditional comment-like syntax, processing instructions a la the XML prolog, and even HTML profiles such as those adopted by the Microformats community, but few seemed to fit the job as well as the meta element.
Using a simple meta declaration, we can specify the rendering engine we would like IE8 to use. For example, inserting this: {meta equiv="X-UA-Compatible" content="IE=8"}
into the head of a document would make IE8 render the page using the new standards mode. This syntax could be easily expanded to incorporate other browsers as well:
In the interest of speeding up the processing of the lock instruction, it is important to prioritize the version targeting meta element in much the same way as we prioritize the character encoding information. In order to work, the meta element will need to be placed in the head of your document, as close to the top as possible. It can be preceded by other meta elements and the title element, but will need to be placed above any other elements—and you can’t add it into the DOM via JavaScript.
As those of you with keen eyes probably noticed, the meta element we are using here is of the HTTP-equivalent variety, which means we can set the following header on the server to get the same effect:X-UA-Compatible: IE=8;FF=3;OtherUA=4
We can also use both methods in concert. For example, it is possible to set a baseline lock on a whole site using the header method and then override that header on individual pages, as needed, using the meta element.
Whither progressive enhancement?
Having the ability to lock your site to a particular browser version is fantastic for ensuring that your site will be usable well into the future, but does it undermine the concept of progressive enhancement? Will we have to alter the way we build sites? Can we still take advantage of new CSS properties automatically, as they become available? These were some of the many questions I had when we began discussing a possible “version targeting.”
For instance, let’s say IE8 wasn’t going to support generated content—if the Acid2 announcement is any indication, it should, but just bear with my use of it as an example—and we used generated content on a website that “targeted” IE8. Every other modern browser with the exception of IE would render that generated content, but even if IE9 included support for generated content, someone using that browser would not see the generated content because the site was locked to IE8. The site’s lock would need to be updated to IE9 for the generated content to appear, which goes against the core concept of progressive enhancement.
As much as it pains me to lose this particular aspect of progressive enhancement, this behavior is honestly the best thing that could happen, especially when the site concerned is public-facing. After all, we shouldn’t make assumptions about how browsers will behave in the future. If a change in IE9 would break the layout of our site or the functionality of one of our scripts, that could be disastrous for our users, sending our team into a mad scramble to “fix” the website that was working fine before the new browser launched (which is pretty much the boat we’re in now). Version targeting gives our team the ability to decide when to offer support for a new browser and, more importantly, gives us the much-needed time to make any adjustments necessary to introduce support for that new browser version.
So does version targeting spell the end of progressive enhancement? At this point, no. First of all, we will be dealing with legacy/pre-lock browsers for years to come, and progressive enhancement is a proven way to manage the differing levels of CSS and JavaScript support among them. Furthermore, there will still be a place for conditional comments to deliver style and scripting patches to IE browsers though we hope there will be a diminishing need for them over time. Finally, writing JavaScript using progressive enhancement techniques will still greatly cut down on the re-factoring time needed when preparing to launch support for a new browser.
Extra credit: living on the “edge”
For those willing to throw caution to the wind, let the chips fall where they may, or any other manner of colloquialism for coding with reckless abandon, IE will support a keyword value of “edge:”
This option, though strongly discouraged, will cause a site to target the latest IE browser versions as they release. It is a far cleaner alternative than the inevitable hack of setting an arbitrarily high value—IE=1000, anyone? But with all of the benefits of version targeting, the “edge” value is probably not practical for anything but experimental websites. That’s because even Eric Meyer can’t predict layout or scripting bugs that may be accidentally introduced by a new browser version.
Hope for the future
For many years, we designers and developers have been yearning for a way to reliably deploy our websites. In addition to the headaches of writing cross-platform styles and scripts, we’ve had to deal with the fallout from new browser releases that inevitably broke something we couldn’t possibly have anticipated. It’s never fun explaining the cause of an unexpected break to our clients, bosses, and users. But with IE8’s introduction of version targeting, there is a light at the end of the tunnel. I, for one, hope other browser vendors join Microsoft in implementing this functionality.
Illustration by Kevin Cornell in a list apart article.

Thank you Kevin

Regards Ritesh Niranjan