Tutorial Photoshop 6.0 & Image Ready

Isa

Description

photoshop 6.0 & Image Readybasic technics and toolsENAWA Training in web and background MaterialBelgrade19-23 january, 2002http://btraining.free.frHere are some notes on what we have learn during thet h ree days training in photoshop and image r e a d y, p l u ssome extra tips and tricks for later practices.Just remember working on your site about the power ofimages!! and how much they can vehicule content andethics as well, think content! think message! there is so much out there on the net already... keep itas simple as possible,and try to have your message be heardand carried through first and foremost.i will be happy to review and critic your design work inprogress,if you plan to continue on with web design.Soplease do not hesitate to contact me.it was a unique experience for me to be with you all... a n di thank you all so very much. i am deeply touched.I wish you the best and hope to see you again.Sincerely,isa [e-mail]://www.penelopes.orgA DJUSTING IMAGES AND SHARPENINGL EVELSLevels is another first-step option for image adjustment. If Auto Levels is not right for your image, try Levels.Levels gives you much more control over the adjustments.An example of when to use this option is when youencounter an image where the colors are so dark or light that many of the mid-tones are not there.Go to the Image menu - Drag down to Adjust, over and down to Levels.You are presented with the LevelsControl window.In the ...

Informations

• Publié par: Sazef
• Nombre de lectures: 30
• Langue: English

Extrait

photoshop 6.0 & Image Ready

basic technics and tools ENAWA Trainingin web and background Material Belgrade 19-23 january,2002 http://btraining.free.fr

Here are some notes on what we have learn during the theredaystraininginphotoshopandimageread,yplus some extra tips and tricks for later practices.

Just remember working on your site about the power of images!! and how much they can vehicule content and ethics as well,think content! think message! there is so much out there on the netalready... keep it as simple as possible,and try to have your message be heard and carried through first and foremost.

i will be happy to review and critic your design work in progress, ifyou plan to continue on with web design.So please do not hesitate to contact me. it was a unique experience for me to be with you all...a n d i thank you all so very much.i am deeply touched. I wish you the best and hope to see you again.

Sincerely, isa massu

[e-mail] http://www.penelopes.org

DJUSTING IMAGESAND SHARPENING

L EVELS Levels is another first-step option for image adjustment.If Auto Levels is not right for your image, try Levels. Levels gives you much more control over the adjustments.An example of when to use this option is when you encounter an image where the colors are so dark or light that many of the mid-tones are not there. Go to the Image menu - Drag down toAdjust, overand down to Levels.You are presented with the Levels Control window. In the controls window,you will find a graph illustrating the dark,light, andmid-tone area of the image.Below you will see three triangle shaped sliders to control each area of the image.These controls allow ou to add or subtract more light,dark, andmid-tones to your image. Be sure to check (so a check mark appears) the preview box so you will see the changes on your screen as ou make adjustments. Notice how the dark areas get filled in and turn darker.Notice how the light areas get brighter,but the grada- ound is less smooth. ou move the Dark and Light sliders,the mid-tones move in unison but can be adjusted independently ou move the mid-tone slider to left into the dark areas,the mid-tones get lighter.The backgound gradatio is becoming very course. ou move the mid-tone slider to the right you are adding more dark areas to the middle tones.In this case, removing the detail in the stone and very little gradation in the background. eate an image with areas that are not to dark or too light and too have detail in the mid-

SHARPENING IMAGES A little goes a long way.You want to make your image pop,not get sharpened away to high-contrast lines,creating a posterized effect. Photoshop offers you a couple of options in their sharpening tools.One option looks at the image and applies a filter to the entire image.Another applies the effect to what it thinks are the edges of objects in the image.A more sophisticated filter called Unshape Mask,presents you with a controls window,giving you greater control over the filter's effects.Which filter you use will depend on the image you're working with.We'll start with the simplest options first.

Unsharp Mask Scanners will often produce an image that is too soft.This causes the image to be little on the blurry side.In photographic terms this type of image is said to have an Unsharp Mask.Rescaling or reducing an image can also create an image with an unsharp mask. Photoshop supplies a filter called Unsharp Mask which is used to sharpen an image with an unsharp mask.In essence the filter sharpens the entire image,but gives you greater control over the sharpening process. Go to the Filters Menu, drag down to sharpen and over to Unsharp Mask. ol window appears. When the controls window appears,it will automatically apply the last setting used for the filter.This may or may not work with your image.In most cases,you will want to make adjusments. If you move,by clicking and holding the mouse down in the filters preview window,your mouse icon turns into a hand.The preview effects of the filter return to its original blurry state. In this example,notice how the image in the preview window appears softer than the sharpened image below w. This will help you to make the proper adjustments. Keep making the adjustment until the image is sharpened without any blaring highlights around the edges of . uch sharpening is appliedRadius = how many or what portions of the pixels are affected eshold = the brightness and contrast of the effect. 1 kENAWA Trainin

OOLS

