Illustrator understanding the different types of files in the Adobe save for Web

Translate Request has too much data
Parameter name: request
Translate Request has too much data
Parameter name: request

The purpose of the Save for Web feature in Adobe Illustrator is to optimize graphics for use on a Web site or other screen display, such as a phone of tablet. The word "optimize" refers to the optimum balance between file size and quality. We want small file sizes so they’ll load quickly on a Web page, but we don’t want to sacrifice their appearance. Save for Web lets you preview how an optimized  vector graphic will look, so you can choose the best compromise.

In this article, I’ll go over the file formats available in Save for Web, and show you which formats are best suited for different kinds of artwork.

You access the Save for Web dialog under the File menu. Save for Web is almost an application in and of itself, and the dialog window takes up most of your screen.

The Save for Web interface, much smaller than it appears on your screen.

You can choose to preview your artwork in one of three ways. You can simply show the original alone. This seems rather useless, however, because you’ll probably want to see how the graphic will look once it’s optimized. You can show the optimized preview alone, or you can choose 2-Up, which will give you side-by-side previews. You can click on either pane to adjust its settings. In the image below, the original is on the left, and the optimized version (in this case, as a GIF) is on the right.

Use the 2-Up view to compare images side-by-side. Clicking on each pane lets you adjust the settings for that view.

You can adjust the size of the preview in the drop-down menu on the lower left, and you can also use familiar keyboard shortcuts like Command/Control-0 to fit the artwork in the window, or Command/Control-plus or minus to increase or decrease the magnification.

Clicking the Preview button will open the optimized graphic in your default browser. If you want to see how it looks in other browsers, you can add more by clicking the little globe icon next to the Preview button.

1. Set the view magnification here. 2. Click the little globe to add browsers for previewing.

One of the most important sections of the Save for Web interface is the file size. Under each preview is the file type and its respective size. So in the image below, the original EPS is on the left, with a file size of 2.44M. The optimized GIF is on the right, with a much smaller file size of about 39K. Since the goal of Save for Web is to find the ideal balance between size and quality, you’ll be looking at these numbers often.

GIF is one of the oldest and most-used formats on the Web. It’s ideal for images with areas of flat color, as in this example. The GIF color space is Indexed color. This allows you to specify an exact number of colors in the color table, so you can use only the ones you need, thereby reducing the overall file size.

The save for Web dialog has several GIF presets. Choose different settings and keep an eye on the image and the resulting file size. In the image below, I’ve used a preset that has 128 colors. As you can see, the image looks good and the file size is 37.72K.

A GIF with 128 colors

In the next example, I’ve chosen only 8 colors. You can see the file size is now 23.3K. It’s a significant savings, but the image is starting to lose quality. The edges are rough because there aren’t enough colors to fill in the transitions between each shape. Even though there are only five colors in the illustration — three shades of blue, yellow and white — Illustrator uses more colors in the anti-aliasing process so the edges and curves appear smooth.

A GIF with only 8 colors. Notice the rough edges.

GIF colors can be restricted to those that are considered "Web safe". This is not really a concern these days, now that monitors can display millions of colors, but there was a time when designers were advised to use only the 216 colors that were shared by Windows and Macintosh systems. So if you wanted to ensure your graphic looked the same on each platform, you would limit its colors to that palette. In the example below, I’ve used the Web Palette preset, and you can see how the light blue color has shifted to a greenish blue.

The colors here have been restricted to those that are “Web safe.”

A GIF can be black-and-white, and it uses something called dithering to simulate a continuous tone. You can choose different dithering methods, but they all have a decidedly 1980's look to them.

A black-and-white GIF uses dithering to simulate grayscale. Hello 1984.

GIFs support one level of transparency. This means each pixel is either solid or completely transparent – you wouldn’t use a GIF for an image with a soft shadow or transparent gradient.

GIF supports 1-bit transparency. It’s either on or off.

Next to the Transparency tick box you can choose a matte color. This will add a slight outline around the image in that color. So if you’re placing the GIF on a colored background, you can select that same color as the matte color. That way the transition between the graphic and the background will appear smooth.

