· Grid Designer Cloud – This program runs in your browser for free, but you must create a login with a valid email. In the Cloud version your projects/designs are stored in the cloud and you can log in from any device and work on your saved designs.

· Grid Designer Legacy – This program runs in your browser for free and requires no login, but your designs are saved in your local browser storage, on the device and in the browser you are using.

The following table shows the main differences between these two programs:

Feature	Cloud	Legacy
Storage	approximately 60MB of project data (6 x legacy)	Limited to browser local storage size, usually 5MB - 10MB
Login	Email required for login	No login
Editing access	Access your design from any browser on any device	Access your designs from the same device and same browser
Backup of designs	Export facility	Export facility
Basic Editing Features	Same in both cloud and legacy	Same in both cloud and legacy
New Features	New features will be added as time goes on	No new features will be added
URL	https://www.freese-works.com/griddesigner-cloud	https://www.freese-works.com/griddesigner-legacy

More information can be found on my blog at: https://www.freese-works.com . YouTube videos are also available on my YouTube channel at: Grid Designer on YouTube .

The remainder of this document describes the features of the Cloud Grid Designer located at: https://www.freese-works.com/griddesigner-legacy .

You may create a grid of up to 500 x 500 cells for each design. The cells of the grid can be either square or rectangular to correspond to whatever craft you are interested in. Multiple display options, such as numbering and mouse position, aid in working with your grid. Zoom in and zoom out are available as well as a zoom-full-picture that will size the grid to just-fit the editing window so that the complete design is visible.

The drawing tools include a pencil and eraser, for free-hand drawing, as well as a line tool, shape tool, fill tools, outline area tool and text tool. Line size can be modified from 1 to 10 cells in width, to make drawing on larger grids easier. Undo/Redo is unlimited for all drawing tools.

Figure 1 : Drawing Tools

The shape tool allows the creation of simple shapes such as rectangles, circles, triangles, hexagons, diamonds, etc. These shapes can be created as solid shapes of a single color, outlined shapes where only the outline is drawn, or filled shapes with an outline of one color and fill of another color.

Drawing tools use the selected foreground and background colors which are shown on the top toolbar. Foreground color is usually the color used to draw, while the background color is used to fill the grid initially and to erase with.

Figure 2 : Color Selection

You may also open a Floating Palette from the Display > Show Floating Palette option. This places a moveable window containing the foreground and background color selections. You may select foreground and background colors from the Floating Palette instead of using the foreground and background dropdowns on the top toolbar.

Select colors from many pre-defined palettes or add your own colors to any palette. Pre-defined palettes include many commonly used yarns, rug yarn, embroidery floss, etc. One custom palette is also provided where you can add any colors you would like to work with.

Figure 3 : Palette Feature

Complete support for selection , cut, copy, paste within the tool is provided. In addition, the paste contents can be modified with a series of tools that allow you to flip vertically and horizontally, invert colors, and rotate.

A library of small patterns that can be copied into your larger design is also available.

Color substitution is available, to aid in converting a design from one palette to another or just to switch one color for another in your open project.

Figure 4 : Ready to substitute

Figure 5 : Substitute white for blue

Projects can be created from scratch, by selecting either the Project à New Project option or the Project à Create from Image option.

The Project à Create from Image option has a full digitizer to convert any image/photo to a digitized pattern.

Figure 6 : Create from Image Digitization

Sign-up and Login

You must create a login to use the Cloud Grid Designer. The process starts by going to https://www.freese-works.com/griddesigner-cloud . There you will see the login shield with links for login, sign-up and password reset.

Figure 7 : Login Shield

If you are first-time user, simply click the “Click here to login or sign-up” link. This will take you to another page where you will need to enter a first name, email address and password. You must also read and accept the Terms of Use and Privacy Policies to sign-up. You email address will be verified along the way. Simply follow the instructions for sign-up.

At the end of sign-up you will be sent to the login page where you can use your new login/password to login.

Once you have logged in, you will see a user menu on the far right of the top toolbar with your first name on it. You can modify your name and your email address with the options in this menu. You can also log out from there. If you need to change your password, you must logout and then click the “Click here to reset your password” link on the login shield.

Default Project

