Tip:
Highlight text to annotate it
X
Hey guys, welcome to Breezo tutorials. My name is Dario an on our first tut I'm gonna
show you guys how to create a good looking button in Breezi.
It's simple and really fast. So the first thing you wann do is go down
to the bottom of the screen and click on the apps button the shelf an look for button
app on the list here. Here we go, so drop this into the site installing
a new button. (Inaudible)
So, this is the default state for our button here.
Soo, now what we have to do is add a litlle bitof style to it.
So when you hover on things you're gonna see that you all these little dots pop.
Pop into the screen. Uhh so if you click one of these any of these you could uuh
style options for, for the object you are clicking at.
So, this is four our button and the first thing I wanna do is pick a really
bright color something that pops out. Umm I'm gonna probaly go with blue.
Here I like this blue, yeah I think this is good, I like it.
Sooo, I remember wich color this is and I'm gonna choose a lighter color for the roll
over state. Sooo, I'm gonna go here and probably this,
yeah this looks about right. Sooo, let me test how this looks. Yeah, I
like it! Sooo, now what I wanna do is go back click
on a dot and I'm gonna grab some, I'm gonna add some valume to it so.
Click on the gradient, options (inaudible) effect, I'll set this area.
Ok I understand, thank you. Umm click on it and I see that it applied
a gradient. So I'm just gonna invert it and move it a little bit to the
left to a softer effect. I think soft is good.
See drop shadow is applied.I'm just gonna move my vertical distance a couple of pixels.
Add a litle bit of blur five maybe four is good.
And bring down the opacity to, let's say seventy. Yeah I like this.
Ok so now the last thingI'm gonna do to the background of this button is add a border
to it. More of a highlight to the, to the top part.
To, bring out the volume a little bit more. So I uncheck all these and just leave checked
for the top one. The color. And I'm gonna choose, let's bring this down.
And I'm gonna choose from the same blue just make this a little bit light,
lighter less saturated. Choose a highlight color to this.
Yes, I think it looks good I like this. So now this looks pretty good, now the last
thing I'm gonna do is fiddle a little with the type here, with the font. I'm gonna add
a little drop shadow to the top. To uummm, let's see number two, that's good,
brin down the oppacity. To add this like indent, indented effect on
it. On the text. Here you go and now for this one that is grey
from the previous style. just go back to the color, remeber what column
I was using of blue. Aand, use a lighter color. Maybe that's a
little bit to dark still. This will work ok, and there you go.
I'm gonna apply the same effect for the drop shadow and the little indented effect.
Umm I think that will work. Yup, I like it so, this is my final button.
You can change the text to whatever you want. uuummmm, and same ting for the one below and
you're good to go just go to preview mode. And see how your button looks like and I think,
I think this is pretty good. So there you go I hope you like this and stay
tuned for more tutoarials. Thank you. For more tutorials visit breezi.com/tuts