News Graphic Generator — Help & Instructions

What This Tool Does

The News Graphic Generator lets you produce polished, branded news-style graphics for Facebook, Instagram Stories, and other social platforms — directly in your browser. No installs, no account required, no design software.

You upload a photo, write your headline, pick a label, and download a ready-to-post JPG or PNG. A built-in AI assistant helps you write sharper headlines and copy on the fly.

🖼

Photo Canvas

Upload, drag-to-reposition, and zoom your photo directly on the canvas.

🏷

Label System

Quick-select from Breaking, Alert, Traffic, Crime, and General label categories.

🤖

AI Assistant

Built-in Claude AI panel knows your current headline and brand — ask it anything.

⬇

One-Click Export

Download Facebook Feed (1080×1350) or Story/Reels (1080×1920) in JPG or PNG.

🎨

Brand Presets

Four built-in style presets plus your own custom brand saved to your browser.

💧

Watermark Options

Diagonal, badge, or bar watermark to protect your content.

First-Time Brand Setup

The first time you open the tool, a brand setup window will appear automatically. This takes about 30 seconds and only needs to be done once — everything saves to your browser.

Enter Your Page Name

Type the full name of your Facebook page or news outlet — e.g. Chicago Crime Desk. This appears in the brand bar at the bottom of your graphics.

Set a Short Name

A short abbreviation up to 8 characters — e.g. CCD. Used in filenames and the watermark badge.

Choose Your Accent Color

Pick a color that matches your page branding. This drives the accent bar, label backgrounds, and badge color on every graphic.

Badge Text

Short text shown in the badge — e.g. ILLINOIS or LIVE. Keep it under 12 characters.

Location Label, Tagline & Website

Optional but recommended. Location becomes the default top label. Tagline and website appear in the footer bar of the graphic.

Click Save My Brand

Your brand saves to your browser's local storage. It will be there every time you reopen the tool on the same device and browser.

⚙

Edit anytime: Click the ⚙ My Brand button in the top-right corner of the tool to reopen brand setup and make changes.

⚠

Clears on browser data wipe: If you clear your browser data or switch browsers, you'll need to set up again.

Adding a Photo

Three ways to get a photo onto the canvas:

Upload from Your Device

Click the Photo file input in the left panel and select any image from your computer or phone.

Paste from Clipboard

Copy any image then press Ctrl+V / Cmd+V anywhere on the page. The image loads instantly.

Load from URL

Paste a direct image URL into the URL field and click Load. Note: many news sites block cross-origin image loading — upload is the most reliable method.

🖱

Drag to reposition: Click and drag directly on the canvas preview to move the photo within the frame.

🔍

Zoom slider: Use the Image Zoom slider in the left panel to scale the photo in or out.

📱

Best photo orientation: Portrait or square photos work best. Landscape photos will be cropped — use drag and zoom to frame correctly.

Headline, Labels & Copy

Three text fields drive the graphic content:

Top Label

The category tag at the top of the graphic — e.g. BREAKING or TRAFFIC ALERT. Select from the quick chips, use the dropdowns, or type your own.

Headline

The main text. Keep it punchy — under 12 words works best. The tool automatically wraps long headlines. The label will auto-update based on keywords in your headline.

Subline

Supporting detail or attribution. Appears below the headline in smaller text. 1–2 lines max for clean output.

Label categories available:

News

BREAKINGDEVELOPINGJUST INUPDATECONFIRMEDFOLLOW-UP

Public Safety

TRAFFIC ALERTWEATHER ALERTFIRE ALERTMISSING PERSONAMBER ALERTEVACUATION

Crime

ARREST MADESUSPECT IDWANTEDVERDICTCHARGES FILED

General

EXCLUSIVEFACT CHECKOPINIONWATCH LIVEGIVEAWAYPOLL

Style & Branding Controls

Additional controls to fine-tune the look of each graphic:

🎛

Headline Size

Slider from 46–86px. Increase for short punchy headlines, decrease if wrapping too many lines.

🔠

Label Size

Controls the top label text size independently from the headline.

✅

Show Branding

Toggles the brand bar, badge, and accent line on or off.

🔄

Alternate Brand Style