Once you are logged in and the designer is opened, a default project is created. This project contains a grid of 20 x 20 cells where each cell is square. The “Brights” palette is automatically selected and the background filled with red. The default project makes it easy to get started editing right away. Use this project for practice with the drawing tools.

This project can be reloaded anytime by selecting the Project à close option or pressing the refresh button in your browser’s toolbar. The refresh button may clear other areas of the editor, such as the currently loaded image in the Create from Image option. Use the Project à close option in this case.

Supported Browsers

The following table shows browsers and the operating systems they are supported on:

	MS Edge	Chrome	Firefox	Opera	Samsung Internet	Safari
Windows *	Yes	Yes	Yes	Yes	N/A	N/A
iOS ** (iphone/ipad/mac)	Yes	No	Yes	No	N/A	Yes
Android tablets/phones ***	Yes	Yes	Yes	Yes	Yes	N/A

* -- Tested on Windows 10, should work on browsers with recent windows operating systems.

** -- Tested on iphone 10X, ipad, mac

*** -- Tested on Samsung Galaxy tablet and Google Pixel 4 phone

Internet Explorer will not be supported, as Microsoft is no longer making changes to it and is not supporting it.

I will consider other browsers and operating systems, if there is something specific that you would like to have supported. Please leave me a comment if you have a suggestion.

I am currently working on Android and Iphone apps. Please check back if you are interested in having an app.

Working on a phone or tablet

In general, I expect most users to work on a desktop computer, as this provides the necessary screen space to view and edit designs. However, I am supporting iPad, iPhone and Android devices. See the previous section for browser support on each device. Editing large designs is limited by the amount of memory your particular device provides. I have found that designs up to 100 x 100 in size seem to be editable on all devices. Larger than this size may currently be unworkable on a low-end device.

When working on a tablet or phone, note that the top and bottom toolbars scroll side-to-side to allow you to reach and select all of the tools available on them.

Currently, your projects are saved in the memory of the browser you are using. If you save a project on your desktop computer, it will not be available on your iPad later. A saved project is available only on the device and with the browser that you were using when you saved it.

To move projects from one browser/platform to another see the share option and the export/import options .

Project Menu

On the upper left of the top toolbar, you will find the Project menu. This appears as a button labeled project with a dropdown arrow on the right. Click the project menu button and you will find the following options:

Figure 8 : Project Menu Options

The New Project and the Create from Image options are used to create new projects. Use New Project to define the grid size, cell size and palette for a new project. Use Create from Image to create a project from a jpg or other image file.

To Save your project, use the Save or Save As options. Any project you save can be opened again with the Open option. Projects can also be shared with others using the Share option. The Delete Project option deletes the currently open project and the Delete by List option presents you with a full list of all your projects so that you can delete old or unused projects.

To change the color palette for your project, use the Palette option. This option also allows you to edit palettes and convert an existing drawing to different palette.

Your project grid diagram can also be downloaded to an image file with the Download option or printed with the Print option.

To see the current project’s information, such as grid size, cell size and colors currently used, select the Project Info option.

To export and import your projects (and palette changes) to and from files on your local file system, use the Export and Import options at the bottom of the project menu. These can be used to make a backup file of your projects (and palette changes).

These features will be discussed in detail in the following sections.

New Project

The Project à New Project option opens the New Project Layout dialog shown in Figure 3.

Figure 9 : New Project Layout Dialog

This dialog allows you to select the project type, define the size of that project’s grid and select a palette for your project. Make selections for your project, as described in the following sections and then click the Create Project button to create your project grid.

Project Type

Select the type of project you are working on from the “Select Type of Project” dropdown:

· Cross-stitch embroidery

· Latch-hook rug-making

· Knitting

· Crochet

· Corner-to-corner (C2C) crochet

· Granny Square Crochet

· Diamond Painting

· Quilting with squares

· Grid of Square Cells – use if your project type is not available and you expect to work with square cells, i.e. height equals width for each cell.

· Grid of Rectangular Cells – use if your project type is not available and you expect to work with rectangular cells, i.e. height is different from width for each cell.

