7/27/2019 AdobePhotoshop Notes

1/12

Laboratory Class for IE11103 E-Commerce

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 ]

Adobe Photoshop Laboratory

By the end of this class students are able to:1. Understand the usage of Adobe Photoshop2. 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.

7/27/2019 AdobePhotoshop Notes

2/12

Laboratory Class for IE11103 E-Commerce

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 ]

3. To get the image or your Document Window go to File> New4. 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 forediting or creating your image. Lets got through them one by one

7/27/2019 AdobePhotoshop Notes

3/12

Laboratory Class for IE11103 E-Commerce

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 ]

6. Selection Tools

7. Corp and Slice Tools

8. Retouching Tools

7/27/2019 AdobePhotoshop Notes

4/12

Laboratory Class for IE11103 E-Commerce

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 ]

9. Painting Tools

7/27/2019 AdobePhotoshop Notes

5/12

Laboratory Class for IE11103 E-Commerce

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 ]

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.

7/27/2019 AdobePhotoshop Notes

6/12

Laboratory Class for IE11103 E-Commerce

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 ]

PART2: Layers

1. Layers are the building blocks of many image creation workflows. You may not need to work with layersif 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 layerto 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 canalso 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 yourdocument window with the name My1stImage as below.

7/27/2019 AdobePhotoshop Notes

7/12

Laboratory Class for IE11103 E-Commerce

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 ]

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/27/2019 AdobePhotoshop Notes

8/12

Laboratory Class for IE11103 E-Commerce

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 ]

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 likebelow.

7/27/2019 AdobePhotoshop Notes

9/12

Laboratory Class for IE11103 E-Commerce

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 ]

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.

7/27/2019 AdobePhotoshop Notes

10/12

Laboratory Class for IE11103 E-Commerce

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 ]

23. To use the Brush Tool. Choose the brush tool and select the style of brush you want to use. Then remember tochoose 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.

7/27/2019 AdobePhotoshop Notes

11/12

Laboratory Class for IE11103 E-Commerce

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 ]

26. Now try to move your shape from the top to bottom (in this exercise referring to the shopping cart) to allow text tobe 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 youwant.

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

7/27/2019 AdobePhotoshop Notes

12/12

Laboratory Class for IE11103 E-Commerce

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 ]

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.