Skip to main content

T-shirt mockup template for Inkscape (SVG)

As an avid Inkscape user, I've always wanted SVG t-shirt mockup templates. But, most often, the commonly available ones for download are for Photoshop (PSD) or Illustrator (AI). I currently can't afford an Adobe subscription so I'm sticking with open source apps (Inkscape, Gimp or Krita).

So, back in July, I decided to make an SVG t-shirt mockup template, based on a tutorial (for GIMP) by Irfan Prastiyanto.

Making one is just getting an image of a white t-shirt (one with slight shadows to show contours is good) and then, through the use of clipping paths, layers, and blending modes, be able to change the color to the one you want.

Here's how it looks:


To change the t-shirt color, just select the group on the 'color' layer and change its fill. To change the design, just make your own in the 'design' layer or import an SVG, PDF, or a PNG file (with transparent background) into the 'design' layer.

There's also a 'heather texture' effect layer that you can make visible (although the effect is hardly noticeable, depending on the t-shirt color):


There's also 'marbled' effect by turning on the 'marble texture' layer (you can disable the 'heather texture' layer first):


There's also a 'marble texture 1' sublayer on the 'marble texture' layer that you can turn on, for a more intense effect:


Here's the link to the file on my Google Drive.

It's a zip file with the SVG, the linked white t-shirt image and (if you want to use it) the color palette (in Gimp's GPL format—based on a t-shirt color chart from TigerBlue Apparel), that you can place in your 𝙲:\𝚄𝚜𝚎𝚛𝚜\<𝚈𝚘𝚞𝚛𝚄𝚜𝚎𝚛𝙽𝚊𝚖𝚎>\𝙰𝚙𝚙𝙳𝚊𝚝𝚊\𝚁𝚘𝚊𝚖𝚒𝚗𝚐\𝚒𝚗𝚔𝚜𝚌𝚊𝚙𝚎\𝚙𝚊𝚕𝚎𝚝𝚝𝚎𝚜 folder or 𝙲:\𝙿𝚛𝚘𝚐𝚛𝚊𝚖 𝙵𝚒𝚕𝚎𝚜\𝙸𝚗𝚔𝚜𝚌𝚊𝚙𝚎\𝚜𝚑𝚊𝚛𝚎\𝚒𝚗𝚔𝚜𝚌𝚊𝚙𝚎\𝚙𝚊𝚕𝚎𝚝𝚝𝚎𝚜 (if you're on Windows), or ~/. 𝚌𝚘𝚗𝚏𝚒𝚐/𝚒𝚗𝚔𝚜𝚌𝚊𝚙𝚎/𝚙𝚊𝚕𝚎𝚝𝚝𝚎𝚜 (if you're on Linux), or the Palettes folder of Inkscape app's Contents > Resources folder (if you're on a Mac—right click on Inkscape app and select Show Package Contents to pull up Finder—or so I've heard—I don't have a Mac).

December 8, 2022 NOTE:

Currently, Inkscape 1.0.0 to 1.2.2 fails to properly open the document's custom patterns used for the 'marble' and 'heather' shirt effects. I've since reformatted the PC I used two years ago so I don't remember what version I used to create this (I should have recorded how I created the patterns). I've managed to open the document with intact custom patterns using Inkscape 0.92.4 Windows 64-bit, but you might need to fix links to the t-shirt image.

This problem could have something to do with Inkscape's missing patterns issue or paint servers bug #3357.

Comments

Post a Comment

Popular posts from this blog

Make a quick-&-dirty repeating pattern in Inkscape (using hexagon base)

[Note: This was first published as a Facebook Note on January 29, 2016 . I am making it available here to add to the Inkscape pattern tutorials.] This is based on a tutorial for making hexagonal tiles for David White’s “The Battle for Wesnoth”, but you can skip the 72×72-pixel requirement. You can make your base hexagon in any size that looks good at 100% zoom. First, make a hexagon using the “Create stars and polygons” tool. Press the CTRL key while you’re dragging the cursor to make a proportioned hexagon like this: You may have to move the cursor around to have the hexagon lie on its side. Next, with the hexagon selected, remove the outline by holding SHIFT and left-clicking the ‘X’ swatch in the color palette: Replace the hexagon’s color with what you want by left-clicking the color swatches in the color palette – almost black, in this case: Next, add your main decoration. I just dropped-in a dragon I found at Wikimedia Commons: Group the hexagon and the object (selec...
2 comments
Read more

Make mirrored designs using Inkscape's Clone tool

Inkscape 's cloning feature makes it easy for you to make mirrored designs. This way, what you draw on one half will be mirrored on the other half. Here are the steps: 1. Create an initial design (I used Inkscape's Calligraphic Pen tool here), then select it: 2. Group the still selected object (CTRL+G) [Yes, you can have a group of 1 object in Inkscape] 3. Clone the selected group (ALT+D) You now have two objects: a group and a clone of that group. If you haven't changed Inkscape's default duplicate settings, the clone will be on top of the original and you might think nothing happened. The clone would still be the one selected so you can flip the clone horizontally by using the 'Horizontal Flip' (H) button The design will now look like this (clone still selected): The design looks like a black ribbon here (omg, tuwad na daan). Just move the clone to the right (or left or up or down) using the arrow keys (or SHIFT+Arrow Keys). Here I ...
Post a Comment
Read more

Create 'Fake Identity Generator'-style email addresses and passwords in Excel

Last week I needed to compile a list of several hundred fake customer names with fake (but verifiable) email addresses and passwords to test a client's eCommerce site. Fake data generators At that time, I knew of only two online identity generators: Fake Identity Generator  (FIG) and GenerateData.com  (GD). By accepting three user-specified parameters (country, gender, age range) FIG outputs a lot of nice fake data, including disposable (but accessible) YopMail email addresses and relatively easy-to-remember passwords. However FIG doesn't provide free bulk identity generation so I had to generate and copy-paste identities one at a time – a very slow process – along with manually creating accounts using these fake identities at the client site (I had no access to the client content management system so I couldn't bulk register the fake identities). On the other hand, GD allows bulk generation of identities (up to 100 at a time) for free (and with more paramete...
4 comments
Read more