Today we are going to create three promotional images for your Google Chrome extension. These images are used when uploading your extension to the Chrome Web Store and having good images helps your extension stand out and get more downloads.
By the end of this tutorial we’ll create images that look like the ones below.<
We’ll be creating these images using Photoshop. If you don’t have any experience using Photoshop, you can sign up for Picturelay , which is a tool I created to quickly generate all of these images in just a few clicks and the fraction of the time it would take to design all this by yourself.
Alright, now let’s get to it!
Google guidelines for extension images
Google was kind enough to provide some nice guidelines for what they expect Chrome extension promotional images to be like.
Aside from the various sizes that we’ll look at in separate sections in a bit, Google advises has the following guidelines for promotional images:
- Avoid text.
- Make sure your image works even when shrunk to half size.
- Assume the image will be on a light gray background.
- Use saturated colours if possible; they tend to work well.
- Avoid using a lot of white and light gray.
- Fill the entire region.
- Make sure the edges are well defined.
Every image that we’ll create here will follow those guidelines.
Small image size: 440 x 280
- Open Photoshop and create a new image of size 440 x 280
- Cover the background with an intense colour to contrast with the background of the Chrome Web Store
- Place your logo in the centre of the canvas like so:
This is where having a nice and descriptive name can help. The colours will make anything stand out but if your name illustrates what you do, even better!
Large image size: 920 x 680
- Open Photoshop and create a new image of size 920 x 680
- Cover the background with an intense colour. Preferably the same one as on the previous image
- Place your logo on top of the image and place a nice screenshot or illustration of your product. Something that can catch the eye.
Even though you are given more space for this image, still try to avoid text but if you have to use it, make sure that it’s large enough and still looks attractive.
Marquee image size: 1400 x 560
This image is used when your extension gets feature on the Chrome Web Store.
To create it, follow the steps below:
- Open Photoshop and create a new image of size 1400 x 560
- Cover the background with an intense colour.
- Place your logo, some descriptive text and preferably a well prepared screenshot of your application.
Creating these images can take you anywhere from 30 minutes to hours depending on how much experience you have with Photoshop, how easy it is to find the right assets(fonts, icons, colours, etc) for each image and a lot of other factors that come up as you are making these.
This is why I’ve been working on Picturelay . I want to automate this entire process so that creating images that get more downloads for your extension is as quick as possible. That way we can all spend more time on making the extension better for our users. So go over to http://www.picturelay.com/ if you would like to try it out.
And of course, as always, you can leave a comment if you have any questions about all things Chrome Extensions and I’ll try my best to help out
Resources
PSD files on Google Drive – https://bit.ly/2SiYgmb