Introducing… Tom’s Crafty Design Hacks
In this first post of the series I will teach you 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.
N.b. I use the term “hacks” in its loosest, most trendy sense. These are not tips to overthrow the government; they’re things that we do in the Design Team when we’re crafting campaigns in NewZapp. These are things anyone can do. If you’re comfortable and confident with NewZapp, you’re ready.
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! Check out these examples:
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, Pexels or Unsplash. 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
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
Keep it short and relevant. See what I did there? 😉
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 shown in this post, including the blanks, in this zip file. You’re welcome to use these in any way you like.
I hope you enjoyed this post as much as I enjoyed making it. Please let me know in the comments if you’d like to know something specific or if you’re stuck in any part of the process.
Digital Designer & UI Architect at NewZapp