1. Photoshop Image Processing

2. Summary Photoshop is one of the most popular image processing software 。 It can be used in many image applications, Such as Drawing, Editing, Modifying, or Scanning. The current version of PS is cs3 and its interface is very friendly and clear. Photoshop is one of the most popular image processing software 。 It can be used in many image applications, Such as Drawing, Editing, Modifying, or Scanning. The current version of PS is cs3 and its interface is very friendly and clear. Advertisement 、 Cover 、 Photograph 、 Web page layout Advertisement 、 Cover 、 Photograph 、 Web page layout

3. Interface Interface based on windows 、 menus based on windows 、 menus toolbox toolbox rectangular marquee tool, move tool, pen tool 、 text tool…rectangular marquee tool, move tool, pen tool 、 text tool… tool option tool option different tools have different parametersdifferent tools have different parameters control panel: click menu[window] control panel: click menu[window] color, charactercolor, character layer, path, history recordslayer, path, history records

4. Image format PSD Photoshop format, cannot be used in webpage BMP dot-matrix, need large space TIFF bit-mapping, always be used for scanning JPG standard compression, can be used in webpage GIF graphics Interchange format, always be used in webpage

5. Select & Move tool select tool select tool rectangular, ellipserectangular, ellipse cancel select: Ctrl+Dcancel select: Ctrl+D menu[select] menu[select] inverse, select allinverse, select all change the area: Ctrl+T, arbitrary shape(press Ctrl-key change the selected area arbitrarily)change the area: Ctrl+T, arbitrary shape(press Ctrl-key change the selected area arbitrarily) move tool move tool move the object, submit the resultmove the object, submit the result

6. Lasso tool lasso tool lasso tool select irregular areaselect irregular area press the left button of the mouse to drag and droppress the left button of the mouse to drag and drop quick selection tool quick selection tool select the area with the same or similar colorselect the area with the same or similar color click once time, and it will select automaticallyclick once time, and it will select automatically

7. Crop tool crop tool crop tool cut out the not useful part of the image(area out of the selection)cut out the not useful part of the image(area out of the selection) select the area you want to keep ， click Enter-key or click right button and select crop.select the area you want to keep ， click Enter-key or click right button and select crop.

8. Set color fore default switch back foreground color is the color for the draw, background color is color for the erase foreground color is the color for the draw, background color is color for the erase use color picker to set the foreground and background. use color picker to set the foreground and background.

9. Clone stamp tool clone stamp tool clone stamp tool clone local image to other positionclone local image to other position put the cursor on the picture you want clone, press the Alt-key and click the left button, then leave the Alt-keyput the cursor on the picture you want clone, press the Alt-key and click the left button, then leave the Alt-key press the left button and drag the mouse to clone the picture at the area you wantpress the left button and drag the mouse to clone the picture at the area you want

10. Gradient tool & Text tool gradient tool gradient tool linear gradient, radial gradient, angel gradient, reflected gradient, diamond gradientlinear gradient, radial gradient, angel gradient, reflected gradient, diamond gradient select the area ， select the gradient type ， drag the cursor form the start point to the end point.select the area ， select the gradient type ， drag the cursor form the start point to the end point. text tool text tool Add text to the image ， actually it is add text in a new layer separate.Add text to the image ， actually it is add text in a new layer separate. You can set the font family, weight, size, color… in the tool optionYou can set the font family, weight, size, color… in the tool option

11. Layer image in Photoshop can be consist of one or multiple layers, we can put different objects in the different layers, and use various effects. image in Photoshop can be consist of one or multiple layers, we can put different objects in the different layers, and use various effects. every layer looks like a transparent paper, we can see the picture under the layer ， the bottom of all the layer is the background color. every layer looks like a transparent paper, we can see the picture under the layer ， the bottom of all the layer is the background color. we can use the layer control panel or the layer[menu] to add, delete or edit a layer. we can use the layer control panel or the layer[menu] to add, delete or edit a layer.

