Redrawing Motovun Jack

[jeremyruston]

In the thread on TiddlyWiki’s 20th anniversary, I mentioned the idea of redrawing Motovun Jack:

We could adopt a new or updated logo. I’ve often wanted to ask someone with actual artistic talent to make a better monochrome tracing of the original picture of Motovun Jack than my rough and ready version

There’s been a good response to that idea, with @JanJo and @telmiger already making contributions.

I’d like to take a bit longer to explain what the problem is. At the bottom of this post, there’s a strip of images showing:

• The original photograph of Motovun Jack
• The published version, with some postprocessing
• My original monochrome SVG version of Jack
• The monochrome SVG overlaid over the photograph

The fundamental problem is that I was trying to produce a sharp image with clear lines from an original image that has fuzzy, indeterminate outlines. I tried to take some artistic license, but I think there are some significant flaws:

• The dip in the middle of the back is unnatural
• The back of the neck looks too thick
• One ear is too pointed
• The face looks twisted and distorted
• The chin is a weird shape
• The hairline join between the back legs is distracting
• The tail tapers slighter as it joins the body

But those critiques are details: the main problem is that the monochrome image just doesn’t look alive. I’m full of admiration for the way that artists can capture lifelike movement in a single curve, and that’s what I think we need to try to achieve.

One specific suggestion that might make things easier is that perhaps we should move away from a monochrome silhouette, and instead include details within the image. Perhaps just a line to indicate the chin, and some curves to indicate the eyes and tongue. Or perhaps we might go further and move away from strict monochrome so that we can reproduce the tabby stripe pattern.

Also to clarify that the goal is an SVG image that we can reproduce at multiple sizes, and that we’d incorporate into other designs (eg the TiddlyDesktop icon).

[pmario]

@jeremyruston

• One ear is too pointed
• The hairline join between the back legs is distracting

I did some work on these 2 points in 2015. So I’ll revive the PR and try to address all of your mentioned issues

[pmario]

@jeremyruston

• The dip in the middle of the back is unnatural

I did change it, and the body starts to look like a potato. The following image only switches the dip 10px upwards and imo the body already starts to look like a potato. I would be inclined to keep the dip or only make very small changes.

• The preview also addresses all the other issues you mentioned.

The ears and the head are very tricky to change. Very subtle changes already destroy the proportions.

• I did try to accentuate the neck so the shape of the head
• The left ear was moved a bit into the head
• The right ear is still pointy, because I think it’s a signature of the icon.
• Fixed the tail
• Changed the chin to point more to the neck
• Removed the hairline between the legs

@jeremyruston What do you think?

[Thomas_Chuffart]

This challenge is interresting. I used the picture as a reference and tried to find the best curves to express the overall shape.
It is not ready to use, just a work in progress. It needs to be polished, smoothed and tested in different sizes… Maybe smaller shapes needs to be drawn differently as high qualiy typographic families have their characters redrawn for different sizes.

Here the small cat is just a downscale verion of the big one.

What do you thik ?

[vilc]

I think the use of whitespace to visualize those contours is a good idea. Perhaps it’s worth experimenting with using the same method on the legs as well?

[Thomas_Chuffart]

I’ve modified the contour and here are different sizes and presentatons with contour or not, and different fillings.
All the cats are drawn with the same contour.

I 've redrawn the part belox the tail to avoid to break the “bean” shape of the body of the original design, and the tail is also thicker.

[JanJo]

One of the problems of the icon in general is the amble foot-position in the foto which is twisting the perception of the silhouette.

From the Gestalt point of view, it does not really help to add lines that are not visible.

[JanJo]

monologo_new.svg

This happens if you change the position of the feet. It does not look as kittenlike anymore.
But at the age of 19 the kitten has grown up. I already thought to suggest to change the logo to a tiger.

[Thomas_Chuffart]

We can sure find plenty of nice versions of a young cat. But I don’t know much Jeremy is attached to what I supose is his own cat.

Or maybe he could send actual picture of his cat who has grown up as tiddlywiki did along the years…

[vilc]

@JanJo

From the Gestalt point of view, it does not really help to add lines that are not visible.

Which lines do you mean exactly? The ones just behind the head and front leg in the outlined version:

I agree that these complicate the perception.

But I think the “negative space” ones in the filled version:

look good, and there is nothing to be afraid of in this approach. However we should check if it also looks good with inverted colors (light icon on dark background).

[vilc]

Since we’re talking about other ideas than simply redrawing Motovun Jack, I have some loose thoughts on the whole topic:

