I am trying to create images for a website using the slice tool.
When I try to create a slice from selection, it looks ok on the artboard (pixel preview mode), but it shifts the whole slice when exporting!
What am i doing wrong? I have things set to 'align to pixel grid' in the transform options in the main toolbar at the top. I have the document DPI set to 72. And still, slices get misaligned.
ALSO: the slice select tool, when resizing a slice, seems to snap to invisible things!? I have snapping disabled in the View menu. What is the deal? Is slicing in Illustrator really that broken? Or am I missing something??
I've tried searching around the net and nothing seems to explain this strange behaviour..
matija erceg wrote:
But this is what I got what do you think?
Are you saying that you don't have the same problem? How is that helpful?
Well it could mean it is related to your system, or your software or hardware or settings or fonts or color profile as well.
Perhaps to color mode. But it is not universal is always helpful so one can track it down
But if I understand yu correctly you think I should mind my own business! If so gladly.
I'm having the same problem. Seems the slice tool is now buggy to the point of being impossible to use. I'm going to have to use the ol' crop, SFW, undo, repeat. Lame. There was nothing wrong with the slice tool before!
Slicing is rather old hat as it is, and Illustrator's save for web is pretty dire in both quality and file size optimization (not to mention missing support for indexed fully transparent png files) - a better method would be to export selected layers as separate png files. Here is a script that does exactly that:
And then optimize in Color Quantizer (windows) or ImagOptim (mac).
Thanks! I'll check that out.
Would you care to elaborate on SFW? I use it all the time, especially for PNGs and the transparent parts always look great. What situation would yield bad results? File sizes don't seem to be an issue either, but I may not even know what I'm missing.
Also, the workflow you suggest might be problematic as layers in AI are more about organization (as opposed to Photoshop where layers are critical for composition) and you can't always accomplish your design if things are on different layers. You would essentially have to have an entire instance of your art on each layer, making your entire project larger and more complex than it needs to be, as opposed to slicing, either using the slice tool, or just adjusting the artboard, SFW, undo, repeat. Again, if I'm missing something, please enlighten as I'm always eager to improve my workflow.
The problem with the save for web feature in both Illustrator and Photoshop is that png files can only be saved as full 24bit colour with true 8bit transparency - the user cannot save, for example, a 16 colour version with full 8bit transparency.
It means web "optimized" png versions that are output by Illustrator are often far bigger in file size than what is actually possible with other (free) web optimization utilities - at the same quality.
At this point Gif should be avoided (many reasons), and only be used for smaller animated web graphics. Gif does not support full transparency, only indexed, which means it is either on or off. No 50% transparency is possible in Gif. In the end Gif results in larger versions than Png anyway.
Jpg is perfect for photo work, but less than ideal for vector and sharp edged artwork, since it is a lossy format and will introduce fringes and rogue pixels and noise along edges. Even with a quality set to over 90% those noisy artifacts will be introduced in your artwork. And it generally results in much larger file sizes (the eagle head below is ~44kb, and still has noise and fringes everywhere at 85%)
Png is perfect as a bitmap format for illustrative sharp-edged artwork. It also supports full transparency both for true colour (24 bit) and 8bit (indexed) colour modes. And this is where the save for web feature fails abysmally: it does not allow us to save 8bit png files with full 8bit transparency - only indexed, like gif. So either on or off. Therefore tremendously limiting the use of the save for web functionality in both Illustrator and Photoshop.
Because with 8bit indexed png files we get fringes or ragged non-antialiased edges with transparent backgrounds.
Here is what I am talking about (open the original image to compare):
It means that I was able to produce a perfect fully transparent version that is SMALLER than Illustrator's 8bit version with indexed transparency in Color Quantizer!
Only Fireworks currently has the option to save png images with full transparency and indexed colours. And we know that FW is scrapped. Twisting the knife in the wound even more, Color Quantizer also allows the user to save limited colour palettes of 512, 1024, 2048 and 4096 colours! And a simple to use quality mask tool is available for difficult cases to safeguard essential artwork areas from degrading in colours!
Now, you might argue that we are talking about a difference in kilobytes - but I would say that my version loads up almost three times faster, and takes up three times less bandwidth. With more images on the page, it means my page's total bandwidth would be improved by 300%-400% (my experience) compared to designers working with Adobe products only.
And I have far more control over the exported and optimized colour quality, thus on top of that my work looks better as well in many instances.
That is why I decided a long time ago to stop relying on Adobe products to do my web optimization. They are antiquated, and have not really been updated in a long, long time.
ps RIOT (Radical Image Optimization Tool) also does a better job at jpg optimization, and again the user has more control than the save for web option delivers.
Wow, thanks so much for the nice response, Herbert2001!
I'll check out those tools for sure and stop relying so heavily on Adobe products. One assumes they kind of set the standard but, for me at least, that's a pretty blind assumption! Thanks for opening my eyes.
Thanks again for the great advice. You really helped me learn something that will make me that much better of a designer. I design interfaces using HTML5, CSS3 and jQuery so this new information will come in really handy!
No worries - Adobe's tools are very good, albeit lacking somewhat in web output - more specialized tools can assist us in our work. I found Color Quantizer to be an indispensable tool for web and screen work. I save a full 24bit transparent version, and open that in CQ, and optimize.
Color Quantizer can be found here: http://x128.ho.ua/color-quantizer.html