Design: Image buttons masterclass

            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, 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

            find free texture backgrounds for your buttons
            1. Choose an image already in your account or upload a new one
            open in the image editor
            2. Open it in the Image Editor
            crop your image right down to button size
            3. Crop it, ideally to 250px wide or less
            filter your buttons for maximum legibility or a colour match
            4. Filter it if you like
            save your image at this stage to make a blank template for future buttons
            5. Save – so you can easily make the same colour and size button again.
            open your cropped blank
            6. Open your freshly cropped blank button
            position and resize your text carefully
            7. Add text. Keep it short, sweet and high contrast
            save again, this time for real
            8. Save – This saves a new image. To make another button, open the blank one again.
            make use of your buttons in any dropzone
            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 Crop tool
            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.
            Move or resize the text
            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.

            Final words

            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

            Updated: 13 Nov 2018 05:11 AM
            Helpful?  
            Help us to make this article better
            0 0