Once the project type is selected, the dialog will change to show more options for that project type. For instance, if Cross-stitch is selected as the project type, you can select from pre-defined settings as shown below, or you can enter your own sizing information in the form of number of stitches per inch or cm.

Figure 10 : Selecting Project Type

Follow directions on screen for the project type you have selected.

Enter Rows and Columns

The next section of the New Project Layout dialog allows you to enter the number of rows and columns for your grid. If you have entered information for the project that defines the real world size of the project such as in inches or cms, the Height and Width will be calculated for the project and is shown below the Rows and Columns.

For example, suppose we select cross-stitch and 11 count fabric. This tells us the relationship between your project grid and real-world measurements of inches, because 11 count Aida cloth will have 11 stitches per inch. Then, the size in inches can be computed as you change the number of rows and columns. See the figure below; 50 rows and columns of stitches will be 4.545 inches or a little over 4 ½ inches.

Figure 11 : New Project Size Calculation

If no sizing information is provided in the section above Rows and Columns, then the Ht and Wid fields will be blank.

Select Palette

The final section of the New Project Layout dialog allows you to select a palette for your project.

Figure 12 : Selecting Palette for Project

General palettes represent convenient groupings of colors, but do not correspond to any particular type of yarn or floss. Other palettes correspond to specific real-world yarns or flosses. Types are indicated in the menu. Rug – indicates pre-cut latch hook rug yarn. Yarn – indicates yarn (currently only medium-weight yarns are represented). Floss – indicates embroidery floss.

Changing the Palette

By default, the “Brights” palette is selected and opened with the default project. You may select a palette when you create a new project either through the Project à New Project option or through the Project à Create from Image option. You may also change palettes at any time while working and the Grid Designer will allow you to select the existing colors and substitute colors for them from the new palette.

Selection and modification of color palettes is done by selecting the Palette option from the Project dropdown menu (Project à Palette). The Select Palette dialog will be displayed.

Figure 13 : Select Palette Dialog

On the left is a list of existing palettes. The colors contained in that palette will be displayed in the panel on the right side. You can browse through the palettes by selecting each one and viewing its colors.

Palettes currently are available in the following types:

· Rug – colors from popular pre-cut latch hook rug yarn

· Yarn – colors from popular yarns (currently only worsted weight is represented)

· Floss – colors from embroidery floss (currently DMC and Anchor are represented)

· General – colors following a particular theme that are not associated with a particular yarn or floss.

· Custom – An empty palette you can add your own colors to.

NOTE: All palettes can be modified. You can add new colors and hide existing colors. For more information, see the Modifying a Palette section .

Color labels can be shown by clicking the Show Labels check box above the color list. You can search for colors in the list using the browser’s text search for the page. Often this is initiated with Ctrl+f.

Figure 14 : Select Palette Dialog with color labels shown

To change your project to a different palette, simply select the palette on the left that you want to use, then click the Use Palette button on the bottom right.

The Grid Designer will look to see what colors are currently used in the grid you are working on. If those colors are not found in the palette you have selected, the following dialog will be displayed:

Figure 15 : Merge or Open New Dialog

You can create a new empty project with the new palette, or you can convert the existing colors in your project to the new palette by selecting colors to substitute for the old colors.

NOTE: Both of these actions are NOT undoable. If you want to save any current work, click the Cancel button and save your project before you change the palette.

Selecting Open New Project will clear the current grid and automatically select a foreground color and a background color from the new palette. You can change these manually.

Selecting Convert Current Project will display the Convert to Palette Colors dialog:

Figure 16 : Convert to Palette Colors

This dialog will list each color used in the grid and provide options for each color as follows:

1) If the color in the current grid is found in the new palette , you may keep the color the same or substitute another color for it.

2) If the color in the current grid is NOT found in the new palette , you may add the color to the new palette or substitute another color for it.

You can make the preview picture larger or smaller with the buttons on the top right. On the bottom left is a button labeled “Substitute closest for all”. Clicking this button will substitute the closest color in the new palette for every color used in the old palette that is not already found or is not already substituted. This is particularly useful for projects using many colors.

Example

In the figure above, there are only two colors in the grid, red and white. White was found in the new palette that we have selected; red was NOT found in the new palette we selected.

