.

Drawing Tutorial

The following information is also available in video form on our YouTube Tutorial Playlist. To begin a new <diff/>tag, follow the instructions at Starting a new <diff/>tag. To create a <diff/>tag collaboration, which will allow you to use the following tools in a shared drawing space with friends, which updates in real time without reloading the page, check out our Collaboration Tutorial.

The following describes how each draw button may be used. "Draw mode" must be turned on, and "Drawing Tools" must be open for any of these features to work. "Draw Mode" cannot be activated on any secure page (pages that have "https" instead of "http" in the URL bar). When "Draw Mode" is highlighted in red, it is turned OFF. When it is highlighted in green, it is turned ON. Similarly, when "Drawing Tools" is highlighted in red, it is turned OFF. When it is highlighted in green, it is turned ON.

*The selection tool is essential to understand. It is used for stopping the drawing process when using any drawing tool, including the YouTube Tool, and for making changes to any part of your drawing.

INDEX

 

Draw Button Tutorial:

Modification Tools
View Tool

View Tool
The view tool may be used to view your <diff/>tag without the ability to select any objects, or make changes. When a shape is linked, the view tool will allow you to click on the shape to go to the link, without having to wait for the link to pop up. On Internet Explorer, it may also allow you to click on links on the underlying page (if you are tagging another site), while still being able to view your <diff/>tag drawing.

Back to Top|Draw Button Top|Toolbar Options Top

Selection Tool

Selection Tool
This is the SELECTION button. After clicking on this button in the DRAWING TOOLS WINDOW, you will be in SELECTION MODE. SELECTION MODE allows for shapes to be selected and customized by clicking on a button that creates shapes, such as the rectangle, ellipse, etc buttons. When a shape is selected, an outline box (border) will appear around the selected shape. You will note that there are small blue squares around the box, and a small blue circle above the box.

Resize the shape by placing the cursor on the blue square, left mouse click, and hold down the mouse button, then drag. By using the same mouse technique on the blue circle, you'll be able to rotate the shape.

Another way to select items is by clicking and holding the mouse button down anywhere on the page that does not contain a shape, then dragging the mouse. As you drag you will see a transparent light blue box begin to form. Drag the box to completely cover any shapes you would like to select. You release the mouse button, those items will be selected, and you will be able to edit the size and rotation of all those items, or Copy, Paste, or Delete all of the items in the shaded area.

Add or remove shapes from your selection by holding down the shift key, then either clicking on or dragging a selection box over items you would like to add or remove from your selection.

Another select button option: Double-click on any shape or line, and a text box will appear. Set or edit text within the selected shape. Read more under "Text Tool" below, and the text options section at the bottom of this page.

Back to Top|Draw Button Top|Toolbar Options Top

Copy Tool

Copy Tool
The copy tool may be used to copy shapes on your <diff/>tag, so that you may paste them. First, use the Selection Tool (described above) to select shapes you would like to copy. Then press the Copy Tool button. Alternatively, you may hold down the Ctrl key on your keyboard while pressing the "C" key to perform the same function.

You will not see a change on the screen, but the shapes have been copied to your clipboard. You may then use the Paste Tool (described next) to paste the shapes you have copied.

Back to Top|Draw Button Top|Toolbar Options Top

Paste Tool

Paste Tool
The paste tool may be used in conjunction with the Copy Tool (described above) to make copies of shapes you have created. Use the Copy Tool (described above) to copy shapes you wish to duplicate. The press the Paste Tool (alternatively, you can hold down the Ctrl key on your keyboard while pressing the "V" key) to paste the shapes onto your <diff/>tag. You may then move the duplicates around, and make changes to them as you would with any other shape.

Back to Top|Draw Button Top|Toolbar Options Top

Delete Tool

Delete Tool
The delete tool may be used to delete selected shapes. Use the Selection Tool (described above) to select the shapes you wish to delete, the press the Delete Tool Button to delete the shapes. Alternatively, you may press the Delete key on your keyboard to delete selected shapes.

Back to Top|Draw Button Top|Toolbar Options Top

Specialty Tools
Embed Tool

