Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
Here's what I've noticed. Until recently many global scale corporations used this "tinted black and white" look a lot. They usually stayed away from true sepia, for all the psychological reasons rcjordan mentions. However the essential method, using other tintng colors, has been common.
Only recently have I seen global companies like Microsoft, Compaq, EMC, Sun, etc., use more full color images, and their inner pages are still full of duotones. Even today, the homepage for Sun.com uses six blue duotone photos.
Duotone images offer several advantages over full color that appeal to global corporations whose high traffic sites need to serve as many varieties of visitors as possible.
1) They are smaller in file size than full color, yet they offer photo realism with a very clean look. They need 256 colors maximum (and often a smaller palette is fine) rather than millions of colors, so a lossless GIF works every time.
2) To the eye, duotone images appear to show better gradations of detail than an equivalent black and white.
3) Duotone images ARE colored, so they can be matched to the design palette of other site elements.
4) They're much less susceptable to ugly degrading on older systems, or from AOL image compression.
I have never taken any graphics classes or worked with them at all. I do know quite a bit about photography, and how to take a good photograph, but I don't know anything about what to do with photos once they are in the computer to go on a website. I do all my photo manipulation in the darkroom or with F-stops.
I have the fireworks bible, which has taught me a lot, not only about fireworks, but about graphics in general.
Can you guys recommend any web sites/ books for an absolute beginner graphics person like me?
I mean, I don't even know the right questions to ask to find out the tricks that all graphics people seem to just ... know.
My main drive in getting a computer was to learn PhotoShop -- I had become fascinated by playing with it at Kinko's over the early nineties and wanted to play along at home.
I never took a formal course, but I learned from doing tutorials and reading books. And, to blow my own horn a bit, this brought me to a level where I tested as "expert" on a standardized PhotoShop test. It proves that you can successfully self-educate.
I got a whole lot from the Real World Photoshop [amazon.com] books. They bridge the gap from tutorial to what you really need to know "under fire".
I study a lot of print techniques, rather than just web technique. Although I seldom do print work, this has given me a grasp of Photoshop that "for the web" articles never did.
Along these lines of print technioque, there's a great magazine called PEI (Photo Electronic Imaging.) They offer a tutorial every issue which combines the print magazine and website instruction. I was a faithful reader for many years, and they taught me a huge amount. They're at [peimag.com...]
You can use many of the free and commercial plug ins for Photoshop with Paint Shop Pro too, which is what we use. There are several good sepia plug ins.
You can create this by selecting the seperation that has the greatest detail and copying this into the remaining seperations except for the black channel.
Once you have done this convert from cmyk to rgb.
I am sure for the most part this is what many of the plug ins do.
This is a process we used in printing, we would photograph the subject with the same exposure settings and just alter the screen angles. The black sep had a different set of exposures.
There are two ways to make a sepia tone photo print last I checked: a really nasty sulfur-smelling concoction, and a regular photo-tint ink in brown. Either one is brushed evenly onto a flat-paper black & white print. The nasty smelling one actually screws with the chemical composition of the original print, creating a very accurate sepia effect (by eliminating any true black in the print). The brown tinting ink just overlays the original print... works faster, smells less, but creates a print with the wrong brown tone, and too much black.
The preceeding explanation was based on 11-year-old memories of my high-school photography class. Please excuse any inaccuracies.
As for creating a sepia-tone image in PS, I'd try converting an RGB image to greyscale... then turn up the contrast a bit (since sepia-tone images always wash out to white fairly quickly... slightly over-exposed looking), switching back to RGB, and using the "adjust hue/saturation" controls to tint the whole image to a nice warm shade of brown.
OK..now see. This will tell you how little I know. I don't even know what Minnapple just said in that paragraph. I understand the equal values, but honestly, the only reason I know what color cyan is is because I have played the game "Riven" by the company called Cyan.
Can you explain what you just said starting at the paragraph starting with "Yow can create"?
Cyan, Magenta Yellow and Black are the four ink colors used in four-color printing. Cyan (C) is pale blue, Magenta (M) is an obnoxious intense pinkinsh red, and Yellow is yellow ;) (Y), Black is inexplicably referred to as K instead of B, giving you the CMYK color space.
Nice thing with PhotoShop, when you are working with a file in RGB color space (preferrable for web or television gfx work), you can still adjust your colors with the CMYK values in the color picker window.
Does that help? I can grab a screen shot of the color picker window, and highlight it if you need me to. :)
You may have heard of 4-color separations? These are made so the printer can have a separate plate for each of the four colors, and then use four different inks. Desktop color printers also use the same four colors, but most of them now combine the inks into one cartridge with seperate wells for each.
At any rate, when an image is converted to CMYK color space, then Photoshop shows four different channels (Cyan, Magenta, Yellow and Black) instead of three (Red, Blue, Green). This is where minnapple's process takes place -- in the "Channels" palette, rather than the "Layers" palette, of CMYK color space.
I've been playing a bit with the process, and I find that the step of choosing the channel with the most detail is the challenge. Instead of picking one of the CMY channels, I get good results by first going into L-a-b and copying the (L)ightness channel to the clipbord. Then I convert the image to CMYK color space, paste that L channel into C-M-Y and fill the K channel with white, so that there is no true black.
Even so, the images need warming up with the Hue/Saturation sliders to look good on screen, as mivox mentioned.
>Can you explain what you just said starting at the paragraph starting with "Yow can create"?
-You can create this by selecting the seperation that has the greatest detail and copying this into the remaining seperations except for the black channel. -
The following steps use photoshop.
1. Image > Mode > CMYK
2. View each Channel as Black and White in the Channels Window
3. Determine which channel offers the most detail
4. Image > Adjust > Channel Mixer
5. Generally Magenta carries the most detail, if this is the case. Make Cyan and Yellow 100% Magenta and 0% of every other color. Leave Black as it is.
6. After this . . . Image > Mode > RGB
This will create a baseline sepia tone.
You can vary the color of the images by adjusting the RGB or CMYK values.
However, adjusting color visually is prone to error due to the wide variances of monitors.
Most users do not color balance their monitors, so the best we can do is offer them "correct color" which is nothing more than middle ground considering the current technology and lack of standards.
Or they color balance them differently... I have multiple monitor settings: 'default generic windows monitor', 'Xerox Docutech' (for short order printing), and 'lovely default Macintosh' which is what the world would look like if everything was set right! ;)
What looks sepia to me may look burnt umber to you, and medium chocolate brown to the end user.
As a childhood crayon addict, it has been very painful for me to accept my lack of color control online... *sigh* But it get's a little easier every day....
or was that the cigarettes...?
I knew most developers came from a tech rather than a design background but this thread is apalling.
First of all...
>Photoshop has great tools for creating duotone and tritone images -- sometimes called halftones...
A halftone is a grayscale converted into a screen of dots for printing. A duotone is an image produced using two different colors of ink (and thus two halftone screens)
>Black is inexplicably referred to as K instead of B, ...
Yes, to avoid confusion with Blue.
>using the "adjust hue/saturation" controls to tint the whole image to a nice warm shade of brown...
No! do not do that, EVER. You will do all kinds of bad things like throwing your image out of gamut, destroying your tonal range, and, worst of all, producing an effect you will never ba able to replicate.
Use your duotone window in photoshop. Make the two colors black and any other color you want then manipulate the duotone curves (subtly) until you achieve the tonal effects you desire. Before you leave that window SAVE your duotone preferences so that you can simply apply them to any other image.
I could understand if it was BMYK, but if Blue range is already handled by Cyan/C, using K for black seems unnecessarily confusing.
>using the "adjust hue/saturation" controls to tint the whole image to a nice warm shade of brown...
No! do not do that, EVER.
If a photo is destined for electronic publication only: ie - will only ever appear on the web, at a 72ppi resolution, you're not going to cause the end of the world by using the hue adjustment to create a sepia tone. ;)
If you have a high res. electronic image file, and you want to create sepia-tone hard-copy prints from the original file as well as web images, my advice (given the HUGE difference between print colors and the average surfer's screen colors) would be to save 3 copies of the file:
1. a copy of the original file at 72 ppi for the web file, edit it using either the CMYK values or the hue adjustment slider until it looks good *on screen*.
2. a copy of the original file saved at whatever your print resolution will be, and adjust that (after making proper color adjustements to your monitor) to look good on your printer.
3. the original file itself, which is left unsullied and unadjusted. If you screw up file #1 or 2 above, you'll be glad you saved the original.
Creating a sepia tone effect using duo-tone would not create a true photographic sepia tone style image, as 'real' sepia tone photos have no black.
*G rubs her head* Sigh. In a very small voice because she is embarrassed to ask this...
Can you go a little slower and tell me what it means to "throw an image out of gamet, destroying a tonal range? The only part I understood was the "making an effect you will never be able to replicate"
And when you refer to "Make the two colors black and any other color you want..." are you talking about the equal colors of 'cyan, magenta and yellow' to make the sepia tone? To what colors are you referring?
I know it is difficult to understand how something so simple as this can be difficult for someone else, and perhaps it is appalling what I don't know, but I'd appreciate the help. I have *never* had a computer graphics class or print class. What little knowledge I have is through trial and error.
I have said this before, if I have to tweak an image, I do it with the F-stop, the film speed or in the darkroom...once it is on a computer, I don't have a clue.
Typophile is addressing print issues. My suggestion about returning to RGB space and changing hue/saturation is only for on screen display.
Gamut refers to the range of color that can be created in standard four color printing (CMYK). RGB space is capable of a much wider range of color than CMYK.
Having created a sepia tone in CMYK, it is naturally in gamut -- it was created in CMYK color space. If you change the hue/saturation in RGB color space, some areas will be shifted to colors that cannot be printed. That is, they are "out of gamut".
After the hue/saturation shift, the file is no longer a good candidate for printing. So the "warmed up" image for on screen use should be a copy of the file, not the orignal -- if the image is ever going to be needed for print.
Wow. It sounds like the opposite should be true. You'd think the more colors, the more range of color.
This is fascinating. I had no idea that there would need to be such a different process for web work and printing work.
Don't get me wrong, I did know it would be different, but I had no idea it would be *so* different.
So, some valuable rules of thumb:
1)When doing print work and web work, *always* have an original file, a print work file and a web work file.
2)First make a COPY of original file and tweak the COPY.
3) Making a print work file from a web work file may or may not work. (Probably the latter, so find a new original to do print work...)
In a million years, I don't think I would have figured that out. I have learned so much from this thread.
Any other rules to add?
Oooh question though: How often would one use the same original files for both web work and print work? It sounds different enough that the originals might have to be in completely separate formats...
I've started graphics in RGB, and when I switched to CMYK to do separations, some of my lovely vibrant colors turned to mud. That's what 'out of gamut' does. If you start the graphic in CMYK, you won't have to tear your hair out over what happened to your beautiful colors later.
Also... if designing for print, make sure you design for the output process. So, if you're sending the file to the local copy shop to be printed off on their color laser printer, go to the laser printer manufacturer's website and download the color profile for the printer... that way, your monitor can be set to display colors the same way they'll apear on the printer. Otherwise, you can have the laser printer equivalent of out-of-gamut errors... ugly ugly ugly.
If you're sending the file to a 'proper' 4-color printing press, well, it gets much more complicated all of a sudden. That's why design shops didn't go out of business when 'Desktop Publishing' became possible! ;) That area, I'd rather see handled on a question-by-question basis, in a separate thread. Many books have been written...
How often would one use the same original files for both web work and print work? It sounds different enough that the originals might have to be in completely separate formats...
You're familiar with photography? The same photograph could be used for both mediums... it all depends on your scanner. As long as the original is high enough quality for print, there's no reason you can't 'butcher' a copy of it for web presentation.
For logos, and other oft-reused graphics, I'll keep the original print-quality electronic file. You can always downgrade the image for screen display, but a screen quality original will never cut it on a professional printing level.
Not to confuse, but to show the variables for printing.
D-max = the maximum combination of c+m+y+k
D-min = the minimum % value that is able to be reproduced.
max and min values vary upon the type of paper printed on and the printing press (offset or gravue)and the inks etc . . used on the press.
Usually d-min is 4-2-2 cmy on offset higher for gravure
d-max is around 320 on medium grade paper with a dot gain of 30%.
Proper midtone placement varies upon the subject of the image.
To sum it up, print specifications can be a little complexed.
Best bet is to create the image and let the pre-press professionals tweak the image for optimized printing.