Scribd
Upload
22 views

Lesson-12 Photoshop

short lesson basic web designing and development

Uploaded by

11:11 M。A。W。
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
22 views

Lesson-12 Photoshop

short lesson basic web designing and development

Uploaded by

11:11 M。A。W。
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 18
PHOTOSHOP 12.1 INTRODUCTION ‘Adobe photoshop isa photo/image editing software tool. You can manipulate, fesize, or change color on your digital images. Photoshop files will have .psd (psd - Photoshop document) as an extension name. Sometimes files will have .psb extension also (means Photoshop Big). Inthis lesson you will am about creating a new document in photoshop, opening an image froma disk, and saving a document in photoshop. 12.2 OBJECTIVES After going through this lesson you will be able to : © create a new document © open an image from a disk ® save a document © optimize graphics for web. 12.3 CREATING A NEW DOCUMENT To create any Photoshop document, first start Adobe Photoshop CS6. Click ‘on the shortcut on the desktop or click Start —»All Programs Adobe Design and Web Premium CS6 ——> Adobe Photoshop CS6 to start Adobe Photoshop. “a Photoshop :: 289 To create anew document, click File—> New. This will open a dialog box for document setup. You can enter name of the file, set width, height, resolution and background content of the document (Fig. 12.1). onli sata a | a a | esotton: [35300 [omen eee nate ooo [oe ‘wcroena contre: [Wee Tage sae @ eee —— | ge Fig. 12.1: new document Inthe above dialogue box, various options are available for setting ofthe document. Itinchudes: Page Size By entering new values for width and height you can change the page size. Page size represents the final sizeof the page layout. Page Orientation ‘You can get options for common sizes as letter, legal, etc. inthe Preset dropdown ‘menu Resolution Resolution isa number of pixels in an image. For better quality image you can choose high resolution Color Mode Select a color mode for your document according to requirement, For example, choose RGB for a web site graphics. 290 11 Certifieate in Web Designing and Development Background Contents Select the background content: white, eoler er transparent, 12.4 OPENING AN IMAGE FROM A DI6K Select File—> Open to open an image froma disk, and then navigate the laeation ofthe image where your image is saved. Seleet the image file and click Open: Te keep original file, you ean save a copy ofthe same file, Te save your file, choose File —s Save As and type new name ofthe file. ‘The layout of Adobe Photoshop interface is given in Fig, 12.2 mee: oes |¥O 6| Be Fig, 12.2 Interface Layout Interfase layout contains menu bar, tool bar; image, image name, adjustments and layer ete. Menu Bar ‘Menu bar is available at the top of sereen which contains all the main fimetions of Photoshop, for example File, Edit, image, Layer, Select, Filter, View, Window and Help. Tool Bar Most of the important tools like marquee, lasso, crop, eraser ete., are available in the Too! bar. ‘The Image ‘When you open an image, you can see image on the screen, Image Name Name of the image is available at the top of the image as shown in Fig, 12.2. Palettes Palettes contain more advanced image editing functions. Normally, palettes are stacked in groups, Color, Adjustments and Layers are visible palettes. ‘You can also select palettes from menu bar, 12.8 PALETTE Palettes are used for more advanced image editing features, Most frequently used palettes in Adobe Photoshop CS6 are described below. Color, Swatches and style palette Photoshop has many powerfil tools to modify the color and effects of images. The Color palette displays the currently selected foreground and background colors and RGB values. You can change colors of the foreground and background using sliders. You can also select a color available in the color ramp from the spectrum of colors at the bottom of the color palette. Color palette You can see the color values for the currently selected foreground and background colors in the color palette (Fig. 12.3) Photoshop ii 291 292 :: Certificate in Web Designing and Development Fig. 12.3: color palette Swatches palette You can select a foreground or background color from the Swatch palette (Fig. 12.4). Fig. 12.4: swatches palette Style palette You can view, select, and apply preset layer styles fiom Style palette (Fig. 12.5). A preset style replaces the current layer style by default. Niel s|\a)a|a|el|eie- giz|xcle/"|2\o\g\m = 3 Fig. 12.5: style palette Photoshop :: 293 12.6 LAYERS Using layers you can arrange your work into different levels that can be viewed and edited as individual units. You can understand concept of layers as a group of clear plastic sheets containing image pixels and transparent areas. You can see below the layers in transparent areas. Each Photoshop document has at least one layer. Creating multiple layers helps you to control how your image is viewed and edited. The Layers palette (Figure 12.6) is used while creating a document, so it is important to understand how to use it. Different icons in Figure 12.6 are described below: |A) Layer Visibility: The icon eye shows that the selected layer is visible. To see or to hide a layer click on or off. B) Layer Locking Options: To lock Transparency click the checkered square icon; to lock the image click the brush icon; to lock the position click the arrow icon; to lock all options click the lock icon. ©) Layer Blending Mode: Describes how the layer’s pixels blend with underlying pixels in the image. You can create a many special effects by selecting a particular blending mode from the dropdown menu. D) Opacity: By dragging a slider you can change the transparency of the entire layer. E) Fill: By dragging the slider you can change the transparency of the color of the image or object. F) Layer Lock: This icon shows when the layer is locked and disappears when it is unlocked. To unlock the layer double-click the icon. G) Layer Options Menu: You can click on the black triangle to have the following options: New Layer, Duplicate Layer, Delete Layer and Layer Properties. H) Link Layers: This icon can be used to link layers together. 1) _ Layer Styles: Ifa layer has a style, an “F” icon shows at the bottom of the Layers palette. J) Layer Mask: An image, containing parts painted in black hidden, parts painted in white showing, and parts painted in gray shades showing in various levels of transparency. 294 ii Certificate in Web Designing and Development 16) Layer Set: Click this ion to ereate a folder for many layers. It helps you to eFganize images with multiple layers. L) Greate New Fill or Adjustment Layer: Click this ieon and seleet an option te create a new fill of adjustment layer. You ean have the same opacity and blending mode options like image layers and it ean be hidden, rearranged, deleted and duplicated in the same manner as image layers. M) Create New Layer: To create a new layer, click this icon. N) Delete Layer: To delete a layer, choose a layer and click the ioon or choose a layer in the Layers palette and drag it to the trash icon, Fig. 12.6: Layers Photoshop :: 295 12.7 SELECTION TOOLS Few main selection tools (Figure 12.7) in Adobe Photoshop CS6 are given below: Marquee Click the tool button, choose a rectangular or an elliptical marquee. Drag the marquee over the area of the image you want to select. Move dy Move tool is used to select and move objects on the page. Click the tool button, then click on any object on the image you want to move. Lasso ©, Lasso tool selects an object by drawing a freehand border around it. Click the tool button, drag to draw a freehand border around the area of the image you want to select. Polygonal Lasso [9B Polygonal Lasso selects an object by drawing a straight edge border around it. Click the tool button, click on the starting point on the image, drag to drawa straightedge border, click and drag again to select the are of the image you want to select. Double click to finish. Magnetic Lasso [RB Magnetic Lasso selects an object by drawing a border that snaps to the edges of the defined area of the object. Click on the starting point on the image, drag around the area of the image. The tool will make fastening points at the edges. To finish selecting, drag the border to the starting point and click precisely in the point. 296 :: Certificate in Web Designing and Development Fig. 12.7: toolbox Magic Wand FR] magic wand tool selects all objects in a document with the same or similar fillcolor, stroke weight, stroke color or blending mode. You can control what the Magic Wand tool selects by specifying the color range or tolerance. Photoshop :: 297 Crop Tool "YL, select the crop tool button, then click on the area of the image you wish to select. It selects and cuts portions of an image. Slice Tool &, slice tool is used to cut images into slices, which can be exported to a web page 12.8 SELECTION There are several ways to select images or parts of images in Photoshop. To perform selection, some basic methods are given below: © Select the rectangular Selection Tool on the Toolbox to select area to work on (Figure 12.8). © To add to a selection, hold Shift before dragging. © To make the selection exactly square, start dragging, then hold Shift. © Press Ctrl+D to “deselect” and remove the selection. SE) Fig. 12.8: selection using rectangular selection tool 298 :: Certificate in Web Designing and Development 12.9 CROPPING Cropping is the most basic editing techniques which can improve your images. Cropping is the process of removing portions of an image to create focus or strengthen the composition. Cropping also helps you to make your image a standard photo size. You can crop an image using the crop tool and the Crop command, There are several ways to crop images in Adobe Photoshop: 1. Cropping with the Crop Tool 2. To crop an image using the Crop command. 3. Cropping to a specific size 12.9.1 Cropping with the Crop Tool The Crop Toot helps you to have a precise selection ofan image you want to edit. To crop with the Crop Tool, follow these steps: © Open the image you want to crop(as shown in Fig. 12.9). © Choose the Crop Tool from the Toolbox. © Itwillautomatically select entire image. Drag the sides to fit the dimensions you want, Fig. 12.9: using crop tool Photoshop :: 299 12.9.2 To crop an image using the Crop command Select the portion ofthe image you want to keep by doing one of the following: © With the rectangle {22 orelliptical marquee ©, drag over the area you want to select(as shown in Fig. 12.10). ¢ Hold down Shift as you drag to constrain the marquee to a square or circle. © Choose Image> Crop. Fig. 12.10: sample image 12.9.3 Cropping to a specific size Ifyou want to print your digital photos or other images on standard size photo paper, you will have to crop your images to a specific size, such as 8x10 or 5X7. To crop an image to a specific size, follow the steps given below: ‘© Openthe image you want to crop. * Choose the Crop Tool from the Toolbox(as shown in Fig. 12.11) ‘© Specify the values for Width and Height in the option bar or choose it from the given option. 300 :: Certificate in Web Designing and Development (BB Fic cit mage Layer Select Fi Ef Gaptnchserch moe ® $2 cep ch 3c 30 pt al 4h crop sch xc 30 “Bh cop inch x7 inch 30 pi i 42h. crop 8 inch x10 inch 300 pp FF Current Tool Only ig. 12.11. Crop Tool Options bar 12.10 RESIZING DIGITAL IMAGES Digital images normally have large dimensions but low resolution, which affects their quality when their size is decreased or increased. To resize the digital images without loosing the quality, follow the steps given below: 1. Open the digital image you want to resize. 2. Goto View> Rulers. You will see the dimension of your photo (Fig 12.12). 12.12: sample image Photoshop :: 301 3. Goto Image —> Image Size. 4. In the Image Size option, check the Resample Image box off (Fig. 12.13). Enter your desired resolution... The photo is now 5.01 x 3.78 inches. (ES Orns: 2.0 | i ose Yosas 3] J}, | a hoone [as — | ——— =—a 4 a a F hero Boe [reine trareon ouseosy a] Fig, 12.13. Changing resolution 12.11 ADDING FLASH Ifwe take pictures indoors without a flash, they will turn out underexposed and dark. To fix underexposed images, follow these steps: 1. Open a digital image you want to correct (Fig, 12.14), Zz a 2 3 ‘al S Fig. 12.14 : Underexposed image 302 :: Certificate in Web Designing and Development Go to Layers —> Duplicate, Name the layer Layer 1. 3. Make sure that Layer 1 is selected in the Layers palette. Select Image —> Adjustments —> Exposure (Fig. 12.15). Select the amount of exposure as per requirement. The whole image will become bright (Fig. 12.16) Fig. 12.16: bright image 12.12 ENLARGING To make your digital image into a poster size image, you can perform it in the Image Size dialog box. Increasing the dimensions will make the image appear blur and pixilated. To enlarge the image without losing the quality, the following steps will help you : iG 2. 3, 5. Open the digital image you want to enlarge. Go to Image > Image Size. Inthe Image Size dialog box, make sure the Resample Image box is checked offand choose Bicubic Smoother from the dropdown box (Figure 12.17). a al Oensons: 2254 wim [oes iy vest: [7 [ore = Drometse — o_o, nl | F Scale Styles FF constran Proportions Resale irage: [eubic (bes forsmocth onderts) i Fig. 12.17 :. Increasing the size by 10 percent Change the Document Size measurements to Percent. If you type 110 it will increase the size of the image by 10 percent. Continue enlarging by 10 percent until you are satisfied with the size. 12.13 SAVING To save a document in Photoshop 1: 2. Click File —> Save As. Navigate to the place you would like your document to be saved by using the

You might also like