knowledge-kitchen

Editing Raster Images - A Hands-On Guide to Photoshop and GIMP (No Slides, Please)

This document has been autogenerated from slides.

---

a hands-on guide to Adobe Photoshop and GIMP

1. Overview
2. Creating a New Image
3. Drawing Tools
4. Layers
5. Selecting Areas
6. Moving Content
7. Text
8. Layer Masks & Transparency
9. Cropping
10. Exporting for the Web
11. Animated GIFs
12. Conclusions

Overview

Concept

In digital image theory, computers store images as either raster or vector data.

• In raster (pixel-based) image editing, the most widely-used commercial image editor app is Adobe Photoshop.

• GIMP is a free and open-source equivalent.

• Both are useful, and we will attempt to explain the shared tools and concepts of each.

Editing concepts

Photoshop and GIMP share their raster image editor concepts in common:

• layers - compositions made up of multiple raster images stacked one-on-top of the other, transparent regions allowing users to “see through” higher layers to lower layers.

• selection tools - multiple tools to allow users to select regions of an image to isolate changes and protect other regions against accidental overwriting.

• painting pixels - changing the color and transparency of pixels either individual with drawing and painting tools, or indirectly with tools that offer higher levels of abstraction and change multiple pixels at once.

Editing concepts (continued)

• controlling transparency - entire layers can be made either fully or partially transparent. Selected regions within a layer can have their transparency controlled with masks. Individual pixels have transparency adjusted via their alpha channel.

• text - text (which is typically vector graphic data) can be placed anywhere into a composition while editing and then turned into raster image data when done.

File types

While editing, you save your work as a native document specific to the application you are using. That file type preserves all layers, masks, and history of edits.

• Photoshop’s native file format is .psd.

• GIMP’s native file format is .xcf.

• Web browsers cannot render these file formats on a web page. They are useless to any other application except the one that created them.

• When finished editing, export a flattened copy as a .jpg, .png, or .gif, discussed in more detail later.

Creating a New Image

The idea

Before drawing, create a blank canvas to draw onto.

• Photoshop: File ▸ New (shortcut Ctrl/Cmd+N).

• GIMP: File ▸ New (shortcut Ctrl+N).

• A dialog appears asking you to configure a handful of important settings that determine the kind of image you are about to make.

Dimensions

The dimensions set how many pixels wide and tall the image will be.

• Measured in pixels for screen work - e.g. 1920 × 1080 for a full-screen background, or 300 × 250 for a banner ad.

• More pixels means more detail, but a larger file and more memory used while editing.

• enlarging a raster image after the fact reduces its quality, so better to err on the side of larger.

Resolution

Resolution is the number of pixels per inch (PPI) - how densely those pixels are packed when the image is printed or displayed at a physical size.

• For the web, resolution is irrelevant - only the pixel dimensions are important to how a browser displays the image. The conventional value for no good reason is 72 PPI.

• For print, resolution matters greatly. 300 PPI is the typical standard for crisp printed output. Maximum resolution depends on the printer’s capabilities.

• The same 1200 × 1800 pixel image is a large 16×24-inch poster at 72 PPI, but a sharp 4×6-inch photo print at 300 PPI.

Color mode: RGB vs. CMYK

The color mode determines how the color of each pixel is described.

• RGB - colors are mixed from Red, Green, and Blue light. This is additive color, matching how screens emit light. Use RGB for the web and digital devices that emit a mixture of these colors from their screens.

• CMYK - colors are mixed from Cyan, Magenta, Yellow, and blacK ink. This is subtractive color, matching how printers lay down ink on paper. Use CMYK for professional print work.

• Photoshop supports both modes (Image ▸ Mode). GIMP works in RGB only.

Bits-per-channel

A channel holds the data for one color across the entire image.

• An RGB image has 3 color channels - one each for Red, Green, and Blue. (A CMYK image has 4.)

• An extra Alpha channel is added to store per-pixel transparency data, giving an RGB image 4 channels total (RGBA) and 5 for CMYK(A) images. Transparency data is treated just like color data.

• Each pixel’s final color is the combination of its values across all channels.

Bits-per-channel (continued)

Bit depth is how many bits are used to store each channel’s value for each pixel - controlling how many distinct intensities that channel can represent.

• 8 bits per channel - 256 levels per channel (=2^8); about 16.7 million possible colors in RGB (=256^3). This is the standard for the web and most photography.

• 16 bits per channel - 65,536 levels per channel (=2^16); billions of colors (=65,536^3). Smoother gradients and far more room for heavy editing without banding, at the cost of much larger files.

• Higher bit depth = finer color detail and editing headroom; lower bit depth = smaller files. Export web images at 8 bits per channel - this will reduce quality but make them more portable.

Drawing Tools

The idea

