22.5.11

Embedding Audio Files | Chrome Browser Difference

Chrome renders audio embed as blue bar in the upper left corner...

...and renders the console different than how most browsers...

...which is shown here. Oracle.IE an Firefox rendered identically.

17.5.11

Why My Printer Printing a Totally different Color?

"Why didn't the color on my print out come out like the color on the computer screen?"  
Pulling my hair out because the beautiful layout for booklet cover is not printing correctly. The nice collage of images behind title unified into the same color of purple with a hue/saturation adjustment layer prints pink on clients printer. Well pinks not so far from purple, I thought maybe its just her printer settings. But it print GREEN on my printer. Now thats totally different from purple! 
I thought maybe I just need to print from flatten image. One Article suggested using PDF as my output. I tried JPG and PDF with same results.
Then I discovered a whole new concept with respect to printing that I had never encountered publishing websites -- of color management.
When working with digital images, we use color models to describe these colors.  There are a number of them: RGB, CMYK, Lab, etc., and each of them uses a different way of describing colors.  In the various color models, there are color options known as color spaces. For instance, RGB, contains sRGB, Adobe RGB, Apple RGB, etc. The CMYK model also has various color spaces to work in.  These spaces have a limited range of reproducible colors. This range of colors is known as gamut

The various devices work within their own limited color gamut. To make things even worse, no two devices have the same color space. Although they all use RGB to define color, they interpret it differently.

When using Photoshop (or other image-producing software), image color values are actually being adjusting numerically. These numerical values are not really colors at all. They only have a very localized color meaning in the color space (gamut) of the device that is reproducing the color.

So whenever your image is moved from one device space to another device with a different color space (i.e., scanner-> monitor-> printer), which can only reproduce colors in its gamut, the image colors will change (i.e., pretty blue on screen, dark purple in print). The color change happens because each device has mathematically interpreted the RGB or CMYK values according to its own color space (gamut).
Because each device has a different color space, it’s impossible for all the colors you see on your monitor (RGB color space) to match the output from your desktop printer (CMYK color space). Their gamuts are different.

Using a color management system is one good way to help achieve something close to consistent and predictable color between devices.  Luckily Photoshop has a very good color management system built into it. 

Items to consider to ensure what you see on the screen is what you get in your print (WYSIWYP). Calibrate your monitor, Color Settings, printer drivers to set monitor color space to printer's, paper profiles (used paper's recommended by printer) See rest of this article for detailed steps »

Most important but overlooked step: Change Your Photoshop Work Space Color Settings


1. Edit > Drag down to Color Settings > Advanced Options


2. Working Space Setting - RGBClick the Adobe RGB from default sRGB 


Adobe RGB (1998)
Is the largest recommended RGB working space and suited for print production with a broad range of colors.

sRGB
Is designed to reflect the characteristics of the average PC monitor. sRGB is suitable for RGB images destined for the Web, but it is not recommended for print production work

 3. Do not change the remaining Working Spaces Settings. 
    Conversion Options  Engine: Use the Adobe ACE (default)

In the end when she took it to a professional designer's printer, the document's colors printed perfectly. No doubt she has her software and device settings all set for color print output.
In general, you will be working in RGB throughout the printing process. While color printers inks are actually CMYK, they are expecting RGB images to come through them.  The conversion takes place in the printer and your software.  Sometimes when working on images that will be sent to a publisher, you will need to convert your image to the limited CMYK gamut.  You can preview any color changes using Soft Proof in CMYK mode and turning on Gamut Warning. All of these options are available in the View Menu. 

In Photoshop you can use Gamut Warning in a number of ways to adjust problem areas. 
Duplicate the original image for gamut correction! 
Save as the duplicates name-proof type in case you need to print again. (eg. Filename-CMYK.psd).



4.4.11

CBC Web Design: Subpages for Featured Groups

Custom icons were designed for the church groups to be in featured content boxes on home page. They are linked by read more buttons to a specially styled subpages as opposed to the plain all text default suppages. I took the time to do photo extraction of a lovely photo of the First Lady and groups leader for this glossy content box. I also re-colored the pink heels to match here outfit.

29.3.11

CBC Web Design: Glossy Black Theme and its inspirations.

Finalized mockup for CBC welcome page. 
Compare to the 2 primary examples provided by the client:
the use of featured content boxes for layout
hip tekky design with dark background and metallic text

