You don't need Photoshop. You don't need a $600 Adobe subscription. What you need is to understand how images work — how files differ, what resolution means, and how to edit, composite, and export images that look professional on any platform.
This course uses Photopea — a free, browser-based image editor that works almost identically to Photoshop — and Canva for quick design work. Everything you learn here transfers directly to Photoshop, GIMP, or any other image editor if you switch tools later.
Before you edit a single image, you need to understand what you're working with. File types and resolution determine whether your images look sharp or blurry, load fast or slow, and work on screen or in print.
Raster vs. Vector
There are two fundamentally different kinds of image files:
- Raster images are made of pixels — tiny colored squares arranged in a grid. Photos are raster. Screenshots are raster. When you zoom in on a raster image, you eventually see the individual pixels (the "blocky" look). Common raster formats: JPEG, PNG, GIF, WebP.
- Vector images are made of mathematical paths — lines, curves, and shapes defined by equations. Logos are typically vector. Icons are vector. You can scale a vector image to the size of a billboard and it stays perfectly sharp. Common vector formats: SVG, AI, EPS, PDF.
As a content creator, you'll work with raster images 90% of the time (photos, thumbnails, social graphics). But your logo and brand assets should be vector whenever possible, so they scale to any size without quality loss.
Resolution & DPI
Resolution is the number of pixels in an image, expressed as width × height (e.g., 1920×1080). More pixels = more detail = larger file size.
DPI (dots per inch) only matters for print. For web and social media, DPI is irrelevant — only the pixel dimensions matter. A 1920×1080 image looks the same on screen whether it's set to 72 DPI or 300 DPI. The DPI setting only tells a printer how densely to pack those pixels onto paper.
- Web/social: only pixel dimensions matter. A YouTube thumbnail is 1280×720 pixels. Period.
- Print: you need 300 DPI at your target print size. For an 8×10 inch print, that's 2400×3000 pixels.
The most common mistake: downloading a 640×480 image from Google and trying to use it as a 1920×1080 banner. You can't add detail that doesn't exist. Always start with the largest source image you can find.
File Format Cheat Sheet
- JPEG (.jpg) — best for photos. Lossy compression (some quality lost each time you save). Small file sizes. No transparency. Use for: profile photos, listing images, photo-based thumbnails.
- PNG (.png) — best for graphics with text, logos, or transparency. Lossless compression (no quality loss). Larger file sizes. Use for: logos, overlays, screenshots, anything with sharp text or transparent backgrounds.
- WebP (.webp) — modern format with better compression than JPEG and PNG. Supports transparency. Smaller file sizes. Use for: web content where supported (most modern browsers). Not universally accepted on social platforms yet.
- GIF (.gif) — limited to 256 colors. Supports simple animation. Use for: reaction images, simple animated graphics. Not for photos (quality is terrible).
- SVG (.svg) — vector format for the web. Infinitely scalable. Use for: logos, icons, simple illustrations on websites.
- PSD (.psd) — Photoshop/Photopea project file. Preserves all layers, effects, and edit history. Always save a PSD copy before exporting to flat formats.
💡 Key Takeaway
JPEG for photos, PNG for graphics with text or transparency, WebP for web if supported, SVG for logos. Always keep your working files (PSD) separate from your exports. And stop worrying about DPI for anything that stays on screen.
🔨 Exercise 3.1: File Format Audit
Examine your existing content (or download sample images) and practice identifying and converting formats:
- Open Photopea and load a JPEG photo
- Check its pixel dimensions (Image → Image Size). Note the resolution.
- Export it as PNG and note the file size difference
- Export it as WebP at 80% quality and compare file size to both JPEG and PNG
- Try upscaling a 400×300 image to 1920×1080 — observe the quality loss. This is why source resolution matters.
Deliverable: A comparison table showing file sizes for the same image in JPEG, PNG, and WebP, plus a screenshot of the upscaled image showing quality degradation.
Most image editing isn't glamorous compositing or complex manipulation. It's the basics: cropping to the right dimensions, resizing for your platform, and adjusting brightness and contrast so the image actually looks good. Master these four operations and you'll handle 80% of your editing needs.
Cropping
Cropping removes unwanted parts of an image and changes its aspect ratio. In Photopea, press C for the Crop tool.
- Rule of thirds: when cropping, align your subject along the third lines. Don't center everything by default.
- Platform ratios matter: YouTube thumbnails are 16:9, Instagram posts are 1:1, Instagram Stories are 9:16, NiteFlirt listing images vary. Always crop to your target ratio before resizing.
- Leave breathing room: don't crop so tight that text or important elements touch the edges. Social platforms can clip edges unpredictably.
Resizing
Resizing changes the pixel dimensions of your image. In Photopea: Image → Image Size.
- Always resize down, never up. Shrinking a large image preserves quality. Enlarging a small image creates blur. Start with the highest resolution source available.
- Lock the aspect ratio (the chain icon in the resize dialog). Unlocking it stretches the image and makes everything look distorted.
- Common platform sizes:
- YouTube thumbnail: 1280×720
- Instagram post: 1080×1080
- Instagram Story: 1080×1920
- Twitter/X header: 1500×500
- Reddit post image: 1200×628 (or wider)
- NiteFlirt listing: varies, but 800×600 is common
Levels
Levels adjust the tonal range of your image — the distribution of darks, midtones, and lights. In Photopea: Image → Adjustments → Levels (or Ctrl+L).
You'll see a histogram (a mountain-shaped graph). The left side is shadows (blacks), the middle is midtones, and the right side is highlights (whites). If the histogram doesn't reach the edges, your image lacks contrast — drag the sliders inward to where the data starts.
- Black point slider (left): drag right to deepen shadows. Makes blacks actually black instead of washed-out gray.
- White point slider (right): drag left to brighten highlights. Makes whites pop.
- Midtone slider (center): drag left to brighten, right to darken. This is your overall brightness control.
Adjusting levels is the single fastest way to make a dull photo look vibrant. Do this to every photo before posting.
Curves
Curves are levels on steroids. Instead of three sliders, you get a diagonal line that you can bend. In Photopea: Image → Adjustments → Curves (or Ctrl+M).
The most universally useful curves adjustment is the S-curve: pull the shadow area slightly down (darker) and the highlight area slightly up (brighter). This adds contrast and makes images pop without looking over-processed.
- Gentle S-curve: subtle contrast boost. Good for almost everything.
- Steep S-curve: dramatic, high-contrast look. Good for moody thumbnails and artistic edits.
- Raised blacks (lift the bottom-left point): gives a "faded film" look. Popular for vintage aesthetics.
Learn levels first. Once levels feel natural, graduate to curves. They do the same thing — curves just give you more control points.
💡 Key Takeaway
Your editing workflow for any image: crop to platform ratio → resize to platform dimensions → adjust levels/curves for contrast → export in the right format. Four steps, covers the vast majority of editing tasks.
🔨 Exercise 3.2: Edit 5 Photos for Different Platforms
Take one source photo (use your own or grab a free one from Unsplash) and create 5 different edits:
- YouTube thumbnail: Crop to 16:9, resize to 1280×720, boost contrast with an S-curve, export as JPEG
- Instagram post: Crop to 1:1, resize to 1080×1080, adjust levels for brightness, export as JPEG
- Instagram Story: Crop to 9:16, resize to 1080×1920, apply a slight warm tone using curves, export as JPEG
- Twitter header: Crop to 3:1, resize to 1500×500, adjust to look good at reduced size, export as JPEG
- Reddit post: Crop to ~1.9:1, resize to 1200×628, keep it clean and high-contrast, export as PNG
Deliverable: 5 exported images, each properly sized and adjusted for its platform, plus a screenshot of at least one before/after levels or curves adjustment.
Compositing is combining multiple images, text, and graphic elements into a single cohesive image. It's how every thumbnail, banner, and promotional graphic is made. The key concept is layers — and once layers click, image editing stops being mysterious.
Understanding Layers
Think of layers as transparent sheets stacked on top of each other. Each sheet can hold different content: a photo, some text, a shape, a color overlay. You can rearrange them, hide them, adjust their opacity, and edit each one independently without touching the others.
In Photopea, the Layers panel is on the right side. Every new element you add creates a new layer. Key operations:
- New layer: Layer → New → Layer (or Ctrl+Shift+N). Use this for painting, drawing, or adding elements manually.
- Duplicate layer: right-click → Duplicate Layer. Use this to experiment without destroying the original.
- Layer order: drag layers up/down in the panel. Higher layers cover lower ones.
- Opacity: slider at the top of the Layers panel. 100% = fully visible, 0% = invisible. Use 10-30% opacity for subtle overlays and textures.
- Blend modes: the dropdown that says "Normal." Multiply darkens, Screen brightens, Overlay adds contrast. Experiment — blend modes are how professionals create complex looks with simple operations.
Selections & Masking
To composite images, you need to isolate subjects from their backgrounds. Photopea gives you several tools:
- Magic Wand (W): clicks to select areas of similar color. Good for solid backgrounds. Set tolerance (top toolbar) to control how similar colors need to be — start around 30.
- Quick Selection (W): paint over the area you want to select. Photopea tries to detect edges. Works surprisingly well for most subjects.
- Select → Subject: AI-powered automatic subject detection. One click, surprisingly accurate. Start here and refine with other tools.
- Layer Masks: instead of deleting pixels, masks hide them non-destructively. Paint black on a mask to hide, white to reveal. This is the professional way to composite — never use the eraser tool for compositing.
Building a Composite
Here's a practical workflow for creating a thumbnail composite in Photopea:
- Start with your background. Open your background image or create a solid/gradient background at your target size.
- Add your subject. Open a photo, use Select → Subject to isolate it, copy (Ctrl+C), paste into your background document (Ctrl+V). It arrives as a new layer.
- Position and scale. Ctrl+T for Free Transform. Hold Shift while dragging corners to maintain proportions. Place the subject using rule of thirds.
- Add a color overlay or gradient. New layer, fill with a color, set blend mode to Multiply or Overlay at low opacity. This unifies the color palette.
- Add text. Press T for the Text tool. Each text element becomes its own layer. Use your chosen fonts (from DSGN-110).
- Add effects. Right-click a layer → Blending Options for drop shadows, strokes (outlines), and glows. Use these sparingly — a subtle drop shadow on text improves readability against busy backgrounds.
- Save your PSD (File → Save as PSD) before flattening and exporting.
💡 Key Takeaway
Layers are non-destructive. Masks are non-destructive. Always keep your PSD with layers intact. You will want to go back and edit things — if you've flattened everything, you start over. Work in layers, save in layers, export flat copies.
🔨 Exercise 3.3: Create a Composite Image
Build a promotional graphic or thumbnail by compositing multiple elements:
- Choose a canvas size for your target platform (e.g., 1280×720 for YouTube)
- Start with a background (photo, gradient, or solid color)
- Cut out a subject from a different photo using Select → Subject and paste it in
- Add at least one text element (headline or title)
- Add a color overlay or gradient layer to unify the look
- Use a drop shadow or stroke on the text for readability
- Export as JPEG and save the PSD with all layers intact
Deliverable: The exported composite image plus the layered PSD file. Bonus: screenshot your Layers panel to show the layer structure.
You've edited your image. It looks great in Photopea. Now you need to get it onto the internet without it looking like garbage, loading slowly, or getting cropped in unexpected ways. This module is about the last mile: optimizing and exporting for real-world use.
Optimization: Quality vs. File Size
Every image on the web is a tradeoff between quality and file size. Bigger files look sharper but load slower, use more bandwidth, and can even get rejected by upload forms with size limits.
- JPEG quality 80-85% is the sweet spot for most web images. Below 70% you start seeing compression artifacts (blocky areas, especially in gradients). Above 90% the file size increases dramatically with barely visible quality improvement.
- PNG: file size depends on image complexity, not a quality slider. Simple graphics with few colors compress well. Photos saved as PNG are unnecessarily large.
- Target file sizes: social media images should generally be under 500KB. Thumbnails under 200KB. Profile photos under 100KB. If your image is over 1MB, you almost certainly need to optimize it.
In Photopea, use File → Export As and adjust the quality slider while watching the estimated file size at the bottom of the dialog. Find the lowest quality where you can't see degradation.
Platform-Specific Gotchas
Each platform handles images differently. Knowing the quirks saves you from posting something that looks terrible:
- Instagram re-compresses everything. Upload at max resolution (1080px wide minimum) so their compression has more data to work with. If you upload a small image, Instagram's compression makes it look significantly worse.
- YouTube thumbnails must be under 2MB. JPEG is preferred. They display at wildly different sizes (sidebar vs. home page vs. mobile), so test your thumbnail at 160×90px — if you can't read it at that size, simplify.
- Reddit supports JPEG, PNG, and GIF. Keep images under 20MB. Posts with clear, high-contrast thumbnails get more clicks — the preview image on old.reddit.com is tiny.
- NiteFlirt has specific image size requirements per listing type. Check the upload form for maximum dimensions and file size. Generally stay under 1MB and use JPEG.
- Twitter/X auto-crops images in the feed based on its saliency algorithm. Put the important content in the center of the image to avoid getting your subject cropped out.
Batch Processing
When you have multiple images to resize for different platforms, doing them one at a time is painful. Here are your options:
- Photopea: File → Scripts → Script Editor lets you run JavaScript to batch-process. But honestly, for simple batch resizing there are easier tools.
- Canva: create a design at your target size, drag in images, download all. Canva's "Bulk Create" feature (Pro) can resize designs across multiple platform sizes with one click.
- Web tools: BIRME (Bulk Image Resizing Made Easy) lets you drag in multiple images, set target dimensions, and download them all. Free, no account needed.
- If you're comfortable with command line: ImageMagick can resize hundreds of images in seconds. One command:
mogrify -resize 1280x720 -quality 82 *.jpg
Naming & Organization
This sounds boring until you have 200 images across 15 folders and can't find anything:
- Use descriptive filenames:
youtube-thumb-how-to-record-audio.jpgnotIMG_3847_final_v2_FINAL.jpg - Include platform and dimensions:
ig-post-1080x1080-brand-launch.png - Keep source files separate from exports: a
/sourcefolder for PSDs and a/exportfolder for final images - Version with dates:
2026-02-listing-header-v2.jpg— you'll thank yourself later
💡 Course Complete
You can now work with any image file confidently: you understand formats, resolution, editing fundamentals, compositing, and web optimization. Next up: GRPH-118 Visual Branding & Graphics, where you'll apply these skills to build a complete brand identity.
🔨 Exercise 3.4: Batch Resize for Social Media
Take the composite image from Exercise 3.3 (or any image you've created) and prepare it for multiple platforms:
- Export versions for: YouTube thumbnail (1280×720), Instagram post (1080×1080), Instagram Story (1080×1920), Twitter/X post (1200×675), and Reddit (1200×628)
- Each version should be properly cropped for its platform — don't just stretch. Re-compose if needed so the subject and text work at each ratio.
- Optimize each export: JPEG at 80-85% quality, all under 500KB
- Name each file using the convention:
[platform]-[dimensions]-[description].jpg - Use BIRME or Photopea for the exports
Deliverable: 5 properly sized, optimized, and named image files ready for upload to each platform.