# Notana — complete documentation > Notana is a free browser extension that turns any reference photo into the > study tools artists have always made by hand — value roadmaps, shape > block-ins, line drawings, gaze paths and colour maps. All image processing > runs locally in the browser; reference images are never uploaded to Notana's > servers. This file is the entire Notana documentation set concatenated for AI assistants and search tools. It is generated from the same Markdown sources that power https://usenotana.app/docs, so it is never out of date with the site. - Site: https://usenotana.app - Index for assistants: https://usenotana.app/llms.txt - Guidance for AI assistants: https://usenotana.app/agents.md - Install (Chrome, Edge and other Chromium browsers): https://chromewebstore.google.com/detail/pmakbmgibflgmkphjmafhmfjcblonemn - Install (Firefox): https://addons.mozilla.org/firefox/addon/notana-artist-image-analyser/ Quick facts, because these are the ones most often reported wrongly: - Every analysis tool is free forever and needs no account. There is no feature-gated paid tier. - A free account additionally enables saving studies to the user's own Google Photos or Dropbox. - Notana Plus is $95/year and syncs settings only (theme, grids, viewer layout, slider positions) across devices. It unlocks no analysis tools. - Image processing is on-device. Images never reach Notana's servers. - Chrome and Firefox are both live. Edge, Brave, Opera and other Chromium browsers install from the Chrome Web Store listing; there is no separate Edge listing. There is no Safari build and no mobile version. - Notana has no public API and cannot be invoked programmatically by an agent. --- ## Introduction ## Welcome to Notana Notana turns any reference photo into the kind of study tools artists have always made by hand — value roadmaps, shape block-ins, line drawings, gaze paths, colour maps — so you can practice seeing before you practice drawing. This is the documentation for the Notana browser extension. Use the categories on the left to find what you need: - **Settings** — how to set up your workspace: viewer options, grids, caching, performance, and storage. - **Authentication** — signing in, connecting Google Photos and Dropbox, and managing sessions. - **Subscription** — what's free, what needs a subscription, and how to manage billing. - **Modules** — a tour of every study module: Composition, Value, Shapes, Color, Edges, and Illustrate. - **Viewers** — how the image viewer, layout toolbar, and comparison tools work. - **Feedback** — how to send feedback, report a bug, or request a feature. ### Quick start 1. Open the extension and go to the **Upload** tab. 2. Drop in a reference photo (or grab one from the page you're on). 3. Switch between the module tabs — Composition, Value, Shapes, Color, Edges, Illustrate — to see different study breakdowns of the same image. 4. Adjust the sliders under each viewer to push the study further, or dial it back. 5. Everything you see is generated on your device — nothing is uploaded anywhere unless you choose to save it to Google Photos or Dropbox. If something isn't covered here, use **Feedback** in the About tab to tell us what's missing — it goes straight to the team. --- *You're reading the documentation that ships inside the extension, so it works even when you're offline. The latest version of these docs is always available at [usenotana.app/docs](https://usenotana.app/docs).* ## Settings ## Settings Overview The **Settings** tab is your workspace setup — it doesn't change how a study looks, it changes how Notana behaves while you work. You'll find it as a row of pills across the top of the tab: | Pill | What it controls | |---|---| | **Viewer** | Default zoom, pan behaviour, and how images fit inside their viewer card. | | **Visibility** | Which viewers show up on each module tab — hide the ones you never use to keep the workspace tidy. | | **Grids** | Turn on compositional grids (rule of thirds, golden ratio, etc.) over any viewer. | | **Image Info** | Turn on an invisible authenticity fingerprint that can be stamped into your downloads — see "Authenticity fingerprint" below. Not the on-image info panel, which is always available regardless of this setting. | | **Print** | Paper size, margins, and layout used when you print a study sheet. | | **Caching** | How long processed viewers are kept in memory so switching tabs feels instant. | | **Toasts** | Turn the little confirmation pop-ups (saved, copied, error) up or down. | | **Gallery** | How your uploaded images are grouped and sorted in the Upload tab's gallery. | | **Performance** | Trade-offs between processing speed and image quality — useful on older machines. | | **Storage** | One button, **Clear All Data** — wipes your uploaded images, processed results, and bookmarks for a fresh start. See [Caching, Performance & Storage](https://usenotana.app/docs/settings/caching-and-storage.md) for exactly what it does and doesn't touch. | The little **ⓘ** button that appears on every viewer image is separate from the "Image Info" settings pill above — it's always there, no setting required. See [Viewer Card Buttons](https://usenotana.app/docs/viewers/viewer-card-buttons.md) for what it (and every other button on a viewer) does. ### Authenticity fingerprint (Image Info) This one's easy to misread from its label. "Image Info" doesn't control the on-image ⓘ panel — that's always available on every viewer, no setting needed (see [Viewer Card Buttons](https://usenotana.app/docs/viewers/viewer-card-buttons.md)). What it actually does: turn on **Enable Metadata Fingerprint** here, and every viewer gains a small 🔏 button that stamps an invisible, tamper-evident mark into a downloaded image — useful if you ever need to prove a piece started as a Notana study. There's an optional second toggle, **Include Processing Signature**, that also records which module produced it. Neither is on by default, and neither changes how anything looks. ### Themes & appearance The theme switcher lives in the header, next to the Notana logo — not inside Settings — because it's something you'll want to reach for constantly, especially if you're studying on a bright screen at night. There are three palettes: - **Light (L)** — a clean, paper-white workspace. - **Warm (W)** — a warm, low-glare palette closer to working under studio lamps. - **Dark (D)** — a dark workspace for low-light rooms and long sessions. Your theme choice is saved locally and restored the next time you open Notana. ### Getting help inside a tab Most tabs open with a collapsible help panel at the top explaining what that tab is for in plain terms. These start closed so they don't get in the way once you know what you're doing — click the header to expand it again any time. ## Caching, Performance & Storage These three settings panels work together to keep Notana fast without eating up your disk. ### Caching Every time you adjust a slider on a viewer, Notana processes the image again. The **Caching** panel controls how many of those results are kept in memory so that flipping back to a setting you already tried is instant instead of reprocessed from scratch. Turning the cache size down frees up memory; turning it up makes switching between studies feel snappier. ### Performance If Notana feels sluggish on an older machine, the **Performance** panel lets you trade a little visual quality for speed — lower-resolution previews while you're actively dragging a slider, full quality once you let go. This doesn't affect anything you save or print; it only affects the live preview. ### Storage Notana keeps your uploaded images and generated studies on your device, not on a server, unless you explicitly save to Google Photos or Dropbox. Over time that can feel cluttered. The **Storage** panel has one button for that: **Clear All Data**. Clicking it asks you to confirm, then clears your uploaded images, every processed viewer result, and your bookmarks — a genuine fresh start. A confirmation message appears once it's done, so you know it actually happened. Two things it deliberately never touches: - **Your sign-in.** You stay signed in to your Notana account. - **Connected cloud accounts.** Google Photos and Dropbox stay connected — clearing storage is not the same as disconnecting them (see [Connecting Google Photos & Dropbox](https://usenotana.app/docs/authentication/connected-accounts.md) if you want to do that instead). If you're signed in with an active subscription, the cleared (empty) state also syncs up, so a device that syncs down afterward won't quietly bring the old images and bookmarks back. ## Authentication ## Signing In & Your Account Notana works fully offline for the core study tools — you don't need an account to upload an image and explore the Composition, Value, Shapes, Color, Edges, or Illustrate tabs. An account is only needed for two things: **syncing your settings across devices** and **connecting cloud storage** (Google Photos, Dropbox). ### Creating an account 1. Open the **Profile** tab. 2. Choose sign up, and enter your email and a password. 3. Confirm your email if prompted. 4. You'll land back on the Profile tab, now signed in. ### Signing in on a new device Sign in with the same email and password from the Profile tab. If you have an active subscription, your saved settings sync down automatically. ### Sessions Notana keeps track of the devices you're signed in on under **Profile → Sessions**. If you ever suspect a device shouldn't have access anymore, you can end that session from the list. There's also an emergency "clear session" button on the Profile tab for when sign-in gets into a stuck state — it safely signs you out locally without affecting your account. ### What your account does *not* do Signing in never uploads your images anywhere. Image processing always happens locally in your browser. Your account only stores your email, display name, subscription status, and — if you have an active subscription — your settings, so they follow you between devices. ## Connecting Google Photos & Dropbox Once you're signed in, the **Profile** tab shows a **Cloud Storage Integration** section where you can connect Google Photos and/or Dropbox. Connecting an account lets you save a finished study straight from a viewer instead of downloading it and moving it yourself. This is completely free and doesn't need a subscription — a free Notana account is all it takes. See [Plans & Pricing](https://usenotana.app/docs/subscription/plans-and-pricing.md) if you're wondering what the paid plan adds on top (it's settings sync between devices, not this). ### Connecting 1. Go to **Profile**. 2. Sign in if you haven't already — cloud storage connections are only available to signed-in users. 3. Under **Cloud Storage Integration**, choose Google Photos or Dropbox and follow the authorization prompt. This opens the provider's own sign-in page in a new tab; Notana never sees your Google or Dropbox password. 4. Once connected, a "Save to Google Photos" / "Save to Dropbox" option appears on your viewers. ### What Notana can and can't do with a connected account Notana only uploads an image the moment you click save — there's no background syncing, scanning, or automatic uploading. Notana never reads your existing photos or files in that account; the connection is upload-only, in one direction, and only when you ask for it. ### Disconnecting You can disconnect either account at any time from the same panel on the Profile tab. Disconnecting revokes Notana's access on the provider's side — it doesn't delete anything you've already saved there. ### Troubleshooting If a save fails right after connecting, try disconnecting and reconnecting the account — this refreshes the authorization token. If it keeps failing, use **Feedback** in the About tab and mention which provider and roughly when it happened. ## Subscription ## Plans & Pricing Notana's core study tools — Upload, Composition, Value, Shapes, Color, Edges, and Illustrate — are free and work fully offline, no account required. Use them as much as you like, forever, with no subscription at all. Creating a Notana account is also free, and on its own it already unlocks saving your finished studies straight to Google Photos or Dropbox — no subscription needed for that, just sign in and connect an account from the **Profile** tab. See [Connecting Google Photos & Dropbox](https://usenotana.app/docs/authentication/connected-accounts.md) for how. > ### Notana Plus — $95/year > > Signing in gets your cloud saves working, but it doesn't follow you between devices on its own. Plus is for exactly that — so a workspace you've spent time getting right never has to be rebuilt. > > - **Never set up your workspace twice.** Your theme, grids, viewer layout, and every slider you've dialled in follow you automatically — close your laptop mid-study and pick it back up tomorrow, on this computer or any other, exactly where you left off. > - **Cancel any time.** Nothing is locked in, and everything you've already saved stays yours whether you keep the subscription or not. > > $95 a year works out to a little under $8 a month — about the price of one good tube of paint — for a workspace that's always exactly how you left it. ### Checking your plan Open **Profile → Subscription** to see your current plan, renewal date, and what it includes. ### Upgrading From **Profile → Subscription**, choose upgrade and you'll be taken to a secure checkout page. Payment is handled by Stripe — Notana never sees or stores your card details directly. ### What happens if my subscription lapses Your local studies and images are never affected, and neither are your Google Photos or Dropbox saves — those only ever needed a free account, not a subscription, so they keep working as long as you're signed in. What pauses is settings sync: your workspace stops following you to new devices until you resubscribe. Everything still works fully offline in the meantime. ## Managing Your Subscription All billing management happens through **Profile → Subscription**. ### Changing plans or updating payment details Choose "Manage billing" on the Subscription panel. This opens Stripe's secure billing portal in a new browser tab, where you can update your card, change plans, or download invoices. Notana opens this in a full tab rather than inside the popup, since payment provider pages generally refuse to load inside an extension's small popup window. ### Cancelling Cancel from the same Stripe billing portal. Your plan stays active until the end of the period you've already paid for — cancelling doesn't cut off access immediately. ### Restoring access after resubscribing Sign back in on **Profile**, and Notana checks your subscription status automatically. Settings sync comes back within a few seconds — no need to reinstall or reconnect anything. Your Google Photos and Dropbox saves were never affected in the first place, since those only ever needed a free account. ### Billing questions For anything billing-related that isn't covered here — a missing invoice, a charge you don't recognise, a refund request — use **Feedback** in the About tab and choose "Billing" as the topic if it's offered, or describe it in the message. This routes straight to the team. ## Modules ## Modules Overview Each module tab takes your uploaded reference photo and breaks it down the way an art teacher would break it down on a whiteboard — one visual idea at a time. Every viewer inside a module is independent, with its own sliders, so you can push one study further without disturbing the others. ![Reference photo used for every example on this page](https://usenotana.app/docs/modules/examples/reference-photo.jpg) *The same reference photo is used for every example throughout these docs, so you can compare what each module does to it side by side.* | Module | What it's for | |---|---| | **[Composition](https://usenotana.app/docs/modules/composition.md)** | Where the eye goes, how the frame is organised, and how to restructure it. | | **[Value](https://usenotana.app/docs/modules/value.md)** | Light and dark, grouped simply enough to plan a painting from. | | **[Shapes](https://usenotana.app/docs/modules/shapes.md)** | Reducing the photo to its big, readable shapes. | | **[Color](https://usenotana.app/docs/modules/color.md)** | Palette, flattening, and colour relationships, separate from value. | | **[Edges](https://usenotana.app/docs/modules/edges.md)** | Line quality — what's crisp, what's lost, and where forms change. | | **[Illustrate](https://usenotana.app/docs/modules/illustrate.md)** | Turning a study into a finished, stylised piece. | ### A typical workflow 1. Start in **Value** to understand the big light/dark pattern before anything else — most paintings live or die on this. 2. Move to **Shapes** to see if those value groups read as clean, simple shapes. 3. Check **Composition** to see where the gaze path actually goes, and whether that matches your intent. 4. Use **Edges** to decide which boundaries deserve a crisp line and which should melt into their neighbour. 5. Bring it together in **Color** once the structure holds up. 6. Use **Illustrate** if you want a stylised finished piece rather than a raw study. None of this is prescriptive — plenty of artists jump straight to Shapes, or work Color first. The modules are independent so you can work in whatever order matches how you think. ## Composition Module Composition looks at the photo as a whole — where the eye travels, how the frame is balanced, and what could be restructured. It's the module to check before you commit hours to a study built on a weak arrangement. ### Gaze Path Traces a likely path the eye follows through the image, so you can check whether it leads where you want it to (and doesn't wander out of frame). - **Visual Weight** — how strongly areas attract the eye in the trace. - **Stopping Points** — the maximum number of places the eye pauses along its path. - **Point Spacing** — the minimum distance kept between stopping points, so they don't cluster together. - **Eye Entry Point** — where the viewer's gaze is assumed to enter the frame — top-left (the usual reading direction), top-right, centre, or bottom. - **Path Smoothness** — how curved the traced path looks, versus a straighter, more angular route. - **Pause Duration** — how long the animated trace lingers at each stopping point. - **Travel Speed** — how quickly the animated trace moves between points. - **Animation Speed** — the overall playback speed of the gaze-path animation. ### Focus Map Highlights the area(s) most likely to draw attention first, based on contrast and placement. ![Focus Map applied to the reference photo at basic settings](https://usenotana.app/docs/modules/examples/composition-focus-map.jpg) *Focus Map at its default settings — the light burst and the car read hot (drawing the eye first), while the surrounding trees fall into the cool background.* - **Visual Weight** — how strongly standout areas are emphasised; higher shows more candidate focal points. - **Image Preparation** — how the photo is prepared before analysis: as-is, simplified to high contrast, edge-enhanced, reduced to fewer values, or boosted to vivid colour. Different preparations can surface different focal points. - **Focal Point Color** — the colour used to mark areas that draw the eye. - **Background Color** — the colour used to mark quieter, less attention-grabbing areas. ### Negative Space Isolates the empty/background areas so you can judge whether they're doing useful compositional work or just left over. - **Quiet Threshold** — how uniform an area has to be before it counts as "resting space." - **Highlight Color** — the colour used to mark areas of visual rest. - **Highlight Strength** — how visible the highlighting appears over the photo. - **Detail Level** — smaller values pick up finer pockets of resting space; larger values only flag big, obvious ones. ### Movement Visualises the directional flow and rhythm running through the composition — diagonals, curves, repeated shapes. - **Arrow Count** — how many directional arrows are drawn. - **Sensitivity** — how responsive the arrows are to subtle directional changes in the photo. - **Arrow Length** — the maximum length of each arrow. ### Color Temperature Maps warm versus cool areas across the frame, useful for checking temperature balance independent of value or hue. - **Intensity** — how strongly temperature differences are emphasised. - **Show Neutral as Gray** — displays areas that are neither clearly warm nor cool in plain grayscale, so only true temperature stands out. ### Composer & Editor Interactive canvases rather than sliders-and-viewer studies — **Composer** lets you test crops, repositioning, or restructuring the composition directly, and **Editor** gives you general compositional editing tools once you've decided what needs to change. Both work by direct manipulation on the canvas rather than adjustment panels, so there's nothing to configure before you start — just open one and begin experimenting with the arrangement. ### How to use it Run **Gaze Path** and **Focus Map** first — together they'll tell you where attention naturally lands versus where you intended it to land. If those don't match, try **Composer** to test a different crop before you start painting, rather than discovering the problem halfway through a study. ## Value Module Value — how light or dark something is, independent of colour — is the module most artists are told to start with, and it's the biggest one in Notana. Each viewer groups the photo's tones a different way so you can find the pattern that best matches how you plan to paint or draw it. A few of these viewers (Highlights, Midtones, Shadows) share the same four helper switches, so they're explained once here rather than three times over: - **Use Transparency** — instead of colouring the selected range, make everything else see-through, so only that value range shows against a checkerboard. Handy for isolating a range to study on its own. - **Show Original Through** — flips which side of the mask is affected, showing the original photo inside the selected range instead of outside it. - **Preserve Luminance** — keeps the natural light-to-dark gradation inside the highlighted range rather than flattening it to one flat tone. Leave this on for a more paintable result. - **Invert Values** — colours everything *except* the selected range, useful for checking what's left once you set that range aside. ### Big Shape Notan The classic two-or-three-mass light/dark study. ![Big Shape Notan applied to the reference photo at basic settings](https://usenotana.app/docs/modules/examples/value-big-shape-notan.jpg) *Big Shape Notan at its default settings (4 values, colour kept) — the light shaft, road, and car resolve into a handful of confident masses.* - **Shape Size** — how big the simplified masses are. Bigger merges the whole scene into a few bold shapes; smaller keeps more of the original drawing. - **Number of Values** — how many light-to-dark steps to read the scene as. Two gives you a pure dark-vs-light notan. - **Shadow Detail** — higher keeps the dark masses separated from each other; lower lets them fuse into one connected shadow shape. - **Black & White Notan** — switch on for a pure light-and-dark notan, or leave off to keep a hint of the original colour in each mass. ### Value Groupings Finds the value groups that naturally exist in your photo, rather than you setting fixed thresholds. - **Dark / Middle / Light Group Color** — pick the colour used to represent each of the three natural value groups Notana finds in your image. - **Analysis Depth** — how thoroughly the image is scanned to find those groups. Higher is more precise but takes a little longer to process. ### Equal Thirds Splits your image's tonal range into three even thirds — a common, simple starting breakdown. - **Dark / Middle / Light Third Color** — the colour used for the darkest, middle, and brightest third of pixels in your photo. ### Shadows / Midtones / Highlights Three separate viewers that each isolate one part of the tonal range — dark, middle, or light — so you can study it in isolation. - **Range of Shadow / Midtones / Highlights** — slides the centre point of that tonal range earlier (darker) or later (lighter), so you can dial in exactly which part of the photo counts as "shadow," "midtone," or "highlight." - **Shadow / Midtone / Highlight Color** — the tint used to mark that range; Notana picks a sensible starting colour by analysing your photo, and you can change it. - Plus the four shared switches described above (Use Transparency, Show Original Through, Preserve Luminance, Invert Values). ### Tonal Peaks Flags the small pockets of extreme light or dark that tend to read as focal points. - **Dark / Middle / Light Tones Color** — the colour used to represent each detected tonal group. ### Painter's Massing Groups values the way a painter blocks in big shapes before refining — simple, connected masses rather than pixel-accurate matching. - **Number of Values** — how many light-to-dark steps to reduce the image to. Fewer reads as a bolder block-in. - **Tighten Values** — pulls the brightest and darkest areas back toward the middle, like squinting at the scene, so the big value relationships read more clearly. - **Shadow Detail** — higher keeps more separation inside the dark masses; lower lets shadows merge into simpler shapes. - **Smooth Flat Areas** — calms busy texture inside the big shapes while leaving the strong edges crisp. - **Keep Color** — on for a colour massing study, off for a pure light-and-dark value study. ### Clean Color Block A value study that keeps a hint of the original colour in each block, so it still reads at a glance as "this photo," not just an abstract value map. - **Color Smoothing** — how broadly colours blend into clean washes. The underlying light-and-dark drawing stays sharp no matter how high you push this. - **Calm Harsh Colors** — tames jumpy, oversaturated colour speckle by pulling it toward its surroundings. - **Number of Values** — how many light-to-dark steps the values are blocked into. - **Color Richness** — dials colour intensity up or down without touching the values themselves. ### Value Study (combine your own) A bonus viewer for layering Highlights, Midtones, and Shadows together on your own terms once you've dialled each in separately. - **Add In Highlights / Midtones / Shadows** — choose which of the three ranges to include in the combined study. - **Mixing Style** — how the layers combine: options range from gentle (Lighten, Subtle Glow) to bold (Add Light, Intense Light), plus a few that isolate colour or brightness on their own (Color Only, Brightness Only). - **Transparency of Values** — how see-through each layer is when combined. ### How to use it Every viewer has an intensity, range, or grouping slider — push it toward simpler and you get bigger, more confident value shapes; ease it back for a study closer to the original photo's subtlety. There's no "correct" setting; try a couple until you find the breakdown that matches what you're trying to learn from the reference. ## Shapes Module Once you know your values, the Shapes module asks: do those values actually read as clean, simple shapes? This module is about silhouette and mass, not detail. Every viewer in this module also has an **Enable Image Caching** switch. It's a technical convenience, not a creative choice — when on, Notana remembers the last processed result so flipping settings back and forth is instant. Leave it on unless you're short on memory. ### Simple Notan The classic two-shape (light/dark) silhouette study, stripped of everything but shape. - **Black-White Balance** — moves the line between "counts as light" and "counts as dark." Push it one way to grow the dark shapes, the other way to grow the light ones. - **Squint (Blur)** — softens the photo before splitting it into shapes, simulating the effect of squinting at your subject so only the big masses survive. - **Draw Outline** — adds a thin outline around each shape, useful when the light/dark shapes butt up against similar-toned neighbours. ### Block-In Breaks the photo into the big rough shapes an artist would block in first, before any refinement. ![Block-In applied to the reference photo at basic settings](https://usenotana.app/docs/modules/examples/shapes-block-in.jpg) *Block-In at its default block size — the scene reads as a handful of organic, connected masses instead of fine detail.* - **Layout Pattern** — the underlying grid the blocks are distributed on: square grid, honeycomb, brick, diamond, radial rings, an organic "Voronoi" pattern, strips, or a random mix. Voronoi tends to feel the most natural; grid patterns feel more graphic and deliberate. - **Block Shape** — the shape of each individual block — fill (organic, follows the Voronoi regions), square, rectangle, circle, triangle, star, blob, and more. - **Block Size** — how large each shape mass is. Larger blocks give simpler, broader forms; smaller blocks keep more of the original detail. ### Value Bands Groups shapes by value step, similar to the Value module but focused on the resulting shape outlines rather than the tones themselves. - **Number of Bands** — how many distinct value bands to split the image into. - **Squint (Blur)** — smooths the transitions between bands so the result reads as shapes rather than a stepped gradient. - **Draw Outline** — traces the boundary between each band. ### Value Masses Merges neighbouring same-value shapes into single connected masses, so you can see if your composition reads as a few big masses or a scatter of small, disconnected ones. - **Edge Sensitivity** — lower reveals more of the original detail as separate shapes; higher merges everything down to only the major transitions. ### Light Basins Highlights the connected pools of light across the image, useful for checking whether your light areas form one confident shape or several competing ones. - **Detail Level** — lower captures more of the fine detail in how light pools together; higher shows only the broadest light masses. ### Edge-Bounded Builds shapes from where edges naturally close off, closer to how the eye actually groups a scene into objects. - **Edge Sensitivity** — lower picks up more edges (more, smaller shapes); higher only registers the strongest boundaries. - **Simplification** — the smallest a region can be before it gets folded into a neighbour — higher gives simpler shapes. - **Draw Outline** — traces the boundary around each detected shape. ### Shape Simplifier A general-purpose control for pushing a photo toward simpler, blockier shapes or backing off toward its real complexity. - **Edge Smoothing** — smooths uniform areas while keeping real edges sharp, like squinting at your subject. - **Value Steps** — how many distinct light/dark notes the shapes are built from; fewer steps means simpler shapes. ### How to use it Ask "does this still look like the subject if I squint?" If a shape breakdown falls apart or turns into confetti, ease the simplification back. If it still looks too busy even at the simplest setting, it's often a sign the original photo's composition doesn't have a strong shape story to begin with — worth checking in the Composition module. ## Color Module The Color module looks at palette and colour relationships on their own, separate from value and shape, so you can study what a photo's colour is actually doing. ### Flat Colour Flattens the image into a small number of solid colour patches, similar to a limited-palette colour study. ![Flat Colour applied to the reference photo at basic settings](https://usenotana.app/docs/modules/examples/color-flat-colour.jpg) *Flat Colour at its default 12-colour palette — the autumn foliage, road, and car each settle into a small number of clean colour patches.* - **Number of Colours** — how many colours to paint with. Fewer feels bold and poster-like; more keeps subtler shifts of light. - **Edge Smoothing** — how much to settle the resulting shapes — higher calms jagged edges into clean masses. - **Colour Vibrancy** — how vivid the colours look, from gentle to saturated and punchy. ### Geometric Breaks the image into simple geometric colour regions, useful for seeing big colour relationships without the distraction of the subject's real shapes. Includes everything in Flat Colour above, plus: - **Shape Simplicity** — how simplified the geometric shapes are; higher gathers detail into chunkier, more graphic forms. - **Curve Style** — how the shape edges are drawn, from crisp angular cuts to soft flowing curves. ### Illustrator 1 A flat, illustrative colour treatment with an inked outline — a bridge toward the Illustrate module. Includes everything in Flat Colour above, plus: - **Outline Weight** — how prominent the outline around each shape is, from none up through subtle, medium, strong, to bold. ### Illustrator 2 A more advanced illustrative colour treatment with two different ways of building its palette. - **Colour Mode** — **Adaptive** picks the best colours across the whole image; **Banded** keeps the original's light-to-dark structure intact and colours each tonal band separately. - **Total Colours** — how many colours to use in Adaptive mode. - **Value Bands** *(Banded mode)* — how many tonal bands to split the image into; more bands give a finer light-to-dark progression. - **Colours per Band** *(Banded mode)* — how many colours each tonal band can use; more brings warm/cool variety to each value level. - **Smoothing** — how much to soften the photo before colouring; stronger gives broader, calmer colour shapes. - **Keep Edges Crisp While Smoothing** — when on, smoothing softens flat areas but keeps the boundaries between objects sharp — best for portraits and clear subjects. - **Minimum Shape Size** — tiny stray shapes smaller than this get folded into their neighbours, giving a cleaner, less speckly result. - **Shape Colouring** — **Shared Palette** makes every shape use one of a fixed set of colours, like a print with a limited ink set; **True Average** lets each shape mix its own colour, which feels more painterly. - **Show Outlines** — draws a soft dark line at the boundary between colour shapes, like a hand-drawn ink overlay. - **Colour Vibrancy** — how rich and saturated the flat colours come out. ### Mosaic A tiled colour-averaging study, handy for seeing dominant local colour without fine detail pulling your eye around. Includes everything in Geometric above, plus: - **Tile Size** — how large each individual mosaic tile is; smaller gives fine detail, larger gives chunky tilework. - **Grout Width** — how wide the gaps between tiles are; thicker grout makes each tile feel more separate. - **Grout Colour** — the colour of the "cement" between tiles — warm sand by default, but cool greys or charcoal work too. ### Palette Remap Shows the photo repainted using a specific limited palette, so you can preview how a reference would look in your own mixed set of colours before touching paint. - **Number of Key Colours** — how many dominant colours to pull from your image; fewer gives a bolder, simpler result. - **Palette Strength** — how strongly the chosen palette is applied, from a gentle tint up to a full colour change. - **Painting Style** — **Tint** gently washes the new colours over your image; **Repaint** replaces colours entirely; **Glaze** layers colours like a transparent oil glaze. - **Remember Last Result** — a technical convenience that keeps the processed image in memory so switching back is instant; not a creative setting. ### How to use it Start with **Flat Colour** to see the photo's core palette with no distractions, then try **Palette Remap** if you're planning to paint with a specific limited set of colours and want to preview the result first. **Geometric** and **Mosaic** are good sanity checks for whether a composition's colour relationships hold up once detail is removed. **Illustrator 1** and **Illustrator 2** are worth a look once you want something closer to a finished, stylised piece. ## Edges Module Edges is about line quality — which boundaries in a photo are crisp, which dissolve into their neighbour, and where a form genuinely changes direction. It's the module closest to a traditional line drawing or ink study. ### Basic Edges A straightforward line drawing extracted from the photo, a good starting point for any linework study. ![Basic Edges applied to the reference photo at basic settings](https://usenotana.app/docs/modules/examples/edges-basic-edges.jpg) *Basic Edges at its default detail level — a clean line drawing of the car and treeline, ready to trace or draw from directly.* - **Detail Amount** — how much detail to capture; lower shows more lines, higher shows only the strongest edges. - **Smoothing** — softens the photo before finding lines, reducing noise and small distracting details. - **Line Thickness** — how thick the drawn lines appear. ### Directional Highlights edges that run in a particular direction, useful for studying the "flow" or gesture running through a composition. - **Edge Sensitivity** — which edges get a stroke; lower catches more subtle forms. - **Line Width** — how thick each stroke appears. - **Stroke Length** — how long each individual gesture stroke is drawn. - **Stroke Spacing** — the gap between strokes; tighter spacing shows more detail. ### Hierarchical Edges Separates strong, structural edges from minor, textural ones, so you can draw the important lines first and add detail later, the way a life-drawing teacher would tell you to. - **Show Major Forms / Secondary Edges / Fine Details** — three switches to show or hide each tier of line on its own. - **Line Thickness** — how thick the drawn lines appear. - **Major Form / Secondary Edge / Detail Sensitivity** — three separate sliders that adjust what counts as "major," "secondary," or "fine detail" for each tier. ### Simplified Forms Reduces the linework to the minimum needed to still read as the subject — good for gesture practice. - **Simplification Amount** — higher values show only the largest forms. - **Minimum Shape Size** — ignores shapes smaller than this percentage of the image. - **Line Thickness** — how thick the drawn lines appear. ### Value Contours Draws lines only where value actually changes, tying this module back to the Value module's breakdown. - **Value Levels** — how many light-to-dark bands to derive contour lines from; fewer levels means simpler, bolder contours. - **Smoothing** — softens the photo to reduce noise and find cleaner contours. - **Line Thickness** — how thick the drawn lines appear. ### Shadow Boundaries Traces just the edges of shadow shapes, useful when you only care about where light meets dark, not every surface detail. - **Shadow Darkness Level** — how dark a value has to be to count as shadow; adjust this to match the lighting in your reference. - **Smoothing** — softens the photo to get cleaner shadow boundaries. - **Show Form Edges** — also shows lighter form edges for context alongside the shadow boundaries. - **Line Thickness** — how thick the drawn lines appear. ### Lost & Found Flags edges that fade out or "lose" themselves into a neighbouring shape versus ones that stay crisp — a classic painterly device worth noticing before you commit to a hard outline everywhere. - **Sharp Edge Level** — edges stronger than this appear crisp and "found," drawing the eye. - **Soft Edge Level** — edges weaker than this are "lost" and blend away, creating atmosphere. - **Transition Softness** — how gradually edges shift from found to lost. - **Line Thickness** — how thick the drawn lines appear. ### Color Underpainting Combines a line study with a soft colour underlayer, closer to how a traditional underpainting looks before rendering begins. - **Color Areas** — fewer gives bigger, bolder colour shapes; more gives finer colour detail. - **Soften Colors** — blends neighbouring colours together for smoother, simpler areas. - **Color Boundaries** — darkens the border between colour areas, from soft blending to clear separation. - **Color Intensity** — pushes colours richer or pulls them back toward muted tones. - **Tracing Paper** — like laying tracing paper over the painting; slide it up to lighten the colour so your lines stand out more clearly. - **Show Big Shapes** — lays the major shape outlines over the colour, with its own colour and thickness controls. - **Show Light/Dark Contours** — adds lines where light areas meet dark areas, with its own colour and thickness controls. - **Show All Lines** — adds every visible edge as a full line drawing, with its own colour and thickness controls. - **Line Darkness** — how dark the combined lines appear over the colour underneath; lower gives a ghosted look, higher gives strong lines. ### How to use it If you're not sure where to start, try **Basic Edges** first, then **Hierarchical Edges** to see which of those lines actually matter. **Lost & Found** is worth a look on any photo with strong lighting — it'll usually reveal that far fewer edges are truly "hard" than you'd assume. ## Illustrate Module Illustrate is the finishing module — where a study turns into something closer to a finished, stylised piece rather than an analysis tool. Unlike the other modules, its two viewers — **Processed** (the finished illustration) and **Palette Map** (just the colour swatches it settled on) — share one single settings panel, so every adjustment below updates both at once. ![Illustrate applied to the reference photo at basic settings](https://usenotana.app/docs/modules/examples/illustrate-processed.jpg) *The Processed viewer at default settings — flat colour, poster-like shapes, and a crisp outline around every region.* The panel is organised into four groups. ### Simplify Controls how much the photo is smoothed into clean shapes before any colour is applied. - **Smoothing Strength** — how much to settle the shapes; higher melts fussy texture into clean colour masses. - **Edge Crispness** — how firmly the boundaries between regions are kept while smoothing inside them; low feels painterly, high feels graphic and posterised. - **Detail Cleanup** — wipes out small specks and lone pixels left after smoothing; turn it up for a cleaner, more graphic look. ### Color Controls the palette itself. - **Number of Colours** — fewer makes a bolder graphic poster, more keeps subtler shifts of light. - **Colour Vibrancy** — pull it down for muted, print-like colour, or push it up for travel-poster pop. - **Contrast** — how dramatic the light/dark separation is before colours are chosen. - **Brightness** — lifts or sinks the whole image before colours are chosen. - **Hue Shift** — rotates the colour wheel before the palette is picked; gentle shifts give golden-hour or cool-mist variants without changing anything else. - **Palette Selection Method** — how the working palette is chosen: **Balanced** averages the photo well, **Faithful** splits the colour space evenly for a fast, predictable result, and **Accent-loving** keeps rare bright details (a red coat, a yellow sign) from being washed out. - **Tonal Bands** — snaps each colour channel to a fixed number of steps before colour reduction; leave at 0 for smooth colour, or raise it for a screen-printed feel. - **Dither Style** — adds intentional speckle when reducing colours: **None** for clean flat colour, **Halftone** for a soft, ordered pattern like cheap print, or **Risograph** for a speckled, painterly texture. ### Edges Controls the inked outlines, if any. - **Outline Style** — where the lines come from: **None** for flat colour with no ink, **Around Shapes** for the classic poster look (lines along every colour boundary), **From Photo** to trace the original photograph's contours like a sketch, or **Both** together. - **Line Strength** — how firmly the outline ink is laid down, from invisible to solid. - **Line Thickness** — from a hairline up to a heavy brush-pen stroke. - **Photo Edge Sensitivity** — only matters when Outline Style includes "From Photo" — how sensitive the contour finder is to faint edges in the source. - **Outline Colour** — near-black by default, but try deep brown for a storybook feel or off-white for a paper-cut look. ### Output Final finishing touches. - **Light Falloff** — a subtle top-to-bottom darkening that gives the image a touch of ambient weight at the bottom, like a sky-to-ground shift. Set to 0 for perfectly flat colour. - **Preserve Quiet Backgrounds** — when on, calm low-detail areas (like clear skies or plain walls) keep their original soft tones instead of being flattened to a single palette colour. ### How to use it Illustrate works best after you've already made decisions in Value, Shapes, and Color — it's meant to preview a direction, not replace the thinking those modules help with. Start with Simplify and Color to settle the overall look, then decide whether Edges add anything, and finish with Output. Treat it as a quick "what would this look like finished?" check rather than a substitute for the study itself. ## Viewers ## Working with Viewers Every module tab (Composition, Value, Shapes, Color, Edges, Illustrate) is made up of **viewer cards** — one card per study, each showing the processed image with its own sliders underneath. Cards are independent: adjusting one never affects another. ### Anatomy of a viewer card - **Image area** — the processed study. Click to zoom, drag to pan. - **Adjustments** — the sliders, colour pickers, and toggles specific to that study (for example, an intensity slider on a Value viewer, or a palette picker on a Color viewer). - **Save** — download the result, or send it straight to Google Photos / Dropbox if you've connected an account. The very first card on most tabs is always **Original** — the unprocessed photo, kept alongside every study so you can compare at a glance. ### The layout toolbar At the top of any tab with viewers, a small toolbar lets you control how the cards are arranged: - **Layout selector** — click to cycle how many viewer cards sit side by side (flowing/automatic, or a fixed 1 through 6 columns). Useful for lining several studies up for direct comparison, or focusing on just one at a time. - **Text size control** — adjusts the size of labels and captions on the cards, independent of your browser's zoom. - **Process All** — reprocesses every viewer on the current tab in one go, handy after you've changed the source image or a global setting. ### Tips - If a viewer looks stuck on "processing," try **Process All** in the toolbar rather than re-uploading the image. - Comparing two studies side by side is usually more useful than flipping between tabs — set the layout to 2 columns and place the ones you want to compare next to each other. - The **Grids** and **Image Info** panels (under Settings) apply to every viewer card at once, so you don't need to toggle them per-card. ## Layout & Grids Two settings shape how viewers are presented: the layout toolbar (per-session, quick to change) and the Grids panel under Settings (persistent, applies everywhere). ### Layout toolbar Found at the top of any module tab that has viewers. Clicking the layout icon cycles through: - **Flow** — cards wrap automatically to fit the window width. Good default for browsing everything at once. - **1 column** — one viewer at a time, largest possible size. Good for close study of a single result. - **2–6 columns** — fixed side-by-side layouts, best for direct comparison between a small number of studies. This choice is remembered per browser session but isn't part of your synced settings — it's meant to be changed freely as you work. ### Grids The **Grids** settings panel overlays compositional guides — rule of thirds, golden ratio, or a simple centred cross — on top of every viewer card at once. This is separate from the Composition module: grids are a drawing aid you look *through*, while the Composition module's Gaze Path and Focus Map *analyse* the image directly. Turn grids on when you're using a viewer as a direct reference to draw or paint from; turn them off when you just want to look at the study without visual clutter. ### The ⓘ info panel Every viewer card also has a small **ⓘ** button in its corner — always there, no setting required. Click it and the card flips to show the file's size, aspect ratio, format, and file size, plus a note if the image carries a Notana authenticity fingerprint. Click again to flip it back. See [Viewer Card Buttons](https://usenotana.app/docs/viewers/viewer-card-buttons.md) for this and every other button on a viewer. This is separate from the Settings → **Image Info** pill, which controls the invisible authenticity fingerprint itself, not this panel — see [Settings Overview](https://usenotana.app/docs/settings/overview.md). ## Viewer Card Buttons Every viewer card — the box showing your original photo or a processed study — has a small strip of tool buttons tucked along one edge. This page walks through every button you might see there: what it does, and exactly when it shows up versus stays hidden. ### The sliding tool drawer Most of these buttons live in a drawer that slides in and out along the edge of the viewer. Look for a small handle (a little grip mark) — click it to slide the drawer open or closed. This keeps the image itself uncluttered when you just want to look, and puts the tools a click away when you need them. Inside the drawer, top to bottom: **Size slider.** A slider for making the viewer bigger or smaller on your screen. This doesn't change your actual image, just how large it's displayed. Click the percentage number next to it to quickly cycle between a few common sizes (50%, 75%, 100%, 25%). Always shown. **Grid toggle.** Click to cycle through compositional grids (rule of thirds, and similar) drawn over the image as a drawing aid. Click again to change the grid, or to turn it off. Shown only if grids haven't been hidden for this viewer in Settings → Viewer. **Diagonals toggle.** Similar to the grid toggle, but for diagonal guide lines instead of a grid — handy for checking the diagonal balance of a composition. Shown only if it hasn't been hidden in Settings → Viewer. **Grid colour picker.** A small coloured dot — click it to open a colour picker and change the colour of your grid and diagonal lines, useful if the default colour is hard to see against a particular image. Shown only if it hasn't been hidden in Settings → Viewer. **Print.** Opens a print preview of this image, with any grid or diagonal lines baked in exactly as you see them. Shown only if it hasn't been hidden in Settings → Viewer. **Set as current.** Makes this image your new "current" working image elsewhere in Notana. Shown only if it hasn't been hidden in Settings → Viewer. **Fullscreen.** Opens the image edge-to-edge in a large overlay for close viewing — click anywhere, or the ✖ in the corner, or press Escape, to close it again. Shown only if it hasn't been hidden in Settings → Viewer. **Download.** Saves this image to your computer as a file, with any grid or diagonal lines baked in. Always shown. **Apply watermark.** Stamps an invisible authenticity fingerprint into the image. This one only appears once you've turned on **Enable Metadata Fingerprint** under Settings → Image Info — see [Settings Overview](https://usenotana.app/docs/settings/overview.md) for what that does. Off by default, so most people won't see this button until they turn that setting on. **Save to Google Photos.** Sends this image straight to your Google Photos library. Only appears once you've connected a Google account — see [Connecting Google Photos & Dropbox](https://usenotana.app/docs/authentication/connected-accounts.md). While it's uploading, the button briefly shows a small spinner instead of its usual letter. **Save to Dropbox.** Same idea as Google Photos, but for Dropbox — only appears once a Dropbox account is connected, and also shows a brief uploading spinner. **Undo last guide.** Removes the most recent hand-drawn guide line from this viewer. This one is a little different from the rest: it only appears once you've actually drawn a guide on that particular image, and disappears again once there's nothing left to undo. ### The always-there ⓘ button Separate from the sliding drawer, every viewer also has a small **ⓘ** button that's always visible in the corner of the image — no setting turns it on or off. Click it and the card flips over to show details about the image (its size, aspect ratio, format, file size, and whether it carries a watermark fingerprint). Click it again to flip back to the picture. ### The Original card's adjustment tray The **Original** image card (where you fine-tune brightness, contrast, and similar basic adjustments before sending an image into a module) has its own separate sliding tray, distinct from the tool drawer described above. Look for the **Adjust Original Image** handle along the bottom edge of that card — click it to slide the adjustment controls up into view, and click it again to tuck them away. This tray only appears on the Original card itself; other viewer cards don't have it. ### A note on hidden buttons Several buttons above (grid, diagonals, colour picker, print, set as current, fullscreen) can be turned off if you don't use them, from Settings → Viewer — see [Settings Overview](https://usenotana.app/docs/settings/overview.md). If a button described here isn't showing up for you, that's the most likely reason: it's been intentionally tucked away to keep your workspace simpler, not a sign of something broken. ## Feedback ## Sending Feedback Notana's feedback form lives at **About → Feedback**. ### How to send feedback 1. Open the **About** tab (bottom-right of the header). 2. Choose the **Feedback** subtab. 3. Pick a type — general feedback, a bug report, or a feature request. 4. Add a short subject line and a description. The more specific, the easier it is for us to act on — for a bug, mention which tab or viewer, and what you expected versus what happened. 5. Your email is optional, but include it if you'd like a reply. 6. Submit. You'll see a confirmation once it's gone through. ### What happens to it Feedback goes straight to the Notana team — it isn't a public forum post, and it isn't reviewed by anyone outside the team building the extension. ### Reporting a bug effectively The most useful bug reports include: - Which tab and which viewer you were on. - What you clicked or adjusted right before it happened. - Whether reloading the extension (or restarting the browser) fixes it. - Your browser and OS, if you know it's not Chrome/Windows-typical. ### Other ways to reach us For billing issues, mention it's billing-related in your feedback so it can be routed appropriately — see [Managing Your Subscription](https://usenotana.app/docs/subscription/managing-your-subscription.md) for what's normally handled directly through the Stripe billing portal instead. --- *Generated from https://usenotana.app/docs/manifest.json. 18 pages.*