Switches to a simpler overlay — useful for lighter or less busy photos.

💧

Watermark

Three styles: Diagonal (repeating text), Badge (corner tag), Bar (horizontal strip).

📐

Footer Branding

Editable text line at the bottom — defaults to your page name and website.

Using the AI Assistant

The AI panel on the right side is powered by Claude. It automatically knows your current headline, label, subline, and brand — no need to explain context.

Ask for a Better Headline

Type what your story is about and ask for headline options. The AI will suggest sharper, more engaging versions based on your current draft.

Get Label Suggestions

Not sure which label fits? Describe the story and ask which top label is most appropriate.

Write or Improve Your Subline

Ask the AI to write a subline based on your headline — or paste your draft and ask it to tighten it up.

Quick Prompts

Use the quick prompt buttons — 💡 Better headline, 🏷 Label suggestion, ✏️ Write subline — to fire a pre-built prompt instantly.

💡

Fill in your headline first before asking the AI — it reads your current canvas content to give relevant suggestions.

🔁

Ask for multiple options: "Give me 5 headline options" — pick the best one and paste it into the headline field.

Installation & Running the Tool

The News Graphic Generator runs two ways — as a standalone file in your browser, or loaded inside a Claude.ai chat session. Both give you the full tool. Pick what fits your workflow.

Standalone Browser

Open HTML file directly
API key required for AI panel
Fastest load, works offline
Best for high-volume daily use
Bookmark for one-click access

Inside Claude.ai

Upload file to chat session
No API key needed
Full Claude chat alongside tool
Two AI layers working together
Best for research-heavy posts

Option A — Standalone in Your Browser

Get the Tool File

After purchase you receive a single HTML file — graphicsgen.html. Save it to your Desktop or Downloads folder. No other files or installs required.

Open in Your Browser

Double-click graphicsgen.html. It opens in Chrome, Edge, or Firefox. If Windows shows a security warning, click Keep or Run Anyway — the file is safe. See Troubleshooting if it won't open.

Complete Brand Setup

The brand setup modal appears on first launch. Fill in your details and click Save My Brand. Settings are saved to your browser automatically.

Add Your Anthropic API Key (for AI panel)

Open ⚙ My Brand and paste your Anthropic API key into the API Key field. Get a free key at console.anthropic.com — free credits are included when you sign up. Your key is stored only in your browser and never shared externally.

Bookmark It

Drag the file to your browser's bookmarks bar for one-click access. Your brand and API key persist between sessions.

Option B — Inside Claude.ai Chat

Open Claude.ai

Go to claude.ai and start a new chat. Any plan works — Free, Pro, or Team.

Upload the HTML File

Click the paperclip or attachment icon in the chat input and select your graphicsgen.html file. Claude renders the tool directly inside the conversation.

Complete Brand Setup

Fill in your brand details when the modal appears. Settings save within the session.

Use the Tool and Chat Side by Side

Work in the tool panel while typing questions directly in the chat — "write me 5 headline options for a shooting on the north side" — Claude responds in the conversation while you build the graphic.

No API Key Required

When loaded inside Claude.ai, the built-in AI panel connects automatically through the session. Skip the API key step entirely.

🤖

Two AI layers in Claude.ai: The tool's built-in panel handles quick tasks (headline rewrites, label picks). The Claude chat handles bigger requests — research, tone, strategy, multi-post planning.

💰

About the Anthropic API key: New Anthropic accounts include free credits. After that, usage is pay-as-you-go — typical graphic assistant sessions cost pennies. See pricing at anthropic.com/pricing.

🔒

Your API key stays in your browser. The key is stored only in local storage on your device — it is never sent to PageOps or CpanelOps servers.

Exporting Your Graphic

Choose Your Canvas Size

1080×1350 — Facebook Feed post (recommended). 1080×1920 — Story or Reels cover.

Choose JPG or PNG

JPG is recommended for Facebook — smaller file, compresses better in the feed. PNG is lossless — use for sharp text on solid backgrounds.

Set a Post ID (Optional)

Enter a Post ID in the filename field — e.g. POST-042. If left blank, the tool auto-generates a name from your brand and label.

Click Save JPG / Save PNG

