Rebeckah's Treasures
  • Home
  • About
    • Who Am I?
    • My Crochet Story
    • Mission
    • Disclosure Policy
    • Skill Levels
  • Store
    • Crochet Patterns
      • Special Offers
      • New Releases
      • Accessory Crochet Patterns
      • Afghan Square Crochet Patterns
      • Amigurumi Crochet Patterns
      • Applique Crochet Patterns
      • Baby Crochet Patterns
      • Dolly Crochet Patterns
      • Fashion Doll Crochet Patterns
      • Free Downloads
      • Holiday Crochet Patterns
      • Tapestry Crochet Patterns
      • Under the Sea Crochet Patterns
      • Wedding Crochet Patterns
    • Loyalty Program
      • List of Loyalty Program Patterns
    • Disclaimer and FAQs
  • Blog
    • Blog Archive
    • Crochet Resources
    • Crochet Stitches
    • Get Your Crochet Patterns Featured!
  • Free
    • Free Crochet Patterns
    • New Free Releases
    • Free Accessory Crochet Patterns
    • Free Afghan Square Crochet Patterns
    • Free Amigurumi Crochet Patterns
    • Free Applique Crochet Patterns
    • Free Baby Crochet Patterns
    • Free Dolly Crochet Patterns
    • Free Fashion Doll Crochet Patterns
    • Free Guest Crochet Patterns
    • Free Holiday Crochet Patterns
    • Free Tapestry Crochet Patterns
    • Free Under the Sea Crochet Patterns
    • Free Wedding Crochet Patterns
    • Free Crochet Patterns Coming Soon
  • Contact
    • Newsletter
    • Suggest a Crochet Pattern
    • Testing Opportunities
  • Home
  • About
    • Who Am I?
    • My Crochet Story
    • Mission
    • Disclosure Policy
    • Skill Levels
  • Store
    • Crochet Patterns
      • Special Offers
      • New Releases
      • Accessory Crochet Patterns
      • Afghan Square Crochet Patterns
      • Amigurumi Crochet Patterns
      • Applique Crochet Patterns
      • Baby Crochet Patterns
      • Dolly Crochet Patterns
      • Fashion Doll Crochet Patterns
      • Free Downloads
      • Holiday Crochet Patterns
      • Tapestry Crochet Patterns
      • Under the Sea Crochet Patterns
      • Wedding Crochet Patterns
    • Loyalty Program
      • List of Loyalty Program Patterns
    • Disclaimer and FAQs
  • Blog
    • Blog Archive
    • Crochet Resources
    • Crochet Stitches
    • Get Your Crochet Patterns Featured!
  • Free
    • Free Crochet Patterns
    • New Free Releases
    • Free Accessory Crochet Patterns
    • Free Afghan Square Crochet Patterns
    • Free Amigurumi Crochet Patterns
    • Free Applique Crochet Patterns
    • Free Baby Crochet Patterns
    • Free Dolly Crochet Patterns
    • Free Fashion Doll Crochet Patterns
    • Free Guest Crochet Patterns
    • Free Holiday Crochet Patterns
    • Free Tapestry Crochet Patterns
    • Free Under the Sea Crochet Patterns
    • Free Wedding Crochet Patterns
    • Free Crochet Patterns Coming Soon
  • Contact
    • Newsletter
    • Suggest a Crochet Pattern
    • Testing Opportunities
Welcome Visitor! I hope you enjoy my treasures.

Disclaimer: This website makes use of sponsored and/or affiliate links. Please see this page for more information.

Website Shop 101 - Designing Shop Buttons

20/9/2015

Comments

 
Learn how to design your own shop buttons with lesson 2 of the Website Shop 101 tutorial series for crafters with @beckastreasures!
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...



Hello Visitor and Welcome to Rebeckah's Treasures...

I am a Norwegian/Canadian currently studying Midwifery in the UK. I love to crochet!

At Rebeckah's Treasures, I share my crochet patterns and treasures. I hope they inspire you to crochet your own little treasures too...

