color profiles for the web

from http://www.bigspaceship.com/2009/04/color-unity-adobe-vs-html/ APRIL 22ND, 2009 Color Unity: Adobe vs. HTML Working with colors can be a very difficult. It is hard to determine what is perceptual, what is consistent, and what is offset by outlying factors. Things can get pretty hairy when trying to synchronize colors between the web standards and Photoshop. There are a lot of options ( including: proof setups [view menu] and color profiles [edit menu] ) in Photoshop that you may forget about that will stand between you and that perfect color. This test is interesting because the eyedropper tool in Photoshop is only accurate for actual colors, but it does not represent perceptual colors. When loading PSDs, you have the option to set color profiles, discard color profiles, and convert color profiles. These colors will all look very different visually, but the eyedropper color sampling will see them just the same. A deep red seen through a Windows proof setup may actually translate to a burnt-orange in HTML. The left side of these charts is the eyedropper sample taken from a PNG screenshot. The right side is an HTML “#D33432″ background color. For every single proof listed below, the PSD reported the color as being “#D33432,” which means they should match up identically. After looking at these samples, they are clearly not all “#D33432,” at least in the way we’d want them to be. After all, I did say proof. Note: This test required only one .psd using sRGB IEC61966-2.1. Use profile Convert profile Discard profile Every color in the above chart of 12 colors is supposedly “#D33432″ according to the color sampler. The only setup that seems to be accurate with regards to the web is removing all color profiles. If you are starting out a project, it can be easy enough to say, “Everyone just disable color management on these PSDs.” There is a separate issue when you have an existing profile that needs to be converted. We’ll get into that later. Photoshop vs Screen produces adverse, yet logical, effects. If you take a screen capture of a PSD with no color management and paste it back in to your document, there is no strange color shifting; the colors are exactly as they’re supposed to be. Below is a test showing what happens when you do a screen capture on a PSD that uses a color profile. The colors continuously get darker as you paste them back into your document. Saved PNG: #1: Original color. #2 is a capture of #1. #3: is a capture of #2. The big deal: The top is an open PSD, the bottom is a saved PNG24 version of the open PSD. The shades get lighter upon save. This is a little hard to follow, and for that I apologize. The point here is that the saved PNG is lighter than the color-managed PSD following the ratio of screen-capture color difference. The “#c12221″ of the exported PNG is actually the same color as the “#d33432″ in the PSD. Get a color picker and try it out. What this means is that … If you are working off a color managed PSD, your HTML colors will be a screen-capture shade lighter than what you see in the PSD (assuming you’re NOT proofing colors). In order to get the exact color of the image, you must take a screen capture of the color you want, then sample that. It will look darker, but when it gets translated to HTML… it will match.

HTML Entity Reference for Common Characters

http://www.impressivewebs.com/html-entity-reference-common/ Name Character Entity Numeric Copyright © © © Registered ® ® ® Trademark ™ ™ ™ Curly Open Double Quote “ “ “ Curly Closed Double Quote ” ” ” Curly Open Single Quote ‘ ‘ ‘ Curly Closed Single Quote ’ ’ ’ Big Bullet/Dot • • • Small Bullet/Dot · · · Square Dot ⋅ ⋅ ⋅ En Dash – – – Em Dash — — — Cents ¢ ¢ ¢ Pound (Currency) £ £ £ Euro (Currency) € € € Not Equal To ≠ ≠ ≠ Half (Fraction) ½ ½ ½ Quarter (Fraction) ¼ ¼ ¼ Three-Quarters (Fraction) ¾ ¾ ¾ Degrees ° ° ° Left Arrow ← ← ← Right Arrow → → → Up Arrow ↑ ↑ ↑ Down Arrow ↓ ↓ ↓ Lowercase “e”, Grave Accent è è è Lowercase “e”, Acute Accent é é é Lowercase “c”, Cedilla ç ç ç Ellipse … … … Triangle Down ▼ (none) ▼ Triangle Up ▲ (none) ▲ Triangle Left ◀ (none) ◀ Triangle Right ▶ (none) ▶ Name Character Entity Numeric Final Notes In HTML5, as far as I understand, you could technically just copy and paste the character right into your document and it will validate just fine (and as pointed out in the comments, this is the strongly preferred method). If you’re concerned about how these characters are handled when entered into a database or form, then you might want to check out this article on Smashing Magazine, along with the comments.

Illustrator Quick Tip: How To Copy Appearances Between Objects

http://www.vickiwenderlich.com/2012/01/illustrator-quick-tip-how-to-copy-appearances-between-objects/

Illustrator Quick Tip: How To Copy Appearances Between Objects

Often you have an image with several shapes in it, all which need to have the same Appearance (this just means the combination of Fills and Strokes applied to an object, and it’s found in the Appearance panel). Most of the time you aren’t quite sure what the appearance should be ahead of time, or you need to change the appearance – either way, you will need to copy the appearance of one shape over to several other shapes.
Even if the appearance is easy, let’s say a single Fill color and Stroke, this will take up too much time if you go to each shape and change its appearance manually in the Appearance panel.
If you have a complicated Appearance, like a gradient fill, a texture fill on top, and a drop shadow, it would take even longer.

All of these need the same Appearance
For example, see the clouds to the left.
I created the shapes with a simple white fill, and then played around with the appearance.

Fortunately, it's easy to copy this Appearance over to the other shapes.
Finally, I decided that the appearance needed to be as shown to the left, with a gradient fill and a white transparent gradient fill with an Offset Path Effect applied (to create a gradient stroke effect).
Then I needed to apply that Appearance to the other shapes.

Doing this manually would be a huge pain!
Fortunately there is an easy way in Illustrator to copy Appearances between shapes.

Easy as pie, thankfully!
Go over to your Layers Panel, and find the shapes. Here, the three objects with white thumbnails are our clouds.
See the circle to the right of each shape name? That is its Appearance circle.
In (1), you can see that one of the paths has a filled-in grey circle, and the other two cloud shapes have a white circle. The filled-in circle means that the Appearance is more than just a simple Fill and Stroke. We want to copy this Appearance to the other two paths
To copy the Appearance of the third path to the other paths, simply hold down Option and drag from the filled-in circle to another circle (2). Do this for any shapes you want the Appearance copied to.
The Appearances will now be the same (3).
If you do not hold down Option, you will simply move the Appearance from one shape to another rather than copying it.
As you can see below, all three clouds now have the same Appearance – and it took only seconds to make the change!

Now you can easily copy the appearance to as many shapes as you want!

Category: Illustrator, Tutorials
Tags: Illustrator, tips, tutorial

One Comment

test text with all the fonts on your computer

http://www.fileformat.info/info/unicode/font/fontlist.htm?text=%E2%98%82+-+Enter+a+character+or+sentence+and+see+what+your+computer+fonts+look+like

Best little video on converting images to Black and White, desaturated and Sepia

http://layersmagazine.com/photoshop-black-white-images.html

Method 1:
-Image-mode-grayscale
-Adjustments-brightness/contrast

Method 2:
-Adjustments-Hue/Saturation
-slide Saturation to nil.
(also nice for mostly desaturated images)

Method 3:
-Channel Mixer
-click monochrome
(this is a very popular method and is great on landscapes)

Method 4 (sepia):
-Actions-Flyout-Image Effects