The graphic downloads at full 1080px resolution regardless of the preview size. Ready to upload directly to Facebook.

Tips for Better Graphics

📸

Use high-resolution photos. The canvas is 1080px wide — low-res images will look blurry. Aim for at least 1000px on the shortest side.

✂

Keep headlines short. 8–12 words is the sweet spot. Longer headlines wrap to 4+ lines and crowd the photo.

🎨

Match your accent color to your Facebook page. Consistency builds brand recognition — use the same color every time.

📋

Paste images directly. Copy an image from your browser or file manager, then Ctrl+V / Cmd+V on the tool page. No file dialogs needed.

💾

Use Post IDs for organization. Numbering your posts (POST-001, POST-002) keeps your downloads folder organized and easy to track.

📱

JPG for Facebook, always. Facebook recompresses uploads — JPG at high quality survives that process better than PNG for photos.

Troubleshooting

Windows shows a security warning when I open the file ▼

Windows SmartScreen may flag downloaded HTML files. Click More info → Run anyway. The file is safe — it runs entirely in your browser with no system access. Alternatively, right-click the file → Properties → check Unblock at the bottom → Apply → OK.

The tool opens but looks broken or unstyled ▼

Use the latest version of Chrome, Edge, or Firefox. Internet Explorer is not supported. Also confirm you downloaded the complete file — partial downloads can corrupt the HTML.

The canvas is blank after uploading a photo ▼

JPG and PNG work best. Very large files (over 10MB) can stall the canvas — resize the image first. If pasting from clipboard isn't working, try uploading via the file input button instead.

The AI panel shows a connection error ▼

In standalone mode, check that your API key is entered in ⚙ My Brand. Keys start with sk-ant-. Confirm you have an active internet connection and available Anthropic credits. In Claude.ai mode, no key is needed — reload the session if the panel is unresponsive.

My brand settings disappeared ▼

Brand settings are lost if you clear browser data, switch browsers, use incognito/private mode, or open the file on a different device. Re-entering your brand takes under a minute — keep your details noted somewhere for quick re-entry.

The downloaded graphic looks different from the preview ▼

The preview is scaled to fit your screen. The actual export is always full 1080px resolution. Color differences may be due to screen calibration — the exported file is the authoritative version.

Frequently Asked Questions

Do I need to create an account? ▼

No account required. The tool runs entirely in your browser. Your brand settings save to your browser's local storage automatically.

What is your refund policy? ▼

Due to the digital nature of this product, all sales are final. However, if you experience a technical issue that prevents the tool from working, contact us within 7 days and we'll make it right. Reach us at the email in the Support section below.

How do I get the tool? ▼

The News Graphic Generator is a one-time purchase of $29 at pageops.cpanelops.com. After purchase, you receive the HTML file — no subscription, no recurring fees.

Will my brand settings carry over to another device? ▼

No — settings are stored in your browser's local storage, which is device and browser specific. Re-entering your brand on a new device takes under a minute.

Why won't my image URL load? ▼

Most news websites block images loaded by external tools. Save the image to your device first, then upload via the file input or paste from clipboard.

Can I use my own logo or photo as a watermark? ▼

Current watermark options are text-based: Diagonal (your brand name repeated across the photo), Badge (corner tag), and Bar (horizontal strip). Custom image watermarks are on the roadmap for a future update.

Can I use this on mobile? ▼

The tool works on mobile browsers but is optimized for desktop. The three-column layout is cramped on small screens. For best results, use a laptop or desktop.

What size should I export for Facebook? ▼

For a standard Feed post, use 1080×1350. For Stories or Reels covers, use 1080×1920. Both are built into the Export Size selector.

Can I change the brand presets? ▼

The four default style presets are fixed examples. Your personal brand — set up via ⚙ My Brand — appears as a fifth preset and is fully customizable.

Don't have the tool yet?

One-time purchase · $29 · Instant delivery · No subscription · 7-day issue guarantee

Get It at PageOps →

Support & Contact

For questions, issues, or feature requests:

📧

Email:

📘

Facebook: PageOps — AI Tools — follow for updates and new tool releases.

🌐

Website: pageops.cpanelops.com