BMG 105 Computer Graphics Part 1 PDF

BMG 105 COMPUTER GRAPHICS PART1: ADOBE PHOTOSHOP. The draft instructional material is being made available “as received” from authors. The editing and various other quality checks are under progress. The uses are advised to consult Study Centers for any missing content, updates and instructions according to syllabi of course. Computer Graphics Part 1 Adobe Photoshop BMG 105 Syllabi Book Mapping Table Unit 1 1.0 Introduction Adobe Photoshop is a raster graphics editor developed and published by Adobe Systems for Windows and OS X. Photoshop was created in 1988 by Thomas and John Knoll. Since then, it has become the de facto industry standard in raster graphics editing. Adobe Photoshop is the predominant photo editing and manipulation software on the market. Its uses range from full featured editing of large batches of photos to creating intricate digital paintings and drawings that mimic those done by hand. 1. 1Unit Objectives Image design evolutions from down the ages Know About Photoshop What is RGB colour space ?and how it is used to create digital image ? Advantages and disadvantages of vector and raster images Identification of image for worldwide web use 1. 2 Image design evolution from ages The present state of image design have passed many milestones before it reaches to the current state. Let have a glimpse of various stages of evolution in image design. 1.2.1 Mosaic Form Portray tonality was significant milestone in history of visual art. Change in image which occurs due to change in light or colour is defined as portray tonality. Visual world of shadows and light around us is continuum of blended colours. This produces a three dimensional reality of colour and form. primitive artist did not attempt to express tonality due to lack of technology. Mosaic is the art of creating images with an assemblage of small pieces of coloredglass, stone, or other materials. It is a technique of decorative art or interior decoration. Most mosaics are made of small, flat, roughly square, pieces of stone or glass of different colours, known as tesserae. Some, especially floor mosaics, are made of small rounded pieces of stone, and called "pebble mosaics". Others are made of other materials. 1.1 Ancient Greek mosaic of a deer hunt, in the House of the Abduction of Helen at Pella, late 4th century BC the mosaic form as depicted in 1.1 was created thousand years ago and is predecessor of today's Photoshop image. The difference is only that all small partials are replaced with pixels in an image. Once image has been captured, the colour of pixels can be changed individually or in groups by using Photoshop. 1.2 1.2.2 Painting Painting is the practice of applying paint, pigment, colour or other medium to a solid surface The medium is commonly applied to the base with a brush, but other implements, such as knives, sponges, and airbrushes, can be used. A portion of the history of painting in both Eastern and Western art is dominated by spiritual motifs and ideas. Examples of this kind of painting range from artwork depicting mythological figures on pottery, to Biblical scenes rendered on the interior walls and ceiling of the Sistine Chapel, to scenes from the life of Buddha or other images of Eastern religious origin. Abstract painting uses a visual language of form, color and line to create a composition that may exist with a degree of independence from visual references in the world. Abstract expressionism was an American post-World War IIart movement that combined the emotional intensity and self-denial of the German Expressionists with the anti-figurative aesthetic of the European abstract schools—such as Futurism, the Bauhaus and Synthetic Cubism and the image of being rebellious, anarchic, highly idiosyncratic and, some feel, nihilistic. 1.2.3 Printing Printmaking is the process of making artworks by printing, normally on paper. Printmaking normally covers only the process of creating prints that have an element of originality, rather than just being a photographic reproduction of a painting. Except in the case of monotyping, the process is capable of producing multiples of a same piece, which is called a print. Each print produced is not considered a "copy" but rather is considered an "original". This is because typically each print varies to an extent due to variables intrinsic to the printmaking process, and also because the imagery of a print is typically not simply a reproduction of another work but rather is often a unique image designed from the start to be expressed in a particular printmaking technique. A print may be known as an impression. 1.3 Ernst Ludwig Kirchner, Portrait of Otto Muller, 1915 Woodcut, a type of relief print, is the earliest printmaking technique, and the only one traditionally used in the Far East. It was probably first developed as a means of printing patterns on cloth, and by the 5th century was used in China for printing text and images on paper. Woodcuts of images on paper developed around 1400 in Japan, and slightly later in Europe. These are the two areas where woodcut has been most extensively used purely as a process for making images without text. 1.2.3 Photograph Photograph is a picture made using a camera, in which an image is focused on to light- sensitive material and then made visible and permanent by chemical treatment, or stored digitally. Color photography is almost as old as black-and-white, with early experiments including John Herschel's Anthotype prints in 1842, the pioneering work of Louis Ducos du Hauron in the 1860s, and the Lippmann process unveiled in 1891, but for many years color photography remained little more than a laboratory curiosity. It first became a widespread commercial reality with the introduction of Autochrome plates in 1907, but the plates were very expensive and not suitable for casual snapshot-taking with hand-held cameras. Non-digital photographs are produced with a two-step chemical process. In the two-step process the light-sensitive film captures a negative image (colors and lights/darks are inverted). To produce a positive image, the negative is most commonly transferred ('printed') onto photographic paper. Printing the negative onto transparent film stock is used to manufacture motion picture films 1. 3 Art forms and styles The visual arts are art forms such as ceramics, drawing, painting, sculpture, printmaking, design, crafts, photography, video, filmmaking and architecture. Many artistic disciplines (performing arts, conceptual art, textile arts) involve aspects of the visual arts as well as arts of other types. Also included within the visual arts are the applied arts such as industrial design, graphic design, fashion design, interior design and decorative art 1.3.1 Impressionism Impressionism began in France in the 19th century with a loose association of artists including Claude Monet, Pierre-Auguste Renoir and Paul Cézanne who brought a new freely brushed style to painting, often choosing to paint realistic scenes of modern life outside rather than in the studio. This was achieved through a new expression of aesthetic features demonstrated by brush strokes and the impression of reality. They achieved intense colour vibration by using pure, unmixed colours and short brush strokes. The movement influenced art as a dynamic, moving through time and adjusting to new found techniques and perception of art. Attention to detail became less of a priority in achieving, whilst exploring a biased view of landscapes and nature to the artists eye. 1.4 Paul Gauguin: The Vision After the Sermon (1888) 1.3.2Pointillism Pointillism is a technique of painting in which small, distinct dots of color are applied in patterns to form an image. Georges Seurat and Paul Signac developed the technique in 1886, branching from Impressionism. The technique relies on the ability of the eye and mind of the viewer to blend the color spots into a fuller range of tones. It is related to Divisionism, a more technical variant of the method. Divisionism is concerned with color theory, whereas pointillism is more focused on the specific style of brushwork used to apply the paint. It is a technique with few serious practitioners today, and is notably seen in the works of Seurat, Signac and Cross. However, see also Andy Warhol's early works, and Pop Art. 1.5 Paul Signac, Femmes au Puits, 1892, showing a detail with constituent colors. Pointillism influenced the development process of printing, which uses four colours to produce full colour image. figure 1.6 presents a view of four- colour picture. 1.6 Image process 1.3.3Surrealism Surrealism was a cultural movement that began in the early 1920s, and is best known for its visual artworks and writings. The aim was to "resolve the previously contradictory conditions of dream and reality". Artists painted unnerving, illogical scenes with photographic precision, created strange creatures from everyday objects and developed painting techniques that allowed the unconscious to express itself. The word 'surrealist' was coined by Guillaume Apollinaire and first appeared in the preface to his play Les Mamelles de Tirésias, which was written in 1903 and first performed in 1917. World War I scattered the writers and artists who had been based in Paris, and in the interim many became involved with Dada, believing that excessive rational thought and bourgeois values had brought the conflict of the war upon the world. The Dadaists protested with anti- art gatherings, performances, writings and art works. After the war, when they returned to Paris, the Dada activities continued. 1.3.3Photomontage Photomontage is the process and the result of making a composite photograph by cutting, gluing, rearranging and overlapping two or more photographs into a new image. Sometimes the resulting composite image is photographed so that a final image may appear as a seamless photographic print. A similar method, although one that does not use film, is realized today through image-editing software. This latter technique is referred to by professionals as "compositing", and in casual usage is often called "Photoshopping" Other methods for combining images are also called photomontage, such as Victorian "combination printing", the printing of more than one negative on a single piece of printing paper (e.g. O. G. Rejlander, 1857), front-projection and computer montage techniques. Much as a collage is composed of multiple facets, artists also combine montage techniques. 1. 4 What is Photoshop Photoshop was created in 1988 by Thomas and John Knoll. Since then, it has become the de facto industry standard in raster graphics editing, such that the word "Photoshop" has become a verb as in "to Photoshop an image," "photo shopping" and "Photoshop", though Adobe discourages such use. It can edit and compose raster images in multiple layers and supports masks, alpha compositing and several colour models including RGB, CMYK, Lab colour space, spot colour and duotone. Photoshop has vast support for graphic file formats but also uses its own PSD and PSB file formats which support all the aforementioned features Photoshop was developed in 1987 by the American brothers Thomas and John Knoll, who sold the distribution license to Adobe Systems Incorporated in 1988. Thomas Knoll, a PhD student at the University of Michigan, began writing a program on his Macintosh Plus to display greyscale images on a monochrome display. This program, called Display, caught the attention of his brother John Knoll, Knoll an Industrial Light & Magic employee, who recommended that Thomas turn it into a full-fledged full fledged image editing program. Image technology is one of the methods of producing pictures. The first image was painted on stones. These were actually stone walls of caves and the pigment was extracted from natural materials. In due course of time, humans invented new technologies to express e their ideas and experiences visually. The technique of image creation was initially done by skilled hands by artisans and artists. Image technology accelerated speed of invention during industrial development. Now we can see inventions on daily basis.bas Photoshop is a magical software which gives you freedom of giving visual form to your imagination. Using Photoshop we can compile multiple images, text and vector design forms all together in same image or file. Photoshop is used in commercial printing. printing. with the help of Photoshop one can design Broachers, visiting cards, letterheads, advertisements, etc. 1. 5 RGB Colour space Before starting working in Photoshop and manipulating digital images, one should must have basic knowledge of colour theory. RGBRGB colour model is an additive colour model which includes red, green and blue colours colours which are combined in various ways to reproduce other colours. A particular RGB colour space is defined by the three chromaticities of the red, green, and blue additive primaries, primaries, and can produce any chromaticity that is the triangle defined by those primary colours. Adobe has recently developed another colour space called Adobe Wide Gamut RGB,, which is even larger, in detriment to gamut density. density RGB and sRGB is by far the most commonly used RGB colour space, particularly in consumer grade digital cameras, HD video cameras, and computer monitors. RGB spaces are generally specified by defining three primary colours and a white point. point 1.7 RGB colour model An LCD display can be thought of as a grid of thousands of little red, green, and blue lamps, each with their own dimmer switch. The gamut of the display will depend on the three thr colours used for the red, green and blue lights. A wide-gamut wide gamut display will have very saturated, "pure" light colours, and thus be able to display very saturated, deep colours. HSV colour space HSV stands for hue, saturation, and value, and is also often called HSB (B for brightness).HSL and HSV are the two most common cylindrical-coordinate representations of points in an RGB color model. The two representations rearrange the geometry of RGB in an attempt to be more intuitive and perceptually relevant than the cartesian (cube) representation. Developed in the 1970s for computer graphics applications, HSL and HSV are used today in color pickers, in image editing software, and less commonly in image analysis and computer vision. Hue : Hue is one of the main properties of a color, defined technically , as "the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow" Saturation :The saturation of a colour is determined by a combination of light intensity and how much it is distributed across the spectrum of different wavelengths. The purest (most saturated) colour is achieved by using just one wavelength at a high intensity, such as in laser light. Value :The brightness of the colour ranges from 0 to 100% is referred as value of colour HSL and HSV are both cylindrical geometries (fig. 2), with hue, their angular dimension, starting at the red primary at 0°, passing through the green primary at 120° and the blue primary at 240°, and then wrapping back to red at 360°. In each geometry, the central vertical axis comprises the neutral, achromatic, or graycolors, ranging from black at lightness 0 or value 0, the bottom, to white at lightness 1 or value 1, the top. 1.8 HSL cylinder. 1.9 HSV cylinder. In both geometries, the additive primary and secondary colors—red, yellow, green, cyan, blue and magenta—and linear mixtures between adjacent pairs of them, sometimes called pure colors, are arranged around the outside edge of the cylinder with saturation 1. These saturated colors have value 1 in HSV, while in HSL they have lightness ½. In HSV, mixing these pure colors with white—producing so-called tints—reduces saturation, while mixing them with black—producing shades—leaves saturation unchanged. In HSL, both tints and shades have full saturation, and only mixtures with both black and white—called tones— have saturation less than 1. If we plot hue and (a) HSL lightness or (b) HSV value against chroma rather than saturation, the resulting solid is a bicone or cone, respectively, not a cylinder. Such diagrams often claim to represent HSL or HSV directly, with the chroma dimension deceptively labeled "saturation". 1. 6 Digital image types Vector and Bitmaps As you start working of digital images, the subject which is most likely to be confusing to use the difference between bitmap and vector images, therefore characteristics and differences between these two types of digital images have been explained in detail in the following section. 1.6.1 Bitmap Images In computing, a bitmap is a mapping from some domain (for example, a range of integers) to bits, that is, values which are zero or one. It is also called a bit array or bitmap index.In computer graphics, when the domain is a rectangle (indexed by two coordinates) a bitmap gives a way to store a binary image, that is, an image in which each pixel is either black or white. A bitmap is a type of memory organization or image file format used to store digital images. The term bitmap comes from the computer programming terminology, meaning just a map of bits, a spatially mapped array of bits. Now, along with pixmap, it commonly refers to the similar concept of a spatially mapped array of pixels. Raster images in general may be referred to as bitmaps or pixmaps, whether synthetic or photographic, in files or memory. Bitmap images (also known as raster images) are made up of pixels in a grid.Pixels are picture elements; tiny dots of individual color that make up what you see on your screen. All these tiny dots of color come together to form the images you see. Most computer monitors display approximately 70 to 100 pixels per inch--the actual number depends on your monitor and screen settings. Resolution Raster graphics are resolution dependent, meaning they cannot scale up to an arbitrary resolution without loss of apparent quality. This property contrasts with the capabilities of vector graphics, which easily scale up to the quality of the device rendering them. Raster graphics deal more practically than vector graphics with photographs and photo-realistic images, while vector graphics often serve better for typesetting or for graphic design. Modern computer-monitors typically display about 72 to 130 pixels per inch (PPI), and some modern consumer printers can resolve 2400 dots per inch (DPI) or more; determining the most appropriate image resolution for a given printer-resolution can pose difficulties, since printed output may have a greater level of detail than a viewer can discern on a monitor. Typically, a resolution of 150 to 300 PPI works well for 4-color process (CMYK) printing Pixel dimensions measure the total number of pixels along an image’s width and height. Resolution is the fineness of detail in a bitmap image and is measured in pixels per inch (ppi). The more pixels per inch, the greater the resolution. Generally, an image with a higher resolution produces a better printed image quality. Your monitor’s resolution is described in pixel dimensions. For example, if your monitor resolution and your photo’s pixel dimensions are the same size, the photo will fill the screen when viewed at 100%. How large an image appears on-screen depends on a combination of factors—the pixel dimensions of the image, the monitor size, and the monitor resolution setting. In Photoshop, you can change the image magnification on-screen, so you can easily work with images of any pixel dimensions. Pros and Cons of Bitmap File Formats Bitmap files are especially suited for the storage of real-world images; complex images can be rasterized in conjunction with video, scanning, and photographic equipment and stored in a bitmap format. Advantages of bitmap files include the following: Bitmap files may be easily created from existing pixel data stored in an array in memory. Retrieving pixel data stored in a bitmap file may often be accomplished by using a set of coordinates that allows the data to be conceptualized as a grid. Pixel values may be modified individually or as large groups by altering a palette if present. Bitmap files may translate well to dot-format output devices such as CRTs and printers. Bitmap files, however, do have drawbacks: They can be very large, particularly if the image contains a large number of colors. Data compression can shrink the size of pixel data, but the data must be expanded before it can be used, and this can slow down the reading and rendering process considerably. Also, the more complex a bitmap image (large number of colors and minute detail), the less efficient the compression process will be. They typically do not scale very well. Shrinking an image by decimation (throwing away pixels) can change the image in an unacceptable manner, as can expanding the image through pixel replication. Because of this, bitmap files must usually be printed at the resolution in which they were originally stored. 1.6.2 Vector graphics Vector graphics is the use of polygons to represent images in computer graphics. Vector graphics are based on vectors, which lead through locations called control points or nodes. Each of these points has a definite position on the x and y axes of the work plane and determines the direction of the path; further, each path may be assigned various attributes, including such values as stroke color, shape, curve, thickness, and fill Unlike JPEGs, GIFs, and BMP images, vector graphics are not made up of a grid of pixels. Instead, vector graphics are comprised of paths, which are defined by a start and end point, along with other points, curves, and angles along the way. A path can be a line, a square, a triangle, or a curvy shape. These paths can be used to create simple drawings or complex diagrams. Paths are even used to define the characters of specific typefaces. Because vector-based images are not made up of a specific number of dots, they can be scaled to a larger size and not lose any image quality. If you blow up a raster graphic, it will look blocky, or "pixelated." When you blow up a vector graphic, the edges of each object within the graphic stay smooth and clean. This makes vector graphics ideal for logos, which can be small enough to appear on a business card, but can also be scaled to fill a billboard. Common types of vector graphics include Adobe Illustrator, Macromedia Freehand, and EPS files. Many Flash animations also use vector graphics, since they scale better and typically take up less space than bitmap images. which they were originally stored. Printing Vector art is ideal for printing since the art is made from a series of mathematical curves, it will print very crisply even when resized.For For instance, one can print a vector logo on a small sheet of copy paper, and then enlarge the same vector logo to billboard size and and keep the same crisp quality. A low-resolution resolution raster graphic would blur or pixelate excessively if it were enlarged from business card size to billboard size. (The precise resolution of a raster graphic necessary for high-quality high results depends on the viewing distance; e.g., a billboard may still appear to be of high quality even at low resolution if the viewing ng distance is great enough.) If we regard typographic characters as images, then the same considerations that we have made for graphics apply evenn to composition of written text for printing (typesetting). Older character sets were stored as bitmaps. Therefore, to achieve maximum print quality they had to be used at a given resolution only; these font formats are said to be non-scalable. non High quality ty typography is nowadays based on character drawings (fonts) which are typically stored as vector graphics, and as such are scalable to any size. Examples of these vector formats for characters are Postscript fonts and TrueType fonts. Original reference photo before vectorization Detail can be added to or removed from vector art. Pros and Cons of Vector Files Advantages of vector files include the following: Vector files are useful for storing images composed of line-based line based elements such as lines and polygons, or those that can be decomposed into simple geometrical objects, such as text. More sophisticated formats can also store 3D objects such as polyhedrons and a wire-frame frame models. Vector data can be easily scaled and otherwise manipulated to accommodate the resolution of a spectrum of output devices. Many vector files containing only ASCII-format ASCII format data can be modified with simple text editing tools. Individual elements may be added, removed, or changed without affecting other objects in the image. It is usually easy to render vector data and save it to a bitmap format file, or, alternately, to convert the data to another vector format, with good results. Some drawbacks of vector files include the following: Vector files cannot easily be used to store extremely complex images, such as some photographs, where color information is paramount and may vary on a pixel-by-pixel basis. The appearance of vector images can vary considerably depending upon the application interpreting the image. Factors include the rendering application's compatibility with the creator application and the sophistication of its toolkit of geometric primitives and drawing operations. Vector data also displays best on vectored output devices such as plotters and random scan displays. High-resolution raster displays are needed to display vector graphics as effectively. Reconstruction of vector data may take considerably longer than that contained in a bitmap file of equivalent complexity, because each image element must be drawn individually and in sequence. 1. 7 Internet image standards Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client's bandwidth and the faster the browser can download and render useful content on the screen. Image optimization is both an art and science: an art because there is no one definitive answer for how best to compress an individual image, and a science because there are many well developed techniques and algorithms that can significantly reduce the size of an image. Finding the optimal settings for your image requires careful analysis along many dimensions: format capabilities, content of encoded data, quality, pixel dimensions, and more.Not optimizing images properly results in extremely slow loading time. When you intend to publish your images online, you have to compromise the quality. Lossy compression means once you decompress the compressed data, you will not get the exact same image as the original. However, this will only be visible at a closer look. Lossy compression is good for web, because images use small amount of memory, but can be sufficiently like the original image. When you decompress a lossless image, you will get exactly the same image as the original. This compression uses greater amount of memory, so sometimes it may not be good for web. Image optimisation For imagery, optimisation involves choosing a suitable graphic compression format. Compression reduces the image file size and consequently the time it takes to download and display in a browser. Common compression types include GIF, JPEG and PNG. Many compression formats reduce file size by removing information from the image (down sampling). For example, the JPEG format reduces overall tonal range to reduce file size—reducing the tonal range means that highlights and shadows become less pronounced. Reducing the number, and file size of the images can be a significant issue for websites with large subscriber bases such as news sites. Site owners are charged for the amount of information (data) downloaded from their sites (traffic). The more popular the site and larger the images the greater the traffic costs. Check Your Progress 1. What do you understand by saturation of colour? 2. What are advantages of using vector graphics? 3. What is image optimization? 4. Why are photographic images not well suited for vector graphics? 1. 8 Summary Photoshop has been in industry for more than three decades. It is a reputed image editing software and provides access to most commonly used editing tools Photoshop has enabled the use of old artistic and technical traditions through easy to use tools. Photoshop plays with colours and images to form a final workable output. This output gives a visual look to almost every document created in digital world everyday In Photoshop, you can specify image quality, colour display, background transparency or matting and downloading method. However features like slice, links, animation and rollover not preserved. The three basic colours red, green, blue gives us RGB theory which basis every image. Blend of these three colours gives you range of all colour image contains. Resolution refers to the density of pixels and usually expressed as DPI ( dot per inch ) or PPI ( Pixel per inch) Graphics have different resolutions for different purpose. If low resolution image is printed it looks fuzzy. There are two types of images that Photoshop uses one is bitmap and vector. The major difference between these two is enlarging the original size of bitmap image leads to loss of qualitywhere as vector image rescaling does not leads to loss of image quality. A bitmap graphics ( also known as raster graphic) is large grid of something similar to chess board or any grid with number of little squares, you can build an image square by square. Similarly raster image is made by pixel by pixel. In vector graphic, the shape or path of a line is defined by carrying out a small mathematical calculation. lookingat the simplest form, vector graphics are points connected with lines of different shapes, filled with colour. Basic geometrical shapes and lines can be used as starting point of vector graphics. these shapes can be grouped together to form complicated shapes. When you prepare image for web use or any other media, you will have to compromise between image display quality and size of image. Photoshop and image ready are two software that provides several controls for compressing the file size of an image while optimizing its online quality. Every image posted on internet should pass through certain basic guidelines. 1. 9 Key Terms Vector graphics: Vector graphics is the use of polygons to represent images in computer graphics. Vector graphics are based on vectors, which lead through locations called control points or nodes. Bitmap images: In computing, a bitmap is a mapping from some domain (for example, a range of integers) to bits, that is, values which are zero or one. It is also called a bit array or bitmap index. Pixels: Picture element which is smallest item of graphic information. Compliance: The act of adhering to and demonstrating adherence to a standard or regulation. Mosaic: Mosaic is the art of creating images with an assemblage of small pieces of coloredglass, stone, or other materials. It is a technique of decorative art or interior decoration. Rasterization: Rasterisation (or rasterization) is the task of taking an image described in a vector graphics format (shapes) and converting it into a raster image (pixels or dots) for output on a video display or printer, or for storage in a bitmap file format 1. 10Questions And Exercises Short Answer Questions 1. What are the factors that determines the quality and appearance of a bitmap image? 2. What do you understand by the term optimization ? 3. List the advantages of bitmap image 4. Name the page layout programs that use vector images Long Answer questions Which are the old image editing techniques that are still in use ? What are the benefits of using Photoshop? What is the main difference between bitmap and vector image? Why are some compliance standards required for posting an image on internet? What is RGB and hoe is it different form HSL? What is bitmap graphic? What are the factors that make it easy to work with? Unit 2 Photoshop Workspace 2.0 Introduction Adobe Photoshop is the industry-standard tool for digital imaging, which makes Photoshop expertise a valuable commodity in the workplace. Learning Photoshop is also a good way to learn imaging concepts. Concepts you learn from working with Photoshop apply to other imaging tools as well (including Photoshop Elements, which has a very similar user interface and features). Adobe Photoshop is hands down, the most popular program for creating and modifying images for the web. This is true not only because Photoshop is available on a wide array of platforms ranging from Mac to Windows to UNIX, but because after four generations of development, Adobe Photoshop has the most intuitive user interface, the most complete set of tools, and the largest number of reference books around. 2.1 Unit objectives After going through this unit, you will be able to: Identify different parts of the image ready CS window Check the image size and the download times Identify the tools in image ready toolbox Move from imageready to photoshop and vice versa 2.2 The Photoshop Workspace When we first install Photoshop, we're presented with the default workspace which is called Essentials. It's sort of a general purpose workspace containing some of the more commonly used panels, like Layers, Channels, Adjustments and History, plus a few others. As we learned in the Managing Panels in Photoshop CS6 tutorial, the panels are located in two columns along the far right of the screen. There's a main column on the right that's expanded so we can see the contents of these panels, and there's also a secondary panel to the left of the main panel. You create and manipulate your documents and files using various elements, such as panels, bars, and windows. Any arrangement of these elements is called a workspace. The workspaces of the different applications in the Creative Suite share the same appearance so you can move between the applications easily. You can also adapt each application to the way you work by selecting from several preset workspaces or by creating one of your own. Let's take a closer look at the panels that make up the default Essentials workspace. In the main column on the right, we have three panel groups. The first group at the top holds the Color and Swatches panels, the middle group holds the Adjustments and Styles panels, and the bottom group holds three panels - Layers, Channels and Paths. In the secondary column on the left, we have two panels, History on top and Properties below it, both of which are collapsed into just their icon view mode: 2.2.1 Default And Custom Workspace The workspace in photshop includes the following components Menu bar Tool panel Options bar Image window ( or document window ) Panel You can rearrange components on the default Photoshop workspace to create a custom workspace. Workspace can be changed in any of the following ways: o Save, load, delete and reset workspace in the Windows> workspace menu. o Save or delete a custom workspace by choosing windows>workspace. o Load a saved workspace by selecting its name from windows>workspace menu. o Reset to the default workspace by choosing windows >default workspace. You can activate a missing panel by selecting the panel name in the Window menu. Switching Between Workspaces Essentials isn't the only workspace available to us. Photoshop includes other built-in workspaces that we can choose from, and we can select any of them at any time from the workspace selection box in the top right corner of the screen (directly above the main panel column). Here, we can see that by default, the workspace is set to Essentials: If we click on the box, we open a menu showing the other workspaces we can choose from, each one focused on a more specific task. For example, I'll click on the Painting workspace to select it: Dock and undock panels Dock and undock panels A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and undock panels by moving them into and out of a dock. To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels. To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock. To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another. Move panels Move panels As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If you drag to an area that is not a drop zone, the panel floats freely in the workspace. Add and remove panels Add and remove panels If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of the workspace until a drop zone appears. To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from the Window menu. To add a panel, select it from the Window menu and dock it wherever you want. Collapse and expand panel icons GRA617 Photoshop CS6 Basics 3 You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the default workspace. Simply by choosing a different workspace, we get a different set of panels on the screen. In this case, the original panel set from the Essentials workspace has been replaced with a set more useful for digital painting. Some of the panels are the same as before, like Layers, Channels, and Paths because they're still useful for painting, but the Adjustments and Styles panels in the middle group have been replaced with the Brush Presets panel, and the Color panel has been replaced with the Navigator panel in the top group If I make the second panel column a bit wider by clicking and dragging its left edge out further towards the left, we can see not only the icons for the new panels but also their names. Again, we see panels better suited for painting, like the Brush panel, Clone Source and Tool Presets. The History panel is the only hold-over here from the Essentials workspace because it's useful for painting as well go through all of Photoshop's built-in workspaces since you can easily do that on your own, but as one more quick example, I'll click again on the workspace selection box in the top right corner of the screen and this time, I'll choose the Photography workspace from the menu Once again, Photoshop displays a different set of panels for us (I've resized the secondary column so we can see the names of the panels along with their icons). The Photography workspace gives us panels we'll most likely need for photo editing, including some new ones like the Histogram, Info and Actions panels 2.2.4 Saving Your Own Custom Workspace Having these different built-in workspaces to choose from is great, but what's even better is that we can create and save our own custom workspaces. I'm going to switch back to the default Essentials workspace for a moment by clicking on the workspace selection box and choosing Essentials from the very top of the menu To save your new panel layout as a custom workspace, click again on the workspace selection box in the top right corner of the screen and this time, instead of choosing one of the already existing workspaces, choose New Workspace from the menu Photoshop will open the New Workspace dialog box for us so we can give our new workspace a name. I'll name mine something highly creative, like "Steve's Workspace", but unless your name also happens to be Steve, you may want to choose something different. At the bottom of the dialog box are options for including custom keyboard shortcuts and menus with our workspace, but I'm going to leave those blank Resetting A Workspace Whenever we make changes to an existing workspace, Photoshop remembers those changes the next time we select the workspace, and this can actually cause a bit of confusion if you're not aware of it. To show you what I mean, a moment ago, I created my own panel layout to save as a custom workspace, but if you remember, I was actually in the default Essentials workspace as I was opening, closing and moving panels around. Now that I've saved my new panel arrangement as a custom workspace, let's see what happens if I switch back to the default Essentials workspace 2.2.2 Photoshop Tools You select a variety of tools from the Toolbox by clicking on the icons. Within each type of tool you can select "hidden" tools by dragging the tool to the side or by pressing on the icon until the hidden options drop to the side. See examples below. To view the Toolbox Go to Window > Show Tools.. Selecting Tools: These tools allow you to select areas in various different ways. Drawing tools and commands only work in selected areas. If no area is selected, tools and commands will work anywhere Rectangular Marquee Click once on the Rectangular Marquee tool to choose it. The icon will turn white and the cursor will turn into a cross hair when you move it onto the document. Select an area: Drag out a rectangular marquee of any size anywhere on the document. Release the mouse and you should have a rectangular area selected. You can tell it is selected because it has the line of ‘marching ants’ moving around it. Magic Wand Tool This tool allows you to select areas of images based on color similarities without having to trace its outline.Choose the Magic Wand tool. Click the magic Wand on the white area or the colored area of your image. You will notice how it will only select the white areas. You can specify the tolerance (color range) that you Zoom Tool This tool allows you to magnify areas of an image when you are performing close, detailed work, and reduce them to get an overall view of the image. Zoom in: pick the Zoom Tool. This tool always defaults to zoom in (note: the plus sign in the middle of the magnifying glass icon). This tool works in two ways:Click the icon once in the area you wish to enlarge. The area will be magnified by a factor of two. Click and drag a rectangle around the area you wish to enlarge and the area will be magnified to fit in the existing window. Zoom out: Pick the Zoom Tool and hold down the alt key (note: the negative sign in the icon). Or, right-click with the mouse and select the zoom-out option from the drop- down.Click on the image and the drawing zooms out in a factor of two. Type Tools To insert text into your document, simply click on the Type tool icon on your toolbox and click on the area of your document where you want to insert text.The cursor will highlight and will prompt you to start typing. To change the character font, size and style you can use the top Menu (shown below)or the Character palette (shown on the right). To edit an existing block of text, select the Type tool from the toolbox, and position the cursor on the text, it will identify the text and allow you to edit it. You can apply different styles and formats within one text layer, to do this, you need to select the text with the cursor and apply the changes. If you need to apply one formatting style to ALL the text in the layer, than simply select the layer from the layer window, and make the choices you need. Palettes Layers and Adjustments Palettes The Layers Palette [below; left] is the home of all of your layer information where it can be stored and organized. It lists all layers in an image, and a thumbnail of layer contents appears to the left of the layer name. You use the Layers Palette to create, hide, display, copy, merge, and delete layers. Learn more. The Adjustments Palette [below; right] is where you would select adjustments that you wish to appy to layers. This palette includes many different adjustments including exposure, color balance, saturation, and brightness / contrast. Color Palette The Color Palette The Color Palette is where you can select and change our foreground and background colors that will be used with brushes and fills. Look at the screenshot of the Color Palette below and take note of the two stacked boxes, shown as black and white. In the screenshot, note that the foreground color is the top box (black) and the background color is the bottom box (white). Note: Click on the list icon ( ) in the Color Palette to change the color space from RGB to CMYK, Grayscale, Lab, and more. Color Palette To change the color, select either the foreground and background color box in the Color Palette by clicking on it. Then, use either the sliders or click in the spectrum below the sliders to select a new color. If you do not like using the sliders, double click on a color box to bring up the Color Picker [shown right]. Also know that you can select and change Foreground and Background colors within your Tools Palette by using this mini color palette located near the bottom of the Tools Palette. History Palette The History Palette – Saving a Snapshot The History Palette is a log of all the actions you perform within Photoshop. By default, the History Palette contains the last 20 changes to your image. Each time you change the image, a new state is added to the History Palette. To jump to a particular state, click on that state name in the History Palette and all other actions after that state wil become greyed out and italicized. Web Graphics Basics Pixels Computer based images are comprised of thousands of tiny dots of color called pixels. These are the small dots you see if you put your face too close to your television or computer screen. Each digital image is comprised of thousands or millions of individual pixels, each with its own color. When these groups of pixels are viewed as a whole, we see the entire image. Most computer monitors have display sizes of 800x600 pixels, 1024x768 pixels, or 1280x1024 pixels. Resolution Resolution indicates the number of pixels that are displayed per inch for an image (or pixels per centimeter). Most computer monitors display at resolutions of 72 pixels per inch or 96 pixels per inch. If an image is 72 pixels wide, then it will display as 1 inch big on a monitor that is set to a resolution of 72 pixels/inch. It is important to remember that for computer graphics, a higher resolution (pixels/inch) does not mean a higher quality image. What is important is the total size, in pixels, of the image. Graphics for print and graphics for display on computer monitors use different resolutions. While monitors are constrained by the 72 or 96 pixel per inch limitation, standard deskjet printers currently print in the range of 4800x1200 dpi (dots per inch) and pictures in magazines typically print at a resolution of 150 dpi. Unlike computer graphics, with images for print, a higher resolution will yield a higher quality image. Therefore, if you intend to print an image, you want to use a higher resolution than you would for a web graphic to achieve a higher quality print. So, if you are scanning an image for use on a web page, what resolution should you use? For display on a computer monitor, scanning an image at a higher resolution will simply yield an image that displays larger on the screen, since more total pixels are captured. For example, a 3 inch by 3 inch picture scanned at a resolution of 72 pixels per inch will be 216 pixels wide and 216 pixels high and display as a 3 inch by 3 inch picture when displayed on the computer monitor. A 3 inch by 3 inch picture scanned at a resolution of 144 pixels per inch will be 432 pixels wide and 432 pixels high and display as a 6 inch by 6 inch picture when displayed on most computer monitors. Therefore, the answer to the question of what resolution to scan images at really depends on the size of the original picture and how big you want the image to appear on the web page. Think about the total number of pixels you are capturing instead of the pixels per inch. It is important to remember, though, that it never hurts to capture an image onto the computer that is larger than you need it (this is true for digital camera settings as well). You can always use a graphics program to reduce the size of an image or crop it without losing quality. If you try to make it larger using a graphics program, however, the image will lose quality. A smaller image means that the image contains fewer pixels, and a larger image has more pixels. You can always throw away pixels that you have, but you can't add pixels that you don't have! Color depth Color depth or colour depth (see spelling differences), also known as bit depth, is either the number of bits used to indicate the color of a single pixel, in a bitmapped image or video frame buffer, or the number of bits used for each color component of a single pixel. 1-bit color (21 = 2 colors): monochrome, often black and white, compact Macintoshes, Atari ST. 2-bit color (22 = 4 colors): CGA, gray-scale early NeXTstation, color Macintoshes, Atari ST. 2 bits (4 colors) 3-bit color (23 = 8 colors): many early home computers with TV displays, including the ZX Spectrum and BBC Micro 4 bits (16 colors) 4-bit color (24 = 16 colors): as used by EGA and by the least common denominator VGA standard at higher resolution, color Macintoshes, Atari ST, Commodore 64, 64 Amstrad CPC. 5-bit color (25 = 32 colors): Original Amiga chipset 6-bit color (26 = 64 colors): Original Amiga chipset 8 bits (256 colors) 8-bit color (28 = 256 colors): most early color Unix workstations, VGA at low resolution, Super VGA,, color Macintoshes,Atari Macintoshes, TT, Amiga AGA chipset, chipset Falcon030. 12 12-bit color (2 = 4096 colors): some Silicon Graphics systems, Color NeXTstation systems, and Amiga systems in HAMmode. Dithering Full-color color photographs may contain an almost infinite range of color values. Dithering is the most common means of reducing the color range of images down to the 256 (or fewer) colors seen in 8-bit GIF images.Dithering is the process of juxtaposing pixels of two colors to create the illusion that a third color is present. A simple example is an image with only black and white in the color palette. By combining black and white pixels in complex patterns a graphics program like Adobe Photoshop can create the illusion of gray values Anti-aliasing An anti-aliasing filter (AAF) is a filter used before a signal sampler to restrict the bandwidth of a signal to approximately or completely satisfy the sampling theorem over the band of interest. Since the theorem states that unambiguous reconstruction of the signal from its samples is possible when the power of frequencies above the Nyquist frequency is zero, a real anti-aliasing filter trades off between bandwidth and aliasing. A realizable anti-aliasing filter will typically either permit some aliasing to occur or else attenuate some in-band frequencies close to the Nyquist limit. For this reason, many practical systems sample higher than required to ensure that all frequencies of interest can be reconstructed, a practice called oversampling. 2.4..3 Compression and web file formats Web designers are always caught in a constant compromise between image quality and file size. Generally speaking, the higher the quality of the image, the greater the file size will be. Also, the larger the image, the larger the file size will be. It is important to consider the file size of images when using them on a web page. Images with large file sizes take longer to load. Long load times can be an annoyance to your audience and may render pages essentially unusable for those with slow Internet connections. Graphic File Types There are many different file types associated with graphics, however, only a few types are suitable for web use. The most widely supported web image formats are jpeg, gif, and png. The type of image dictates which image format is best to use. JPEG (Joint Photographic Experts Group) – The jpeg image format allows up to 16 million colors and is the best choice for image with many colors or color gradations (especially photographs). Jpeg is a “lossy” format which means that each time the image is saved and compressed, image information is lost and quality is degraded. Jpeg images allow for various levels of compression. Low compression means high image quality, but large file size. High compression means lower image quality, but smaller file size. GIF (Graphic Information Format) Gif is a “lossless” image format, meaning that the quality of the image is not degraded through compression. The limitation of gif images is that the color palette includes only 256 colors. Therefore, the gif format is a good choice for simpler graphics with a smaller number of solid colors. The gif format also allows for transparent backgrounds, which allows the background color of the web page to show behind the graphic. PNG (Progressive Network Graphics) PNG is a newer image format that provides a combination of many features of both jpeg and gif. The PNG format allows for use of millions of colors as well as providing the ability to have transparent backgrounds. The one drawback to PNG’s is that the format is not supported by all web browsers, particularly older browsers. Native file formats – Native file formats are the formats that the graphics editing programs use to save the graphic project files in. The native file formats are larger in file size and contain all of the information that allows the image to be edited. Examples of native file formats are.psd for Photoshop and.png for Fireworks. Other file formats – Computer graphics may also be present in a number of other different formats such as.bmp,.tiff, and.eps. These formats have their particular uses, such as for print graphics, but are not suitable for display on the web. To use one of these types of files on the web, open it in your graphics program and then save it as either a jpeg, gif, or png. Saving images for web Option for exporting images for web is found under File > Save for web... — other graphic editors must have something similar, probably under File > Export. Saving images with many colors Original image saved at 100% quality [171KB] Choose File > Save for web... Since it's a photograph, choose JPEG. You can check the option Progressive if you like, it's only difference is how the loading will look like. Progressive images first appear blurry, and then become clearer as the image loads. Non-progressive images load line-by-line. First choose quality level, High if the image will be visible, Medium or Low if it's meant as a background. To have more control over the quality, use the slider or enter number in the field Quality Look at the file size and estimated loading time displayed in the lower-left corner while adjusting settings. At the same time, look at the image to decide on what quality looks good enough. If it's a background, make sure file size is under 5KB, up to 2KB would be better. If the image is a layout header, up to 40KB is acceptable. If it's an image to be displayed on the page, up to 70KB is reasonable, depending on dimensions. Artworks and photographs for your portfolio may be saved in better quality, since people who will look at them already expect to see large images. In this case it's normal to have file sizes from 100 to 200KB, but not more than that. Once you have found the perfect balance between quality and compression, click the button Save Save for web window Image saved at 60% quality [42KB] The image above would load in about 8 seconds on 56kbps connection. Its quality is not the best, some areas appear blurry, but it's still good enough for web purposes, and we used 75% less memory than before. This is how images with lots of colors should be saved. Saving flat-color images and charts Original image saved in JPEG at 100% quality [177KB] Choose File > Save for web... Since it has less colors, choose GIF. If the image contains empty (transparent) pixels, make sure Transparency is checked. Select the number of colors — try to make the number the smallest you can, while at the same time the image looks decent. If the image is not in the main focus (ie. background) try adding some Lossyness by dragging the slider to the right. This will reduce the file size. Once you have found the perfect balance between quality and size, click the button Save Optimized file formats for the web You can choose between four formats for the web. Use the following guidelines when choosing the format for your web image: JPEG In most cases, this is the best format in which to save photographs. PNG‑24 Like JPEG, this is a good format for photographs. Choose PNG‑24 rather than JPEG only when your image contains transparency. (JPEG does not support transparency; you must fill it with a matte color.) PNG‑24 files are often much larger than JPEG files of the same image GIF GIF is the format to use for line art, illustrations with large areas of solid color and crisp detail, and text. Also, if you want to export an animated image, you must use GIF. PNG‑8 PNG‑8 is a lesser-known alternative to GIF. Use it for the same purposes (except animation). Images in GIF and PNG‑8 formats, sometimes called indexed-color images, can display up to 256 colors. To convert an image to indexed-color format, Photoshop Elements builds a color lookup table. If a color in the original image does not appear in the color lookup table, the application either chooses the closest color in the table or simulates the color using a combination of available colors. JPEG and PNG‑24 files support 24‑bit color, so they can display up to 16 million colors. Depending on the format, you can specify image quality, background transparency or matting, color display, and the method a browser should use to display the image while downloading. The appearance of an image on the web also depends on the colors displayed by the computer platform, operating system, monitor, and browser. You may want to preview images in different browsers and on different platforms to see how they will appear on the web. Tabbed Documents By default, Photoshop CS6 opens our images as tabbed documents. To show you what I mean, here I'm using Adobe Bridge to open a folder containing three images. I want to open all three of them at once in Photoshop, so I'll click on the image thumbnail on the left to select it. Then, I'll hold down my Shift key and click on the image thumbnail on the right. This selects all three images at once (including the one in the middle) With all of the images selected, I'll double-click on one of the thumbnails to instantly open all three images in Photoshop. At first glance, something may not seem right. I've opened three photos, but only one of them is visible on the screen Where are the other two photos I opened? Well, they're actually open as well. We just can't see them at the moment, and that's because Photoshop opened the images as a series of tabbed documents. If we look along the top of the photo that's visible on my screen, we see a row of tabs. Each tab represents one of the open photos, and we can see the name of the photo (along with some other information) in its tab. The tab that's highlighted is the one that's currently active, meaning we're seeing its image on the screen. The other tabs are hiding behind it and not currently visible To switch between the open images, all we need to do is click on their tabs. At the moment, my third image (the tab on the right) is open. I'll click on the tab in the middle to select it And now we see a different open image on the screen. By default, only one tab can be active and visible at a time, so the image that was visible a moment ago is now hiding in the background click on the tab on the left to select it and make it active And now the third of my three open images is visible, with the other two photos hiding behind it If you want to switch all of your tabbed documents to floating windows, go up to the Window menu in the Menu Bar along the top of the screen, choose Arrange, and then choose Float All in Windows And now all three of my images appear in floating windows, with the currently active window displayed in front of the others. Again, we can move the windows around on the screen to reposition them by clicking and dragging the tab area along the top of each window. To make a different window active and bring it to the front, just click on it Viewing A List Of Open Documents One of the main advantages to viewing our images as floating windows is that we can see more than one image at a time, but that can also cause some problems. If you have too many floating windows open at once, your screen can get cluttered, and some windows can completely block others from view. Fortunately, there's an easy way to select any image that's currently open on your screen. If you go up to the Window menu at the top of the screen and look down at the very bottom of the menu that appears, you'll see a handy list of every image currently open, each one listed by name. The currently active image has a checkmark beside it. Simply click on any image in the list to select it, which will make it active and bring it to the foreground Switching Back To Tabbed Documents To switch from floating windows back to tabbed documents, go up to the Window menu at the top of the screen, choose Arrange, and then choose Consolidate All to Tabs Setting Photoshop's Preferences Once you decide which viewing style you like best (tabbed documents or floating windows), you can tell Photoshop to open all future images in that style using an option found in the Preferences. On a Windows PC, go up to the Edit menu at the top of the screen, choose Preferences way down at the bottom of the list, and then choose Interface. On a Mac, go up to the Photoshop menu, choose Preferences, then choose Interface This opens Photoshop's Preferences dialog box set to the Interface options. Near the center of the dialog box is an option that says Open Documents as Tabs. By default, this open is checked, which means that all of your images will open as tabbed documents. If you'd prefer to have them open as floating windows, uncheck this option There's a second option directly below it that's also important. You may have trouble saying it five times fast, but the Enable Floating Document Window Docking option controls whether or not we can drag one floating window into another and nest them together, creating tabbed documents inside a floating window To close all open images regardless of which view style you're using, go up to the File menu at the top of the screen and choose Close All 2.3 Preferences Adobe Photoshop is a powerhouse image editing program full of all kinds of bells and whistles. Whether you are a completely new to Photoshop or you are a seasoned master it is always important to set Photoshop’s preferences to fit your equipment and style to avoid any complications and make sure that the program runs for you as smoothly and efficiently as possible. Some people might start Photoshop for the first time and run with default preferences without ever looking or changing any of the settings, but if you are serious about working in Photoshop and getting the most out of that experience I strongly recommend at least quickly going through the preferences and checking if everything is set to the way you would like it to be. You may not need to change any preferences at the beginning, but as you get more familiar with Photoshop and have a solid workflow you may realize that changing some preferences might improve and speed up your methods. General Preferences Let’s start with General Preferences. You can access this tab by going to Edit menu in the top navigation bar, select Preferences and then choose General on Windows machines or Photoshop>Preferences>General on Macs. You can also access it quicker by using a keyboard shortcut: [Ctrl]+[K] for Windows or [Cmd]+[K] for Mac. Either way you choose to access it you will see the General Preferences window with all the other preferences (such as Interface, Performance and all the others) in the left tab of that window. Image Interpolation The next setting we need to look at is Image Interpolation. This option tells Photoshop how to handle the pixels when images are resized. While Photoshop is an excellent program for image editing it does not do a particularly good job at enlarging images. There are programs which a far better at enlarging images for print but they are typically sold to printing industry experts and cost much more than Photoshop does. Besides, with all the modern high megapixel cameras there is very little need for upsampling. In my personal workflow I only downsize images from original resolution; in that case I would recommend setting Image Interpolation to Bicubic Sharper. This is the best algorithm for reducing images and preserving good quality. This preference will be in effect when you change image size with Free Transform command, Crop Tool and Image size dialog box. Interface Interface section of Photoshop Preferences is responsible for the way PS is presented on your screen. You can access it by selecting ‘Interface’ in the left tab section in the Preferences window. This is where you can change the color of the entire or just sections of the program. None of the changes here will have much impact on the performance but will have a big impact on the look and feel of the application overall. File Handling Photoshop CS6 File Handling PreferencesAs its title suggests File Handling tab where you can specify the way Photoshop handles files when opening and saving. To access this tab go to Preferences and select ‘File Handling’ from the left navigation window. File Saving Options This section will look slightly different depending whether you are using Windows or Mac versions but in essence all of the options do the same thing. Performance Photoshop CS6 Performance Preferences section can be found in Preferences window left sections list. As its name implies, this section is responsible for the Performance of Photoshop CS6, so naturally this is the area you should get familiar with if your PS is not behaving as well as you would like it to. History & Cache This section is also responsible for performance, but it is putting emphasis on your style of image editing. Here you’ll see three buttons Tall and Thin, Default, Big and Flat. No, these options are not asking you to define your body shape. They are merely trying to get an idea what kind of files you are typically working with. If you are working with small files but create a lot of layers, try Tall and Thin option. If you have large files with few layers, consider using Big and Flat option. Otherwise, set Default option. Cursors Photoshop CS6 Cursors Preferences Cursors category can be found in Preferences window left navigation panel. Cursors section is pretty straight forward. Here you can select how your cursors are displayed. Painting Cursors section deals with brush-related tools. The Normal Brush Tip usually works well for most people. Feel free to try other options and see if you might like them. One thing I would recommend is selecting Show Crosshair on Brush Tip, this usually helps with accuracy. Other Cursors section is responsible for the rest of the cursors. I would typically recommend setting it to Precise for accuracy. And finally, in the Brush Preview section you can set the color of the Brush in the Heads Up Display. To access HUD in Photoshop CS6 press [Shift]+[Alt]+[Right Click] on Windows or [Ctrl]+[Option]+[Cmd] on Mac 2.3 Summary Adobe Photoshop is graphics editing software Photoshop’s current workspace provides a set of tools and convenience to make Photoshop a little more intuitive. The workspace in Photoshop includes the following components o Menu Bar o Tools Panel o Option Bar o Image window o Panels Menu bar extends horizontally across the top of the screen provides access to all the Photoshop command Options Bar is the horizontal bar above the image window area and under the application bar. Tools panel is the verticle list of tools icon on the far left side of the work area. An image window or document window shows the part of Photoshop work area that displays an image Preferences menu allows the access to a number of dialog boxes that can be set in a similar fashion as the other functions in the Photoshop. Preferences can be accessed Edit > Preferences > General/ Photoshop > Preferences General. Resizing an entire image or an object i.e. changing the total number of pixels is called resampling. Image ready provides many tools that enable you to create stunning web graphics While selecting screen area setting for a computer monitor, three possible settings are available. These are 800 pixels x 600 pixels, 640 pixels x 480 pixels and 1024 pixels x 768 pixels Dithering is defined as mixing of two colours that are available in an images colour palette to create approximation of colour. 2.4 Key Terms Menu Bar : A bar that stretches across the top of the screen and provides access to all the Photoshop commands Application Bar :A bar that allows convenient access to some useful and commonly used features. ColourPicker :The most common option used to select a colour. Dithering :The mixing of two colours that are available in image’s colour palette. 2.5 Question and Exercises Short-Answer Questions 1. What is the importance of an application frame in Photoshop? 2. What are the key features of the Option Bar? 3. What are the different options in the panels preference? 4. What are the different type of Cursor preferences? Long-Answers Questions 1. What are the image size details that should be kept in mind while working on Image Ready? 2. How do the number of colours and the depth of each colour effect the image ? 3. What are Web-safe colours and why are they important ? 4. What are the characteristics of PNG format ? Unit 3 Creating Images 3.0 Introduction Digital imaging or digital image acquisition is the creation of photographic images, such as of a physical scene or of the interior structure of an object. The term is often assumed to imply or include the processing, compression, storage, printing, and display of such images. 3.1Unit Objectives After going through this unit, you will be able to Create and edit image in Photoshop Scan image in to Photoshop and work on the scanned images Import images from digital camera to Photoshop Understand how to use the snapshot feature Learn about the function of The History Palette 3.2Creating New Images Before you learn how to create new images, it is important to understand certain basic points about images and related terms. Broadly images can be classified in two into two categories Bitmap or Raster images:A bitmap (or raster) image is one of the two major graphic types (the other being vector ). Bitmap-based images are comprised of pixels in a grid. Each pixel or "bit" in the image contains information about the color to be displayed. Bitmap images have a fixed resolution and cannot be resized without losing image quality. Each pixel on your screen is, in very simple terms, a "bit" of colour information used to display the image on a screen. That screen could be as small as the one on an Apple Watch or as large as a Pixel Board found in Times Square. Along with needing to know the three colours- Red, Green, Blue- applied to the pixel another "bit" of information is where, exactly, that pixel is located in the image. These pixels are created when the image is captured. Thus if your camera captures an image at 1280 pixels across and 720 pixels down there are 921,600 individual pixels in the image and each pixel's colour and location must be remembered and rendered. Vector graphics :Vector graphics is the use of polygons to represent images in computer graphics. Vector graphics are based on vectors, which lead through locations called control points or nodes. Each of these points has a definite position on the x and y axes of the work plane and determines the direction of the path; further, each path may be assigned various attributes, including such values as stroke color, shape, curve, thickness, and fill If you double the size of the image, all that happens is the pixels get larger and the file size increases because the same number of pixels are now in a larger area. No pixels are added. If you reduce the size of the image the same number of pixels are in a smaller area and, as such, the file size reduces. One other factor that affects bitmaps is resolution. The resolution is fixed when the image is created. Many of today's modern digital cameras, for example, capture images with a 300 dpi reolution. All that means is there are 300 pixels in every linear inch of the image. This explains why digital camera images can be rather huge. There are a ton more pixels to be mapped and coloured than commonly found on a normal computer display. Photoshop RGB Color mode uses the RGB model, assigning an intensity value to each pixel. In 8‑bits-per-channel images, the intensity values range from 0 (black) to 255 (white) for each of the RGB (red, green, blue) components in a color image. For example, a bright red color has an R value of 246, a G value of 20, and a B value of 50. When the values of all three components are equal, the result is a shade of neutral gray. When the values of all components are 255, the result is pure white; when the values are 0, pure black. RGB images use three colors, or channels, to reproduce colors on screen. In 8‑bits-per- channel images, the three channels translate to 24 (8 bits x 3 channels) bits of color information per pixel. With 24‑bit images, the three channels can reproduce up to 16.7 million colors per pixel. With 48‑bit (16‑bits-per-channel) and 96‑bit (32‑bits-per-channel) images, even more colors can be reproduced per pixel. In addition to being the default mode for new Photoshop images, the RGB model is used by computer monitors to display colors. This means that when working in color modes other than RGB, such as CMYK, Photoshop converts the CMYK image to RGB for display on screen. In the CMYK mode, each pixel is assigned a percentage value for each of the process inks. The lightest (highlight) colors are assigned small percentages of process ink colors; the darker (shadow) colors higher percentages. For example, a bright red might contain 2% cyan, 93% magenta, 90% yellow, and 0% black. In CMYK images, pure white is generated when all four components have values of 0%. Use the CMYK mode when preparing an image to be printed using process colors. Converting an RGB image into CMYK creates a color separation. If you start with an RGB image, it’s best to edit first in RGB and then convert to CMYK at the end of your editing process. In RGB mode, you can use the Proof Setup commands to simulate the effects of a CMYK conversion without changing the actual image data. You can also use CMYK mode to work directly with CMYK images scanned or imported from high-end systems. 3.2.1 Settings Preferences and Contents Preferences If you don't have much experience with Photoshop, chances are you won't need to modify its preferences. However, if you'd like to poke through the preferences to see what options you can modify, simply choose Photoshop > Preferences > General (Mac) or Edit > Preferences > General (Windows). Alternately, you can press the keyboard shortcut Cmd+K (Mac) or Ctrl+K (Windows) to access Photoshop's preferences. The preferences are broken up into nine sections: General, File Handling, Display & Cursors, Transparency & Gamut, Units and Rulers, Guides, Grid & Slices, Plug-Ins & Scratch Disks, Memory & Image Cache, and File Browser. Most of these options you don't need to worry about and their default settings are fine. In latter articles I will address some of these preferences in detail Scratch Disks One preference setting that you should look at before you start getting heavily into Photoshop—especially if you have more then one hard drive installed in your computer—is the Scratch Disks preference. If you open the Preferences window, and navigate to the Plug- Ins & Scratch Disks section—by choosing it from the pull-down menu at the top of the window—you'll notice that there are some options available for specifying a scratch disk. When you open and work on images, Photoshop first uses your computers RAM to store information about the image you're currently working on. If Photoshop runs out of its available RAM, it uses your hard drive space to store this information. Which hard drive Photoshop writes this information to is called the Scratch Disk. In Photoshop's preferences, as you can see, you can specify up to four hard drives to use as scratch disk space. If you have multiple hard drives, you can select them from the Scratch Disks pull-down menus so Photoshop can make use of them as you're working on images. The general rule is that you should have approximately three to four times the amount of hard drive space than the file size of the image. So if you're working on an image that is 100 Megabytes (MB) in size, you should have at least 300 to 400 MB of free hard drive space on your scratch disk(s). Various factors can effect this "rule", such as how much RAM you have, how many changes you make to the image, and so forth, but it's always best to have as much free hard drive space as possible on your primary scratch disk when working on an image. Keyboard Shortcuts New to Photoshop CS, by choosing Edit > Keyboard Shortcuts, you can now modify the keyboard shortcuts of nearly any shortcut in Photoshop CS. To modify the keyboard shortcuts, you first have to create a new keyboard shortcut set by clicking on the New Keyboard Set button. After clicking on the new keyboard set button, you'll be prompted to save your keyboard shortcut set. Give it a name and save it in the Presets> Keyboard Shortcuts folder in your Adobe Photoshop CS folder. 3.2.3 Opening images It's very common in Photoshop to work with multiple images inside the same document, with each image on its own layer so we can blend and combine them in various ways to create interesting designs, collages or effects. It's easy to select and open multiple photos at once from inside Adobe Bridge, but normally, Photoshop opens each photo in its own separate document, forcing us to manually duplicate, copy or drag each image from its own document into the main document we're working on. In Photoshop, Adobe introduced a great new time-saving feature to Bridge - the Load Files into Photoshop Layers command. If you know in advance that you're going to be working with multiple images inside your document and you know which specific images you'll need, Photoshop can now open and load all of your images into the same document and automatically place each image on its own layer! Here's how it works. You'll need Photoshop or higher to follow along Select Your Images In Bridge Begin by opening Adobe Bridge and navigate to the folder that contains the images you want to add to your document. Bridge open to a folder on Desktop with three photos inside of it. I'll select the first image (the one on the left) by clicking on its thumbnail Then, to select the other two images as well, hold down Shift key and click on the last of the three images (the one on the right). All three images are now highlighted and selected Select The "Load Files into Photoshop Layers" Command With all of the images selected, go up to the Tools menu in the Menu Bar along the top of the screen in Bridge, choose Photoshop for a list of Photoshop-specific options, then choose Load Files into Photoshop Layers And that's all there is to it! Photoshop will open automatically if it's not open already and will add all three images (or as many images as you selected) into the same document. It may take a few moments for Photoshop to process everything, but when it's done, you'll see a single document open on your screen containing all of your photos To open digital camera image Bridge will ask if you want the Photo Downloader to open automatically from now on whenever it detects that a camera or memory card has been connected. Choosing Yes or No will select or deselect the same option in the Preferences. Again, you can go back to the Preferences at any time to change your mind. Click Yes or No to close out of the dialog box, at which point the Photo Downloader will appear on your screen Select The Advanced Dialog Box The Photo Downloader first appears in its Standard Dialog format with some basic options like choosing a folder on your computer to download the images into, renaming files if needed, and other options we'll look at in a moment. Problem is, there's no way to actually see the images you're about to download, so rather than being forced to blindly grab every single image off the camera or memory card whether you want them all or not, ignore all of the options in the Standard Dialog and click on the Advanced Dialog button in the bottom left corner This switches the Photo Downloader to its much more useful Advanced Dialog format, which includes the same options from the Standard Dialog and adds a large preview area where we can see thumbnails of all the images we're about to download. It also gives us the ability to add author and copyright information to our images. If you're not seeing your images, select your camera or memory card from the Source option above the preview area, then use the scroll bar along the right of the preview area to scroll through the thumbnails This switches the Photo Downloader to its much more useful Advanced Dialog format, which includes the same options from the Standard Dialog and adds a large preview area where we can see thumbnails of all the images we're about to download. It also gives us the ability to add author and copyright information to our images. If you're not seeing your images, select your camera or memory card from the Source option above the preview area, then use the scroll bar along the right of the preview area to scroll through the thumbnails Choose A Location To Save The Files With all of the images we want to download selected, the next task is to tell the Photo Downloader which folder we want to download the images into on our computer, and we do that using the Save Options in the top left corner of the dialog box. By default, it assumes we want to save them to our main Pictures folder. If you have a different location in mind, click on the Choose button, then navigate to the folder you want to save them to. I'll leave mine set to my Pictures directory The Photo Downloader will automatically create a subfolder inside the save location you specified a moment ago and place your imported images inside the subfolder. This is a great way to help keep your images organized, but by default, it will give the subfolder a name based only on the date the photos were taken, which I don't find particularly useful since I have a hard enough time remembering what today's date is. If you want to name the subfolder something more descriptive, select Custom Name from the drop-down list directly below where it says "Create Subfolder(s)", then type in the name you want. I'll name my folder "Pets" Rename The Files If Needed Another option the Photo Downloader gives us is to rename the images as they're being downloaded. By default, it won't rename them, but just as with the date the photos were taken, I don't find the names my camera gives them (like "_MG_2301") all that helpful. If you click on the Rename Files drop-down list (directly below the Create Subfolder(s) option), you'll bring up a list with lots of renaming choices. I'm going to again choose Custom Name, and I'll again type "Pets" into the name field below the drop-down box. Bridge will now rename the files as they're being imported based on my custom name plus a 4-digital extension ("Pets_0001", for example). You can enter a new starting number for the 4-digit extension into the input box directly across from the name field, or leave it at its default value of 1. Select the Preserve Current Filename in XMP option if you want to embed the original name in with the image file. You'll probably never need it, but at least it will be there if you do Convert RAW Files To DNG Below the Save Options are the Advanced Options. The first one, Open Adobe Bridge, is selected by default and will open the images for you in Bridge once they've finished downloading. If you uncheck this option, you'll need to manually navigate to the folder yourself to view the images, so there's really no point in unchecking it. The option below it, Convert To DNG, is much more important. DNG stands for "digital negative", and if your images were saved by your camera in the raw format, it's a very good idea to select this option and convert your raw files into DNG files. This will help "future proof" your images, since there's no guarantee that your camera's specific type of raw format will always be compatible with future versions of Photoshop or with any other programs you may want to use them with. We won't get into technical details here, but DNG is a public, open standard format for raw files and if you want to keep the chances high that you'll be able to access your raw files down the road, select this option (if your images were saved as JPEG or TIFF files, you can ignore it) Add Author And Copyright Information Finally, below the Advanced Options is the Apply Metadata section. Metadata, in this case anyway, means "information about your images". Enter your name into the Creator field and your copyright info into the Copyright field. If you've created your own custom metadata template (which we'll see how to do in another tutorial), you can select it from the Template to Use drop-down list, but we'll just stick with the basic information for now. To add the copyright symbol, on a PC, hold down your Alt key and type 0169 on the numeric keypad. On a Mac, hold down your Option key and press the letter G A small dialog box will appear showing the download progress. Click the Stop button if you need to cancel it before it finishes, or just sit back, relax and wait. If you're importing an entire day's worth of shots, all high resolution raw files, and converting them to DNG in the process, now might be a good time to take the dog outside 3.3 Bridge Adobe Bridge is a stand-alone program that comes with Photoshop and other Adobe Creative Suite programs. It allows you to organize, browse, locate, and edit your image files. There is more flexibility in Bridge than I can cover here. If you desire to know more, use the Photoshop/Bridge Help section. In keeping with the spirit of K.I.S.S. (“Keep It Super Simple”), I am going to cover the most useful features for a photographer. There are three ways to access Bridge: 1. You can access Bridge by clicking on the “Bridge” icon on the Menu Bar. 2. You can also go to “File” -> “Browse (or Browse in Bridge)…” in Photoshop, and Bridge will open. 3. A third option is to have Bridge open automatically when you open Photoshop. Just click “Automatically Launch Bridge” in the “General” or “Advanced” section of Photoshop “Preferences”. To access: Menu:“Photoshop” -> “Preferences…” on a Mac, “Edit” -> “Preferences…” on a PC. Or Speed Keys: “Command + K” on a Mac, “Control + K” on a PC. Bridge Preferences To access (with Bridge open): Menu:“Bridge” -> “Preferences…” on a Mac, “Edit” -> “Preferences…” on a PC. Or Speed Keys:“Command + K” on a Mac, “Control + K” on a PC. Under “General”: Under “Appearance”, you can customize how your interface looks by choosing your background and accent colors. You have the option of using Adobe’s Photo Downloader by checking the appropriate box. Under “Thumbnails”: You can choose up to 4 lines of information to appear under the image Thumbnails, such as Image Size, Color Profile, Dimensions, Bit Depth, Date Created, and more. An Explanation of Some of the Features 1. Panels – Each Panel gives you different information. You can choose which Panels you want showing by going to the “Window” menu in Bridge. Those that are showing will have a checkmark beside them. In addition, you can save your Workspace the same way you did for Photoshop in this previous Apogee Article. The view shown in the above example is similar to the “Default” workspace. 2. Content Panel – Here you can view the content of your computer/folders. You can change the wayBridge sorts your images by going to the “View” menu -> “Sort”. I have mine sorted in “Ascending Order” by “Filename”. 3. Resize Workspace – By dragging these vertical dividers, you can change the size of your workspace. Simply click on the area shown and drag. 4. Preview – This shows a preview of your active image. By the way, if you choose more than one image to be active (“Shift” + mouse click), more than one preview will show up. 5. Rotate Image – This gives you the ability to rotate the active image(s). 6. Trash image – This gives you the ability to permanently trash the active image(s) as you are editing. 7. View Mode – Click on this to switch between “Compact Mode” and “Full Mode”. This is a great way to move Bridge out of the way quickly. 8. Show / Hide Panels – Toggling this will leave only the “Content” Panel showing. 9. “Active” Image – The Active Image (or images) will be outlined in a different shade of gray than your Image Backdrop. In the example above, the Active image is darker than the inactive image. 10. Filter Parameters – As you are editing, this gives you a way to separate your good images from your great images. There are two parameters that you can use to identify and separate your images Metadata Focus Rate with Stars – You will notice 5 dots underneath your active image(s). By clicking on these, you can add or subtract “stars” to rate your images. Rate with Colored Labels – By right-mouse clicking on the active image, you’ll see lots of options: to change the color of your label, choose “Label”. By the way, by going to the “Label” menu in Bridge, you will see various speed keys to organize your editing quickly. 11. Thumbnail Size – By moving this slider, you can change the size of your previews in your Content Panel. 12. Display Options – This is one of the most useful features of Bridge. By clicking on the buttons at the bottom right, you can choose how you view, edit and preview your images. The example above is the “Default” view, while the examples to the right are the “Horizontal Filmstrip” and “Metadata Focus” views. You can customize these and choose other views, including your Default Workspace, by clicking and holding down the left mouse button until a menu pops up with the available options. By the way, if you use the “Filmstrip” view. It is very handy to use the “Arrow” keys on your keyboard to move from one image to another. Other Useful Features Another neat feature is the “Slideshow”: Go to “View” -> Slideshow” in the Bridge menu, and your images will show up maximized on your screen, with no distractions. And renaming your images as a batch is easy with the “Batch Rename” feature. Go to “Tools” -> “Batch Rename…” to explore this. 3.4 Image Resizing: Magnification And Reduction Resizing an image is one of the most commonly used skills in all of Photoshop. It's so common, in fact, that even people who know virtually nothing about Photoshop still manage to use it to resize their images, which should give you an idea of how easy it is to do. In this tutorial, we'll learn how to resize images, as well as a general rule to keep in mind so your resized photos remain crisp and sharp. using Photoshop here but the steps are the same with any recent version of the program use the Image Size command which we can get to by going up to the Image menu in the Menu Bar along the top of the screen and choosing Image Size This will bring up the Image Size dialog box, as shown below: This screenshot of the Image Size dialog box was taken immediately after I opened the original photo, before I resized it to a smaller version for displaying on the page. If you look closely, you'll notice that the dialog box is divided into two main sections - Pixel Dimensions and Document Size - each showing different measurements. Since this tutorial is all about how to resize an image, we only need to concern ourselves with the top section, Pixel Dimensions, since it's the one that controls the actual, physical dimensions (in pixels) of the photo. Let's look more closely, then, at the Pixel Dimensions section, which tells us two things about our image. First, if we look directly to the right of the words "Pixel Dimensions", we can see the current file size of the image. In my case, it's telling me that my photo is 14.6 M (the "M" stands for megabytes, or "millions of bytes") Knowing the file size of the image can be useful if you want to compare the size of the original version with the resized version, but it doesn't help us actually resize our image. For that, we need the other bit of information that the Pixel Dimensions section is telling us - the current Width and Height of our image Normally, you wouldn't change the width of a photo without changing the height as well, otherwise things will look distorted. Photoshop lets us know that the width and height values of the image are currently linked together by displaying a linked icon to the right of the value If you look near the bottom of the Image Size dialog box, you'll see the Constrain Proportions option which controls whether the width and height are linked. By default, the option is selected, but if you need to change the width and height separately, simply uncheck this option 3.4.2 Resizing The Canvas Resizing the image canvas is probably one of the most frequent tasks you do in Photoshop. It’s fairly easy too, and works in all versions of Photoshop. Choose Image > Canvas Size ( or press Alt+Ctrl+C) and enter the new values. 1. Choose the Crop tool. The Crop handles appear on the edges of the picture. 2. Drag the handles outwards to resize the canvas. (Press Alt/Option to resize from the center) 3. Press Enter (Windows) or Return (Mac OS) to commit the changes crop an image using the Trim command The Trim command crops an image by removing unwanted image data in different ways than the Crop command. You can cropcrop an image by trimming surrounding transparent pixels, or background pixels of the color you specify. 1. Choose Image > Trim. 2. In the Trim dialog box, select an option: Transparent Pixels to trim away transparency at the edges of the image, leaving the smallest smallest image containing nontransparent pixels. Top Left Pixel Color to remove an area the color of the upper-left upper pixel from the image. Bottom Right Pixel Color to remove an area the color of the lower right pixel from the image. 3. Select one or more areas of the the image to trim away: Top, Bottom, Left, or Right. Change the canvas size The canvas size is the full editable area of an image. The Canvas Size command lets you increase or decrease an image’s canvas size. Increasing the canvas size adds space around an existing image. Decreasing an image’s canvas size crops into the image. If you increase the canvas size of an image with a transparent background, the added canvas is transparent. If the image doesn’t have a transparent background, there are several options option for determining the color of the added canvas. 1. Choose Image > Canvas Size. 2. Do one of the following: Enter the dimensions for the canvas in the Width and Height boxes. Choose the units of measurement you want from the pop-up menus next to the Width and Height boxes. Select Relative, and enter the amount you want to add or subtract from the image’s current canvas size. Enter a positive number to add to the canvas, and enter a negative number to subtract from the canvas. 3. For Anchor, click

BMG 105 Computer Graphics Part 1 PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue