Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Which program to use to create Web graphics?

Photoshop or Illustrator

11:31 pm on Mar 9, 2012 (gmt 0)

Full Member

10+ Year Member

joined:May 21, 2005
posts: 225
votes: 0

I need to create a graphic for the Web - a header with the company logo. It will consist of type, a gradient background, some geometric shapes, and possibly a photo.

I know I could do it all in Photoshop but I'm wondering if the quality will be better if I do some of it in Illustrator and then import that part into Photoshop?

The catch is I've never used Illustrator so I'm not sure if there will be a learning curve.

I could alternatively use Inkscape if that would be any advantage.
3:21 pm on Mar 12, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

Everything has to rasterize (bitmap) to 72 DPI for browser rendering anyway (unless you plan in using some vector rendering which requires a plug in.)

Illustrator creates vectored art, Photoshop, rasterized. The advantage to using Illustrator is that it's device-independent, that is, the vectors are rasterized on the device at whatever resolution they are needed. A good application would be if you plan on deploying art in multiple mediums. You can use one logo are for print medium (300 DPI) and web (72 DPI.) If you were to do the same in Photoshop, you'd have to create the logo at the largest size you'll need it, then reduce from there - and even then, interpolation can cause differences in rendering quality one way or the other. It all depends on what you're trying to do (i.e., use the right tool for the job.)

If you're just developing for the web, a program that works with rasterized bitmaps is all you need - Photoshop, Gimp, etc. There is a slight advantage to using Illustrator in that some effects aren't available in raster programs, but they can be emulated.

I've coded a few sites that were "designed" in Illustrator only. It seemed like a lot more work to extract the files needed for the site.
7:27 pm on May 29, 2012 (gmt 0)

New User

joined:May 29, 2012
posts: 1
votes: 0

I use both :)

I find Illustrator's lay-out capabilities are much easier to use. I usually create the site in vector (laid out on a grid for reference in the final site) convert it to raster in Illustrator's Export for Web features and use Photoshop to edit individual elements if necessary. I will also use Photoshop to make a feature graphic or anything that needs complicated blends or textures.

Hope that helps.
8:10 am on Aug 10, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 7, 2005
posts: 656
votes: 0

Both will work, use what you are used to.
12:02 pm on Oct 4, 2012 (gmt 0)

New User

joined:Oct 4, 2012
posts: 7
votes: 0

To create Web Graphics the best softwares which I would suggest is:
Photoshop:For web page slicing and image editing for web pages.
Illustrator:For high quality vector graphics and for designing logos.
Flash:For creating attractive 2D animation for Web banners.
5:57 am on Apr 11, 2013 (gmt 0)

New User

joined:Apr 10, 2013
posts: 5
votes: 0

Mostly Web Graphic designer used the “Adobe Photo Shop “ and “Adobe Fire Work “ But Professionals web Graphic designer recommend the” Adobe Fire Work “ because Adobe fire work during zooming not losing the quality of image. If you want quality work then you use the Adobe Fire work.
10:12 pm on Apr 11, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 4, 2004
votes: 0

Everything has to rasterize (bitmap) to 72 DPI for browser rendering anyway (unless you plan in using some vector rendering which requires a plug in.)

Am I missing something here? An image in a web browser is displayed at it's pixel dimensions unless otherwise specified such as a percentage of the parent element, e.g. by default one image pixel occupies one pixel of monitor space. To the best of my knowledge DPI is irrelevant where the rendering of a web page is concerned.

A 200px*200px image that is 72DPI is going to take up the same exact amount of space as 200px*200px image that is 300dpi. In fact these files will be exactly identical other than the DPI setting that is only going to be effective on a canvas that supports it like a Word document.
1:06 pm on June 1, 2013 (gmt 0)

Preferred Member

5+ Year Member

joined:Mar 30, 2006
posts: 399
votes: 0

if you are planning to use photos,photoshop is the answer.
logos, vector art are best done in illustrator (photoshop can do anything).

The learning curve for photoshop is easy when compared to illustrator. The fine touches in illustrator can be done only after years of exposure to the tool
12:19 pm on June 14, 2013 (gmt 0)

New User

joined:June 13, 2013
votes: 0

Use Photoshop and illustrator both , basically designing depends on your creativity like; color combination you are using, playing with text i.e. how you are using fonts in your designing.