Designing Mozilla Firefox Logo

Are you ready to design this Firefox logo? Then, let’s go!
1. Draw a round object. Resize it to 98 x 98 mm. Fill it with fountain fill, set the ‘From’ color to Sky Blue, and the ‘To’ Color to C:100 M:75 Y:0 K:0. Set the angle to -90 degrees and the fill midpoint to 30%. Name it Earth_Base.
2. Draw the world map using the Pen Tool. Because, I don’t know the shape of the map that covered by the fox, so, i just draw the map that isn’t covered. Color it to Ice Blue and name it Earth_Surface.
3. Draw a round object. Resize it to the same size as Earth_Base. Change the color to C:70 M:100 Y:0 K:0. Make it transparent (linear) and set the transparency nodes so it’s look like this.
4. Draw a round object again. Resize it to 62 x 50 mm. Change the color the White. Make it transparent (linear) and set the transparency nodes so it’s look like this.
5. Group all the objects that we’ve just created above and we’ll draw the fox. Yippie! I love drawing . Prepare your best mouse if you want a good result!
6. First, draw the fox base using Pen Tool. Change the color to C:0 M:70 Y:100 K:0. Name it Fox_Base.
7. Then, smooth all nodes that has sharp edge. To smooth it, select the node you want to smooth, then, from the property bar, click Convert Line to Curve and click Delete Node(s). For example, look carefully to image shown below. I selected four nodes that has sharp edge.
Then, click Convert Line to Curve and click Delete Node(s).
Repeat this step until the fox looks handsome (AW!). Note: Don’t smooth the corner’s node or you will see your fox is look like a jerk.
8. Next, draw the tails. After you succeeded drawing the fox’s base, i’m sure you know how to draw the tails. Change the fill color to fountain: ‘From’: C:0 M:50 Y:90 K:0, ‘To’: C:4 M:4 Y:77 K:0. Edge Pad: 32% and Midpoint: 50. Then, make the edge transparent. Draw the tails until the fox have nine tails.
9. Now, draw the fox back hair. Change the fill color to C:2 M:55 Y:92 K:0.
10. Next, draw the shade effect. Change the fill color to fountain: ‘From’: C:1 M:85 Y:96 K:0, ‘To’: C:21 M:92 Y:95 K:0. Edge Pad: 29% and Midpoint: 50.
11. Next is, its face and hand. Change the fill color to fountain: ‘From’: C:5 M:6 Y:92 K:0, ‘To’: C:4 M:4 Y:77 K:0. Edge Pad: 33% and Midpoint: 50. Don’t forget the nose color is Black.
12. Ta Da! Our firefox is ready.
Next step is to group it and place it in front of the earth so it’s look like this.
13. Last touch: add some text and you’re done!
Any question?

Designing Windows Vista Logo

