How to Work with Graphics in CLO - Part 1

hi everyone I'm going to review the different ways that you can work with graphics in club in the following video I love you how to place a graphic move a graphic resize a graphic extract resized graphic info so any new dimensions that result as changing the size of your graphic we can take that info if we need it how to handle graphics that are placed over seam work extract graphic placement so dictating where the graphic is placed up from a hem or down from high point shoulders over from an armhole all the ways that you can mark out this information for anybody who needs it will also go through updating graphics in colorway mode and then also updating graphics and colorway mode but with a method using artboards that are all in the same illustrator file and lastly I will go over how to review graphics on multiple size ranges or across a size range you can download the folder that I'm working with called graphics practice from the link below and follow along once you've downloaded the folder you can link it to your library through the Add button here I've already added my folder I created a folder called Clos practice and I placed the graphics practice into that folder and linked the entire thing to my library so now if I double click into here I have some graphics and some avatars and some texture images that we can use to go over how you can use Clos for a graphic review placement and adjustment so in this folder there's a mix of things we have graphic images that are pngs so all of the negative space has been deleted there are three clove aisles we have a small medium and the large guy that we can work with and then there's also one illustrator file so to begin we're just going to start with the very basics of placing a graphic so I'm going to open up my size small so you can double left-click to open so the tools that we will be working with to add our graphic or a just our graphic are located here in the 3d window but we have the same exact tools over in the 2d window so they do the same thing when you click on them to try and use them in close there are two ways that you can place a graphic if you have your graphic already linked to your library and you can see them here you can right click on that image and choose add as graphic once you do this you will not see any immediate change basically what is happening is narrow that graphic is in your hand almost or it's attached to your cursor whether you can see it or not wherever you click next whether it be the 2d window or the 3d window when you click to place your graphic a window pops up just asking you to confirm the size that you would like to place your graphic as initially so the measurements will match exactly whatever size this image was exported out from illustrator or Photoshop but if you want to resize it here you can adjust that I'm not going to change the default size I can do that later if I'm not happy with the original size so I'm just going to go ahead and click OK and that is the first method that you can use to add a graphic to your garment I'm going to go ahead and delete this to show you the second option that you have so if your graphics are not linked to your library and instead they're just somewhere on your computer [Music] you can still add them if you click on this icon called graphic 3d pattern or here graphic 2d pattern it's going to open up to allow you to browse through your computer locate a folder and then select an image and open it this way as soon as you click open you will not see an immediate result you need to left-click on the pattern that you want your graphic to be placed on when you place your graphic in the 2d window you will get an additional menu in your add graphic window that will allow you to adjust the positioning of the graphic from the lowermost point or from the highest point or from the right side of the pattern or left side of the pattern you will be able to reposition your graphic after you've placed it so you will have other options aside from this initial window once you've placed your graphic onto your garment now I will go through the different ways that you can edit your graphic as soon as you place your graphic onto a pattern Chloe um attica lis switches to the transform graphic tool and this is the tool that allows you to select a graphic and rotate it or resize it or move it so first I'll review how to resize it and the different ways that you can do that so if you left-click on your graphic you will notice a handle appear around the graphic so if you hover over this dotted circle you will see two symbols you will see this white double-headed arrow or you will see these two little darker arrows that look like they're chasing each other so the white double-headed arrow is what you will click and grab to scale a graphic up or down so you can freely move this and then let go when you get to a size that you like when you do this in the 2d window you cannot see the graphic actually changing as you're moving but if you do this in the 3d window you can actually see the graphic adjusting as you resize it the other option that you have is as you're moving to resize a graphic if you right-click while you're in the middle of this action you will get a transformation box pop-up that allows you to adjust the width or the height by either percentage or exact dimension this little icon here will lock the aspect ratio so when it looks like a closed link so if you make any adjustments to your graphic it will apply to both the height and the width if you unlink them then you will be controlling only one dimension independently the other motion that this tool allows is to rotate your graphic if you hover until you see the little two arrows chasing each other you can then click hold and move that around and if you are rotating in the 2d window you will have the option to simultaneously right-click and adjust your position by an angle amount if you want to share this graphic or copy this graphic onto another pattern the way that you can do that is with the transform graphic tool right click on your graphic choose copy and then paste once you hit paste you will have the graphic attached to your cursor and then you can click to place it onto another pattern so in order to share graphics or copy graphics onto another pattern you must go through the action of copy and paste or you can easily use the shortcuts of ctrl C and V or command C and B for Mac so here if I just simply have it selected I'm gonna hit ctrl C on my keyboard and if I hit ctrl V it then is attached to my cursor and I can click to place it on to another pattern you cannot share or move graphics by simply clicking them and dragging them onto another pattern when you try and do that you will get this error message because cloth' thinks that you're just trying to take the graphic off the pattern and the program physically will not allow you to do that and then if you want to delete any graphic that you don't want to have there you can either right-click and choose delete or simply select it and hit delete on your keyboard next I'm going to demonstrate how you can put a label or something to show on the inside of your garment rather on the outside so here I have a tag I'm going to right click and add this as a graphic I'm gonna go ahead and place it onto the backside of my pattern so when you place it it is going to show on the outside of your garment I'm gonna hide my avatar I want this graphic to show on the inside of my garment so to do that if you click on the graphic in the property editor you will see a section called graphic configuration if you expand that menu you will see face and then here where it says front I can change this to BAC or bulls when I switch to back then the graphic will change to show only on the inside of the garment but now any written words actually show up backwards so to correct this you simply right click on the graphic in your 2d window and choose flip horizontally then the letters will show as backwards on your 2d pattern which is absolutely fine the important area is for them to show correctly in the 3d window on your Garmin next I'm going to review how you can extract the new dimensions of your resized graphic now this is very very simple with the transform graphic tool you can simply left-click to select the graphic once you see that the graphic is yellow or highlighted on the right hand side of your program you will have the property editor if it is collapsed and you cannot see it just look on the very far right of your window and then left click where it says property editor the new dimensions of your graphic are going to be nestled here in the graphic transformation section if the graphic transformation information is collapsed you will not see it immediately you might have to expand that information below graphic transformation and then here in the width and height are the new dimensions of my graphic also if you would like to adjust your graphic from here this is another option for resizing so here you can check to lock the aspect ratio on so that will maintain the height in the width ratio as I adjust one measurement so here I'm going to increase the height of it to ten and because I have lock aspect ratio checked my width also adjusts here's the location where you will get the new resize information or another option to adjust dimensions this way so that's pretty simple for just the general size of the graphic and please note that that information follows whatever the bounding volume of the graphic was so when this image was exported there was extra space on the left and right side of my artboard so the dimension of the width is actually including that it does not go from the cleanest edge of your graphic it goes from the bounding box that you see around it the next thing I'm going to review is how to extract the new placement of your graphic so you can tell someone this is placed a certain amount for down from the high point shoulders or this much over from the right side seam however you need to dictate it there are a couple options to help you do that so the very first thing that is built into clos is this section called 2d measurements so this will be off by default you will not see anything you must have your graphics selected and when it is selected in the property editor you will be able to see 2d measurements so you can expand this and ask low to show you the marking to the center of the of the graphic so here it's basically targeting the exact center of the graphic and showing me the placement from basically every side now the limitation with this is that the placement that it gives you is always aiming for the center of the graphic and it's always basically dictated from the center of the width or the center of the height as you can kind of see I don't really have the option to change this the other option you do have is instead of measuring to Center I can turn this all off I can ask Claude to show me the measurements to just the outline of the graph but again it's always aiming for the center and then in this case where my graphic artboard was a little bit larger than the actual graphic this may not be entirely helpful the other option we have for just getting these basic measurements is just using the internal polygon line to mark out the placements ourself and then extract the measurements that way I'm gonna turn off these measurements right now as I continue and using the internal polygon I can basically so here I want to know what is the what is the placement down from High Point shoulders and High Point shoulders does not align with the center of the graphic so what I'm going to do is draw these guidelines that I have are very helpful so I'm gonna follow these guidelines so I can see that it's actually hitting the top of the graphic left click to start my line so you see I'm drawing just drawing a straight line if you hold shift it will really lock your movement and then to end your line you can either double left click or you can left-click once and then hit enter on your keyboard and that will end the line I just drew my first marking this is just so I can have the topmost level of the graphic mark and then with the same internal polygon I'm just going to left-click and hit my high point shoulder hold shift and when I hit that marking that I placed to show me where is the topmost level of my graphic I am going to double left-click there and end that line so that's my first placement I can then switch to the Edit pattern tool left click on your segment and I can see okay this graphic is placed to point six three nine inches down from high point shoulder so then the remaining markings that I need you can basically just use this method here if I want to show my placement from center front if there is a line there it will kind of automatically grab it and then I can just draw a placement marking there so now I can go and update my tech pack and say this graphic is 0.6 nine inches over from the center front and two point six three nine inches down from my high point shoulders if instead I want to dictate that from my armhole you can also draw a marking wherever you need so I might want to put a guide so I can really cleanly mark what is the furthest left area of my graphic so then I can add some extra guidelines here so now I have a very very specific marking so now I can tell somebody if you want to mark this over from the armhole if you measure 5.5 inches down from your across shoulder point so here's my shoulder point at five point five five four inches down so then that would allow someone to find this level the graphic will be placed point two four three inches away from my armhole edge or a quarter of an inch away from the armhole so for these unique type of placements you're going to manually have to draw in these internal markings and extract your measurements that way what happens though when you draw these internal lines is I'm gonna hide these black outlines of my garment when you draw internal lines on your garment it might add a kind of a crease or a marking to your 3d garment that disrupts the visual a little bit it's not as clean or uniform looking as I'd like I am aware that this happens in clone so once you extract this information and recorded all the measurements that I need if you don't actually need the internal line to be selectable you can convert them to a baseline and this basically keeps the marking so baselines show up is purple here I can see my baselines in my 3d window if you don't want to see them in your 3d window over here in the 3d garment display there is the option to show or hide the baselines so I can hide them and then when a marking is a baseline instead of an internal line it does not show a little indent or crease in the 3d window so I can keep that marking there in case the pattern needs to have it but I don't actually need it to be functional in any way it's just a marking so that's really how you can use the default markings that are already in there or if you have very unique markings that you need information from then you can manually kind of draw these markings and just get the measurements yourself the next thing I want to review is about graphics that are placed over seam work if you take a graphic and you move it so part of the graphic is not entirely on the pattern it is not going to show up on the other side or the connected pattern piece in order to create this visual you have to have a copy of your graphic on the other pattern piece and align the images so the graphic appears to match but the nice thing is once you've placed these graphics you can select them together and resize them simultaneously and the seam work will still match up there is a workflow that you can follow that makes the alignment of the graphic almost non-existent but that requires that you are creating the seam work after the graphic has been placed so for example I'm gonna go ahead and just delete this giant graphic on my side panel I'm gonna delete this I'm gonna add a new graphic place this image down so here I placed a graphic down first if I draw any style lines on my garment after I placed the graphic down if I cut and sew this style line [Music] it will split the pattern apart and it will duplicate the graphic and keep everything aligned so here I now have my front now has two panels all of this shirt is still using the same fabric I'm going to make a copy give that copy of my fabric a different texture image and then apply that fabric to this panel if you use this method of placing your graphic first and then cutting and sewing any seam work after it will cleanly duplicate the graphic to the split patterns and make the alignment process almost non-existent next I'm going to review how to update your graphics using color way mode and the rules and limitations to doing this so to move into colorway mode you can go to the top right corner of your clip and you will see a little arrow where it says simulation if you click on that arrow you'll get a drop-down and you can choose color way so when you move into colorway mode you will see everything that is already applied to your graphic so the genes that are paired with this top have a bunch of top stitches but I can see my graphics listed here I actually have more than I want I'm going to delete this one that I placed on the back if I need to remove this graphic so I don't see it here as an option you are going to have to move back into simulation mode then click on that graphic and delete this here anytime you need to delete a graphic you're going to have to do this in simulation mode but then I can quickly move back into colorway mode and then I will only have the single graphic so to add another colorway you can click on this little plus sign here if you want to rename your colorway you can adjust that here so I made a copy of my first version in order to swap a new image into my second colorway you have to select your graphic using the transform graphic tool click on the graphic and then in the property editor you will find here under texture this is the image that we currently have placed so I can tell that I am updating the current color way because this column is highlighted that is the one I would like to change and then you can click on this little Foursquare icon and it will open up a window to allow you to browse through folders on your computer so here I can click on a different graphic image so I'm gonna select this rose choose open and switch off that image so I did this for a reason because there is an important rule to follow when you are updating graphic options in colorway mode and the limitation is basically that whatever the very first graphic that you place the following images will basically fit within that first images boundary box and if the image that you place is smaller than your first image it will take that image and tile it over and over again until it has filled all of that space so in order for this to work the artboard size or the size of your image must be exactly the same between the images if it is not the same you will see this tiling happening so when you see this happening there's really not much that you can do within Clos to adjust this image to be the same as your first image so I don't get a repeat if I use the transform graphic tool and I think oh I just need to scale this up it does not scale the only the tile and keep that image within that board marking it will scale the entire graphic so here if I tiled this if I jump back to this version that has also been enlarged and this is not what we always want so I'm going to undo some steps here basically the setup for these to match needs to be done outside of Clos I'm going to swap out this rows with a version of the rows that I have made that is the exact same size as my first graphic so I have a version of the rows that I adjusted an illustrator to actually be the same exact size as my first graphic over here on the right is the first rows version that I've used but I'm going to select this version called rows large now when I click open that image is the exact same size as my first version so I don't get that tiling issue that I saw before so that's the basic rule of updating graphics using color way mode and some of the issues that you may encounter if your images are different sizes so the general rule is even if the image that you want to use for a different graphic option is smaller so I'm just going to open up my illustrator really quickly to demonstrate as long as the image is within an artboard that is the same size so here my artboard is six point nine four by six point seven to this image artboard is the same six point pretty much the same six point nine four so then I have this saved as a PNG I can click on this graphic now here to update the image that is being used in this colorway version you can click on little four squares then I'm going to grab this PNG so I can tell that my artboard is very large but my image is small that will eliminate the tiling that will happen because it's following the artboard not the image size I hope that helps you understand further how graphics work and the limitations and rules to be aware of so your work process moves very cleanly that covers how to use graphics in colorway mode now the next version that I want to go through is how to review graphics and colorway mode but using artboards so I'm actually going to go ahead and delete all of these colorways I don't need them I'm gonna kind of start from scratch to show you a different method so here's my original I'm gonna move back into simulation mode I'm just gonna delete this so to delete your graphic you can either right-click on the 2d window and hit delete or you can hit delete on your keyboard when it is selected I'm also gonna remove these markings just quickly that requires using the trace tool with trace then I can select these segments and hit delete on my keyboard okay so an option that might be a little bit better if you want to use color way mode for different graphic options is by actually setting up your graphics that you want to use all in the same file here I have illustrated open I have four artboards that are the same size and I have four different graphics placed within those artboards I've saved my file as it's an illustrator file this is not a PNG or jpg you can use Illustrator files to place as a graphic and close also so this is this also came with the download if you download it these training files this vial will be in there also so if you want to use colorway mode to show different graphic options there is another method that might be a little better suited for this and that requires using illustrator and having all of your graphics in the same file on different artboards so here I have four artboards that are all the same size the graphics vary in size within them but they're all within the same illustrator file I've made this file available in the practice files it's just called artboards so if you move into close you will see the file here in the library so Clos does not show any unique icon for illustrator files you will just see the name of the file and this icon but you can right-click on that and choose add as graphic so when you choose add as graphic with a file that has multiple artboards within it a window is going to pop up allowing you to click through and choose which artboard you want to use so I'm going to use our board one of four click OK confirm that I'm just going to use the default size great so I have the first graphic placed on the first artboard then I can move into colorway mode add a second color way now to update the graphic it's going to be similar to the default way that you might update this so I'm going to choose transform graphic select my graphic on my second colorway and then here where I can find the texture image for this process of bringing in multiple sizes I want to be able to see my 3d grid if you notice on my ground in my 3d window there's no grid you may have one but if you do not to bring it up you simply go to display environment show 3d grid great so now I can see the floor in my 3d space okay so first I'm going to place a graphic onto my first size of the small I'm gonna hit OK to place it then I'm going to use my transform graphic tool to reposition it resize it I've moved this around on my small size and tell I'm happy with what I see now I want to bring in my medium and my large and see if this same size will be usable for these other sizes to add that next size into my workspace I am going to right-click on the medium file so I have already saved this t-shirt as the medium the pattern that I have here is actually graded to just quickly show you so at the very very far right of your 2d toolbar you can show grading so this pattern had grading and I jumped to the medium simulated and then saved that medium simulated with the medium avatar as a new separate file so now that it's a new separate file I can right click add that new project into my workspace and when you're adding something into your workspace this translation box is important this center point of our grid what looks like the very center of my floor is the 0 0 0 location of the x y&z axis so the X is left and right and that's really all I want to concern myself with right now so I want to bring in my new medium but I don't want it to be placed in the middle otherwise it'll be directly on top of my first size I want to place this off to the right hand side if I type in one I will be placing my new Garmin 1 meter in a positive direction on the x-axis so I can hit okay great and then that new size pops up there sometimes the patterns might stack on top of each other so you might just want to select them and move them over so you have a little bit more space to keep them separated so now that I have my medium in my window I'm gonna copy and paste my graphic from one front panel to the other now before I do this there are a couple things that are going to really help me make sure the alignment and position of the graphic is the same so I'm going to make sure my two patterns are actually aligned so my front panels I've selected I'm gonna right-click on them in the 2d window and choose align to bottom now the hem level is aligned now when I copy and paste my graphic if I do a ctrl C and then a control B and if I hold shift while you're clicking to place your graphic it's going to lock it in a vertical or horizontal movement so then I can left-click on to my new pattern and I really know that this has now been placed at the actual same level so you can click on your graphic if you need to move this to the left or right or up and down you can also use the arrow keys on your keyboard so I just use the arrow key to move that over a little bit now I'm gonna bring in my last size which is my large so I can right click on this large add to workspace okay and now I'm gonna place this instead of one meter away I need to place it two meters away so now I'm going to change this to two meters in a positive direction on the x-axis click OK I'm going to select my front panels and align them to the bottom most level so then when I copy and paste my graphic I can hold shift and keep them in the same location so I've now clicked to place my graphic down on to my largest size and then I can see how the same graphic looks across all three sizes if I would like it to be larger or smaller on only one particular size then you can select on that graphic and edit independently of the others so this needs to become a little bit larger for this size now if I want my new resized graphic information with the transform graphic tool when you have it selected in the property editor you will see the width and height so on this size where I changed we're now at 22 and a half and these are about twenty and a half so just within a few minutes you are able to see if this graphic is applicable for a wide range of sizes without ever having to request actual samples and you can do all of this adjustment digitally before you go to sampling I hope this was helpful and you continue learning about the different things you can do in clos thank you

Channel: CLO

Views: 31,682

Keywords: CLO3D, CLO, 3D, Virtual, Fashion

Id: XqY8z8E9ZYo

Length: 39min 28sec (2368 seconds)

Published: Thu Dec 06 2018