Grunge Web Design Tutorial: Photoshop to Responsive Site
Want to design a grunge-style website mockup in Photoshop? This 12-step exercise builds an urban, scrapbook-like layout from concrete, paper, light rays, tape and hand-drawn details. Keep the original assets on separate layers so you can adjust the atmosphere without damaging the photographs. The finished image is a visual concept, not a functioning website; the final section explains how to translate it into a readable, responsive page.
- A textured background with a restrained concrete overlay.
- Two overlapping, distressed-paper panels with depth.
- A tape-backed menu and a rough hand-drawn navigation accent.
- A design file with intact layers, masks and reusable assets.
The finished grunge layout
The reference image below shows the paper panels, dark urban texture and asymmetric navigation assembled in the steps that follow.
Before you open Photoshop
Gather photographs of concrete, torn paper, tape and a coffee stain that you are licensed to use, or photograph your own. Keep each original file and a record of its licence. Create a folder for source images and save the working document as a layered .psd. Avoid flattening the artwork until you have exported a preview. A rough-edged image can look appealing while still leaving text and interactive links clear and accessible.
Step 1: make a dark urban background
Create a new RGB Photoshop document around 1,000 pixels wide for this mockup. Set a muted gray-green or warm charcoal base on a background layer, then add a separate layer containing a subtle darker gradient from the top. Use a gradient adjustment or fill layer if you want to revisit colors later. The 1,000-pixel width is an illustration size, not a recommended fixed-width live website.
Step 2: place a concrete photograph
Add a concrete or stone surface photo as a new layer above the base. Choose a surface with variations in grain rather than a heavy repeating pattern. Scale it to cover the composition without stretching it disproportionately. If you plan to reuse the photograph elsewhere, convert it to a Smart Object before scaling.
Step 3: make the texture subtle
Reduce the concrete layer’s opacity to approximately 10% as a starting point. Adjust to suit the original photograph and background color: the goal is visual depth, not texture that competes with the words you will add later. Compare the image at 100% zoom, where noise and repeated patterns are easier to notice.
Step 4: add low-contrast light rays
On a separate layer, draw a long tapered selection using the Lasso tool, fill it with a light color and apply a gradient mask so it fades naturally. Duplicate and rotate one or two rays if desired, then reduce their opacity toward 10%. A layer mask is preferable to permanently erasing the rays because you can edit the fade later.
Step 5: cut out the main torn-paper panel
Place a photograph of a torn sheet of paper on a new layer. Select the paper with the Object Selection tool, Lasso or another appropriate selection method, then turn the selection into a mask. Photoshop’s current layer-mask workflow lets you reveal or hide an area without deleting original pixels. Adjust the panel opacity around 70% only if the background does not make future text harder to read. A subtle shadow gives the paper depth more predictably than a pronounced glow.
Step 6: balance distressed visual details
Add a small number of supporting objects: a paper tag, stamp or understated ink mark. Put each on its own layer or group. Use Hue/Saturation adjustment layers and individual opacity controls to make photographs from different sources feel part of the same composition. Leaving empty space is essential; a collection of high-contrast stickers behind every paragraph will overpower the content.
Step 7: add a second paper panel for a sidebar
Position a second paper photograph behind the main panel, then give it a lower saturation and adjust opacity to about 60%. Instead of permanently deleting the part hidden behind the main panel, use a mask on the sidebar layer. This avoids an awkward show-through if the foreground panel is semi-transparent and lets you reposition the panels later.
Step 8: add notebook lines and a coffee stain
Draw a fine horizontal line on a separate layer and duplicate it at even spacing. Use a textured brush on the line group’s mask to break up some sections. Add a licensed coffee-ring image, reduce its saturation and try an opacity around 20%. Place it partly across a paper edge to reinforce the layered look; keep it away from the main text.
Step 9: set a clear navigation label on tape
Create a short menu using a legible typeface with a subtle vintage character, then position a cut-out tape photo behind the labels. Keep menu text on separate, editable type layers. A decorative font used only for small navigation can be hard to read, so check it at mobile scale and preserve enough contrast against the tape.
Step 10: fade the tape without deleting it
Reduce the tape’s saturation and lightness until the menu labels remain dominant. Add a layer mask and drag a black-to-white gradient across the mask to fade the tape’s lower edge; Adobe’s mask-editing documentation explains why white reveals the image and black hides it. The original tutorial’s tape layer used about 70% opacity; treat that as a visual starting point, not a rule.
Step 11: sketch a rough active-menu accent
On a new transparent layer, draw a loose circle with a narrow textured brush and fit it around the currently selected menu item. Reuse the same visual language for other menu states. Keep the accent separate from the lettering, and remember that a Photoshop mockup cannot create an actual hover or focus state: those interactions will have to be built and tested in HTML/CSS when you implement the design.
Step 12: add content and review the composition
Populate the mockup with a real page title, short paragraphs and a clear call to action rather than filler text. A readable body face such as Georgia can balance the distressed decoration. Check the line length, contrast and hierarchy at several screen widths. Save the layered Photoshop file and export an image preview without replacing editable source layers.
Turn the grunge mockup into a real website
Use CSS for flexible columns, spacing and navigation, and reserve decorative photos for lightweight background or image elements. A real site needs semantic headings, keyboard-visible focus states, text contrast, responsive behavior and optimized media. Do not export the entire Photoshop canvas as one huge background: it will blur on some screens, make text inaccessible and be difficult to maintain.
If you plan to build the finished design in WordPress, start with a maintained theme, then use blocks or a compatible builder for the page structure. Our SEO-friendly WordPress theme guide explains what to test beyond visual demos. For a commercial portfolio, see our portfolio-theme comparison for a real editable site rather than a static image.
Keep your textures editable in Photoshop, then build a responsive interface with real text, links and navigation.
How to hand off a grunge mockup for a responsive website
Export the decorative artwork, not the whole page as one image. Keep headings, body text, navigation and buttons as real page elements so people can resize text, select it and use assistive technology.
Prepare separate background textures, paper edges and decorative accents. Record the fonts, spacing, colours and intended reading order. Show how the overlapping panels should stack on a narrow screen instead of assuming the desktop composition can simply shrink.
- Use subtle textures behind long paragraphs.
- Check contrast where photographs and text overlap.
- Keep the navigation understandable without the decorative tape.
- Give meaningful images descriptive alternative text and treat purely decorative assets accordingly.
Prototype a single article and its mobile version before recreating every visual detail in WordPress.
Your next step
Grunge design FAQs
What texture works for a grunge background?
Concrete, distressed paper and restrained ink marks can work. Choose photographs you can legally use, and lower contrast behind text.
How can I change a paper cut-out without starting again?
Use a layer mask rather than permanently deleting pixels; you can refine the edge or replace the photo while preserving the layout.
Can Photoshop export a working website?
It creates design assets and previews, not a complete responsive, accessible website. The layout and interactive controls still need implementation.
Why is the navigation accent shown without a screenshot in step 11?
The existing image previously associated with that step was unrelated to the tutorial. Follow the text instructions and use the finished composition as the visual reference.
