Cinematic Photo Generator

Cinematic photo generator: give one photo a movie-still grade, add letterbox bars and a subtitle, and save at full resolution

Three things make a photo read as a frame from a film. The first is color grading. A film is rarely used as shot: the colors of the shadows and highlights, the contrast and the saturation are reset to suit the mood of each scene, and that bundle of color choices is usually called a look. The second is aspect ratio. Cinema often uses wider frames than TV or phone photos, such as 1.85:1 or 2.39:1, and fitting such a frame into a screen of a different shape leaves black bars (letterboxing) above and below. The third is finishing touches such as subtitles and film grain.

The tool above applies all three to a single photo. Once a photo is chosen, the monitor shows the result with 2.39:1 bars and a subtitle, and the genre reel below lists 20 looks drawn from that same photo. Clicking a look moves the dots on the vectorscope from the original colors to the new ones, showing which way the color shifted. The first screen is a CC0 park photo graded Teal & Orange. This tool never uploads the photo; everything is processed inside this browser.

Why give a photo a cinematic treatment

Cinematic grading does not make a photo more accurate. It makes the viewer feel there is a story before and after the frame. It helps most in cases like these.

• Giving one photo the feel of a scene: a wide frame, bars above and below and a single subtitle line at the bottom can make an ordinary walk read like a moment from a movie. The subtitle adds a line of dialogue or thought that the photo did not have.
• Making a set of travel or everyday photos feel like one film: shots taken on different days in different light look like scenes from the same movie once they share a look and an aspect ratio. When a new photo is opened, this tool keeps the chosen look, adjustments and aspect ratio.
• Choosing a color direction before shooting video: when preparing a short film or music video, grading location photos lets collaborators agree on the color with a picture instead of words. The vectorscope shows, with numbers, which way the color actually leans.
• Drafting thumbnails, posters and invitations: a still with bars and a subtitle can work as a title card on its own. A subtitle placed in the bar sits on the frame without covering the picture.

How to use it

1. Press Choose photo or drag a photo onto the workspace. A copied photo can also be pasted (Ctrl+V, ⌘+V).
2. Under the monitor, pick an aspect ratio (Original, 16:9, 1.85:1 or 2.39:1), then choose between Bars (keeps the photo size and covers the rest with black bars) and Crop (cuts the photo to that ratio before saving).
3. If part of the photo falls outside the frame, a drag to position handle appears at the lower right of the monitor. Drag the monitor (on a phone, drag the handle), or select the handle and use the arrow keys to move the part that stays in view.
4. Press any of the 20 looks in the genre reel. Each tile shows the photo you opened with that look applied, and the vectorscope dots and arrow move to the new colors.
5. Press Show original colors to compare: the bars and subtitle stay, and only the color returns to the original. Press again to bring the look back.
6. Use Strength to weaken the whole look, and add or remove exposure, temperature, contrast, saturation, grain and vignette to suit the photo. Reset returns only the strength and the adjustments to their starting values.
7. Type up to two lines in the subtitle box and choose a color (white or yellow) and a position (in picture or lower bar). Leave it empty for no subtitle.
8. Choose a save format (JPG, PNG or WebP) and press Save. On a phone, Share sends the file straight to another app.

20 looks and their adjustment values

The table below lists the values each look applies at 100% strength. Exposure, temperature, tint, contrast and saturation run from −100 to +100, fade, vignette and grain from 0 to 100, and the shadow and highlight tints are an angle on the color wheel (0° red, 120° green, 240° blue) plus an amount of tint. Lowering the strength scales every value by the same ratio, so at 50% Teal & Orange the shadow tint amount falls from 85 to 42.5 and the contrast from +22 to +11.

The genres group the color directions that films use most often. Blockbuster raises contrast and color. Noir & Thriller presses the image dark and cold. Auteur gives color directions that recall a particular director's films. Sci-Fi leans heavily toward a single color. Drama & Romance is warm and soft. A look that carries a director's name is this tool's own interpretation and does not copy the color grade of any real film.

Aspect ratio and letterboxing: where 2.39:1 and 1.85:1 come from

Cinema aspect ratios are fixed as picture sizes in the digital cinema standard. The Digital Cinema Initiatives (DCI) specification gives, as examples of 2K picture sizes, 1998 × 1080 px for the 1.85 container and 2048 × 858 px for the 2.39 container, and for 4K, 3996 × 2160 px and 4096 × 1716 px. The 1.85 frame is commonly called flat and the 2.39 frame scope. 16:9 is the ratio of an HD television picture (1920 × 1080 px), the same as a YouTube video or a laptop screen.

The tool's Bars mode keeps the photo size, places a picture area of the chosen ratio inside it, and paints the leftover top and bottom (or left and right) black. The picture area always sits in the center, so the top and bottom bars are equal, and the handle moves which part of the photo falls inside the picture area. Crop keeps only the picture area and cuts away the rest, so there are no bars. The table below shows the picture area and bar height for each ratio on a landscape photo (4:3) and a vertical phone photo (9:16).

