What type of application do I need?

Content
1

I’m not really certain what type of application I need to do what I need to do?! :blush:

I’m trying to build an e-commerce site, and need an ability to do things that your typical Graphic Illustrator and/or Web Designer would create.

Here are some things I’d like to make in order of importance…

  • Navigation Tabs
  • Glass-Looking Navigation Tabs
  • Buttons
  • Glass-Looking Buttons
  • Image Slices for Gradient Backgrounds
  • Image Slices for 3-Column Layout Designs
  • Icons (e.g. Shopping Cart)
  • Logos
  • Basic Image Editing
  • Creating Thumbnails

To me, I’d need a combination of tools like Photoshop and Illustrator, although remember that I would like to go entirely open-source if possible, so more like Gimp and Inkscape!

Sincerely,

TomTees

2

The word http://en.wikipedia.org/wiki/Raster_graphics (Etymology)

Both image formats have different strengths (including file size) and usually for vector images within a webpage you need Flash or SVG. So you can start to see the limitations with Flash and the fact that SVG support is weak in some browsers.

3

Slackr,

Thanks for the response and links, but I’m not certain if you really understood the original intent of my post.

While any comments on Photoshop vs Illustrator vs Gimp vs Inkscape is good, I am first trying to better understand why you would use one tool over the other to make a certain something?!

For instance, let’s say I want to make a navigation tab that has a fancy glass-like look to it…

Which tool would you prefer and why?
Photoshop (Gimp)? Or Illustrator (Inkscape)?
And why?

Let’s say you need to create a shaded gradient for page background…

Which tool would you prefer and why?
Photoshop (Gimp)? Or Illustrator (Inkscape)?
And why?

Basically, in the list I originally posted, WHICH TOOL would you use and WHY would you prefer that application??

Here is my original list again…

  • Navigation Tabs
  • Glass-Looking Navigation Tabs
  • Buttons
  • Glass-Looking Buttons
  • Image Slices for Gradient Backgrounds
  • Image Slices for 3-Column Layout Designs
  • Icons (e.g. Shopping Cart)
  • Logos
  • Basic Image Editing
  • Creating Thumbnails

Conventional wisdom says that Photoshop is just for editing photographs. But is seems to me that people use Photoshop more for “graphic design” (e.g. Tabs, Buttons, Incons, Logos, etc) than they do to edit photos?! More over, people seem to use Photoshop over Illustrator for these things?!

Also, there seems to be such an overlap between Photoshop and Illustrator that I’m not sure what each app does and why I’d need them. (The same probably goes for Gimp and Inkscape…)

Follow me?

TomTees

4

I think you’ve answered your own question. The main players for both vector and raster images are represented in open source by Gimp and Inkscape. I’d start with those and if you hit walls in things that you can’t do then you may need to reassess your position on commercial products. As I said the last time you posted this question, you are going to find a lot more free brushes, tutorials and actions if you stick with commercial products as they have a large user base. There are perfectly adequate older versions and I’d be more than happy with anything from Adobe CS3 onwards.

There are older Adobe versions and alternative products, student versions etc etc if you are money conscious, but I think you’ve found a good starting point for open source. As mentioned in the other thread there are also online versions of some software available for use in a browser that are mature products. You could try those too.