I needed something to reflect the client's 3D mantra and taste for chrome and gloss. The clients has objective of bring technology to an otherwise old fashioned traditional church. I wanted the design to reflect the churches respected history and tradition while looking toward the future and technology. The content was based on clients example websites like Bethel Baptist Institutional Church which used "advertisement-like" boxes to feature church activity. A flashy Jamal Bryant Ministries (refers to style and type of web site) inspired the black, glossy, metallic theme. An homage to the traditional shield type logo was used but with a Web 2.O twist. See previous post.

But I have to use my own design aesthetic for this Tradition meets Technology theme. Unique. Geometric. Coded with color. Metaphorical motifs. Far removed from the ubiquitous kitschy church websites.

I took inspirations from the following dark websites:
http://wearecyan.com/  teal/charcoal palette; icon use; cool background texture for header
http://www.ttthings.com/   starry background
http://www.futuretalent.org/ photo extraction with colored glow fade into black background; content box - glossy black w/ bright icon - MAIN INSPIRATION for sidebar in my theme

25.3.11

CBC Web Design: Evolution of Header and Letterhead

 [Click images to enlarged]

 First version with all the major elements established. Original Edwardian script for site title lack symmetry. The "3D MINISTRY' has balanced height, but 3D needs emphasized in center.
The The League of Moveable Type's Orbotron typeface (open source) was pivotal to the final design solution. This version is symmetrical with the "3D" emphasis front and center over the motto. This font not only provides both symmetrical height and width for the text elements, it fits the "technological", "futuristic"  theme of the black glossy, "iPad-looking" website interface. A few sparkles top it off.



Web site logo simplified for a print version. These early sketch need to be finalized in a salable vector image. Which can be re-sized with out degradation.

Designing a logo for this project has been very challenging.  None of the elements naturally fit together. I was charged with developing a logo based on an this amateur mall airbrushed T-shirt artwork. Finding the right font style for a composition using "3" and "D" on each side of "cross" took a lot of trial and error. I decided to incorporate the shield as a shape to enclose these 3 stubborn characters. The shield also provides an excellent visual motif for any Christian organization. It adds a touch of "traditional" imagery to the "modern" Tekky" design which reflects the church's objective to move the ministry of this 90 year old historic church into modern technology. The shield shape can be use in a varity of sizes, solid or outline, 2D or 3D in graphic design. See how the shield was used as icon throughout the Central Baptist web page design.

The cosmic rings from the website design has bee translated into two symmetrical "swooshes" for print.  The logo color scheme may adjusted by easily changing color/style of each background swoosh or as one ring. See upcoming post for examples.

20.3.11

CBC Web Design: Glossy Black Theme and Grid layout established

Finally getting a clear design direction for the CBC website. I needed something to reflect the client's 3D mantra and taste for chrome and gloss. The clients has objective of bring technology to an otherwise old fashioned traditional church. I wanted the design to reflect the churches respected history and tradition while looking toward the future and technology. The content was based on clients example websites like Bethel Baptist Institutional Church which used "advertisement-like" boxes to feature church activity. A flashy Jamal Bryant Ministries (refers to style and type of web site) inspired the black, glossy, metallic theme. An homage to the traditional shield type logo was used but with a Web 2.O twist. See previous post.

But I have to use my own design aesthetic for this Tradition meets Technology theme. Unique. Geometric. Coded with color. Metaphorical motifs. Far removed from the ubiquitous kitschy church websites.

I took inspirations from the following dark websites:
http://wearecyan.com/  teal/charcoal palette; icon use; cool background texture for header
http://www.ttthings.com/   starry background
http://www.futuretalent.org/ photo extraction with colored glow fade into black background; content box - glossy black w/ bright icon - MAIN INSPIRATION for sidebar in my theme
Red Arrow marks "fold" line. All above the fold stays fixed.
Blue arrow marks options for featuring up-datable "events" info -  the main body, sidebar module, button link.
Yellow arrow points out the phrase "steps" that unifies the visual "shoes" concept with the client, CBC mission on the move theme.

19.3.11

CBC Web Design: Shield Logo Inspired Theme (cracked Webs.com CSS code)

Yahoo! I finally cracked into the Webs.com template CSS. Customer service wouldn't give me the CSS class to change nav bar color. DUH I finally thought to "View Page Source"  and not only did I change my nav color, I figured out side bar CSS to customize it with this cool glossy background for the titles with shield icon reminiscent of the CBC logo. I'll use black glossy buttons and shield motif to create a theme for the CBC site...good practice for creating Wordpress themes...my next goal.
Related Posts with Thumbnails