Dan Olsavsky's Blog

Friday, January 25, 2008

Photoshop CS3 Features - Image Editing

"Photoshop CS3 Features - Image Editing" by Dan Olsavsky


You will notice that on your main Photoshop CS3 toolbar, Adobe has removed the magic wand tool and replaced it with the Quick Selection Tool. Adobe has recognized that the ability to isolate an object and remove it from its background is quite often a pain staking "project". Photoshop CS3 introduces the Quick Selection tool as a solution.

The Quick Selection tool is much more versatile and intuitive than the magic wand tool. For instance, it is quite easy to use; you simply paint over the area that you would like to be selected and that’s it. There is no need to hold down the shift key to make multiple selections and if you have accidentally selected a bit too much, you can press the Alt key and paint with the tool to deselect areas (think eraser tool). The quality of the selection has improved too, leaving no pixel behind (my attempt at humor).

Once you have made your selection with the Quick Selection tool, you can press the Q key to go in to Quick Mask mode. Quick Mask mode will show you the non-selected areas in red, which will help you identify areas that you may need to clean up a bit. I find this tool especially helpful when I need to cut out such things as the spaces in-between strands of hair.

Once you have your selection exactly the way you want it, you can use the new Refine Edge tool (select/refine edge) to feather the edge of a selection so it will look natural. The Refine Edge tool includes it’s own dialog box (Control + Alt + R) in which you can control several parameters of the selection. FYI, I used to go to select/contract 1px then, select/inverse and then selection/feather 1px... so this will surely save some time.

Especially Useful links:

http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WSFD9BA8C5-31BA-4fec-81F3-CF04EE5295FC.html

http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WS9C5407FF-2787-400b-9930-FF44266E9168.html

http://www.photoshopsupport.com/tutorials/adorama/changing-colors-selectively.html

"Photoshop CS3 Features - Image Editing" by Dan Olsavsky

posted by dano at 10:33 AM 1 comments

Tuesday, January 15, 2008

New Inspiration

There are many similar modern design characteristics among the sites in which I am reviewing this month. I will try to identify what they all are in my critiques.

http://www.caferouge.co.uk/

pros:
  • beautiful textures
  • nice layering techniques, it adds a lot of dimension
  • rich colors invoke emotions
  • well themed, this helps sell the brand
  • simple navigation
  • 2 tone background with a pattern
  • the graphics are very well done (i like locations.php, it's engaging)
  • nice dropdown concept, this helps me find my way
cons:
  • takes too long to load pages
http://www.stonebriar.org/

pros:
  • index tab at top both looks good and functions well, I can find whatever I want with out scrolling at all.
  • great layering techniques, it adds a lot of dimension
  • simple navigation
  • 2 tone background with a pattern
  • Flash banner in combination with the color palette invokes emotions
cons:
  • the rounded element (containing the service times) seems a bit out of place or perhaps just not consistent with the feel of the rest of the site... i believe this to be because it is rounded
  • i feel the same way about the "this week..." graphic at the bottom of the page on the blue bar. I would loose the rounded part.
  • i would also re-shape the background elements in the right hand column...I guess I am really not digging the curves, especially because they are curving in different directions than the other curved elements on the site. It's never a good idea to mix and match horizontal and vertical ANYTHING...unless it's a pattern. I often see this same mistake when using gradients.

posted by dano at 8:33 AM 0 comments

Thursday, January 10, 2008

Using Multiple Style Sheets (for multiple browsers)

Star HTML hack...
(where ie specific "root" selectors all began)

Star html is not valid mark-up, therefore it wont work in new browsers... for example, IE7 does not apply rules that use this hack, therefore, you still need to create a new style sheet. Microsoft is discontinuing support of the Star-HTML hack in strict and standard mode so that there will be fewer problems for coders. Furthermore, You should never hack a CSS document if the hack is not valid!

"Update January 2007 IE7 has been out for a few months now, and it ignores the Star-HTML hack just like non-IE browsers. Therefore the hack is now considered to be a filter hack for IE6 and below. Since those old browsers will not change in the future, this "less-than-IE7" filter hack is very safe to use, and allows easy forking of CSS rules between IE6 and IE7 in a single stylesheet."

" So what happens when we start to match child selectors in IE 7? Well, it makes a big mess because we now match more rules not meant to be used from within IE and then those are merged with IE only rules. Because of the merge styles that were never meant to be combined end up changing the layout of the page away from what the author originally intended when they designed their cross browser matrix and testing patterns. "

Example

The star-html technique does not validate

*html #container {
background: url(../images/ie-bkgd.gif) left top repeat-y;
}

