Follow this tutorial and learn how to create a set of glossy labels and also a rollover state. We will use multiple appearances and custom Art brushes to obtain the glossy look and when we are done we will analyze the Save for Web options. We will talk about settings and compare different file formats to get the best image for your web page. Many color variations await you so let's begin!
Step 1
First open a new web document. Take the Rectangle Tool (M), click anywhere on your artboard to open the Rectangle window and enter the dimensions shown. With this rectangle selected, go to Object menu > Path > Add Anchor Points. As a result you will get an extra point in the middle of each side. Now, select using the Direct Selection Tool (A) only the bottom point, go to Object menu > Transform > Move, under Vertical type minus 55 px and hit OK.
Step 2
Also using the Direct Selection Tool (A) and while pressing the Shift key select the two points indicated then go to File menu > Scripts > Round Any Corner. Run the script and select a 10 Radius. If you haven't yet installed this script, go here and get it.
Now, select the point from the tip and run the script again. This time select a 15 Radius.
Step 3
Fill the label-shape with the linear gradient shown and change the angle to minus 90 degrees. Having this fill attribute selected in the Appearance Panel, press the Duplicate Selected Item icon at the bottom and you fill get a second fill. Replace the blue gradient with a pattern called Mezzotint Dot that you can find in the Swatch Libraries menu under Patterns > Basic Graphics > Basic Graphics_Textures. Set the pattern to Screen and reduce the Opacity to 70%.
Step 4
Next, select a blue stroke then go to Effect menu > Path > Offset Path and apply a minus 7 px Offset. In the Stroke Panel check the Dashed Line option and select a 5 pt dash.
Add another stroke by pressing the Duplicate Selected Item icon at the bottom of the Appearance Panel and change the color from blue to white. The dash and the offset values remain the same. Go to Effect menu > Distort & Transform > Transform and in the Move section under Horizontal select minus 1 px. Change the Blending mode to Soft Light but only for this white stroke.
Step 5
Now let's create a new Art brush. Take the Ellipse Tool (L), click anywhere on your artboard to open the Ellipse window and enter the dimensions shown. Use the Direct Selection Tool (A) to select only the points from the left and right of this ellipse and click the Convert selected anchor points to corner option. Select the resulting shape then go to Object menu > Path > Offset Path and apply a minus 0.7 px Offset to obtain a smaller shape in the middle.
Both shapes are filled with white. Reduce the Opacity for the bigger shape to 0 % then select them both and go to Object menu > Blend > Blend Options. There, select 25 Specified Steps and hit OK then go back to Object menu > Blend > Make. Drag the resulting Blend group into the Brushes Panel and choose New Art Brush.
Step 6
Copy and Paste in front the label-shape, remove the gradient fill and just give it a stroke. We need to cut this shape therefore take the Scissors Tool (C) and click on the indicated points. Keep only the three paths (black, red and purple) and delete the other segments. Stroke these paths with the Art brush saved at the previous step then set the Stroke weights as indicated. Change the Blending mode to Overlay for all three.
Step 7
Now, let's add the shadow. Duplicate the gradient fill then change the color to black. With this attribute selected, go to Effect menu > Warp and apply the Inflate effect to make the top wider (image 1). Next, go to Effect menu > Blur > Gaussian Blur and apply a 6 px Radius (image 2) then go to Effect menu > Distort & Transform > Transform. Choose to move this black fill minus 5 px vertically then hit OK (3) and set the Blending mode to Soft Light (4).
Here are the settings for the Inflate and Transform effects:
Step 8
At this step we will mask the top of the label. Take the Rectangle Tool (M) and draw a rectangle over the label as in the image. Now, select both shapes (rectangle + label) and go to Object menu > Clipping Mask > Make.
Step 9
Next, take the Ellipse Tool (L) and draw two ellipses having the dimensions shown. Make sure they are centered then put them at the top of the label. The left and right anchor points of the ellipses should be aligned with the rectangle used to mask earlier. Both ellipses are filled with black just that the bigger one has the opacity set to 0 %. Select them then go to Object menu > Blend > Blend Options and select 30 Specified Steps. Afterwards, go back to Object menu > Blend and choose Make. The resulting Blend group should be behind the label.
We need to make another mask. Draw with the Rectangle Tool (M) a rectangle as the black one from below and send it behind the label but in front of the Blend group. Before you continue, align it at the top with the other rectangle used earlier. Now, select the Blend group and this rectangle and go to Object menu > Clipping Mask > Make.
Step 10
Take the Pen Tool (P) or the Line Segment Tool (\) and draw a straight path exactly on the top edge of the label like below. Stroke it with the Art brush saved at step 5 and set the weight to 0.25 pt. Reduce the Opacity to 80 %.
Step 11
Draw another straight path over the label and stroke it with an Art brush called Dry Brush 5 that you can find in the Brush Libraries menu under Artistic > Artistic_Paintbrush. Set the Stroke weight to 1.5 pt then select Expand Appearance and Ungroup from the Object menu. Fill the resulting shape with the linear gradient shown and set the angle to 90 degrees.
Step 12
Copy and Paste in front the label-shape and before you continue delete all the existing appearances. Select the shape obtained at the previous step and also the copy of the label, that must be in front and go to Object menu > Clipping Mask > Make (image 1). In order to obtain the glossy look, change the Blending mode to Screen and reduce the Opacity to 70 % for the shape obtained at the previous step (image 2). If you think that the edges are too sharp you can apply a 1 px Gaussian Blur (image 3).
Step 13
Draw a small triangle then go to File menu > Scripts > Round Any Corner. Run the script and select a 5 Radius.
Put the triangle at the bottom of the label and select blue as the fill color (image 1). Go to Effect menu > Stylize and apply the Inner Glow effect (2) then apply the Drop Shadow effect (3) using the settings shown.
Step 14
The last thing to do is the text. Take the Type Tool (T) and write some text and use a font called Devinne Swash that you can find here. Select Expand from the Object menu to turn the text into shapes and keep the black fill. Go to Effect menu > Stylize and apply the Drop Shadow effect using the settings shown. Change the Blending mode to Overlay.
At this point the label is ready and we will continue with the rollover state.
Step 15
Make a copy of the label and we will only change a few things. Some of the shapes are hidden in the following images and we will talk about them at the right time. Let's focus on the label-shape and first change the gradient fill. Also change the shade of blue used for the first stroke.
Step 16
Now we will modify the shadow. Double click on Gaussian Blur in the Appearance Panel to open the Gaussian Blur window and reduce the Radius from 6 to 4 px. Next, double click on the Inflate effect applied to open the Warp Options window and change the Bend value from 5 to minus 5 %.
Step 17
Select the gradient fill in the Appearance Panel and press the Duplicate Selected Item icon at the bottom. As a result you will get another fill above. Keep the same gradient and go to Effect menu > Path > Offset Path and apply a minus 6.5 px Offset. Next, go to Effect menu > Stylize and apply the Inner Glow effect using the settings shown.
Step 18
Let's create a new Art brush similar to the one saved at step 5. Use the Ellipse Tool (L) to draw a 100 x 3 px flat ellipse then transform the left and right points from smooth to corner points using the Convert selected anchor points to corner option. Go to Object menu > Path > Offset Path and apply a minus 1.2 px Offset to obtain the smaller shape in the center. Reduce the Opacity for the bigger ellipse to 0 % then select them both and go to Object menu > Blend > Blend Options. Choose 25 Specified Steps then go back to Object menu > Blend > Make. Drag the resulting Blend group into the Brushes Panel and select New Art Brush.
Step 19
Now, stroke the three paths with the new Art brush. Set the weight to 0.25 pt and the Blending mode to Soft Light for all three.
Step 20
In this case we want the glossy shape to be less visible therefore reduce the Opacity from 70 to 25 %.
Step 21
Change the shade of blue used to fill the triangle then double click on the Drop Shadow effect applied in the Appearance Panel. In the window reduce the Opacity from 80 to 50 %. The Inner Glow effect remains the same.
Step 22
For the text, replace the black fill with blue then change the Blending mode from Overlay back to Normal and reduce the Opacity to 80 %.
Here is the final rollover state of the label:
Step 23
Now that everything is ready we will move on to saving them for the web. Take the Rectangle Tool (M) and draw a rectangle around the label then go to Object menu > Crop Area > Make. You will get the same result if you use the Crop Area Tool or the Artboard Tool (Shift+O).
Step 24
Go to File menu > Save for Web & Devices. This window offers four ways to compare the original label with the one we are going to optimize: Original, Optimized, 2-Up and 4-Up. I think the best is the 4-Up view because you can play with different settings, test four versions of the label then choose the best based on the file size and the download time. In the upper left are the tools, from the top right corner you can select another download speed and in the bottom right corner you have the option to preview the image in the default browser.
Step 25
Now let's change a few settings and compare. From the seven file formats available for saving we will try only JPEG, PNG-8 and PNG-24. The GIF format is most suitable for images with flat areas of color, rather than for those with gradient fills and details like these labels. I have tried and they didn't look too good.
The first format is JPEG. Even though the poorer the quality the smaller the file size, you don't have to lower the quality too much. For 60 % quality the file size is 7.77K but the label starts to not look so good and for maximum (100 % quality) the file size is 26.11K (!!). 70 % is just fine. If you check the Optimized option the file size reduction is very slight therefore we will skip it this time. Check Progressive if you want the image to load in passes.
If you know exactly which will be the background color, you can choose a Matte color. The background will be filled with the selected color, in this case pink and the image will act like a transparent GIF, but still using the millions of colors that JPEGs can display in our advantage. The file size will be a little larger though.
Step 26
Just for curiosity I tried the PNG-8 format and you can see below the different settings. If you choose Selective, Illustrator picks colors the eye can see but includes more color safe shades. The alternatives are: Perceptual (colors the eyes see the best) and Adaptive (colors that are actually in the image). Let's talk about Dither. This distributes pixels of different colors next to each other to make the eye believe that it sees more colors that there actually are in the image. The downside is that it increases the file size as you can see below, 0 % dither vs. 100 % dither. Interlaced is the equivalent of Progressive from the JPEG format. However none of the images look good so we will move on to the next format.
You will get a better image if you select a Matte color, in case you know exactly which will be the background color of the web page. Also select No Transparency Dither.
Step 27
By far the best result will be obtained with the PNG-24 format although the file size is quite large. Because of the shadow around the label you must check the Transparency option.
Step 28
At this point you can preview the label in a browser by pressing the icon shown at step 24. You will also get a HTML code that you can add to your web page.
Step 29
If you have decided on a particular format press the Save button, select Images Only and a destination folder then press Save again.
Step 30
Repeat this process for the rollover state of the label. In the image below you can see the three versions that I've chosen.
Step 31
This is the folder with the images saved and at this point you can use them as you wish.
Conclusion
As a bonus here are several color variations of the label. All you have to do is to change a few things like: the gradient fill for the label-shape, the dashed stroke color, the gradient for the glossy-shape and the fill color for the triangle. That's it!
This is the green label:
Here is the purple label:
the orange version…
red…
and yellow:
