Mock Up Your Designs with Google Fonts

Looking for fonts that will spice up your website or design? Have you tried Google Web Fonts? Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website or designs under an open source license.

Here is a snappy guide to using Google Web Fonts either for your website or for corporate designs.

USING GOOGLE WEB FONTS FOR YOUR WEBSITE
Goto Google Web Fonts and select the font you like. For example I want to use this font "Pacifico by Vernon Adams" on my website. Click on the font this will open the specimen of the font (see screenshot below)



click on Use this font.

Now follow the instruction given below to embed the font on your website.

1. Copy the first snippet and paste it below the tag on your webpage using your favourite webpage editor, or you can even use notepad to do this if you are an advanced web designer.

2. Paste the code below under the tag

<title>Mock Up Your Website with GOogle Fonts</title>
<style type="text/css">
<!--
body,td,th {
font-size: 36px;
}
.myfonttext { font-family: 'Pacifico', arial, serif;
}
-->
</style></head>


Make sure you change the .myfonttext to your new css class name or better still you can leave it that way if you don't know how to manipulate it.

3. Select any text in your webpage and reference the CSS class to .myfonttext. Below is the code for that

<div class="myfonttext">How to Use Google Fonts</div>

save your web page and preview it.









HOW TO USE GOOGLE FONTS FOR YOUR DESIGNS
This part covers the process of downloading and installing Google Fonts on your Computer.

First of all, you need to goto Google Fonts and Download the Font of your choice. After downloading it in the zip format. Extract it and then copy the font itself to your clipboard >> then goto Control Panel >> Open Fonts and finally paste it. Then font will now be visible for you to use when designing.

See screenshots

Remember! Good design conveys information and communicates ideas. Poor design impairs this communication by getting

Read More!

Classic Style Navigation

Within 15minutes or so, depending on your reading speed you will be able to make classic style navigation using Flash Professional.

Preview the sample here

Let’s start by designing our page. Now Open Flash » Create a new document Ctrl + N.

Click on the properties bar and set the dimension of the page to 380x250.

After setting the dimension click on add new layer and insert two more layers to the default layer 1. Making it three layers, layer 1, layer 2 and layer 3.

