I still can not draw …

… so I had to cheat.
Person drawn with Harmony Keymod
I imported a photo as backdrop image in Harmony Keymod, then set the brush to “shaded”, the “offset-scale” to about 80 (I reeally need a better name for that), and started following the contours or shadows with long continuous strokes. To avoid interactions between the strokes I occasionally pressed the “B” key to break the relationship between the strokes. The occasional “U” key (undo! How could we only live without that in the dark ages) was of course involved too.

The image was drawn with a trackball, which is definitely not the best thing to use for drawing. A real artist with a tablet and a pen would have done it much better, especially the face, but I am quite content with the result.

Usual disclaimer stuff:

Harmony was originally written by Ricardo “mrdoob” Cabello, I only did some heavy modifications to the code, see help in the application.

You can download the whole application by clicking on the
V-Menu > File > “save as…”: “Webpage, Complete”.
It is perfectly self-contained and works locally if you open the stored HTML file in Vivaldi. It does not need any server and stores no data on the server if you use the online version.

PS: There is a chromium bug which causes a massive RAM explosion with one of the Javascript commands I used for undo and redo on some hardware – see https://bugs.chromium.org/p/chromium/issues/detail?id=242215 – which hits Vivaldi too in combination with some hardware. If you did overwrite chrome://flags/#ignore-gpu-blacklist please consider to disable the overwrite. If you didn’t overwrite it and are still hit by it, you sadly have to wait until the chromium authors have fixed the bug.

Harmony Keymod – Update

I got a bit spare time and once again added a small bit of functionality to the script: Flood fill – or maybe better known as “bucket” tool to most people. The basic function is in, it fills enclosed areas with the selected foreground color and and it can even fill semi-transparent, depending on the opacity setting in the menu. Sadly I still miss the tolerance settings for it, the code is in, but the UI is my old and well known problem. I need a design.

The same goes for Dynadraw, which can can have 4 settings – something like elasticity, weight, velocity and if the angle is fixed or not. The code is ready for that, but I have absolutely no clue how to integrate it into the UI without making it too complex to handle.

Still to be done:
Combining stringy, curvy and web to one brush. I did not yet check how compatible they are to each other, but I believe it should work in some way.

… and finally I could need some help:
I would really appreciate if someone who knows UI graphics stuff – meaning design – can help me with some mock-ups and ideas for a design rebuild. I am running out of space with the new settings I am planning.

A native English speaker who can help me to find better fitting words for the settings would be welcome too.

You can try out the little program on my web-page quhno.internetstrahlen.de or visit the previous Harmony Keymod blog entry here.

PS: The image above was “drawn” with this application while testing things. but I am still proud of it because it is up until today the most realistic cloud I ever managed to draw – and It took less than 5 minutes 😀

( I know it sucks, but as I wrote before, I am no artist at all 😛 )

PS: There is a chromium bug which causes a massive RAM explosion with one of the Javascript commands I used for undo and redo on some hardware – see https://bugs.chromium.org/p/chromium/issues/detail?id=242215 – which hits Vivaldi too in combination with some hardware. If you did overwrite chrome://flags/#ignore-gpu-blacklist please consider to disable the overwrite. If you didn’t overwrite it and are still hit by it, you sadly have to wait until the chromium authors have fixed the bug.

Doodling with Harmony Keymod

blue flowery stuff
blue flowery stuff

I am definitely no artist but some people liked this image – I wonder why, no joke.

The Original is about 4000*3000px and was created with “Harmony Keymod”, a heavy modified version of Mr.Doop’s Harmony, a procedural drawing tool, in less than 15 minutes.

I’ve put the tool online on my personal webspace, if you want to give it a spin – here you are:  quhno.internetstrahlen.de

Try one of the “easy” brushes like “shaded” with the settings “offset-scale” 80, “brush-size” 30 first. Continue reading “Doodling with Harmony Keymod”

“Any man who would letterspace lowercase would steal sheep.”

The headline is rumored to be a quote from the German Typographer Erik Spiekermann paraphrasing American Typographer Frederic W. Goudy‘s

Any man who would letterspace blackletter would shag sheep.

Dear web page designers!

Whoever told you differently:
letter-spacing: -1px or -2px is no good choice, because the word kerning quickly becomes keming with negative letter-spacing and the readability is worse than with the default letter-spacing.

Example of a sentence with completely messed up letterspacing(← Do you see why?).

There is no excuse for it, even Google knows that:

(take a close look at the appearance of the search results page)

The designers of the fonts you use on your web pages put much work and thought into it, please don’t ruin it. If you want a more compact look, change the font stack and use different fonts – but

Please do not mess with letter-spacing. Ever.

Shortcut-S the ultimate keyboard for heavy duty Photoshop users?

