knowledge-kitchen / course-notes

class: center, middle # Editing Raster Images a hands-on guide to **Adobe Photoshop** and **GIMP** --- # Agenda 1. [Overview](#overview) 1. [Creating a New Image](#new-image) 1. [Drawing Tools](#drawing) 1. [Layers](#layers) 1. [Selecting Areas](#selecting) 1. [Moving Content](#moving) 1. [Text](#text) 1. [Layer Masks & Transparency](#masks) 1. [Cropping](#cropping) 1. [Exporting for the Web](#exporting) 1. [Animated GIFs](#gifs) 1. [Conclusions](#conclusions) --- name: overview # Overview -- ## Concept In [digital image theory](../digital-imagery), 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](https://www.adobe.com/products/photoshop.html). -- - [GIMP](https://www.gimp.org/) is a free and open-source equivalent. -- - Both are useful, and we will attempt to explain the shared tools and concepts of each. --- template: overview ## 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. --- template: overview ## 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. --- template: overview ## 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](#exporting). --- name: new-image # Creating a New Image --- template: 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. --- template: new-image ## 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](../digital-imagery), so better to err on the side of larger. --- template: new-image ## 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](https://www.photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/) 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. --- template: new-image ## Color mode: RGB vs. CMYK The **color mode** determines how the color of each pixel is described. -- - **RGB** - colors are mixed from **R**ed, **G**reen, and **B**lue 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 **C**yan, **M**agenta, **Y**ellow, and blac**K** 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. --- template: new-image ## 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. --- template: new-image ## 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. --- name: drawing # Drawing Tools --- template: drawing ## 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**. --- template: drawing ## 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`). --- template: drawing ## 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](../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. --- template: drawing ## 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`). --- template: drawing ## 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. --- template: drawing ## 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. --- template: drawing ## 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](#selecting)), - 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. --- name: layers # Layers --- template: 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. --- template: layers ## 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**. --- template: layers ## 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_). --- template: layers ## 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](#exporting) file you include in a web page. --- name: selecting # Selecting Areas --- template: selecting ## 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](https://en.wikipedia.org/wiki/Marching_ants)" dashed outline. -- - Once an area is selected, you can paint, fill, move, copy, delete, or filter _only_ those pixels. --- template: selecting ## 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. --- template: selecting ## 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. --- template: selecting ## 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`) --- template: selecting ## 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. --- name: moving # Moving Content --- template: moving ## 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`) --- template: moving ## 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. --- template: moving ## 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. --- template: moving ## 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. --- name: text # Text --- template: 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**. --- template: text ## 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. --- template: text ## 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](../html) code styled with [CSS](../css) instead. -- - PS: the inaccessibility of text embedded within an image can have its uses too. --- template: text ## 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. --- template: text ## When un-searchable text is desirable (continued) - **Spycraft & steganography** - placing secret messages [inside image data](https://www.newscientist.com/article/dn19126-russian-spy-ring-hid-secret-messages-on-the-web/) so they are hidden in plain sight (a modern version of the [microdot](https://en.wikipedia.org/wiki/Microdot) ). The message is hidden in a picture's pixel data, where a viewer only sees an ordinary photo. --- name: masks # Layer Masks & Transparency --- template: masks ## 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. --- template: masks ## 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. --- template: masks ## 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. --- template: masks ## 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](../digital-imagery)). --- name: cropping # Cropping --- template: 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. --- template: cropping ## 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. --- name: exporting # Exporting for the Web --- template: exporting ## 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](../digital-imagery)): - **JPG** - photographs and complex, colorful images. - **PNG** - graphics, screenshots, and anything needing **transparency**. - **GIF** - simple graphics with few colors, or **animation**. --- template: exporting ## 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. --- template: exporting ## 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. --- template: exporting ## 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. --- name: gifs # Animated GIFs --- template: 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**. --- template: gifs ## Building an animation in GIMP -- 1. Put each frame on its own **layer**, stacked in playback order. -- 1. Optionally name a layer **`(100ms)`** to set that frame's duration, or **`(replace)`** / **`(combine)`** for frame disposal. -- 1. Preview with **Filters ▸ Animation ▸ Playback**. -- 1. **File ▸ Export As...**, name it `animation.gif`, and check **"As animation"** and **"Loop forever"** in the export dialog. --- template: gifs ## Building an animation in Photoshop -- 1. Open the **Timeline** panel (_Window ▸ Timeline_) and choose **Create Frame Animation**. -- 1. Add frames, and for each frame toggle which **layers** are visible. -- 1. Set each frame's **delay** time and the **looping** option (_Forever_) at the bottom of the panel. -- 1. Export with **File ▸ Export ▸ Save for Web (Legacy)**, choosing the **GIF** format. --- template: gifs ## 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. --- name: conclusions # 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](../digital-imagery). -- Thank you. Bye.