Difference between revisions of "Documentation/OOoAuthors User Manual/Draw Guide/Changing Object Attributes"

Latest revision as of 12:38, 9 April 2008

Chapter 4: Changing Object Attributes

This is Chapter 4 of OpenOffice.org 2.x Draw Guide (second edition), produced by the OOoAuthors group. A PDF of this chapter is available from the OOoAuthors Guides page at OpenOffice.org.

Content on this page is licensed under the Creative Common Attribution 3.0 license (CC-BY).

Difference between revisions of "Documentation/OOoAuthors User Manual/Draw Guide/Changing Object Attributes"

Latest revision as of 12:38, 9 April 2008

Views

Personal tools

Navigation

Search

Tools

@@ Line 1: / Line 1: @@
-{{NeedsWork}}
+{{DISPLAYTITLE:Changing Object Attributes}}
+{{Documentation/DrawChangeTOC
+|ShowPrevNext=block
+|PrevPage=Documentation/OOoAuthors User Manual/Draw Guide/Examples
+|NextPage=Documentation/OOoAuthors User Manual/Draw Guide/Toolbars and menus
+}}
 This is Chapter '''4''' of '''OpenOffice.org 2.x Draw Guide''' (second edition), produced by the [http://oooauthors.org/ OOoAuthors group]. A PDF of this chapter is available from the [http://documentation.openoffice.org/manuals/oooauthors2/ OOoAuthors Guides page] at OpenOffice.org.
-[[Documentation/OOoAuthors_User_Manual| &lt;&lt; User Manuals page]]<br>
-[[Draw Guide| &lt;&lt; Draw Guide Table of Contents]]<br>
-[[Draw Guide/Working with Objects| &lt;&lt; Chapter 3 Working with Objects]] &nbsp;&nbsp;|
-&nbsp;&nbsp;[[Draw Guide/Combining Multiple Objects|Chapter 5 Combining Multiple Objects &gt;&gt;]]
-= Toolbars and menus =
+{{CCBY}}
-To change an object’s attributes (such as color, border width, etc) you can use the Line and Filling toolbar or the context menu.
-== Line and Filling toolbar ==
-If the Line and Filling toolbar is not visible, you can display it using '''View > Toolbars > Line and Filling'''. From here you can edit the most common object attributes. You can also open the Line dialog by clicking on the [[Image:LineIcon.png]] icon and the Area dialog by clicking on the [[Image:AreaIcon.png]] icon to see more options.
-[[Image:LineFilling2.png]]
-{|
-|width="160"|'''1'''  Styles and Formatting ||width="100"|'''2'''   Line ||width="150"|'''3''' Arrow Style  ||width="120"|'''4'''  Line Style ||width="150"|'''5'''  Line Width
-|-
-|'''6'''  Line Color || '''7'''  Area || '''8-9'''  Area Style / Filling ||'''10''' Shadow
-|}
-When you select text, this toolbar changes to show text formatting options.
-[[Image:DG4-b.png]]
-== The context menu ==
-When an object is selected, you can right-click on the object to bring up a context menu. The context menu provides additional access to the options shown above and another way to change an object’s attributes. The entries with a small arrow on the right hand side contain a submenu.
-[[Image:DrawContextMenu.png|thumb|none|500px|Figure 1: Right-click on an object to see the context menu.]]
-= Editing lines and borders =
-Lines (like arrows) and the borders of an object are managed through the same dialog. An object’s border is just another type of line.
-[[Image:DG4-2.png|thumb|none|500px|Figure 2: Lines and borders.]]
-You can change some properties from the Line and Filling toolbar. To see more options, select the object and click on the [[Image:]] icon or right-click on the object and choose Line from the context menu. This opens the Line dialog.
-[[Image:DG4-3.png|thumb|none|500px|Figure 3: Line dialog (right-click on an object and choose Line)..]]
-== Common line properties ==
-In most cases the property you want to change is the line’s style (solid, dashed, invisible, etc), its color, or its width. These options are all available from the Line and Filling toolbar.
-[[Image:DG4-4.png|thumb|none|600px|Figure 4: Common line options (style, width, color).]]
-You can also edit these properties from the Line dialog. They are on the first tab, left column (see Figure above). From the Line dialog you can also change the line’s transparency. Figure 5 below illustrates different degrees of transparency.
-[[Image:DG4-5.png|thumb|none|500px|Figure 5: The vertical lines have different levels of transparency (0%, 25% and 50%).]]
-== Drawing arrows ==
-Arrowheads (and other line endings – usually referred to in this Guide collectively as arrows) are a line property. Select a line and click on the [[Image:ArrowsIcon.png]] button. This opens the Arrowheads menu. There are several types of arrowheads available. Each end of the line can have a different arrowhead (or no arrowhead).
-[[Image:DG4-6.png|Arrowheads menu]]<br>''Figure 6: Arrowheads menu.''
-{{Documentation/Note|Arrowheads are only applicable to lines. They have no effect on an object’s border.}}
-In the Line dialog (see Figure 3), ''Arrow styles'' on the right-hand side contains a number of options to fine tune the arrow properties. If ''Synchronize ends'' is selected, both line endings will have the same appearance. The option ''Center'' brings the middle of the arrow over the end point of the line. If this checkbox is not selected, the line ends on the outermost edge of the arrow. It is much easier to understand if you look at the following sketch.
-[[Image:DG4-7.png|Default arrowheads (left) vs Centered arrowheads (right)]]<br>''Figure 7: Default arrowheads (left) vs Centered arrowheads (right).''
-== Customizing line and arrow styles ==
-You are not constrained to using only the line and arrow styles provided by default in Draw. You can modify the styles and create your own.
-=== Customizing line styles ===
-In the Line dialog, click on the Line Styles tab (see  Figure 8). From here you can customize the line styles or create your own (click on the '''Add''' button to create your own). You can change the length of the dashes, the space between them, and other attributes.
-[[Image:DG4-8.png|thumb|none|500px|Figure 8: Editing line styles.]]
-Use the Load Line Style [[Image:LoadLineStyleIcon.png]]and Save Line Style [[Image:SaveLineStyleIcon.png]] buttons to save a new definition or read one from disk (file extension .sod).
-=== Customizing arrow styles ===
-You can also create your own arrowheads to create some interesting effects, such as:
-[[Image:DG4-i.png]]
-The first step is to draw a curve with the shape you want for the arrowhead.
-[[Image:DG4-9.png|thumb|none|500px|Figure 9: To create your own arrowhead you must first draw a curve.]]
-{{Documentation/Note|The arrowhead must be a curve. A curve is something you could draw without lifting a pencil. For example,  is a curve but  is not a curve. You can however draw forms which are not curves and then at the end convert them to a curve.}}
-Select the curve, open the Line dialog, and go to the Arrow Styles tab. Click on '''Add''', enter a name for the arrow style and click '''OK'''.
-{{Documentation/Tip|The part of the shape which should point in the direction of the line must be drawn facing upwards. In Figure 9 the top of the shape will point towards the “outside” of the line.}}
-[[Image:DG4-10.png|thumb|none|500px|Figure 10: Adding an arrow style.]]
-Now you can access the new style from the Arrow style list (Figure 11) or the Arrowheads menu (Figure 6).
-[[Image:DG4-11.png|thumb|none|500px|Figure 11: Arrow Styles list.]]
-= Editing the inside (fill) of an object =
-The OpenOffice.org term for the inside of an object is '''Area fill'''. The area fill of an object can be a uniform color, a gradient, a hatching, or a pattern from an image. It can be made partly or wholly transparent and can throw a shadow.
-[[Image:DG4-12.png|thumb|none|500px|Figure 12: Different types of area fill.]]
-== Common fill properties ==
-In most cases you will choose one of the standard fill options, whether it is a color, a gradient or an image. These options are all available from the Line and Filling toolbar.
-[[Image:DG4-13.png|thumb|none|500px|Figure 13: Common fill options.]]
-=== Fill with a uniform color ===
-Select the object you wish to edit. On the Line and Filling toolbar, select '''Color''' on the pull down list at the right of the paint can, and then choose a color from the right-hand menu (see Figure 14).
-[[Image:DG4-14.png|thumb|none|500px|Figure 14: Filling with a color.]]
-=== Fill with a gradient ===
-Select the object you wish to edit. On the Line and Filling toolbar, select '''Gradient''' and then choose a gradient from the right-hand menu, (see Figure 15).
-[[Image:DG4-15.png|thumb|none|500px|Figure 15: Filling with a gradient.]]
-=== Fill with a line pattern ===
-The OOo term for line patterns is Hatching. Select the object you wish to edit. On the Line and Filling toolbar, select '''Hatching''' and then choose an option from the menu; see Figure 16.
-[[Image:DG4-16.png|thumb|none|500px|Figure 16: Filling with a line pattern.]]
-=== Fill with an image ===
-You can fill an object with a bitmap image (as opposed to a vector graphic image). Select the object you wish to edit. On the Line and Filling toolbar, select '''Bitmap''' and then choose an option from the menu; see Figure 17.
-[[Image:DG4-17.png|thumb|none|500px|Figure 17: Filling with an image.]]
-=== Adding a shadow ===
-In OpenOffice.org shadows are considered an area property. Click on the [[Image:ShadowIcon.png]] icon on the Line and Filling toolbar (next to the area fill functions); see Figure 18.
-[[Image:DG4-18.png|thumb|none|500px|Figure 18: Adding a shadow.]]
-== Advanced area fill options ==
-Click on the Area icon [[Image:AreaIcon.png]] to bring up the Area dialog. From this dialog you can fine tune the area fill of an object in greater detail.
-=== Creating your own fill color ===
-Click on the '''Colors''' tab of the Area dialog (see Figure 19). From here you can modify existing colors or create your own.
-[[Image:IG6-9.png|thumb|none|500px|Figure 19: Customizing the color palette.]]
-Depending on the color model (RGB or CMYK can be selected from the pull down menu) in use you can change the individual values of the constitutent colors - Red, Green and Blue or Cyan Magenta, Yellow and Black. Click on Add to add this color to the color table. Clicking on the Modify button will change the values to those on the screen. The Edit button allows you to fine tune the color using a palette with visual feedback.
-Further explanation about color palettes can be found in Chapter 8 (Tips and Tricks).
-=== Creating your own gradient ===
-On the Area dialog, click on the '''Gradients''' tab. From here you can modify existing gradients or create your own.
-[[Image:IG6-11.png|thumb|none|500px|Figure 20: Customizing gradients.]]
-A gradient works by creating a smooth transition from one color to another. First you need to choose two colors.
-[[Image:DG4-21.png|thumb|none|500px|Figure 21: Choosing colors for a gradient.]]
-Then choose a type of gradient. There are several available (Linear, Axial, Radial, etc) and each has up to four different options to specify it in detail. For example, a radial gradient has a center you can specify (see Figure 22).
-[[Image:DG4-22.png|thumb|none|500px|Figure 22: Center option in a radial gradient.]]
-Figure 23 shows how an ellipsoid gradient is rotated, moved vertically and horizontally and the color of the border area varied.
-[[Image:DG4-23.png|thumb|none|500px|Figure 23: Center, Angle and Border options for a gradient.]]
-=== Creating your own hatching (line pattern) ===
-On the Area dialog, click on the '''Hatching''' tab. From here you can modify existing hatchings (line patterns) or create your own.
-[[Image:IG6-15.png|thumb|none|500px|Figure 24: Modifying hatchings.]]
-You can customize options like the spacing between lines, the angle and the color of the lines. There is no way to edit the line thickness.
-=== Creating your own bitmap fill ===
-You can add your own bitmap images to fill an area. First you need to create the bitmap image. This could be a photo or another sketch you have created in another program. For example, you can draw something with Draw and '''export''' it as a PNG format image file (Create the image, select it, then '''File''' > '''Export...''', choose PNG from the pull down list of File Formats, give it a name and save it).
-[[Image:DG4-25.png|thumb|none|500px|Figure 25: Exporting a Draw object.]]
-To use an image as a bitmap fill, open the Area dialog and click on the '''Bitmaps''' tab. From here you can add new bitmap images to serve as area fills.
-[[Image:DG4-26.png|thumb|none|500px|Figure 26: Adding your own bitmap images.]]
-Click on '''Import''' and choose a file you previously saved. Give it a distinguishing name that will make it easy to remember. The last imported image will appear at the bottom of the pulldown list of bitmap fills. Now you can use that image as an area fill.
-[[Image:DG4-27.png|thumb|none|500px|Figure 27: Adding your own bitmap images.]]
-{{Documentation/Tip|If the imported image seems to be very small in the preview in Figure 26 probably you forgot to select the image before you exported it. The exported image was then the whole page with a (small) drawing on it.}}
-=== Customizing shadows ===
-First select the object you want to apply a custom shadow to. Open the Area dialog and go to the '''Shadow''' tab. Here you can customize the shadow’s position, distance and color.
-[[Image:IG6-20.png|thumb|none|500px|Figure 28: Customizing shadows.]]
-Shadows can also have transparency, so that the shadow will not hide objects behind it.
-[[Image:IG6-21.png|thumb|none|500px|Figure 29: Shadow with 50% transparency.]]
-=== Adding transparency ===
-You can make objects partly or fully transparent, or even a with a varying degree of transparency (as a gradient). On the '''Transparency''' tab, choose Transparency (for a uniform transparency) or Gradient for a gradient transparency.
-[[Image:DG4-c.png]]
-An example of gradient transparency is shown below. See also [[#Dynamic gradients|Dynamic gradients]].
-[[Image:DG4-30.png|thumb|none|500px|Figure 30: Example of gradient transparency.]]
-= Using styles =
-Suppose that you want to apply the same area fill, line thickness and border to a set of objects. This repetitive process can be greatly simplified by the use of styles. Styles allow you to define a formatting template (a style) and then to apply that style to multiple objects. For more about styles, see Chapter 6 (Introduction to Styles) in the ''Writer Guide''.
-Click on the [[Image:StylesIcon.png]] icon on the Function Bar or press the ''F11'' key to open the Styles and Formatting window. This window can be docked to the left or right side of the main Draw window, if you wish.
-[[Image:IG2-1.png]]
-=== Creating a new style ===
-Select an object and customize the area fill and border. When you are satisfied, click on the [[Image:]] icon on the Styles and Formatting window. This defines a new style based on the selected object. Type a name for the new style and click '''OK'''.
-=== Applying a style ===
-Once the new style is defined, you can apply it to other objects. Select another object and double-click on the style name you defined. The new object will acquire the area fill and line properties of that style.
-{{Documentation/Tip|What happens if I modify a style after it has been applied? Then every object with that style is updated automatically!}}
-=== How to modify a style ===
-Modifying a style is similar to creating a new style. Select an object '''with that style''' and change the area and line properties. When satisfied, click on the Update Style icon [[Image:]] .
-= Special effects =
-First make sure that the '''Drawing toolbar''' is selected ('''View > Toolbars > Drawing'''). On the Drawing toolbar, locate the '''Effects''' icon [[Image:EffectsIcon.png]]. Click on the '''arrow''' next to that icon. This opens a submenu with all the special effect tools (see below).
-[[Image:DG4-e.png]]
-'''1''' Rotate '''2''' Flip '''3 '''In 3D Rotation Object '''4''' Set in Circle (Perspective) '''5''' Set to Circle (Slant) '''6''' Distort '''7''' Transparency '''8''' Gradient
-The tools are described in the following sections with the exception of the 3D rotation tool, which is described in Chapter 7 of this Guide.
-== Rotating an object ==
-Click on the [[Image:RotateIcon.png]] icon to select the Rotate tool. Then select an object. The selected object will have red handles instead of the usual green handles.
-{|
-|-valign="top"
-| [[Image:RotateEx1.png]]
-| Grab one of the handles and move it to rotate the object. The black circle in the middle of the object is the pivot (center of rotation). You can move the pivot with the mouse.
-| [[Image:RotateEx2.png]]
-|}
-== Flip an object ==
-Select an object and click on the Flip icon [[Image:FlipIcon.png]]. You will see a dashed line through the middle of the object.
-[[Image:DG4-f.png]]
-This dashed line is the '''axis of symmetry'''. The object will be reflected about this line. Move one or both ends of the line with your mouse to set the axis,
-[[Image:DG4-g.png]]
-Then grab any one of the 8 green handles and move it across to the other side of the dashed line. The new position of the figure is shown dashed until the mouse is released.
-[[Image:DG4-h.png]]
-{{Documentation/Note|If you press the ''Shift'' key while moving the line, the line will rotate in 45 degree increments.}}
-== Mirror copies ==
-Officially this useful command does not (yet) exist in Draw. It can however be easily emulated. Move the axis of symmetry to the desired location of the mirror axis. Copy the object to the clipboard. Flip the object, then click on an empty area of the Draw screen in order to de-select the object. Paste from the clipboard to put a copy of the object in its original location and now you have a mirror copy.
-[[Image:DG4-31.png|thumb|none|500px|Figure 31: Making a mirror copy of an object.]]
-== Distorting an image ==
-There are three tools on the Effects menu that let you drag the corners and edges of an object to distort the image.
-The '''Distort''' tool distorts an object in perspective, the '''Set to circle (slant)''' and '''Set in circle (perspective)''' tools both create a pseudo three-dimensional effect.
-The results of using these tools are shown in the following figures.
-=== Distort an object ===
-Select an object and click on the Distort icon [[Image:DistortIcon.png]]. Draw will ask if you want to transform the object to a curve. This is a necessary step before distortion, so click '''Yes'''. Then you can move the object handles to stretch it.
-The corner handles distort as shown in Figure 32. The midpoint handles distort the figure either horizontally (handle on vertical side of figure) or vertically (handle on horizontal side of figure).
-[[Image:DG4-32.png|thumb|none|500px|Figure 32: Distort an image.]]
-=== Set in circle (perspective) ===
-Select an object and click on the [[Image:SetCircleIcon.png]] icon. Draw will ask if you want to transform the object to a curve. This is a necessary step before distortion, so click '''Yes'''. Then you can move the object handles to give a pseudo three-dimensional perspective (see Figure 33).
-[[Image:DG4-33.png|thumb|none|500px|Figure 33: Set an image in a circle with perspective]]
-=== Set to circle (slant) ===
-Select an object and click on the [[Image:SlantIcon.png]] icon. Draw will ask if you want to transform the object to a curve. This is a necessary step before distortion, so click '''Yes'''. Then you can move the object handles to give a pseudo three-dimensional slant perspective (see Figure 34).
-[[Image:DG4-34.png|thumb|none|500px|Figure 34: Set an image to a circle with slant perspective.]]
-{{Documentation/Note|Transforming an object into a curve is a safe operation, but it cannot be reversed other than by clicking the '''Undo''' button.}}
-== Dynamic gradients ==
-You can control transparency gradients in the same manner as color gradients. Both types of gradient can be used together. With a transparency gradient the direction and degree of an object’s fill color changes from opaque to transparent (in a regular gradient, the fill changes from one color to another, but the degree of transparency remains the same).
-If you have assigned transparency to an object with a color fill, you can control the transparency by clicking on the transparency icon [[Image:TransparencyIcon.png]]. To define a transparent gradient, select an object, choose a transparency fill from the Line and Filling toolbar, The transparency icon is now active. When you click on this icon, a dashed line connecting two squares appears on the object. Move the two squares to modify the gradient. You can define the direction of the gradient (vertical, horizontal, or at any angle) and the spot at which the transparency begins.
-In the same manner, to define a regular gradient, select an object, choose a gradient fill from the Line and Filling toolbar, The gradient icon [[Image:GradientIcon.png]] is now active. When you click on the gradient icon, a dashed line connecting two squares appears on the object, just as it does for a transparency gradient.
-In both cases a dashed line connecting two small squares appears on top of the object. Click outside the object to set the gradient.
-{{Documentation/Note|If the transparency and gradient icons are not visible, you can display them using '''View > Toolbars > Mode'''.
-Moving the squares will have different effects depending on the type of gradient. For example, for a linear gradient, the start and end squares of the gradient will always be situated to either side of the center point of the object.}}
-The three examples in Figure 35 demonstrate how the type and degree of transparency can be controlled.
-{|
-|-valign="top"
-| [[Image:DG4-35a.png]]
-|A single color object and a transparency gradient, covering part of the underlying object.
-The gradient can be dynamically adjusted, made more transparent by moving the white square or more opaque by moving the black square.
-|-valign="top"
-| [[Image:DG4-35b.png]]
-|An object with a color gradient, completely covering another object.
-The gradient is adjusted dynamically by moving the squares – the color of the square relating to the increase or decrease in that color.
-|-valign="top"
-| [[Image:DG4-35c.png]]
-|An object with both color and transparency gradients, partly covering the underlying object.
-|}
-''Figure 35: Dynamic gradients.''
-{{Manual}}
 [[Category:Draw Guide (Documentation)]]