17
INKSCAPE TUTORIAL: SEAMLESS PATTERNS NEWSFLASH Folks! We are very excited to annouce the launch of our new site - Very Simple Designs. The main focus of Very Simple Designs is to provide digital resources that can be used for print and web design. While we fill the site to the brim with our professionally created vector stock, patterns and textures as well as brushes for Photoshop and Paintshop Pro, we offer everything free for personal use. MAIN MENU Home Blog About us TUTORIALS Inkscape Miscellaneous FREEBIES Vector Illustrations Photoshop Brushes Seamless Patterns Wallpaper Cutting Files KEY CONCEPTS Terms of Use search... Go! Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns... 1 of 17 10/4/2013 10:33 AM

Inkscape Tutorial_ Seamless Patterns _ Vectors

Embed Size (px)

DESCRIPTION

Inkscape tutorial

Citation preview

  • INKSCAPE TUTORIAL: SEAMLESS PATTERNS

    NEWSFLASH

    Folks! We are very

    excited to annouce

    the launch of our

    new site - Very

    Simple Designs.

    The main focus of

    Very Simple Designs

    is to provide digital

    resources that can

    be used for print and

    web design. While

    we fill the site to the

    brim with our

    professionally

    created vector stock,

    patterns and

    textures as well as

    brushes for

    Photoshop and

    Paintshop Pro, we

    offer everything free

    for personal use.

    MAIN MENU

    Home

    Blog

    About us

    TUTORIALS

    Inkscape

    Miscellaneous

    FREEBIES

    Vector Illustrations

    Photoshop Brushes

    Seamless Patterns

    Wallpaper

    Cutting Files

    KEY CONCEPTS

    Terms of Use

    search... Go!

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    1 of 17 10/4/2013 10:33 AM

  • First of all: working with patterns in Inkscape is not without challenges.

    Inkscape provides awesome tools to create seamless patterns, but there

    are quite a few things to take into account upon using them. I hope that

    some day in the near future I can update parts of this tutorial where things

    got fixed or work more user friendly.

    Although this tutorial is not specifically aimed at beginners, I will tell which

    buttons, shortcuts and menu options are used to maximize usability for

    users of all levels. I do assume that you know how to create objects, set fill

    colours, strokes and adjust opacity. If that is under control, with some

    persistance also the beginning Inkscape artist should be able to follow

    along. Please let me know if you run into troubles following this tutorial.

    GOOD TO KNOW:

    Vector patterns can be used and reused in ANY size. You can draw them as large or as small as you want -

    vectors are scalable without loss of quality.

    To have sharp edges the pattern should be draw in exact dimensions. I use a grid - and I use snap to grid

    when drawing the base tile.

    Most seamless patterns are squares. I draw my patterns normally in dimensions such as 100x100,

    200x200, 400x400 and so on.

    Why I do not use the Pattern Fill

    Patterns created in Inkscape can be used as Pattern Fill. You can even add patterns to the set of fills that

    come per default with Inkscape. Pattern fills are easy in use and quickly applied. However:

    There is a bug that prevents proper working of patterns that make use of clipping. Almost all my

    patterns are clipped. Work around is to make a bitmap copy of the pattern. I normally create bitmap

    patterns (as I want to use the patterns also in image editors such as GIMP), but it makes little sense to

    me to rasterize a vector pattern within Inkscape as the advantage of everything being scalable

    disappears. So to me this is a serious drawback - it is a known bug but there has been no progress on

    this item for quite some time.

    1.

    Even when you make simple patterns that do not use clipping some artifacts may show: a small gap

    between 2 adjacent patterns. This can be fixed with a work around. Most important here is: work in

    exact sizes, align them to the grid and do not rotate your pattern.

    2.

    There is no option in Inkscape to "expand" (Illustrator equivalent) the patterns. That means that

    vectors that use pattern fills are in general unsuitable as microstock (vectors for sale).

    3.

    In short: lots of cons to use pattern fills as currently available in Inkscape.

    Seamless Patterns based on Cloned Tiles

    So what do I do? I draw seamless patterns in Inkscape - using cloned tiles. My workflow is very similar to the

    one that Tav describes in Inkscape: Guide to a Vector Drawing Program. I will use similar words to describe

    my process, so it is easy to compare and follow both tutorials. Major differences:

    No use of the seamless pattern as pattern fill because I use clipping.

    Where I create a seamless pattern with the purpose to export it as bitmap (seamless texture), the process

    is a bit shorter.

    Where I create a seamless pattern with the idea to reuse it in other designs at a later time, I always create

    a full tile. Tav describes this as "to have the entire design within the edges of the base tile". Difference is

    that I do not try to preserve the generated clone tiles. I just create a full tile and add that to a custom size

    cloned grid when I create my documents (mostly stationery).

    Ok.. enough babbling.. let's start the work.

    1. SET UP THE CANVAS

    Again, as we work with scalable vectors, and I am just creating patterns here and not a document

    deliverable, I do not care about the size of the document. The page is normally shown in the background, but

    I draw on top of it, above it, beside it, anywhere I need. Luckily Inkscape thinks that's alright too.

    For patterns it is however very important to draw EXACT. There are some problems with rendering if you

    ignore this step.

    Create a Grid with spacing of 10 pixels.

    Turn on snapping of nodes to Grid.

    Make the grid visible.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    2 of 17 10/4/2013 10:33 AM

  • Next we need to change the setting for the bounding box. Inkscape uses 2 ways to define a bounding box for

    an object:

    Visual bounding box, which takes the actual object including stroke setting into account;1.

    Geometrical bounding box, which just uses the nodes of the object.2.

    As we want to draw exact, and do not want to worry about stroke settings.

    Change the setting to "Geometrical bounding box" in the Tools section of Inkscape Preferences

    (Shift+Ctrl+P).

    2. Create a prototype tile

    We start with a simple square. As snapping is turned on, we are able to draw in exact pixel values (no

    decimals).

    As the snapping is set up to only snap to visible lines, do not zoom in too much yet. This allows faster

    drawing.

    Use the rectangle tool and draw a 100x100px square.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    3 of 17 10/4/2013 10:33 AM

  • Check the width and height in the Rectangle Tool - Tool Control bar, it should show exact pixel values (no

    decimal values).

    Set the fill of the rectangle to a light grey and remove the stroke.

    Now perhaps a funny step as we deal with only one object, but GROUP the tile. Use Object > Group from

    the menu (shortcut: Ctrl + G).

    From now on I will refer to this tile as "base tile".

    3. CLONE THE BASE TILE

    Make sure that your base tile is selected. The status bar at the bottom of the screen should read "Group of 1

    object"

    Choose Edit > Clone > Create Tiled Clones from the menu to bring up the Create Tiled Clones dialog.

    If you have used this dialog before, it is wise to click the "Reset" button in the left lower corner, to clear old

    settings.

    Select the P1: simple translation from the drop-down menu on the Symmetry tab

    Set rows and columns to produce 3 x 3 cloned tiles.

    It is very important that the option "Use saved position of the tile" is checked. This allows us to move the

    original, and expand it, without messing up the generated clones.

    Click on the create button

    Close the Create Tiled Clones Dialog.

    You should now see the base tiled cloned 9 times. The base tile is still on the screen, it is below the first tile.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    4 of 17 10/4/2013 10:33 AM

  • I find it easier to move the original tile aside and just focus on decorating that tile, while I use the clones to

    inspect the resulting work.

    The base tile should still be selected after you closed the dialog.

    Make sure that the status bar (notification area) reads "Group of 1 object" and NOT "Clone of: Group of 1

    object". If a clone is selected, you can select the original again by using Shift+D.

    There are many ways to move any object (mouse, arrow keys, transform). In this case it is easiest to use

    Transform Dialog.

    Select Object > Transform from the menu (shortcut: Shift + Ctrl + M).

    On the Move tab: set a value of -200px for move horizontally.

    Click on apply.

    Now the base tile is separated from the clones and we can focus on decorating this tile.

    At this point you can turn the grid off if you prefer to work without one (View > Grid) and you can zoom to a

    level that you are comfortable with.

    4. DECORATE THE TILE

    For the purpose of the tutorial I will make a very simple design, just to demonstrate the concepts.

    To decorate the tile we add new elements to the base tile. Remember that we added our original rectangle to

    a GROUP? We will add new elements to this GROUP.

    Open the existing group by either double clicking it, or by clicking the basetile with the right mouse button

    and selecting "Enter group #xxxx" from the submenu.

    In the status bar you'll see a Layer name starting with "#g" to indicate that you are now working within an

    open group. Of course your group number will be different.

    Any object you add to the drawing is now added to this group.

    Add just a few simple elements to the base tile, draw at least one exceeding the border of the orinal square.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    5 of 17 10/4/2013 10:33 AM

  • The clones are automatically updated. As you can see I just added a few rectangles and gave one of them a

    fill. I grouped the set, duplicated it, rotated it and moved it to the lower right corner.

    As you can see it looks a bit like a jungle. Elements are cut off where the edges of the gray rectangles meet.

    Now let's inspect what is going on.

    Select (in the group) the grey rectangle and change the opacity to about 50%.

    The clone in the centre is the ONLY tile that shares all overlaps with its neighbours! That is convenient as it is

    usable as completed seamless tile (here indicated in Red).

    The ONLY reason for use of the rectangle was to create a group with the size of the rectangle and to use that

    group to define the base tile area. Once a tile is cloned, the original location and size of a tile cloned object

    are stored, and Inkscape can use this data for later recloning.

    As we have cloned the base tile, the contents of the group (including the rectangle) can be deleted or

    repositioned without affecting the position of the cloned tiles. The GROUP we created originally must be

    maintained however, as this is where Inkscape stores the original location and size for the clones.

    Check the status bar to ensure you are working in the group.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    6 of 17 10/4/2013 10:33 AM

  • Select the light gray rectangle from the base tile.

    This tutorial explains how to create a seamless bitmap pattern as well as how to create a seamless clipped

    vector tile.

    Depending on your goal you may either:

    Delete the light gray rectangle from your base tile - use this option if you are only interested in how to

    create seamless bitmaps (section 5).

    1.

    Remove the fill - use this option if you want to create a seamless clipped tile too (section 6).2.

    The clones are updated immediately.

    Close the group and return to working on Layer1:

    Select Layer1 from the layer selection in the status bar.

    5. CREATING A TILE FOR EXPORT TO A SEAMLESS BITMAP

    Remember that only the centre area of the cloned tiles array shows a full seamless pattern. We make use of

    that for easy export.

    The coloured rectangle is deleted from the base tile. The pattern is now made up from a few simple black

    elements and has upon export a transparent background. This is convenient in some cases, but patterns

    often use a solid colour for the background.

    CREATE A SOLID BACKGROUND

    To create coloured background for your tiles:

    Draw a simple rectangle on Layer1 (outside of the group), make sure it is large enough to cover the

    completed centre tile - for example 120x120. No exactness is required, just make sure it is larger than the

    area of the original tile.

    Give it the desired fill colour - I used a dull grey here. Don't forget to reset the opacity to 100%.

    Send it to the back (behind the cloned tiles) by pressing the End-key on the keyboard.

    You can use filters on either the background or the base tile, or even on the cloned tiles after

    grouping, to quickly create some very interesting textures.

    Some filters require a background to work with. If the base tile has no background to work with:

    simply draw a rectangle with any fill (outside of the group) below it, exactly as shown for creating

    the solid background.

    PREPARE FOR EXPORT

    Create a new layer:

    Open the layer dialog (Shift+Ctrl+L).

    Add a new layer by clicking on the + button and give it an appropriate name, for example "Export Mask".

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    7 of 17 10/4/2013 10:33 AM

  • Make sure the grid is visible again (View > Grid) and snapping to grid is enabled.

    Check the status bar and ensure you'll work on the new "Export Mask" layer.

    Draw a rectangle of EXACTLY 100x100px on the new layer and let it snap to the grid so it covers exactly the

    centre tile.

    I used a red fill with 50% opacity, no stroke. The colour does not matter as this object will NOT show in our

    export.

    With the rectangle selected: check the settings in the Control Bar at the top of the screen. You should see

    only WHOLE numbers (no decimals), for both position (X and Y value) as well as dimensions (W and H

    values). This ensures that the bitmap will be created at whole pixels value and eliminates some anti-aliasing

    and artifact creation problems.

    EXPORT THE BITMAP

    With the rectangle still selected: hide the newly crated layer "Export Mask" by clicking on the eye-icon in the

    status bar or the layer dialog (Shift+Ctrl+L).

    Now the rectangle is not visible, but the selection is still active and is used to define the export area.

    Open the export bitmap dialog from the menu File > Export Dialog (shortcut Shift+Ctrl+E).

    Make sure that "Selection" is chosen as export area.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    8 of 17 10/4/2013 10:33 AM

  • Set an export size (at 90dpi it will be exactly as drawn: 100x100px). Change the resolution if you want a

    different resulting tile size: 180 dpi results in a 200x200px tile and 45 dpi results in a 50x50px tile. The

    bitmap size is recalculated and shown in the width and height fields.

    Set an export location. Browse to an convenient directory and provide a logical name for your tile.

    Click the Export button.

    Note: although the browse dialog closes by pressing "save", the tile is not exported until you click

    the Export button.

    And there ya go, an nice (but rasterized) seamless texture for use in any pixel editor or other rendering

    program. This bitmap can ALSO be used as pattern or tile for cloning in Inkscape - but it is now a rasterized

    object.

    All the geometrical seamless patterns that we offer for free download were created using this method.

    6. CREATING A CLIPPED SEAMLESS VECTOR TILE

    What if you want to use a similar tile but in vector format? Then we do need to do some further work.

    The Export mask layer stays hidden as it is not relevant for this step.

    DUPLICATE AND UNLINK CLONES

    As I do not want to mess with my original tiles (maybe I want to expand it later for alternative textures) I

    make a duplicate of the cloned tiles:

    Select all cloned tiles using a selection window (rubberband selection). Do not select the base tile.

    Use Edit > Duplicate from the menu (Ctrl+D).

    Open the transform dialog: Select Object > Transform from the menu (shortcut: Shift + Ctrl + M).

    On the Move tab: set a value of -400px for move vertically. Click on apply.

    Copies of the cloned tiles appear below the selection:

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    9 of 17 10/4/2013 10:33 AM

  • If you also copied the rectangle in the background, delete it. Look at the status bar to check if you select

    the right object.

    Hold down the Alt-key if needed to select an object that is under another one.

    The copies should still be selected.

    Select Edit > Clone > Unlink Clone from the menu, or click this button .

    Now the clones are no longer clones but turned into stand-alone objects. The status bar should read:

    COMPLETE THE CENTRE DESIGN

    When we exported the seamless pattern as bitmap, it did not matter if the design was part of one or more

    cloned tiles. We just defined a rectangle as an export area and that was all there was to it. However, if we

    want to create a single seamless tile, we must add all the design elements to this single tile. The only tile that

    has overlap with all its neighbours is the centre tile.

    I will explain the process step by step, but it basically comes down to:

    Maintain the centre tile as a group.1.

    Ungroup all other tiles and move the overlapping objects to the centre tile group.2.

    Delete all the extra objects that are not part of the centre tile.3.

    And now step-by-step.

    After unlinking the clones in the previous step, all objects are selected.

    Hold down the Shift-key and click on the group in the centre to deselect it. This excludes the centre tile

    from selection, check the status bar to make sure that now only 8 objects (of type group) are selected.

    Ungroup the contents of the tiles in the selection using Object > Ungroup from the menu (shortcut:

    Shift+Ctrl+G). Repeat this step as often as needed for your design.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    10 of 17 10/4/2013 10:33 AM

  • The ONLY interesting objects are those that overlap with the centre tile.

    Select the overlapping objects. Select a first object, then hold down the Shift-key to add the other objects

    to the selection.

    Cut the selected objects to the clipboard (shortcut: Ctrl+X).

    Open the centre tile group by double clicking or use the right mouse button on object and select "Enter

    group" from submenu.

    Check the statusbar to make sure you work on the group.

    Note: as we made a duplicate of a cloned tile groups, the group indication may be changed to

    #usexxx instead of #gxxxx. Do not let this confuse you.The indication # still indicates that you

    work on an individual (in this case grouped) object and not on a layer.

    Select Edit > Paste in Place from the menu (shortcut: Ctrl+Alt+V). This will paste the objects that were cut

    to clipboard in place, meaning in the exact location where we cut them from, but as we now work in the

    grouped center tile, they'll be part of the group.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    11 of 17 10/4/2013 10:33 AM

  • Now a bit of clean up:

    Leave the group by selecting Layer1 from the layer indication in the status bar.

    Delete all other objects that are not part of the centre tile (group).

    CLIP THE TILE

    Only one step left: clip the tile so it becomes seamless. For this we want again a 100x100px rectangle.

    Remember that I told you to keep the original gray rectangle and just remove the fill to make it invisible?

    That is because I wanted to use it for the next steps. I can use it as a background, but it also will be a perfect

    clipping path.

    Note: if you deleted the rectangle, you can just turn the grid on again (View > Grid) and draw the

    rectangle again.

    Open the group by double clicking (or right mouse button on tile and select "Enter group"). Check the layer

    indication in the statusbar, it should start with "#" (either #g or #use).

    Select the rectangle. As there is no fill, this may seem like mission impossible, but if you press the Tab-key

    repeatedly you'll see that it loops through all objects witin the open group.

    Note: pressing the Tab-key loops through all objects in the active layer or active group. The layer

    indication in the status bar determines the scope.

    Give it a fill if so desired and move it below the other objects in the group if needed by pressing the

    End-key.

    Copy the rectangle to the clipboard by selecting Edit > Copy (shortcut: Ctrl+C).

    Leave the group by selecting Layer1 from the layer indication in the status bar.

    Paste the rectangle from the clipboard in place. Select Edit > Paste in Place from the menu (shortcut:

    Ctrl+Alt+V). Note: it should NOT be part of the group!

    Select both the grouped tile and the copied rectangle. The rectangle should be on top.

    Select Object > Clip > Set from the menu.

    That creates a perfect seamless vector tile.

    HOW TO USE THIS TILE?

    Simply create a new set of tiled clones.

    Choose Edit > Clone > Create Tiled Clones from the menu to bring up the Create Tiled Clones dialog.

    Reset the dialog by pressing the Reset button in the left lower corner.

    Select P1: Simple translation from the drop-down menu on the Symmetry tab.

    Set the appropriate tile array: to create stationary with this pattern 4 times repeated simply set the rows

    and columns to the appropriate value: 4x4.

    Press the Create button, leave the dialog open as we need to fix something.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    12 of 17 10/4/2013 10:33 AM

  • Now there is one IMPORTANT thing to take into account. For some unknown reason, the tiled clone editor

    ignores clipping. So even while we made a nice tilable clone and clipped it to 100x100 exactly, upon tiling it

    will create something like:

    Not exactly what we had in mind. But this is very easily solved with the XML editor. This may seem a bit

    overwhelming - but it is not that hard.

    Make sure that the option "Use saved position of the tile" is checked in the Create Tiled Clones dialog. Leave

    this dialog open.

    Your base tile should still be selected. Make sure that the status bar (notification area) reads "Group of x

    objects" and NOT "Clone of: Group of x objects". If it got deselected, remember it is under the first clone.

    Select it by using Shift+D if you selected a clone.

    Now open up the XML editor from the menu Edit > XML editor.

    The editor highlights the selected object immediately, in our case the base tile. It should look similar to

    this:

    In this window you'll see the width and height for the tile set as:

    inkscape:tile-h 152.52793

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    13 of 17 10/4/2013 10:33 AM

  • +2

    inkscape:tile-w 152.52793

    Note: These values will differ for you, as they come from the bounding box of the unclipped tile.

    We KNOW we made the tile for 100x100px. So it is easily corrected.

    Select each of these attributes, from the list, change the value to 100 and click on the Set button.

    Your screen should look something like this:

    Close the XML editor.

    Go back to the Create Tiled Clones dialog.

    Click on the Remove button.

    Click on the Create button.

    The clones are now created with the corrected "saved" size of the base clone. You can move the base tile,

    similar to what we did at the beginning of the tutorial.

    REMARKS

    When you render patterns like this on the screen, Inkscape does display gaps between the patterns at

    some zoom-levels. This is just a display problem and will not show in your export.

    1.

    Once you have saved the corrected size to the base tile, these modifications are available for future

    use. You can save this tile as a base tile pattern a library file. I collect tiles like these in .svg files and

    call these "libraries". When I want to use one of these tiles in a design I simply copy it from the pattern

    file to a new document and use it there.

    2.

    That's all folks. As usual: feedback is as always highly appreciated.

    < Prev Next >

    COMMENTS

    # Guest 2010-06-12 03:05Hi,Thanks this tutorial is really awesome and I think that the gab problem that you fixed using thexml editor is now gone in 0.47 as I have tried your tutorial step by step and I did not encounterthe gab.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    14 of 17 10/4/2013 10:33 AM

  • Reply | Reply with quote | Quote

    +2

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Thanks alot

    # syllie 2010-06-24 21:13Hi Muhammad,

    Thanks for your feedback. The gap only appears under certain conditions. I am glad youencountered no problems :)

    Cheers,Syllie

    # Ben Root 2010-12-01 13:42This is a great tutorial - I have always been a little hazy about cloning and about making crisprepeating patterns, this snapped all of that into focus.

    Thank you!

    # syllie 2010-12-04 08:08Hi Ben,

    I am glad this tutorial was of use for you. Inkscape offers quite some nifty features to supportpattern creation. But as I said before some things are open for improvement.

    I have not tested all the functionalities in the newer version of Inkscape yet (Inkscape 0.48.1is about to be released) but I know there are changes to the renderer. Some of the indicatedproblems may have disappeared and that sure will make life easier.

    Cheers,Syllie

    # Todd 2011-05-29 06:57Wow, this is one of the most helpful Inkscape tutorials I have seen yet. I learned several thingsfrom this. I struggle with creating graphics for websites, and the simple tip about changing theway Inkscape calculates the bounding box was priceless.

    A thousand thank yous.

    # syllie 2011-06-13 17:17Hi Todd! I'm glad this tutorial was helpful. Seamless patterns are not easy in Inkscape butsometimes pointing out pitfalls can help a lot.

    Cheers,Syllie

    # Dave 2011-06-12 20:53Yes, this is an *outstanding* tutorial for an amazing app. This functionality is not at all intuitive(to me at least), but your description was easy to follow, and gave me lots of food for thought.The world now needs to brace itself for a flood of crappy tiles :)

    # syllie 2011-06-13 17:21Hi Dave!

    Inkscape is indeed an amazing app and it allows those with the smaller budget to createawesome vector art.

    Cloned tiles is one of the most powerful tools in Inkscape and indeed not that intuitive. I amglad that this tutorial geve you some pointers. Looking forward to see some of your creations.Feel free to add links in comments - I'll review and update to show the image duringmoderation (files need to be hosted elsewhere).

    Cheers,Syllie

    # PapaSue 2011-09-27 07:08I am fascinated with this tutorial but I don't seem to have some of the features you do and amlooking for workarounds. I can only get so far and am lost.

    I'm using Inkscape 0.48 and that could be the problem as features may have been combined.

    Is there any chance that you'd update this for 0.48 or can direct me to another version of this?Perhaps a video, with voice?

    Thank you!

    Thanks

    # syllie 2011-09-30 13:25Hi PapaSue,

    I certainly agree that this tutorial needs to be revisited. I know from the developers mailinglist that some features have been changed (perhaps some of the listed issues have beenresolved). I run Inkscape 0.48.2 nowadays myself and will have a quick run through thetutorial to see what now works differently.

    Please revisit in a few days :)

    Cheers,Syllie

    # Joyce 2011-10-12 02:35Thanks so much for this lovely tutorial! I appreciate the detailed explanations and screenshots --

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    15 of 17 10/4/2013 10:33 AM

  • Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    -1

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    it really made sense this time around.

    I'm having a spot of trouble with decorating my base tile. I added several objects to the group ontop of the base tile and they're not showing up on the clones. (I've checked and double checkedthat they are indeed part of the same g#### layer.) Any changes made to the actual base tile,such as fill or stroke, does update. I was wondering if this was a change to Inkscape or a dumbmistake I'm making?

    Thanks!

    # Joyce 2011-10-12 02:51Apropos my earlier trouble with decorating the base tile -- I started over and this time it'sworking just fine. I must not have grouped things properly last time. Mea culpa! :)

    # syllie 2011-10-25 21:50Hi Joyce,I am glad it all worked out.Cheers,Syllie

    # ChrisR 2011-11-13 03:06Very thank. Helped a lot finding a way to work with simple hatches (lines, dots, etc.) and colors ofthem. However I had a small gap between 2 adjacent patterns. This was resolved only makingthe tile big (long) enough.I hope Inkscape will introduce Patterns Fill with easy editing of Scale, Rotation and Fill-Edit(Colors etc.).

    # JamieC 2011-11-17 14:16Very useful tutorial. Thanks very much! Currently using 48.2, and although the cloned tiling issueseems to be fixed in this version so that it correctly sets the tile width and height, I am havingproblems if I try to make a pattern of the tile (using Object > Pattern > Object to pattern). Afterapplying the pattern to an object, it appears to display correctly at first, but then will only repeatacross a portion of the object if I try to re-scale or rotate the pattern at all. Your tutorial seemedto suggest that it may still render correctly even if it didn't display correctly, but exporting to pngor printing fails to display the pattern properly. I'm not sure whether this is just me (ie mycomputer) or whether this is an issue that others also have with patterns. Very grateful for anyinsights.

    # syllie 2011-11-22 16:29Hi Jamie,Thanks for your feedback. This is the one tutorial on the site that I both love and hate. I thinkthise functionality is so much required and it gets so little development love... so in generalthere are quirks and bugs, some get fixed, some reappear in a next release. Some issues areoutstandings since early days.

    Make sure that you have the toggle on the ToolsControls switched on so that patternstransform with an object. Also indeed not all output formats render the pattern correctly. Tavwrites a bit more about that in his manual.

    Also read a bit more about the related bug here.. it links to other bug reports.[url = answers.launchpad.net/.../...

    Not much to contribute I guess... but I hope it helps anyways.

    Cheers,Syllie

    # Fuddle 2012-10-03 14:16Thanks for the great tutorial.If I may- of course there are many ways to skin a cat, or tile seamlessly- however I feel yourtutorial is a touch on the too technical side for many graphic designers who work in print media(dummies like me!).Secondly- there isn't much commentary or evaluation on this method functionality in as in trueWYSIWIG on the final physical printed material.I am often highly frustrated that the super-old school (hat-tips to Herr Durer and Herr Gutenberg)physically carving a $2.50 stamping roll takes less fiddling; provides a far better and repeatableresult (albeit with the associated tediumm of messy/nuisance prep & clean-up) than wastinghours creating truly seamless vector patterns- especially very complex motifs as per traditionalChiyogami or wallpaper wooden rollers (see Cole & Sons as an example).

    Sorry to blab on- butWhat has worked best for me is The Old School method of manually creating objects andpositioning them manually, layer by layer then flattening.

    # syllie 2012-10-10 11:21Hi Fuddle,

    Thank you for your comments. I have combined them both in a single post if you dont mind :)

    I agree that there is more than one way to make seamless patterns. I also think thatInkscape, whilst it is offering all neccesary tools, is not the easiest program to do that. But asthis site is about Inkscape - I did include it. I also specifically included my reservations aboutthese techniques in the first paragraph :)

    What is good to know is that currently the developers are working on the tiling interface, andhopefully some annoying issues in displaying the results may finally be solved.

    Anyways.. going back to your critique...I do make silk screen prints and I do certainly know what you mean by creating repeatableresults.

    I use another (cheap) vector capable program for repeatable patterns, which basically takesout all the complete tiling part of this tutorial (as it automatically tiles). The results can beexported to several formats which allow for easy printing to film and other media. Export alsoincludes export to PSD layers (for the photoshop fanatics). Tho the program is not thatactively maintained, it might be very much suitable for your purposes. There is a 30 day trialperiod so I can only invite you to test it for free. Pattern Studio

    I hope this helps,Cheers,Syllie

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    16 of 17 10/4/2013 10:33 AM

  • 0Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    0

    Reply | Reply with quote | Quote

    JComments

    # bathi 2012-12-16 20:02Thank You Very Much.. for this great tutorial.. learnt many things as a beginner...

    Cheers,bathi

    # Dede Pujayadi 2013-07-01 21:086. CREATING A CLIPPED SEAMLESS VECTOR TILE, At this step I can not begin to follow the firstpoint is: Select all cloned tiles using a selection window (rubberband selection). Do not select thebase tile. I've tried it over and over again, but still did not produce work like drawing tutorialsinstance

    # Dede Pujayadi 2013-07-01 21:146. CREATING A CLIPPED SEAMLESS VECTOR TILEWhat if you want to use a similar tile but in vector format? Then we do need to do some furtherwork.

    The Export mask layer stays hidden as it is not relevant for this step.

    DUPLICATE AND UNLINK CLONES

    As I do not want to mess with my original tiles (maybe I want to expand it later for alternativetextures) I make a duplicate of the cloned tiles:Select all cloned tiles using a selection window (rubberband selection). Do not select the base tile.Use Edit > Duplicate from the menu (Ctrl+D).Open the transform dialog: Select Object > Transform from the menu (shortcut: Shift + Ctrl +M).. At this step I can not begin to follow the first point is: Select all cloned tiles using a selectionwindow (rubberband selection). Do not select the base tile. I've tried it over and over again, but

    still did not produce work like drawing tutorials instance

    Refresh comments list

    Add comment

    2009-2011 Very Simple Designs.

    Powered by Joomla!. Valid XHTML and CSS.

    Inkscape Tutorial: Seamless Patterns | Vectors http://verysimpledesigns.com/vectors/inkscape-tutorial-seamless-patterns...

    17 of 17 10/4/2013 10:33 AM