|
by
kirupa | 22 November 2008
It used to be that
buttons were the gray, rectangular shapes that you
clicked on to do something. When you interacted with
them, they may have changed their colors around a
bit, but few did anything really noticeable or
fancy.
For better or for
worse, nowadays, it is very
common for your button to take on a variety of
shapes and forms. In this tutorial, I will explain two things. First,
I will show you how you can turn an image into a
button. Second, I will show you how to add custom
rollover and pressed transitions when you interact
with it. In the end, you will have created something
with all of the functionality of a button, but it
will not resemble a button in any way, shape, or
form.
Take a look at the
following application. Move your mouse over and
click on the green paper bag
to see how this button reacts:
[ what you will have created by
the end of this tutorial ]
The above effect is
fairly simple to create, so let's look into how
you can do this yourself:
-
Before you begin,
make sure you have
read my earlier
Getting Started article and have Expression
Blend installed.
-
Launch Expression
Blend. A Welcome Screen should appear, and
from this screen, click on the New Project
link:
[ from the Welcome Screen, click the New Project
link ]
If you
do not see a Welcome Screen, then go to File | New
Project instead. The end result is the same.
-
After clicking on
New Project, the New Project window appears.
From this window, select the button for
Silverlight, WPF, or Windows Phone Application! for Name enter
ImageRollovers, and ensure the Language is set
to Visual C#.
Click
OK to both close your New Project window as well as
create your new project with the specified values.
-
After you have
created your new project, you will see your
Artboard. What we want to do next is insert an
image into your artboard.
Currently, Blend does not support copy and
pasting an image from the web, so save the
following image to a location on your computer
first:
The
above icon is from the excellent Bagg and Box's set,
so feel free to check out the full set (and
licensing terms) by
clicking here.
-
Once you have
saved your image to your computer, just drag and
drop the image from the location on your
computer and into your artboard. There is a good
chance that when you do that, your image will be
unacceptably tiny:
[ when you insert an image into the artboard, the
size of the image is tiny ]
-
The easiest way to
fix this is by simply resizing your image using
the adorners that surround it on the artboard.
Hold down your Alt key and just begin resizing
to preserve your image's aspect ratio:
[ hold down the Alt key while
resizing to lock the aspect ratio ]
Ok, so far so good. You got a brief introduction
to what you will be doing in this tutorial, and you
made some progress where you inserted an image and
resized it appropriately on our design surface. On
the
next page, you will learn how to go from an
image to a button.
Onwards to the
next page!
|
Creating a Custom Button - Page 1
