Images
Adding them
There are three ways to get an image into a devlog: paste it, drag it in from a file manager or a browser, or use the image button on the toolbar. Each one is copied into the project’s own media folder and gets a line of its own in the devlog, where it was dropped:
The text in the brackets is the image’s description, read aloud by screen readers. It’s worth filling in.
PNG, JPEG and GIF are supported, as on itch. The preview shows them straight from the project’s folder.
Cropping and resizing
Double-click an image in the preview, or right-click it and choose Crop and resize…, to cut it down to the part that matters or change its size, without another program.
Drag across the picture to draw a frame around the part to keep. Drag the frame to move it, or its corners and sides to change it, and Whole picture starts over. The width the picture is saved at goes in Width, and the height follows to keep its shape. For pixel art, tick Sharp pixels: it’s resized pixel by pixel, so the edges stay crisp instead of blurring. An animated GIF keeps every frame.
Save as a new picture puts the new one where the old one was in the devlog, as a single edit that Ctrl+Z undoes. The original file stays in the project, so other devlogs that show it aren’t changed.
GIFs from video
Most devlogs live on GIFs of the game, and a recording is rarely the part you want. The film strip button on the toolbar, GIF from a video, opens a video file of any common kind (MP4, WebM, MOV, MKV and more). Dropping one from your file manager onto the editor opens it too.
- The timeline under the picture is a filmstrip of the whole video, with the clip marked on it between two red handles. Drag them to where the clip starts and ends, up to a minute of it.
- Press or drag anywhere else on the timeline to see that moment: the white line shows where you are. The arrow keys move it, or the handle you last touched, by one frame, and by a second with Shift. Start here and End here put the clip’s start or end at the moment shown.
- Play the clip plays it over and over as the GIF will play, at its speed and frames a second, so you can see where it loops before making it.
- Drag across the picture to keep only part of it, as when cropping a picture.
- Width, Frames a second and Speed set the GIF’s size and smoothness. Fewer frames and a smaller width make a lighter GIF, and Sharp pixels keeps pixel art crisp. Under them, the dialog says how big the GIF will be: it makes it in the background with those settings, so the size is exact (a long clip gets a quick guess first). Over the 3 MB itch takes, it turns red and says what itch would get if you uploaded it anyway: a copy the app scales down until it fits, and how small that is. Choosing a narrower width or fewer frames a second here usually looks better than that. Once the size is shown, Make the GIF is instant, as it’s made already.
Make the GIF puts it into the devlog where the cursor is, made with a palette of the clip’s own colours so it looks its best. The video itself isn’t changed. itch takes GIFs up to 3 MB: when one comes out bigger, the app says so, and uploading it offers a smaller copy, or make it shorter, narrower or with fewer frames.
GIFs from video need ffmpeg, a free program that reads videos. The Linux packages install it, or ask for it, along with Sublime Itch. On Windows, the first time, the app offers to download it, about 110 MB from gyan.dev, where ffmpeg’s own site sends Windows users, checked before it’s used. On Fedora, Fedora’s own ffmpeg can’t read every kind of video: if one won’t open, RPM Fusion’s ffmpeg reads more.
The free version makes one GIF from video for each devlog, and renaming the devlog doesn’t give it another; the full version makes as many as you like.
Marking up
To point at something in a screenshot, right-click the image in the preview and choose Mark up….
Choose Arrow, Box, Circle or Pen, a colour and a width, then drag on the picture: an arrow goes from where you press to where you let go, a box or a circle fills the space you drag over, and the pen draws wherever you drag, a click making a dot. With Text, click where the words go and type: Enter puts them on the picture, Shift+Enter starts a new line and Esc takes them away. Words are bold, in the colour chosen, and the width buttons become Small, Medium and Large. Outline gives them an edge, dark or light, that keeps them readable on a busy picture.
Press any mark, on its line or anywhere on words, to choose it: it’s framed, and the buttons show how it looks. Drag it to move it, pick a colour, width or size to change it, or press Delete to take it away. A click on words opens them to change what they say. The mark you’ve just drawn is chosen too, so a colour picked right after changes it. Undo (or Ctrl+Z) takes back the last change, whatever it was, and Clear takes every mark away (Undo brings them back). The marks are drawn at the picture’s own size, smooth, and an animated GIF gets them on every frame.
Save as a new picture works as cropping does: the marked picture takes the old one’s place in the devlog, Ctrl+Z puts it back, and the original file stays in the project.
Combining pictures into one
A row of pictures (see below) can become a single picture, which is handy for a before and after. Right-click one of them and choose Combine into one picture…, then Side by side or One above the other. The pictures are scaled to the same height (or width), a small gap between them, and the row in the devlog becomes that one picture, with a description naming them all. Captions don’t come along, since one picture has one caption. Ctrl+Z puts the row back, and the originals stay in the project.
An animated GIF can’t be combined with others, as its frames would be lost.
On the page: captions, sizes and side by side
Right-click an image in the preview for how it sits on the page. Each of these changes the devlog’s text, which you can also write yourself:
Caption… puts a line in small italics under the picture, the way itch shows captions. In the text it’s the picture’s title, in quotes after its file:
A picture in the middle of a sentence keeps its title as a tooltip instead, since a caption needs room under it.
Shown at sets how wide the picture shows on the page: Full, or 75%, 50% or 33% of the column. In the text it goes in braces right after the picture, as a percentage or in pixels, {50%} or {320px}. It only changes how it’s shown; to make the file itself smaller, crop and resize it.
Side by side puts the pictures next to it in one row, and Not side by side takes them out again. A row is a block like the collapsible ones, with each picture on a line of its own:
:::row
:::
The pictures share the row’s width evenly, and one with a width of its own keeps it while the others share what’s left. A caption goes under its own picture.
Uploading
Images reach itch when the devlog’s HTML is copied, or saved to itch. The red copy button at the end of the preview’s bar shows how many images it’ll upload first, a number beside its icon, and hovering it says what it’s about to do: Copy HTML when every image is on itch already, Upload 3 images & copy HTML when some aren’t. Only the new ones are uploaded: an image already on itch is never sent again, even when it’s used in several devlogs of the same project.
Uploading needs you signed in to itch. If itch is busy, uploading waits a moment and carries on by itself.
Images that are too big
Itch limits how big an image can be, and big GIFs in particular can go over. When that happens, everything that can be uploaded is uploaded, and a dialog lists the images that are too big, with an offer to send a smaller copy of each.
A smaller copy is scaled down just enough to fit. PNGs stay PNGs and JPEGs stay JPEGs. An animated GIF keeps every frame and its timing. One thing to know: a shrunk GIF always loops forever.
Your local files are never touched. The smaller copy goes to itch only, and the preview keeps showing the original.