Choosing a matte color that’s the same as your Web page background makes the edges appear smoother when the graphic is placed on that background. Here we’ve used a dark green matte color, and Illustrator adds a thin line of green pixels around the image.

You can choose to clip the image to the artboard, which will make the pixel dimensions of the saved graphic the same as the Illustrator artboard. Or you can choose to leave this box unchecked, which will clip the image to the bounds of the vector graphic. This is the setting you’ll probably use most of the time, since there’s no need for extra transparency around the image. The resulting file size will be smaller as well.

Un-checking Clip to Artboard clips the image to the bounds of the vector artwork.

In the Image Size section you can choose to reduce or enlarge the optimized graphic. The nomenclature is a bit ambiguous here. It’s not referring to the file size of the image in kilobytes, but the pixel dimensions, expressed as width and height.

This is where Illustrator has an advantage over a raster or pixel-based application like Photoshop. If you enlarge the image for optimized output, Illustrator uses the vector information in the file for the enlargement, and the resulting graphic is sharp and smooth. If you were to use Save for Web in Photoshop and try to enlarge a raster image, however, the enlarged artwork would look fuzzy.

Below the Image Size fields is a drop-down menu where you can select the method of optimization. If your graphic is text-heavy, you might choose Type Optimized. In the examples below, you can see the difference between the image that is optimized and one that has no optimization applied.

Based on the image, you can choose Art Optimization, or Type Optimization.
Most of the time, you’re going to want to optimize your Web graphics.

The Color Table contains swatches for each color that will be contained in the optimized graphic. You can actually double-click on a swatch and change its color. Here I’ve changed the yellow to pink. You can see the swatch is now half yellow and half pink in the Color Table, and when you hover over it, the tool tip gives you the RGB breakdown for the original and for the new color. This could be useful if you are saving a series of the same image, and you want one element to be a different color in each version. By replacing the color in Save for Web, you don’t have to alter the original vector.

Replacing a single color swatch when saving for Web can be more efficient than changing the vector artwork.

Below the Color Table is a series of icons that let you further adjust the color. When you select a swatch, you can then make it transparent, confine it to a Web safe color, lock it or delete it. A diamond inside a color swatch indicates a Web safe color, and when you hover over it, the hexadecimal code is displayed.

1. Make the selected swatch transparent. 2. Restrict the select swatch to a Web safe color. 3. Lock the select swatch so it can’t be deleted or changed. 4. Add a new swatch. 5. Delete the selected swatch.

There are a few more settings and practices you can use with GIFs. For example, you can choose to interlace the GIF, which will load the image in multiple passes in a browser. This method was developed back in the days when most people were on slow dial-up connections. An interlaced graphic appears to load faster than it actually does. There’s not much reason to use it today, especially with a relatively small file like a GIF. The other options in the GIF settings are either highly specialized, or somewhat outmoded, so I won’t spend more time on those. Let’s move on to the other formats!

The PNG (some people say "P-N-G" and others pronounce it "ping") format is often a better alternative to GIF. PNG-8 is similar to GIF in that it uses 256 colors, supports 1-bit transparency, and can use dithering. The "8" means that this is an 8-bit image. The main difference between the two is the way in which they compress the image information. GIF uses a "lossy" method, which means some of the data is discarded (or "lost") to achieve a smaller file size. The PNG method is lossless, but because of its compression algorithm, the resulting files size is often significantly smaller than a GIF. So why would you even use a GIF, if PNG is better? Well, not all browsers support the PNG format (I’m looking at you, Internet Explorer 6!). But as more people upgrade to newer browsers, this isn’t as much of an issue. So go ahead and try PNG-8 on images that would normally call for a GIF.  Most of the options for PNG-8 are the same as those for GIF in the previous section.

JPEG was originally developed to compress photos, and thus is best suited for vectors with continuous tones. JPEGs are 24-bit, and thus support well over 16 million colors. JPEG compression is lossy, and the image will degrade if you try to compress it too much. In the image below, you can start to see blocky JPEG "artifacts," which are undesirable. Choose a higher quality setting until you get a better-looking graphic with an acceptable file size.

