Color Quantization by Distinctiveness
If I do a save for web & devices, I can quantize the colors.
The problem that I am having is the Photoshop appears to be quantizing by frequency rather than by distinctiveness. The result is a color table with a lot of similar colors. Colors that are not so frequently used but are distinctive in the image get a radical color change. In my images sight color variations are not significant.
It is possible to get Photoshop to quantize colors by distinctiveness?
If would be great if I could edit the color table and specify that two colors are to be merged.
Quantization happens in Indexed Color mode, GIF or PNG-8. For the Web this reduction
is not necessary, but you may have your reasons.
I'm understanding your question like this: even a very small red flower on a meadow
should not be ignored. Therefore my test image contains an extra small red square.
Parameters are:
1) Number of colors. Reducing this number, similar colors are put together, probably
averaged.
2) Quantization mode: Perceptual, Selective, Adaptive, Restrictive (Web colors).
I don't know what happens in the background, but I found an interesting result:
The red square is ignored in mode Perceptual and Selective, but retained in
mode Adaptive.
Perhaps for your purpose an individually chosen number of colors in mode Adaptive
can be used.
Best regards --Gernot Hoffmann
P.S.: You may try as well Image > Adjustment > Posterize (n levels per channel)
Message was edited by: G.Hoffmann (P.S.)
Similar Messages
-
Hi,
Is it possible to work with 16 bit colors in Photoshop ?
I have some bitmaps, where I would like to change the colortable from 24 bit colors to 16 bit colors.
Thanks,
best regards,
PoulLet us consider the possibilities of the file format Windows Bitmap BMP. Photoshop can save
as BMP with different color depths, but this has nothing to do with "Photoshop Bitmap".
Mode Indexed color (BMP, 8 bit per pixel) uses a color look-up table, a CLUT:
256 rows with 3 bytes for R, G and B (one byte each).
The image contains for each pixel one byte, which is a pointer to the CLUT, from where the
color bytes are taken. Finally we have a 24 bit per pixel color representation (True color).
For GIF it's almost the same, but one row in the CLUT means transparency.
Building the CLUT for an image which may contain originally 256^3 diffent colors is called
Color quantization (a key word for a further search).
If the display should require a smaller number of bits, e.g. 5R, 6G, 5B (green is more accurate),
then the CLUT can be taken from the Indexed color BMP image and modified:
R: Shift right 3 bits and round
G: Shift right 2 bits and round
B: Shift right 3 bits and round
Assemble R,G,B in one word with 16 bit.
Similarly, if the display should require 5R, 5G, 5B.
Such a table cannot be generated directly by Photoshop.
Mode High color (BMP, 16 bit per pixel) does not use a CLUT. Perhaps, at the time when these
file formats were developed, a CLUT with 2^16 rows was considered as nonsensical.
Photoshop can generate a BMP image with 16 bit per pixel by one of three modes, as explained
earlier in my previous post.
Thus it is possible to convert an image, which contains an arbitrary number of "swatches"
as defined by True Color 24 bit per pixel, into High color 16 bit per pixel by Photoshop. From the
result one can take the coding and build a table.
Arbitrary means: up to the maximal number, e.g. 32*64*32 swatches for 5R 6G 5B.
The further proceeding depends strongly on the decision only 256 colors / more colors.
Accepting the 16 bit per pixel limit, one may use a fixed full size CLUT and an automatic conversion
True Color – High Color with Dithering.
Best regards --Gernot Hoffmann -
New JAI tools GIFImageWriter -- losing color info
Hi --
I'm a newbie trying to take advantage of the new GIFImageWriter packaged in the JAI IIO tools distribution. I'm trying to use it to convert JPG to GIF. The problem is that my output file comes out as a bare black and white rendering. Can anyone spot my mistake in the following code? ( // lines are various options I've tried that have same effect)
Thanks!
David Lieberman
String inFilename = args[0];
String outFilename = args[1];
BufferedImage bImage1;
BufferedImage bImage2;
File fileIn = new File(inFilename);
File out = new File(outFilename);
bImage1 = ImageIO.read(fileIn);
//Color color = bImage1.createGraphics().getColor();
Color color = bImage1.getGraphics().getColor();
IndexColorModel colorModel = new IndexColorModel(8, 2,
new byte[]{(byte) (color.getRed() - 1), (byte) color.getRed()},
new byte[]{0, (byte) color.getGreen()},
new byte[]{0, (byte) color.getBlue()}, 0);
ColorConvertOp ccOp = new ColorConvertOp(bImage1.getColorModel().getColorSpace(), colorModel.getColorSpace(), null);
bImage2 = new BufferedImage(bImage1.getWidth(),
bImage1.getHeight(),
BufferedImage.TYPE_BYTE_INDEXED,
colorModel);
Graphics2D g2d = bImage2.createGraphics();
//g2d.drawImage(bImage1, 0, 0, bImage1.getWidth(), bImage1.getHeight(), null);
//g2d.drawRenderedImage(bImage1, null);
g2d.drawImage(bImage1, ccOp, 0,0);
ImageIO.write(bImage2, "gif", out);Hi David,
The main problem with JAI IIO GIFImageWriter is that it doesn't contain any color quantizer and as a result can't encode images with number of unique colors more then 256.
As I understand you've tried to to resample image's palette but I can't imagine where you've found such example: it's totally wrong. There are some special color quantization algorithms to reduce the number of unique colors such as Median-Cut, Octree etc. You can find their Java implementations (some of them open-source) using Google.
We use for this purposes the commercial solutions from Gif4J Software. If speed and quality is critical for you then try the Gif4J PRO Library (http://www.gif4j.com/java-gif-imaging-gif4j-pro-library.htm). It contains very fast and qualitative java color quantizer and also supports ImageIO API. The next example convert jpeg (or any other true-color format) to gif using Gif4J PRO library by 3 different ways:
import com.gif4j.GifEncoder;
import com.gif4j.quantizer.Quantizer;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
public class ImageIOExample {
public static void main(String[] args) {
try {
BufferedImage source = ImageIO.read(new File(args[0]));
// 1-st example:
// save as GIF using ImageIO (Gif4J jar should be in classpath)
// Gif4J Quantizer is used by default
ImageIO.write(source, "gif", new File(args[1]));
//2-nd example:
//Quantize image manually with the desired mode
BufferedImage quantized_1 =
Quantizer.quantize(Quantizer.MEMORY_NORMAL_OPTIMIZED_DITHER, source, 8);
ImageIO.write(quantized_1, "gif", new File(args[2]));
//3-d example:
// Use Gif4 GifEncoder instead of ImageIO and other quantization mode
BufferedImage quantized_2 =
Quantizer.quantize(Quantizer.MEMORY_NORMAL_FAST, source, 8);
GifEncoder.encode(quantized_2, new File(args[3]));
} catch (IOException e) {
e.printStackTrace();
} -
Color conversion with error diffusion
Good day.
I should must to be help to reduce the number of colors from 16M (true color) to 65k or 4096 or otthers.
I know also the bits number of each destination color. number.
I should want to use JAI.
The source image have png format with 16M true color.
Please, help me.
Best regards.
Stefano Erranihttp://www.gif4j.com/java-color-quantizer.htm
-
Color conversion with -toPostScript
Hi,
does anybody know how to set the 'Let printer determine colors' switch when creating postscript with acrobat reader 9 from command line?
Thanks in advanvcehttp://www.gif4j.com/java-color-quantizer.htm
-
The question is not so clear i will try to explain here.
I have a trackBar scroll event:
private void trackBar1_Scroll(object sender, EventArgs e)
LoadPictureAt(trackBar1.Value, sender);
ConvertedBmp = ConvertTo24(trackBar1FileInfo[trackBar1.Value].FullName);
ConvertedBmp.Save(ConvertedBmpDir + "\\ConvertedBmp.bmp");
mymem = ToStream(ConvertedBmp, ImageFormat.Bmp);
backTexture = TextureLoader.FromStream(D3Ddev, mymem);
scannedCloudsTexture = new Texture(D3Ddev, 512, 512, 1, Usage.Dynamic, Format.A8R8G8B8, Pool.Default);
timer1.Stop();
Button1Code();
timer1.Start();
b1 = ConvertedBmp;
b1.Save(ConvertedBmpDir + "\\b1.bmp");
trackBar2.Enabled = false;
if (!this.backgroundWorker1.IsBusy)
label2.Text = "מעבד נתונים";
this.backgroundWorker1.RunWorkerAsync();
else
this.backgroundWorker1.CancelAsync();
First LoadPictureAt method:
private bool LoadPictureAt(int nIndex, object c)
bool bRet = false;
if (nIndex >= 0 && nIndex < trackBar1FileInfo.Length)
if (c.Equals(trackBar1))
pictureBox1.Load(trackBar1FileInfo[nIndex].FullName);
bRet = true;
if (bitmaps != null)
if (nIndex >= 0 && nIndex < bitmaps.Length)
if (c.Equals(trackBar2))
pictureBox1.Image = bitmaps[nIndex];
bRet = true;
return bRet;
Then the ConvertTo24 method:
private Bitmap ConvertTo24(string inputFileName)
sw = Stopwatch.StartNew();
Bitmap bmpIn = (Bitmap)Bitmap.FromFile(inputFileName);
Bitmap converted = new Bitmap(bmpIn.Width, bmpIn.Height, PixelFormat.Format24bppRgb);
using (Graphics g = Graphics.FromImage(converted))
// Prevent DPI conversion
g.PageUnit = GraphicsUnit.Pixel;
// Draw the image
g.DrawImageUnscaled(bmpIn, 0, 0);
//converted.Save(outputFileName, ImageFormat.Bmp);
sw.Stop();
return converted;
Then ToStream method:
public static Stream ToStream(Image image, ImageFormat formaw)
var stream = new System.IO.MemoryStream();
image.Save(stream, formaw);
stream.Position = 0;
return stream;
What it does is taking a Bitmap image and make a doppler radar effect on it and detect color only places that there are pixels(clouds) in it.
Here is a screenshot:
You can see the doppler shape and it's moving around and highlight the places with clouds.
So when i move the trackBar1 to the left each time on another Bitmap image it's showing the doppler effect and the clouds.
The problem is with the trackBar2 scroll event:
First when i'm running my program and enteric to this new form that scan the clouds and show the doppler radar effect a backgroundworker1 is working:
private void backgroundWorker1_DoWork(object sender, DoWorkEventArgs e)
BackgroundWorker bgw = (BackgroundWorker)sender;
if (bgw.CancellationPending == true)
return;
else
while (true)
bitmaps = ImagesComparison.get_images_with_clouds(b1);
for (int i = 0; i < bitmaps.Length; i++)
bitmaps[i] = ConvertTo1or8Bit.ColorToGrayscale(bitmaps[i]);
break;
What it does is getting into bitmaps(Bitmap[]) 15 new bitmaps from one given bitmap. The given bitmap is b1.
b1 i'm using it in trackBar1 scroll event.
All the new Bitmaps in bitmaps variable array are Format32bppArgb.
While i checked on my hard disk the images(GIF type) i'm using with trackBar1 are all Bit Depth 8.
The images i'm using with trackBar1 scroll event are GIF types and Bit Depth 8 on the properties.
The images i'm using in trackBar2 are Bitmaps and they are Format32bppArgb.
So first thing i thought to convert all the 15 Bitmaps in bitmaps to 8bit:
for (int i = 0; i < bitmaps.Length; i++)
bitmaps[i] = ConvertTo1or8Bit.ColorToGrayscale(bitmaps[i]);
But it didn't work it's just turning them to black gray scale colors not what i was thinking about.
In the backgroundworker completed event i'm converting the bitmaps to 24 like i'm doing with the Gifs in trackBar1 scroll event:
private void backgroundWorker1_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
trackBar2.Enabled = true;
trackBar2.Maximum = bitmaps.Length -1;
bitmaps[0].Save(ConvertedBmpDir + "\\bitmapsfirstimage.bmp");
for (int i = 0; i < bitmaps.Length; i++)
ConvertedBitmaps.Add(ConvertTo24(bitmaps[i]));
ConvertedBitmaps[0].Save(ConvertedBmpDir + "\\ConvertedBitmapsFirstImage.bmp");
label2.Text = "עיבוד הנתונים הסתיים";
b1.Dispose();
Then in the trackBar2 scroll event:
private void trackBar2_Scroll(object sender, EventArgs e)
LoadPictureAt(trackBar2.Value, sender);
ConvertedBmp = ConvertedBitmaps[trackBar2.Value - 1];
ConvertedBmp.Save(ConvertedBmpDir + "\\ConvertedBmp.bmp");
mymem = ToStream(ConvertedBmp, ImageFormat.Bmp);
backTexture = TextureLoader.FromStream(D3Ddev, mymem);
scannedCloudsTexture = new Texture(D3Ddev, 512, 512, 1, Usage.Dynamic, Format.A8R8G8B8, Pool.Default);
timer1.Stop();
Button1Code();
timer1.Start();
The same i did with the trackBar1 scroll event.
But the result in trackBar2 i'm getting without using the grayscale convertion is this:
You can see that the color that make the scan now is more yellow or green/yellow and not the same like it is when i'm using the trackBar1.
I can't figure out where the problem is:
1. Maybe since the Bitmaps in the variable array bitmaps are all Format32bppArgb ?
2. Maybe they are Bitmaps and not Gif types like the images in trackBar1 ?
If it does working good with the gifs in trackBar1 scroll event then the whole code in the new form ScanningClouds is working fine so i will not add to here the whole ScanningClouds form code since it's long.
The problem is somewhere with the Bitmaps formas or bits in the variable bitmaps.
Maybe they are not the same or the right Bit Depth or maybe they are Bitmaps and should be Gifs.
bitmaps = ImagesComparison.get_images_with_clouds(b1);
This is the get_images_with_clouds method where i'm getting the new 15 Bitmaps.
public static Bitmap[] get_images_with_clouds(Bitmap radar_image)
int e = 0;
int f = 0;
int image_clock_area_x = 0;
int image_clock_area_y = 0;
int image_clock_area_x1 = 140;
int image_clock_area_y1 = 21;
Bitmap[] localImages;
localImages = new Bitmap[15];
Bitmap image;
image = new Bitmap(Properties.Resources.radar_without_clouds);
BitmapData bmD = null;
BitmapData bmD2 = null;
try
bmD = image.LockBits(new Rectangle(0, 0, image.Width, image.Height), ImageLockMode.ReadWrite,
PixelFormat.Format32bppArgb);
bmD2 = radar_image.LockBits(new Rectangle(0, 0, radar_image.Width, radar_image.Height), ImageLockMode.ReadOnly,
PixelFormat.Format32bppArgb);
IntPtr sc0 = bmD.Scan0;
unsafe
int* p = (int*)sc0.ToPointer();
int* p2 = (int*)bmD2.Scan0.ToPointer();
for (e = image_clock_area_x; e < image_clock_area_x + image_clock_area_x1; e++)
for (f = image_clock_area_y; f < image_clock_area_y + image_clock_area_y1; f++)
Color clock_color = Color.FromArgb(p2[e + f * bmD2.Width]);
p[e + f * bmD.Width] = clock_color.ToArgb();
image.UnlockBits(bmD);
radar_image.UnlockBits(bmD2);
catch
try
image.UnlockBits(bmD);
catch
try
radar_image.UnlockBits(bmD2);
catch
int c;
for (c = 0; c < localImages.Length; c++)
localImages[c] = new Bitmap(image);
Bitmap new_image = new Bitmap(Properties.Resources.radar_without_clouds);
Bitmap new_image1 = new Bitmap(Properties.Resources.radar_without_clouds);
Bitmap localbmptest = black_and_white(new_image, radar_image);
Image image1 = black_and_white(new_image, radar_image);
image1.Save(@"c:\temp\testclouds666.jpg");
Bitmap clouds = new Bitmap(image1);
int x;
int y;
int a;
int b;
int d = 0;
Bitmap redImage;
redImage = new Bitmap(512, 512);
using (Graphics g = Graphics.FromImage(redImage))
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.Half;
g.Clear(Color.Red);
BitmapData bmData = null;
BitmapData bmData2 = null;
BitmapData bmDataArray = null;
try
bmData = clouds.LockBits(new Rectangle(0, 0, clouds.Width, clouds.Height), ImageLockMode.ReadOnly,
PixelFormat.Format32bppArgb);
bmData2 = radar_image.LockBits(new Rectangle(0, 0, radar_image.Width, radar_image.Height), ImageLockMode.ReadOnly,
PixelFormat.Format32bppArgb);
IntPtr scan0 = bmData.Scan0;
IntPtr scan02 = bmData2.Scan0;
unsafe
int* p = (int*)scan0.ToPointer();
int* p2 = (int*)scan02.ToPointer();
double h, mm;
for (d = 0; d < localImages.Length; d++)
bmDataArray = localImages[d].LockBits(new Rectangle(0, 0, localImages[d].Width, localImages[d].Height), ImageLockMode.ReadWrite,
PixelFormat.Format32bppArgb);
IntPtr scan0Array = bmDataArray.Scan0;
int* pArray = (int*)scan0Array.ToPointer();
for (a = 0; a < new_image.Width; a++)
for (b = 0; b < new_image.Height; b++)
Color color1 = Color.FromArgb(p[a + b * bmData.Width]);
Color color2 = Color.FromArgb(p2[a + b * bmData2.Width]);
if (color1.R != 0 || color1.G != 0 || color1.B != 0)
h = color2.GetHue();
mm = RadarAnalysis.Hue2MMPerHour(h);
if (mm >= treshhold_array[14 - d])
pArray[a + b * bmDataArray.Width] = color2.ToArgb();
localImages[d].UnlockBits(bmDataArray);
clouds.UnlockBits(bmData);
radar_image.UnlockBits(bmData2);
catch (Exception error)
try
clouds.UnlockBits(bmData);
catch
try
radar_image.UnlockBits(bmData2);
catch
try
localImages[d].UnlockBits(bmDataArray);
catch
Logger.Write("Error Exception ==> " + error);
MessageBox.Show("Error Exception ==> " + error);
return localImages;
I think not sure but i think the problem is that the images on my hard disk i'm using with the trackBar1 scroll event are Gif type and the images i'm using with the trackBar2 scroll event are 15 Bitmaps.Hi,
"But it didn't work it's just turning them to black gray scale colors not what i was thinking about."
If you want it to be colored, you'll need to create a color-palette for the 8bppIndexed bitmaps. The keyword for this process is "Color-Quantization".
The whole yellow-green pie you get is from the wrong format. If you convert the 32bpp bitmaps to 24 bpp bitmaps, you loose the alpha channel ("transparency"). You can manually set one color to "transparent" with the mMakeTransparent-method
of the Bitmap class, or simply use gif-images (they are 8bpp with a transparent "key"-color)
Regards,
Thorsten -
Gif becomes grainy/pixelated in 'Save For Web'
Hello! I recently switched laptops and I have been having major issues trying to regain the quality gifs I used to make. After I have my gif set to go, I go to save it in 'Save For Web'. This is where all of my problems start. My gif no longer looks smooth, but the entire thing has a grainy or pixelated look -- and it doesn't change no matter how I fiddle with my settings. When switching from the 'original' to the 'optimized' tab in the save for web page, you can obviously see a loss of quality. It may be slight, but it makes a huge difference to me.
Here's a side by side reference:
Not sure if it will help, but here are my settings when saving (I have changed from 'pattern' to 'diffusion' and nothing changes):
Thank you for any help you can provide!First, JJMack is correct: lots of colours (around 32100) in this example do make it harder to convert without grain.
Second, the quality of the GIFs you produced in Save for Web (SfW) prior to the purchase of the new laptop were never any "better" - it merely means that the previous screen was unable to display the results at a decent enough quality to actually discern the differences between the original and the GIF version with reduced colours. Screen quality does matter.
Second, Photoshop's Save for Web colour reduction algorithms are quite old-fashioned, and (far) better methods are available. Not in Photoshop, however. For a good conversion you will have to look elsewhere.
Here is the original version @2x zoom (32101 colours):
Photoshop's version. The best visual quality I could achieve in SfW (diffusion dither at 81%, perceptual). Obvious banding issues, and a very grainy result.
Next up: RIOT (Radical Image Optimization Tool). RIOT features a newer "NeuQuant neural-net" colour quantization algorithm. Notice how the gradients are quite nicely retained, although here and there some issues pop up (lips/makeup, building, arm highlight, and greenery are missing colour). Overall, though, the final result is much less grainy looking than Photoshop's effort. At the expense of smaller areas with unique colours.
Next, let's try Color Quantizer with standard settings, a two factor gradient priority, and 256 colours. Dithering was set to Shiau-Fan @75%. Slight banding in the lighter areas of the background, and the building and lips are again missing colours from the original. Much less grainy than Photoshop's version.
Colour Quantizer features a quality mask brush, which allows us to safeguard smaller areas with unique colours from colour degradation. I painted a mask for the lips, the building and greenery in the background, the skin of the woman on the right in the background, the lighter area around the vent, and the forehead to preserve those areas' quality as much as possible.
I feel this result speaks for itself. There is slight banding visible in the lighter area of the wall on the right, but still much less pronounced compared to SfW's version. The colours are all there, especially the important ones for the makeup and the smooth facial tones of Kate. The shoulder's highlight is also preserved nicely. Even the woman on the right in the background looks spot on (which was yet another sore point in SfW's version).
Arguably the best version. Far superior to Photoshop's failed effort.
Fourth, if you are still using GIF to optimize still images: STOP NOW. GIF is terrible in comparison to properly optimized and compressed PNG files. Only use GIF when small animated movies are your goal.
Here is a 512 colour version produced in Color Quantizer (Photoshop's SfW function lets us down once more, unfortunately: there is no option to reduce an image to 512 colours for PNG):
This last version is visually (mostly) indistinguishable from the original, and clocks in at only 52kb.
Of course, if you are saving this as a still image, jpg should have been your choice in the first place, since it is a photo.
Conclusions:
- avoid Photoshop's "Save for Web" function if your intention is a quality colour reduction;
- avoid GIF for still images. Either use PNG or JPG. JPG works best for photos;
- avoid Photoshop and SfW if your intention is to optimize PNGs well. Sfw cannot save PNG files with reduced colours beyond 256 colours;
- fall back to external and/or online utilities to optimize PNG and GIF files. Color Quantizer and RIOT deliver better results than SfW. Or use online optimization tools to optimize animated GIFs (Optimize animated GIF). You can also optimize each frame in a tool such as CQ, and then import the individual frames into a animated GIF utility. Remember, each frame can save its own custom 256 colour palette;
- for optimum quality a quality mask tool, such as the one in CQ, is a very effective and efficient method to guarantee the best possible conversion;
- file sizes of png files created in external utilities almost always beat the ones generated in Photoshop and SfW;
- a better choice to export PNG files is Photoshop CC Generator. At least that one allows for 8bit PNG files with full transparency (another missing essential feature that SfW fails to provide).
Other resources (these refer to png, but are also effective for GIF optimization in Photoshop):
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
PNG Optimization Guide: More Clever Techniques - Smashing Magazine
Color Quantizer: Color quantizer
RIOT standalone version (no installation required): http://download.criosweb.ro/download.php?sid=R -
Can JButtons within applets copy to the clipboard?
camickr wrote in another thread:
As always I would like to see the Applet used that caused the problem. We should not have to create our own applet to test this. As we all know from the original problem you may be missing/adding code. And this posting is way off topic so any new SSCCE along with a new question should be posted in a new posting. If I understand the problem is that Ctrl+C works on a text area, but it doesn't work for a JButton that tries to copy text from the same text area?Not quite. Ctrl+C works within a JTable, copying selected row(s) to the clipboard. The problem is getting a JButton to copy arbitrary text to the clipboard, having nothing to do with a JTable.
Well post the simple 20 line applet that demonstates this.Sorry, it's more than 20 lines. I included three approaches, Jeanette's, Walter's, and mine.
* Created on 06.12.2010
* Jeanette, Walter, and Rich
import java.awt.EventQueue;
import java.awt.datatransfer.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.Toolkit;
import javax.swing.*;
public class ThreeCopyButtons extends JApplet implements ClipboardOwner
final JLabel first = new JLabel("Larry");
final JLabel second = new JLabel("Moe");
final JLabel third = new JLabel("Curly");
static ThreeCopyButtons cb3;
public JPanel getContent() {
JButton kleo = new JButton("Kleo");
cb3 = this;
TransferHandler handler = new TransferHandler() {
* @inherited <p>
@Override
protected Transferable createTransferable(JComponent c) {
return new StringSelection(cb3.toString());
* @inherited <p>
@Override
public int getSourceActions(JComponent c) {
return COPY;
kleo.setTransferHandler(handler);
kleo.setAction(TransferHandler.getCopyAction());
kleo.setText("Kleo"); // gets overridden by "copy"
AppletCopyButton walt = new AppletCopyButton("Walt", toString());
JButton rich = new JButton("Rich");
rich.addActionListener( new ActionListener() {
public void actionPerformed(ActionEvent e) {
StringSelection ss = new StringSelection(cb3.toString());
Clipboard cb = Toolkit.getDefaultToolkit().getSystemClipboard();
cb.setContents(ss, cb3);
JComponent buttons = new JPanel();
buttons.add(kleo);
buttons.add(walt);
buttons.add(rich);
JPanel labels = new JPanel();
labels.add(first);
labels.add(second);
labels.add(third);
JPanel box = new JPanel();
box.setLayout(new BoxLayout(box, BoxLayout.Y_AXIS));
box.add(buttons);
box.add(labels);
return box;
public String toString() {
String s = first.getText() + "\t" +
second.getText() + "\t" +
third.getText();
return(s);
// Empty method needed for implementation of the ClipboardOwner interface.
public void lostOwnership( Clipboard aClipboard, Transferable aContents) {
//do nothing
// method expected by applets
public void init()
{ // the static block above should have already executed
try {
javax.swing.SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
JPanel frame = getContent();
setContentPane(frame);
} catch (Exception e) {
System.err.println("makeContent() failed to complete: " + e);
e.printStackTrace();
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
JFrame frame = new JFrame("Test");
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.add(new ThreeCopyButtons().getContent());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
// Walter Laan
class AppletCopyButton extends JButton {
public AppletCopyButton(String label, String text) {
super(label);
final String clip = text;
setTransferHandler(new TransferHandler() {
// @Override
protected Transferable createTransferable(JComponent c) {
return new StringSelection(clip);
// @Override
public int getSourceActions(JComponent c) {
return COPY;
addActionListener(new ActionListener() {
// @Override
public void actionPerformed(ActionEvent e) {
Action copy = TransferHandler.getCopyAction();
copy.actionPerformed(new ActionEvent(AppletCopyButton.this,
ActionEvent.ACTION_PERFORMED, "copy"));
}Here is a manifest file I call "3cbManifest.txt".
Main-Class: ThreeCopyButtonsMake sure you preserve the trailing carriage return.
]javac ThreeCopyButtons.java
]jar cvfm ThreeCopyButtons.jar 3cbManifest.txt *.class
]java -jar ThreeCopyButtons.jar
(The latter command simply tests, but it is running as program, not applet.)
And here is a short HTML file to run it as an applet. I call it "3cb.html".
<html>
<head><title>TestApplet</title></head>
<body>
<applet code="ThreeCopyButtons.class"
archive="ThreeCopyButtons.jar"
width="450" height="300">
Your browser is completely ignoring the <i>applet</i> tag!
</applet>
</body>
</html>The three buttons match our three approaches:
* Kleo -- Jeanette's approach
* Walt -- Walt's approach
* Rich -- my approach
All three methods work fine as a program, whether running directly as classes or from the .jar. None however work as an applet, from the HTML page.
To test either as applet or program:
1) open a text editor
2) type something short
3) Ctrl+C copy what you typed
4) click the Kleo button
5) in editor, click <enter> and Ctrl+V to paste
6) observe whether you see the text from step 3 or "Larry Moe Curly", with <tabs> between words.
7) repeat steps 3-6 for the Walt and Rich buttons
If you can figure out how to get the applet to bypass its security wall, great. We've found a bug in Java's applet security. If not, I am resigned to having the button in my actual app copy info to the table instead of to the clipboard.RichF wrote:
You are right, but aw gee whiz. Have you ever written something that you think is pretty neat, then have to throw it away? hahahahahaha ... sure, happens nearly every day :-)
My class QEPanel, which handles each row of the statistics, is like that.yeah, have seen it: pretty nasty mixing of view and data <g>
Hmm, I wouldn't actually have to throw most of it away. :) correct ...
The JLabel <b>label</b>s would become the table column labels, and the other JLabels would become integers specifying column. except that I don't completely understand what you are after here (ehem: get your vocabulary right, sir) a clean separation would map the data-part of a QEPanel into a QEBean, with properties title (was: label), percentRed ... etc. Something like:
public class QEBean extends AbstractBean {
private float sumRed, sumGrn, sumBlu;
private float minDist = 9999999;
private float maxDist = 0;
private double sumDist;
private int count;
private int entries;
private CountPerEntries countPerEntries;
private String title;
public QEBean(String title) {
this.title = title;
public void reset() {
// do reset
firePropertyChange(null, null, null);
public void updateData(Color quantized, Color actual) {
// do update internals
firePropertyChange(null, null, null);
//------------ getters...
public String getTitle() {
return title;
public float getPercentRed() {
if (count == 0)
return 0f;
return sumRed / count;
// more getters
}Then implement a specialized TableModel which knows about QEBean
public class QEBeanTableModel extends AbstractTableModel {
List<QEBean> errors = new ArrayList<QEBean>();
private PropertyChangeListener errorChangeListener;
@Override
public int getColumnCount() {
return 7;
@Override
public int getRowCount() {
return errors.size();
@Override
public Class<?> getColumnClass(int columnIndex) {
switch (columnIndex) {
// implement as appropriate
return Object.class;
@Override
public Object getValueAt(int rowIndex, int columnIndex) {
QEBean error = errors.get(rowIndex);
switch (columnIndex) {
case 0:
return error.getTitle();
case 1:
return error.getPercentRed();
// more as appropriate
return null;
public void addError(QEBean error) {
int oldSize = getRowCount();
error.addPropertyChangeListener(getPropertyChangeListener());
errors.add(error);
fireTableRowsInserted(oldSize, oldSize);
public QEBean getError(int row) {
return errors.get(row);
private PropertyChangeListener getPropertyChangeListener() {
if (errorChangeListener == null) {
errorChangeListener = new PropertyChangeListener() {
@Override
public void propertyChange(PropertyChangeEvent evt) {
int row = errors.indexOf(evt.getSource());
fireTableRowsUpdated(row, row);
return errorChangeListener;
public void resetAll() {
for (QEBean error : errors) {
error.reset();
}Then use the model in HelpBox:
// init model and keep in field
qErrors = new QEBeanTableModel();
qErrors.addError(new QEBean("Hex QE"));
qErrors.addError(new QEBean("Name QE"));
qErrors.addError(new QEBean("Mismatch QE"));
qErrors.addError(new QEBean("SearchAccuracy"));
// can't resist - JXTable would make customization so much easier :-)
// JXTable errorTable = new JXTable(qErrors);
JTable errorTable = new JTable(qErrors);
errorTable.setBackground(Color.BLACK);
errorTable.setSelectionBackground(Color.BLACK);
errorTable.setForeground(Color.WHITE);
errorTable.setSelectionForeground(Color.WHITE);
errorTable.setGridColor(Color.BLACK);
// install renderers which produce an output similar to the labels
panel.add(errorTable)
// in the update methods - update the QEBeans stored in the model
public void updateQE(int which, String q, String a)
Color quantized = Color.black;
Color actual = Color.black;
int rgb[] = { 0, 0, 0 };
NTC.getRGB(q, rgb);
quantized = new Color(rgb[0], rgb[1], rgb[2]);
NTC.getRGB(a, rgb);
actual = new Color(rgb[0], rgb[1], rgb[2]);
qErrors.getError(which -1).updateData(quantized, actual);
// similar in reset, updateEntriesThat's all and will give you an output very similar to the rows of individual labels, only more symetric.
The toString() method would go away because row toString() is already built into JTable.ehhh? No, not that I know of :-) The default renderer uses the toString of the cell value, the row is not involved.
>
Then you can implement the button's action to copy that error table's content to the clipboard. Better usability ensured, IMO.I'll just throw away the darn button. The colorTable doesn't have one, so why should the statisticsTable? sure, that's an option - the visual setup outlined above is for hiding the table-nature, if you want it expose, just do - no problem.
Cheers
Jeanette -
This text guide helps you find most major new features in Photoshop CS. For a comprehensive video walkthrough, see this Ask A Pro session with Senior Product Manager Zorana Gee.
Retouching and transforming
Content-Aware Move tool
The Content-Aware Move tool lets you quickly recompose images without complex layering or slow, precise selections. Extend mode convincingly expands or contracts objects such as hair, trees, or buildings. Move mode lets you place objects in completely different locations (most effectively when the background remains similar).
In the toolbar, hold down the Spot Healing Brush, and select the Content-Aware Move tool.
In the options bar, choose Mode > Extend or Move. Adaptation options control how closely the new area reflects existing image patterns.
In the image, circle the object you want to extend or move, and drag it to a new location.
Tip: To best extend architectural objects, use photos shot on a parallel plane, rather than at an angle.
Content-Aware Patch tool
The updated Patch tool includes a Content-Aware option that seamlessly replaces unwanted image elements by synthesizing nearby content. The natural-looking results are similar to Content-Aware Fill, but the Patch tool lets you select the area from which the fill is drawn.
In the toolbar, hold down the Spot Healing Brush, and select the Patch tool.
In the options bar, choose Patch > Content-Aware. Adaptation options control how closely the patch reflects existing image patterns.
In the image, circle the area you want to replace, and drag over the area you want to generate a fill from.
Redesigned Crop tools
The redesigned Crop tool provides an interactive preview so you can better visualize results. A streamlined set of toolbar options includes a helpful Straighten tool, and aspect ratio controls you can adjust while a crop is active in the image window. (To maintain the current aspect ratio or resolution, right-click the image to access additional options.)
To crop an image, click the Crop tool in the toolbar. Then either adjust default crop borders in the image window, or drag in the window to start with specific borders.
Note: If you deselect Delete Cropped Pixels to apply a nondestructive crop, you can later click the image to see areas outside current crop borders.
To correct image perspective, hold down the Crop tool and select the Perspective Crop tool.
Type
Paragraph and Character styles
In the Window > Paragraph Styles panel, create, store, and reapply the characteristics of groups of highlighted sentences. In the Window > Character Styles panel, specify the look of selected letters, words, or phrases.
Double-click existing styles to edit them and update all associated text in the current document. From the panel menus, save and load styles to apply them to other documents. Or drag styles from one document to another.
Type styles are hierarchical: Manual overrides replace any applied character styles, which in turn replace applied paragraph styles. This hiearchical approach lets you combine the efficiency of styles with the flexibility to customize your designs.
Tip: To create a style without first selecting text, click the Create New Style icon [ICON] at the bottom of the Paragraph or Character Styles panel. To edit a style without applying it to text, select an image layer, such as the Background.
Drawing
Vector layers
The Line and Shape tools now create fully vector-based objects. Apply strokes and fills using the options bar. Stroke objects with dashed lines and other designs. Fill objects with preset or user-defined gradients, colors, and patterns.
To later revise stroke and fill settings, simply select the object layer, and then select the Path Selection or Direct Selection tool.
Tip: To reduce anti-aliased edges, ensuring that vector objects look as sharp as possible, select Align Edges in the options bar.
Intuitive path editing
By default, dragging with the Direct Selection tool adjusts multiple related segments, letting you quickly transform path shapes. To edit only segments between selected anchor points, reflecting previous Photoshop versions, select Constrain Path Dragging in the options bar.
Video
Choose Window > Timeline to access the redesigned, clip-based Timeline panel, including transitions and effects that give finished videos professional polish. Easily change clip duration and speed, and apply motion effects to text, still images, and Smart Objects.
Video Groups combine multiple video clips and content such as text, images, and shapes on a single Timeline track. Separate audio tracks allow for easy editing and adjusting.
The redesigned video engine also supports a wider range of import formats. When you're ready to output final video, choose File > Export > Render To Video. Photoshop provides helpful presets and options for the DPX, H.264, and QuickTime formats.
Note: In Windows, you must install QuickTime separately.
Correcting wide-angle lenses
Choose Filter > Adaptive Wide Angle to quickly straighten lines that appear curved in panoramas or photos shot with fisheye and wide-angle lenses. The filter uses the physical characteristics of individual lenses to automatically correct images.
Fine-tune the adjustments with these options in the Adaptive Wide Angle dialog box:
In the upper left of the dialog box, choose the Constraint or Polygon Constraint tool. Then drag across key objects you want to straighten or align vertically or horizontally. (If necessary, right-click constraint lines in the image, and choose an orientation from the pop-up menu.)
In the upper right of the dialog box, choose the lens type and focal length, and adjust Scale andCrop Factor to compensate for any blank image areas the filter introduces. (To save and load customized settings for use with future images, click the menu icon.)
Tip: To see a visual representation of the transformations applied to the image, select Show Mesh at the bottom of the dialog box.
Photographic blur gallery
Choose Filter > Field Blur, Iris Blur, or Tilt-Shift to quickly create three distinct photographic blur effects with intuitive on-image controls.
Use Iris Blur to add one or more focus points to your photo. Then move the on-image controls to alter the size and shape of the focus points, the amount of blur in the rest of the image, and the transition between sharp and blurred areas.
For a different look, build a gradient blur effect using the Field Blur option, placing multiple pins with different blur amounts. Or align blur along one or more planes with the Tilt-Shift option.
With the blur adjustments complete, style the overall effect with Bokeh brightness and color controls.
Tip: Combine multiple blur types to produce creative results.
Camera Raw 7
Simplified Basic controls in the Develop tab improve highlight and shadow rendering. New local corrections are available for white balance, highlights, shadows, noise reduction, and moiré.
The new Basic sliders and new local adjustments options appear when you process new images or convert previously-processed images to Process Version 2012 (PV2012). To convert an image, click the exclamation-point icon in the lower-right corner of the image preview area.
Selecting and adjusting colors
Skin-tone selection and face-detection
Choose Select > Color Range. Then, from the top pop-up menu in the Color Range dialog box, choose Skin Tones to easily isolate those tones. To reduce the resulting selection to faces in the image, select Detect Faces.
Or, start off by selecting only faces: Choose Sampled Colors from the top pop-up menu, and then select Localized Color Clusters and Detect Faces. This approach lets you use the eyedropper samplers to refine the selection.
Note: To create a selection that preserves skin tones while you adjust the color of everything else, select Invert below the eyedropper samplers.
Improved Auto corrections
Perfectly enhance your images in a single step with improved Auto options for theLevels, Curves, and Brightness/Contrast adjustments.
Painting and patterns
Oil Paint filter
Choose Filter > Oil Paint to easily create the look of a classic painting.
Erodible and airbrush tips
Choose Window > Brush Presets to quickly access new erodible and airbrush tips, or Window > Brush to customize them.
Erodible pencils and pastels wear down naturally with use. Customize a variety of Brush Tip Shape options: Softness controls the rate of wear, Shape provides settings from flat to round, and Sharpen Tip returns to original crispness. As you paint, watch the amount of wear with the Live Brush Tip Preview to the upper left of the image.
Airbrush tips replicate spray cans with a 3D conical spray. Customize Brush Tip Shape options like Granularity,Spatter, Hardness, and Distortion controls. With a stylus, alter the spread of sprayed strokes by changing pen pressure.
Brush Pose holds stylus tilt, rotation, and pressure
Choose Window > Brush, and select Brush Pose to paint with a specified tilt, rotation, and pressure. Use a stylus to change the stroke relative to the default pose, or select Overrideoptions to maintain a static pose.
Brush Projection applies stylus tilt and rotation to tip shapes
Choose Window > Brush, and select Shape Dynamicsfrom the list at left. At the bottom of the options at right, select Brush Projection. As you paint with a stylus, changes to tilt and rotation alter the tip shape.
Color Dynamics remain consistent for each stroke by default
Color Dynamics settings automatically vary color as you paint. In previous versions of Photoshop, dynamics settings changed color for each distinct tip stamp in a stroke. In Photoshop CS6, however, dynamic changes occur once at the beginning of each stroke. This lets you vary color between strokes, rather than within each individual stroke.
To revert to the behavior of previous versions, choose Window > Brush, and select Color Dynamics from the list at left. At the top of the options at right, select Apply Per Tip.
Scripted patterns
Select Edit > Fill, choose Pattern from the Use menu, and then select Scripted Patterns to choose from several geometric options. Build sophisticated designs by combining these scripts with Custom Pattern presets and blending modes.
Workflow and workspace
Fresh new look
Work with a fresh, elegant interface with design enhancements like the following:
Select from four different brightness levels: Choose Edit > Preferences (Windows) or Photoshop> Preferences (Mac OS). In the Interface section, select a Color Theme swatch.
Note: To quickly decrease interface brightness, press Shift + F1. To increase brightness, press Shift + F2.
On-image displays keep you informed as you use your favorite tools, showing dimensions for selections, angles for transformations, and more. To adjust the placement of these values, in the Interface preferences, choose an option from the Show Transformation Values menu.
A new Mini Bridge gallery offers easier access to images and documents. Choose Window >Extensions > Mini Bridge.
To maximize screen space, functions formerly in the application bar have moved elsewhere. To switch between Standard and Full Screen display modes, click the button at the bottom of the toolbar.
Speed from Mercury Graphics Engine
Experience blazing-fast interactions with processing intensive commands likeLiquify, Warp, Puppet Warp, and Crop.
Layer filtering
At the top of the Layers panel, new filtering options help you find key layers in complex documents quickly. Display subsets of layers based on name, kind, effect, mode, attribute, or color label.
Preset migration and sharing
Choose Edit > Presets > Migrate to easily move presets, workspaces, preferences, and settings from Photoshop CS3 and later to Photoshop CS6. Choose Edit > Presets > Export/Import PresetsYou should note the licence restrictions for the Apex 3.0 download
"Provided you have a current license to use Oracle database programs and are currently receiving technical support from our organization for such Oracle database programs, we grant you a nonexclusive, nontransferable limited license to use the programs solely for your internal business operations subject to the terms of this agreement and the license grants and restrictions set forth with your licensing of such Oracle database programs."
Mostly Apex 3.0 on XE will be an Apex licence violation unless you also have a support contract. -
IPad is only works with changer , when I unplug it's not working
My iPad 3 is only works with changer when I unplug it's not working and not connecting to the PC even please some help?
Hi,
"But it didn't work it's just turning them to black gray scale colors not what i was thinking about."
If you want it to be colored, you'll need to create a color-palette for the 8bppIndexed bitmaps. The keyword for this process is "Color-Quantization".
The whole yellow-green pie you get is from the wrong format. If you convert the 32bpp bitmaps to 24 bpp bitmaps, you loose the alpha channel ("transparency"). You can manually set one color to "transparent" with the mMakeTransparent-method
of the Bitmap class, or simply use gif-images (they are 8bpp with a transparent "key"-color)
Regards,
Thorsten -
How hard is it to learn Photoshop ?
Hi everyone,
Curious in learning how to use this software, have heard some good and fair comments about it's use.
I have a few websites I design myself and am looking to now enhance all of my graphics.
I rank well on google, so I'm trying to not to lose any advantage with having slow graphics or just an average looking site.
Still learning how to edit images, it's fun, but time consuming to a newbie such as me.
I am currently using gimp, but feel its very limited.
thanks
BrianIt's all relative, and also depends on how much you really need to know about Photoshop in terms of the things you require for your work. For web related work it may take a beginner from a couple of weeks to a couple of months to become proficient.
A word of warning, though. If you are looking for the best png export with the perfect balance between quality and file size: look elsewhere. Photoshop's save for web function is far too limited in this regard. You will have to post-process PNGs generated by Photoshop in third-party tools, like Color Quantizer.
Hopefully PS's web export will see an overhaul at some point. The png export is pretty worthless in the current versions. I believe there are some png export plugins that remedy this partly - but you will still not have the best control. -
Can't Get Images to Line Up Horizontally Within Div
I'm making a Fluid Grid Layout webpage. The bottom div contains 4 square images in a horizontal line. In the mobile mode, I want these 4 images to remain in a horizontal line and shrink to fit. I tried Block - Display - Inline-Block and I tried Block - Whitespace - nowrap, but neither works. The images just wrap themselves below one another without shrinking in size. They only shrink when I drag the entire page horizontally to less than the width of any one image.
This is the page:
http://savcp.com/index-fluid-12.htmlHave a look at my version:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
#awards {
margin: 0 auto;
padding-bottom: 4%;
vertical-align: top;
width: 60%;
.columns {
float: left;
.four {
width: 25%;
.columns img {
display: block;
width: 100%;
padding: 10px;
<div id="awards" class="clearfix">
<div class="four columns">
<img alt="Manhattan Bride" src="placeholder.png">
</div>
<div class="four columns">
<img alt="The Knot" src="placeholder.png">
</div>
<div class="four columns">
<a href="pressrelease-01.html">
<img alt="Bride's Choice" src="placeholder.png">
</a>
</div>
<div class="four columns">
<a href="http://www.mitzvahmarket.com/mitzvah-ideas/misc/dancejock-productions-present-madisons-squ are-garden/">
<img alt="Mitzvah Market" src="placeholder.png">
</a>
</div>
</div>
This works - set the width of the #awards container to a percentage that works for you. You may want to add a max-width and min-width in em/px to limit the fluid design somewhat.
This would also work on the "how we met" page.
Al Sparber is correct in saying you should unfloat those divs when the screen size becomes too narrow to accomodate those four columns.
And a couple of other tips/suggestions:
- #awards: remove clear:both (apply clearfix instead); remove display:block (a div is by default a block level tag already); remove float:left; (no need to float this to the left); remove margin-left:0 (a div by default already is set to a margin of 0 on all sides); and remove the width:100% (all block level tags by default go as wide as they can, so again no need for 100% width)
- you have three rules with mostly identical properties set for the #awards div. Clean this up, and define only one id selector.
- same for all the other main layout elements: three rule definitions for each! Think DryCSS (Don't Repeat Yourself). And only apply css properties that actually change the default behaviour of an element.
- remove the float:left, clear:both and display:block from all those layout divs as well. Why would you add these to your main layout elements?
- only apply a clearfix to parent layout elements that contain floated child elements.
- when the pagecontainer div is set to a width, do not add 100% width to the child layout elements. Not required.
- most of your image elements are missing the alt attribute. You should add those (otherwise the html will not validate).
- structure your menu with an unordered list
- The non-flash version of the image slideshow uses the gif image format. Unless you mean to add an animated gif Instead either use jpg or png. Many reasons for this - google it. And do not use Photoshop's limited save for web function to optimize your pngs. In my opinion, use other tools for both jpg and png (Color Quantizer, anyone?). Saves a LOT of bandwidth. -
Why does the Fireworks save for web function give better results than in Photoshop?
Having used the trial version of Fireworks, I have noticed that the save for web function gives greater compression and image quality than saving for web in Photoshop. Why is this?
As Adobe are not continuing in developing Fireworks, does anyone know if will they will improve the save for web function in Photoshop to match the Fireworks version?
Are there any third party companies who anyone can recommend who will process large volumes of images for web?
ThanksOne of my favourite topics ;-P
First, the save for web function in Photoshop has not seen any real updates in a long time. In Fireworks PNG export allows for fully transparent optimized files with indexed 256 or less colours, which is impossible in the save for web function in Photohop. It is unsupported.
This is one of the reasons why Fireworks does a much better job than Photoshop. Another reason is that Photoshop adds meta junk in its exported files, and this also increases the file size (and should be removed, because there are also a number of fields which include information about your setup).
One other caveat is that Photoshop's save for web functions neither allows for a choice in chroma subsampling, and instead decides automatically below a certain quality threshold to degrade the colour sharpness quality. The user has no control over this. (Fireworks also limits the user this way.)
One thing to be careful of: FW's jpg quality setting, and PS's quality settings are very different - a 50 in Photoshop is not the same 50 setting in Fireworks.
For jpg optimization I generally use RIOT (free): http://luci.criosweb.ro/riot/
(When you install, be careful NOT to install the extra junkware!)
Fireworks cannot change the chroma subsampling to 4:2:0, which does degrade the quality a bit compared to RIOT and Photoshop in my experience. Photoshop adds useless meta information, even if the user tells it not to do that. RIOT allows you to remove that information, saving 6k. RIOT also offers an automatic mode that optimizes existing jpg images without degrading the quality further, and often saves 10k or more, depending on the images.
Interestingly enough, in my tests exported Fireworks jpg images are always reduced in file size by RIOT, due to FW's jpg export limitations, without any image degradation.
In my tests FW's jpg quality versus file size turns out to be the worst of all three. RIOT generally wins, or is at least on par with Photoshop.
As for PNG export, Photoshop's save for web function is quite abysmal. No 256 colour full transparency export is possible, while Fireworks does support this.
Having said that, there is a free alternative that leaves both Photoshop AND Fireworks in the dust: Color Quantizer. http://x128.ho.ua/color-quantizer.html
CQ is an amazing little tool: with it anyone can create PNG files with full transparency and reduced to ANY number of colours! It means that a 512 colour PNG with full transparency is now very easy to do. On top of that, for more difficult images a simple quality mask brush tool allows the user to control and retain even small colour details in a PNG, while reducing the file size to an absolute minimum.
CQ is one of the best kept secrets of a Web Developer's toolkit. And it is free!
Both RIOT and Color Quantizer have a built-in batch mode. Both are available for WIndows. Not for Mac. If you are on a Mac, try imageOptim. Not nearly as good as RIOT and CQ, but quite passable.
PS to be fair, the newest versions of Photoshop do allow for export of 8bit PNGs with full transparency through the use of its Generator functionality. But again, it cannot compete with CQ. And as far as I am aware, Generator cannot be used in Photoshop's batch processing (which, btw, is very slow! For simpler daily image processing tasks I have to do in batches, I prefer IrfanView, which is lightning fast! IrfanView). -
Question for experts: SVG vs GIF
Hello everyone
Lets say I have a website that is populated with multiple simple and complex, plain white icons. These icons will be resized in muse where needed, sometimes they will be with reduced opacity. The website is heavy on parallax scrolling and fading (opacity), and most – if not all – of the icons will be using one or both scrolling effects.
Exporting them from illustrator the GIFs are sometimes smaller in size than the SVGs.
The target audience is expected to have decent and updated computers e.g. IE 8 and below not relevant. let us suppose all users have Browsers capable of handling SVGs, and parallax.
What is better or easier for the browser? SVGs of GIFs? even if the size of the GIFs is smaller?
is rendering somewhat complex SVGs (many anchor points) "harder" than GIFs?
Any reason to not prefer SVGs except for backwards compatibility with older browsers/machines?
What would be best practice here?
Any advice/discussion/opinion greatly appreciated.
Jorge VallejoFirst, GIF should be avoided in favour of PNG: a well optimized PNG is always smaller in file size and also offers more quality options (for example more than 256 colours that GIF allows for). The trouble is that Adobe products cannot achieve this without jumping through a LOT of hoops. More about that below.
Here is a bitmap - SVG performance comparison:
1) SVG files must be drawn & rendered in the browser. That means the xml data must be read, interpreted, and displayed - which is far slower than a bitmap. A png still has to be decompressed, which does not take up a lot of processing power. Rendering a SVG is far slower (incomparably slower depending on the complexity).
2) bitmaps are generally hardware accelerated (via the GPU), a number of svg operations are not. For example, I believe css transforms for SVG is not hardware accelerated, and thus very slow to animate through that method.
3) somewhat older browsers have trouble rendering many individual SVG objects. For example, only in March 2014 was this issue resolved in Firefox.
4) svg performance is highly dependent on the specific browser as well. Take this test:
http://jsperf.com/d3-svg-opacity
It runs fastest on Opera and IE 11 on my system! Firefox is dreadfully slow.
5) SVG rendering is far slower on mobile platforms. Unless very simple ones, convert to png files.
Now, as to your files: an SVG sized at 500kb is a LOT - and then you mention you will have more SVG files ranging from less then 100kb up to more than 200kb. My question would be what type of graphics these will be in your page: background graphics, icons, ...?
Besides, SVG images produced by Illustrator can (should) be optimized. A good tool for that is SVGO: svg/svgo · GitHub a visual version can be downloaded at svg/svgo-gui · GitHub
Some must-read articles:
http://css-tricks.com/using-svg/
http://jaydenseric.com/blog/how-to-optimize-svg
http://kylefoster.me/svg-slides/#/
If you are doing a lot of animation, and there are a lot of other things going on in a page, then PNG is the way to go. SVG is best for simpler logo graphics and icons. Game developers using Flash also always convert all their vector files to bitmaps for much improved performance in Flash!
Now to my second point: Adobe's Save for Web function is abysmal for png optimization. Yes, there are techniques in Photoshop to improve the optimization of PNG images, but it takes a lot of effort:
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
PNG Optimization Guide: More Clever Techniques - Smashing Magazine
And even after all this work, you still cannot export a PNG with a limited colour palette with full transparency in either Photoshop or Illustrator. This is important for file sizes: especially Muse websites tend to be so bloated that they take a long time to load up - and there is really no reason for this if you optimize your graphics properly.
To optimize any PNG file, use Colour Quantizer:
Color quantizer
I cannot live without this little (freeware) tool anymore - it is worth booting your mac in Windows mode just to use CQ to optimize your png files. It automatically takes care of optimizing your png files, reducing them to the absolute minimum - compared to Photoshop's standard Save for Web disaster, file sizes are at least 50% smaller in file size or more. And it includes a very simple to use quality mask brush that allows you to control/fix areas which may be troublesome when reducing the number of colours.
Having said that, it really depends on the type of graphics you are intending to place in your layout. Could you post some examples? -
Display totals of 0 when no rows problem
i have the following data
code code2 rank id
a1 red ff 1
a1 red ff 2
a1 red cm 3
a1 blue ff 4
a1 blue ff 5
a1 blue ff 6
a1 blue wma 7
I want to display this grouped as follows
a1 red ff 2
a1 red cm 1
a1 red wma 0
a1 red wmb 0
a1 blue ff 3
a1 blue cm 0
a1 blue wma 1
a1 blue wmb 0
i can retrieve the counted totals of id okay and include the wma, wmb rank but can only display them once not within each group of code, code2
Any Help?Hi,
You're correct that you need an outer join.
If you make your present query an in-line view, it doesn't matter what's going on inside it: you can OUTER JOIN to the result set as you need to.
Try this
WITH
original_query AS
select s.code, w.watch, r.code
AS r_code -- Make names unique
, count(*) amt
from frs_station_assignments sa,
frs_stations s, frs_watches w, frs_firefighters f,
frs_ranks r
where r.code = f.rnk_code
and sa.fgt_id = f.id
and sa.stn_id = s.id
and sa.wch_id = w.id
and r.code in ('CM','FF', 'WMA','WMB')
and s.code = 'A1'
and w.watch in ('RED','WHITE','BLUE','GREEN')
group by s.code, w.watch, r.code
-- ORDER BY is done in main query
SELECT code
, colors.watch
, r_code
, NVL (amt, 0)
FROM colors
LEFT OUTER JOIN original_query oq
ON colors.watch = oq.watch
order by code, watch, r_code;If you don't have a colors table (with one row for every possible color), you can use another in-line view:
WITH
colors AS
SELECT DISTINCT watch
FROM frs_watches
WHERE ... -- If necessary
original_query AS ...
[PRE]
If frs_watches is the colors table, then take all references to it out of the big in-line view, and put them in the main query.
Maybe you are looking for
-
Why doesn't my new password work ?
I have requested and received your instructions for changing my password TWICE ! Each time I made the change and received your email to acknowledge the change. However, when I try to update Reader, as it appears on my computer dashboard, it will no
-
Up dated to itunes 10.4 now i get an error and wont open HELP!!!!
is anyone having this issue? I updated to 10.4 now I can't even open ituns with out and error popping up I even tried to do it again but same problem...can anyone help me...
-
windows xp pro version 2002 SP 3. firefox 3.6.18
-
I am creating a document i pages (which I will export to a pdf) for printing and the printer has asked me to create a 1/8 bleed. Is this possible in pages? If so any pointer would be helpful.
-
If my LR3 CD is cracked, can I download trail version and activate with my serial number?
Hi, I bought a copy of LR3 a little over a year ago and it has only been uploaded to my desktop PC. Yesterday I bought a new computer and found that my CD of LR3 is cracked and could not be uploaded to the new computer. Can I download the free tra