Drawing tools let you add color to the pixels of an image by drawing or painting onto it, in simulation of physical pencils and brushes.

• Every drawing tool paints using the current foreground color, which you pick from a color swatch in the toolbox.

• Tools share common settings: brush shape, size, hardness, and opacity.

Foreground vs. background color

The toolbox shows two overlapping color swatches that the drawing tools draw with.

• Foreground color - the “active” color. Most tools (Pencil, Paintbrush, Bucket Fill) paint with this one.

• Background color - a secondary color. The Eraser reveals it on a layer without transparency, and Gradients can blend from foreground to background.

• A small swap arrow exchanges the two (shortcut X); a tiny reset icon returns them to the default black foreground / white background (shortcut D).

The color picker

Click either swatch to open the color picker dialog and choose a new color.

• Pick visually from the color field and hue slider, or type exact values.

• For the web, enter a hexadecimal color code (e.g. #f69799) - the same notation used in CSS. You can also set RGB values directly.

• The Eyedropper / Color Picker tool (shortcut I) does the opposite: click any pixel in the image to sample its color and make it the new foreground color - handy for matching a color already present in the image.

Pencil

The Pencil draws hard-edged strokes with no anti-aliasing - every painted pixel is fully the foreground color with no blurrded or faded edges.

• Useful for crisp, jagged edges where you want precise control of the color of individual pixels.

• Photoshop: the Pencil Tool (grouped with the Brush, also under B).

• GIMP: the Pencil Tool (shortcut N).

Paintbrush

The Paintbrush lays down soft-edged strokes of the foreground color. It is meant to simulate the behavior of a physical paintbrush.

• Its edges are anti-aliased (slightly blurred) so strokes of the paint color blend smoothly into the background image data.

• Photoshop: the Brush Tool (shortcut B).

• GIMP: the Paintbrush Tool (shortcut P).

• Adjust size and hardness in the tool options; hold Shift and click two points to paint a straight line between them.

Eraser & fill

A couple of close cousins to the brush:

• Eraser - paints “away” pixels. On a normal layer it reveals the background color; on a layer with transparency it reveals transparency. (Photoshop & GIMP: E)

• Bucket Fill - floods a region with the foreground color. (Photoshop: G; GIMP: Shift+B)

• Gradient - fills a region with a smooth blend between two colors.

Pre-set geometric shapes

Sometimes you want perfect rectangles, ellipses, or lines rather than freehand strokes.

• Photoshop has dedicated Shape Tools (shortcut U) - Rectangle, Ellipse, Line, Polygon, and Custom Shape. These create resizable vector shape layers by default.

• GIMP has no dedicated shape tools. Instead, you:
  • make a rectangular or elliptical selection (see Selecting Areas),
  • then Bucket Fill it, or Edit ▸ Stroke Selection to outline it.
• For a straight line in GIMP: click a start point with a paint tool, then Shift+click the end point.

Layers

The idea

Layers are like a set of transparent sheets stacked one-on-top-of the imageother. You can draw on, move, and restyle each sheet independently of the others.

• The layers stack from bottom to top - upper layers cover lower ones where they contain pixels.

• Where a layer is transparent, the layers beneath show through.

• This non-destructive separation is the single most powerful idea in raster editing.

The Layers panel

Both programs show a Layers panel (usually docked on the right).

• Photoshop: Window ▸ Layers (shortcut F7).

• GIMP: Windows ▸ Dockable Dialogs ▸ Layers (shortcut Ctrl+L).

• Each layer has a visibility toggle (the eye icon), a thumbnail, and a name.

Working with layers

Common operations - nearly identical in both tools:

• New layer - adds a fresh transparent sheet (Photoshop: Shift+Ctrl/Cmd+N; GIMP: Shift+Ctrl+N).

• Reorder - drag a layer up or down to change what covers what.

• Opacity - a slider that makes the entire layer more or less transparent.

• Blend / mode - controls how a layer’s colors mathematically combine with the layers below (e.g. Multiply, Screen, Overlay).

Advantages

Placing visual elments on separate layers while you work helps…

• …reposition one element without disturbing the others.

• …modify the pixels in one element in isolation.

• …hide an element temporarily to access what’s beneath it in the layer stack.

The web browser never sees your layers - they exist only in the “layered” .psd/.xcf file and not in the “flat” exported file you include in a web page.

Selecting Areas

The idea

A selection defines which pixels your next action will affect. Everything outside the selection is protected.

• A selection appears as the famous “marching ants” dashed outline.

• Once an area is selected, you can paint, fill, move, copy, delete, or filter only those pixels.

Geometric selections

For regular shapes:

• Rectangle / Ellipse selections drag out a rectangular or oval region.

• Photoshop: the Marquee tools (shortcut M).

• GIMP: the Rectangle Select (R) and Ellipse Select (E) tools.

• Hold Shift while dragging to constrain to a perfect square or circle.

Freehand & polygonal selections

For irregular shapes:

• Lasso - draw a freehand selection outline by dragging. (Photoshop: L; GIMP: Free Select, F)

• Polygonal Lasso - click point-to-point to build a selection from straight edges.

Selecting by color

Often the fastest way to select is to let the program find similar pixels for you.

• Magic Wand - click a pixel, and it selects all adjacent pixels of a similar color. A tolerance setting controls how similar “similar” must be. (Photoshop: W; GIMP: Fuzzy Select, U)

• Quick Selection - Photoshop only (shortcut W, grouped with the Magic Wand). Instead of clicking once, you drag a brush across an area and it intelligently “grows” the selection to the edges of similarly-colored regions as you paint.

• Select by Color - like the Magic Wand, but grabs matching pixels across the entire image, not just adjacent ones. (GIMP: Shift+O)

Refining a selection

Selections can be combined and adjusted:

• Add to a selection by holding Shift; subtract by holding Alt/Option (Photoshop) or Ctrl (GIMP).

• Select ▸ All (Ctrl/Cmd+A) and Select ▸ None (Ctrl/Cmd+D in Photoshop; Shift+Ctrl+A in GIMP).

• Invert the selection (Ctrl/Cmd+Shift+I) to swap what is and isn’t selected.

• Feather softens the selection edge so edits blend gradually.

Moving Content

The idea

Once pixels are selected, you’ll often want to reposition them within the canvas.

• The Move Tool picks up and drags content. (GIMP shortcut: M; in Photoshop: V)

What gets moved?

The key question is always: move what, exactly?

• With an active selection, the Move Tool drags the selected pixels, leaving a hole (transparency or background color) behind.

• With no selection, it moves the entire active layer.

• In Photoshop, hold Ctrl/Cmd to temporarily grab the Move Tool while using another tool.

Copy, cut, and paste

Moving content between layers or images using the clipboard:

• Copy (Ctrl/Cmd+C) or Cut (Ctrl/Cmd+X) the selected pixels.

• Paste (Ctrl/Cmd+V) - both programs drop the pixels in as a new, floating layer that you can then position.

• In GIMP, a pasted selection becomes a Floating Selection - click “To New Layer” (or anchor it) in the Layers panel to make it permanent.

Nudging and transforming

For precision:

• Tap the arrow keys to nudge the selection or layer one pixel at a time.

• Free Transform (Photoshop: Ctrl/Cmd+T) lets you scale, rotate, and skew the moved content. In GIMP, use the Scale, Rotate, and Flip tools in the toolbox.

Text

The idea

The Type / Text Tool adds editable, styled words to your image on their own layer.

• Photoshop: the Horizontal Type Tool (shortcut T).

• GIMP: the Text Tool (shortcut T).

• Click on the canvas and start typing - both create a dedicated text layer.

Styling text

While the text layer is active, set its properties in the tool options or a character panel:

• Font family, size, color, bold/italic, alignment, and letter/line spacing.

• Because it lives on its own layer, text stays editable - double-click it later to change the words or font.

• You can also move the text layer with the Move Tool, like any other layer.

Text on the web

Text baked into an image is just pixels - the browser can’t select, search, or resize it, and it won’t stay crisp when scaled.

• Text in images is used primarily for decorative headings, logos, and graphics.

• For web page body copy, use actual HTML code styled with CSS instead.

• PS: the inaccessibility of text embedded within an image can have its uses too.

When un-searchable text is desirable

Baking text into pixels deliberately hides it from text-scanning software, which is occasionally useful:

• Anti-spam - publishing an email address as an image so that bots that scrape pages for plain-text addresses cannot harvest it.

• Slowing scrapers & plagiarism - making it harder to bulk copy-and-paste article text, lyrics, or quiz answers straight off the page.

• CAPTCHAs - distorted text in an image that a human can read but an automated script cannot easily parse, used to tell people apart from bots.

• Discouraging automated translation or editing - text that won’t be auto-translated, auto-corrected, or reflowed by the browser or extensions.

When un-searchable text is desirable (continued)

• Spycraft & steganography - placing secret messages inside image data so they are hidden in plain sight (a modern version of the microdot ). The message is hidden in a picture’s pixel data, where a viewer only sees an ordinary photo.

Layer Masks & Transparency

The idea

A layer mask controls which parts of a layer are visible - without permanently erasing anything.

• A mask is a grayscale companion to a layer:
  • white areas of the mask = fully visible,
  • black areas = fully transparent (hidden),
  • gray areas = partially transparent.

This is non-destructive: the hidden pixels still exist and can be revealed again just by painting the mask white.

Creating a layer mask

• Photoshop: select the layer, then click the Add Layer Mask button at the bottom of the Layers panel.

• GIMP: right-click the layer ▸ Add Layer Mask, and choose White (full opacity) to start.

• A second thumbnail (the mask) appears beside the layer thumbnail. Click it to paint on the mask rather than the image.

Painting the mask

With the mask selected, paint with black or white using the brush:

• Paint black to hide parts of the layer - e.g. to cut out a subject from its background smoothly.

• Paint white to bring hidden parts back.

• Use a shade of gray to give partial transparancy.

• Use a soft brush with anti-aliased edges to paint into the mask for gradual fades rather than discrete edges when blending two images together.

Layer opacity vs. masks vs. transparency

Three related ways to control “see-through”:

• Layer opacity slider - makes the whole layer uniformly transparent.

• Layer mask - makes specific regions transparent, with full control.

• Alpha channel - the underlying data that records per-pixel transparency. In GIMP you may need Layer ▸ Transparency ▸ Add Alpha Channel before a layer can hold transparent pixels.

• For the web, transparency is preserved only by formats that support it - PNG and GIF, not JPG (see Digital Imagery).

Cropping

The idea

Cropping trims away the outer edges of an image to improve composition or fit a required size.

• Photoshop: the Crop Tool (shortcut C) - drag the edge handles, then press Enter to apply.

• GIMP: the Crop Tool (shortcut Shift+C) - drag a rectangle, then click inside it to confirm.

Tips

• Type an aspect ratio (e.g. 16:9) or exact pixel dimensions in the tool options to crop to a precise size needed by your web layout.

• Cropping changes the canvas dimensions of the whole image - it affects every layer.

• To change the canvas size without trimming content, use Image ▸ Canvas Size instead.

Exporting for the Web

Flatten, then export

Web browsers can’t read .psd or .xcf files. You must export a flattened copy in a web-friendly format.

• Choose the right format based on the image (recall Digital Imagery):
  • JPG - photographs and complex, colorful images.
  • PNG - graphics, screenshots, and anything needing transparency.
  • GIF - simple graphics with few colors, or animation.

Exporting in Photoshop

• File ▸ Export ▸ Export As… - choose the format, preview the file size, and tune quality.

• For JPG, lower the Quality slider until the file is small enough but still looks acceptable - balancing file size vs. fidelity.

• For maximum control over older web formats, the legacy File ▸ Export ▸ Save for Web (Legacy) dialog shows a live size/quality comparison.

Exporting in GIMP

• GIMP uses one command for all web formats: File ▸ Export As… (Shift+Ctrl+E).

• Type the filename with the extension you want - logo.png, photo.jpg, banner.gif - and GIMP picks the format from it.

• A format-specific dialog then appears with quality / compression options.

• Note: GIMP’s plain Save only writes .xcf. You must Export to produce a web image.

Optimize for fast loading

A few habits keep web images small and pages fast:

• Resize the image to the exact pixel dimensions it will display at - don’t ship a 4000px photo to fill a 400px slot.

• For JPGs, find the lowest quality that still looks good.

• Strip metadata (camera info, thumbnails) on export when the option is offered.

Animated GIFs

The idea

An animated GIF plays a short, looping sequence of images. The trick: each layer becomes one frame of the animation.

• Bottom layer = first frame; each layer above = the next frame, in order.

• GIF’s limits images to only 256 colors, but it supports transparency and animation.

Building an animation in GIMP

1. Put each frame on its own layer, stacked in playback order.

2. Optionally name a layer (100ms) to set that frame’s duration, or (replace) / (combine) for frame disposal.

3. Preview with Filters ▸ Animation ▸ Playback.

4. File ▸ Export As…, name it animation.gif, and check “As animation” and “Loop forever” in the export dialog.

Building an animation in Photoshop

1. Open the Timeline panel (Window ▸ Timeline) and choose Create Frame Animation.

2. Add frames, and for each frame toggle which layers are visible.

3. Set each frame’s delay time and the looping option (Forever) at the bottom of the panel.

4. Export with File ▸ Export ▸ Save for Web (Legacy), choosing the GIF format.

Keep them small

Animated GIFs can balloon in file size quickly.

• Use small pixel dimensions and few frames.

• Reduce the number of colors in the palette.

• For longer or photographic motion, a real video format (MP4/WebM) is far more efficient than a GIF.

Conclusions

You now have a hands-on map of raster editing in both Photoshop and GIMP.

• The concepts - drawing tools, layers, selections, moving content, text, and masks - transfer between the two programs and beyond.

• Always finish by exporting a flattened, optimized JPG, PNG, or GIF for the web.

• For the theory behind these formats, revisit Digital Imagery.

Thank you. Bye.