Make a Web Banner or Header with PicMonkey

2 posts / 0 new
Last post
Jessica Horvath

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.

Banner Size

Each theme has “optimal dimensions” which you can always find under Dashboard > Design > Basics, beneath the banner update button.

Optimal Dimensions

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.

PicMonkey Canvas Options

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.

cropping in picmonkey

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.

picmonkey effects

Adding Text

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.

Adding text in PicMonkey

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.

Banner upload IndieMade

Be sure to hit Update and then Save Configuration at the bottom of the page when you’re done uploading.

And that’s it!

final banner on IndieMade

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 support@indiemade.com.

EdgarTorres

Thanks for PicMonkey Tips

Before I know your tips on how to make banner with PicMonkey, I've been used a simpler tool named "photo watermrking", which not allow me to draw, but can also allow to resize image, add text to banner. It can add sigs to piles of banner at once, in return you will get many choices for banner at once. Besides its operations are few. So it takes won't need you to learn it.

But after knowing yours, I guess I want to draw my banner this time. And try something new. Thanks

Please login or register to comment.