logoredraws.com

Pixel Brush in Photoshop: Setting Up Hard-Edged Strokes for Favicon Pixel Work

How to set up a pixel brush in Photoshop for crisp, aliased strokes on favicon grids, which settings to check first, and how this raster work relates to a vector logo master.

Published

Contents
  1. The short answer
  2. Why the Brush tool gives soft edges even at 100% hardness
  3. Setting up the Pencil as a pixel brush
  4. Workspace settings that affect pixel accuracy
  5. Order of checks when strokes are still not crisp
  6. How this relates to a vector logo
  7. Gaps in this answer

The short answer

Photoshop has no separate built-in tool called a pixel brush. The standard approach is the Pencil tool with a hard, round brush tip at 1 pixel, combined with Nearest Neighbor interpolation and the pixel grid turned on. The Pencil tool paints without anti-aliasing, so each stroke fills whole pixels instead of blending soft edges into neighboring ones. That is the property you need when you hand-refine a favicon at very small sizes such as 16×16 or 32×32 pixels.

The rest of this guide covers which settings to check, in what order, when strokes still come out blurry or broken. No specific Photoshop version was supplied, so menu names and locations below reflect long-standing behavior and may differ slightly in your release.

Why the Brush tool gives soft edges even at 100% hardness

The Brush tool always anti-aliases its edges. Setting hardness to 100% makes the falloff steeper, but edge pixels can still get partial opacity, which shows up as gray or semi-transparent fringes on a tiny icon. The Pencil tool skips that blending entirely. If your strokes look fuzzy when zoomed in, confirm first that you are using the Pencil and not the Brush. Both tools share the B shortcut, and Shift+B cycles through that tool group.

Setting up the Pencil as a pixel brush

  • 1. Select the Pencil tool from the Brush tool group.
  • 2. In the brush picker, choose a hard round tip and set the size to 1 px. Larger square or round sizes work for filling blocks.
  • 3. In the options bar, keep Mode at Normal and Opacity and Flow (where shown) at 100% unless you deliberately want lighter pixels.
  • 4. Set Smoothing in the options bar to 0% so strokes follow the cursor directly and do not drift between pixels.
  • 5. In the Brush Settings panel, turn off Shape Dynamics, Scattering, Transfer and other dynamics that vary size or opacity during a stroke.
  • 6. Check Spacing under Brush Tip Shape. If a dragged line breaks into separate dots, lower the spacing value.
  • 7. Optionally save the result as a brush preset so you do not have to repeat these steps.

Workspace settings that affect pixel accuracy

  • Pixel grid: turn on View > Show > Pixel Grid. The grid only appears at high zoom levels, so zoom well in to see individual pixel boundaries.
  • Image interpolation: in Preferences > General, set Image Interpolation to Nearest Neighbor (preserve hard edges). This controls how Photoshop resamples pixels when you scale or transform them, which is the most common cause of blur after editing.
  • Transform interpolation: when using Free Transform, check the Interpolation option in the options bar. Recent versions show it there, and it can override the default.
  • Straight lines: click once, then Shift-click a second point to draw a straight pencil line between them.

Order of checks when strokes are still not crisp

  • 1. Tool: Pencil, not Brush. The Brush anti-aliases regardless of hardness.
  • 2. Brush tip: hard round at a whole-pixel size, with no dynamics enabled.
  • 3. Opacity, Flow and blend mode: anything below full strength or not set to Normal produces partial pixels.
  • 4. Layer: check that the active layer is not a smart object or a layer with reduced opacity or fill.
  • 5. Interpolation: if the art was crisp before scaling or rotating, the resampling method is the cause. Undo and redo the transform with Nearest Neighbor.
  • 6. Selections and helpers: turn off Anti-alias for the Magic Wand, the marquee and lasso tools, and the Paint Bucket. Set Feather to 0 px so fills and deletions stay hard-edged.
  • 7. Shapes: shape layers are vector-based and anti-aliased when rendered. Drawing them in Pixels mode with anti-aliasing off, or rasterizing and then cleaning up with the Pencil, gives hard edges.
  • 8. Export: export at the document's actual pixel dimensions. Letting the export dialog scale the image resamples it and can reintroduce soft edges.

Pencil work is raster editing. It refines how a logo appears on a fixed pixel grid, but it does not make the logo vector. A practical workflow keeps the vector logo as the master, renders it at the target favicon size, and then uses the Pencil to correct individual pixels where automatic rendering produced muddy edges or merged details. Whether a particular pixel looks better after correction is a visual judgment. Whether the file contains paths, live text or embedded raster images is an observable property, and you check it in the source file, not in the preview.

Do not assume a logo file is true vector because of its extension or because it looks sharp. A file in a vector format can contain embedded raster images, and text may be live or already converted to outlines. Inspect the layers or objects in a vector editor before choosing it as your master. Having access to a logo file also does not grant permission to modify it or use it as a favicon, so confirm usage rights separately.

Gaps in this answer

No source file, Photoshop version or description of the specific symptom was supplied. If the steps above do not resolve the problem, the next useful details are your Photoshop version, whether the blur appears while painting or only after scaling or export, and the type of layer you are painting on.