Do you ever imagine drawing Windows Vista logo by yourself? Oh yeah, before I tell you the trick, i’m going to tell you that start from now on, I will name every object I created so that it’s not difficult to understand the trick. Come on, follow me.
1. Draw a rectangular object. Resize it to 80 x 80 mm. Name it Rectangle_01
2. Draw a horizontal line using the Pen Tool from the square object’s upper-left corner to the upper-right corner. Make sure the Auto Add-Delete function is disabled. Change the line color to green so that you can see it. Do the same for the bottom of the square object. Name it Line_01 & Line_02.
3. Create another rectangle object. Resize it to 80 x 4 mm. Name it Rectangle_02. Place it to the center of Rectangle_01.
4. Repeat step 3. But this time, resize it to 4 x 120 mm. Name it Rectangle_03. Place it to the center of Rectangle_01.
5. Now, select Rectangle_01 and select Effects > Envelope from the menu bar. Then, click Add Preset and choose the 11th preset (it’s look like a flag) and click Apply. Now you see Rectangle_01 is transforming.
But this isn’t enough. The envelope effect’s preset doesn’t meet the criteria to create Vista logo. Now, we’ll going to set it manually. Move the upper-left node to Line_01’s left node, do the same for the upper-right node. Then, move the top-center node to Line_01’s midpoint. Repeat this step for the bottom nodes.
6. Then, duplicate Rectangle_01 and name the duplicate Rectangle_01copy. Move the Rectangle_01copy’s upper-left node to Rectangle_02’s upper-left node so it’s look like this.
7. Repeat step 6. But this time, move it to Rectangle_02’s bottom-left node so it’s look like this.
8. Now, delete the Line_01, Line_02 and Rectangle_02. Then, use Smart Fill Tool and choose green as the fill color without outline. Fill the area shown below (change the corresponding color into the right area).
9. Now, delete Rectangle_01, Rectangle_03, Rectangle_01copy and Rectangle_01copy2. Then, select all object and mirror it horizontally. Skew it a bit to the right so it’s look like this
10. Then, select the red object and click Fill Tool from the toolbox and select Fountain Fill. At the dialog box that appeared, set the setting like this: Type: Linear, Angle: -45, Color Blend: Custom. Click OK to apply.
Repeat this step for other object. For the angle, set it to this setting: Green: -135, Yellow: -215, and Blue: 45.
11. Now, select the red object again. Select the Interactive Extrude Tool from toolbox. Drag from the center of the red object to the bottom-right corner. Then, at the property bar, change the extrusion type to 4th type and change the vanishing point coordinate to X: 2,2 mm Y: 2,0 mm. Do the same for the other object.
12. Then, group all the object and duplicate it. Name it LogoDuplicate_01. Change the color to 20% Black (you'll see it in color palette) and move the position until it look like this.
13. At last, the finishing touch. Add some text so it’s look like this.
Any question?

Designing Glassy Button

Want a glassy look for your button in your website? Follow these steps:
1. Draw a rectangle using the Rectangle Tool from the toolbox. Change the color to C:0 M:100 Y:100 K:20. Resize it to 200 x 60 mm without outline. Transform all corner to round with 25 pt (use the property bar).
2. With the rectangle still selected, change its fill to Radial and use Red as the center color. Set the Radial node so it’s look like this.
3. Now we’ll create a text to be a background in the button. First, write a text using the Text Tool. Type as what you like. For example, i’ll type Vectrix7 and I use Vivaldi as the font and C:0 M:80 Y:80 K:0 as the color. Resize and rotate it so it’s look like this.
4. The text doesn’t fit with the button? It’s okay. I do it to make it looks good. But i’m not going to let some parts of the text crossing the button area. So, i’m going to trim it. First, draw a rectangle that can cover the text and the button.
Change the color to any color which can be a contrast to the button color. I’ll use Blue.
5. Then, send the blue rectangle to bottom using Ctrl + End. Select the button and by holding Shift key, select the blue rectangle and click Trim at the property bar. Then, send the Blue rectangle to front using Ctrl + Home key and trim the text using the same way.
6. Now we’re going to add some elements to the button to make it have better look. You can draw some curves or you can download the curve that i’m using. Change the color to the same color as the background text. Place it to the right corner.
7. Now it’s the time for the glass effect. Before I tell you how, let’s pay attention to the button. Do you see there’s a text shown when you place the cursor at the edge of the object? Now explore the whole edge of the button. You’ll see some text like edge, midpoint and node. Got it? Then let’s back to the topic. To add the glass effect to the button, first duplicate the the button by pressing the + key after the button had been selected. Change the color to White and place it in front. Then, crop the white button to the half size of the red button. Use the button’s midpoint as a guide (Now you know why i explain it before?).
Then, make the white object transparent and change the transparency type to linear. Change the transparency node position so it’s look like this.
Then, reduce the size and it should look like this.
8. Next step is adding another text to your button. We’ll use it as the button title. For example, i’ll type Home and Myriad Pro as the font. Change the color to white and give it a finishing touch by adding drop shadow to the text.
Any question?