Vector Quality on Website
Hey I'm brand new to Vectors and can't seem to get mine up to par. They look great in Adobe Illustrator,...
&nsbp;
#1
Posted 10 October 2012 - 02:29 AM
Hey I'm brand new to Vectors and can't seem to get mine up to par. They look great in Adobe Illustrator, very crisp, like vectors are supposed to, but when I put them on a website, they seem to lose their sharpness.
Formula of Touring Success - Precision Writtens | Precision Writtens
All those images are vectors, JPEGs. They don't seem as sharp as other vectors ive seen online. Either I'm saving them wrong, or making them wrong, I dont know. Any advice or thoughts would be awesome.
Thanks
Formula of Touring Success - Precision Writtens | Precision Writtens
All those images are vectors, JPEGs. They don't seem as sharp as other vectors ive seen online. Either I'm saving them wrong, or making them wrong, I dont know. Any advice or thoughts would be awesome.
Thanks
#5
Posted 14 October 2012 - 05:34 PM
Once you save your vector file as a jpeg file, it is no longer a vector file and becomes a raster/bitmap file. You could try sharpening the jpeg in photoshop by choosing FILTER > SHARPEN > SHARPEN EDGES
That will usually make the jpeg file a little more crisp and sharp.
That will usually make the jpeg file a little more crisp and sharp.
#6
Posted 23 October 2012 - 03:51 AM
Actually, PNG files are raster images also. You can test this by saving something as PNG and zooming in. If you see pixelation, you are looking at a raster/bitmap image.
The misconception comes from the fact that generally speaking, PNG format should be used for vector imagery (illustrations with mostly flat colors or gradients), while JPG should be used for bitmap imagery (photographs). But in the end, both file formats are raster files; they are just specialized for different purposes.
If doing web design, you should always be using "Save for Web..." to export your images. That dialog window allows you many resources as far as previewing images and deciding which format and what compression/quality setting you need. For a webpage with lots of different images, it is possible for every image there to require a different level of compression and different file format for maximum efficiency (quality vs. loading time).
A couple popular true vector file formats are PDF and EPS. Files saved from a vector program such as Illustrator into these forums will retain their ability to be scaled to any resolution and not lose their quality.
SVG is a vector format used for the web. It works by essentially turning a vector image into code.
You can read more about various image formats here: Image file formats - Wikipedia, the free encyclopedia
The misconception comes from the fact that generally speaking, PNG format should be used for vector imagery (illustrations with mostly flat colors or gradients), while JPG should be used for bitmap imagery (photographs). But in the end, both file formats are raster files; they are just specialized for different purposes.
If doing web design, you should always be using "Save for Web..." to export your images. That dialog window allows you many resources as far as previewing images and deciding which format and what compression/quality setting you need. For a webpage with lots of different images, it is possible for every image there to require a different level of compression and different file format for maximum efficiency (quality vs. loading time).
A couple popular true vector file formats are PDF and EPS. Files saved from a vector program such as Illustrator into these forums will retain their ability to be scaled to any resolution and not lose their quality.
SVG is a vector format used for the web. It works by essentially turning a vector image into code.
You can read more about various image formats here: Image file formats - Wikipedia, the free encyclopedia
#11
Posted 07 August 2013 - 02:23 AM
Copy it to Photoshop and set the width and height slightly larger than the space you have on the website. If you're want a 200x200 px logo, set the Photoshop size to 300 x 300, for instance, and paste your vector in there. Then re-size it in the code. That's what I do for logos anyways.
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users