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.
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:
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?
Great introduction to Gimp. I have used Photoshop for a few mock up web designs. Nice to see there are some other great tools available. Thanks
Thank you, Rob, it’s worth looking at if you haven’t got Photoshop. Thank you for reading the article and commenting, Rob. 🙂
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. 🙂
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. 🙂
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.
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.
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.
True, Louie, good to know it can open PSDs.
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.
Couldn’t have put it better myself, Jatin. Not many people will need CMYK mode but, as you say, important for print design.
I use GIMP for basic stuff.
If GIMP cannot do it, I cannot do it, and I ask a collegue to do the design-job.
At this moment I cannot afford to buy Photoshop.
We all have to find ways of doing things, Albert, the best thing is we keep learning 🙂
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.
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!
Photoshop is a must have tool for web design. I never thought of using anything else.
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.
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.
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
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 🙂
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.
That’s good to know, Marco, thanks!
Well,nice information. I m a newbie of using image editor for web design.I would rather use the free stuff (GIMP) then Photoshops, since I don’t know both yet .Any suggest to help me find how to learn it ?
YouTube, Udemy, Google, forums? I really don’t know as I never really learned GIMP I only worked it out as it’s similar to Photoshop. Honestly, Richie, if you just ask around you’ll get answers. Look for GIMP groups on Facebook, LinkedIN or Google Plus. Best of luck in your web design career.
As a photographer, I use Adobe Photoshop Elements, which is a cut down version of the full Photoshop. I wonder if Elements has enough functionality for your design courses, Rob?
I’m pretty sure it has, Mac, but I’ve never actually seen it. The most important things I do in Photoshop is sampling colors, optimising images, and cropping and sizing graphics and images – most of these things you can do with online editors so I guess it’ll be OK. (Sorry not to be more certain!)
GIMP can do wonders! Don’t have CYMK mode? Get the plugin! Need more tools? Get the plugin! No plugin exist? Open the script engine and write it yourself! Gimp really shine in automation. The speed it takes to custom make a template can’t be matched by any software! And it’s a great way to learn a bit of coding that gives you that extra edge.
Or…. you could just use Photoshop and not have to write the software yourself.
I’m no fan of Adobe btw.
Interesting to hear your take on it, James, I guess there’s always a way around my perceived shortcomings of GIMP.