Create an Airport Time Table Type Effect. Typographic elements are ideal to create in vector as you can scale and copy them as you like and change the colors to suit your designs. In the following Quick Tip tutorial you will learn how to use various shapes and gradient effects to create an airport timetable text effect that's perfect for websites, poster designs or even logos. Step 1 Create a 700 by 220px document. First, turn on the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). Now, you need a grid every 2px. Go to Edit > Preferences > Guides & Grids then enter "2" in the "Gridline Every:" box and "1" in the "Subdivision:" box.
All these options will significantly increase your work speed. Step 2 Pick the Rectangle Tool (M) and create a rectangle like the grey one shown in image #1. Step 3 Go to Edit > Preferences > Guides & Grids then enter "1" in the "Gridline Every:" box. Step 4 Select shape "1" and fill it with the linear gradient. Step 5 Duplicate shape "2". Step 6 Duplicate shape "3". Step 7 Step 8 Step 9. Create Bright Web Buttons using the 3D Options in Illustrator. In this quick tip we will create a set of web buttons with the help of 3D Effects in Adobe Illustrator. Why? Because in this way we can forget about using different brushes and effects for adding highlights and shadows and we can achieve this in a single step, taking advantage of the light settings and Bevel shapes available. Let's begin! Step 1. The Button Shape Let's start with the basic shape for this web button so take the Rounded Rectangle Tool and click anywhere on your artboard to open the Rounded Rectangle window.
There, enter the numbers shown and you will get the shape that we need. Step 2. 3D Settings Having this rectangle selected, go to Effect menu > 3D > Extrude & Bevel. If you increase the Height value the rounded edge becomes thicker. In the Extrude & Bevel Options window press the More Options button to open the entire dialog and focus on the bottom part. Step 3. Finally, here are the settings that I've used. Step 4. Step 5. Step 6. Now, you need an Art brush. Step 7. How to Create a Set of Bubble Gum Buttons in Illustrator. In the following tutorial you will learn how to create a set of bubble gum inspired blog buttons by using Drop Shadows and the Appearance panel in Adobe Illustrator.
We'll go through each step and show you variations in the symbols and how to add text. Step 1 Open Illustrator and hit Command + N to create a new document. Enter 600 in the width box and 300 in the height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). Step 2 Using the Rectangle Tool (M), create a 120 by 36px shape, fill it with the linear gradient shown below and go to Effect > Stylize > Rounded Corners. Step 3 Select the shape made in the previous step and focus on the Appearance panel (Window > Appearance). Make sure that this new fill is still selected and go to Effect > Path > Offset Path. Step 4 Step 5 Step 6 Step 7 Step 8 Step 9 Step 10.
How to Create a Simple Step by Step Progress Bar in Illustrator. In the following quick tip you will learn how to create a simple step by step progress bar using Adobe Illustrator. For the main shapes we'll use some basic tools along with the Transform effect and some simple Pathfinder options. For the small details we'll use some basic vector shape building techniques, several Drop Shadow effects and some simple blending techniques. In the final steps we'll add the simple pieces of text and the little check symbol. Step 1 Open Illustrator and hit Command + N to create a new document. Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). Step 2 We'll start with the background. Step 3 Using the Rectangle Tool (M), create a 425 by 7px shape and fill it with black. Step 4 Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px.
Step 5 Reselect the first shape made in the previous step and go to Object > Path > Offset Path. Step 6 Step 7 Step 8 Step 9. How to Create a Simple Web Button Set Using the Appearance Panel. In the following tutorial you will learn how to create your own web buttons set. First, using the Rectangle Tool along with some Pathfinder and Offset options plus a Rounded Corners effect you will create the three starting shapes. Next, a linear gradient plus some Film Grain and Drop Shadow effects will complete the overall button. Finally, some text and a new Drop Shadow effect will help you finish the work. Let's get started! Step 1 Pick the Rectangle Tool (M) and click on your artboard. Now, your shape should look like the following image. Step 2 Select the copy made in the previous step and go to Object > Expand Appearance.
Step 3 Go to Edit > Preferences > General and enter 0.5 in the Keyboard Increment box. Step 4 Return to the blue shape. Step 5 Reselect the rounded rectangle and go to the Appearance panel. Step 6 Add a third fill for your rounded rectangle. Step 7 Reselect the rounded rectangle and go to the Appearance panel. Step 8 Finally, add some white text. Step 9 Step 10 Step 11. How to Make an Ultra Glossy Scalable Web Button with 9-Slice Scaling. In this Quick Tip, you will learn how to create a scalable web button with the Appearance Panel and Adobe Illustrator's 9 Slice Scaling.
This technique is especially useful for web designers that need to use the same style button with various lengths of text. Let's get started! Introduction This tutorial will show you how to create a scalable vector button using 9-Slice scaling in Adobe Illustrator CS5. In the example below you will see how the button scales with and without 9-Slice scaling, you will notice that the regular scaling moves everything within the button image. Step 1 Make a new RGB document of any size.
Step 2 Open the Appearance Panel and select Fx > Stylize > Round Corners, set the corner radius to 8px, click OK. Step 3 Add a gradient fill to the button with the following colors. Step 4 If your button has a line, delete it. Step 5 Fill the second fill layer with a gradient in the following colors. Step 6 Step 7 Step 8 Scale the buttons to test the areas you marked out. Step 9. Create an Airport Time Table Type Effect. Create Bright Web Buttons using the 3D Options in Illustrator.
How to Create a Vector Image Slider in Adobe Illustrator. Image sliders have been a common element of website design over the past few years, especially in portfolio designs. In today's tutorial, I'm going to show you how to create an image slider in Adobe Illustrator. Step 1 Hit Command + N to create a New document. Enter 600 in the width box and height boxes then click on the Advanced button. Next, you'll need a grid every 5px. Step 2 Using the Rectangle Tool (M), create a 540 by 220px shape, fill it with R=28 G=117 B=188 and go to Effect > Stylize > Rounded Corners.
Step 3 Next, you'll need this image. Step 4 Open the Transparency panel (Window > Transparency). Step 5 For this step you'll need this image. Step 6 Reselect the image and the white shape made in the previous step, open the fly-out menu of the Transparency panel and click on Make Opacity Mask. Step 7 Focus on the left masked image. Step 8 Reselect the black rectangle made in the previous step, focus on the Appearance panel and add a second fill using the Add New Fill button. Step 9. How to Create a Set of Bubble Gum Buttons in Illustrator. How to Create a Simple Step by Step Progress Bar in Illustrator.