Putting 2.39:1 bars on a vertical photo narrows the picture area to 1080 × 452 px and leaves bars of 734 px above and below. It looks like a widescreen film scene on a tall screen, and the wide bars are a good place for a subtitle in the lower bar. Films use aspect ratio as a storytelling device too: American Cinematographer notes that The Grand Budapest Hotel moves between 1985, 1968 and 1932 and changes the aspect ratio for each period.

How to read the vectorscope

A vectorscope is a measuring display used in video color grading. It plots the color of every pixel in the photo as a dot on a round plate. This tool uses the ITU-R BT.709 formulas: luma Y′ = 0.2126R′ + 0.7152G′ + 0.0722B′, then the blue color difference Cb = (B′ − Y′) ÷ 1.8556 on the horizontal axis and the red color difference Cr = (R′ − Y′) ÷ 1.5748 on the vertical axis. Pixels with no color, such as gray, white and black, gather at the center, and the more saturated a color is, the farther out it lands. Brightness does not show up in a dot's position.

• R, Yl, G, Cy, B and Mg around the edge mark the directions of red, yellow, green, cyan, blue and magenta. Where the cloud of dots spreads shows which color the photo leans toward.
• The graticule: most colors in a photo are fairly weak, so this tool draws the plot like the 2× zoom on video equipment, with the outer ring at chroma 50 and the inner ring at 25. Chroma is the distance from the center in the Cb–Cr plane multiplied by 200: gray is 0 and a 75% red is about 77. Colors beyond the outer ring are drawn on the edge.
• The dashed line is the skin-tone line. Tektronix notes that human skin tones land very close to this line between the red and yellow targets, within 10 or 20 degrees of it. If the skin dots in a portrait stray far from this line, the skin has taken on a green or magenta cast.
• Gray dots are the original colors, colored dots are the colors with the look applied, and the white arrow shows where the average of all dots moved from and to. The numbers below give the average chroma of the original and of the look.

The vectorscope also shows why Teal & Orange is so common in portraits. Skin tones gather near the skin-tone line (the orange side), and the opposite side is teal. Pushing shadows and background toward teal and highlights and skin toward orange splits the cloud of dots into two opposite groups, which widens the color difference between a person and the background and makes the person stand out. For example, a skin pixel (224, 172, 140) sits at 129°, 6° away from the skin-tone line; with Teal & Orange at 100% strength it becomes (244, 177, 122), moving to 134° and farther out. A blue-gray (120, 150, 170) becomes (116, 156, 172), shifting toward teal.

Order of calculation

The preview and the saved file are calculated in the same order. Saving recalculates at the original resolution, so apart from finer grain, color and layout match the preview.

1. Cutting the picture area: the chosen aspect ratio decides which part of the photo is kept. If the photo is wider than that ratio, the left and right are trimmed; if narrower, the top and bottom. The handle position (0 to 100%) divides the trimmed amount between the two sides.
2. Color: each channel's sRGB value is converted to linear light, multiplied by exposure (±100 = ±1 EV) and by temperature and tint, then converted back to sRGB for the contrast curve and fade. Saturation is then changed relative to BT.709 luma, and the shadow tint (stronger the darker) and highlight tint (stronger the brighter) are mixed in. This calculation is the same code as the mood photo generator on this site.
3. Vignette: the edges are darkened by distance from the center of the picture area. Because the reference is the picture area inside the bars, bars do not hide the vignette.
4. Grain: a noise pattern made from a fixed seed is layered on. One cell of the pattern is 0.12% of the picture area's short side, so grain looks equally coarse at any photo size.
5. Bars and subtitle: the area outside the picture is painted black and the subtitle is drawn. The text size is 2.6% of the picture area width (at most 9% of its height), and if the longest line exceeds 92% of the picture width, the text shrinks to fit. A subtitle inside the picture gets a black outline so it stays readable over bright backgrounds.

Gray steps show what a look does. Teal & Orange at 100% strength turns a dark gray 64 into a teal (33, 63, 68), a mid gray 128 into (124, 130, 124) and a light gray 192 into an orange-tinged (211, 198, 181). At 50% strength the same three values become (49, 64, 66), (126, 129, 126) and (201, 195, 187), about half the color. Day for Night lowers white 255 to (171, 188, 207), so even the brightest areas sit at roughly the level of blue moonlight. With 2.39:1 bars on a 1440 × 960 px photo, the picture area is 1440 × 603 px and the subtitle text is about 37 px.

Colors that came from film

Several looks take their names from real film processing or shooting techniques. The tool imitates the result with photo adjustment values; what follows describes the original techniques.

• Bleach Bypass: a process that skips the bleach step that removes silver when developing color film. Kodak explains that the silver left in the film raises contrast and adds gray or black over the color, lowering saturation. For that reason this look strips much of the saturation and raises contrast and grain.
• Silver retention and Se7en: an American Cinematographer article on Darius Khondji, who shot David Fincher's Se7en (1995), says the film was the first feature to use CCE (Color Contrast Enhancement), a silver-retention process newly developed by the lab Deluxe. The David Fincher-style look is dark and low in saturation to recall that kind of image.
• Digital Green: in American Cinematographer's retrospective on The Matrix, cinematographer Bill Pope recalls that when the team asked itself what the "most unappealing color" was, everyone agreed on green; scenes inside the Matrix were sometimes shot through a green filter, and a little more green was added during color timing.
• Orange Haze: the same magazine reports that in the Las Vegas scenes of Blade Runner 2049, Lee 790 Moroccan Pink and 105 Orange filters were used together to turn the whole frame red.
• Day for Night: a technique of shooting in daytime and using filters, underexposure or printing to make the footage look like night. François Truffaut titled his film about filmmaking La Nuit américaine (1973; English title Day for Night). This look lowers exposure by 1 EV, shifts the image toward blue and pulls down the whites so a daytime photo looks like night.

Common mistakes

• Leaving strength at 100% on a portrait: a strong Teal & Orange or Orange Haze turns skin too orange. If the skin dots on the vectorscope drift far outside the skin-tone line, lower the strength to 60 to 80%.
• Cutting off faces or heads at 2.39:1: a wide frame trims a lot from the top and bottom. Use the handle to move the picture area until the eyes sit near the upper third of the frame.
• Writing a long subtitle: once a line passes 92% of the picture width, the text gets smaller. Break it into short lines, as film subtitles do, and keep it within two lines to hold the text size.
• Looking for a lower-bar subtitle in Crop mode: Crop has no bars, so the subtitle can only go inside the picture. To put it in the bar, choose Bars.
• Reopening a saved JPG and grading it again: JPG loses a little more quality with every save, and grain and vignette stack up and grow stronger. Open the original photo again when you want to change something.

Limits and cautions

• The looks are adjustment values set by this tool's own formulas. They do not reproduce the actual color grade of any film, a film LUT or a film stock process, and a look carrying a director's name has no connection with that director or any film studio.
• Photos are converted to sRGB and calculated at 8 bits (0 to 255) per channel. A strong look on smooth areas such as sky can show stepped banding, and very saturated colors in a photo shot in a wide gamut (Display P3) may come out slightly paler.
• A result larger than 16,777,216 px (about 16.78 million pixels) is scaled down to that area, keeping its proportions. MDN notes that iOS devices limit the canvas to 4096 × 4096 px, and this tool uses that area as the save limit on every device.
• The saved file does not carry over the original's shooting data (EXIF). Files larger than 60 MB are not opened, and HEIC photos open only in browsers that can open HEIC.
• The vectorscope is drawn from about 4,000 pixels sampled evenly from the preview. The colors of a very small area may not show up as dots.

Sources

As of 2026-10-20. The color-difference formulas, digital cinema picture sizes, skin-tone line, film processes and film examples were checked against the originals below on that date. The look values and the rules for subtitle and grain size are this tool's own. The sample photo is "Riding a bike in the park (Unsplash)" from Wikimedia Commons (Fritz Bielmeier, CC0 1.0), reduced to 1440 × 960 px.

• 01ITU-R BT.709-6 (06/2015) Parameter values for the HDTV standards3.2 luma formula E′Y = 0.2126 E′R + 0.7152 E′G + 0.0722 E′B; 3.3 color-difference formulas E′CB = (E′B − E′Y)/1.8556, E′CR = (E′R − E′Y)/1.5748
• 02DCI Digital Cinema System Specification v1.2Table 3 picture-size examples: 1998 × 1080 (1.85), 2048 × 858 (2.39), 3996 × 2160, 4096 × 1716
• 03Tektronix, Waveform and vectorscope monitoring (2PW-28619-0)Skin tone traces land within 10 or 20 degrees of the line (flesh tone line) between the red and yellow targets
• 04Kodak, Processing TechniquesBleach bypass: the retained silver raises contrast and lowers saturation
• 05American Cinematographer, Darius Khondji: Cinematic RhythmsDeluxe's silver-retention process CCE (Color Contrast Enhancement) used on Se7en
• 06American Cinematographer, Flashback: The MatrixCinematographer Bill Pope: green filters and color timing add green to scenes inside the Matrix
• 07American Cinematographer, Uncanny Valley: Blade Runner 2049Lee 790 Moroccan Pink and 105 Orange turn the whole frame red
• 08American Cinematographer, Robert Yeoman, ASC Awards honoreeThe Grand Budapest Hotel changes aspect ratio across 1985, 1968 and 1932
• 09Columbia University, Film Language Glossary: Day for NightCreating a night effect in daytime shooting with filters, underexposure or printing
• 10Britannica, Day for Night (film by Truffaut)Truffaut's La Nuit américaine (1973; Day for Night)
• 11W3C CSS Color Module Level 4, 19 Sample code for Color ConversionsConversion formulas between sRGB and linear light, used for the exposure and temperature calculations
• 12MDN Web Docs, <canvas> Maximum canvas sizeCanvas size limit of 4096 × 4096 px on iOS devices, the basis for the save-size cap

Frequently asked questions

Tools to use with this one