Let's start with the basic tools.The marquee tool is the simplest and the most useful.If you click and hold,you'll see that it's really four tools in one:You can select a rectangle (if you hold down the Shift key,it'll give you a perfect square);go for an oval (the Shift key will make it a circle);select a single row of pixels,or a single column.But usually you'll want a more complex selection than is provided by these simple shapes. You can add and subtract from selected areas.To add to a selec- tion, holddown the Shift key and make another selection;your first selection will be added to your second one.To subtract,use the Alt key to make a selection and your second selection will be subtracted from your By mixing and matching,adding and subtracting,you can get some very complex shapes.

The lasso tool allows you to draw selection paths freehand with a mouse.If you click and hold, you can change the tool so that you can draw polygons.Again, youcan add and subtract to these selections by using the Shift key and theAlt key,respectively.This is a great tool for detail work. You can zoom way in with the magnifying glass tool (hit the space bar with the Control key to zoom in,or the space bar and theAlt key to zoom out) to add a few pixels to your selection here, delete a few there.

Magic Wand (images above) the magic wand,will select all the same-color or similarly colored ad- els. Double-clickon the magic wand tool and you can change its color sensitivity.So if you set the to- lerance to 0,you will only select adjacent pixels that are exactly the same color;the higher the number you the less similar the adjacent pixels need to be in order to be selected.You can also use the Shift and theAlt keys to add and subtract to these selections.

Click on the Path tool,which should give you a pen nib cursor.Sets the first point on your path by clicking on the edge of the selection you want to make.Don't worry if it's not perfect,we'll go back and clean it up later.For now,simply continue to click on points around the objet selected. Keep going until you click on the point you started with (the pen nib will get a little circle next to it when you roll over that first point). Go over to your layers window,click on Paths,then selectWork path.Click on the arrow in the top right-hand side of that window,and then click Save path. our path so you can distinguish it from any other paths you may create la- ve it.Now let's tidy up our path.we haventÕ gone through this in the session but i find it handy. Click and hold on the pen nib (in the tool bar),and select the one with the "+" next to it.This allows you to edit and add to the points of your path.To get the precision you need, Zoom In on your image (to the point where the image gets lost).Make any adjustments you need (the pen nib turns into an arrow when you roll it over an existing point) until each point is exactly where you want it to be.To accommodate,say, aparticularly curvaceous object,you may need to add an additional point between two existing points.Off of that new middle point,you'll notice bars at either side - play around with these bars,pulling and moving them until your line is suitably warped to fit the contours of the object.

21

ENAWA Trainin

k

try to set as little type as possible in Photoshop (that's what HTML is for!).But most of the time have to integrate my type with an image, and Photoshop just can't be avoided,or create a logo or banner with it. Whenever you use the text tool,a separate layer is created automatically,ma- ing it next to impossible to stick two things in one layer unless you deliberately merge the layers ogether yourself.

To get started,click on the text tool.You'll see two tool options.The first option is the default tool,which you'll use all the time - it puts your text in a new layer,using the foreground color (from your tool palette).Select the text tool that meets your needs,(you can have type running left to write or top to bottom) and you'll get a cursor.Click on your open file - just about where you want to set the type - and you'll get a popup menu that lets you specify the attributes of your text. Start by selecting the font then indicate the size of the letter. You can specify type size in two ways:by points,which is a print standard (just remember that there are 72 points to the inch),or pixels.If you use pixels, rememberthat the size of the type will be relative to the resolu- If the resolution is 72 pixels to the inch,and you make a letter 72 pixels high,it'll be an inch hig file; ifthe file resolution is 144 pixels per inch,that same 72-pixel-high letter will only be half an

which specifies how much vertical space you want between lines of text.A good place to start is with the same number you have set for text size.The last field is for letter spacing,which is the space between each letter - try "0" here for starters. ou can also set the type alignment and select a variety of different type styles.Alignment is pretty simple:Line the right,or center it.The style is pretty simple too.Make your type bold,underlined, or italic. justlike a word processing software.

COLOR MODE

Make sure your image is in the right format:RGB, themost flexible of modes.If you try to resize a file that's in e a GIF),you'll get really chunky results (JPEGs,however, arealready in RGB).Also, some functionality will be grayed out unless you're in RGB (or CMYK, but that's for print).To change your ima- ge over to RGB mode,select Mode from the Image pulldown menu and choose RGB Color. o resize,go back to the Image pulldown and select Image Size.Enter in the size you want (either the pixel di- mension or in inches - make sure the resolution box reads "72") and click OK. Remember resolution for the web is 72dpi at all time.

3

ENAWA Trainin

k

LAYERS

So you've got all your type and pictures on separate layers and now you're ready to put everything together. First the basic .You can only edit the layer you have selected(indicated by the little paintbrush icon).You can make layers visible and invisible by clicking on the eyeball next to the layer name.If you want,you can link e layers together,which is useful if you're using the "move" tool to reposition more than one thing at a time.To link layers,click in the "empty" box (where the paintbrush icon would be if the layer were selec- and a chain icon will appear,indicating this layer is now linked to the selected layer. the top of the layers palette,you'll find the opacity slider.This lets you make a layer translucent,which is a greatfeateu.rUseittoghostbacktypeorlayerimagesoveroneanother.Theslidergoesfrom1percent(barely ible)to99percent(barelytranslucent).

