Login

the5urreal · 04-01-2022, 12:43 PM

SHL trading cards by Ice Level are live and are the talk of the league! If you haven’t checked it out yet, head over to https://cards.simulationhockey.com/ and start building your collection!

First things first - hats off to the entire trading cards team! Special thanks and congratulations to folks that have put so much love into this over two iterations; @caltroit_red_flames, @39alaska39, @luke, @Blastmeaway, @GeckoeyGecko, @DrunkenTeddy, @jeffie43, @Lime, and @Kraagenskul and everyone else that was brought on to the team to get this across the finish line! You are finally getting to enjoy the fruits of your labor after three years of hard work. The reception has been nothing short of amazing!

The SHL trading cards launch is a monumental feat. Though I haven’t been around the league very long, it’s clear that it has created a buzz that hasn’t been seen for quite some time. We have witnessed members of the community return from an extended hiatus just to purchase cards. Others are even considering recreating (or already have) to get their new player name and render immortalized alongside favorites like Wibbly McButternutz and David S. Pumpkins. The data doesn’t lie. From the midnight release to the time of this writing (nearly three and a half days), 290 unique card owners have opened 2,562 packs which have released 15,372 cards into the wild. This equates to a total of $256,200,000 having been spent on packs of trading cards. These numbers will likely be much higher by the time this is posted.

So how does it all work? The community has asked various questions, most of which can be answered by the FAQ in the Discord server. However, there is another question that I’ve seen frequently that I hope to shine some light on in this media piece - why doesn’t my player have a card yet?

[Image: Kh50c0D.png]

There are roughly 1,400 players that qualify to have a card made for them. That is, if the player played in the SHL between S27 and S63, they qualify. S64 players will be added soon! To date, a little more than one third of the cards have been created, not including special edition cards (such as Hall of Fame). The team of card creators doesn’t consist of many people and we’re not always working on creating new base set cards. While that is the primary focus, there is also an effort to design and create card templates for entirely new sets and series. On top of that, the team also spends time fixing card errors reported by the community. All of this is done in our free time which can vary from day to day.

Creating a new card isn’t exactly a speedy process. Yes, we do have a template for the base set and that absolutely helps. However, there’s still a process we need to follow and considerations we need to make to ensure that the pool of cards is balanced. If the number of cards across the different rarities (diamond, ruby, gold, silver, and bronze) begins to get too close, we have to shift focus to the more common rarities to restore some balance. That’s where we’ll begin this journey. Let’s do our part by claiming a player with a bronze rarity and get their card created and uploaded.

A bit of a disclaimer - I’m frankly not the best example when it comes to demonstrating the process of creating a new card. I don’t know the vast majority of the players by name and certainly couldn’t tell you who their render is. I’m a perfectionist when it comes to the graphics I work on and probably take a more inefficient approach in Photoshop compared to some of the highly skilled members of the team. In other words, I’m slow and deliberate.

The first thing I need to do is browse the list of players available to claim in the Claim Cards menu. I’m looking for a player that has a bronze rarity, so I can filter by that. From there, I need to look the player up on the SHL site to figure out who (or what) their render is. The non-hockey player and non-human renders are the most fun for sure, but I don’t have a lot of free time. When I get time to sit down and work on cards, I want to find the ones that use hockey players as their renders so I can easily find a headshot that’s already cut out and get right to work.

[Image: pfSz5Gg.png]

After an unlucky streak of looking up six straight players that don’t even have a render, I finally find one - Konstantin Voloshin. He used Andrei Svechnikov as his render. Should be easy to find a headshot of him, so I claim him. This adds the player to my Submit Cards menu.

[Image: sGFsZP0.png]

When I’m searching for a pre-cutout headshot, the first place I check is the ESPN website. If the player exists there, I have found that it’s usually their most recent headshot picture and it’s a good quality image compared to other sources. As expected, I find Andrei Svechnikov on the ESPN website and download the image after some tweaking of the size in the URL. Now I can begin working on the jersey swap in Photoshop.

[Image: LqjmFO0.png]