Embed Tool
The Embed Tool will allow you to put any widget on your <diff/>tag. To do this, click on the Embed Tool. The usual "Fill" and "Line" items in the toolbar will be replaced by an "Embed Code" textbox. Open up a new browser window, and go to any site that has widgets with embed codes, such as slide.com or youtube.com. Find a widget you would like to include on your <diff/>tag. Once you find the one you want, copy the embed code for the widget of your choice, then paste it into the "Embed Code" textbox on your <diff/>tag. Click and release once anywhere on the drawing area where you would like to place the widget. You will not be able to change the size or appearance of it.

One important thing to keep in mind is that our system will automatically strip tags and attributes that are not allowed in the code. The only tags allowed are <embed>, <object>, <a>, and <div>. The style attribute is stripped from all of these, so you want to make sure to replace style attributes that contain width and height information with width and height attributes if your widget does not display properly. For example, if your <embed> tag contains the attribute style="width:300;height:400;", and your widget is not displaying at the correct size, replace the style attribute with the attributes width="300" and height="400".

Back to Top|Draw Button Top|Toolbar Options Top

YouTube Tool

YouTube Tool
Use this button to place YouTube videos of any size or shape on your <diff/>tag.

Option One:

a. When you press the YouTube Tool button, the usual "Fill" and "Line" items in the toolbar will be replaced by a "YouTube URL" textbox.

b. Find a YouTube video on youtube.com and copy the URL from the URL bar on your browser.

c. Paste the URL into the YouTube URL textbox on your <diff/>tag by clicking in the textbox with your right mouse button, and choosing "Paste" from the drop-down menu.

d. Then click and hold the left mouse button in the drawing area, and drag a shape (it will be a square or rectangle).

e. When you release the mouse button, the video you chose will come up and conform to the shape you drew; it may take a few seconds to appear.

Option Two:

a. When you press the YouTube Tool button, the usual "Fill" and "Line" items in the toolbar will be replaced by a "YouTube URL" textbox..

b. Click on the YouTube button, then draw the rectangle shape that will hold the video as described in (d) above.

c. Enter the YouTube URL as described in (b) and (c) above, and click the Update button.

d. This will cause the YouTube video to come up within the shape you already drew.

When in SELECTION MODE, you can grab the video by placing your mouse over the sides of the video, just outside the edges of the video itself. You will see the cursor change into a Move cursor (four arrows pointing in all directions). You can select the video by clicking in this area. The will allow you to move and size the video, as you would with any other shape. You can also change these properties, as well as the video itself by changing the YouTube URL, Width, Height, X, and Y in the toolbar and clicking the Update button.

Back to Top|Draw Button Top|Toolbar Options Top

Odeo Tool

Odeo Tool
The Odeo Tool will allow you to put an odeo.com sound player on your <diff/>tag. To do this, click on the Odeo Tool. The usual "Fill" and "Line" items in the toolbar will be replaced by an "Odeo Embed Code" textbox. Open up a new browser window, and go to odeo.com. Find a sound file you would like to include on your <diff/>tag. Once you find the one you want, click on their "Embedded Player" link. Copy the embed code for the player of your choice, then paste it into the "Odeo Embed Code" textbox on your <diff/>tag. Click and release once anywhere on the drawing area where you would like to place the player. You will not be able to change the size or appearance of it.

Back to Top|Draw Button Top|Toolbar Options Top

Flickr Tool

Flickr Tool
The Flickr Tool will allow you to put a flickr.com photo on your <diff/>tag. To do this, click on the Flickr Tool. The usual "Fill" and "Line" items in the toolbar will be replaced by a "Flickr URL" textbox. Open up a new browser window, and go to flickr.com. Find a photo you would like to include on your <diff/>tag. Once you find the one you want, copy the URL of the photo (from the main page for the photo), then paste it into the "Flickr URL" textbox on your <diff/>tag. Since Flickr creates different sizes for each image, we also provide a "Size" drop-down. The default is "Medium." Click and release once anywhere on the drawing area where you would like to place the photo. Sometimes the larger sizes of Flickr photos are not available, and you will get an error when trying to place a size that is not available. If that happens, simply choose a smaller size. You may then change the size, location, and rotation of the photo using the directions provided with the Selection Tool above.