Suppose first that we want to keep the colors as close as possible to the original. We would keep the white alone, as it can be the same color with the new palette.

To change the red color to one that is in the palette, we click the Substitute button. A popup will be displayed with all the colors in the new palette.

We select the color we would like from the popup. In the picture above, we have selected the Closest checkbox to order the colors according to which is closest to the original color. The Preview picture is updated to show that color substitution:

Note that there is also a button labeled “Substitute closest for all” on the lower right. This button will select the closest color in the new palette for each color that is not found, or not already substituted. This button can be very useful when there are a lot of colors.

Suppose we want to completely change the color scheme. We want the picture to contain a blue letter on a white background. We click the Remove Sub button to remove the current substitution for red.

Then, we can substitute a blue for the white and a white for the red and the preview will show the result.

When we have the preview picture as we would like it, we click the Convert Pattern button. The grid is updated to show the picture with the substitutions. If we have substituted colors for the background and foreground, then the background and foreground selections are updated also.

Note that white is now selected for the background color and blue is now selected for the foreground color in the top toolbar.

NOTE: You can also substitute colors without changing the palette, by selecting the Substitute Colors button on the top toolbar. For more information see section Working with Colors > Substituting Colors .

Create Project from Image

You can create a project by digitizing an image.

See also the YouTube playlist: Step by Step Digitization Using Grid Designer for more detailed examples.

To digitize an image:

1) Select Project à Create from Image option. The Create Project From Image dialog will be displayed.

Figure 17 : Create Project From Image Dialog

2) Click the Select Image button to browse for an image on your device. On my Windows 10 machine with the Chrome browser, the Open dialog is shown and I can browse for and select a picture. This process differs depending upon the device you are using.

Figure 18 : Select Image File

3) Select an image file to use. In the picture above, I have selected a picture of daisies. Then I click the Open button to complete the selection. The image will be loaded and more options will be shown in the Create Project From Image dialog.

4) To begin digitizing the image, select a palette from the options on the right-hand side. Now your image will be digitized with colors from that palette and the digitized picture will appear on the upper right-hand side.

Figure 19 : Daisy Image Loaded

5) Below the loaded image on the left are options to modify the image. You may rotate, flip, crop, change brightness, contrast, saturation and red/green/blue values in the image. You may also create a black and white image based on a threshold value that can be adjusted through a slider. You can also create a grayscale image, invert the colors, sharpen, blur and emboss the image using filters as well as add shading to the edges of the image.

Changes to the original image are undo-able. Click the undo or redo buttons to move back and forth in your changes. If you like changes you have made to your image, you may save a copy of it with the Save Image button. This allows you to reload the modified image at a later time to continue where you left off.

You may crop the picture by clicking the Crop button. A separate panel will come up showing the picture and a selection box to position around the section of the picture you want to crop out.

Figure 20 : Crop Panel

a. There are options on the right for moving and zooming the underlying image. Also, you can fix the Aspect ratio of the selection area under the Aspect Ratio section.

b. When you have the selection positioned correctly, click the Crop button to crop and your selection will be returned to the original dialog. The Reset button will reset the image and selection box to the initial state.

6) Options below the digitized picture on the right allow you to affect how the image is digitized.

a. The first section below the digitized image allows you to select a palette, modify the number of colors used, turn colors off/on, lock colors you want to be used, and substitute one color for another.

Figure 21 : Select Digitization Palette

i. Select the palette you want to use, then adjust the max number of colors used as you wish. You may also reduce the number of colors that are used in only a few cells by adjusting the “Remove colors used in X cells or less” number. This will remove trailing colors that might be used in only a couple of cells. The default value here is 5, but you can increase the number to anything you like.

ii. The list of colors below the palette selection shows the current colors selected from the palette by the digitizer. The list of currently used colors can be sorted in different ways: Most used/Least used as well as A-Z and Z-A.

iii. You can modify this list in three ways, below. All of these can be cleared with the Reset button above the color list.

1. You can turn a color off in the list by clicking on the colored box for the color. You can turn it back on by clicking it again. (Note that colors may move around in the list when you turn them on and off, depending upon the Sort option on the upper right of the color list.)

When you turn a color off, it is the same as removing it from the palette, with respect to the digitizer.

