Sizing images for web

[loosestring]

i was trying to put together a little webpage for my employer cuz his sucks. i have a logo worked up in autocad and i plotted to a .jpg for using on the webpage. the dims are 3600x1650 pxls. i'm trying to get it smaller and retain a good quality graphic, but i can't seem to get it lookin good. it gets all sloppy and choppy when it is resized. how can i shrink this and have it look good enough for web use???

[CADTutor]

This question is a little bit like asking how long a piece of string is :(

There are many variables. It really depends on how much smaller the image needs to be and how much detail you are trying to retain. A large (and yours is) detailed image cannot hold that detail when it is reduced because fewer pixels are used to convey the same information. Secondly it depends how you reduce the image - some editors are better than others. Photoshop has a number of reduction algorithms and each gives a slightly different result.

Since your original image came from AutoCAD, you will probably get a better end result if you export from AutoCAD to a smaller image size.

[loosestring]

:huh: aww nuts. i did try making a smaller one earlier today, but it looked awful. i'll give it another shot tomorrow. i have no good graphics editing programs to use there so... here at home i have pictureit publishing which seems to work fair. maybe i'll bring it home tomorrow... or perhaps someone here might be willing to help a guy out...??? :wink:

[CADTutor]

Why not upload the image to the File Manager (http://www.cadimage.net/fileman/) and we'll have a look at it :)

[loosestring]

oh yay! :shock: i uploaded it and the filename is edeng-logo-model.jpg
i'm trying to get it sized for use as a webpage header more or less so i guess it would need to be around 100 pxl's high give or take... :D

[CADTutor]

OK well this is about as small as you can go without the image starting to break up. Below this size, the fine linework of the font serifs and the small font text approaches the width of a single pixel and cannot easily be displayed without looking fuzzy.

http://www.cadimage.net/postimages/edeng-logo-model.gif

You could improve things by creating the logo in an application that was specifically designed for that purpose like Illustrator or Photoshop where you have much greater control over rasterization of fonts. As good as AutoCAD is, it is not a total solution.

[loosestring]

man you rock. you're one smart feller when it comes to this graphics stuff aren't you. see, my problem is i don't have a program like illustrator or photoshop and i really can't afford to buy it what with me having a family of 5 to provide for n all (not a complaint, just a statement). so far i've made it by using microsoft pictureit publishing, but i have this feeling that it is inferior to the other programs out there... but anywho, thanks a bunch for fixing this one for me. i really appreciate it. :)

[hendie]

look into Paint Shop Pro ~it's less than a hundred dollars and has some great features ~ I've used it for years and love it.

[CADTutor]

look into Paint Shop Pro ~it's less than a hundred dollars and has some great features ~ I've used it for years and love it.

Absolutely, and if even that is too steep, check out The Gimp - excellent value for no money!

http://www.gimp.org/

[loosestring]

cool. thanks. is gimp free of all spyware and/or adware?

[f700es]

cool. thanks. is gimp free of all spyware and/or adware?

Yes it is. It will do what you want ;)
Also look at Inkscape and/or Sodipodi. These might help as well.

Yes, CadTutor does ROCK! ;)

http://www.inkscape.org/

http://www.sodipodi.com/

[loosestring]

:shock: dude that's cool! now which one is the better of the three? :huh:

[f700es]

:shock: dude that's cool! now which one is the better of the three? :huh:

Well The Gimp is a raster program (like Photoshop) while the others are vector. I would download The Gimp and Inkscape and try them both to see which works better for your situation. Both are good to have.

[loosestring]

alright i got the gimp. it's set up a little different than what i'm used to. it may take a while to learn this one... but it's cool!

[f700es]

alright i got the gimp. it's set up a little different than what i'm used to. it may take a while to learn this one... but it's cool!

Yes, it is a little different but worth the effort. Good luck :)

F7

[loosestring]

now i have worked up a logo in inkscape. i couldn't find where to create a new file at a custom size so i just did it on a letter/landscape setting. how do i go about sizing it and then exporting/saving as the format i want???

