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

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

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

Baybayin Fonts

[Blogger] I didn't set out to do Baybayin fonts in the first place but one thing led to another so . . . Here they are so far (shapes done in Inkscape and assembled in Fontforge ): Note: the newer ones do not follow the Lopez cross virama but the 'J' shaped 'pamudpod' introduced by Antoon Postma and adapted by the Mangyan Hanunoo. I also use the Bikol 'Ra' and—purists may cringe—I use extra kudlit on the newer fonts to indicate 'i' and 'u' from 'e' and 'o.' Traditionally, the double kudlit was used to double the e/i or o/u syllable. Baybayin Electric (download from this link ): Originally aiming for a more 'runic' feel that's easy to read in small sizes. Ended up with this: Baybayin Electric Monospace version (download from this link ): Baybayin Hilig (download from this link ): "Hilig," in Tagalog, means "passion, favorite thing/activity;" in Bisaya it means "slanting, oblique, ...
2 comments
Read more