Figure 22 : Dark Green Off

2. You can substitute other colors from the palette for any color in the list. The picture below shows selecting a substitute color for Dark Green.

When you substitute a color for another, the digitizer still uses the original color to digitize, but wherever it finds a use for that color, it will use the substituted color in the final digitized picture.

Figure 23 : Substituting color for Light Lavender

3. You can lock a color to force the digitizer to use it . This is useful when you are trying to reduce colors, but a specific color you want to be used is being removed by the digitizer, when you reduce the number of colors. To lock a color, select the lock on the right side of the color when it appears (usually when the number of colors is larger). The lock will turn green, indicating it will not be removed by the digitizer as you reduce the number of colors.

Figure 24 : Locked Colors

b. The next section below Palette allows you to size your project grid. (Click on the Grid Size link to open this section). If you have not entered any sizing information for your project, you will see “?units” displayed in this section. You may continue to size your project by changing the number of cells horizontally and vertically directly.

Figure 25 : Defining Digitized Grid Size(no units defined)

However, if you want to size your project in inches or centimeters, you will need to define the type of project you are working on and the size of cells in inches or cms. To do this select the Define Units button.

i. The Define Units button will bring up the Change Cell Size dialog where you can select your project type and sizing information. For instance, if you are working on a latch hook project, you would click on the Define Units button, select Latch Hook for project type and then select your canvas type.

Figure 26 : Define Units

ii. Click on Save Changes when you are done and you will be returned to the Create from Image dialog. The grid size information will now be updated with size in inches (or cms). At this point you may enter either number of cells or number of inches for your project.

Figure 27 : Units defined

iii. As you change the number of cells or the number of inches/cms, the other values will be recalculated. As long as the Keep Aspect Ratio is selected, the ratio of the height to width of the digitized image will remain the same as the original image.

iv. If you unselect Keep Aspect Ratio and modify the values, the digitized picture will be stretched or shrunk to fit within the values you define. This allows you to fine tune the final size of your project. For instance, in the Figure above, if you wanted your project size to be exactly 40 x 32 inches, you can unselect Keep Aspect Ratio, and then change the 32.200 value to 32.0. This will remove one row and shrink the image slightly in the vertical direction to fit. Small changes such as this will be unnoticeable in the final project.

c. The last section on the right side of the dialog allows you to change the digitization type and set the method for how colors are removed.

The digitization type can be “Sharp”, “Smooth”, “Block”, “Dithered/Smoothed” or “Dithered/Pixelated”. Click the Digitization Link to open the section. Try your picture with each one to see which you like best with your image.

The method for how colors are removed is labeled “Remove colors that are: “ either Least Distinct or Least Used. Least Distinct works well when there are small areas of color that are distinct from the rest of the picture, such as a dog’s pink tongue or bright colored collar. Least Used will remove colors least used and will result a more homogeneous picture.

For detailed images and photos try “Sharp” or “Smooth”:

Figure 28 : Sharp Digitization

Figure 29 : Smooth Digitization

For images that contain a gradient of colors, such as the sky at sunset or any type of shading or fading of a color, select one of the Dithered options to capture the subtle change in colors across an area.

For instance, here is a sunset first done with the Smooth option, then done with Dithered/Smooth:

Figure 30 : Sunset with Smooth option

Figure 31 : Sunset with Dithered/Smooth option

For simple drawings with areas of solid colors try “Sharp” or “Block”. I find that “Block” seems to give the best shape to a single-color object, but sharp can pick up more details that “Block” does not draw. “Smooth” will create a fuzzy edge to drawings like this which is usually not desirable.

Table 1 : Block vs Sharp

Grid drawings can be imported, depending upon the quality of the grid image. On the left of the figure below, is a rainbow I created in design-a-knit. Setting the number of horizontal cells to the exact number of cells in the grid and making sure the image is trimmed to contain only that grid will allow you to import a grid. Using block in the case below works best, as block looks for the most common color in an area. Block is able to find the colors around the lettering in the grid.

Figure 32 : Importing a grid with block

7) Click the Create Project button when you are ready. A “Processing Image” message will appear at the bottom of the dialog and then the project will be created and the dialog will be removed. If the cell size of the project is small, the grid lines will be turned off in order to better view the final result. You can turn them on again with the Display à Show Grid option if desired.