One interesting option available with the Flickr Tool is the "As background" checkbox (see the instructions that appear under "Customize Profile" on your personal profile page to learn about using Flickr photos on your profile). When you click that checkbox, you will be able to set the Flickr photo you entered as the background image for your entire <diff/>tag. When you check the "As background" checkbox, more options will appear. The location table allows you to choose the location on the page where the image will appear in the background. The Repeat from top and Repeat from left checkboxes allow you to choose whether the image should repeat from top to bottom or left to right, respectively. The "Image Attachment" options allow you to choose whther the image should scroll with the page when the page is scrolled (Scroll option), or should be fixed to the page without the appearance of movement when the page is scrolled (Fixed option).

Back to Top|Draw Button Top|Toolbar Options Top

Image Tool

Image Tool
Use the Image Tool to put images you have uploaded to difftag.com on your <diff/>tag. When you press the Image Tool button, a new box will open which includes thumbnails of all the images you have uploaded to difftag.com. Hold down your left moust button on one of the images, and drag the image to your drawing space. When the thumbnail jumps back to its original position, this means your image has been placed on your <diff/>tag. It may take a few seconds to appear if it is a large image. It will appear twice as big as the thumbnail, but is generated from the original image. Use the Selection Tool options (described above) to change the location, size, and rotation of your image.

Back to Top|Draw Button Top|Toolbar Options Top

Text Tool

Text Tool
To create text, click on the text button. To place the text on the drawing area, you must create a text area by left-clicking and holding the mouse button and dragging a shape (square or rectangle). Release the mouse button, and the text can then be typed within the shape. When the mouse button is released, look up to the left in the tool bar area, and you will see additional text options. Mouse over the buttons to view the options. When selecting certain options such as right justification, they are not always immediately visible on the text you are currently editing, but each button that is selected will have a black border around it to indicate that it is currently selected.

To finalize your work, or to finalize changes, click once outside the text box.

Read more about text options at the bottom of this page.
Back to Top|Draw Button Top|Toolbar Options Top

Drawing Tools
Custom Shape Tool Custom Shape Tool
Use this button to create a custom shape. Simply click and release your left mouse button to create the starting point for your custom shape. Click and release again on another spot to create the second point, and a line between the first and second points will appear. Continue in this way until you have completed your shape. You may close the shape by clicking on the starting point (highlighted in red). If you close the shape, you will be able to begin another custom shape. This is not required, however. If you do not want to close the shape, you may choose another tool to get out of custom shape mode, which will finish your custom shape without closing it. If you would like to make changes to your custom shape, click on the Selection Tool, then click on the custom shape you would like to change to select it. You will then be able to change its size, location, rotation, fill color, border color, and border size.
Back to Top|Draw Button Top|Toolbar Options Top
Rectangle Tool Rectangle Tool
Use this button to create simple rectangles and squares. Simply click and hold your left mouse button down, and drag your cursor over the area you would like your rectangle to go. When you release the mouse button, your rectangle will be completed. You will still be in rectangle mode, so clicking and dragging again will produce another rectangle. If you would like to change your rectangle, click on the Selection Tool, then click on the rectangle you would like to change to select it. You will then be able to change its size, location, rotation, fill color, border color, and border size.
Back to Top|Draw Button Top|Toolbar Options Top
Rounded Rectangle Tool Rounded Rectangle Tool
Use this button to create rounded rectangles (rectangles with rounded corners). Simply click and hold your left mouse button down, and drag your cursor over the area you would like your rounded rectangle to go. When you release the mouse button, your rounded rectangle will be completed. You will still be in rounded rectangle mode, so clicking and dragging again will produce another rounded rectangle. If you would like to change your rounded rectangle, click on the Selection Tool, then click on the rounded rectangle you would like to change to select it. You will then be able to change its size, location, rotation, fill color, border color, and border size.
Back to Top|Draw Button Top|Toolbar Options Top
Ellipse Tool Ellipse Tool
Use this button to create simple ellipses and circles. Simply click and hold your left mouse button down, and drag your cursor over the area you would like your ellipse to go. When you release the mouse button, your ellipse will be completed. You will still be in ellipse mode, so clicking and dragging again will produce another ellipse. If you would like to change your ellipse, click on the Selection Tool, then click on the ellipse you would like to change to select it. You will then be able to change its size, location, rotation, fill color, border color, and border size.
Back to Top|Draw Button Top|Toolbar Options Top
Pencil Tool Pencil Tool
Use this button to draw totally free-form lines.
Back to Top|Draw Button Top|Toolbar Options Top
Straight Line Tool Straight Line Tool
Use this button to draw straight lines.
Back to Top|Draw Button Top|Toolbar Options Top
Curved Line Tool Curved Line Tool
Use this button to draw curved lines. Create a line, then grab the "handles" by clicking and holding down the left mouse button on one of the small circles next to the end points, and use the cursor to drag the line into a curve.
Back to Top|Draw Button Top|Toolbar Options Top
Layering Tools
Layers Palette Tool Layers Palette Tool
Use this button to open your Layers Palette window. From the Layers Palette, you can make shapes appear above or below other shapes. The shapes are labeled by their current layers, and windows are labeled by the name of the window. When you move your mouse over each of the labeled items in the list, you will see that your cursor will change from an arrow to a move cursor (a group of four arrows pointing in each direction). You can click and hold your left mouse button on any label, then drag it above or below other labels in the list. release the mouse button to drop the label in a new place int he list. This will move the shape with that label to the new layer you have selected, and it will appear behind all the labeled shapes that are above it in the list, and above all the shapes that are below it in the list.
Back to Top|Draw Button Top|Toolbar Options Top
Send Back Tool Send To Back Tool
Use this button to make the currently selected shape or shapes move to the back of all the other layers, so that they appear to be behind all the other shapes.
Back to Top|Draw Button Top|Toolbar Options Top
Bring Front Tool Bring To Front Tool
Use this button to make the currently selected shape or shapes move to the front of all the other layers, so that they appear to be in front of all the other shapes.
Back to Top|Draw Button Top|Toolbar Options Top
File Tools
Save Tool Save Tool
Use this button to save your <diff/>tag. If you are saving this <diff/>tag for the first time, you will be presented with a small window, where you can enter the name of your <diff/>tag. You must enter a name and press OK before your <diff/>tag will be saved. Once it is saved the first time, you will not be presented with a window on future saves.