You may be interested in this post which sounds close to what you are trying to decide for the vector side. Raster side is easier in my opinion. [URL=“http://en.wikipedia.org/wiki/Comparison_of_vector_graphics_editors”]Comparison of programs on wiki.

5

I would recommend you have a look at something like Paint Shop Pro.
I like the older versions… around ver7. It is very cheap, and most
Adobe Photo Shop plug-ins work with it. Whatever you end up with, it should have the capacity to work with layers. You probably don’t know what I mean by that, but you will once you get into the learning phase.

PSP will do everything that you require of it and then some. There is a fairly steep learning curve for any of the better image editing programs out there, but I found PSP to be quite “learnable” with all of the free tutorials and user forums on the web.

Good luck. :slight_smile:

Steve

PS. learnable is not a real word.

6

Slackr,

No problem. Maybe I wasn’t clear either.

Basically for all of your list I’d use a program like Photoshop except for Logos. I prefer to use vector based programs for logos to ensure maximum compatibility and use for print.

Does that comment imply that Logos are more detailed (and important) and thus need the extra benefits of vector-based programs?

Whether you would be best to design a whole website within it I’d leave someone with more experience to answer, but I wouldn’t be designing one in Illustrator.

That seems like a pretty bold statement. Why are you seemingly so averse to designing everything in a vector-based program like Illustrator?

Just remember almost all static images and background graphical elements seen on the web are raster-based so even if you design the components in a vector environment, at some stage they will be converted for use on the web as raster.

So WHY do people use tools for Illustrator?

And WHAT do people use tools like Illustrator for?

What does everyone else think?

Thanks,

TomTees

7

Slackr,

Awesome response!! :tup:

THAT is what I was trying to ask about in my original post! :slight_smile:

Based on what you said - especially in your nice “closing arguments” - I think that a raster-based program like Photoshop or Gimp is best for what I’m looking to do at this stage.

If I have time, I would still like to dabble with Illustrator and Inkscape, but for now, it sounds like Photoshop and Gimp are better suited for web output and my website’s needs.

Very informative for someone who is not a designer by nature!!

Thanks to you (and everyone else) for your comments!!

TomTees

8

ok my bad, you’re right I misunderstood.

So there are two main types of drawing a line in these programs: vector (using lines/pen tool/shapes) and raster (a series of pixels side-by-side). PS and Illustrator can both handle each type of drawing but they specialise in raster(=photoshop) and vector(=illustrator).

Basically for all of your list I’d use a program like Photoshop except for Logos. I prefer to use vector based programs for logos to ensure maximum compatibility and use for print.

Everything else would be handled in Photoshop using either raster/pixel based design or in conjunction with the shape/pen tool. There is much more cross-over in the Adobe suite than previous and the use of vectors within PS is easy. The primary advantage is that shapes can be resized and redrawn to fit and whatever live effects are being used (ie glass button effect) will be retained and will resize accordingly.

As for GIMP and Inkscape I’m not familiar with how either of these handle the use of both vector and raster. Typically any vector based program will happily spit out a JPG, GIF or PNG, I’d expect Inkscape would do the same. Whether you would be best to design a whole website within it I’d leave someone with more experience to answer, but I wouldn’t be designing one in Illustrator. I’m not familiar enough with recent versions of GIMP to know how flexible its pen tools are in designing for the web.

Slices are usually pretty easy to achieve and I wouldn’t expect too many problems there.

Exporting and optimising your images will be a different story, typically that is an area where there is a large amount of variation. There are online optimisation tools that are accessible for free if whatever program you choose doesn’t do a good enough job. The Adobe products are pretty solid for spitting out files as you need, can’t speak for the others.

For the Navigation tabs, some programs will allow you to program Over and On states for the buttons and spit out the code accordingly. Depending on your level of experience and desire to get into code this can be either a blessing or a curse.

Icons can usually be picked up in free sets and coloured or adapted for your own use. You can use special tools for that but there isn’t anything stopping you from using any program to make your own, they’re basically just very small pictures.

Almost all of your list could be achieved by using about PS version 6 onwards so if you have arty/graphical friends ask around, you might find someone like me who has several old unused copies gathering dust on a bookshelf.

Just remember almost all static images and background graphical elements seen on the web are raster-based so even if you design the components in a vector environment, at some stage they will be converted for use on the web as raster.

9

So for the web, it sounds like raster is the way to go unless you are creating something that needs to be able to scale considerably?

Is there any advantage of creating a vector-based image and then saving it as a raster image?

Maybe that allows you to “have your cake and eat it too”?

TomTees

10

With that being said, then why not just create everything using a vector-based program like Illustrator?

Is Photoshop easier to use? Or maybe quicker?

Because it sounds like a vector-based app can do everything a raster-based app can do, plus more in that it is scalable?

Can you do things like gradients and shading and more “analog” type things in Photoshop, whereas maybe Illustrator is just simply for hard-edged shapes and forms?

TomTees

P.S. Where in the world did “raster” come from?! That is a WEIRD word!!!

11

The main advantage of vector graphics is that it’s infinitely scalable. So in case of a logo, you might first create it to put it on your website but later you also realize you want it as a large watermark on your stationary for example.
Suppose you had done the logo in raster, you would have to recreate it but only bigger to use for the stationary.
Had you used vector, you could have easily made it bigger while it still sharp. Just resize it to whatever size you want.

Technically, raster images are saved as pixels (that pixel is that color, that pixel is such color, etc) while vector graphics save the shape (go up a bit, then go left a bit, etc).

Now for stuff like menu items, it’s not very likely that you would want bigger or smaller versions of that, so it’s not as important as for logo’s to create them in vector graphics. Of course if you want to do it in vector, that’s fine, no one would hold it against you.

12

Sounds like you need Dreamweaver, Photoshop, Illustrator . . . . Maybe you could get a discount on an old CS4 set from EBay or Amazon. You can also get student editions if you’re a student.

S

13

Predominant format for web will be raster yes. So you could argue the opposite and say why would you bother designing in a vector format in Illustrator if you are never going to change or scale anything up to the point of needing to print.

Basically PS is easier to use for raster based output and it is designed to operate that way. It gained the use of vector-based non-destructive processes as it improved from version to version. Like-wise Illustrator has gained in its ability to use raster images as versions have improved. Historically there was no where near the crossover that there is now.

As for conversion from vector to raster, you are changing formats, if you understand the difference then you’ll appreciate that any circle or curved line drawn with a pen tool is going to be converted to lots of square pixels. How cleverly and accurately it appears takes place at the conversion point. Depending on the content of your vector image, the raster conversion may have certain rough spots in smaller images. It isn’t so bad in larger image conversions. Again the software options and conversions are pretty good but it is the limitation of the raster format that causes the problem.

So for instance you design a company brand, logo and website all in raster they love it and want to put a big sign up outside. Unless you have your logo in vector format (which scales with no loss of quality) you either have one huge ugly blocky sign, or you redraw it in vector format or re-render it at a higher resolution.

It would appear that vector is king, for most print based things it makes for a superior base to work from, but PS and raster based output is what we see on the web so if you know the limitations and end use of the product you can design accordingly. Understand the tools, understand the process, understand the product and use whatever is appropriate.

Often the easiest way to tell someone with design experience vs someone who like making things look cool is when you come to print their work. Having spent hours of everyday re-drawing logos and company brands I’m sick to death of the later. It isn’t that they can’t make things look cool, it’s that when it comes to being useful someone else is re-doing their work unnecessarily.

14

Thanks for the suggestions.

Good luck. :slight_smile:

Steve

PS. learnable is not a real word.

It is in the dictionary here.

TomTees

15

:lol:

I learn something new each day. I thought I made the word up myself.

P.S. PSP 7… is available online for around $50.00USD

Steve

16

I wasn’t paying attention - I thought I used that word and you were accusing me of improper English?! :slight_smile:

Anyways, it’s a legit word according to one of my favorite websites!

TomTees

17

Although I now design mostly with Corel Graphics Suite (which is a great choice, by the way, if you decide to go with proprietary), I have some experience using GIMP and Inkscape for this kind of thing.

Most of your required tasks suggest Inkscape much more than GIMP to me.

  • Navigation Tabs
  • Glass-Looking Navigation Tabs
  • Buttons
  • Glass-Looking Buttons

Say I want to draw a tab with rounded corners. This is easy to do in Inkscape and is programmatically controlled using the properties of rectangles or the Node tool. What’s better, I can easily change my mind about the corners later and adjust them to suit me, or even go back and square them.

Same thing for adding a “glass” look to buttons or tabs; I can easily create derivative shapes with Inkscape and tweak gradients to my heart’s content. Last I knew, there was no easy way in GIMP to, say, adjust the midpoint of a gradient with a Node-type tool.

  • Image Slices for Gradient Backgrounds
  • Image Slices for 3-Column Layout Designs

Same deal with “tweakability” of gradients, but this is one task that might be almost as easy in GIMP as Inkscape.

  • Icons (e.g. Shopping Cart)
  • Logos

I find “drawing” stuff way easier in Inkscape than GIMP - see the above benefits of the Node tool. In addition, complex layouts in GIMP virtually force you to proliferate layers - one per distinct object - and if you change your mind and want to enlarge something, you have to redraw it as there’s no scalability.

  • Basic Image Editing

Absolutely GIMP, - no question. Many vector editors include substantial support for editing bitmaps, but Inkscape isn’t one of them.

  • Creating Thumbnails

Probably still GIMP, if I understand correctly what you mean.

I am not saying all these tasks can’t be accomplished in GIMP - they can. It’s just far easier to use Inkscape in most cases, IMHO.

As far as laying out complete web pages, I wouldn’t even attempt it in GIMP. Inkscape is pretty handy for that job, especially since they announced a fix for bitmap embedding in the latest version.

One weakness of Inkscape, while I’m thinking about it: Last I knew, you could only export to PNG format. This means that you will need to use GIMP, or another image converter, to encode your sliced n diced images to jpeg or whatever format you desire.

Just my $.02USD. Hope this helps.

18

kenquad,

Thanks for the thoughts and comments. :tup:

Very interesting response you posted!

TomTees