Figure 33 : Digitized Image

8) If you want to change settings and reprocess the image, you may select the Project à Create from Image option again and the same cropped image you just processed will be there to reprocess with a different palette, etc. Once you refresh the browser page or close and reopen it, the image will be gone from the dialog. You can save an image for later by clicking the Save Image button under the loaded image on the left side of the dialog.

Tips for Working with Images

Here are some tips for using images to create a project:

1) The Grid Designer contains palettes that contain color representations of yarns and floss. These color representations and how they are viewed by a designer is dependent upon a lot of variables. The colors viewed may appear differently on the screen than they would if you had the yarn or the floss immediately in front of you. This is because any variation in lighting when the yarns were photographed, the quality of the camera, or a variation in the brightness of your screen, etc. can affect how a color looks.

Always keep this in mind when purchasing colors for a large project. Purchase a small amount of the colors you believe you need and verify that they look good together before purchasing large amounts for a project.

2) After digitizing the project, you can view the colors used in the project by going to Project à Project Info. This will show the number of colors used and the number of cells each color is used in.

3) To continue editing the project manually with only the colors used in the image, select the Show Used option in the dropdown for Foreground or Background color to reduce the list to only those colors currently used.

Figure 34 : Select Show Used to see only color currently used in grid

4) Once you have created your project, you can do substitutions of one color for another by clicking the Substitute Colors button on the main toolbar. This will bring up a dialog where you can see what colors are used and how many cells, they are used in. You may then substitute one color for another.

5) You may restrict the colors chosen by the image processor, by hiding colors in the palette you are using. For instance, the DMC embroidery floss palette has almost 500 possible colors. To restrict this palette to colors that are more relevant for the image you are using, you may edit the palette under Project à Palette. For instance, you might edit the DMC palette, select the Hide All button, and then Show only those colors you would like to use in the digitization of your image. When the DMC palette is later selected in the Create Project From Image dialog, it will use only the colors you have selected to Show in the palette. This type of restriction can be done with any palette. To remove your changes later, select the Show All button when editing the palette.

Note: that when modifying a palette, such as to hide colors, you will not be able to make any modification to colors that are currently used in an open project. To edit a palette, it is best to close any open project that uses the colors in that palette. Use the Project à Close option for this purpose.

Saving your Project

Your project grid and the current palette being used can be saved using the Project à Save option.

This data is saved a database in the cloud where you can access your designs again from any browser on any device.

The current name of the project you are working on is displayed in the upper left corner of the screen. You can also see the name by selecting Project à Info. The name will be defined if you have previously saved the project, or if you have opened an existing project.

NOTE: I plan to provide an option in the future to store your project in the cloud so that you can access it from any device.

To save your project for the first time:

1) Select Save from the Project menu. The Save dialog will be displayed.

2) Enter a name in the “Save As” field.

3) Click the Save Project button.

4) Your project is saved. You can verify it is saved by selecting the Project à Open option and viewing the list of your saved projects.

To save your project again, once it has been saved or opened from a saved project:

1) Select Save from the Project menu.

2) No dialog will be displayed , the project will be saved under the same name as previously used. This allows you to quickly re-save your project as you work. You can verify it is saved by selecting the Project à Open option and viewing the list of your saved projects.

You can quickly check to see if a project needs to be saved by looking at the project name in the upper left corner of the screen. An asterisk will appear after the name, if the project has changes that need to be saved.

Figure 35 : Checking project status, unsaved (left), saved(right)

If the Save option in the Project dropdown menu is disabled, it means there are no edits or changes to save.

NOTE: Keyboard shortcuts exist for many options in the designer. Ctrl-s or Alt-s will execute the save option. Many of the keyboard shortcuts are visible in the option tooltips. See the Keyboard Shortcuts section for a list of all keyboard shortcuts.

Save As

The Project à Save As option allows you to explicitly provide a name when you save.

To save your project using Save As:

1) Select the Save As option from the Project dropdown menu.

2) If your project already has a name (from a previous save or from opening an existing project), a unique name will be generated for it and placed in the “Save As” field. If no name has previously been used, the “Save As” field will be blank.

