Make Website Buttons

Below is a video tutorial on how to make website buttons. In the video, I demon straight how to make a website button using a very affordable logo design software program.

The techniques shown will work with any software program that has a gradient fill and opacity options. The lesson describes the three components used to produce the “buy now” button located at the bottom of this page.

  • Rounded Rectangle
  • Button Highlight
  • Call to action text

After making the website button you will have an option to save the button project. This will save the button in a format that can be manipulated in the future. The next time you need a button for your website open the project and change the text or color to create a brand new website button.

If you would like to learn more about the Logo Design Studio Pro software, visit their website by clicking the “buy now” button.

Making a Favicon

Making a favicon icon for your website is easy and makes your website/blog look more professional. Here is a snapshot of the SKO website’s favicon which I created using a free online graphic tool and a free online image converter.

Step One:

Create a simplified version of your business logo or some other image that will help brand your website. Make the image size 32 pixels x 32 pixels in size. You can use any graphic software program that you have. Save the file as a transparent ping for best results. Make sure you name it favicon. So if you save the file as a ping format it would be called favicon.png.

If you don’t have a good graphic software program you can use this one I found online at Pixlr.com. It’s free to use and without registering, signing up or downloading anything.

Step Two:

Now that you have your graphic image you will need to convert the file to an .ico file format. There are many websites that provide a free graphic converter tool online. Just search the web for the term “free icon converter online” and follow their instructions. It’s usually as simple as; upload your file, select the file format you desire – in this case the .ico format – and hit the submit button.

Step Three:

Upload your favicon.ico file to your web sever and place it in your root directory. If you are using a blog template it may be located in an image folder, check your support website for information on where the file is located.

And that’s it. Your website should now display your new logo icon in the browser bar. If you don’t see it right away, try refreshing your browser a few times.

Free Design Videos

Lynda.com is a fantastic website that offers video lessons for just about all the major design and software program out there like Adobe Illustrator, Photoshop, Fireworks, Flash, InDesign and Dreamweaver. They also have lessons in graphic design principles as well as color and typography.

I learned about the site during one of my web design classes, we actually used one of the Lynda books as a class reference. Whenever I get a new piece of software or I need to learn some extra coding I’ll sign up for a month. When I first purchased the Adobe Creative Design Suite I signed up for a year. With that many new programs I knew I wanted to be able to learn at my own pace without feeling rushed.

As a special offer Lynda.com is providing SKO visitors a Free 24 Hour Pass. You can use this time to view and evaluate the designing software and to check out the design tutorials.

Click Here to Get Your 24 Hour Free Pass

Here is a screen shot of a color design tutorial. This lesson is teaching the value of ‘color value’.

Here is a screen shot of an Adobe Illustrator software lesson. This section is on vector handling.

Whether you are looking to design a logo, make a website or create a new marketing piece, you’re sure to learn something new and valuable here.

Click Here to Get Your 24 Hour Free Pass