public marks

PUBLIC MARKS with tag color

July 2013

Creating a Transparent tiff in Photoshop CS3 to use in Illustrator

by sbrothier
When you have selected your layer (which you intend on being one colour) cut and paste it into a new document and make it grayscale, (settings should be resoulution: 200, colour mode: greyscale) Paste it into the new document then make it a bitmap, (output: 200 Method: Halftone Screen) click OK. For halftone Screen settings(frequency 55, Angle :25, Shape: ellipse) Click OK, then save as a tiff. Your settings should be (Image compression: LZW, Pixek order:Interleaved, Byte order: Macintosh) and that’s your tiff that can be brought into Illustartor and recoloured in any colour.

May 2013

Brandseen - Logo Coloring Game

by sbrothier
How well do you know some of the most popular brands on earth? Find out by selecting the color you associate with each logo - you'll be scored based on how close your response matches the original brand. See how well your score compares with others! Enjoy.

How to generate colour bitmap fonts for Mac OS 10.7/8 | Typophile

by sbrothier
A while ago I researched out of curiosity if it was possible to build fonts with embedded colour bitmaps like the Apple Color Emoji font on Mac OS 10.7/10.8. I figured out the «sbix» table format and wrote some code that can be hooked into the Python FontTools to decompile and compile the sbix table which contains the image data.

April 2013

December 2012

Lost and Found : Discover the black-and-white era in full color : The Picture Show : NPR

by sbrothier & 1 other
"Lost and Found" was published on NPR's Picture Show on 9/14/12. It was produced and reported by Claire O'Neill and designed and developed by Wesley Lindamood. Photographs by Charles W. Cushman, courtesy of The Charles W. Cushman Photograph Collection/Indiana University and Eric Sandweiss, author of The Day In Its Color (Oxford University Press, 2012). Portrait of Rich Remsberg by Robb Hill. Music: "The Mountain," "Chimera" and "Vibe Drive" by Chad Crouch (Podington Bear), Animated car background gif adapted from moving image collection of Thanks for visiting!

November 2012

Sim Daltonism

by mixher & 2 others
Sim Daltonism is a color blindness simulator for Mac OS X. It filters in real-time the area around the mouse pointer and displays the result — as seen by a color blind person — in a floating palette.

Color Thief

by sbrothier & 5 others (via)
A script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen.

Lightbulbs that can change brightness and color with a cell phone command show flashes of design brilliance

by sbrothier
regular lightbulb tends to come in one color and one brightness level. But now new LED (light-emitting diode) lightbulbs promise to become any color and any brightness at any time you like. And best of all, they can be controlled by the phone in your pocket.

October 2012

Phrogz/context-blender · GitHub

by sbrothier & 1 other (via)
Syntax overContext.blendOnto( underContext, blendMode, offsetOptions ); - overContext : A CanvasRenderingContext2D - underContext : A CanvasRenderingContext2D - blendMode : A string with the blend mode to use, e.g. 'screen' - offsetOptions : [optional] JS Object with some/all of the following keys: destX, destY The X/Y location in the 'underContext' to blend onto; both default to 0. sourceX, sourceY The X/Y location in the 'overContext' to blend from; both default to 0. width,height The size of the box to blend; both default to 'auto', blending up to the right and bottom edges of the 'over' context. Width and height may less than specified if there is not enough space on the over or under contexts to fit the blend. Use // Likely an 'offscreen' (not in the DOM) canvas var over = someCanvas.getContext('2d'); // Usually a canvas that is shown on the page var under = anotherCanvas.getContext('2d'); // Blend all of 'over' onto 'under', starting at the upper left corner over.blendOnto(under,'screen'); // Blend all of 'over' onto 'under' (again), starting at 17,42 in 'under' over.blendOnto(under,'multiply',{destX:17,destY:42}); // Blend a 16x16 tile from 'over' onto 'under' (again), starting at 17,42 in 'under' over.blendOnto(under,'add',{destX:17,destY:42,sourceX:32,sourceY:128,width:16,height:16}); Supported Blend Modes The following blend modes work perfectly (or as nearly as the vagaries of the HTML Canvas allow): normal (or src-over) screen multiply difference These blend modes mostly work as intended, but have issues when it comes to dealing with the alpha channel: exclusion - very subtle color differences (slightly too bright) under limited circumstances. src-in - the output of this blend mode is slightly different from the effect of applying the transparency of one layer as a mask to another; the difference only appears in low-opacity areas, however. add (or plus) - Photoshop's "Linear Dodge (add)" blend mode does not perform addition on the opacities of the two layers. I have not yet figured out what it does instead. For now, this mode performs simple numeric addition, the same as the SVG 1.2 "plus" mode. lighten (or lighter) - the result is slightly too dark when the opacity falls and incorrectly 'favors' a higher-opacity source. darken (or darker) - the result is too dark when combining low-opacity regions, and does not properly 'favor' the higher-opacity source. overlay - this is only correct where both the over and under images are 100% opaque; the lower the alpha of either/both images, the more the colors get clamped, resulting in high contrast. hardlight - this is the opposite of "overlay" and experiences similar problems when either image is not fully opaque. colordodge (or dodge) - works correctly only under 100% opacity colorburn (or burn) - works correctly only under 100% opacity Requirements/Browser Support Tested on Safari v5.0, Chrome v8, and FF v3.6. Should work on any user agent that supplies a CanvasRenderingContext2D along with getImageData and putImageData. About This library was created around the need solely for a one-off 'screen' blend mode to match the company-mandated style for bar graphs used internally, previously only available via a Microsoft® Excel® template. Clearly this functionality is useful in more contexts than just my one-off, so I decided to make a framework around it and encourage others to help figure out the formulae. Please, fork this project, add blend modes and/or fix math, and send me pull requests! I feel certain that the resources must exist out there on the equations Photoshop uses in the presence of alpha, but so far I have not found them. Reference Material PDF Blend Modes: Addendum (January 23, 2006) PDF SVG Compositing 1.2, Part 1: Primer Custom blend modes for Flash 10 blog post Blend Modes in Delphi blog post License This library is released under an MIT-style license. That generally means that you are free to do almost anything you want with it as long as you give a bit of credit where credit is due. See the LICENSE file included for the actual legal limitations.

Compositing and Blending 1.0

by sbrothier (via)
additional Porter Duff compositing operators; advanced blending modes which allow control of how colors mix in the areas where shapes overlap; and compositing groups

Bringing blending to the Web | Web Platform Team Blog

by sbrothier
If you’re a user of our design applications such as Photoshop and Illustrator, you know how you can create very cool effects with blend modes. An Amazon search returns many books and a Google search on ‘photoshop blending tutorial’ returns more than 200,000 results. This points to a very widely known and used feature.

Can I use... Support tables for HTML5, CSS3, etc

by sbrothier
Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.

August 2012

July 2012

New blending features in CSS | Web Platform Team Blog

by sbrothier & 1 other
A couple of months ago, we posted a blog post on bringing blending to the web. Since then, Nikos Andronikos from Canon and I have been busy integrating feedback in the draft spec and we presented it to the CSS working group in May. At Google I/O Vincent Hardy also gave an overview of the capabilities. If you’re interested, you can watch it here. (The part on blending and compositing starts around 55min.) The WebKit build he is using is also publicly available so you can experiment with these features.

CSS Filters

by sbrothier & 2 others
Demo showing CSS Filter Effects 1.0, specifically the filter functions, which are being implemented in Webkit.

June 2012