3) Edit or enter the name as desired.

4) Click the Save Project button.

5) If a project already exists with the name you entered, you will be asked if you want to replace the project of the same name with your new content.

NOTE: It is possible to run out of space in the cloud for your projects. If you receive and error saying that you have exceeded the limit for storage, you may need to delete projects to make more space using the Project à Delete by List option. If you want to save copies of old projects before deleting them to make more space, use the Export option to save the projects to files on your local file system.

Sharing your Project

You can share any project with another user. Shared projects are temporary and may be deleted after 6 months from the creation of the shared link. You may share the link to the project directly with another user, or you may post the link to the project to a social media platform.

To share the currently opened project:

1) Select Project à Share. A small dialog will appear while data is being generated. No action is needed, when it is done it will continue with the share process.

2) The Share Project dialog will be displayed. This dialog explains that a link will be generated to the project information.

Figure 36 : Share Project Dialog

3) Check the checkbox in the dialog that indicates that you understand that the link you create may be temporary.

4) Click the Share button. The Share Link dialog will be displayed. This shows a link to your project data that may be copied and pasted anywhere you would like it or it can be shared on a social media site.

Figure 37 : Share Link Dialog

5) There are two ways to share the link:

a. If you want to share the link directly in an email or text message, copy and paste the link text to the desired place. Clicking the Copy button will copy the text to your clipboard so you can paste it wherever you want.

b. If you want to share the link on a social media site, such as facebook or twitter, click the facebook, twitter, or + icon to select another social media site and follow the instructions for that site.

6) Click the Close button when done.

When the link is used, it will display a page like the following example:

Figure 38 : Shared Project Example

Four links appear under the picture:

· Pattern – opens a png image file with the grid, this can be different from the image you see on the shared project page. It includes numbering, etc. If there are more than 10 colors in use, the pattern image will have symbols for each color.

· Pattern Key – opens a png image file that contains the color key for the pattern image.

· Pattern PDF – opens a pdf file that contains both the pattern image and the color key. This can be used in other tools such as “knitcompanion”, as you work on your project.

· Load as Project – opens a copy of the shared pattern in the Grid Designer. By default it will open the Cloud Grid Designer. If you want to open the project in the Legacy Grid Designer, select the Legacy Designer checkbox before clicking the Load as Project link. From there you may edit the pattern, download or print it using your own selection of options.

To load a shared project:

1) Click the Load as Project link as shown in the example above. (Clicking the picture in the shared file will also load the project). The default will load into the Cloud Grid Designer. If you want to load it into the Legacy Grid Designer, select the Legacy Designer checkbox before clicking the Load as Project link.

2) Grid Designer will be started in your browser and the Load Project dialog will be displayed.

Figure 39 : Load Project Dialog

3) Click the Load button to load the project. A copy of the original user’s project will be loaded into your Grid Designer. View and edit as desired. Save any changes you make in the normal way, with Project à Save or Save As.

Opening a Project

Projects that have been saved, may be reopened using the Project à Open option.

To open a project, you have previously saved:

1) Select the Open option from the Project dropdown menu. The Open Project dialog will be displayed.

Figure 40 :Open Project Dialog

2) The dialog will show a thumbnail image of each project, the project name, and the project size. Select the project you want to open.

· You may also search for projects in the list by typing in the text box next to the Find button at the top. Then, click the Find button to search for the text in the list. Each time you click the button, the search will move to the next instance of the text in the list. If the text is not found, the text box will show a red border.

3) Click the Open Project button

4) The project is loaded into the grid and the palette set to the palette used when the project was last saved. Foreground and Background color selections are restored to those that were set when the project was saved.

Closing a Project

To close a project, select the Project à close option. A warning will be displayed if your current project has not been saved.

Once your project is closed, the default project will be displayed in its place.

Download your project

You may download the following from the Grid Designer:

· A png file containing an image of the project grid/graph

o This image will be generated with the same settings as for the Print option. See print settings under the More Options section.

· A png file containing an image of the project color key

· A pdf file containing:

o Optional cover page with designer name, date, project title, description and picture of graph as it appears on your screen.

