Ask HN: How are the graphics on this page created? | Hacker News Reader

Ask HN: How are the graphics on this page created?

16personalities.com

41 pointsarthurcolle41 comments

Open articleView on HN

It looks like the underlying tech is something called 'Piotr".

https://www.zedalabs.com/team/piotr/

(http://www.piotrantkowiak.com/illustration-1)

Step 1: `npm i piotr`

Step 2: `piotr awesome-illustration.svg`

Step 3: ???

Step 4: PROFIT

You forgot the step where you have to pay piotr. :-P

I thought you robbed Piotr to pay Paul...

Haha cool http://www.piotrantkowiak.com/16-personalities-famous-people

i'm pretty sure it's just a wrapper library of imagemagick :-p

The 3D-model look isn't consistent and seems to mimic n-gon (as opposed to quad or tri) modeling at best. The shadows are certainly just decorations drawn in.

I made similar illustrations back in the early 2000s. I'd guess that a) the fastest and b) the most overall-effective way to go here is to pay an illustrator to sketch these roughly in paper or in digital form, and then on approval go in and draw with a vector tool. Enabling features like "snap to point" would help greatly here.

Take a look at some of the galleries on vector drawing software websites. You'll find a lot of things that you'd think were modeled in 3D, that weren't. Back when I was a production illustrator with my choice of 2D or 3D methods, vector 2D was such an obviously easy way to cut through a lot of BS. Vector-tracing 3D art was really only ideal for animation in e.g. Flash.

I still do some illustration work as a hobby, and if I created the art for 16 Personalities, I'd do it in 2D vectors. Heck, I used to teach Adobe Illustrator at my local college, and my Art 181 students would know the technical part of how to draw this by the end of the semester...they'd just need to learn character design next. :-)

Someone drew them? I swear, people are allergic to human effort these days. :)

Yeah I don't understand the question. What more than "an illustrator made them using some vector program" does OP expect?

Perhaps a tutorial for drawing in this style or similar?

Maybe, but HN doesn't seem like the place to ask for illustration advice? It's confusing.

Yea, there are graphics/artists Stack Exchanges for that kind of thing. I once asked how to add a fake cloud to one of my photos and got a really good response:

https://graphicdesign.stackexchange.com/questions/12858/how-...

The good ole identify the ovals, rectangles and triangles of the subject, draw and color them, and in this case, vary shading to achieve the desired effect.

No the OP's question implies it was achieved largely through some technology.

Yeah! tots. I have a similar illustration made: https://github.com/asgan/noether/blob/master/noether.png The image was a SVG made with Sketch or Illustrator.

Hi! I am the founder of Zeda labs who did the website, branding, and illustrations on 16P.

All those illustrations were created by hand. Sketched and then made into vector in adobe illustrator. It was a style that we custom made for this client.

If you have any more questions about them let me know. :)

It was a project by https://zedalabs.com/

I've msg'd their founder and pointed her here, so maybe she'll come and give some insight!

Thank you for that! She could almost certainly provide some useful additional insights.

hand drawn in some vector program

the keyword to the look would be "low poly" (2D characters)

/r/lowpoly on reddit has a bunch of aspiring "low poly" artists.

I forgot about that subreddit. I use to get a lot of pixel art backgrounds from /r/PixelArtWallpapers/, but it doesn't look like people really post there any more.

Any of these concepts can be your answer art/artist/illustration

The style of the illustration reminds me highly of Alone in the Dark

https://www.abandonwaredos.com/abandonware-screenshot.php?gi...

What is HN's take on MBTI? Apparently, there are entire communities on reddit dedicated to each personality type. If you go through them there's actually a pattern between people subscribed to MBTI subreddit which makes me think that MBTI to some extent is valid and not like astrology.

In my opinion, MBTI has a few key shortcomings:

1. It creates dichotomies where it ought to create distributions. A slight J is going to be much more aligned with a slight P than with a strong J. Most people are distributed near the mean on most factors but MBTI tends to exaggerate the strength of traits.

2. people misapply thinking-v-feeling and don’t understand intuiting-v-sensing. I have talked to people who wear the label of “feeler” as an excuse for not thinking.

3. You would think “introversion” was a disease from the way some people talk about their “inability to socialize at parties.”

4. MBTI projects static personality, in the sense that an individual won’t adjust their behavior under different circumstances. I believe the creators allowed for some variability at work vs home, for example, but when you hear a person talk about their type they will inevitably say “I am an INTJ” as if it were some immutable fact.

Lately, I’ve found the Enneagram to be a more useful tool. It opens the door to explaining “healthy” vs “unhealthy” tendencies in the way people tend to respond. (I score as a 5 on enneagram and INTJ/INTP on MBTI)

I'm not saying it is 100% wrong, but I have some major reservations with it and don't think it should be legal to use in the work place as many people take these types as gospel and not in a generic fashion as they should.

These graphics look great. However, I find the Star Wars classification of Meyer-Briggs types more entertaining

https://www.personalityclub.com/blog/star-wars-personality-c...

On another note, this is basically something like Myers-Briggs or the Keirsey Tempermant Sorter. I've never liked these tests as I have no preference for many of the questions, so my personality result changes each time I take it. I also don't like how they make everything black and white. Also, on this site I feel like over 1/2 of the 16 personalities describe me to a degree, so I find all of this highly suspect. In reality, people can be good leaders and still hungry for knowledge and a master of many toolsets. You can be an artisan, but still highly organized.

Labeling and organizing things (including people and their traits) is not bad.

I never said it was bad, only it isn't accurate to use a ~100 question test to do so.

Furthermore, some organizations will tend to only want individuals with a certain "type" in management, which leads to group-think and suboptimal decisions.

I’m not sure if 100 question isn’t accurate enough although the biggest problem with these is if they are written to be to generic like a horoscope where someone can find something they relate to regardless of the result and that the result could essentially match nearly anyone.

The 2nd part of your post isn’t exactly an argument against its validity but against how the results are applied in a specific environment this is like arguing against the validity of genotyping because insurance companies might increase your premium.

Let me rephrase. It is mostly hokum with precious little legitimacy and to make matters worse, it is used for important things like deciding the fate of someone's career.

By white people, apparently.

Hot Take: Meyers Briggs - Astrology for people with linkedin profiles.

This take deeply irritates me which means it’s probably right to some extent.

Please don't post unsubstantive comments or snark here.

https://news.ycombinator.com/newsguidelines.html

The specific tool to make images such as those in the link would be great, they seem to look like vector graphics based on the actual images but also the simple fact that they are served as .svg, but I was just wondering if anyone had any further information that might be useful!

It's not about the tool, but about the ability to synthesise a photo into an illustration.

Adobe Illustrator. Sketch (https://www.sketchapp.com/) Figma (https://www.figma.com/) Inkscape (https://inkscape.org/)

Also they are simply served as an image. https://css-tricks.com/using-svg/

No. No automated tool is capable of this auto conversion as you have alluded to.

Some artist painstakingly drew these vector illustrations.

I know some of the applicants who participate in creating the assets: https://github.com/asgan/noether/blob/master/noether.png

the tool do not provide that look n' feel out of the box. It's the artist operating the tool that is the determinator.

These graphics can be created in vector drawing tools, as well as raster tools. The underlying SVG indicates the original source as vector drawings.

This seems somewhat akin to looking at some code and asking what specific tool was used to write code like that.

Reply on news.ycombinator.com