[CADTutor]

I haven't had a chance to look at Inkscape yet. What are the available options for Save As and Export? If you can export as EPS, you could bring the graphic into Photoshop and resize it any way you like. I think I'm right in saying that Inkscape uses the SVG format. If you are Open Source aware, you'll know of GIMP. GIMP can import SVG files, so that might be your best route.

I'll be interested to hear how you get on.

[loosestring]

yeah i got gimp too. these free programs are pretty darn good. lemme try that and i'll post the result either later tonight or tomorrow...
thanks!

[loosestring]

i tried to open the .svg file with GIMP and the entities were out of place. did i do something wrong here?

[f700es]

i tried to open the .svg file with GIMP and the entities were out of place. did i do something wrong here?

I don't think that The Gimp! can open .svg files. In InkScape, select your items and then go File - Export Bitmap. Here you can export a .png or .jpgfile for use in The Gimp!. It defaulted to .png file type for me but I typed in a .jpg extension and it worked. The background was transparent in the png file though so be aware of that. Check on the InkScape website for info on exporting images, there should be something there. Good luck :)

[loosestring]

IT WORKED! Thanks a bunch guys. You have both been a huge help! Now if I could just practice and get as good as some of the others I've seen with these programs. It's amazing some of the images people are creating!
Say, do either of you know if GIMP has an effect that would take a photo and cartoonize it? :geek:

[loosestring]

err, nevermind. i found it. :oops:
although it didn't "cartoon" the image as well as i had hoped. maybe if i combine the cartoon affect with something else it will result in something even more... cartoony?

[CADTutor]

Say, do either of you know if GIMP has an effect that would take a photo and cartoonize it? :geek:

You mean like your avatar? How did you do that anyway?

[loosestring]

yeah sorta, but something that looks a little "cooler" than that. i just used an online avatar maker for that one.

[f700es]

Almost didn't post this as some don't work with the windows version and only with certain versions of Gimp but here is a site for all of the Gimp plug-ins.

http://registry.gimp.org/index.jsp

Take them with a grain of salt and with no expectations ;)

[loosestring]

cool thanks man. i went there and notice there's one that allows you to split an image up into sections (cols/rows). does GIMP not already have something like that integrated into it?

[loosestring]

furthermore, is there a tutorial sittin around here somewhere that would show how to create seamless tiles for use with webpage backgrounds?

[f700es]

furthermore, is there a tutorial sittin around here somewhere that would show how to create seamless tiles for use with webpage backgrounds?

:lol: Probably too many to list. I did a Yahoo search on "seamless tile tutorials" and got quite a few. Remember that most will work for any program.

[CADTutor]

There's even one here at CADTutor :oops:

http://www.cadtutor.net/dd/photo/seamless/seamless.html

[loosestring]

:shock: thanks guys!

[loosestring]

Almost didn't post this as some don't work with the windows version and only with certain versions of Gimp but here is a site for all of the Gimp plug-ins.

http://registry.gimp.org/index.jsp

Take them with a grain of salt and with no expectations ;)
i downloaded the one called perlotine, but i can't figure out how to install/load it into the GIMP.

[f700es]

Almost didn't post this as some don't work with the windows version and only with certain versions of Gimp but here is a site for all of the Gimp plug-ins.

http://registry.gimp.org/index.jsp

Take them with a grain of salt and with no expectations ;)
i downloaded the one called perlotine, but i can't figure out how to install/load it into the GIMP.

Well, that one is a PERL file and I have no idea on how to use it either but check out the author's web site and the Gimp website. I am looking myself. :)

EDIT: You need an add-on called "Perl-Fu". Check the Gimp website.

Here is a site for Gimp users. Looks pretty good.
http://gug.sunsite.dk

[adefiola]

Hi,
Am a pro. Website developer - to size any image is easy if u use coreldraw just make the image the size u want and export as jpg formate.

Am look for projects pls if any one come across let me know. I also develop e-commace site.

see my sample site: www.emekaokereke.com

Thanks,

Adefiola