o Optional graph either fit to a single page or full-size and covering multiple pages. The graph image will be generated with the same settings as for the Print option. See print settings under the More Options section.

o Optional color key.

o Optional written directions, these are currently available for crochet and general printing of colors for each row in various ways. For crochet you may also download an estimate of the yarn needed for your project. Crochet directions can be left or right-handed. Also, different options are available for printing color boxes within the text to make reading easier. For example:

Figure 41 : Crochet Directions with color boxes

Figure 42 : Generic Directions list colors for each row

· An XLSX file for Microsoft Excel containing the graph and the color key

o The XLSX file contains three sheets: the color key, the graph with colors and symbols for each cell, the same graph with no symbols.

NOTE: If you do not like working with the colored graph, writing out directions will provide another alternative. If you are interested in having directions written for other types of graphs, please contact me and let me know what you would like to have .

To download your selection:

1) Select Download from the Project dropdown menu. The Download Image Settings dialog will be displayed.

Figure 43 : Download Image Settings dialog

This dialog contains three areas:

· Heavy Lines on Grid – heavy lines drawn over the lighter grid lines to break up the grid into area. The options here are the same as the options for the Display > Rule Lines option. See the Rule Lines section for more information. In addition, you can turn the printing of Crosshairs on and off here also. See more about Crosshairs here ..

· Numbering – options for controlling the way numbering appears around the edges of the project. Numbering is always shown for printing. The numbering options are the same as in Display > More Options. See the More Options section for more information.

· Cell Appearance – cell appearance can be controlled for printing. The Cell Appearance options are generally the same as shown in Display > More Options. See the More Options section for more information.

o You may also turn regular grid lines on and off with the No Regular Grid Lines checkbox.

Select the options you want for your download image, then click the Download button. The Download Project Image dialog will be displayed.

2) There will first be a message saying it is generating the image data:

Figure 44 : Generating Image Data for download

3) When it is done generating the image, it will display:

Figure 45 : Ready to download image

4) Select the option you want: click the type of download you are interested in. The browser will handle the download for the Color Key, Graph Image and XLSX file. If the PDF option is selected, another dialog will be displayed, asking what you would like to include in the pdf.

Figure 46 : PDF Options

Select the option you would like and click the Download button. The browser will handle the download to your machine.

If you select to “Add yarn yardage estimate” you will need to do a simple measurement of the yarn used in a small amount of your work. See the directions and videos on https://freese-works.com/get-a-yarn-estimate-for-graphghan-projects page for more information.

5) Click Close to close the Download Project Image dialog if it is still visible after your download.

Print your project image

You may also print your project image.

To print your project image:

1) Select Print from the Project dropdown menu. The Print Image Settings dialog will be displayed.

Figure 47 : Print Image Settings dialog

This dialog contains three areas:

o You may also turn regular grid lines on and off by checking the No Regular Grid Lines checkbox.

Select the options you want for your print-out, then click the Print button. The Print Design dialog will be displayed.

2) There will first be a message saying it is generating the data:

Figure 48 : Generating print data

3) When it is done generating the data, it will display:

Figure 49 : Ready to Print

4) If you are on a desktop machine, click the Print button to print.

5) This will bring up a browser-specific window from which you can select your printer. In some browsers you can view the pattern to be printed before selecting the final print.

6) If your current browser does not allow you to view what will be printed before printing, or you are using a phone or tablet, you can select the View In Window option.

7) The View In Window options will open a new browser window containing the images to be printed. You may then print them from that browser window using the browser or any utility that you would normally use to print a web page.

8) When you are done printing or viewing the design, click the Close button to close the Print Design window.

If you are working with a large grid, the image will be broken up into multiple pages so that it will fit onto printer paper and the grid will be readable. The resulting pieces can be cut out and assembled together using tape to form a single large grid diagram.

When the grid is printed, numbering will be added to the borders of the diagram for ease of use.

NOTE: You may also use the Project à Download option to download the same image that is printed, without the image being broken up into pages. This image can be printed in any way you choose, including printing at a facility where it can be printed on oversized paper. See the Download section for more information.

Example

If we are using Google Chrome for our browser on a Windows machine. We will see the following when we click the Print button on the Print Design dialog.