Make a Web Banner or Header with PicMonkey
We IndieMaders are a creative bunch, but designing a site banner can be a daunting task for anybody. Of course, hiring a graphic designer would be ideal, but when there’s no budget for design, it is possible to make your own store banner. There’s a lot of considerations that come with designing and making your own banner, but today, I want to talk with you about one great tool for creating a web store banner.
PicMonkey is an image editing tool I recommend as an alternative to Photoshop because it’s dirt cheap, online, and very easy to use. I especially love using PicMonkey to make banners, and often I’ll forgo Photoshop and InDesign for the simplicity of PicMonkey.
Quick Reminders On Banner Design
- A good banner or header should represent your business’ story, products, and be memorable.
- Ideally potential customers should know what you’re selling based on your banner alone.
- Your banner should also show effort. If you show a lack of effort in your banner, customers will see this as a red flag, and might assume that you also don’t apply much effort to quality and customer service, which is a real big no-no.
Each theme has “optimal dimensions” which you can always find under Dashboard > Design > Basics, beneath the banner update button.
We strongly recommend you upload a banner with these pixel dimensions.
For this example I’m using the Austin theme, which has the optimal size of 960px wide by 190px high.
Selecting a Canvas in PicMonkey
If you want to start with a completely blank canvas, you can do that by hovering over Design then select Custom dimensions. You will want to enter the pixel width and height of your banner in these blanks. Then you can change the canvas color, add text, and other design flourishes to create a simple banner.
For this example, I’m going to use a beautiful photograph as my “canvas”. First I want to select Edit from PicMonkey’s design options and then upload my photo.
My photo is massive and doesn’t have the final dimensions I want for this banner, so I’m going to crop it down to the dimensions I want -- in this case 960px by 190px. To crop I want to go to Basic Edits and select Crop. I can enter the dimensions I want to crop in the Actual Dimensions boxes, adjust my crop box, and then select Apply to save the change.
In Basic Edits, I can also adjust the exposure, colors, and sharpness of the image. For this image, I’m just going to use a preset filter under the Effects tab. There’s many filter options to choose from -- tip: premium Royale features (.ie add ons you pay for) are marked with a little crown. For this example I’m going to use the Tranquil preset to fade out the background a bit. I can also adjust the fade of the preset on the slider.
Now I’m ready to start adding some text on top of the image. To add text just go to the Text menu option. PicMonkey offers their own fonts, and you can also use your computer’s fonts. To add a text box, click on Add Text at the top left, and that will open the box where you can add and edit text on top of the image.
You can edit text colors, font size, etc. using the popup box.
Uploading to IndieMade
When I’m all done in PicMonkey I just hit save at the top and save the file to my computer.
To upload to IndieMade, I just log into my website and go to Dashboard > Design > Basics. At the top of this page I can upload my banner file.
Be sure to hit Update and then Save Configuration at the bottom of the page when you’re done uploading.
And that’s it!
Thanks for reading along, and please do let us know if you want to see more design tutorials like this one in your comments or shoot us an email at firstname.lastname@example.org.