After your <diff/>tag is saved for the first time, you can perform other functions on it. When you open your <diff/>tag again, you will see a "More Options" link at the top. See the "More Options" item below for more information.
Back to Top|Draw Button Top|Toolbar Options Top

New difftag Tool New <diff/>tag Tool
Use the New button to create a new <diff/>tag on the current page. If you are tagging up an external website page, this will start a new <diff/>tag on that page.
Back to Top|Draw Button Top|Toolbar Options Top
Default Tool Default <diff/>tag Tool
Use this button to save the current <diff/>tag, and also make it your default <diff/>tag.
Back to Top|Draw Button Top|Toolbar Options Top
Default Profile Tool Default Profile Tool
Use this button to save the current <diff/>tag, and also make it your default profile.
Back to Top|Draw Button Top|Toolbar Options Top

More Information Link
The More Info link will bring up additional information about the <diff/>tag. This link will only be available after you have saved your <diff/>tag for the first time. Clicking on it will replace your usual drawing options with the name and description of the <diff/>tag. Alternatively, you can simply place your mouse over the link without clicking, and the name and description will pop up in an information bar next to your cursor.
Back to Top|Draw Button Top|Toolbar Options Top


More Options Button
The More Options link will bring up additional options available for your <diff/>tag. This link will only be available after you have saved your <diff/>tag for the first time. Clicking on it will replace your usual drawing options with the following options:
Back to Top|Draw Button Top|Toolbar Options Top


More Options
These are the options that display, replacing the drawing options, when you click on the "More Options" link. At the top is the "Drawing Options" link, which will take you back to the drawing options. The "Update settings for this difftag" link will only be visible when you are the owner of the <diff/>tag you are currently viewing. This will open a new window, and will allow you to set a new name for your <diff/>tag, a description, and whether to allow comments. It will also allow you to send the <diff/>tag to any groups of which you are a member.

The yellow content points section tells you how many content points this <diff/>tag has, and the green plus sign underneath is a button that you can press to award a content point to the <diff/>tag you are currently viewing. Each person can award only one content point to each <diff/>tag.

