Website Shop 101 - Designing Shop Buttons

Welcome to lesson two of the Website Shop 101 tutorial series for crafters. There's nothing more fun than making things personal with your own customizable buttons that match your website theme. So this part will show you how to make fun shop buttons using simple photo design tools and give you a brief overview of shop button possibilities.

---

What sort of shop buttons do you recommend?

This will depend on what you are selling, but here are some fun shop buttons you might like to have...

Regular Buttons (these are the small buttons that are average size):

• Add to Cart
• Buy Now!
• Download
• View Post
• Donate
• Etc...

Long Buttons (these are the same height as the regular buttons, but are longer in width): 

• View Cart
• Return / Go Back
• Add ALL to Cart
• Shop Patterns!
• Etc...

Fancy Buttons (these are whatever you'd like them to be):

• Shop Categories
• Read the Story Behind this Design
• Ravelry - Favourite/Queue/Add to Library
• Sign Up for Our Email Newsletter
• Etc...

*Social media buttons will be covered at a later date.

---

"Add to Cart" and "Buy Now!" buttons are great for things you will be selling. You can use either, both, or make up your own. Here's a little more on both...

Buy Now is best suited if you will be making it so that the product is added to and the customer is directed to the cart instantly. Ravelry allows for this option, but coupon codes will not work with them. As for Paypal, their buttons automatically open the shopping cart in a new tab the first time something is added to the cart. So in effect, Paypal buttons are Buy Now buttons.

Add to Cart is best suited to allow your customer the ability to continue shopping. Ravelry codes will work well with the Add to Cart, and although you can name your main shopping button however you like, it helps make things less confusing for your users who are accustomed to using codes on Ravelry with the Add to Cart button.

All this said, maybe you want to name your main shop button something else entirely, I'll leave that up to your own discretion. 


"Download" and "View Post" buttons are great for the items you are offering for free, whether it is a digital copy, or something you've got posted on your blog.

If you want to make it possible for your users to support your blog, you may like to have a "Donate" button. This would be created through Paypal.

---

The "View Cart" button I have on my site is longer than my other shop buttons because I've added a fun cart next to the next. You can make yours in any way you prefer.

As for my "View Cart" button, my "Return" button also features a fun image next to the text, making it a longer button. This is an optional button to have on your site. I like it because it adds symmetry to my site.  

"Add ALL to Cart" and "Shop Patterns!" are some fun buttons I have used for promotions like when I created a bundle code that added all items to the cart on Ravelry, and other for directing people to where they can find my offerings. You may have ideas for other buttons you'd like to use. Just use the button size that works best for what you want.

---

Finally, we have all the fancy buttons. These are all optional, but they are also fun.

Do you want to use buttons for your categories on your shop homefront page? Do you want to direct people to your newsletter? Maybe you'd like to show people where your pattern is on Ravelry, or where they can learn more behind the product. Make it eye-catching with a fancy button!

---

How to design your shop buttons:

Now that you have an idea for all the shop buttons you'll need, it's time to start making them according to your preference. But first, here's a little overview...

For this tutorial, our focus will be on using PicMonkey to create your buttons. Most effects and editing tools offered are completely free, though they have a Royal monthly membership plan too. 

At a future date, I will also create a video tutorial to show you some neat things you can do on Photoshop (a computer application) and PixIr (an online version, which can do many of the things that Photoshop does for free). 

You may choose to use only one or the other, OR you may like to do what I do and combine PicMonkey with either Photoshop or PixIr. Personally, I like using PicMonkey to get my basic button shape, colour and button surface effects, followed up with more effects and text on Photoshop.

If you don't have photoshop, I recommend these two options:
1) Use PicMonkey all the way.
2) Use PicMonkey to get your basic button shape, colour and surface effects. Then, open this button up in Pixlr to add some depth and more texture to the button. Once your happy with your button, open it up in PicMonkey again to add your text and overlays.

You can make your buttons as simply or extravagantly as you like. Just use whichever tools that work the best and easiest for you.

---

Steps for making your buttons on PicMonkey:

Use the following written steps and accompanying video tutorial below as a guide...

Step 1: Go to www.picmonkey.com.


Step 2: Select the "Design" option either by 1) clicking on it (will open the editor with a 2000px square image - sizing & dimensions can be adjusted later) OR 2) hovering over it to get some sizing options first in which case you will select custom and input your preferred size dimensions.