Detail level. One problem of the current design used as logo, is that it looses its details at small sizes. It’s still recognizable as a cat, but not unique anymore. We could experiment with using just the head, it would be easier to expose some details even at smaller sizes of the logo.

Object. Many logos of software products with animals in it contain an object that refers to the software’s purpose, e.g. Firefox (globe), Thunderbird (envelope), GIMP (paint brush), Evernote (post-it note). Maybe Motovun playing with a (here’s the difficult part of conveying TW with a single object) notepad/ flashcards/ puzzles/ thread/ fishing tiddlers out of the story river would make the logo more alive and reference the purpose of TW.

[JanJo]

As Monty Python would say: and now for something completely different…

[Mark_S]

Who’s work is that? The head seems too complicated for Montroll.

Actually, I’ve noticed various advertisers, especially Amazon, use pseudo-origami drawings to illustrate their sites. It has the advantage that it can be reproduced at various scales and that people don’t get bogged down critiquing small deviances from reality, since those are expected.

[JanJo]

The origami is strongly gimped to demonstrate that TW could be modulated in the stripes.

[Alvaro]

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 260" width="510pt" height="317pt">
<path d="M 308 36 C 310 17 312 12 323 4 C 331 11 336 15 342 23 C 356 22 367 26 367 26 C 380 19 407 10 412 11 C 411 17 400 27 397 43 C 395 53 394 85 391 92 C 388 100 378 120 362 121 C 357 121 348 117 348 117 C 346 135 330 154 309 161 C 305 169 305 172 303 177 C 295 192 304 220 310 230 C 310 230 325 236 327 243 C 328 251 322 256 322 256 C 322 256 295 257 294 254 L 288 247 C 271 253 267 249 264 243 C 264 243 261 238 260 232 C 258 218 258 198 262 184 C 259 172 261 172 252 158 C 227 161 203 163 180 152 C 172 166 166 184 164 194 C 163 205 178 223 195 228 C 204 231 205 233 206 239 C 209 249 169 247 168 245 C 146 221 127 202 127 195 C 127 193 132 186 134 179 C 129 185 120 192 121 196 C 122 201 124 213 134 219 C 144 225 151 221 152 234 C 152 240 131 238 124 237 C 117 236 104 221 88 181 C 87 174 112 154 122 129 C 106 119 100 107 101 91 C 93 89 95 94 59 90 C 23 86 -5 53 6 17 C 9 8 11 2 16 3 C 22 6 16 13 16 29 C 15 67 63 76 104 66 C 115 57 133 48 149 47 C 162 46 197 51 219 53 C 241 54 254 54 266 56 C 278 58 288 60 302 65 C 302 53 305 46 308 36 Z" fill="black"/>
</svg>

The @Thomas_Chuffart 's idea is interesting but it need more element to do it something similar.

[Thomas_Chuffart]

I simplified the first version I dropped last time.It is a little bit smoother, with less points and some small adjustments. In the picture only 1 SVG but drawn with or without contour and differents shades.

.

Processing: Motovun2cc.svg…