Photoshop belongs to the almost every days tools I use and I admit that I am a keyboard junkie.

Keyboard junkie and Photoshop in one sentence? Yeah – that’s hardcore! 

I bet that every heavy duty Photoshop user had a moment of “WTF?!!” occasionally while working with keyboard shortcuts because Photoshop has several hundreds of them.  Did you notice something?

Yes, even if you use a German keyboard, which consists of at least 105 keys, that is a multitude of available keys, so you have to type key combinations with up to 4(!) key presses (e.g. Ctrl+Shift+Alt+E to merge all layers into a new layer or, an easier combination: Ctrl+Shift+I to invert the colors). Apart from some few people with extra long and bendable fingers, I know nobody who can use any of those without 2 hands. This means that you have to move your hand from the mouse or drop the pen of your tablet, press the keys, grab the mouse again etc. pp. which each time costs you at least 2s extra time (I wonder how many hours I have burned this way).

Some people in Romania (Transylvania – yes, Dracula’s castle is nearby, so watch your back for bats) thought that it would be a good idea to ease up the live of the stressed creative people and invented a keyboard that is special tailored for Photoshop. This is what it looks like:

shortcut-s.png

Every shortcut is just one finger-press away. All of them are sorted in logical groups – similar to the menus and palettes in Photoshop to which the keys correspond – and with the fitting icon, so that you see at one glimpse what what key does.

Now comes the bad part: You can not buy it (yet).

It is a kickstarter project – and if it is something you have been looking for for a long time, just head over to support them:

https://www.kickstarter.com/projects/5074048/special-dedicated-editing-keyboard-for-photoshop

 

I personally would like to use that keyboard too, but  my  desk is full with what I call “creative chaos” (mostly paper, pens, CDs, phones, …) and a 2nd keyboards would not fit on it, especially if it is  as big as the Shortcut-S.  They should really think about integrating a standard mechanical keyboard with MX-blue switches (or better: those of the IBM Model 2 – buckling springs are still the best, so keep on click-clacking  :D) at the bottom too …

 

… but may be I find someone who builds me  a dedicated desk for that – or I’ll do it by myself. Who knows … 

 

PS: This is no advertisement. I am not affiliated in any way with that project, I only thought that it could be fun to have or useful for some people.

WebP Photoshop plugin

I was looking for some time for a plug-in that would allow me to open, edit and save WebP files directly with Photoshop instead of converting them afterwards. Sadly Adobe did not a**e up to provide one, but luckily someone else managed to write the necessary .8bi file. Here it is:

https://github.com/fnordware/AdobeWebM

 (scroll down a bit for the ready made plug-in for PS Mac and Win)

 

The same author wrote another .8bi plug-in for PNG files, that, among some other goodies, allows to split the PNG Alpha channel to an alpha layer in the channel palette and produces astonishingly compact PNG files on save. Grab it here:

http://www.fnordware.com/superpng/

 

Sadly both plug-ins wont work with CS2 on my small computer – but they work just fine with CS5 on my big computer edit: The  plug-ins work just fine from CS2 to CS6 if put into the plug-ins/File Format folder (despite the WebP plug-in is labeled “Beta”).  

If you own another version of Photoshop and get it up and running:

Please drop a line in the comments.

Thank You!

Just another userCSS for this site

One of the first things I did after creating my account here was to write a userCSS for Opera <15. Bigger fonts (120dpi monitor, the standard font sizes used here are too tiny), % width to adapt to the screen (I don’t like fixed with or max-width layouts) and some other small changes …

Work in progress

May contain nuts …