Next to the opacity slider is a pulldown menu that defaults to "normal."Though normal may be the ideal for many, goahead and pull it down anyway.Below hides all the amazing compositing controls.As with filters,this i an area where experimentation is really the only way to see how powerful these controls can be.Use them in conjunction with the opacity slider and you can create some really interesting effects.My favorites of the bun- ch are "multiple" and "divide."These settings give you a color that's the direct result of a mathematical multipli cation or division involving the color in your working layer and the layers below it.The results can be quite the pleasant surprise.

CREATING AN ANIMATION AND A ROLL OVER in image ready In ImageReady,all animating or roll over functions are controlled by the Animation or roll overtool palette (Window:Show Animation/rollover). youcan reposition layers,change their transparency,or turn them off, but any other change you make will be reflected in all the other frames. y clicking on theicon. eachtime you make a new frame you have to always remenber it will show whatever layer is on the top,therefore visible. Choose Set Delay for all frames from theAnimation pulldown and enter the time frame you want for it.For Play Options,specify that you want the animation to play once.Click the playbutton to preview the anima- Save your work. It is a very similar procedure for roll overs.Just remember in the second frame to set either for over/click/down/up, whichwill affect how the button react to the mouse.Test your work in a navigator before optimizing your file.

4

ENAWA Trainin

OPTIMIZATION - GIF OVER JPEG FORMAT

At this point,you could simply select File:Save Optimized,and you'd have a pretty good GIF animation.But by taking that extra step with the Optimize and Optimize Colors tool palettes,you can create something just right. In the document window,click on the Optimized tab.See what the file would look like if you created the GIF now? See how big it would be? make your file as small as possible without having the qualitie go too much down.

The great thing about ImageReady's Optimized view is that it's available even when you're not optimizing the image.The downside is that it's a lot slower than the Original view and it's not that easy to preview different settings simultaneously.The easiest way to do this is to hold down theAlt key , and drag the Optimized tag to an open area in your workspace.While this creates an ins- tant copy of the original file,it can make things a bit confusing.For this tutorial you might just want to stick to .

ery image is slide the dither all the way to "0" in the Optimized tool palette.You'll notice that the only thing that changes significantly is the file size - it becomes smaller.I almost never use di- .You can get better quality and smaller files simply by using more colors.

Use the transparency checkbox to indicate whether you want certain parts of your GIF transparent.If your eas have anti-aliased edges,you can use the Matte option to blend the edges with a color that matches the background you'll be using.Leave the transparency option unchecked for this tutorial.

Notice there's an ImageType pulldown menu.(For this exercise, the example will be a GIF;if you're saving a JPEG or PNG,other options will be available.) ImageReady allows you to useadaptive palette to map the colors of the image.You can also use Perceptual and Selective palettes,which use different algorithms. Try them all to see which one you prefer. Next, change the number of colors to 32. I try to get my GIF files below 32 colors,but we can go a bit higher.See how that affects the preview.Because this is an "all-in-one" tool,you have quite a few more optimization options than just adjusting the color table. At this point you may decide to simplify something in the art- work or animation to reduce the size or improve the quality.You can, of course,try various color settings. view the results of whatever you do almost instantly.

In the Optimized Colors palette,you'll notice that there are dots in the center of some of the swatches - this indicates a browser-safe color.Click on a swatch - and wait a second.That color should invert in the preview so that you can see where it's used.If it's used in areas where it doesn't matter or is so close to another color ou don't need it,you can remove it from the palette by dragging it down to the trash-can icon. Conversely, ifyou need more colors in a specific area,click on the Original view and use the eyedropper tool to select the color you want to add to the Optimized Colors.Then click on the add-color icon .

5

ENAWA Trainin

k

While still in the Optimized view,select the eyedropper tool and click on a color in the drawing.This will se- lect a corresponding swatch in the Optimized Colors tool palette.If you just want to quickly map a selected swatch to the nearestWeb color,simply click on the cube icon below.If you want more control,double-click on its swatch to open the Color Picker window.Clicking on the padlock icon while a swatch is highlighted will lock that color so that it will not shift while you make other adjustments.

ou don't need to use all of these features for every image,but they are there for the times you need a lot of control over the color palette.Save your original file,then choose File:Save Optimized to save the GIF.

type of image you're working with.Photographs and graphics with ots oco ore s,an partcu ar y co ors that blend and fade into one another, are best served by JPEG. If, on the other hand,your image has flat color fields,like the talent show poster, it will compress well in the GIF for- mat. or choosing JPEG for images with more complex color patterns is that this format enables you to save images with millions of colors,whereas the GIF option restricts you to 256 colors.

tant issue is file size.JPEG permits a greater degree of compression than the GIF alternative, enabling quicker downloading times for larger graphics.And JPEGs appear to retain almost complete image quality for most photographs.As a demonstration,this photo showing the producer ofWebmonkey at a staff meeting has been compressed as a JPEG (above) and as a GIF (below).Those dots you see in the GIF are calle "dithering," and they come from that format's characteristic adjusting of pixels within a graphic to simulate the display of colors not in the GIF's color palette.

6

ENAWA Trainin

k

ia