Technical Post - Customizing an Itch.io Page (Patreon)

Hi everyone, it's Adi again! Today I wanted to talk about how you can do some little steps to really enhance the feeling of your itch.io page. It's nothing advanced (since honestly, I don't know how to do something more advanced either) so it should be easy to follow along!

Because this is design-related, it's all subjective - I'll be talking about approaches and things I do, but ultimately it is up to you what you think is the best way to present your project, and I just want to help people understand the tools a little bit to further that.

First I'll go ahead and link a couple of our itch.io pages!

• Heart of the Woods 
• Highway Blossoms: Next Exit 
• Please Be Happy 
• The Waters Above: Prelude 

I'll use mostly PBH and HB:NE to refer to, as they're the most recent itch.io pages I've set up.

First, create a project and set it up, and while logged in, navigate to the project page. You should see this!

It may not say Published, but this bar should be at the top of the page. To begin editing, just hit Edit theme.

You'll be shown a side bar like this! From this, you can alter the main appearance factors of your page; the general text colours, the header, the centre bar and the background.

My approach these days is to make the centre bar look seamless with the background - here it is in red, but for the actual side I picked a specific shade of cream so it blends it with the background. If you hit 'more options' under the first 4 colours, you can also adjust the transparency for that centre bar as well - HBNE has the Alpha set to zero, and the way it looks is a bit of an illusion I set up with the background.

Basic Customization

A quick and easy way to customize your page to make it fit the game is to change the font, especially if your game uses a Google Font for it's text! Please Be Happy uses the Lora font, which you can find on Google Fonts.

By clicking into the dropdown for text, you'll be able to find the corresponding font and select it. Make sure it's nice and easy to read!

This coupled with making sure the colours are associated with your game, you'll be able to design a page that fits your game's design and aesthetic.

Another aspect to consider is 'do you want the side bar for screenshots/videos?' This is a very simple toggle, actually - 

Just change it under 'Layout' > 'Screenshots'. HBNE has a sidebar, and PBH does not - you need to add in the screenshots and video back in another way if you want to do that and still want those on your page, but I'll cover that a bit later.

Headers

Once you have those basics set up, it's a good time to think about headers!

There's a ton of different ways to approach this so... take a look around! I've mostly landed on a combination of 'a wide image with the key visual and logo' on it. If you have a image editing tool, open it up and make a nice wide canvas. The PBH banner is roughly 2000 pixels wide and 1000 pixels tall; HBNE is 1920px wide and 800 tall. Bigger images take longer to load, and I like to use .png for the transparency, but I like to have pretty crispy images at higher resolutions so I take that approach. I'll have to experiment with .webm and other file formats in the future!

I went to go look it up actually, and the max display width seems to be 960px. Goes to show that everyone has something to learn! If you are more savvy with numbers and graphic design you can take a gander here: https://starwest.itch.io/itch-page-image-templates for specific aspect ratios and where things will be displayed on your page.

My approach to keep that general seamlessness going without making it too faded out is making a banner like this - a sharper fade out on the sides, a softer one fading it out on the bottom, and then the logo on top, so it fills out the space nicely. Doing a banner will replace the title of the game on the page, so it's a good idea to make sure the game name is on the banner!

I spend a decent amount of time arranging my images so that they work horizontally, and in the case of Please Be Happy, I applied a blur around the edges too.

Once that's done my next main focus is the background!

Background

My main approach to the background is to make sure it fits the vibe of the game, to make it repeatable vertically, and to make the center 900px a certain colour and blend it out on the sides somehow or have an interesting connection. I've seen people do a fun pattern along that place where it meets the centre bar, for example.

For HBNE, I took the key visual, hid all the characters (we specifically requested for a .psd with bg/characters separated) and I blurred the whole thing. Then I added the center bar and used gradients to make the glowy pillar:

I think I used some Photoshop AI to extend the canvas, and make sure it lined up on the top and bottom so it would repeat seamlessly vertically. If you have Photoshop, 'offset' is a good way to do that.

Then I use these settings. If you have a tiled background you want to use, there's options for that, too!

If you need to make sure you got your dimensions right, using something like Screenfly is a good way to check on different aspect ratios.

Once that's done... you should have a decent looking game page!

But wait... the content!

Okay, once you're done with all the elements - make sure you save - you'll be on your game page again. Perhaps you've already started working on the game content; otherwise, maybe it's a blank empty canvas. Not to fear!

To actually add stuff on your page like screenshots, videos, text and headers, we need to go into the 'Edit Game' section.

Welcome to the project dashboard! While you're here, make sure you make a pretty cover image.

It's the thing that itch.io uses in most areas of the site, so do your best here!!! It can also be an animated gif, so there's a ton of opportunity here.

On the side, where it says 'gameplay video or trailer', link your gameplay video or trailer from Youtube or Vimeo there. It's that simple folks! Make sure you do it!!!

The screenshots should be straightforward too. It might be tempting to add in other pictures, but you can do them in the main body so don't worry about that! Keep it to in-game screenshots with game-screenshot aspect ratios.

Keep scrolling down until...

You reach the Details section. This part is very very versatile! As you can see for PBH, I embedded a whole video into it (because remember, screenshots and videos were 'hidden' from the PBH page!)

I won't go too in depth about how to accomplish every little part, but you can insert images into this section easily enough, align it center/left/right... If you click < > you can even edit the html code directly!

I made banners for the PBH page - most of the HBNE ones I reused from the existing HB pages (that were made probably before Elan existed). Custom banners are a nice way to give some excitement to your page! You can also put in your character art, any extra illustrations you think necessary to show off, team logos... 

The Without a Voice page includes a preview of the Bandcamp ost and the artbook!

For the Bandcamp album, if you go to an album on the website you can click 'Share/Embed' and if you go through a few menus you'll be able to directly find a bit of html code that you can paste directly into your page. It's similar for Youtube, which is how I embedded the Please Be Happy video (and by going into the code, able to adjust the size to what I want it to be.)

And maybe the last major visual consideration is the 'community' aspect of your page. If you use the comments choice, your page may extend indefinitely downwards - something to consider when you design your background! It's a case by case basis for me, but I generally tend to like to have some form of ways for people to leave feedback or questions so I can give support.

Phew! That was a long post! I hope y'all took a little something away from this, regardless of if you're a dev or not. Maybe a little appreciation for all the other devs out there trying to make their pages look pretty! I wanted to show off the Steam backend and how I make those pages pretty but I don't think The Steam People will let me?

If any of y'all want to show off or get some feedback on your itch.io post, feel free to leave a link below and I can take a gander!!! (Please specify if you want to show off or get feedback, so I can put on the right hat and attitude!)

- adi