ClearNews magazine PSD template

Last Updated on August 5, 2026 by Editorial Team

ClearNews is a clean magazine template designed and shared by Diego Valencia. The package includes 3 PSD templates (homepage, category, article) based on Bootstrap 1170px grid system.

What makes ClearNews work as a starting point is how disciplined the layout is. The homepage hero uses a single large editorial photo with a bold navigation arrow overlaid, a byline and headline treatment sitting in a white card that anchors the bottom left corner, and a clean top navigation bar with a simple blue dot accent tying back to the logo mark. Below that, a “Latest Stories” section breaks into a tidy grid of thumbnail cards, which is exactly the pattern most news and magazine sites rely on to keep readers scrolling. Nothing here is decorative for its own sake. The typography is restrained, mostly a bold serif-adjacent sans for headlines paired with a plain uppercase label style for section titles and navigation, which keeps the focus on the photography and the copy rather than on ornamental UI chrome.

The color palette leans almost entirely on black, white, and gray, with that single blue dot in the logo acting as the only spot of brand color. That restraint is a strength if you’re designing for a publication that wants to look serious and editorial rather than flashy. It reads well for news sites, culture and politics blogs, sports coverage, education portals, or any content-driven site where the writing and imagery need to carry the weight. If you’re mocking up a digital magazine, a newsroom homepage, or a long-form editorial site and want something that already feels like a real publication rather than a generic blog theme, this template gives you that foundation immediately.

Adapting the Homepage, Category, and Article Layouts

Because the set covers three distinct page types, it’s worth thinking about each one as a different job before you start editing.

• On the homepage, swap the hero photo for something with a similar horizontal crop and enough negative space in the lower third, since that’s where the headline card sits. Keep the headline short enough to fit two or three lines without crowding the byline.
• For the category page, focus on making the thumbnail grid consistent. Crop your images to the same aspect ratio before dropping them in so the “Latest Stories” style grid stays visually even.
• On the article template, treat the body text as the star. Resize the canvas or text blocks to match your actual copy length, and keep pull quotes or subheads in the same restrained style as the rest of the kit so the page doesn’t suddenly feel busier than the homepage.

When you rebrand this template, start with the navigation bar since it sets the tone for everything below it. Replace the wordmark but consider keeping a single accent dot or underline detail, since that small flourish under “HOME” in the nav is doing a lot of work to show active state without adding visual noise. If your brand color isn’t blue, swap it consistently across the logo dot, the active nav underline, and any button or link states so the accent feels intentional rather than accidental.

Image selection matters more in a template like this than almost anything else you’ll edit. Since the layout leans on large, high-contrast photography and a mostly monochrome UI, choose images with good tonal range and a clear focal point, ideally with some empty space where text needs to sit. Portraits with soft backgrounds, workspace shots, and candid editorial-style photography all suit the mood shown in the preview far better than busy, saturated stock images.

Pair this template with a matching icon set for social sharing and category tags, and keep any additional UI elements, like search icons or pagination arrows, in the same thin-line, minimal style already established in the header. If you’re building out a full site, this template also works well as a base to prototype tablet and mobile breakpoints, since the grid-based structure translates naturally into a responsive layout once you start adjusting column widths.