JPEG uses “lossy” compression to reduce the file size. Too much can make the artwork look bad.

You can choose to load the image in multiple passes by selecting Progressive, and you can blur the image to mitigate some of the artifacts. Neither of these methods is ideal, nor actually necessary. They are throwbacks to the days of dial-up connections and slower machines.

As with GIF and PNG-8, you can specify a pixel dimension in the Image Size field, select the optimization method, and choose whether to clip the image to the artboard. There is no color table, because JPEGs are in RGB mode, not Indexed color.

JPEG is well-suited for images with continuous tone, but it is not so great at graphics with larger areas of flat color. In the example below, the JPEG is on the right. Even at the highest quality setting, it looks worse than the GIF, and is showing some artifacts.

JPEG is not well-suited to images with broad areas of flat color. On the right, you can see JPEG artifacts. GIF or PNG would be a better choice for this artwork.

PNG-24 is, as the name suggests, a 24-bit image. In some ways, it combines the best of both worlds of GIF and JPEG, and is a superior format. Like JPEG, it can support millions of colors. PNG-24 can also contain alpha transparency, so it can be used for graphics that have blurred edges and transparent shadows. All those colors and transparency come with a price, however, in a larger file size. In the example below, you can see that a JPEG saved on the high setting is almost 22K, whereas the PNG is about 95K. But the transparency allows you to place the PNG-24 graphic on a patterned or textured background. So if you need that kind of flexibility, PNG-24 is the way to go.

PNG-24 supports full alpha transparency, at a price: the file size is much larger.
A PNG-24 image, with full alpha transparency, placed on a textured background.

I hope you have a better understanding of the file formats in Illustrator’s Save for Web feature. Each format has its advantages and disadvantages, but with some careful testing, you can find the best settings for your artwork. This is a powerful tool and can make your Web work flow much easier and faster. Once you determine the ideal settings for your images, you can save them as a custom preset. Then you can batch process entire folders full of similar images in no time.

Vector graphics in this article were purchased from GraphicRiver: Janitor vector, pumpkin vector.

View the original article here

How to draw different body types for men and women

Translate Request has too much data
Parameter name: request
Translate Request has too much data
Parameter name: request

Last month we talked about how to draw different expressions and emotions. In this tutorial I will be showing you useful guidelines you can follow to draw common body types for both males and females. We will be using simple shapes to draw the body type out over it, such as rectangles, triangles and irregular quadrilaterals. We will start out with six female body types and then follow that up with six male body types.

Before we begin drawing out the body types, we will start by creating a base that we’ll flesh out with the body types in the following steps.

Start by drawing a head, a simple oval with slight indents around the jaw area to define it a bit more. The great thing in illustrator is that you can add anchor points, so if you add two that are roughly at the top edge of the jawline, you’ll only need to push them slightly inwards to define the jaw indent.

Now duplicate this head eight times and then place them in a straight line underneath the original head shape you drew. Lookit! You just figured out the height of your character with that. Generally the size of the human head can fit eight times (head excluded) in the human body, sometimes seven is the better number, but feet are excluded in that case. The last one (where the feet would be) is the more annoying one. Say the character is jumping and has her/his feet point downwards, you’d use the entire head to define the length, but, if she/he’s standing, feet flat on the ground, cut the head in half to define the height.

To give you more than a straight line to work with, duplicate the second head at the top (neck area) twice and place them on either side of the second head. This will define the shoulder width, but to make it a bit easier as to figure out where they should start, lower the two duplicates down so that the top edge of them aligns with the middle of that second head (draw a line to cut it in two if needed). This didn’t just help define the height and width of the shoulders, but the head shapes we’re using has just created the shoulder curve that connects the arms for you.

To finish it off, we’re going to shape out a triangle to define the ribcage. Using the shoulder width line we just created, draw two diagonal lines connecting back with one another by the middle of the fifth head. We’ve got a great reference for the ribcage.

Using the diagonal lines of the ribcage triangle, you can figure out an approximate arm length with it. So, draw a line over one of either diagonal ribcage lines and then tweak them so they bow outwards and connect the top point with the shoulder curve, repeat that on the other side and once that complete, you now have the arm lengths (hands aren’t included).

