homepage Welcome to WebmasterWorld Guest from 54.197.130.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Sepia tone..?
grnidone




msg:855499
 6:40 pm on Mar 25, 2001 (gmt 0)

What is a sepia tone and when does one need to use it?

-G

 

tedster




msg:855500
 9:45 pm on Mar 25, 2001 (gmt 0)

Photoshop has great tools for creating duotone and tritone images -- sometimes called halftones. This is essentially what sepia tone was, with sepia being the tinting color.

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.

grnidone




msg:855501
 11:28 pm on Mar 25, 2001 (gmt 0)

I don't have a clue about any of this stuff.

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.

-G

rcjordan




msg:855502
 12:25 am on Mar 26, 2001 (gmt 0)

I'm entirely self-taught (and it shows), most of what I've worked out in technique was acquired by loading up graphics in Lview and trying combinations of different features and filters until I found something I could use.

tedster




msg:855503
 1:00 am on Mar 26, 2001 (gmt 0)

One of the best PhotoShop tutorials I've ever seen online is at [nebulus.org...] Very clear, and not overly simplified -- really gives both theoretical and practical help

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...]

chiyo




msg:855504
 1:47 am on Mar 26, 2001 (gmt 0)

interesting discussion. We use sepia tones a fair bit, to give our more historic and cultural articles about Asia a bit of a different and "authentic" look.

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.

minnapple




msg:855505
 2:46 am on Mar 26, 2001 (gmt 0)

A brown sepia tone is composed of equal values of cyan magenta and yellow.

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.

chiyo




msg:855506
 4:10 am on Mar 26, 2001 (gmt 0)

thanks minapple. Now i dont have to use the plugins! Always better to know the theory than the application, then it expands creativity further.

Though i think the better word I should have used would have been "filters"

mivox




msg:855507
 5:54 am on Mar 26, 2001 (gmt 0)

Actually, sepia tone as a tint applied to 'regular' black and white photos is a technique used to mimc the original photographic process that produced speia-tone prints. I think it was the glass plate technique, used with a specific (no longer made) type of photographic paper.

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.

grnidone




msg:855508
 9:34 pm on Mar 26, 2001 (gmt 0)

>A brown sepia tone is composed of equal values of cyan magenta and yellow.
>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.

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"?

Thanks,
G

mivox




msg:855509
 10:20 pm on Mar 26, 2001 (gmt 0)

When you click on the foreground color box at the bottom of your toolbar, it will open the color picker window... on the right are a bunch of little text entry boxes. Find the column of boxes next to the letters C M Y and K. Enter the same number in the C, M and Y boxes, and (I assume) set the K box to zero.

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. :)

tedster




msg:855510
 10:31 pm on Mar 26, 2001 (gmt 0)

grnidone - printed materials are created in CMYK color space, rather than RGB, which is a color model for monitor colors. The color physics are different, because printed materials display color by reflecting light, where on-screen color comes to your eye by a process of refracting light.

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.

grnidone




msg:855511
 10:38 pm on Mar 26, 2001 (gmt 0)

OOOH!

I worked at an ad agency as a sales person, but they called them "plates" or "colors".

"That's an expensive ad, it uses 4 colors."

The term that got me was "pick the separation with".

OK..NOW I get it. Thanks so much!
-G

minnapple




msg:855512
 4:56 am on Mar 27, 2001 (gmt 0)

grnidone
Sorry for the shorthand.

>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.

minnapple

mivox




msg:855513
 8:21 am on Mar 27, 2001 (gmt 0)

Most users do not color balance their monitors

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...?

typophile




msg:855514
 11:29 pm on Mar 29, 2001 (gmt 0)

Oh my god.

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)

Next...

>Black is inexplicably referred to as K instead of B, ...

Yes, to avoid confusion with Blue.

Finally...

>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.

mivox




msg:855515
 11:48 pm on Mar 29, 2001 (gmt 0)

Actually, I *do* have some design background, but nobody had ever explained why CMYK "black" was "K"...

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.

grnidone




msg:855516
 7:25 pm on Mar 30, 2001 (gmt 0)

>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.

*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.

Thanks,
-G

tedster




msg:855517
 8:34 pm on Mar 30, 2001 (gmt 0)

At the risk of repeating my duotone/halftone gaff, I'm going to share what I think I know.

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.

grnidone




msg:855518
 10:58 pm on Mar 30, 2001 (gmt 0)

>RGB space is capable of a much wider range of color than CMYK.

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?

-G

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...

mivox




msg:855519
 11:14 pm on Mar 30, 2001 (gmt 0)

If you're used to RGB work (web work), CMYK color will be kinda disappointing... Your best bet, when designing a graphic for *both* print and web use will be to create it in CMYK space.

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.

minnapple




msg:855520
 5:18 am on Mar 31, 2001 (gmt 0)

grnidone

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved