Comparing Photoshop and GIMP for Web Design

The financial barriers to entry to most online pursuits are extremely low. It should never cost more than a few dollars to set up and maintain a website.

gimp vs photoshop

Web design is the same – you can edit code, HTML and CSS using free text editors. However, there is one expense that stands head and shoulders above the rest, and that’s image editors. Photoshop has been the market leader for well over 20 years.  And, whether you purchased it on it’s own, buy it as part of Adobe’s Creative Suite or, now, subscribe to Creative Cloud, compared to everything else, it’s pricey!

I have just created a course on Udemy called Designing A Website in Photoshop, Illustrator (& GIMP) (at a discount if you click that link). The course shows how you can create a pixel-perfect image of a WordPress website design, customised completely to a client’s specifications.

My clients like to see an image of their website home page designed in Photoshop first. Then, once this is passed, developing and creating the website is easy.

In the video, I do the same tasks in both Photoshop and GIMP. Although most things are possible in GIMP, things are generally easier and quicker in Photoshop.

The disadvantages of GIMP

These were the main drawbacks I’ve discovered using GIMP.

  • No way to select multiple layers
  • No way to apply same text styles to multiple text layers
  • Can’t add effects to editable text
  • No way to export images optimised for web (possible with plugin)
  • Buggy – it does crash occasionally
  • Hard to arrange layers – no ability to group layers as with Photoshop
  • Poor (or virtually nil) support for vectors

All the disadvantages can be overcome. By purchasing Photoshop you are spending money to buy yourself time and less frustration – that’s assuming you are familiar with Photoshop’s interface.

Designing A Website in Photoshop, Illustrator (& GIMP)

Here is the promo video for my new course on Udemy called Designing A Website in Photoshop, Illustrator (& GIMP) (33% discount if you click that link).

The course shows how I mock up a web page designs for a clients. Here is an example of one of the images I show how to create:

mock up website home page

What do you think?

Do you mock-up or design web pages in image editors first? What do you use, Photoshop, GIMP, Illustrator, or even Inkscape?

Did you enjoy the article? If so, please share!

Download my 2 free e-books and 2 free MP3s on running an online business & getting clients

Plus a list of my 12 favorite resources for online business

two free books and two free mp3s and a list of favorite online tools

Comments

  1. says

    Great stuff as usual Rob. I started with GIMP but recently couple of months back I started to use Photoshop. Now I can’t think of GIMP or go back to GIMP. :)

    • says

      Thank you for commenting, Mayu. Yes, if you’ve got Photoshop, you’ll prefer it to GIMP. But GIMP is a great second best if you don’t want to buy Photoshop. :)

  2. says

    I use Fireworks a lot here in my 9 to 6 work. I think Fireworks has great features that no other software have.
    The feature I like most it’s his “Pages” capability. I can have multiple pages of a site designeg within just one file. and each page has its own group of layer. The problem today is that Fireworks is out of the market.
    I’m starting trying Inkscape cause I’m a “vector minded person”. It’s free and I would recomend it to someone who is starting freelance.
    Anyway, every person has to try and choose what’s good for him.

    • says

      Hello Rodrigo, a lot of people preferred Fireworks for web design and they are so disappointed that is has been discontinued by Adobe.

      I’m going to be looking into Inkscape more soon.

      Thank you for the comment.

  3. says

    For a developer like me Gimp is a good fit (and free I like free). I tend todo basic stuff like resizing, cropping etc… Its ok at opening PSDs also but not able to access some of the features.

  4. Jatin says

    Well frankly speaking Photoshop is definitely a step ahead from Gimp.

    But if you just need a good program to crank up graphics for web and don’t need support for CMYK mode which is usually used in print design, Gimp is a solid alternative to Photoshop for web graphics.

  5. Paul M says

    Well, I just spent a while trying to work out how to put text on a page in GIMP. Ahaha! I think, there’s this “text editor”. Weird, not in-place, but heh… now I can enter text.

    WAIT! No I can’t Because if I try to type a character that’s assigned to a keyboard shortcut… BOOM!

    The GIMP has wasted a lot of my time this afternoon and I am currently in a state of loathing and borderline hatred.

    • says

      Paul, I googled this: Click on Edit> Preferences; Go to the “Interface tab”; Click on the “Remove all the Keyboard shortcut”; A small dialog shall open, click on the “Clear” button. Note that: to restore the use of Keyboard shortcut, simply click on the “Reset Keyboard shortcut to default value” button. Hope this helps!

    • Paul M says

      Really? Why not think about using an actual web design tool rather than a photo manipulation program? You might want to give Fireworks a try, although it’s being phased out. Also look at Azure and Justinmind for wireframing. Otherwise EvolveUI is where I’m going to be at.

      • says

        This is mainly about using existing WordPress themes as a basis for a design which means you can use Developer Tools, screenshot and image editors to create what you want relatively easily. Wireframing is something I’ve yet to look into but will check out. Thanks.

      • Virgil says

        I’ve used fireworks long ago even before it was part of adobe’s CSS suite. It was great for image optimization and JavaScript rollovers, image slicing and .gif creation.

        However, most of Fireworks main web tools have already been integrated into Photoshop such as JPEG optimization and slicing. Thus fireworks kinda feel behind the times. Wish they could have integrated it with web platforms such as WordPress. Then I would certainly use it again.

        I

        • says

          Yes, Virgil, I remember a few years ago people were saying Fireworks is the tool for web design not Photoshop. But Adobe seemed to want to put all their eggs in the PS basket.

          At the end of the day, I use Photoshop because I’m used to it :)

  6. Marco says

    Many Photoshop users say Gimp is not good enough although they never used it in all its potential.
    I’m not one of those Gimp users saying it has everything you need, but i’m almost sure i can do whatever i want on Gimp for web design needs.

Leave a Reply

Your email address will not be published.

Notify me of followup comments via e-mail. You can also subscribe without commenting.