AppId is over the quota
In this tutorial I’ll show you how to use the Pen Tool (P) and Appearance panel to create a set of rubber band corner banner treatments using Adobe Illustrator. These are perfect for bringing attention to images on the web. So let’s begin!
Let’s start off by preparing our document. Open Illustrator and hit Command + N to create a new document. Enter 500 in the width box and 500 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.
When working for the web pixel perfection is a must and in order to create the rubber band shape it would be easier to have grid view set up and pixel snapping enabled so we’ll do that now. Let’s enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). After those are on, you’ll need a grid every 1px. Simply go to Illustrator > Preferences > Guides & Grid, enter 1 in the Gridline every box and 1 in the Subdivisions box. Now let’s set the unit of measurement to pixels from Illustrator > Preferences > Unit > General. Once completed your document should look like the images below.
Using the Zoom Tool (Z) let’s increase the size of our art board until you can see the individual pixel grid we set up previously. My screenshots below are zoomed in to 600%. If you wish you can use the Navigator window (Window > Navigator) to type in a numerical value for the state of zoom in your document. This pixel grid will be a jumping off point for where to click and drag to make our banner shape.
Once you’re zoomed in to a comfortable level select the Pen Tool (P) and make your first click and drag on the grid. With Snap to Grid enabled your first click should place a point directly in the intersection on the grid. We’ll repeat this seven more times until we get the shape outlined below.
Once we have the shape to our liking we will need to Copy it (Command + C) then Paste in Front (Command + F). Once duplicated we will right click on the object then select Transform > Reflect to open the Reflect dialog box. Once opened set the options as outlined in the screenshot below and hit OK to set the changes. Once reflected we can select the Selection Tool (V) then move the new shape to it lines up at the edge of the other as seen in the screenshot below. We will now need to Shift + Click the second object so both are selected simultaneously then in the Pathfinder panel (Window > Pathfinder) we will click the first option under Shape Modes which will unite the two objects in to one. At this point let’s also fill the shape with a nice blue color as outlined below and using the Appearance panel (Window > Appearance) we can apply an extra gradient fill angled to 45 degrees on top of the flat color then set the Blending Mode to Multiply and the Opacity to 75%. We’ll also add a Drop Shadow effect (Effect > Stylize > Drop Shadow) as outlined below.
We’re rotating the gradient and offsetting the drop shadow now so that later on when we rotate the shape everything will be in place.
Once our shape is in one piece we can now start adding some depth to it. Let’s start by creating the bottom shadowed part. Once again let’s select the shape (if it isn’t already) and duplicate it by Copying it (Command + C) then Pasting in Front (Command + F). Repeat this Copy and Paste process a second time so we should have three shapes sitting one on top of the other. With the top most shape selected we will nudge it using the arrows on your keyboard up two pixels. After it’s been nudged we’ll select the shape below using the Selection Tool (V). While both shapes are selected let’s visit the Pathfinder panel once again (Window > Pathfinder) and this time select the second option under Shape Modes which will subtract the top shape from the shape below leaving you with a sliver of the previous shape.
With this sliver selected let’s remove the gradient and Drop Shadow then change its Blending Mode to Multiply and Opacity to 45% using the Transparency window (Window > Transparency).
Now we’ll make the highlight for the band. Let’s select the large band shape using the Selection Tool (V) and duplicate it by Copying it (Command + C) then Pasting in Front (Command + F). Repeat this Copy and Paste process a second time. With the Selection Tool (V) enabled and the top most shape selected we’ll nudge the shape using the arrows on your keyboard. Holding the Shift key on your keyboard press the left arrow twice to move the shape over 20 pixels quickly. Then release Shift and press the down arrow 5 times to nudge it down 5 times. Once the top shape is in place we can press the shift key again then click the second band shape and using the Pathfinder panel (Window > Pathfinder) we’ll select the second option under Shape Modes which will subtract the top shape from the shape below.
This will leave us with two shapes which we’ll need to rectify. Our goal is to keep the larger shape so let’s Ungroup the shapes (Object > Ungroup). Once ungrouped we’ll need to select the smaller shape we no longer want then press the delete key on your keyboard to remove that shape. After the smaller shape has been removed we will change larger shape’s color as outlined below and also its Blending Mode to Screen and Opacity to 10% using the Transparency window (Window > Transparency). Be sure to remove the gradient and drop shadow.
Now that we have the band pretty much done we’ll add our text. This can be anything you like but for this tutorial we’ll be using the text "• NEW •". Select your Type Tool (T) and click someone below the band then type your text. Once completed we’ll add a blue color and an extra gradient overlay using the Appearance panel (Window > Appearance) and set the Blending Mode to Multiple and Opacity to 60%. We’ll also be adding a drop shadow in the Appearance panel as outlined below.
Once you have it set up like the screenshots below you can enable the Selection Tool (V) then move the text to the center of the band. With pixel snapping enabled this should be fairly easy to find.
With the Selection Tool (V) still enabled we can click and drag over all our objects to select them all. Once selected if you move your mouse to the edge of the bounding box for the object the mouse will change to a Rotate Tool. While pressing Shift on the keyboard click and drag the object so it rotates 45 degrees. It should look like it does below.
Now let’s create the wrapping elements behind the band that gives it a 3D wrap around feel. Select your Pen Tool (P) and create a tear drop shape as outlined below. We’ll also apply a gradient to this shape and select using the Selection Tool (V). While selected right click on the shape and under the Arrange menu choose Send to Back. You can adjust the exact location of the shape using the Selection Tool (V) until you feel comfortable. Because of pixel snapping this should be easy.
With the tear drop shape still selected we can Copy it (Command + C) then Paste it (Command + V) anywhere on the board. We’ll then rotate it again by bringing the mouse to the end of the bounding box and while holding Shift rotate the object 90 degrees so the rounded end it at the bottom. Then right click the object and select Transform > Reflect and input the settings as outlined below.
We can then drag the object in to position at the bottom of the band shape so it lines up like the other tear drop only on the opposite end.
With the band done let’s select all the elements and Group (Object > Group) them together.
With the band complete we can make the image place holder. Let’s select the Rectangle Tool (M) and while holding the Shift key on your keyboard we’ll draw a perfect square that lines up with the teardrop shapes from the band itself. Be sure to use the grid to line up your shapes. Now let’s apply a gradient, a Drop Shadow, and a stroke using the Appearance panel as outlined below.
With the plain shape out of the way let’s make the highlight for the place holding. With the Selection Tool (V) enabled select the square shape and Copy it (Command + C) then Paste in Front (Command + F). We’ll then select the Ellipse Tool (L) and draw a large oval shape over the bottom portion of the square shape. Using the Selection Tool (V) press the shift key and select both the square and the oval shape. Then using the Pathfinder panel (Window > Pathfinder) we’ll select the second option under Shape Modes which will subtract the top shape from the shape below. We can now add a plain white opaque to 75% transparent gradient from the Appearance panel (Window > Appearance) and a Drop Shadow as outlined below.
Now with the Selection Tool (V) still enabled click the highlight and the place holder below and press Command + G on the keyboard to Group the two shapes together. Then right click on the grouped object and under the Arrange menu choose Send to Back.
Now that we have all our elements in place let’s duplicate them and work on some alternative colors
With the banner and place holder square selected we can Copy it (Command + C) then Paste it (Command + V), do this twice so there should be three different placeholders and banners on the page. You can drag them to the position you want them and stack them in any order you wish.
Once you have all three in place we can double click the band to enter the group isolation mode for that band. This will let you select the individual elements in that group without having to Ungroup them. Now let’s adjust the gradients and flat colors as outlined below.
Once you’ve adjusted the colors you can use the bread crumb feature that appeared at the top of the Illustrator window or you can double click anywhere in empty space around the shape you were working on to return to normal view. Here are the settings for the yellow version of the band.
Here are the settings for the red version of the band. Having a selection of colors ready to use can save time in the long run.
With your colors in place let’s finish up the composition by adding a nice textured background. With our Rectangle Tool (M) selected let’s hold the Shift key and drag a square so that it encompasses the entire artboard. Once created select the square using the Selection Tool (V) then right click and under the Arrange menu choose Send to Back. Once it’s in place behind your elements we’ll add a radial gradient and a Film Grain effect as outlined below.
You should now have some great looking rubber band corner treatments perfect to import to your next image showcase project.
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন