Printable View
Hi All,
I am very new to graphics creation and have a couple of real quick questions for a new website: a) Is there some type of formula or standard by which I can know when to use a vector and when to use a bitmap image? b) What is a fairly simple way to add gloss to text and raw images so that they are web-presentable in a basic way and again whether a vector or bitmap is best? Thanx to everyone i advance!
As far as I know ALL website images are raster (bitmaps), I don't believe any website can show vector images.
The easiest way to make a gloss effect is to add white highlights either plain white or a graduated transparency.
SVG (Scalable Vector Graphics) can be displayed by web browsers and are a good way to show clean line and solid colour drawings at any resolution.
It is the way in which they are drawn/calculated that determines a vector graphic from a bitmap image.
Everything you see on your screen is rasterized (bit mapped), even as you work and draw with vector.
Darn ... Missed that.
But since I use Internet Explorer 8 I can probably be excused ....
Quote from Wikipedia
"All modern web browsers except Microsoft Internet Explorer support and render SVG markup directly. To view SVG files in Internet Explorer (IE), users have to download and install a browser plugin."
Not all browsers support all of the SVG 1.1 standard.
http://wiki.svg.org/Viewer_Implementations
This may be why there are not many sites that use SVG graphics.
I notice that there is a SVG 1.2 working draft and SVG 1.2 Tiny in beta
http://www.w3.org/Graphics/SVG/
LOL - Flash!Quote:
Originally Posted by ss-kalm
(it's OK, I know what you meant)
Thanx everyone, I really think I've got a much better handle on these types of images and their usage now. I'll just step back a bit and start reading a lot more. And I'll definitely be here to pay it forward next time!
Most website images are (in popularity order):
.jpg
photos, etc - good compression for smaller file sizes, but not so good for solid colour because compression introduces artifacts that are visible. No transparency.
.gif
graphics with solid colour and well defined edges. Supports transparency and animation.
.png
good for preserving image quality, but can result in larger file sizes than jpeg. Supports transparency. Used to be rarely used because older browsers didn't support it, but modern browsers do.
I don't think SVG has ever really caught on.
Besides that we have flash, but that's another ball game..
Paul
Don't use a graphic for solid color if the html will support it. I have seen many websites using graphics for a solid color background, and graphics for text when it really isn't required for a well designed page. The goal for any web designer should be a good looking page that loads quickly.
No web surfer wants to wait for a background graphic to load...
I totally agree with Paul. SVG has been around for what, 5 ~ 6 years? Unless something comes along to revitalise it, it's a lame duck.
A 1pix x 1pix graphic can be used as a web page background, hardly going to break any download time is it?
The main reason for graphics being used for text is the limitation of html to display text apart from a very constrained font set. Would you say a "well designed page" can only be produced with Arial, Times New Roman or Veranda?
only in the context of the web/browsers ;)Quote:
Originally Posted by Egg Bramhill
talking of which - why is this thread in the xara gallery forum surely it should be in site design? :confused:
Agreed... Moved
Depending on what you want to accomplish, CSS can create some nice effects that can replace a graphic. :)
This link: http://www.mezzoblue.com/zengarden/alldesigns/ can show some of the things that can be accomplished with the same content and different style sheets.
SVG was pretty cool, xml based coding for vector graphics, but it never really took off for some reason. Perhaps the penetration of the Flash player had something to do with it's demise.
I use Flash, but as Paul said, that's another ball game.
You could make the gloss image in illustrator and export as a bitmap.
For quick and easy web 2.0 style stuff I use the following technique.
Forgive me for this is my second post - and my first tutorial type post. I figure I have lurked and leeched enough and should give back what I can. ;)
Also - jpeg, gif and png all have their place. The more complex the layout I'm doing I use a lot of .png with transparency "no interlace!" I use PNGwinout from http://www.ardfry.com to help compress the final images.
For rendering problems using transparent .png files in IE 5&6 I use jquery.PNGfix.
Note: Adobe Fireworks vector format is .png. ;)
Here goes -
Thank you, very cool mini tut. I tired it with a very complex font and it takes forever to extrude, but my system is quite old anymore. Really turned out great though.
Glad you liked it Burpee! I would love to see it. ;)