In this first episode I show how to get an image ready for the web.
In a quick tour I cover rotating, cropping, pushing the colours, downscaling and sharpening to show a bit what the GIMP can do.
You can leave your comments on this blog or go to the Tips from the Top Floor Forum.
The TOC
00:22 Welcome
01:42 Open the image
02:56 Rotation
05:05 Cropping
08:06 Giving it “pop” with an overlay layer
09:35 Resizing
11:10 Sharpening using sharpen
13:10 Saving as a jpg
14:07 What’s coming up in future episodes
15:07 The End
TOC made by paynekj
This work is licensed under a
Creative Commons Attribution-Share Alike 2.0 Germany License.
Tags: beginner, crop, enhance contrast, rotate, sharpen, webimage
I don’t check the TFTTF forums often enough any more, but every time I do, I make sure to check the “Other Software” section for Gimp stuff. I’m just glad I chose the right day to check it. Awesome episode, and I look forward to many more!
I just discovered this video podcast while browsing tips from the top floor. I am so glad you are doing this. I believe that gimp is a fantastic software and it is often overlooked. I really enjoyed your first episode and plan on watching all of them as they come out. Once again thanks!
I discovered this videocast today in Democracyplayer and just watched the first episode.
Though it was the first (introducing) episode, it was already very interesting.
Keep on the good work!
Fantastic series of tutorials: They explain “how to do things”, and they also explain what is happening to the underlying raster image. Very helpful indeed to people who are trying to understand image editing better.
The overlay layer technique that you showed in episode 1 has a dramatic effect on most images that I have used it on, but I don’t understand what it is doing to the underlying pixels. Please can you explain what operations it is performing on the underlying pixels (in the jpeg after the layers are merged) and why this operation has the effect of bringing more vitality to the image ?
I’ll cover the layer modes in detail. Basically this operation darkens the dark tones, leaves the mid tone alone and lightens the bright tones. That results in a realistic contrast enhancment.
Excellent tutorials - As a long time Autocad instructor, I say you are a teacher of teachers. This is well thought out and very complete. I like instructions in which you are doing real work.
Hi!
I saw your first lesson and I think it is very good.
I just have one question. Shouldn’t the rotation and resizing be the last steps, so we have more information for the other steps?
If not, why did you use that order in the steps: rotate -> crop-> improve colors -> resize -> enhance (sharpen) ?
Thank you
PS: I’ll watch all the other episodes and, for sure, I’ll have more questions
I start with rotating and cropping because I loose only information that I don’t want anyway. Rotating softens the image - but what can you do except holding the camera right?
Then I work with the image in the large size.
Resizing the final image leaves the resizong algorithm the best chance to do a good job. Sharpening is definitly the last step because all further actions degrade the sharpening effect. I also store the image unsharpened und “unresized”, if I plan to keep it for further work. Resized and sharpened images are for display/print only.
Ok!
The other steps I understand, but I still think that the rotation would be best to do in the end, because the image is being altered (interpolation). But that’s only my opinion.
Thank you for the reply.
PS: I’m already watching episode 7. Until now, all very good
Technically you are most likely right - but i find it impossible to look at a picture that needs rotation and do other stuff with it. And I need the right crop (impossible without rotation) to decide what to do with an image.
[...] Episode 001: Preparing an image for the web [...]
Hello! I have started writing Estonian subtitles for this videocast, but I did not understand what did you say at 01:04 between “and have provided me with the means to post-process my photographs on a Linux computer” and “if I try to contribute…”. So, could you write that part here, so I can translate it?
Thank you,
Kristjan Siimson
Great idea to do subtitles. How do you do it?
I read out of the “What is this about” posting. Nothing important, just the mission statement.
“The Gimp is made by a lot of people who give their time and skills into this project and have provided me with the means to post process my photographs on a Linux computer.
Now I want to give something back.
I am only a bad coder and would do more harm than good if I tried to contribute on that way. But I am a teacher by profession and I can teach about using the Gimp. First I thought about writing tutorials, but John Arnolds Photowalkthrough inspired me to try to do this by a screencast video.”
Thank you for responding. Looks like I had trouble distinguishing some of the words there.
Since the desktop I am working with is KDE, my tool of choice for writing subtitles is an application called KSubtile [sic]. It lets you time the subtitles, and then preview these in MPlayer.
I have just seen the first show but I’m sure all the following ones might be as good as this one. My compliments!
Every time i try to start the video it just hangs.. with the ‘Q’ screen.. is it something I am doing? I would love to watch all the videos in the series…
please advise..
patrick
No idea how to help you w/o knowing your OS and the player. Try to get the vlc player, works on all platforms. These videos are running everywhere I checked, except my washing machine.
I am new to The Gimp. Today I downloaded the episode 1 video. I can play it use AVS DVD Player. The tutorial its self is very nice. Thanks for sharing, now I wil start learn Gimp.
Just watched episode 1, that was first class, thank you very much
[...] habe die erste Episode - Preparing an image for the web, auf Sevenload hochgeladen - die Tutorials stehen unter dieser Creative Commons-Lizenz. Allein die [...]
Rolf,
Thank you for the time you’ve spent on this. While there will be discussions about the order of operations, settings, and more, the important thing is that you have taken a powerful program, and made it understandable.
And you did it in Bremen! Perhaps my favorite town in the world. I haven’t been there in 8 years, but will always have good memories of staying there while working at the CeBit shows. So thank you, twice - first for the tutorial, and second for reminding me of a wonderful town in a land far away.
John,
for CeBit we still are practically a suburb of Hanover.
And our city is much nicer than that one. (You can sense quite a rivalry here… 
)
[...] να μάθοÃ…με να κάνοÃ…με ÀÃÂάγμαÄα με Äο Gimp. Είδα Äο ÀÃÂÎÄο βίνÄεο Äη ÃειÃÂά και δεν μÀοÃÂÃŽ ÀαÃÂα να ÃÆ’Ã…ÃĀήÃă Ìλη Äην [...]
Hi. I just discovered your site while trying to figure out how to prepare images for websites with the gimp. I have just migrated to Mac from PC. The process is so simple with Photoshop (save for web…) that I was hoping there is something similar in Gimp. But no such luck.
My comment is to ask if there is anything available here for us poor folks in the country who only have dial up? Downloading a 2000+ M file is something really next to impossible.
Thanks. I would like to share in what seem to be fantastic tutorials according to all the other comments. Lucky you who have ADSL!
Richard,
where do you live? Perhaps someone can send you a CD. And I’ll look for a CD/DVD distributuion service.
Wirklich schönes Tutorial.
Hut ab vor deiner Arbeit!
[...] Episode 001: Preparing an image for the web March 9, 2008 | [...]
Very well made and informative. Well done.
Hi
Im not able to download the episode , have you disabled it . please enable it so that we can download it and view it , we have bandwidth problem for live streaming .
thank you
For me the link on top of the page works, streaming is not available.
http://meetthegimp.org/podpress_trac/web/14/0/meetthegimp001.mp4
Or try BitTorrent:
http://thepiratebay.org/user/meetthegimp/
and especially this show:
http://tinyurl.com/4cdtt9
[...] Эпизод 001 - Как подготовить изображение для публикации в Интернете. Некоторые из инструментов GIMP - вращение, кадрирование, выбор цвета… Скачать. [...]
[...] Preparing an Image for the Web - This tutorial is the first in a series, and covers rotating, cropping, downscaling, pushing the colors, and sharpening an image. [...]
The first clear GIMP tutorial I ever found. Thanks for share it.
Thanks! There are now 60 others….
I have just downloaded the GIMP to start editing my photographs.
Thankfully I found your “Meet the GIMP” tutorials before I did anything.
After watching episode one, I’m sure your tutorials will make my work-flow life easier.
I’m looking forward to watching all future episodes.
Thank you
Tom.
[...] Episode 001: Preparing an image for the web [...]
Hi. I think you forgot something in the video: for the web, the image should be scaled to 72 dpi, instead of leaving it at 300 dpi.
Other than that, very nice video. I didn’t know about using the grid to correct rotation - very useful. Also nice to see you that take your time to explain things too.
Thanks.
Just to point out that, for people who often save images for the web, there is an extension called Save for web - it will save your image as jpg or gif or png, let you crop or scale it, and use 72 dpi. You can find it here: http://registry.gimp.org/node/33
Correct me if I’m wrong, but DPI doesn’t mean anything at all when saving for web, it’s only important when printing. 800 pixels is 800 pixels, no matter the DPI, and when looking at images on a screen, it’s the pixel count that matters.
I am there with Torbjorn - HTML and CSS talk only about pixels, not DPI. I use just now something about 90 DPI on my screen and use 10 DPI on the big video screen at school. DPI is important only for printing purposes.
Torbjorn and Rolf: THANK YOU ! I’ve been making websites for years, thinking that 72 dpi was the way to go (that’s what people told me in my training, and isn’t that what Photoshop “Save for web” function does ?) - and I just realized, with a bit of Googling, that I was wrong. It’s a myth. Wow !
300 dpi ? For the web, it doesn’t matter.
Thanks, people.
You see, Photoshop is EVIL!