I think we should start with the buttons! So click on the buttons layer and select the rectangle tool (R), change the fill color to white (#ffffff) and line color blue (#0000FF). Now inscribe a 12x12 rectangle at the top left of your page.

Again, select the Line Tool (N) and draw a less than shape inside the rectangle you’ve just drawn.

Like this

Make sure you use Cap (square) and Joint (Milter).

Select everything you have on the stage and convert to a button symbol by pressing F8. Name you symbol nav_button and registration point center then click ok

After creating your button double click on it to enter the editing mode. On the time line click on over and press f6 to insert a keyframe

The black shade should be visible on the over

Now go back to your button on the stage and change the fill colour to this (#00CCFF) by select it once and changing the fill colour from the properties bar or by using the paint bucket tool (K).

After you are through with all this. Just go back to the main Scene by clicking on Scene 1 on the timeline to return to the main scene

Duplicate your button by press Ctrl + D. Or from edit choose Duplicate

Furthermore, place the duplicated symbol by the right just after the first symbol. Then from Modify Select Transform Flip Horizontal

You should have this now

Goto the content layer, take the text tool and type in your content. Or you can even insert an image. In my own case I used a text to illustrate it. See screenshot below

Now click on frame 2 on the timeline of the content layer and press f6 to insert a new keyframe.

Download the source code here

Read More!

Deluxe Iphone Buttons

-BY OTO

In this tutorial I will show you how to make some eye catching Iphone like buttons in flash. With this technique you will be able to apply same to your flash games, websites etc.

Click here to view the final swf

SETTING UP YOUR LAYOUT

Open flash and create a new flash document Ctrl + N.

After creating a new document press Ctrl + J to set your page properties.

Use the same properties as shown in the screenshot above.

Background color: 100% Black.

Rename the current layer to (buttons).

MAKING YOUR BUTTONS

Double click on the rectangle tool and type in 9 for the corner radius value and press ok or enter.

Now draw a medium size rectangle on the stage.

Now take the selection tool (v), click and drag to select the top half of the rectangle as shown in the screenshot below.

make a duplicate of it by pressing ctrl + d on your keyboard. Now this is what you should have.

While the half top is still selected open the color mixers tab (shift + f9)

Type choose, linear.

While your rectangle is still selected, click on the first key fill on the color mixers panel and type in these (#0000FF), click on the right key and type in the same thing.

Now double click on the middle but type in #000000 as the fill color.

Now on the toolbar, take the Gradient Transform Tool.

Click only once on your top half rectangle.

Now rotate the right top white circle until you have this.

Finally move the white circle in the center down, you now have this.

Good.

Let’s move over to the remaining half rectangle (the bottom one)

Click on the bottom rectangle and then on the color mixers tab choose linear. Now following the same procedure with the top half rectangle set the linear to this.

If you notice we have only two keys. With the fill colors

Left Key-#0000FF

Right Key-#000000

Now take the Gradient Transform Tool and rotate the white circle from

To this

Now remember the other top half rectangle we duplicated.

Click on it and convert it to a movie clip symbol.

After converting it to a movie clip symbol, on the properties tab, color, choose alpha and type in 35% for the alpha value.

Now drag it to where it was.

(see screenshot below)

Finally you have this.

isn’t it cute?.

Take the text tool and make a static text with the label Op. give the text the following properties.

Fill Color-#0066FF

Font-Segoe Script

Font Size-45

Bold.

Then drag the text and place in the center of the rectangle

Now let’s get started by duplicating our rectangles and changing the colors.

DUPLICATING THE RECTANGLE

Click on the selection tool (v), click and drag across the rectangle to select it.

Press Ctrl + D to duplicate it.

Make 8 duplicates and then arrange them as shown in the screenshot below.

now use the zoom tool (z) to zoom inside the 2nd op.

a. Click on the bottom rectangle of the 2nd op and change the left fill key on the color mixers panel to – #FF0000

b. Click on the text also and change it to #FF0000.

c. Right click on the top half rectangle that was converted into a movie clip and select duplicate movie clip. After duplicating it double click on it to go inside of it. Change the fill color to this - #FF0000.

Now click on scene 1 to go back to the main stage.

d. Click on the other top half rectangle that wasn’t converted into to a movie clip and on the color mixers tab. Change the properties as follows;

Left Key-#FF0000

Center Key-#000000

Right Key-#FF0000

Now you should have this.

What am going to do now is to give you the values for the rest of the buttons.

VALUES

FOR THE 3rd OP BUTTON

Step a-#00FF00

Step b-#00FF00

Step c-#00FF00

Step d- left key-#00FF00 center key-#000000 right key-#00FF00

FOR THE 4th OP BUTTON

Step a-#FF00FF

Step b- #FF00FF

Step c- #FF00FF

Step d- left key- #FF00FFcenter key-#000000 right key- #FF00FF

FOR THE 5th OP BUTTON

Step a- #FFFF00

Step b- #FFFF00

Step c- #FFFF00

Step d- left key- #FFFF00 center key-#000000 right key- #FFFF00

FOR THE 6th OP BUTTON

Step a- #00FFFF

Step b- #00FFFF

Step c- #00FFFF

Step d- left key- #00FFFFcenter key-#000000 right key- #00FFFF

FOR THE 7th OP BUTTON

Step a- #666600

Step b- #666600

Step c- #666600

Step d- left key- #666600 center key-#000000 right key- #666600

FOR THE 8th OP BUTTON

Step a- #CCFF66

Step b- #CCFF66

Step c- #CCFF66

Step d- left key- #CCFF66 center key-#000000 right key- #CCFF66

FOR THE 9th OP BUTTON

Step a- #993300

Step b- #993300

Step c- #993300

Step d- left key- #993300 center key-#000000 right key- #993300

You will finally have this.

CONVERTING THEM INTO BUTTONS

A1. Using the selection tool (V) drag and select the 1st op, after select it press f8 to convert it to a symbol. Select button as the behavior and registration point center, change the name to op1, finally click ok.

now double click on your button to go inside the editing mode.

A2. On the timeline click the over frame and press f6 to insert a keyframe.

with the over frame still selected, press ctrl + a to select every thing on the stage.

Convert everything to a movie clip symbol with the name op1_over, click ok.

now select your movie clip and on the properties bar, select the filters tab

after selecting the filters tab. Click on the plus icon and choose adjust color.

A3. set the properties as shown in the screenshot below.

Finally click on scene 1 to go back to the main stage.

Now repeat step A1, A2, and A3 to the rest of the buttons.

Test your movie!!!

If you have any difficulty doing this, you can download the full .fla below or post your comments and remarks.

Download source file

Read More!