Welcome to TalkGraphics.com
Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 36
  1. #11
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.jpg 
Views:	68 
Size:	136.0 KB 
ID:	127069  
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  2. #12

    Default Re: Sharpening export PNG images

    Quote Originally Posted by handrawn View Post
    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...

  3. #13

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

  4. #14

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

  5. #15
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Sharpening export PNG images

    Egg - Brilliant.

  6. #16
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

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

  7. #17
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Sharpening export PNG images

    Thanks Gary but unfortunately I don't think TimBox is getting my point at present.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #18
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Sharpening export PNG images

    Hi gcellison

    ... 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
    Last edited by Egg Bramhill; 24 May 2020 at 01:40 AM.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  9. #19
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Sharpening export PNG images

    Hi Egg.


    Quote Originally Posted by Egg Bramhill View Post
    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.

  10. #20

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

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •