When you have multiple drop downs one after another, in an accordion fashion it overlaps in WebFlow by default. Oftentimes, one desires to have it be pushed down instead. To do so, go to the drop down list element.
In the settings change it’s position to “Static”
Save and Publish. It should now be pushing down the subsequent drop downs.
When I first started my journey in creating CC (Custom Content), it was daunting. I will admit it is tedious, but it is doable. I find the best way is to start small and work your way up to a more complicated cc.
Start with Recolouring
When you begin, the easiest way to dip your toes in creating SIMS CC is to recolour what has already been made by Maxis. This will help you become familiar with Sims4studio, where cc goes, and photoshop. I am assuming the game has already been downloaded on your computer.
Step One: Download Sims4Studio
To start with recolouring, you will need Sims4Studio and an Image editing program like Photoshop (I will be using Adobe Photoshop). GIMP is a free online tool you can use.
The download is hosted on https://sims4studio.com/. It is a place where SIMS Creator can come and chat with each other on the forum. It is an accommodating place. Their users have years of experience in creating SIMS CC. You can look through the forums for answers to common problems. When you have downloaded it, please open it and configure the paths by opening up settings in the top menu. You can see below what paths you have to specify.
Step Two:Create a new Project
Now, in Sims4Studio, choose the option under CAS to create 3D Mesh, and then click the button “CAS.”
It will then open up into a catalogue, where you can choose what item of clothing you want to modify and then click next. It will help you to save and create a project name. This will create a package that the program that will collect all the information so you can insert it into the game.
Step 3: Export the Texture
Once you save it will then open into this window. Here you will export the texture of the clothing to modify it. Go to the texture section. This is where you see the options “Diffuse, Shadow, Specular, Normal, and Emission.” For now, we will focus on Diffuse. Click that option and then click the Green “Export Button.” Save it as whatever you want.
Step 4: Modify the Texture in the Image Editing Software
Whatever your choice of imaging editing, open up the texture in it. For mine, I chose this plain t-shirt. I am going to put an image on it for fun! There are many tutorials on youtube on how to edit images. When you are finished, save the file!
Step 5: Import the new texture back into your project/package
Go back to your project/package, and in the texture section, click the blue “Import” button. A window will popup, and choose the texture you edit. It will now appear in the studio window and on the screen. Click save when you are done.
Step 6: Put the package in the mod folder
There are a lot of tutorials on how to add cc on youtube. I put one below. Generally, put the package file into the mod folder within your game. It will inform you of the added cc when you start it up.
And that’s it! When you go into creating a sim, you can filter the content by custom content, and it will show up.
Marvellous Designer: Link Sims4studio:Link Blender ver 2.78: Link Blender ver 2.70:Link An Photo Editing Program. I use Photoshop:Link The SIMS Game:Link
SECTION 1
You will need to download the SIMS avatar/mannequin to ensure that the clothing is made to fit the EA models. You can download them here: Link. Once you download it, you will open Marvelous Designer and import the avatar. You do this by going to FILE>OPEN>AVATAR.
Then it is time to create your clothing in Marvelous Designer. Here is a starting tutorial on how to do that.
SECTION 2
Once you are down, you must export your clothing as an OBJ file. To do this, go to FILE>EXPORT>OBJ
Choose a name, and a window will pop. Make sure you select these settings:
SECTION 3
Here you will start getting the base to prepare for editing in Blender. Open Sims4studio, and under the CAS section, choose “Create 3D Mesh” and then click the blue “CAS” button.
Generally, you would search for nude tops and bottoms. You would then select the SIMS model you are designing for. However, in the case of a complete body outfit, like a dress, etc. You need to export the top and bottom and combine them.
To export the body parts. Please select the item and create a package for it. Then in the tabs beside the model picture. Select export mesh. Save it. Do the same for the bottom.
Open Blender 2.78 and open the top mesh when that is done. Go to FILE>APPEND, and then choose the bottom. Then click OBJECT>S4STUDIO_MESH_1
In the layers panel, select the two meshes. Then click JOIN under the tools section.
SAVE YOUR MESH. Constant saving is also good practice my opinion (flashbacks to school assignments being lost). Now you got your base to work with for your whole body clothing. These joining steps don’t apply if you have a top or bottom. You would need to export the nude top or bottom. Anyways, ONWARD.
SECTION 4
This is where you will start modifying the clothing you’ve made to fit and work on the “mannequin/base.”
Ensure that the “mannequin/base” is open. Go to FILE>IMPORT>WAVEFRONT(.OBJ) and select the marvelous designer mesh you created.
It should look something like this. Here you can see there are holes in the mesh. I tried my best not to have these holes in marvelous designer. Sometimes you can freeze fabric and change settings. However, it sometimes doesn’t work (I will make another tutorial on using MD). It is a shame that I couldn’t fix it in MD, but that doesn’t mean you won’t be able to fix it in Blender. Here is how I fix those little holes.
Near the bottom, go into Edit mode.
When you are in edit mode, you can see all the faces, points, and edges of your clothing. There are three options near the “modes” menu. The first is to edit points, the second is to edit edges, and the third is faces. The video below is a good tutorial explaining how to manipulate it.
Essentially, you don’t want any skin showing through the clothing. Once that is done, you can close the “holes” in your clothing. I’ve seen tutorials skip this step. It is optional, but I think it makes your clothing look better.
Here you can see the opening in the sleeves, which I refer to as a hole. You can see up into the arm.
Here it is closed. You can see the difference. Now you can’t see up the sleeve. It is a matter of preference.
I like it closed, and here is how I do it.
Again, ensure you are in edit mode and open the UV window. By default, it should be on your left side. You should see the icon that I circled in red near the button. Click it. It will ensure whatever you do with the UV is synced with your mesh.
I then select the vertex mode right next to it. I then select the points of edges of the opening.
Then I move the mesh view where I can see the mesh of my clothing. I would hide the layer with the “nude/base” mesh in the layer menu. This way, you can see the holes better.
Once it is off, I then go to the mesh. The points should be highlighted in your clothing mesh. I press “E” and “S.” E is for extruding your mesh to add additional faces. S is for scale to help close it. It should be like something below.
Don’t click out. With everything selected, press the space bar and look for “merge.” A pop-up should appear when you click “Merge at the center.”
The hole will close!
Next, select all the polygons. Then click the space bar again, and type in “edge split.” This will flatten the polygons so you won’t get these weird gray bumps.
Then you select all the polygons again. Go to the Shading/UVs section, and go down to UVs. Click Unwrap and select project from view.
It will then appear in the UV section to the left. Do this for all the holes.
SECTION 5: UV
Next, you will need to look for a reference in Sims4Studio. The purpose is to transfer the data from a premade sims outfit onto your own so that it will work in the SIMS game. Find the one that looks closest to yours and covers the clothing. I would recommend trying the first look in the base game. If you can’t find one similar, then go onto other packs.
To do this, open Sims4studio. The process is similar to exporting the nude blender file. Once you get the file, open your project file. Then go to
Then go into Object, and you will see these files that say s4studio_mesh_X. With X being any number. I have four, but it ranges from 1-6. Select all and then append.
Then click all the layers of the reference and then join them.
Click the data mode. It’s the triangle button. MAKE SURE YOU CLICK THE MESH YOU CREATED IN MARVELOUS DESIGNER.
Go to the UV section and open it up. You will see UVMap.
Double click the UVMap and rename it to “uv_0”. Then click the “+” sign on the right to add the second map and rename it to “uv_1”.
Again stay on your mesh layer, stay in “uv_1”, then click the modify tool. It looks like a wrench. Also, go into object mode.
Then go to the drop-down menu where it says “Add Modifier” and choose “Data Transfer.”
These are the following settings that need to be appended. The source object will be your reference. I renamed mine to reference to make it easier to find. Also, click “UVs.” It will turn blue if you click it.
Go back into Edit mode and check uv_1. It should look stretched like this if it does great! Just hide the reference. It will be used later.
Now click into the “uv_0” We need to modify the UV a bit to prepare it for placement by going into the face mode on your UV side like this.
Select all the mesh by either clicking A or by selecting manually. Then click the picture icon next to “BaseTexture” Open the window and click the first one. It will be given a map to help you know where to place the UV.
However, I don’t particularly like that image with the skin. It makes me uncomfortable. So I like this one better. There are similar maps for male SIMS. You can find them on sims4studio.
You can replace it by going to image>Open Image and choosing the other UV Map guide.
Now we will fix the stretched UV. With everything, select “S” for scale and then “Y” to let it know you want to stretch it on the Y-Axis. It was resized to where you want it. Then place the UV away from grids. Like this:
Now merge the “nude” and your design mesh. When you merge them, the UVs get merged too. The goal is to have your pieces of clothing placed in the correct area marked on the UV map. However, the places where you put your clothing already have something there. As you can see:
The next step is to remove parts of the UV and put yours there. To do that, press “A” and select everything. Next, look in the 3D viewer; you can see all the faces selected. Now we are going only to delete the faces we can’t see. This gives space and helps reduce the size of your file.
With everything selected, we will deselect the skin we can see. To do this, press “C” To get the brush and middle select on the mouse. It should be the wheel. Start going around the model and deselect until you are complete. MAKE SURE YOU DESELECT YOUR OUTFIT TOO.
Then go to the tool menu and select: remove > faces
Now you can rearrange your UV into the correct places. To do this, select the faces, click “G” to move, “R” to rotate, and “S” to scale. Finally, “A” to deselect. Here you can see I placed them best as I could. The bottom right corner is sort of a free for all. I placed misc stuff there.
Select your clothing UV in the bottom left corner of the UV window. Click – Image > New image
Then a window will pop up and change it to 2048 px for the height.
Next, on the right-hand side, there is a camera icon. Click it, and these settings should show up. The Margin is the only one I would change to 4 px. Then click “Bake.”
Once it is done baking, go to the image section again. Click – Image > Save As Image.
SECTION 6: ADDING WEIGHTS
Open Blender 7.0 and open the file.
Go into the solid view by clicking the white circle at the bottom and clicking “Solid.”
Go into Weight Paint mode by clicking next to it.
Also, ensure you are selecting your UV_1.
Your model should look like they have been painted blue like this:
Turn your reference layer back on. If you deleted it by accident, append it again.
HERE IS WHERE YOU TRANSFER THE WEIGHTS. Click the reference layer, press shift, and then click your outfit layer. Then click the “Transfer Weights” button in the panel.
You can check if you did it correctly by turning off the reference layer. Then going into the UV_1 panel and you should see something similar. Click through them, and you should show them brightly on your model like below. It lets you know that weight has been successfully transferred!
SECTION 7: VERTEX PAINT
Next, go to the “Vertex Paint” Mode at the bottom.
Your mesh should be bright green, and the clothes should be white.
Now, go to the left; you should see a colour wheel with a white rectangle below it. Click the white rectangle.
A panel will pop up. Click the eye dropper tool and select the green you see on your model.
Then go to the bottom and select Paint>Set Vertex Colors.
Your entire mesh should be that green colour.
You can now finally delete your reference layer!
SECTION 8: LABELING YOUR MESH
Go to this menu again, and choose the sun, ball and cylinder icon.
You should see this menu below. Put the same settings under “S4Studio CAS Tools”.
Type: GEOM
Cut: 0000
Of course, SAVE YOUR WORK.
SECTION 9: IMPORTING IN SIMS4STUDIO
Open Sims 4 Studio and open the package you started with, which should be the nude/naked sims.
In the mesh tab, click “Import Mesh” and choose the clothing that you’ve worked with.
Once it is done importing, you will see it in the preview window.
Then go to Texture Tab. Choose Import, and remember the image you save of your UV from before? I edited mine a bit—Import that.
Ta-da, you should see the pattern on the model.
Then go to the categories section, and choose the appropriate filters.
Save the package, and then put it in your game’s MODS folder.
You should see a mods list pop up when you open your game.
Put your clothes on your sims and test it! Go to Content filter and choose custom content. Stretch the clothing, spin it around etc.
YOU’RE DONE! GREAT JOB!
Here are Youtube tutorials on the overall process of creating SIMS Clothing that it recommends.
There is still so much more to learn, but this was a beginner lesson. There is still learning about LO1, etc. I’ll make a tutorial on those later!
Marvelous Designer is the program to create 3D clothing, not just for SIMS but the entire gaming industry and beyond. While you can create clothing in other 3D Programs, the tools and interface in Marvelous Designer are just better. Here I will go over the basics of creating clothing for the SIMS game. Specifically, SIMS 4. You can get a more in-depth look at it by going to their website: https://www.marvelousdesigner.com/
I’m using version 9 for this tutorial and creating a tank top.
STEP 1: DOWNLOAD THE AVATAR
Like sewing, you need a dummy! Here it is called an avatar instead. There are 5 in total: Female, Male, Child, and toddler with and without a diaper. Below are the download links:
Once you’ve downloaded it, open it in Marvelous Designer by going to File>Open>Avatar.
To navigate around the 3D avatar that is on the left side of your screen. Here are the following controls:
Zoom – use the scroll buttons Rotate around the avatar – use your right button and hold and move Pan up and down, side to side – Hold down the middle scroll button
You should see an avatar outline on the screen’s right side. This is where the pattern will appear.
STEP 2: CREATING THE PATTERN & SEWING
To start creating a pattern, click the Polygon tool as highlighted below
You are using the avatar outline as a guide. You are going to create the front part of the t-shirt. You will click the first point, then the next till you close the loop and complete the pattern. It should look something like his.
I want to curve the collar to give it a rounded neck instead of a “V” Neck. To do this, go to the “Edit Curve Point” Tool.
Then click on the line you want to curve. In my case, it is the half of the collar. Click in the middle and then drag.
Click “A” to return to the transform tool/selection tool.
Click on the pattern, right-click and select “Symmetric Pattern.”
The outline will appear, and drop it next to your original pattern.
Next, click the segment sewing tool. You are going to “sew” these two pieces together.
Click on the middle line in the pattern, then click the line next to it. You should see the dashes to show you’ve successfully sewed the two pieces together. It will also show on your 3D avatar.
Then select both pieces by returning to the selection tool, holding shift, click both patterns. Then press CTRL+C, then CTRL+V to paste. You should have two of the same pattern.
Switch to the 3D View. There is an easier way to do this, but I will show the manual way to stitch the back pieces to the front pieces. As you can see, they are hovering in the air. Select the two back pieces again. Drag then by clicking the left click, holding down, moving your mouse and rotating simultaneously. You are moving them to the back of the avatar.
Select the two back pieces again. Drag then by clicking the left click, holding down, moving your mouse and rotating simultaneously. You are moving them to the back of the avatar.
Once it is situated close enough, right-click and select “Flip Horizontally” since the pattern is facing the wrong way.
Now the lighter side is showing, and this is how you know you have the right side.
Next, go back to the sewing by segment tool.
You can click on the sides and the corresponding opposite side either in the 3D Window or the 2D Pattern Window. This is how it should look. None of the “threads should be clipping through your avatar.
These are the sides that I connected.
Now we can stimulate! At the top of the 3D window, you should see a down arrow above the walking icon. Click it.
The pattern will automatically get sewn and form around the avatar.
You may see some holes in your clothing. Hover over it when the stimulation is one (The arrow is highlighted). You will see a hand, and you can tug on it to fix it. If you can’t fix it here, you can fix it in a blender later.
You can merge the lines to make it smoother. To do this, click the middle line, right-click, and choose merge. Stimulate again and fix where necessary.
Other Notes
In the bottom right corner, you will see the property editor.
Here you can adjust the fabric. I will highlight the ones I found useful so far.
Particle Distance – Is the distance between two points on faces. You can use this to reduce the number of faces. You can imagine them like a metal sheet. One big sheet will be hard to curve. However, it’s more malleable when the metal sheet is split into many linking shapes, like chainmail. It is similar here. If your File is too large and you want to reduce it. This may be a solution.
Shrinkage Weft – This number will determine how loose your fabric/mesh is. The lower it is, the tighter. You can mesh with the controls here, depending on the look you want.
Shrinkage Warp – This number will determine how loose your fabric/mesh is length-wise. The lower it is, the tighter. You can mesh with the controls here, depending on the look you want.
Remesh – When creating 3D objects, you will often see them being cut up in ‘faces.’ Remesh is a feature in Marvelous Designer to reshape those faces and use fewer faces. The fewer faces, the lighter your File will be.
The default faces are triangles. To see the faces, go to the corner of your 3D simulation window. There will be a row of icons. Go to the fabric (4th one). Then go to the Mesh Fabric. It will change the View.
Here is my mesh:
Click CTRL + A on your pattern. Then check the “Remesh” function. Here is what it did to my mesh. You can see its fewer faces, and it’s square now. Sometimes this is the best option, but it isn’t because Blender will read it oddly. It is up to you.
One final tip. Go to the upper right corner and click UV Editor. When you export your pattern, sometimes in Blender, it will overlap. You don’t want that. Go to the UV Editor and move your pieces around to fix them.
And that’s it! If you have any questions, let me know. There is so much more to Marvelous Designer than I showed here. Happy creating!
There are three ways to create “buttons” on your Mesh.
Create it in Marvelous Designer: You may have noticed that the number of faces is enormous when you create buttons and export them in Marvellous Designer. Large than it is comfortable to import into the SIMS game. I would avoid this route.
Create it via textures: In this method, you would have a flat mesh and create the texture using photoshop. Then using, Sims4Studio uses the bump map, shadows, etc. You can create a facsimile of a button. I will cover this method later. However, it may not look just right.
Create the button directly in Blender: This is the method I use. It doesn’t need that many extra faces, and it looks all right, in my opinion. I will cover this method in this tutorial.
MAKING THE BUTTON
First, make sure you don’t have any layers selected. Then at the bottom of the menu, go to Add>Mesh>Cylinder.
It will appear as a vast cylinder but don’t worry; you will scale it down. To scale down everything, click “S” and then move your mouse to scale down in portions.
When you get the cylinder to the size of the button you want, it’s time to scale on the Y scale, or in other words, squish it.
Go into edit mode, and then click “C” to get the brush, then only select the top side.
Then select the blue arrow and pull/push it down to make it thinner.
MOVING AND PLACING THE BUTTON
The next step is to rotate it and place it where you want it on the clothing.
To rotate, select the whole cylinder by clicking “A” and then moving the mouse to rotate it. Using the arrows, move it into place.
U/V
The next step is to unwrap the button’s UV so you can edit the look later. To do this, go to UVs>Unwrap
You may have noticed in Sims4Studio that “Meshes> Level of Detail” is in this drop-down menu, and you wondered what that means. Well, it stands for Levels of Distance. As we mentioned before, clothing is made of meshes, which are made of polygons, the shapes (called faces in 3D terms) that make up your object/mesh. The more shapes/faces you have, the bigger your file is and the more time it takes to load it.
In the SIMs, they use different LOD for the clothing to help your computer run the game quicker. 0 – 3 is where your camera’s distance is from the object. 0 being the closest, while 3 is the furthest. As the level increases, the number of faces and detail is much lower. This allows your computer the render at a further distance quicker as it doesn’t have to show much detail. If you don’t specify a different mesh for each level, it just uses the default LOD 0.
It does make your package bigger, but it increases the quality of your clothing. Suppose you don’t care about your clothes in playing mode and are just in CAS mode. Then you don’t have to worry about LODs.
In summary, you need four different meshes for each level. To do this, export each LOD and name them accordingly. In my guide “How to Create SIMS 4 Clothing CC,” the first half of sections three and onward shows how to use these base meshes with clothing. You are putting your clothes on a less detailed mannequin/avatar. Then you are modifying the clothes also to be less detailed.
You can minify/reduce your mesh faces in a Blender or Zbrush. These two programs have different ways of doing this. However, Blender is free, while Zbrush is paid. We will cover both.
MINIFYING MESHES IN BLENDER
In Blender, when your clothing mesh is separated from your base mesh, you can reduce the number of faces by going to “Add Modifier” and selecting “Decimate.”
Decimate after your clothing has been appended, faces deleted, and before you combine your base with your clothing.
Make sure you are in OBJECT MODE.
You then mess with the Ratio by either sliding or changing the number. You can visually see it changing on your clothes. Choose a ratio where the clothing isn’t messed up and retains a sense of what it should look like.
MINIFYING MESHES IN ZBRUSH
ZBrush is another program created explicitly for doing 3D Texture and materials. It will add little details and help reduce poly size. This method has mesh reduction happening before you start in Blender. After you create your clothing mesh, import it into Zbrush.
First create the content that you want to pop up. Here I just did a green box with text. If you have multiple items you want to pop up simultaneously, you have to group them together. To do this, select all the items and then right-click and choose group.
Then open up the Buttons and Forms Panel. To do so go to Windows > Interactive > Buttons and Forms.
Then select your pop up content, and choose button from the type drop down options below. Then give it a name. I gave mines the name of Green Box. Also, select hidden until triggered. This is important as it hides the content from the viewer initially until it is triggered by the button we are going to create.
Next, create your button any way you want. Again, make it into a button, give it a name but do not choose hidden until triggered.
Next, select the plus icon next to actions. Then select the option, Show/Hide Buttons and Forms.
An additional section will show up in the panel. Next the X beside the names of the button you create determines the action when the user clicks the blue button. Click the X till you see an eye icon. That means that the button is now visible.
You can also hide by choosing the eye that is slash out, but for now we are choosing the show option.
Then go to File > Export. Then choose a file name, and choose to save it as an ADOBE PDF (INTERACTIVE). If you don’t the pop up will not work.
Test your button and it should work.
Additionally, you can have the pop-up close by creating another button, such as an X and chose the hide option as discuss before. You can also choose a rollover state, when someone hovers over the button to create an additional dynamic.
To do that, click the button and then click [Rollover] under the appearance section and choose whatever you want.
Also, many other have created video tutorials on how to do a pop-up. Here is one I recommend.
Adobe Illustrator offers an array of default patterns to use in your work. However, it isn’t straight forward to recolor it. To so, open the pattern and DOUBLE CLICK on the pattern you want to change.
The following should show up. The Pattern Options Panel and the pattern becoming isolated. There should be a square over the pattern, and the rest is faded out.
Select the objects in the square only, and you can recolor it to any thing you want.
The pattern should change color too in the Pattern Options Panel.
I must note, that tracking stats on your PDF is only possible if it is online. If a user choses to download and send it via email to others, you will not be able to track it. With that said, some stats are better than no stats.
*You must already have an Google Analytics Account
Recently, Adobe had teamed up with Google Analytics to allow embedded tracking on PDFs. To do this, go to File> Publish Online
Then go to the advanced tab, you need to put your Measurement ID in. You can easily find it in Google Analytics.
Then click “Publish”, it will then publish to Adobe’s Cloud and can be viewed. Unfortunately, the URL will have Adobe in it. It cannot be a vanity link. What you can do in that case is to embed the PDF file onto a webpage to get a vanity link.
Of course, test it out and it should be working. Also, here is a video tutorial if you need that explains the steps again.
I will also note here if you go to through Google Analytics there are certain stats you can see. However, there are other PDF tracking companies who can get a bit more different stats. It depends on your needs of course. For many, google analytics will be good enough.
The clipping mask in Adobe Illustrator is a bit finicky. Here’s how to do it:
I’m starting with two shapes.
Select both objects. Then go to Object > Clipping Mask > Make or hold Ctrl+7 on your keyboard.
This is the result, the object on front is the shape it will take. The one beneath is what will show up.
Note: Clipping Mask works best with simple shapes. If you have a complicated design or pattern, you will have to group it first together before clipping.
If you need to make changes to the position of the clipping mask objects, you will need to go into the layers panel. Click the arrow next to the layer to expand it. Then you can see the components, you would have to double click on the layer you want to change.
First, ensure the fill and line colors is transparent. This can be found at the bottom of the tool panel or at the top. You have to select this square cross out with a red line.
Then select the pen tool, and create the curve that you want. If you want to do it on a circle, you can use the shape tool path.
Then select the text tool and hover over the line, till you see the cursor change to a T and Squiggle Symbol. You can’t see it in the image below because my computer couldn’t screen shot it.
Click on the path and the curve text should appear.
You can also shift the text along the curve by selecting the ‘move’ option. You should see a line and a white square at the beginning of the curve text.
Click on that, and while holding, drag the text along the curved path.
And that’s it! Hope that helps and happy creating.
There are a lot of online sites where you can create scannable tickets, but often it is “freemium”. Meaning there are features that are free and there are other features that will cost money.
To make a scannable ticket yourself and manage it would require some knowledge of coding.
A low-tech way is to generate numbers and use an Excel sheet, then have someone (like a bouncer) check the ticket number code. A word of advice don’t use 001, 002, 003, etc. Like a strong password, use a combination of numbers and letters. That way it’s harder to counterfeit.