<svg xml:space="preserve" viewBox="0 0 61.8253 37.2073">
  <g style="display:inline">
    <path d="M203.4426 426.5542c-.506.406-.8184 1.0946-1.221 2.018-.1114 1.138-.2228 2.3387-.3341 3.0552-.3528 1.413-.4535 3.0586-.1567 4.0894-.134-.5067-.1981-1.5356-.1981-1.5356s-2.2507.0258-2.9205-.1367c-2.5506-1.0216-5.241-.9989-7.4517-.3105-1.6371.2632-3.4356.0426-5.278-.3104-3.1037-.5465-6.4669-1.6205-9.2369-1.0478-2.77.5726-4.3425 1.699-6.3649 2.833-1.8913.7956-4.033.2514-6.3325.0268-4.178-1.0812-5.5723-3.84-4.15-7.8181.4635-1.2965-1.0989-1.7252-1.7814-1.135-.7496.6484-1.6254 2.4578-1.3971 5.2006.6686 4.9124 5.508 7.4155 9.7026 7.6844 1.2722.2102 3.1345-.2844 3.9938.5223.4478 1.8918 1.3358 3.0474 2.177 4.5242.7234 1.3245.3929 3.6904-.3816 4.9116-.7898 1.2121-2.486 2.6342-2.607 3.4702 1.1831 2.2693 2.7798 7.411 5.5254 8.0498.557.1197 2.7783.2701 3.4513-.0322.4008-.3154.6938-.6932.943-1.1418 0 0-1.484-1.5798-1.4685-1.6127 1.165 1.136 3.5597 4.3775 5.3654 4.4394h2.9495c.4671-.1848 1.0072-.8239 1.0364-1.3744.0292-.5505-.8531-1.6482-1.6253-1.7162-1.8265-.0769-2.8946-1.4727-4.2236-2.8085-1.676-3.2 1.6335-8.1608 1.7077-8.1502 1.9146.7916 3.7847 1.2505 5.6661 1.0091 1.8814-.2414 3.3664-.2486 4.9501-.8193.3016-1.6062.549-2.892.9571-4.2276-.4241 1.4064-.5888 2.4345-.9474 4.2345.3164 1.5797 1.5217 2.9258 2.0894 4.3971-.0867 2.3073-.7756 4.6033-.8396 6.4283.0407 1.3318.6517 2.42 2.0183 2.7555l2.6326-.0799-1.24-2.2232 1.7122 3.0406c1.9297.3359 2.8214.7624 4.502-.0776.9548-1.7901-.0492-2.167-1.05-2.5332 0 0-.4908-.156-.8538-.458-.5938-1.38-1.544-4.2338-1.6667-5.6247-.08-1.1043.4108-3.8163.4108-3.8163.1392-1.2933 3.3854-2.3794 4.6524-3.923 1.133-1.1632 1.2806-2.68 2.3024-3.8433.6527.1298 2.6487.3149 3.6007-.3665.7991-.8118 1.3744-1.1 1.6856-2.2165 0 0 .5847-.487.951-1.1644.3988-1.3115.6483-2.7338.873-4.0361.2612-1.441-.023-3.4991.6404-4.3468.7463-.9185 2.6944-3.6024 2.0764-3.9198-.3925-.2016-3.9772 2.3318-6.5201 2.6003-1.4042-.8047-3.0479-.5578-4.6572-.5822-.6438-.9832-1.341-1.5057-1.7644-1.9973-.5232-.7983-1.4857-.5172-1.9045.0956zm-25.4775 31.3197c-.5692 0-1.3406-.055-1.6526-.1922-.312-.1372-1.3745-2.0588-1.3745-2.0588-.014-.4334.297-1.1934.297-1.1934l-1.3151-1.647s2.7664 3.4426 4.0452 5.0913z" style="fill:#000;stroke:none;stroke-width:.374362;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none" transform="translate(-156.5828 -425.9681)"/>
  </g>
</svg>

[JanJo]

I would say the simple black cat without the extra inner lines is the one I would choose. It cures most of the problems of the prior version.
There could be a slightly more distinct edge at the top of the tail.

[Scott_Sauyet]

I like this one a lot. My only objection is to the lines cut into the body: the neck, the front shoulder, and the hind knees. Those versions which don’t show these among your variants look much variants look much better than those that do. OTOH, I like the cut between the front paws, although I think it should move rightward a bit (doesn’t seem aligned with the shoulder above.)

But who am I to critique? I couldn’t do anything half so good. Kudos!

[duarte.framos]

There are some nice improvements here, the indented lines really do add to the clarity of the silhouette.

Vector illustration is something that captivates me, though I’m an amateur, I decided to make my own renditions of Motovun Jack.
It took a lot of trial and error, that backlit fuzzyness was really hard to capture in vector graphics, but it was quite fun to make. They come in minimal, detailed and partially “shaded” variants showing the tabby pattern and his fuzzy appearance.

And a gif showing them all

As mentioned in other thread about TiddlyWiki 19th Anniversary I don’t really think any of these make for a good logo.
They are too detailed, lack focus or a clear message. Though I believe they may still make for a very nice project mascot and general image for illustration purposes, like a featured images, example picture, mood definition, advertising, merchandise, etc. they don’t seem adequate for a dedicated logotype.

Since Jeremy Ruston specifically mentioned it I made these any way, but I’d really be up for designing an actual logo, and proper branding for the project.

At some point in the past he mentioned considering renaming the project into something more serious since the name could be unintentionally holding it back.

If it ever came to pass, I think now would be a great opportunity to do so, so that any “rebranding” efforts would be invested in something lasting, rather than a dead end.

I’d be really interested in hearing @jeremyruston thoughts on it, if any. I’d be willing to lend a hand in you are interested. I don’t have as much free time these days, but I think I can spare enough to work on something worthwhile if you are interested.

What do you think?

[oeyoews]

Maybe we can try changing the color. Black always gives me a bad feeling. If a logo can give people a sense of intimacy or cuteness, a bright feeling is very good, such as go’s marmot logo.

https://i.imgur.com/u2Mw140.png