In this post we will learn how to make image-based buttons in NewZapp that really pop. These can be used carefully for corporate style buttons, or more frivolously for an arty feel.
Cropping an image for a background for buttons, are you crazy?
Aha, maybe! But consider this: buttons are mostly made up of colours or gradients. And when you get right down to it, a lot of photos are made up of colours or gradients – or textures!
But I don’t have any nice images
Me neither! But the internet is full of them. Try searching for “texture” or “background” on websites like Pixabay
. These websites provide “CC0”, or “public domain” images that can be used for free. Don’t use Google and steal other peoples’ images, you’ll get in trouble, and people will throw overripe fruit and boo you in the street.
Bring on the buttons
1. Choose an image already in your account or upload a new one
2. Open it in the Image Editor
3. Crop it, ideally to 250px wide or less
4. Filter it if you like
5. Save – so you can easily make the same colour and size button again.
6. Open your freshly cropped blank button
7. Add text. Keep it short, sweet and high contrast
8. Save – This saves a new image. To make another button, open the blank one again.
9. Use it! Drag the button into any dropzone and feel like a hero!
Advice for dimensions
Any button size will do, it all depends on what you’re going to use it for. However, my general advice is to go for 250px wide or less, because then it won’t be scaled on mobile devices and make the text harder to read.
Use the ‘Custom’ tool on the top left of the Crop tools to specify a width and height. This will make that size of crop which you can then drag around to find your perfect slice.
Advice for text
Choose a font that matches your design/corporate font as closely as possible – for example, Tahoma is in the list and a great match for sans-serif fonts. Choose either black or white text for the best contrast. Do make a note of these choices if you’re going to match them.
Use the <> tool to resize the text. Carefully though, as this makes it easy to accidentally rotate the text. Avoid this when you drag it into position by dragging on the text box itself.
Tips for use
Use alt text. These buttons use text embedded in the image, which means it’s not text anymore as far as devices and readers are concerned. Adding alt text to match the text on your button makes it more accessible, more likely for people to allow images, and ultimately gives you a better spam score. Try it and see!
Keep your style consistent. For a corporate look, this means keeping your buttons looking very similar if not identical. If you’re worried about remembering settings then make up a set of buttons in advance. Consider useful phrases (e.g. “Read more”, “Find out more”, “Download your guide”, even the dreaded but useful “Click here”!)
If you want to be more creative, consider varying the colour or texture for your background. You can filter an existing texture to make another colour, or filter a different text the same colour. I’d keep one of these constant to help people visually identify your CTAs, but you can still have a lot of fun here.
Don’t forget to add alt text and a link!
You can download the all examples I’ve mad, including the blanks, in this zip file
. You’re welcome to use these in any way you like