Fancy part is, you use that exact line to define the thighs. So, duplicate the arm line again and attach your thighs. To judge where they should start, cut the fourth head in half and use the center line to attach the top points of the thigh lines to it. Duplicate those lines and attach them to the bottom points of the thigh lines. Since they bow outwards, they won’t be very useful as lower leg references, we’d need straighter lines. But, the bowed lines will help us judge how long the straight line should be, so draw a straight line from the top point to bottom that is the same length as the bowed lines and then delete the bowed ones!

Tips on hands and feet: A hand is roughly the same length as your face and that is almost applicable on the feet as well. A hand is generally the same size as your foot without the toes. So if you draw a straight line through one of the heads that is the same height and then attach them to the arm lines, you’ll have a good base for the hands. Since the feet are presented flat on the ground in this base, they were included in the lower leg lines. With that done, we can start shaping out body types!

I’ll be ignoring the legs and arms, focusing on the upper body only since those sort of speak for themselves. Since this body type essentially has the least flesh, we want to use sharp edged shapes to help define it as the bones show more prominently. We’ll use two thin horizontally placed rectangles to help us draw the hips and ribcage/chest area and then a wider and longer rectangle set vertically between the two horizontal ones (see screenshot). Once you’ve drawn this out, we’re going to fit it into our body base. You want the lower edge of the bottom rectangle to touch the crotch line, and the top edge of the top rectangle to cut through the middle of the shoulder area. Now you have an approximate height for the breasts and hip width and the rectangle in the middle will serve as reference to shape out the stomach.

You can duplicate the body base with the rectangles into a layer and then lower the opacity on it so you can draw out a rough of the body on top of it. This would be a rough that will then help you when you draw on top of it again to create your final version of the body type.

There are several things that can help when drawing on top of the rectangles and body base. You want to make the hips pointy/sharp edged and the line that connects hip to thigh should curve inwards before bowing out with the thigh, this will help define the sharp edged hips a little better. In the slim body type the ribcage usually is very present as well, if you want to take it further, you can go as far as drawing three small lines right below the breasts to have the bones showing through the flesh. Much like the hips, the shoulders would be sharp edged, same goes for elbows and knees. Otherwise, it’s rare to see a slim person with voluptuous breasts, so following that, you want to make sure the outer line of the breasts is within the chest outline.

This body type in the female series is one of those rare ones where we re-use the triangular shape created in the base to define the ribcage. When you look at athletic women, you’ll notice that their hips are very narrow compared to the shoulder width, this is due to muscles building up and showing more prominently in the shoulders and arms. Basically, that curve you usually will find starts around the waist and hip area, starts higher in this case. It starts right below the ribcage and instead of curving inwards to define the waist, the line is straighter. So while usually it’s a good plan to draw rounded/curved/smooth lines on a female figure, with the athletic body type we want to use sharper edges (as we did with the slim figure) but also straight lines.

For this figure we’re going to use irregular quadrilaterals (see screenshot). Start by drawing the top one, making the bottom edge line shorter than the top and then duplicate it, mirror it vertically and place the duplicate underneath the first. Selecting both of these, we’ll place them on top of the skeleton, making sure the top line of the top irregular quadrilateral aligns with the shoulders. Now we want to draw the body on top of this, following the shape these two shapes give us. Some things to keep in mind while doing this is that in the toned body type, the shoulder width is usually the same as the hips and while the waist is of course less wide, there shouldn’t be a flagrant indent. Unlike the previous two body types, the outer line of the breasts touches the ribcage/chest outline rather than being drawn within. And what also makes it different is that here we don’t want to draw any sharp edges or very straight lines, as usually toned figures have smooth muscles.

Before you duplicate your reference and draw the clean version on top of it, there’s another thing we can do to define this body type more clearly. Allow the waist to be longer than the other body types, so select the entire figure and then stretch it upwards (this should work perfectly since you shouldn’t stretch it so much that it’ll disproportion the body). Otherwise you can also detach the upper body lines from the lower body and then add more length manually in the waist itself by drawing longer lines.