12. Layer operation create a new layer create a new layer when create a new image file, the Photoshop create it as a layer, commonly called background layer.when create a new image file, the Photoshop create it as a layer, commonly called background layer. click the button in the layer panel to create a new layer.click the button in the layer panel to create a new layer. menu[layer] → [new] → [layer]menu[layer] → [new] → [layer] copy layer copy layer select the layer you want copy, drag it one the “create a new layer” button in the layer panel.select the layer you want copy, drag it one the “create a new layer” button in the layer panel.

13. Layer operation move layer move layer select the layer, use mouse drag and drop it.select the layer, use mouse drag and drop it. hide or display click the eye button before to hide or display the layer hide or display click the eye button before to hide or display the layer group layers click the “create a new group” button to create a group, drop the layers into the group to cluster them. group layers click the “create a new group” button to create a group, drop the layers into the group to cluster them. grouped layers can be operated together.

14. Layer operation merge layers: we also can merge layers to the background layer to save the space. merge layers: we also can merge layers to the background layer to save the space. menu[layer]or click the button on the top and right of the layer panel.menu[layer]or click the button on the top and right of the layer panel. [merge down]: merge the current layer and the next layer[merge down]: merge the current layer and the next layer [merge visible]: don’t merge the hidden layers.[merge visible]: don’t merge the hidden layers. [merge layers]: merge all the layers and drop the hidden layers.[merge layers]: merge all the layers and drop the hidden layers.

15. Dreamweaver

16. Adobe Dreamweaver -Created by Allaire systems, which was acquired approximately 1998 by Macromedia and is now owned by Adobe Systems, which acquired Macromedia in 2005. -Available for both Mac and Windows Operating Systems. -Supports for web technologies such as CSS, JavaScript, and various server-side scripting languages and frameworks including ASP.NET, ColdFusion, JavaServer Pages, and PHP.

17. Objectives In this Presentation, you will learn: To use Dreamweaver CS3 effectively. To develop web pages in a visual environment. To insert images and links into web pages. To create XHTML elements such as tables and forms.

18. Introduction HTML editors assist in creating visually appealing websites Insert and edit text Create more complex XHTML elements, such as tables, forms and frames Adobe Dreamweaver CS3 is a popular HTML editor. Dreamweaver is a WYSIWYG editor. -What You See Is What You Get. -Displays XHTML as browser would.

19. Creating New Document File > New... or Select HTML under the Create New heading of the Start Page Select Blank Page tab, then HTML from the Page Type: list Set DocType to XHMTL 1.0 Strict to make XHTML compliant code Select the Create button

20. Starting up Dreamweaver

21. Code View

22. Dreamweaver supports Syntax Highlighting for various languages ActionScript, ASP, ASP.NET, C#, CSS, ColdFusion, EDML, XHTML, XML, XSLT, Java, JavaScript, JSP, PHP, VB, VBScript, WML. It is also possible to add your own language syntax highlighting to its repertoire. In addition, Code completion is available for many of these languages.

23. Design View

24. Workspace

25. Adding Pictures

26. Image Properties

27. Text and Links Adding links Highlight text or image Enter destination URL into Link field of Property inspector Other properties available to change Height Width Alignment

28. Creating Tables Creating tables Often confusing process Possible to create graphically in Dreamweaver Insert > Table Specify rows, columns and appearance

29. Insert Table Dialog

30. Tables Manipulating tables Drag borders to resize Change background or border color Delete, split, merge cells Tag selector tag Merge button Alternatively, right-click, Table > Merge Cells

31. Property inspector

32. Forms Forms in Dreamweaver Represented by dotted line Anything inside lines belongs to that form Insert > Form or Forms on Insert bar Form elements Insert bar Property inspector

33. Forms and Text field Options

34. Completed Form Example

35. The End Try Photoshop and Dreamweaver Today! Go to http://www.adobe.com/downloads to download a free 30 day trial.