A graphic designer made some icons for one of my client sites. He started them in Illustrator as vector graphics, then finished them off in Photoshop (300 pixels/inch). Each icon is cut-out like a stencil so that the background colour of the container can show through. After cropping the files were 500 x 500 pixels.
I need an 80 x 80 pixel icon for the home page navigation,
and a 120 x 120 pixel icon for the individual page.
I was able to get a fairly good quality small image, but the larger one seems quite blurry. I tried several different approaches to reducing the icons to those sizes at 72 pixels/inch, but still get the same results.
Is there anyway I can get the larger icon to be as clear as the smaller one?
BTW, I asked the graphic designer for his Illustrator files so I could use vector, but he sent me .eps files from his Adobe Cloud software which my CS6 won’t open.
Ideally you you want the vectors so you can save as SVG. But can’t the designer save as SVG from AI?
But using the bitmapped images, the first thing to do is forget about pixels/inch, that is meaningless for on-screen graphics, you should only be interested in how many pixels wide and high.
But I don’t get why reducing from 500px to 120px would degrade the image.
Though if you are messing with ppi not px values…
The graphic designer finally sent me .eps files compatible with my version of Illustrator, but they were not cut-outs. So I have given up trying to use .svg images here. It’s just too much work trying to get the right format from him quickly.
I was finally able to fix the issue by saving my .psd at 96dpi (thanks, @DaveMaxwell), reset the thumbnail image size from 80x80 to 120x120 for the individual pages, and just use CSS to reduce the size of the thumbnails to 80x80 for the navigation system on the home page.
The complication comes from the fact that this is a WordPress site, and unless I take the time to do some extra coding in my theme, I can only have one featured image per page. So I had to use the same image in both places.
I am currently learning SVG and thought I would have a go at creating the logo from scratch. As you can see from the web-page below I am having trouble with the “body of the man”. If anyone has time on their hands I would be grateful for a solution.
The colours are Red: rgb(192,75,75), Blue: rgb(89,134,188), Green: rgb(81,106,51) and Purple: rgb(91,61,125). The icons are always visible, so no, there will never be white for the background. For the navigation icons, the background switches to a light grey: rgb(187,187,187) on hover.
It solved a problem I have had with displaying inline multiple SVG’s which kept complaining that IDs had already been declared. I did try unsuccessfully replacing IDs with CLASSES but it did not work. Saving the inline SVG and displaying a HTML IMG file solved the problem. Image width and height changes the rendered image size exactly how I want it to work.
That’s a handy tool for quick conversions. Though they are not as clean as hand made svgs. I much prefer John’s very slim 1k version and how it re-uses elements from the defs.
But then there is the problem of duplicate IDs if the logo appears more than once.
That was solved by making it an external file referenced in an img. I do find using img the easier and cleaner option for svg as it also avoids cluttering the html with all the in-line svg stuff.
But there are occasions for me where it must be in-line, namely when I want to target svg elements with my css, to create effects like colour change on hover/active etc.
I did try to do something, using John’s example, to attempt to declare the defs once, then re-use in more than one svg logo. But I have so far failed to make it work. The next attempt was to save the defs as a separate file, then try to reference them in the svg that way.
But still could not get it to work, though I’m sure this must be possible somehow.
BTW my usual method for using svg in-line is to still keep it as its own file and insert into the html via a php include. This way it avoids the clutter in the html (at least for the server-side source code) and allows the graphic to be re-used elsewhere and edited globally.