Konstantin Voloshin has a Team ID of 3 in the card database which corresponds to Toronto. Did I mention that I’m a perfectionist? I want to make sure this is as true to the Toronto North Star jersey as possible so I head over to the North Stars Team Information page to check them out. I only really care about the chest and up. They have some shoulder patches so I need to download that image so I can incorporate it into the jersey swap. I also need to get the hex codes for the blue and white (if it’s not #ffffff aka plain old white). Thankfully, there’s a resource for this!

[Image: GEijTTR.png]

What comes next is the most time consuming portion of creating a new card and can vary depending on the render image and SHL jersey. I basically need to turn the jersey in the headshot image into the jersey from the North Stars Team Information page without sacrificing the quality. It needs to look real and accurate. This is a multi-step process in Photoshop (at least the way I do it). Luckily, in this case, the jersey in the render image and Toronto’s home jersey are almost entirely one color. The most tedious part will be the collar since it is two colors on the render and only one on Toronto’s jersey.

To start, I want to remove the NHL logo from the render’s jersey and add a similar looking SHL logo which is a pretty quick and easy change. After that, I’ll make the red on the shoulders and in the middle of the collar (behind the SHL logo) the “Fun Blue” color used by Toronto. To most accurately select the portions on the render that I want to change, I first select the entire visible render and then deselect what I don’t want to modify. When it gets down to the fine pixels, I use the polygonal lasso to get the best lines. Probably a janky way to go about it, I know, but I’ve gotten good results. With the areas I want to modify selected, I create a new layer in color mode and use the pencil tool or something similar to fill the selected area with Fun Blue. This is surprisingly close on the first pass which doesn’t happen often.

[Image: VhKrzzl.png]

It should be maybe a little bit darker in my opinion. I need to create a new adjustment layer for hue/saturation changes so I can darken the blue just a tad. Bumping the lightness down to -19 looks good to me!

[Image: jbmoM46.png]

Now to tackle the rest of the collar. I can’t do this all at once since it’s two very different colors so let’s concentrate on the black area first. Similar process here but a little more tedious to select since the black ring around the color is thin. Since I’m switching black to white, once the area is selected, I can just create a new adjustment layer and choose “invert” which simply inverts the color - black to white. For the red, I will select the area making sure I get all the little red pixels that might stand out against the blue and white then fill the area with white. I can adjust the hue/saturation here to ensure the shades of white match. Once all of that is complete it’s just a matter of cleaning up the edges and/or stray pixels with a little bit of smudging and blurring…and voilà!

[Image: 191jzgv.png]

Time to add the shoulder patches. The image of the shoulder patch on the team information page is unfortunately beveled so I need to trim a little bit off the perimeter of it since we’re not putting a button on his shoulder. Once I get the image appropriately sized and moved into place, it needs to be warped to give the appearance of it wrapping over his shoulder. I also want to try to make it appear that it follows the bends and folds of the jersey. Then I do the same thing on the other should

[Image: 4ma6ZTH.png]

After some finishing touches, we have a render with a jersey swap!

[Image: 73Behlb.png]

From here, the process gets much more simple. It’s just a matter of using @Lime's impeccably done base set card template and replacing the render with the one I’ve just completed. Then update the name, attributes, season, and team. Trust me, the template makes all of that a lot easier than it sounds. It only takes a few minutes to do all of that. We start with the default template.

[Image: CTttxTz.png]

The first thing I do is paste in my completed swap, resize it, and get that into position. Then I switch the team and enter all the data - name, attributes, overall, position, and season.

[Image: 2mwnqVS.png]

After all the modifications are made, we as card creators need to save two different versions of the card file. One is the .psd version which keeps all the layers intact and editable. We need to do this in case we ever need to come back and change anything on the card. The other is the final version that is uploaded to the website.

I have finished the card and am ready to upload it so that it can enter circulation and become pullable! Heading back to the Submit Cards page, I select Konstantin Voloshin, add the final version of the card file, and submit! You should start seeing this card pop up in collections!

[Image: YIJo3d7.png]

Again, I’m not the most efficient card creator. Not even close. I care too much about my swaps and could easily complete more if I didn’t focus so much on the fine details. I take pride in them though and really enjoy seeing the community’s excitement when they share their pulls.

So there ya have it. Maybe this is easier than you expected? If so, by all means, reach out and become part of the team so we can move closer to that 1,400+ card number and make everyone happy! Maybe this is more difficult than you expected? Either way, the point of this media post was to give some insight into the process of card creation. There are real people spending real amounts of time to get these created. We want everyone to have a card. It’s just going to take some time and we ask that you please be patient!

What I wasn’t able to show you is all the work being put in on the website. Those guys are the real heroes. Make sure you thank them! There are a number of features and tweaks that are in progress that should make a lot of people happy, so stay tuned!

[2,006 words]

***caltroit_red_flames*** · 04-01-2022, 12:50 PM

10/10 pay the man!

unconfident69 · 04-01-2022, 12:51 PM

Fantastic article, love the inside look at how it's done. Pay the man!

PremierBromanov · 04-01-2022, 12:56 PM

I am going to try to take some time this weekend to create a system by which we can automate some of this. it would require a CSV or json of some kind, and a folder of player renders, but the general idea would be that I would create a scripted template based on the PSD.

The Json would essentially describe the parts by name (such as layers, team logos, etc), and another json would describe a list of cards, each with proper data (like team, render image name from the folder, stats, ovr, etc). Then, i can just sandwich them together and render out a glossy PNG.

For now this system wouldnt be as generic as I'd like. Each card set would have to be designed and scripted (mostly, where do the text boxes go?) but it would certainly speed up the time it would take to create a new set of cards. But it should hopefully allow one of the team members to dump a list of data and renders and batch as many as we need in a matter of minutes.

No promises, but I'm gonna look into it for fun. I already have a digital card foundation set up from a different project (was hoping to code hearthstone cards in json).

gordieboom · 04-01-2022, 12:58 PM

Nice read! Thanks for sharing some behind the scene stuff.

*Zoone16* · 04-01-2022, 01:00 PM

This is super informative. Thank you for sharing this!

***Chevy*** · 04-01-2022, 01:05 PM

Very very awesome

*Carpy48* · 04-01-2022, 01:10 PM

Thanks that was interesting.

the5urreal · 04-01-2022, 02:24 PM

04-01-2022, 12:56 PMPremierBromanov Wrote: I am going to try to take some time this weekend to create a system by which we can automate some of this. it would require a CSV or json of some kind, and a folder of player renders, but the general idea would be that I would create a scripted template based on the PSD.

The Json would essentially describe the parts by name (such as layers, team logos, etc), and another json would describe a list of cards, each with proper data (like team, render image name from the folder, stats, ovr, etc). Then, i can just sandwich them together and render out a glossy PNG.

For now this system wouldnt be as generic as I'd like. Each card set would have to be designed and scripted (mostly, where do the text boxes go?) but it would certainly speed up the time it would take to create a new set of cards. But it should hopefully allow one of the team members to dump a list of data and renders and batch as many as we need in a matter of minutes.

No promises, but I'm gonna look into it for fun. I already have a digital card foundation set up from a different project (was hoping to code hearthstone cards in json).

This would be incredible, but also...

[Image: giphy.gif]

Lime · 04-01-2022, 04:36 PM

Cutee

Navigation

Extra Menu

About us