Why Use Multiple Style Sheets?

  • It helps keep your default external style sheet from getting too lengthy.
  • It is also quite easy to determine what style sheet controls a specific browser (if you name it appropriately).
  • Easiest and most consistent way to manage browser inconsistencies of a web page
  • You can use CSS3 for browsers that support it (use all available CSS selectors)
  • Several HTML editing tools are now equipped with ways to manage multiple style sheets (ie Dremweaver)
There are certain browsers that we have to code for but do not have any reliable means to detect and work around consistently. I have found that it is much easier to develop your CSS code for a highly standards-compliant browser like Firefox first, then create a style sheet for workarounds, to make your code work on IE.

If you write your main style sheet with styles that are coded in a non-standard way to deal with IE bugs first, you will wind up having to rewrite everything when Microsoft fixes the bugs. I found that using the multiple style sheet technique is quite useful and has the least number of side effects.

Conditional Comments For IE (goes in the head of your document)


<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="screen-ie.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="screen-ie7.css" />
<![endif]-->

<![if IE 6]>
<link rel="stylesheet" type="text/css" href="screen-ie6.css" />
<![endif]>

Importing Multiple Styles

<style type="text/css"><!--
@import url(screen.css);
@import url(print.css);
@import url(mobile.css);
@import url(forms.css);
@import url(gallery.css);
--></style>

Great Articles
http://virtuelvis.com/archives/2004/02/css-ie-only
http://www.positioniseverything.net/articles/cc-plus.html
http://www.quirksmode.org/css/condcom.html
http://www.456bereastreet.com/archive/200510/stop_using_css_hacks_now/
http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-conditional-comments/

posted by dano at 10:13 AM 0 comments

Wednesday, January 9, 2008

A Non-JavaScript, Repeating .PNG Fix - That Works!

I was looking for a non JavaScript way to use .png's with ie6... however there was a catch, it had to repeat. I found this code and I added it to a site... and it works (*wipes sweat from forehead)!!! The code goes in your CSS so you don't have to edit the HTML, add the .htc file to your root directory.

Note: The first selector triggers the .htc behavior

.fixpng, img {
behavior: url(../iepngfix.htc);
}
#columnContainer {
background-image: url(../images/content-bg.png);
behavior: url(../iepngfix.htc);
background-repeat: repeat;
}

Read how Bob edited this code so that the .png's will repeat (brilliant):
http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

If your not familiar with .htc files, you can read about them here: http://msdn2.microsoft.com/en-us/library/ms531018(VS.85).aspx.

So... you noticed that ie6 is trying to adjust the gamma on the .png!
Well, youre an observant little developer arent you! You can strip the GAMMA information out of the .png file using TweakPNG (Windows only):
http://entropymine.com/jason/tweakpng/

The directions for TweakPNG:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=153#7

For those of you who prefer to use JavaScript
Here is the jQuery version of this, however, I don't know it's limitations;
http://campbellsdigitalsoup.co.uk/about/png-fix

- Dan Olsavsky

posted by dano at 9:25 AM 1 comments

© Dan Olsavsky | 2004-2009. This site is optimized for viewing in Mozilla's Firefox. Some features may not appear in other internet browsers. Please note that I do not develop the content for the websites featured in my portfolio. I do however, work with some phenomenal writers that can get the job done. The Search Engine Optimization on most of the sites was done by a highly-skilled professional at Page 1 Solutions, LLC. Some of the websites have been edited aesthetically by other Website Design Professionals but I keep the Lightbox images original, because I like to keep it real. I am employed full-time, however... you too can retain my services at a very reasonable rate! A huge shout out to everybody who has helped me along the way and who continue to support me. You know who you are.. Click here to view the Sitemap or click here to Contact me.