Comments
comments powered by Disqus
    Rebeckah's Treasures' Logo

    Shop Crochet Patterns!


    Rebeckah of Rebeckah's Treasures
    Hello, my name is Rebeckah. 
    I hope my crochet inspires you to create your very own treasures!
    Learn more about me...


    Connect with Us!




    Tweets by beckastreasures
    All Free Crochet


    Categories

    All
    Accessory
    Afghan Squares
    Amigurumi
    Apparel
    Applique
    Articles & Resources
    Baby Apparel
    Bags & Wallets
    Barbie
    Barbie Furniture
    Barbie's Friends
    Bookbinding
    Cakes & Baked Goods
    CAL Crochet A Longs
    Chess
    Christmas
    Contest
    Craft
    Crochet
    Crochet Stitches
    Crochet With Beads
    Crochet With Wire
    Disney Inspired
    Doll
    Easter
    Flower
    Free Pattern
    Friday Features
    Get Stuffed Magazine
    Giveaways & Special Offers
    Greybriar's Travels Magazine
    Guest Post
    Halloween
    Holiday
    Home
    How To Tutorials
    Interviews
    Midwifery
    Pay Patterns
    Photo Tips
    Recipes
    Reviews
    Round Ups
    Saturday Link Party
    Sewing
    Shop Updates
    Social
    Survey
    Tapestry Crochet
    Toys
    Tuesday Treasures
    Tutorial Video
    Tyc-magazine
    Under The Sea
    Updates
    Valentines
    Website Shop 101
    Wedding
    Wip


    Archives

    October 2021
    August 2021
    August 2017
    June 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015
    September 2015
    August 2015
    July 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015
    December 2014
    November 2014
    October 2014
    September 2014
    August 2014
    July 2014
    June 2014
    May 2014
    April 2014
    March 2014
    February 2014
    January 2014
    December 2013
    November 2013
    October 2013
    September 2013
    August 2013
    July 2013
    June 2013
    May 2013
    April 2013
    March 2013
    December 2012


    RSS Feed


    © 2012-2021 Rebeckah Ferger
    All rights reserved. 

    Disclaimer: This website makes use of sponsored and/or affiliate links. Please see this page for more information.
Powered by Create your own unique website with customizable templates.
  • Home
  • About
    • Who Am I?
    • My Crochet Story
    • Mission
    • Disclosure Policy
    • Skill Levels
  • Store
    • Crochet Patterns
      • Special Offers
      • New Releases
      • Accessory Crochet Patterns
      • Afghan Square Crochet Patterns
      • Amigurumi Crochet Patterns
      • Applique Crochet Patterns
      • Baby Crochet Patterns
      • Dolly Crochet Patterns
      • Fashion Doll Crochet Patterns
      • Free Downloads
      • Holiday Crochet Patterns
      • Tapestry Crochet Patterns
      • Under the Sea Crochet Patterns
      • Wedding Crochet Patterns
    • Loyalty Program
      • List of Loyalty Program Patterns
    • Disclaimer and FAQs
  • Blog
    • Blog Archive
    • Crochet Resources
    • Crochet Stitches
    • Get Your Crochet Patterns Featured!
  • Free
    • Free Crochet Patterns
    • New Free Releases
    • Free Accessory Crochet Patterns
    • Free Afghan Square Crochet Patterns
    • Free Amigurumi Crochet Patterns
    • Free Applique Crochet Patterns
    • Free Baby Crochet Patterns
    • Free Dolly Crochet Patterns
    • Free Fashion Doll Crochet Patterns
    • Free Guest Crochet Patterns
    • Free Holiday Crochet Patterns
    • Free Tapestry Crochet Patterns
    • Free Under the Sea Crochet Patterns
    • Free Wedding Crochet Patterns
    • Free Crochet Patterns Coming Soon
  • Contact
    • Newsletter
    • Suggest a Crochet Pattern
    • Testing Opportunities