1 Attachment(s)
Re: Sharpening export PNG images
Agree with all previous posts. Icons at 36 x 36px (or similar small size) require much thought. As stated earlier create them at least ten times the required resolution. Try as far as possible to use whole pixel sizes (or multiples of same), and as Acorn suggest if possible use svg's.
Re: Sharpening export PNG images
Quote:
Originally Posted by
handrawn
then the issue is with that software, not xara
I exported from xara then imported back into xara. And I saw the difference. So not sure why I should be blaming a PC app development package...
Re: Sharpening export PNG images
Egg
The end result is a 800 x 600 display. The icons are exported at the size they are used. 1:1
In Xara at 100% zoom they look ok. If you exported as a PNG at 2,000,000 x will not help if they have to be scaled back down to same size. What is the advantage?
Re: Sharpening export PNG images
Acorn
I will try your approach, not sure it will work, but will try it.
The PC application will be a fixed sized 800 x 600. They work by having fixed assets, Want a bigger Icon? Load a bigger image. Working with SVG's in a PC application to generate the icons is not something I have heard of.
There is some anti aliasing going as its exported that is making the image less sharp. I have loads of PC app whos Icons that look crisp an clear. I may have to export the icons as SVG into another graphics prog as it may do a better job.
Re: Sharpening export PNG images
Re: Sharpening export PNG images
Hi TimBox,
I'm making the assumption that you're developing a webpage.
I’ve been working for the past bit on replacing the png/jpg files that Xara generates when exporting vector graphics. It is possible to use svg files in your site, which retain their clarity to (theoretically) infinite magnification, but it is definitely some extra work and outside of Xara’s native capacities.
In a nutshell:
1) Develop the svg graphic in a separate project. I started out using P&GD, but I switched over to Inkscape because it allows greater precision. It doesn’t matter how big you want the graphic to appear on your page, because you’ll specify that later. But it’s a good idea not to make it too small; otherwise, the graphic could be less accurate. And don’t make it huge; otherwise, it can increase file size substantially. Be sure to save the graphic in svg format, not png. I also recommend that you use an on-line svg-optimizer tool to reduce the file size once it’s complete.
2) Import the graphic into your Xara website project. It will serve as a placeholder. While this is not absolutely necessary to do this, it helps as you develop the website if the image shows up in recognizable form. Personally, I prefer to “Create a bitmap copy” after importing and then to delete the original imported graphic. There is less risk of making a mistake down the road.
3) Resize the image to the desired dimensions and place it exactly where you want it to appear on the page. Note that the width-to-height aspect cannot be altered from the original file.
4) Click on the bitmap image and convert it to a placeholder (under the Web Properties tab) by clicking the HTML body button and inserting the following:
<img style="width:***px" src="index_htm_files/YOURSUB/FILENAME.svg" alt="Your choice of alternate text">
The width that you specify as *** should correspond to the width of the placeholder you created. The alt property is optional: you can put a description of the graphic. More on the src below. By the way, be sure to unclick the “Re-generate placeholder image automatically” option before accepting the change; otherwise, the image will turn to a grey box.
5) Back to the src, which is the tricky part of the process. Xara will not export the image. For all practical purposes, the placeholder is just code that will be inserted into your html, with instructions to look for the file with the image. So, you’ll have to manually put the image in the place that the code will find it.
Whenever you export your site to a local directory, Xara generates all the elements and puts them into a subdirectory, named by default, index_htm_files/. If you copy and paste your svg image file there, the html can find it. However, if you put it directly into that directory, it will be deleted every time you re-export, meaning that you will have to copy and paste each time. However, if you create your own subdirectory within index_htm_files/ (index_htm_files/YOURSUB/), the files there will not be touched when the website is re-exported. In other words, you don’t have to copy and paste again.
Note that whenever you close your session, the software loses its connection to the exported files. So, for every new session, you’ll have to re-export to the same local directory to re-establish the link if you want to use preview. On the other hand, once it’s done, as long as you’re in that session, the page preview will remember the location of your svg files.
At the point that your site is finished, and you're uploading your site to the server, you'll have to be sure that the subdirectory you created with the svg files is put there as well.
I believe and hope that that is the entirety of the process that I came up with.
If this is what you were after, and you find it helpful or if you have any problems, please let me know. There is a last step that I figured out, strictly for SEO purposes. It is combining your svg images into a single file and accessing them in the various placeholders as "sprites". It’s pretty cool. If you’re interested, let me know.
Re: Sharpening export PNG images
Thanks Gary but unfortunately I don't think TimBox is getting my point at present.
Re: Sharpening export PNG images
Hi gcellison
Quote:
... And don’t make it huge; otherwise, it can increase file size substantially....
Re svg's I don't think thats correct. An svg merely tells the browser to draw a line from position x and position y in a certain direction. The width and height of an svg has no impact on the svg's filesize.
Here are 3 links to svg's of various sizes but the vector co-ordinates are the same. Each svg file is 1 Gb regardless of the size. (You have to zoom in to view the 3000 image) ;)
https://parkeston.com/svg/filesize/filesize-30.svg
https://parkeston.com/svg/filesize/filesize-300.svg
https://parkeston.com/svg/filesize/filesize-3000.svg
Re: Sharpening export PNG images
Hi Egg.
Quote:
Originally Posted by
Egg Bramhill
Re svg's I don't think thats correct. An svg merely tells the browser to draw a line from position x and position y in a certain direction. The width and height of an svg has no impact on the svg's filesize.
You're right. The svgs are nothing but text encoding directions for the browser to draw an image.
I didn't give an explanation of my point.
What happens is that if the design is too small, the decimals will be truncated and give a less precise image, particularly if it is optimized. If the image is huge (for example, it you design it at 1000 x 1000 when 50 x 50 would suffice), the code will include lots more characters than are needed (all the superflous final 0s). While the image quality will not suffer, it will not benefit either. So, the file size will end up being much bigger than it should be, defeating the secondary reason for using svg images (after precision on magnification) of reducing file size as much as possible.
Thanks for letting me clarify.
Re: Sharpening export PNG images
gcellison
Thanks but no I'm not developing for a web page its a PC application. In xara I'm very happy but as soon as I export the images they import back blurry. I'm pretty sure Its down to the anti aliasing.
Either xara is not showing the true image on the screen eg its better or its not using the same system in exporting as in displaying.