The other links are mostly self-explanatory. If the <diff/>tag you are currently viewing is offensive, you can click on the "Report abuse" link to report it. The administrators will review it to consider whether to remove it. Pressing on the "Add to favorites" link will add it to your favorites list, which you can access from your "My Account" page. Clicking on "Add Comment" will allow you to add a comment to the current <diff/>tag. "Email this page" will allow you to email the current <diff/>tag to friends. "Send a message to this user" will allow you to send a private message to the user who created the <diff/>tag you ar currently viewing. Finally, the number of reads shown at the end in gray, tells you how many people have viewed the current <diff/>tag.
Back to Top|Draw Button Top|Toolbar Options Top


difftag Drop-Down

Put your mouse over the <diff/>tag drop-down above to show options you can use while creating a <diff/>tag.

When the "Draw Mode" link has a star (*) next to it, it means you are in draw mode. In draw mode, you have access to all drawing functions, but you do not have access to some of the other things on the page. On the home page, you have access to everything on the page. On pages with other content, such as the "Help" page, you will be able to see the content, but you will not be able to click on any of the links on the page.

When the "Draw Mode" link does not have a star (*) next to it, it means that draw mode is off. Your drawing will be hidden, and all additional windows you have opened within the drawing area will be hidden as well. Your drawing has NOT been deleted! Simply click the "Draw Mode" link again to show your drawing again. When draw mode is off, you will have access to all other features of the page that you were not able to access while draw mode was on.

When the "Content" link has a star (*) next to it, it means the content on the page is visible. When it does not have a star (*) next to it, it means the content on the page is not visible. This is useful for giving you a blank drawing space. When you are tagging another page on the Internet using a <diff/>tag It! bookmarklet, the content of the page you are tagging will not go away, but the ads on either side will go away, which is still usefull

Click the "Header" link to show or hide the top header of the page.

When the "Header" link has a star (*) next to it, it means the Header is visible. When it does not have a star (*) next to it, it means the Header is not visible. This is useful for giving you a larger visible drawing space.

Click the "Blank Canvas" link to show or hide the content and header of the page. This is the same as clicking both the "Header" and "Content" links at once.

When the "Blank Canvas" link has a star (*) next to it, it means that you have a blank canvas. Creating a blank canvas is the same as turning off content and the header (see the "Content" and "header" links above). When it does not have a star (*) next to it, it means that either the header or content (or both) area is visible, so that you do not have a blank drawing space. Pressing "Blank Canvas" will not take away an outside Internet page you are difftaging through the <diff/>tag It! bookmarklet.

Click the "Compatibility" link to show or hide the compatibility form.

When the "Compatibility" link has a star (*) next to it, it means the compatibility form is visible. When it does not have a star (*) next to it, it means the compatibility form is not visible. The compatibility form may be used to send difftag.com staff more information about your syste, and how well it works with this site. This can help us to improve the site.

Back to Top|Draw Button Top|Toolbar Options Top


Fill

The Fill option is available in draw mode unless you have clicked on "More Options", or are in Text mode. It is only valid for shapes, such as rectangles, circles, and ellipses. It is not valid for lines, or for filling in free-form shapes you have created using lines (to do this, you can fill in the free-form area using additional lines with a large thickness). To fill a shape with a color, simply click in the box next to the "Fill" label, and a color picker will drop down. As you move your mouse along the color picker, the box on the left will change color. You can find out more about the color picker below.

Back to Top|Draw Button Top|Toolbar Options Top


Line

The Line option is available in draw mode unless you have clicked on "More Options", or are in Text mode. It is valid for all shape and line types, such as rectangles, circles, ellipses, pencil, straight lines, and curved lines. When a shape type rather than a line type is selected, this option will change the color and thickness of the border for that shape. When a line type is selected, it will change the color and thickness of the line itself.

To change the color of the line or border, simply click in the color box to the right of the "Line" label. This will cause a color picker to drop down. You can find out more about the color picker below.

To change the thickness of the line or border, use the drop-down to the right of the color box to choose the width you would like.

Back to Top|Draw Button Top|Toolbar Options Top


Small Color Picker

The small color picker will automatically show when you click in either the Fill or Line box.

As you move your mouse over the colors in the color bar, the color of the box on the left (white in the image above) will change to whatever color your mouse is over. When you click with your left mouse button, the color you choose will be the color showing in the in that box.

Sometimes the color picker will malfunction if you move the window too far down on the page. If the box on the left is not changing color as you move your mouse over the colors, it is an indication that the color picker is malfunctioning. simply scroll the entire page back to the top and try again.