* {     font-family: Candara, "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif !important; }  * pre, * code {     font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !important; }  body  {     color: #202020 !important;     font-size: 1.2em !important;     line-height: 1.6em !important; }  div#es-wrap, body div#fd .es-stream-list .type-blog .blog-description, body div#fd.es .es-stream-meta .es-stream-title, body div#fd.es .es-stream-meta .es-stream-title a, div#fd.es .es-stream-content a, div#fd.es .es-stream-content, body div.blog-text, #Kunena div .kcontainer, .mce-content-body, body div#fd.es .es-widget .es-widget-head, body div#fd.es .es-widget .widget-title, body div#fd.es p, #ezblog-body .blog-text p, #ezblog-body .blog-text li{     color: #202020 !important;     font-size: 1em !important;     line-height: 1.6em !important; }  body div#fd.es .es-dashboard .es-container .es-sidebar .fd-nav-stacked a, body div.es.mod-es-menu.module-menu.jmoddiv, div#fd.es .es-dashboard .es-container .es-sidebar .fd-nav-stacked a, div#fd.es .es-widget .fd-nav > li > a, div#fd.es .es-stream-meta .es-stream-title, body div#fd.es .small, body div#fd.es .small > a, body div#fd.es .popbox, #Kunena .ks, #Kunena .kms, #Kunena span.kcat-topics, #Kunena span.kcat-replies {     font-size: 1em !important; }  body.site {     padding: 10px 5px 10px 5px !important; }  .body .container {     padding: 15px !important; }  .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {     width: 90% !important; }  .container {     max-width: 90% !important; }  .row-fluid .span9 {     width: 80.47% !important; }  .row-fluid .span3 {     width: 17.4% !important; }  #Kunena a:link, #Kunena a:visited, #Kunena a:active {     color: #202020 !important; }  #Kunena a:hover {     color: navy !important; }  #Kunena td.kcol-kcatlastpost {     width: 30% !important; }  #aside .module-menu, span4 a {     font-size: 0.9em !important; }  .kmessage-left .kmsgbody .kmsgbody {     font-size: 1.1em !important; }  .kprofile-left {     background-color: #f8f8f8 !important; }  a {     color: #600000 !important; }  .popbox-toolbar a, .media-object.pull-left a {     color: #333333 !important; }  body div.es-mod.mod-es-menu .media:first-child {     margin-top: -7px !important; }  body div.es-mod.mod-es-menu .media .pull-left {     margin-right: 0 !important;     float: right !important; }  body div.es-mod.mod-es-menu .es-avatar > img {     height: 30px !important;     width: 30px !important; }  body div.es-mod.mod-es-menu .es-menu-items {     padding: 10px 0 0 !important; }  i.ies-pencil {     display: none !important; }  div#es-wrap .row-fluid .span4 {     width: 23.5% !important; }  div#es-wrap .row-fluid .span8 {     width: 74.5% !important; }  div#es-wrap .es-widget .small {     float: right !important;     padding-right: 10px; }  body div#es-wrap div.es-mod.mod-es-recent-albums li {     max-width: 50px !important; }  .kavatar {     max-height: 72px !important; }  .kprofilebox {     display: none; }  #Kunena .kmsgtext a:link, #Kunena td.kcol-kcatlastpost a, #Kunena td.kcol-ktopiclastpost a {     text-decoration: underline !important;     color: #5555FF !important;     font-weight: bold !important; }  #Kunena td.kcol-kcatlastpost {     line-height: 1em !important; }    div#es-wrap .photo-content .es-photo-image, div#es-wrap .photo-content .es-photo-tag-viewport {     height: 600px !important; }  body.view-albums .es-album-cover, body.view-albums .album-cover {     display: none !important; }  .media {     margin-top: -20px !important; }  #es-wrap div.media-body div.object-title {     font-size: 0.8em !important;     padding-top: 0.5em !important; }  div#es-wrap li.message-item {     font-size: 1em !important; }  #menu-account, #menu-blog, #menu-settings {     display: block !important; }    #aside .module-menu, span4 a {     font-size: 0.9em !important; }  .kmessage-left .kmsgbody .kmsgbody {     font-size: 1.1em !important; }  .kprofile-left {     background-color: #f8f8f8 !important; }  a {     color: #600000 !important; }  .popbox-toolbar a, .media-object.pull-left a {     color: #333333 !important; }  body div.es-mod.mod-es-menu .media:first-child {     margin-top: -7px !important; }  body div.es-mod.mod-es-menu .media .pull-left {     margin-right: 0 !important;     float: right !important; }  body div.es-mod.mod-es-menu .es-avatar > img {     height: 30px !important;     width: 30px !important; }  body div.es-mod.mod-es-menu .es-menu-items {     padding: 10px 0 0 !important; }  i.ies-pencil {     display: none !important; }  div#es-wrap .row-fluid .span4 {     width: 23.5% !important; }  div#es-wrap .row-fluid .span8 {     width: 74.5% !important; }  div#es-wrap .es-widget .small {     float: right !important;     padding-right: 10px; }  body div#es-wrap div.es-mod.mod-es-recent-albums li {     max-width: 50px !important; }  /* Some special rules for the different sections */  /* FORUM  */  .kavatar {     max-height: 72px !important; }  .kprofilebox {     display: none; }  #Kunena a:link, #Kunena a:visited, #Kunena a:active {     color: #202020 !important; }  #Kunena a:hover {     color: navy !important; }  #Kunena td.kcol-kcatlastpost {     width: 30% !important;     line-height: 1em !important; }  #Kunena .kicon-button, #Kunena .kicon-button span {     line-height: inherit !important; }  #Kunena .kmsgtext a:link, #Kunena td.kcol-kcatlastpost a, #Kunena td.kcol-ktopiclastpost a {     text-decoration: underline !important;     color: #5555FF !important;     font-weight: bold !important; }  #Kunena .kmsgtext a:hover, #Kunena td.kcol-kcatlastpost a :hover, #Kunena td.kcol-ktopiclastpost a :hover {     background-color: #ffffee !important; }  #Kunena .kmsgtext a:visited, #Kunena td.kcol-kcatlastpost a :visited, #Kunena td.kcol-ktopiclastpost a :visited {     color: #000088 !important; }  #Kunena .kmsgtext-quote {     background: #f5f5f5;     border-left: 10px solid #ccc;     margin: 1.5em 10px;     padding: 0.5em 1em 0.5em 3em !important;     quotes: "\201C""\201D""\2018""\2019"; }  #Kunena .kmsgtext-quote:before {     color: #ccc;     content: open-quote;     font-size: 4em;     line-height: 0.1em;     margin-right: 0.25em;     margin-left: -0.75em;     vertical-align: -0.4em; }  #Kunena .kmsgtext-quote:first-child {     display: inline; }  #Kunena .kmsgtext-quote:last-child {     margin-bottom: 0; }  /* ALBUMS */ div#es-wrap .photo-content .es-photo-image, div#es-wrap .photo-content .es-photo-tag-viewport {     height: 600px !important; }  body.view-albums .es-album-cover, body.view-albums .album-cover {     display: none !important; }  .media {     margin-top: -20px !important; }  #es-wrap div.media-body div.object-title {     font-size: 0.8em !important;     padding-top: 0.5em !important; }  div#es-wrap li.message-item {     font-size: 1em !important; }  #menu-account, #menu-blog, #menu-settings {     display: block !important; }  /* BLOGS */  div#ezblog-body div.blog-text a:hover:after {     content: " " attr(href) !important;     color: #ff0000 !important;     background: #ffffff !important; }  div#ezblog-body div.blog-text a {     text-decoration: underline !important;     color: #5555FF !important;     font-weight: bold !important; }   /* NOTIFICATIONS */ .es-notification .media-body { 	margin-top:20px !important; }  /* FIX for NON JS use of the site. Makes the account dropdown accessible. Drawback, If you click on the account, you will see a double dropdown  */ li.toolbarItem.toolbar-profile:hover div, li.toolbarItem.toolbar-profile:focus div { 	display:block !important;  	width: 250px; 	position:absolute; 	z-index:1000; 	background:white; 	border:1px solid #AAA; } 

 

Not yet finished because it produces some small quirks with the fonts of the blog post editor but already quite good as a base …

Hat tip to netsrak who brought in some additional ideas 🙂

btw:

Vux777 has created one too, head over to his blog post to view it.

Some thoughts about fonts (for math)

What fonts to use for a website that relies heavily on Unicode is quite difficult. Sometimes the look of a font, though quite important to make a good typographic impression, is not of the same importance as a full support of all glyphs you need to show.

While sorting the characters of a Math Keyboard for the JavaScript Graphical / Virtual Keyboard Interface I stumbled over the problem that there is only a small selection of fonts which offer a decent support of the necessary Unicode glyphs. Whereas it would be better for the VKI layout to use a monospace font, especially when it comes to mathematic symbols but true for other “esoteric” symbols too, there are too few monospace fonts installed on the average users system that provide a good Unicode support – even worse:

There are hardly any good (preferably free) monospace fonts available at all.

So, back to the sans-serif family – but:

  • Which one to use?
  • In which order?
  • What to use as fall-back fonts apart from the generic families?

If you use the following declaration:

font-family: Arial, "Lucida Sans Unicode", "Lucida Grande";

all will get messed up because the first font matches on 99.xx% of all MS Windows based systems and several *X*-oid systems too. In this case a character will be taken from “Lucida xxxx” only if it is not matched by Arial, which btw. offers a poor Unicode support – not to be confused with “Arial Unicode MS” which has an excellent support for every days use.

Example of the differences:

  • This is a ⨑ in Arial
  • This is a ⨑ in Lucida Sans Unicode
  • This is a ⨑ in DejaVu Sans

There is a high chance that you might not see the “‘ANTICLOCKWISE CONTOUR INTEGRAL’ (U+2233)” symbol between “a” and “in” at all if you don’t have “DejaVu Sans” installed – but you can see the different widths and heights, kerning and hinting of the fonts anyway. You can hit the “+” key of your keyboard several times to zoom into the page and see the differences in detail if you are using Opera.

The same goes for the Mac font-families Helvetica and Lucida Grande, which come with the system by default.

When it comes to Linux or other *X*-oid systems the situation becomes worse because you can never know what fonts came with the distribution and what fonts didn’t.

So precedence of your font declarations is important, if you want to provide a good Unicode support.

Here is my sorted font stack for an optimized Math display (but this would match most of the other Unicode characters in a very good way too):

{font-family: "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans", "Arial Unicode MS", Arial, Helvetica, sans-serif;}

Just try it out, its easy to use, but your mileage in CSS-font-stacks may vary.