0

The graphs are terribly detailed and include text for identification. These graphs are created in Visio by engineers then passed to me for website article creation. I normally take the graph file, open in Photoshop and Save As a PNG-8. However, they are so unreadable that they are almost useless. :( Thanks in advance for any recommendations! (Long time reader, First time question!)Typical Graph with schematic

  • Hey suzumaki, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Zach Saucier May 27 '15 at 16:00
3

Do you have a clear idea of the objetive of this images?

You probably do but you are not making good choices.

1) Use SVG. This are scalable, zoomable. They maintain the original detail if you zoom them.

2) Export the original ones at higher resolution. If you need them to fit somehow in your webpage, you use theese as a thumbnail and on click you show the high res pictures. Any lightbox gallery can do that.

3) If you need them to be printed, atach a pdf file at high resolution or in vector format.

4) If this are the only thing you have, use png 24 and apply some sharpening. You can try increasing a bit the contrast playing with the levels, mainly on the dark side.

5) If this is all you got but you still need hi res files... Make the graphs again.

It is important to be clear on something. If your client needs some degree of quality he needs to provide the resources to achive that. Either he provide the source files or pay you more to make this aditional graphic material.


Acording to your coment let me add some options.

6) I am not familiar with the Visio program, but there is a chance to have some kind of export settings, so try modify them to have a better resolution.

7) If there are not such settings you can make a screen capture. Use a high resolution monitor. At the end the images are to see them on screen so you will have the same resolution as the one needed to show.

8) Another option is to print them into a file. try to use a virtual printer like Pdf creator www.pdfforge.org. Just be carefull on the instalations, becouse as it is a free software sometimes it try to install some browser bars or other kind of advertisement software.

You can choose the print output and configure he resolution. If you choose a bitmap file like png it will generate a non aliased image. Simply export at double the size you need and rescale in Photowhatever at half resolution with an interpolation method like bicubic.

  • Thank you so much for your very thorough answer. To clarify a bit more: these graphs will be used on a very technical website for engineers. I do not anticipate they will be printed. There are approx. 50 different graphs I will need to create. Unfortunately, I am not being paid (extra) for this work as I am the sole in-house designer at a hydraulic engineering company. – suzumaki May 27 '15 at 20:17
  • I added some points to give you more options with this clarification. – Rafael May 27 '15 at 20:47
  • +1 for SVG if detail is critical on technical drawings. Looks like visio does export to SVG. – Lex May 28 '15 at 4:40
0

The biggest problem you have is with your text, which is aliased and way too small to render correctly. If it's a live text in Photoshop - turn off text aliasing for specific text layers, increase font size, then re-export.

If it comes to Photoshop flattened from Visio, increase font size in Visio. Graphs scaling can be adjusted to accommodate increased font size.

  • This is good to know. I can definitely use your answer to provide to the engineer who is working in Visio. Thank you so much! – suzumaki May 27 '15 at 21:27
0

Recomendations for optimizations:

1.- Image PNG to SVG format

2 .- html : <img src='image.svg'>

2.- css (keep ratio): img {max-width: 100%;max-height: 100%;}

3.- Use meta tag for mobile devices: <meta content='width=device-width, initial-scale=1' name='viewport'/> in html head tag for avoid distortion image

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.