Using the Plaiddesigner

This plaiddesigner tool is the easiest and quickest method to create plaids and stripes in the business! With the Plaiddesigner tool you can:

FREE features (no login required)

• design plaids and stripes
• export plaid design PDF for manufacturer (temporary unavailable)
• download png file for use in Adobe Illustrator style drawing

MEMBERSHIP

• re-color previous saved plaids and stripes
• re-design previous saved plaids and stripes
• share plaid and stripe design values with colleagues

(It is possible to share your plaid design values with anyone, also non members who have no login possibility)

You can find the Plaiddesigner tool on top of the page: Click on the button 'Plaiddesigner'.

In this tutorial we will explain how it works.

This video takes 8 minutes...

 

Tip: Because the Plaiddesigner tool lives in the cloud, it works on a tablet very well too. No need to install any app!

 

Step 1: On top of the screen click on 'Plaiddesigner' and click on the button 'Start to design your plaid'.

Step 2: It all starts with creating color swatches. The Plaiddesigner tool offers you two ways:

1. Create colors inside the Plaiddesigner Tool
2. Import Adobe Illustrator swatches by importing an Illustrator document

 

Create colors

• Click on the 'colors' tab.

 

 

 

 

 

 

 

 

 

 

 

 

• Click on the yellow color to edit this color.

 

 

 

 

 

 

• There are several methods to create a color here:

For this tutorial we start to change the yellow color into red.

