Laboratory Class for IE11103 E-Commerce

Adobe Photoshop Laboratory

By the end of this class students are able to: 1. Understand the usage of Adobe Photoshop 2. Use features of adobe Photoshop such as the Tool Palettes and Layers. 3. Create images in different image formats for their web development.

PART1: Getting Started

1. Go to your Photoshop Application on your desktop. 2. When its open your will have something like the figure below (exclude the image inside). What you see is call the Workspace.

1|P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

3. To get the image or your Document Window go to File> New 4. Name your image name as MyFirstImage, Width=800, Height=600, Resolution=72. You will then get your document window with the name MyFirstImage.

5. So now back to your Workspace on the left side is your Tool palette. These are the tools you will be using for editing or creating your image. Lets got through them one by one

2|P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

6.

Selection Tools

7.

Corp and Slice Tools

8.

Retouching Tools

3|P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

9. Painting Tools

4|P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

10. Drawing and Type Tools

11. Annotation, measuring and navigation Tools

12. Since weve went through all the Tool Palettes. Now lets go to the next section.

5|P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

PART2: Layers
1. Layers are the building blocks of many image creation workflows. You may not need to work with layers if you are doing simple image adjustments, but layers help you work efficiently and are essential to most nondestructive image editing. 2. Photoshop layers are like sheets of stacked acetate. You can see through transparent areas of a layer to the layers below. 3. You move a layer to position the content on the layer, like sliding a sheet of acetate in a stack. You can also change the opacity of a layer to make content partially transparent.

Transparent areas on a layer let you see layers below.

4.

If you cannot view your Layer window, go to your menu bar Window> Layers

Exercise
13. Open a new window by going to File> New

14. Then Name your image name as My1stImage, Width=800, Height=600, Resolution=72. You will then get your document window with the name My1stImage as below.

6|P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

15. Now to view your layer windowgo to Window> Layers.. 16. You will be able to see your layer window on the right bottom side of your screen. 17. Layers are useful when you want to move your objects from one side to another .

18. To start using the Gradient tool.. go to the tool palette the choose the Gradient style on the top

7|P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

19. To change the color go to the color box at the bottom and double clickchoose the color you want and click ok..

20. Then click and drag from top to bottom on your document window. Youll get a gradient color background like below.

8|P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

21. To use your shape tool choose one of the shape toolfor this exercise we will use the custom shape tool. Then go to the shape section, choose the shape you want and double click.

22. Remember to choose the color you want for your shape before applying the shape into the document window.

9|P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

23. To use the Brush Tool. Choose the brush tool and select the style of brush you want to use. Then remember to choose the color you want to use.

24. Then go to the Brush Window by going to Window> Brush Select the brush effects you want.

25. Once all the effects have been setclick and drag on your document window.

10 | P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

26. Now try to move your shape from the top to bottom (in this exercise referring to the shopping cart) to allow text to be inserted on the top. 27. To move the shape use the Move Tool. Click on the move tool and make sure you are on the shape layer.

28. Now to insert your text. Click on the text tool and click and draw in the document window. Type in the words you want.

29. Choose the font text and size you want then to accept it click on the correct mark on the top bar.

11 | P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]

Laboratory Class for IE11103 E-Commerce

30. Then to curve the text. Go to the Curve text button on the top bar. Then choose the style you want and click ok.

31. To give effect on the text. Double click on the text layer and choose the style you want.

32. This is the output you will get for this exercise. Congratulation you have ended this tutorial.

12 | P a g e [ M s D i n n a s L a b o r a t o r y N o t e s ]