Pears are pretty easy to draw, but if you have issues shaping it out right, don’t hesitate to use a stock image to help you out. This figure is a lot of fun because it’s so obviously different from the others. Once you’ve drawn the pear and placed it on top of the skeleton (the top of the pear should align with the shoulder/collarbone height) you’ll notice that the top of the pear is way thinner than the original ribcage we drew. That’s fine, it’s why we’re using these shapes to help guide us through it. As you sketch out this body type, you don’t want to make the chest area as thin as the top of the pear nor do you want to make it as wide as the original skeleton ribcage width, instead, aim for the middle point between the skeleton ribcage and the outline of the top of the pear. But, you want to follow the outline of the bottom part of the pear just as it is. In this body type the hip width is wider than the shoulders and like the toned figure, the breast outline touches the chest lines.

The other different thing about this body type compared to the previous is that we want to define a tummy by drawing curved lines within the waist lines. Once you’ve got an approximate sketch of the body type, duplicate and clean it up! If needed, like the toned body type, you can allow more length in the waist.

So here we want to use a guitar as a shape to help us out with this body type! This is also often referred to as an hourglass figure. You can also use the number 8 if you have trouble drawing a guitar, but if I chose not to use the number 8 as the reference it’s because the guitar has the perfect curve to help us draw the waist line. So, once you’ve drawn the guitar, or the number 8 with some space in between the top and bottom circle (to allow for a waist), onto the skeleton these are the things you’ll want to keep in mind as you shape out the body type. Unlike the pear and toned figure, the guitar has a short waist, but the lines we’ll draw to define it, is very curved (inwards), it’s okay to exaggerate it. By drawing a shorter waist, you’ll find that the breasts and bottom of the body type will appear fuller. Unlike the pear, the guitar figure’s shoulders and hips are at the exact same width and the breast outline surpasses the chest outline. Since this is a curvy figure, we want to make sure all lines are smooth and rounded, avoiding too much muscle definition, and we want to hint to a tummy as well like we did with the pear figure.

To create this body type, we’ll use the irregular quadrilaterals we made for the toned body type and the guitar for the guitar body type. The guitar shape will help us draw the voluptuous shape of the body type, whereas the irregular quadrilaterals will help us with the waist outline. Once you’ve placed both shapes onto the skeleton (see screenshot), start by shaping the figure out. Like the guitar figure, the shoulders and hips are the same width, the breasts outline surpasses that of the chest outline and the bottom is very rounded and smooth. Then, unlike the guitar figure, the waist is longer and we want to break the instant connection from waist to bottom by allowing another curve to show (top edge line of the bottom irregular quadrilateral), which will help define the love handles, voluptuous bottom and rounded tummy.

To finish it off, make sure to draw lines to define the tummy, allowing them to be close to the waist/hip/thigh outlines. And that’s it for the ladies, let’s check out the dudes.

While most of the muscle and tummy definition in the female figures apply to the male figures, the triangular shape comes back in every male body type and even though we’ll soften up some lines and curves with several figures, we want to make sure the lines are straight/sharp. It’s why we’ll use rectangles an squares to help us shape out these body types along with the triangle.

For the slim figure we will re-use the triangular shape we made for the skeleton and on top of that we’ll apply some rectangles an squares to help us further. The top of the triangle should align with the shoulders, and the bottom point should align with the crotch. Now for the square placement. Draw a square that is as wide as the top line of the triangle (hold down shift+alt so it becomes a perfect square and doesn’t deform). Duplicate this square and place it right underneath the top one and then proceed in drawing a rectangle that is as wide as the squares but only half the size in the squares height. Once that done, delete the middle square, select the top square and bottom rectangle and place them onto your skeleton by aligning the top line of the square with the top line of the triangle.

The square is what will help you define the width of the chest and the rectangle will help you with the hip width. The triangle then comes in where it concerns the ribcage and waist. As we did with the slim female figure, we want to make sure all edges in this body type are sharp and pointy. To help differentiate the ribcage from the waist, you can draw a small indent that defines the bottom edge of the ribcage. The triangle lines will help you with the width of the ribcage and the waist, but make sure to curve them back outwards to connect the lines back with the hips that you drew with aid from the rectangle.

Since this is a slim figure, we can accentuate certain areas, such as the sternum which would be located at the bottom line of the square. You can draw an upside down V to create the sternum. And to accentuate the connection from lower tummy to crotch, you can use the triangle lines to help you draw the V shape that area creates. If you want to take it further, you can draw three small lines right below the chest (below the bottom line of the square) to show the ribs.

For the muscular body type we’ll use the triangle again (as we will in each male body type) and create two rectangles. You can use the rectangle made for the slim figure in the previous step. After you’ve duplicated the rectangle, ready to use on the muscular body type, grab any corner and turn it so that it’s standing at a vertical angle rather than a horizontal. Use the bottom point of the triangle to define where the bottom edge line of the rectangle will go, and center it on top of that. Once that complete, duplicate the rectangle, turn it back at a horizontal angle and place it in the center of your vertical rectangle (creating a “+” sign).

The top part of the triangle is what will help you draw the chest and ribcage outline, and the horizontal rectangle is what will help you draw the square shaped stomach (the bottom line of that rectangle is where the hips would start). The vertical rectangle is the one that will show where the abs will go.

Other things you want to take care of in this body type is to curve the shoulder area upwards right before they connect back with the arms. The V line shown at the bottom tummy to crotch area can almost be connected to the hips. It’ll allow the muscled tummy to stand out more. Then to finish it off, you can draw some straight lines to define the chest, giving it a “chiseled” look.

The Athletic figure is exactly the same as the muscular one. So duplicate the muscular figure and then delete the outline of the abs/6pack. To complete this figure, lessen the curve in the shoulder area to remove some muscle definition there. If you find the ribcage/chest to be too large, thin it out some by moving those lines slightly inwards!

Here we will start with the skeleton again, so, placing the triangle on it as we did with every male figure we’re going to add a shape we actually used on a the toned female figure in the earlier steps. Duplicate the bottom irregular quadrilateral and place it so that the bottom edge aligns with the bottom point of the triangle. I find this figure the easiest one since the triangle is the exact outline for the chest, ribcage and waist and the irregular quadrilateral is the exact outline you want to follow to create the starting point of the hips that then connect to the top of the thighs.

Funnily enough, the V located at the lower tummy/crotch area is very defined in this body type, but, the abs aren’t and you want to lessen definition in the chest are as well to make it appear smoother.

Duplicate the toned make figure. Then duplicate the rectangle we created for the slim figure and place it so that the bottom line of the rectangle aligns with the starting point of the hips. The only thing you’ll need to change here is the outline that defines the waist. Instead of it instantly connecting the the hips and moving down to shape out the thighs, we want to create a slight rounded curve bending outwards before rounding back in to connect back with the hips. This will give a voluptuous aspect to the tummy! Remove the V line created for the toned body figure and instead of defining the chest with vertical lines, we’re going to create horizontal ones that show where the bottom edge of the chest is. You can curve them slightly, just like we did for the tummy, to show that area is more voluptuous.

Here we can use the smooth figure as a starting point. Duplicate it and then lets start with the shoulders. So far, we haven’t really touched them, besides curving them up to show more muscle. In this case we’re going to remove the indent that defines the connection between neck and shoulder and allow them to connect together in one smooth line. Next is the chest line, simply select the ones you made for the smooth figure, and lower them just a bit to show there is more volume.

Then, to complete this body type, we want to shape out the tummy. You can draw an oval to help you, the top curve should tough the chest lines whereas the bottom curve should align approximately to the starting point of the thighs. Then, the outer lines should be slightly wider than hip and shoulder width as in the voluptuous male body type, the tummy is wider than hip and shoulder.

I hope this was helpful and can be useful for when you create your next vector. Now that you’re able to draw a variety of body types, perhaps try out more dynamic shapes to create movement and action in your drawings. Check out the tutorials about Line of Action and the Two Can technique to find out more on this. Happy creating!

View the original article here