• Type a hex (#) color number (c90000) in the box above the 'OK' button and click 'OK'.

or...

• Fill in the RGB values (R: 201, G: 0, B: 0) and click 'OK'

or...

• Click and drag inside the vertical multi color box to find a base color
• Click and drag inside the left square color tint box to find the tint and click 'OK'.

 

• Click on the 'Add color' button. 

 

 

 

 

 

 

 

• Click on the yellow (new color swatch) color icon (the color picker panel opens)
• Type in the hex (#) box ffffff
• Click 'OK'.

You just added a white color swatch...

 

 

 

 

• Click on the 'Add color' button again and follow the same steps to add color 820808 (dark red)

 

 

These are the color swatches you should have now...

 

 

 

 

Delete a color swatch

• To delete a color swatch, click on the x button on the right from the color swatch.

The Plaiddesigner tool always starts with a black / yellow template plaid. Because you imported swatches, you also have the two black and yellow swatches left from this template plaid. I would prefer to delete the top two color swatches because i don't need them. Unfortunately this is not possible yet because the colors are used in the sample plaid. As soon as you have chosen other colors inside the weft and warp sections, you will be able to delete the color swatches because they are not used in the plaid anymore.

 

 

 

 

 

Type the amount of warp yarns

Step 3: In the left section, click on the Warp tab.

 

 

 

 

 

 

 

 

 

 

 

Step 4: Click inside the first yarns amount box and fill in 40, then press the tab key on your keyboard.

 

 

 

 

 

 

 

 

 

 

 

Drag the warp line manually

Step 5: You can drag the warp line manually:

• Move the mouse cursor over the plaid preview
• Click on the right handle of the black warp line and drag to the left until it says '35'.

The yarn amount number automatically changes....

Step 6: For the third warp line type 35 yarns, then click on the little black traingle of this line and choose the dark red swatch.

 

 

 

 

 

 

Step 7: Click on the button 'Add yarns' or click on the little down arrow button next to the third warp line...

 

 

Step 8: Type 5 for the amount of yarns and choose the black color swatch.

 

 

Step 9: To finish the last two lines

• Click on 'Add yarns' and create a line of 1 yarn in white...
• Click on 'Add yarns' and create a line of 5 yarns in black...

 

Change the stacking order

When you need to move the stacking order of the lines, click on the 'move' button and drag the line to another place in the stacking order....

As with any change you make, the plaid preview will updated immediately.

For the design in this tutorial we don't have to change the stacking order :-)...

 

 

 

 

Change the weft values

Step 10: Click on the 'Weft' tab to go to the weft values.

 

 

 

 

 

 

 

 

 

 

Step 11: Click on the button 'Copy values from warp'. This way you do not need to add the weft values, they will be the same as the warp values. When you do this, you do not see any values under 'YARNS' anymore.

When you want the weft lines to be different than the warp lines, do not click on the 'Copy values from warp' button and create different weft values.

 

 

 

 

 

 

 

 

 

Mirror warp and/or weft

Step 12: The warp and weft lines can both be mirrored. Inside the Warp section, click on the button 'Mirror warp'.

The warp will mirror over it's right vertical edge to the right.

 

Step 13: The same is possible with the weft. Inside the Weft section, click on the 'Mirror weft' button.

The weft will mirror over it's bottom edge horizontally down.

In the examples further in this tutorial I did not use this mirror function...

 

Repeat a plaid

Step 14: To preview how the plaid looks in repeat, click on the button 'Repeat plaid'.

You can preview the plaid anytime during the design process.

 

 

 

 

Step 15: Click on the button 'Close' on the top richt corner to get out of the preview modus.

 

 

Choose a binding preset (weave)

When you design a plaid or stripe, you create a visual effect thanks to a woven structure and different colors of yarns. The rhythm of how the yarns are woven is called a binding or weave. There are a few typical bindings mostly used.

• Plain weave

• Twill weave

• Satin Weave

 

 

 

Create your own binding!

Most of the time you will choose one of the typical bindings. Although, when you want to, you cán create your own binding. See below which values i used to create a pied-de-poule effect.

 

 

Scale the plaid

Depending how large your computer monitor, laptop screen, tablet or phone screen is, you can choose a scale factor.

This scale factor does nog affect your actual plaid design. It only scales the plaid preview on your screen.

 

 

 

 

 

 

 

Save the plaid design values

When you are a designersupport.nl member, you can save the design values. This way you can re-color, re-design plaids at a later time.

Step 16: Click on the 'Load Save Share' button in the left navigation bar.

 

 

 

 

 

 

 

 

 

 

 

 

Step 17: Under 'SAVE PLAID' type a name and click on 'Save'.

 

 

 

 

 

 

 

 

 

Overwrite an existing plaid

Step 18: To overwrite an existing plaid, there are two ways:

                   1: Click on the little floppy disk icon of an already saved plaid

 

 

                   2: Under 'SAVE PLAID' type exactly the same name as an existing plaid and click 'Save'.

 

 

You will overwrite the existing plaid with the design values you have present in the Plaiddesigner tool at that particular moment.

You will be warned if you really want to overwrite the existing plaid.

This warning only occurs when the design values differ from the existing plaid.

 

Delete a plaid

Step 19: Click on the x button to delete a plaid.

There is NO UNDO feature, think twice before deleting a plaid.

 

The Plaiddesigner tool will ask first if you are sure....

 

 

 

 

 

Load a previous saved plaid

Step 20: Under the saved plaid you like to open, click on the little folder button.

 

 

 

When you load an existing plaid, the design values which are present in the Plaiddesigner tool at that moment will be deleted, that's why the tool asks you first if you are sure...

 

 

The plaid and it's design values are loaded. You can now start re-editing this plaid, change it's colors, add or delete warp and weft yarns, change the binding and optionally save it as a new plaid or overwrite the existing one.

 

 

 

 

 

 

 

Share a plaid

You can send your plaid design values to anyone who has e-mail. The receiver can open your plaid on designersupport.nl and make his or her own changes to it.

These changes made by the receiver will NOT affect your design in your web browser or your saved plaid values in the Plaiddesigner tool!

Step 21: Still present in the 'Load Save Share' section, click on the button called 'Click to share this plaid'.

 

 

 

 

 

 

 

 

 

 

Step 22: Fill in the receiver's e-mail address and your name and click on 'Share'.

The receiver does NOT have to own a membership and does not have to log in to open the plaid and edit it.

 

Step 23: Click on the little cross in the right top to remove the share window.

 

Step 24: The receiver will get an e-mail with a link to the plaid:

 

Step 25: When the receiver click's on the link, he or she will be redirected to the designersupport.nl website and asked to open the plaid yes or no.

 

 

 

 

 

Step 26: Any non designersupport.nl member can load the plaid and edit it. Also he or she can download the result as a png file. When the receiver is a designersupport.nl member, he or she can save to plaid to his or her own Plaiddesigner library.

Export to PNG

Step 28: To be able to use the plaid inside your vector style drawing (Usually Adobe Illustrator, but any other vector drawing application will do as well), you need a 'PNG' file.

Click on the button called 'Download plaid as PNG'.

Depending on the type of web browser and it's settings, you might be able to type a name before you save. Else, go to your 'Downloads' folder and look for the file called 'Plaid.png'. In this case you might want to change it's name manually.

When you want to learn how to add this plaid to an Illustrator styledrawing, go to the bottom of this page and click on the link 'import a picture to use as a pattern swatch'. 

 

------------------------------------------------------

Gebruik het gereedschap Plaiddesigner.

Ons gereedschap Plaiddesigner is de eenvoudigste en snelste methode om ruiten en strepen te maken die er is!

Met het gereedschap Plaiddesigner kan je:

GRATIS functies (geen login vereist)

• ontwerp ruiten en strepen
• exporteer ruit ontwerp naar PDF voor de fabrikant (tijdelijk niet aanwezig)
• download png file voor gebruik in Adobe Illustrator stijl tekening

LIDMAATSCHAP

• omkleuren opgeslagen ruiten en strepen
• aanpassen opgeslagen ruiten en strepen
• deel ruit en streep ontwerp(en) met collega's

(het is mogelijk om jouw ontwerp te delen met iedereen, dus ook met niet-leden die geen mogelijkheid hebben om in te loggen)

Je kan het gereedschap Plaiddesigner vinden: Klik bovenaan op 'Plaiddesigner'.

In deze oefening leggen wij uit hoe de tool werkt.

In de tekst wordt gebruik gemaakt van de termen 'warp' en 'weft', omdat dit in de tool en in de branche gebruikelijke termen zijn, vertalen wij deze niet. Zoals je kan zien in onze vertaallijst, betekent warp: schering draad, de verticale draden van het weefgetouw. Weft betekent: inslag draad, dat zijn de horizontale weefdraden.

Deze video duurt 8 minuten.

 

Tip: Omdat het gereedschap Plaiddesigner in de cloud staat, werkt het ook heel goed op een tablet. Zonder installatie van een app!

 

Stap 1: Klik bovenaan op 'Plaiddesigner' en klik dan op 'Start to design your plaid'.

Stap 2: Het begint met het maken van kleurstalen. Het gereedschap Plaiddesigner biedt twee mogelijkheden:

1. Maak kleuren in het gereedschap Plaiddesigner.
2. Importeer Adobe Illustrator kleurstalen door het importeren van een Illustrator document

 

Maak kleuren

• Klik op de button 'colors'.

 

 

 

 

 

 

 

 

 

 

 

• Klik op de kleur geel om deze aan te passen.

 

 

 

 

 

 

• Er zijn verschillende manieren om een kleur te maken:

Voor deze oefening beginnen we door de kleur geel te vervangen door rood.

• Typ een hex (#) kleur nummer (c90000) in de the box boven de 'OK' knop en klik vervolgens op 'OK'.

of...

• Vul de RGB waarden in (R: 201, G: 0, B: 0) en klik vervolgens op 'OK'

of...

• Klik of sleep binnen het verticale kleuroverzicht om een basiskleur te vinden.
• Klik en sleep in het linker vierkant om binnen de gekozen kleur de juiste tint te vinden en klik vervolgens op 'OK'.

 

• Klik op de 'Add color' knop om de kleur toe te voegen. 

 

 

 

 

 

 

• Klik op het gele (nieuwe kleurstaal) icoon (het deelvenster kleur kiezen opent)
• Typ in het hex (#) veld ffffff
• Klik op 'OK'.

Je hebt nu een witte kleurstaal toegevoegd...

 

 

 

 

• Klik opnieuw op de 'Add color' button volg dezelfde stappen om de kleur 820808 (donker rood) toe te voegen.

 

 

Dit zijn de kleurstalen die je op dit moment zou moeten zien...

 

 

 

 

Verwijder een kleurstaal

• Om een kleurstaal te verwijderen, klik op de x button rechts naast de kleurstaal.

 

 

 

 

 

 

 

 

 

 

Het gereedschap Plaiddesigner

begint altijd met een zwart / gele template ruit. Omdat je stalen importeert, heb je daarnaast altijd nog de zwarte en gele kleurstalen links van de template ruit. Ik geef er de voorkeur aan om deze twee kleurstalen te verwijderen omdat ik ze niet nodig heb. Helaas is dit nog niet mogelijk om die kleuren gebruikt worden in de template ruit. Zodra je andere kleurstalen gekozen hebt binnen de weft en warp secties, is het mogelijk om die kleurstalen te verwijderen omdat ze niet meer gebruikt worden in de ruit. 

 

Typ het aantal warp draden

Stap 3: In het linker menu, klik op 'Warp'

 

 

 

 

 

 

 

 

 

 

 

Stap 4: Klik in het eerste invulvakje onder Yarns (draden) en vul daar het getal 40 in, druk vervolgens op de tabtoets op het toetsenbord.

 

 

 

 

 

 

 

 

 

 

Sleep de warp liniaal

Stap 5: Je kan de warp liniaal handmatig slepen:

• Beweeg de cursor over de voorbeeld ruit
• Klik op de rechter handgreep van de zwarte warp draden, houdt deze vast en sleep deze naar links totdat het '35' aangeeft.

Het aantal warp yarns verandert in het menu automatisch mee....

Stap 6: Voor de derde warp yarn vul 35 in, klik vervolgens op het zwarte driehoekje op deze regel en kies de donkerrode kleurstaal.

 

 

 

 

 

 

Stap 7: Klik op de button 'Add yarns' of klik op de kleine pijl naar beneden naast de derde warp regel...

 

 

Stap 8: Vul 5 in voor het aantal yarns en kies de zwarte kleurstaal.

 

Stap 9: Om de laatste twee lijnen af te maken

• Klik op 'Add yarns' en maak een lijn met 1 witte yarn...
• Klik op 'Add yarns' en maak een lijn met 5 zwarte yarns...

 

Verander de volgorde van lijnen

Wanneer je de volgorde van lijnen wilt veranderen, klik op de 'move' button, houdt deze vast en sleep deze naar boven of beneden naar de juiste positie.

Zoals bij alle wijzigingen die je maakt, de voorbeeld ruit wordt automatisch aangepast.

Voor het ontwerp in deze oefeningen is het niet nodig om de volgorde te veranderen :-)...

 

 

 

 

 

Verander de weft waarden

Stap 10: Klik in het linkermenu op 'Weft' om naar de weft waarden te gaan.

 

 

 

 

 

 

 

 

 

 

Stap 11: Klik op de button 'Copy values from warp'. Op deze manier is het niet nodig om de weft waarden handmatig toe te voegen, de warp waarden worden zo automatisch hetzelfde. Als je dit doet, zie je onder 'Yarns' geen waarden meer staan.

Wanneer je andere weft waarden wilt dan de warp waarden, klik dan niet op de button 'Copy values from warp' en vul zelf de weft waarden in.

 

 

 

 

 

 

 

 

Spiegel warp en/of weft

Stap 12: De warp en weft waarden kunnen beiden gespiegeld worden. Binnen de Warp sectie, klik voor spiegelen op de 'Mirror warp' button.

De warp spiegelt vanaf de rechter buitenrand naar rechts.

Stap 13: Hetzelfde is mogelijk voor de weft waarden. Binnen de Weft sectie, klik op de 'Mirror weft' button.

De weft spiegelt vanaf de onderrand naar beneden.

In de voorbeelden later in deze oefening heb ik deze spiegelfunctie niet gebruikt...

 

Herhaal de ruit

Stap 14: Om te zien hoe een ruit er in herhaling uit ziet, klik op de button 'Repeat plaid'.

Je kan op elk moment tijdens het ontwerpen deze functie gebruiken.

 

 

 

 

Stap 15: Klik op de 'Close' button rechts bovenin om uit deze full screen modus te komen.

 

 

 

Kies een voorgeprogrammeerde binding

Wanneer je ruiten of strepen ontwerpt, maak je een visueel effect dankzij de geweven structuur en de verschillende draadkleuren. Het ritme waarin de draden zijn geweven noem je een binding of weave.

Er zijn een aantal veelgebruikte bindingen:

• Plain (normale) binding

• Twill (platte) binding

• Satin (satijn) binding

 

 

 

Maak je eigen binding

Meestal zal je de voorgeprogrammeerde bindingen gebruiken. Echter, wanneer je dat wilt, is het mogelijk om je eigen binding te maken. Zie hieronder welke waarden ik gebruikt heb om een binding met pied-de-poule effect te maken.

 

Schaal de ruit

Afhankelijk van de grootte van jouw computer monitor, laptop beeldscherm, tablet of telefoon beeldscherm, kies je de schalingsfactor.

De schalingsfactor heeft geen invloed op het daadwerkelijke ruit ontwerp. Het schaalt alleen de voorbeeldweergave op je beeldscherm.

 

 

 

 

 

 

 

Bewaar de waarden van de ontworpen ruit

Wanneer je een lidmaatschap hebt op designersupport.nl, kan je de waarden van het ontwerp opslaan. Dan kun je in een later stadium de ruit omkleuren en het ontwerp aanpassen.

Stap 16: Klik op de 'Load Save Share' button in het linker menu.

 

 

 

 

 

 

 

 

 

 

 

 

Stap 17: Onder 'SAVE PLAID' typ een naam en klik op 'Save'.

 

 

 

 

 

 

 

Overschrijven van een bestaande ruit

Stap 18: Een bestaande ruit overschrijven, kan op twee manieren:

                   1: Klik op het kleine icoon met de floppy disk icon van een opgeslagen ruit.

 

                   2: Onder 'SAVE PLAID' typ exact dezelfde naam als de bestaande ruit en klik op 'Save'.

 

 

 

Je overschrijft zo de eerder opgeslagen plaid met de nieuwe ontwerp waarden die je op dat moment in het gereedschap Plaiddesigner hebt gemaakt.

Je krijgt een waarschuwing of je het eerder opgeslagen ontwerp echt wilt overschrijven.

Deze waarschuwing verschijnt alleen wanneer de ontwerp waarden afwijken van de eerder opgeslagen ruit.

 

 

Een ruit verwijderen

Stap 19: Klik op de x button om een ruit te verwijderen.

Er is GEEN 'ongedaan maken' functie, dus denk twee keer na voordat je op 'OK' klikt.

 

Het gereedschap Plaiddesigner zal eerst vragen of je het echt zeker weet....

 

 

 

 

 

Inladen eerder opgeslagen ruit

Stap 20: Klik onder de opgeslagen ruit die je wilt openen, op de kleine button met een folder.

 

 

Wanneer je een bestaande ruit opent, worden de ontwerp waarden die op dat moment zichtbaar zijn in het gereedschap Plaiddesigner verwijderd, daarom zal de tool eerst vragen of je zeker weet dat je de ruit wilt openen...

 

 

De ruit wordt met de ontwerp waarden ingeladen. Nu kan je starten met het aanpassen van de ruit, verander de kleuren, verwijder warp of weft draden of voeg draden toe, verander de binding en bewaar deze eventueel als nieuwe ruit of overschrijf de bestaande versie.

 

 

 

 

 

 

 

Deel een ruit

Je kan een ruit ontwerp sturen naar iedereen met een emailadres. De ontvanger kan jouw ruit openen op designersupport.nl en zijn of haar wijzigingen aanbrengen.

De veranderingen door de ontvanger heeft GEEN effect op jouw ontwerp in jouw web browser en ook niet op de door jou opgeslagen ontwerp waarden in het gereedschap Plaiddesigner.

 

Stap 21: Terwijl je nog in de 'Load Save Share' sectie bent, klik op de button 'Click to share this plaid'.

 

 

 

 

 

 

 

 

 

 

Stap 22: Vul het emailadres van de ontvanger in, vul jouw naam in en klik op 'Share'.

De ontvanger heeft GEEN lidmaatschap nodig en hoeft niet in te loggen om de ruit te openen of aan te passen.

 

Stap 23: Klik op het kleine kruisje rechts bovenin het deelvenster om het te sluiten.

 

Stap 24: De ontvanger krijgt een e-mail met link naar de door jou gestuurde plaid:

 

Stap 25: Als de ontvanger op de link klikt, zal hij of zij geleid worden naar de designersupport.nl website en gevraagd worden of ze de ruit willen openen of niet.

 

 

 

 

 

 

Stap 26: Een niet-lid van designersupport.nl kan de ruit inladen en aanpassen. Is de ontvanger wel lid van designersupport.nl, dan kan hij of zij de ruit opslaan in de eigen Plaiddesigner bibliotheek.

Exporteren naar PNG

Stap 28: Om de ruit te kunnen gebruiken in jouw vector stijltekening (normaal gesproken in Adobe Illustrator, maar elke andere vector tekenapplicatie volstaat), heb je een 'PNG' document nodig.

Klik op de button 'Download plaid as PNG'.

Afhankelijk van het type webbrowser en de internetinstellingen, is het mogelijk om het document een naam te geven voordat je het opslaat. Anders ga je naar je 'Download' folder en zoek het document met de naam 'Plaid.png'. In dit geval kan je overwegen om de naam handmatig aan te passen.