Clicking on the small square button on the far right will open the large color picker, which you can find out more about below:

Back to Top|Draw Button Top|Toolbar Options Top


Large Color Picker

The large color picker makes it easy to choose exactly the color your want. Click in the large color area to choose the color you want. Just to the right of the large color area is the vertical color family bar. You can either click directly on a color, or slide the arrows up and down to choose a color family. This does not choose a color. It simply brings up a new color family in the large color area on the right. You must then click somewhere in the large color area to choose the color you wish.

Once you have chosen a color, the upper half of the small color box in the upper right will change to the new color you have chosen, and two small icons may appear next to the small color box, as shown above. The bottom half of the box will remain the same color you had chosen before bringing up the color picker. You can click on the bottom half of the box to change the color back to the original color.

If the small icons appear next to the box, it means that the color you have chosen is not a web-safe color. To choose the closest web-safe version of the color you have chosen, click on either of these small icons. Another option is to check the "Only Web Colors" box at the bottom of the color picker. With this box checked, the closest web safe version of the color you pick will always be selected.

You may also choose a color by filling in the "R", "G", and "B" values. Each of these values can be in the range 0 to 255. It is better not to use these unless you know what you are doing.

To finalize your color selection, click the "OK" button. If you change your mind, and would rather not select a new color, click the "Cancel" button. The next time you click in any color box to bring up the color picker, the large color picker will show again unless you click on the small button in the lower right corner to bring up the small color picker again.

Back to Top|Draw Button Top|Toolbar Options Top


Sapce Used Bar

The "Space used" bar shows how much space you are using on the server to save your <diff/>tags. If you start to run out of space and would like to buy more, simply click on the "Buy more" link to buy more space for a very small monthly fee.

Back to Top|Draw Button Top|Toolbar Options Top


Link

The URL (Link) option is available in draw mode unless you have clicked on "More Options", or are in Text mode. It is valid for all shape and line types, such as rectangles, circles, ellipses, pencil, straight lines, and curved lines.

To make any shape link to another page, enter the URL in this box and press the "Update" button (shown below). This will add a link to the image so that in View mode, the shape will link when clicked, and in any other mode, the link will pop up when you mouse over the shape. You may put a fully qualified URL (including the http://) to link to and external page, and a non fully qualified URL to point to another page on difftag.com.

Back to Top|Draw Button Top|Toolbar Options Top


Shape Properties

When you draw or select any shape, the shape properties shown above will be displayed. As you modify any shape, these values will change to the new values. If you would like to change a shape to an exact size, position or rotation without moving the shape itself, you may change the values in any of these boxes to change them. The width and height values will change the size (this is also a good way to create an exact square or circle by making the values the same, since it is more difficult to get it exactly right with your mouse), the X value will change the location of your shape from the left side of the drawing area, and and the Y value will change the location of the shape from the top of the drawing area. The Rotation value will change the rotation of your shape. Any value between 0 and 359 is acceptable. All values must be non-negative.

Click the update button to submit your changes. The update button will also change your YouTube URL if your currently selected item is a YouTube video.

Back to Top|Draw Button Top|Toolbar Options Top


Page Properties

Whenever there is no shape selected or currently being drawn, the "Page Properties" will show instead of the shape properties. You may change the width and height of your entire drawing area by changing the values above, the clicking on the Update button.

Back to Top|Draw Button Top|Toolbar Options Top


Font Options

While typing text using the Text Tool, all the usual Fill, Line, and Page and Shape Properties will be replaced with the information above. You can change the Font, Size, and Color of the text you are currently typing using the options above. To change the font and size of your text, simply choose them from the drop downs, as shown above. To change the color, simply click in the color box to the right of the "Color" label. This will bring up a color picker, which you can find out more about above.

The buttons as shown above will perform the folowing actions (from left to right): Bold, Italics, Left-Justify, Center, Right-Justify. When selecting text, any of these options that were selected will have a black border around them. To turn off Bold or Italics, simply press the button again to turn it off. To change the justification, simply choose a different justification option.

Back to Top|Draw Button Top|Toolbar Options Top


    Check this out    
    Syndicate    
Social bookmark this page


RSS Feeds

RSS feeds allow you to keep up-to-date with difftag.com content.

(all content)