TIP - Make your button slightly larger than you wish it to be. You can always make it smaller later and keep the clarity of the details, but you cannot do the same to make it bigger.


Step 3: Choose a base colour for your button. Whenever you open a new design in the editor of PicMonkey, it always asks you to select the background colour. It will automatically be set as white (#ffffff). If you know your HTML (a.k.a. hexadecimal) colour code value, you can type it into the field, otherwise you can select one from the box and adjust it with the colour scroller below it.

Here's a fun tool on w3schools to help you pick colours!

*To find your own website colours, do the following:

Weebly users: You can find your most used colours by going into the "Design" portion of your site (found at the top) and clicking on "Change Fonts" (found to your top-left). From there you can go into each of the areas one-at-a-time, click on the colour, then click on the arrow next to the colour to expand it. Copy the HTML colour code that shows up and save it.

If you want to find ALL of the colours used in your site, you'll want to go to "Edit HTML/CSS" (found to your bottom-left in the Design portion of your site). From there, you can scroll through the code to find all the 6-digit number/letter colours. Simply copy or type them where you want to save them. When you're done, just click on "cancel" at the top-right to avoid making any changes.

Wordpress users: Here's a support article about custom colours for your theme that may help you to find the colours of your site faster. Otherwise, you can go into your header code and scroll through the code to find all the 6-digit number/letter colours. Simply copy or type them where you want to save them. When you're done, just exit the header without making any changes.


Step 4: Adjust the dimensions of your button. If you already did this by following option 2 in step 2, you can skip this step. But if you still need to adjust the size, do this now by clicking on the bottom option to your left that says "Resize". If you want different dimensions, make sure to uncheck the box. Then proceed to resize it according to your preference. Once you are happy, select "Apply" to save the changes.

My preferred starting size for my shop buttons are 200x50 pixels for regular buttons, 230x50 pixels for long buttons, and 400x100 pixels for fancy buttons.


Step 5: Add texture/effects to your button. I recommend this step for fancy buttons to add a bit of flare to them. If working on your regular shop buttons, you may prefer to skip this step.

Textures:

1. You can add texture to your button by clicking on the "Textures" icon to your far left. It's the 7th from the top and sort of looks like a diamond weave. 
   
2. There are many free options you can choose from including Space, Burst, Light Trails, Water, Metal, Boards, Paper, Paint, Weave and of course you can also upload one of your own textures. Royal (pay) options include Bokeh, Clouds, Edifice, Smudge and Papyrus. 
   

Effects:

1. You can add effects to your button by clicking on the "Effects" icon to your far left. It's the 2nd from the top and sort of looks like a magic wand with sparkles. 
   
2. There are even more free effects to choose from including my favourites Dark Edges, Frost, Boken Shapes, Radiance and Film Grain. 
   

Play around with the different textures and effects by clicking on one. From there, you will be given more options for each. Adjust the blend mode, saturation and fade levels. Play with the sizing and any other options. Soon you'll have a look you love! 


Step 6: Adjust shape and/or add borders. Do you want to have rounded corners, or do you prefer straight corners? Do you want to have a border? Now's the time to add them. You can do this by going to the "Frames" icon to your far left. It's the 6th from the top and looks like a picture frame.

Recommended free options for buttons are:

• Rounded Corner
  
• Simple Edge
  
• Museum Matte

   The Rounded Corner option is good for adding a rounded corner without any borders, OR if you've just finished adding the Simple Edge or Museum Matte and you want to add an addition rounded corner. Simply select the background colour or check the transparent box. Then adjust the corner radius to your liking. Finally, select "Apply" to save changes, or "Cancel" to disregard them.

   The Simple Edge option allows you to add up to TWO borders - both of which you can adjust the colours and thickness, along with a corner radius for the inner section and inner border. For your buttons, you most likely won't need the caption option. Simply make the changes according to your preference, then select "Apply" to save changes, or "Cancel" to disregard them.

   The Museum Matte option also allows you to add up to TWO borders - both of which the colours and thickness can be adjusted. These borders create the illusion of depth to your button in that it looks like your button is a picture inside a picture frame in the art museum.

Go ahead and play around, back and forth between the options to get the look you want.


Step 7: Decide on depth. Once you've got all of the above to your liking, there is one more thing you may or may not choose to add to your button and that is depth. To do this, click on the "Drop Shadow" option in the Frames list. 

From there, you may like to adjust your distance to 0 so that it centers the button. You can then adjust the drop shadow colour, angle, size and fade. If you've adjusted the distance to 0 changing the angle as no visible effect.

Finally, decide on the background colour. I prefer to check the transparent box so that it blends in with my site, but you may like to have an additional background and bounce back to Step 6 to make some more changes.


Step 8: Save your button base. Once you are happy with your overall button, you'll want to save it before you add any text or overlays to create each individual button. 

Do this by click on the "Save" button above your work. This will take you to where you can name your button. Once you've named your button, click on the green "Save" button and choose a folder to save it to.

Your button base is complete!


Step 9: Before continuing, you may like to make the longer button just like you made the regular button. You can do this by clicking on the "Undo" arrow above your work until you get to the base colour. From here, you'll want to go back to the "Basic Edits" icon to the far left. It's the very 1st one at the top that looks like a square of two overlapping right angles. Rep Steps 4-8 like you did for your regular button. Then proceed to Step 10.


Step 10: Add Text. Now it's time to make the button unique.

Open the button base you wish to work on by clicking on the "Open" button above your current wor OR if you're starting this part from a new PicMonkey session (recommended), click on the "Edit" option, then locate and open the file. 

Next, go to the the "Text" icon to the far left. It's the 4th one from the top and it looks like this: Tt. 

Scroll though the text options to find one you like OR click on the "yours" option towards the top of the list to use one from your own computer (it automatically finds all and uploads them temporarily to PicMonkey so you can use them). When you've found one you like, click on it to select it, then click on the "Add Text" button at the very top of the list to add it onto your button.

You'll want to type something really quickly into the text box, so you don't accidentally loose the box. I recommend starting with "Add to Cart" since it is the longest of the regular button texts. 

From there, you can make all the necessary edits from the box that opens up once you've added the text or selected it. 

• If you know the HTML colour code you want to use for your text, type it into the colour field and then click enter to select it. 
  
• Next, decide if you want your text to be bold, italic or faded. 
  
• Center your text, then adjust the size either with the scroller, by typing the number into the field or by clicking on the arrow to see the standard text sizes.
  
• Finally, play with Blend Modes - Optional.

Play with all the text options until you have a look you like.

*You may need to reposition and adjust the size of your text box so that it is centered over your button. To adjust size, hover over the corners or edges until a double ended arrow appears, click and drag accordingly. To adjust the position, hover over the center until a 4 corner arrow appears, click and drag into position.


Step 11: Add Overlays. This is optional and won't be necessary for regular shop buttons unless you want to add a special touch like a flower. I recommend this step for the longer shop buttons (View Cart and Return) and for the fancy buttons (Raverly, Read Story, etc). Go to the "Overlays" icon to the far left. It's the 5th one from the top and it looks like a butterfly.

From there, you can either choose to upload one of your own images to add as an overlay, or you may like to choose one from the countless options in the list.

Upload your own overlay:

• Click on the button at the top of the list of overlays that says "Your Own".
• Browse your files to find the one you wish to add.
• Select it and upload. *Note: you can only upload one at a time.

Choose one from the list:

• Click on one of the themes from the list to see the options it includes.
• Click on the one you like to add it to your button.

Like for the adding text, an options box will open up that will allow you to change colour(s) of your overlay. You can also fade or flip your overlay, along with changing the blend mode. Depending on your overlay, other options may be included. 

*Hover over the edges or corners to adjust the size. Please note that the dimensions are locked. I have no idea if there is a way to unlock them. Hover over the center of the overlay to reposition it.


Step 12: Save your newly completed button to your computer. Then, repeat steps 10-11 to create each button that uses the same button base. Change the text, delete overlays and add new ones accordingly. Remember to save after each creation.

Once you've finished with one button size, move onto the next one. Repeat until you have all of your desired buttons!

For a demo of the above and additional ideas, please see the video tutorial. *Additional Photoshop ideas are included towards the end of the video.

You can download some shop buttons I created for free here!

---

Thanks so much for visiting today! I hope you have found this tutorial to be helpful. If you have, please let me know below, or give this tutorial a rating...

Additionally, please let me know if you have any questions or concerns. I will be happy to help in any way I can. Comment below, or visit my Website Shop 101 facebook support group...

Be sure to check out the intro to this series for upcoming lessons or lessons you may have missed!

Wishing you a marvelous day. See you again soon for lesson 3, where we'll combine your newly created shop buttons with Ravelry's code...