Research: Design of translation system and why I'll not use pure SVG for my webcomic

WRITTEN_BY David REVOY - - 6 comments
_A SVG translation test proposition by_ _ Tharinda [http://tharindad.deviantart.com](http://tharindad.deviantart.com/) written in [Sinhala](http://en.wikipedia.org/wiki/Sinhala_language "Sinhala" )_ ## In short ( TL;DR version ): I'll not use SVG for low-res online comic, it's not enough ready for my needs. I'll use JPG. I'll use SVG hi-res zipped for translation pack instead of KRA, it's less heavy, offer more possibilities. My multilingual website is functional on my local install, ( up to 1296 languages, welcome fictional language, extinct languages. ). I will write a simple translation tutorial. Schedule : new Multilingual website and sources for end February , next comic in March. Now, let's read the detailed research. ![](http://www.peppercarrot.com/data/images/lab/2015-02-21_Multilingue-SVG-researches/detailed-version-cat.jpg) ## 1\. I'll not use SVG for low-res online comic I decided to drop the idea of using SVG files to display the pages Pepper&Carrot online. It was frustrating to drop this idea after so many tests. Thank again for those who contributed by comments, emails, etc... to [my last experimentation](http://www.peppercarrot.com/fr/article261/svg-webcomic-experimentation "the last Lab post" ). What did fail : Custom font to the speech-bubbles, compatibility and the file size. SVG and JPG file size on a similar project. With other test I could slim the SVG down to 300k but still not enough. I also made successful test with Webp, but Webp adoption [is still too low](http://caniuse.com/#feat=webp "is still too low" ) ( 56% support ). ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_02_SVG-online-weight.jpg) I tried everything to make the font I use (Lavi) working correctly within the online webbrowser speech-bubbles of a SVG. Here are all the format I tested the font : *.eot, *.svg , *.woff and *.woff2, *.ttf, and even encoded it directly in the css as base64... It still feels like rocket science to target the CSS of a SVG text and get that to work on any webbrowser. It is just too complex and not adopted yet by many. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_03_SVG-font-fail.jpg) Plus, a requirement for displaying the SVG on a webbrowser is to do manual tweaking for each file in the markup directly. Especially if you let a third party edit the SVG and save it with Inkscape default SVG options. It will just change all text to another SVG format (probably an issue between SVG version adopted by the webbrowser and Inkscape). This issue predict long extra-step of post-maintenance in case of adoption. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_04-SVG-inkscape-markup-mess.jpg) ## 2\. I'll use SVG high-res zipped for translation pack I will propose to the translators a set of SVG now, in a Zip. I'll no more propose KRA files for it. Krita text tools have a lot of issues and are not comfortable and featured compare to what Inkscape can propose. I get your feedbacks :-) SVGs are more lightweight and easier to edit. I'll add all the pages converted to high-res SVG in 'en' and 'fr' : \- root layer will be a hi-res PNG \- vector speech-bubbles, and objects \- editable text and soundFX KRA version will remain the graphical version with all layers ( lines, colors, areas, textures, etc... ). I'm still drawing and painting with Krita. Lettering and speech-bubbles will now be done in Inkscape. Testing the same page saved with various image file format with support of rich text : PNG ( for source and reference ) , Inkscape SVG and SVGZ compressed, Gimp XCF and XCFBZ2 compressed, and Krita KRA. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_07_file-for-translator_weight.jpg) File size report : Simple SVG pages inside a ZIP archive sounds the best choice for simplicity and efficiency. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_08_file-for-translator_weight-table.jpg) An example of speech-bubbles using a vector shape in Inkscape. A flexible way to let translators move, resize, or tweak the shape to contain the speech-bubble text correctly. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_09_flexible-editing-buble-speech.jpg) Another Inkscape example: the support of fonts with dynamic glow, shadows, outline, gradient, colors, etc... A way to write sounds FX in my webcomic, while keeping all the edition properties for translation. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_10_rich-font-effect.jpg) It's also possible to convert SVGs using command lines : inkscape -z input.svg -e=temp.png convert temp.png -resize 40% -unsharp 0.48x0.48+0.50+0.012 -colorspace sRGB -quality 92% output.jpg This pair of command lines change an input SVG files to a temp PNG file with Inkscape. Then the temp PNG file is sent to Imagemagick and output a JPG resized at 40% and with a sharpen filter, a colorspace and a quality setting. A fast way within a Bash script to sync a folder of hi-res SVGs into web-ready JPG. ## 3\. My multilingual support is already functional I started to integrate in my local website ( not published, still on my disk ) the multilingual support. It took me time to write one, because I started by doing a big mistake at the end of last month : manage language as a simple root sub-folder subdivision for the whole website data... This method ( used in the official multilingual plugin, and common for content management systems ) wasn't good for my usage. Example : with this design a single webcomic episode translation in French would create a whole sub-site in French but if it's the only content translated, all website will be empty and only with this comic. Then each French accessing the website would see only a single page while English users would see the whole content. This design has a problem. I want English fall-back whenever the page is still not translated and a prompt to invite to translate the page. So I decided to fork the plugin my way. Now my version detect if the comic pages translated exist in the folder and propose a little flag on the header of my pages. A little 'cookie' for the browser saves the langage info for a long period, for when the user comeback to remember his/her favourite language preference. Clicking another flag change this preference. Simple. Pepper&Carrot can be translated this way in thousands of languages and in a non-linear way. Example : Episode 1 can receive 200 translations, while Episode 2 receive only 3, etc... My system can support up to 1296 languages ! it has around 250 flags ready. Welcome fictional language and extinct languages : Any Klingon or J.R.R Tolkien middle earth language Elvish translator ? Latin or Egyptian hieroglyphs ? All is possible if I can represent it by an icon and if the we find a code with two alphanumeric character for it. ( eg. en , fr , jp , de , [http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes](http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes "http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes" ) ). Here under is a screenshot with flags in the future layout for testing. I'll not use flags in the final design because [it's a bad practice](http://flagsarenotlanguages.com/blog/ "it's a bad practice" ) , still work-in-progress. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_05-SVG-translation.jpg) New naming standards for my webcomic page files to work with my multilingual plugin Prefix : Language Suffix : Episode number and Page Number. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_06_new-name-format.jpg) A visualisation of the re-factoring I’m doing. This cleaning allow me to do easier maintenance, and propose translation files. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_11_cleaning-code.jpg) Translations/corrections of the website itself will be also possible and shared on Github, or as text files. image under : the type of syntax and text file I'll propose when it will be ready. Easy to edit with any unformatted text-editor. ![](data/images/lab/2015-02-21_Multilingue-SVG-researches/2015-02-21_12_split-lang.jpg) ## 4\. I will write a simple translation tutorial when all will be ready. Last item on my list ; the creation of a detailed and dead-easy tutorial to explain how translate Pepper&Carrot. I promise to create a simple document with simple requirement and the less steps to respect the more the volunteers translators. All you'll need : \- a SVG editor ( Inkscape the Free/Libre and Open Source software will be preferred ) \- a way to send back the files when done ( service like Google Drive, Drop Box, DeviantArt Stash can help ) \- time :-) ## 5\. Schedule : Release of Multilingual end February , next comic in March. Now you know all about how I invest my time right now. I'm doing my best to get all this new structure done by the end of February. Getting a multilingual support made the right way is very important for me. Coding, doing research, testing is also an aspect of the life of a webcomic artist of our century, and it takes a lot of time... The episode 6 'The potion Challenge' will be certainly released somewhere next month, march 2015. I'm not costing a lot to my Patron on [Patreon](https://www.patreon.com/davidrevoy "Patreon" ) :-)

Video tutorial: coloring with Gmic Colorize[interactive] in Krita

WRITTEN_BY David REVOY - - 41 comments
I recorded this two tutorials videos to illustrate the usage of two new and upcoming features in GMIC for Krita 2.9 : Colorize[interactive]. [Edit 2018] This was the first method of auto-coloring in open-source and quickly the method received improvement. Nowaday, a built-in method exist in Krita 4.x (check right click on a layer, Add, Colorize Mask and check the documentation about it) but also GMIC investigated new method; the Smart coloring tool. But all in all, the colorize[interactive] mask still exists and is still one of the best method. This video still propose a good workflow: ### Part 1: [youtube]YigbVY9s6gU[/youtube] ### Part 2: [youtube]1hv3yRUof-c[/youtube] Result artwork: Schichimi & Yuzu, future secondary character of [Pepper&Carrot](http://www.peppercarrot.com/ "Pepper&Carrot" ) ![](data/images/blog/2015/02/2015-02-18_krita-color-demo-videos_net.jpg)

Pepper&Carrot got its own website

WRITTEN_BY David REVOY - - 4 comments
My open webcomic project, is no longer fully hosted on this blog and got a new website to develop its community life. After a lot of effort at splitting all; the website is now online. Check the fan-arts gallery, and a fully illustrated 'Philosophy' page. Pages are also now faster, and I can host the 'Sources' directly. Feel free to send any feedback about it if you meet a problem or see an easy improvement. Challenge now: finish to draw long episode #6 'Potion challenge' , answer all emails and finish freelance artworks.

Video timelapse and Krita tips: «Flying around Komona»

WRITTEN_BY David REVOY - - 32 comments
[youtube]jx2caxR7OeY[/youtube] Direct link to [watch it on Youtube](http://www.youtube.com/embed/jx2caxR7OeY) High-res final lossless 6400x3600px artwork link : [on DeviantArt ](http://fav.me/d8gvor6)( the download button on the right column ) ## Introduction : The artwork "Flying around Komona" is a large illustration for the future [www.peppercarrot.com](http://www.peppercarrot.com "www.peppercarrot.com" ) website. I also recorded a timelapse video of the process ( video on top ). The artwork took me around 16h and I decided to accelerate it to a 10min final video. The resulting timelapse is an descriptive document about my actual workflow to paint this style but I wanted to add more informations. I thought at first of adding a voice over, but I dislike other Youtube video with lazy voices over. Also, I'm french, and talking in english over a video double the difficulty of this practise. So, I decided to create something else, and write this 'companion making-of tips'. I hope they'll do a nice addition to the video, and also the reverse ; the video will illustrate the tips in live. This tutorial, video timelapse and high-res illustration is a free bonus for my Patreons. [Join them](http://www.patreon.com/davidrevoy "Join them" ) if you want to support the creation of more webcomics, tutorials with open license and without any paywalls. ### License : Artwork, video timelapse, article are licensed under a [Creative Commons Attribution](https://creativecommons.org/licenses/by/3.0/ "Creative Commons Attribution" ) license to "David Revoy, www.davidrevoy.com". ### Software used in the video : Krita 2.9beta compiled from sources on a Linux Mint Cinnamon 17.1 desktop with a Plank docker on left. It was screenrecorder with SimpleScreenRecorder, batch encoded with mencoder, and video-edited with Kdenlive. Krita 2.9 will be released for end February. ### Brush presets used in the video : My next brush kit for Krita 2.9beta is also ... still in beta. So nothing finished yet. But I would say 90% final ; you can download it already here : ## 1\. The Coco background When I start an artwork from scratch with digital, I often start on a light-grey background value. I name it the "Coco background" because the Hexadecimal color code I use is easy to remember #C0C0C0 ( C zero C zero C zero ). When I draw, I spend hours focusing the screen and using a pure white background is too aggressive for my eyes on newer LCD screens. I feel like a rabbit in the headlight of a car ! So I found it a good habit to draw over this grey background. Another benefit : You can also add bright values while sketching. An evident con : it looks a bit sad and greyish... ![](data/images/blog/2015/02/01-grey-background_by-David-Revoy.jpg) ## 2\. Thumbnails The thumbnail step is not only useful for setting up a good composition. It's a real brainstorming time, where you can focus on ideas and the concept of your picture. On this picture I wanted to represents a lot of elements and in a predefined way. I wanted the picture to get a ratio of 16:9 for being a wallpaper, and also I wanted to be able to crop a very wide landscape in it for a website header (1) and still see main elements ( my character Pepper, her cat Carrot and a floating city in background. ). Pose of the character, main curves of the artworks, composition and feeling are all linked together. Doing multiple attempt is necessary if you have something in mind and want a result not too far away from your first vision. ![](data/images/blog/2015/02/02-thumbnails-study_by-David-Revoy.jpg) ## 3\. Structure : redraw thumbnails I tried during years to enlarge my thumbnails and paint-over them directly. My main issue with this workflow was always the same : inherit of a bad pose, flat and bad proportions from the thumbnail and spend a lot of time fixing it during the painting. Nowadays, I prefer to redraw my thumbnails using simple geometric shapes and focus on volumes and proportion. It's easy to cut this drawing without regrets, transform ( Krita 2.9 has excellent tools to tweak this ) and move things around at this step. Building a better base and take time at this step is like saving many hours on later steps. ![](data/images/blog/2015/02/03-redraw-for-structure_by-David-Revoy.jpg) ## 4.Composition guides I like to keep an eye on central lines, diagonals and third. If you like composition theory ; getting this type of guidelines is just a big basic ( note: I like also the golden ratio, and the golden spiral ; but they are too hard for me to trace them on the fly). I pasted under a little step by step in (5) steps with my technic to trace them with the line tool. It's just basic geometry tips. But it's good to know it ; because this way you can subdivide a square even if this one is in perspective. ![](data/images/blog/2015/02/04a-composition-guides_by-David-Revoy.jpg) ![](data/images/blog/2015/02/04b-composition-guides_by-David-Revoy.jpg) ## 5\. Drawing with values When I use the expression 'drawing with value', I don't mean with 'correct values of grey'. It's just something I found to be faster than just drawing with line-art or outlines. With large brush and values, I can shape really quickly volumes and mass ( eg. hair ) , and split a bit the artwork in areas. I like to use for this step a brush with a linear opacity and with dirty edges rendering. ![](data/images/blog/2015/02/05-flat-values-for-speed_by-David-Revoy.jpg) ## 6\. Cleaning the grey Cleaning the grey background and replace it with white is easy with the level editor filter ( Ctrl + L ). Then when the background is white, I like to also convert the white to alpha with the filter 'Color to Alpha'. Now the canvas is ready to paint under this sketch. ![](data/images/blog/2015/02/06-sketch-to-alpha_by-David-Revoy.jpg) ## 7\. Background painting I like to start with the background, because it's a relaxing part and also it does a good starting point to have an idea of the lighting setup of the scene and the general ambiant. I keep large stroke, and I try to not do too long lines of painting. Usually little dots works better than lines to describe object in the distance. For the clouds, I use a sort-of-watercolor brush I made. Krita 2.9 can now mimic the preset I made for Mypaint. I'm happy to can use this type of effect back. ![](data/images/blog/2015/02/07-background-painting_by-David-Revoy.jpg) ## 8\. Komona painting For the flying city of Komona, I built it in a very logical way, step by step. Big volumes with hard edges first, then big mass, then progressively I added thin details. It was possible to handle this complex element this way because I already got many sketches about this place. So, I only had to follow the concept-art I made. ![](data/images/blog/2015/02/08-komona-painting_by-David-Revoy.jpg) ## 9\. Scatter brush Painting hundreds of little dots can be a pain. Krita can help if you know the right option to check. Here in the brush editor I show how to activate the Scatter effect (1) , and how I enable it (2) with a variable strength (3). You can also adapt the spacing of in the 'Brush Tip' if you want less dots. Digital brushes like this one helps a lot to fill large zone, but never forget to do manual retouch at the end with a single dot brush ; a good brush shortcut like this one happens only when you can't guess a trick was used. ![](data/images/blog/2015/02/09-setup-brush-scatter-for-leaves_by-David-Revoy.jpg) ## 10\. Colored sketch I turn my sketch to a violet color with the HSV/HSL Adjustment filter ( Ctrl + U ), this is only a stylistic choice as I don't want to get too much black shading into my colors. It helps me to get setup colored shadows. I usually pick blue, violet, red, or brown for this , it depends the ambient of the artwork. ![](data/images/blog/2015/02/10-violet-sketch-for-no-black-shadows_by-David-Revoy.jpg) ## 11\. Using two viewports to detail One of the top feature of the upcoming Krita 2.9 is the possibilities to setup multi-viewports and works with multiple documents open. Zooming and painting little details is a dangerous exercise where you can break the overall look of your artwork. But with another viewport it is now possible to control the overall at the same time, and even jump between the two viewports. ![](data/images/blog/2015/02/11a-detail-with-two-views_by-David-Revoy.jpg) The image under shows how to activate multiviewport. You need to first go into the preferences and activate the 'subwindows' mode ( by default Krita open tabs ). Then go to Windows > New View > and select your windows already open. ( Note : it's often far on the right of the drop-down panel, a bit hard to do with a stylus ) ![](data/images/blog/2015/02/11b-detail-with-two-views_by-David-Revoy.jpg) ## 12\. The butterflies brush preset While painting the artwork I made another brush preset on the fly to preview an effect. I started to paint with black on a white square background little strokes as if they were distant butterflies. I kept them painterly and dirty to not get a clipart or vector cold effect. I select them and press Ctrl + Shift + C , to copy visible , then in the brush editor , under Brush Tip > Stamp the brush should appear as a preview (1) ( if the brush doesn't appear , or if you decide to change it , you can refresh it with (3) 'Use as Tip' ). Checking 'Use color as mask' is a good idea ; this way the white will become transparent, and the black will paint with the selected color. You can use the Scratchpad (4) on the left of the brush editor to test your brush. ![](data/images/blog/2015/02/12a-butterflies-brush_by-David-Revoy.jpg) An interresting effect for this Fx brush is to activate the 'Hue' (1) Enable the sensor (2) and choose a Fuzzy sensor (3) . Fuzzy is similar to Random ; this way we obtain a brush with random Hue. Ideal for painting rainbows of any particules. ![](data/images/blog/2015/02/12b-butterflies-brush_by-David-Revoy.jpg) ## 13\. Patterns on socks Just an easy basic tips : when all details are painted, it's fun to add pattern with a Multiply blending mode and a light desaturated color. It's acting like a glazing pass. ![](data/images/blog/2015/02/13-pattern-on-socks_by-David-Revoy.jpg) ## 14\. The negative check I always do this when polishing large artworks with large bright sky: Create a layer on the top of your stack (1) , fill it with a bright yellow (2) and setup the blending mode to Difference (3) . The color of the sky will appears under a new contrast and you'll see better how to clean the little artifacts. I smudge them with a smudge preset (4). ![](data/images/blog/2015/02/14-negative-check_by-David-Revoy.jpg) ## Final artwork The final artwork is a high colored energetic piece as I wanted ( maybe a bit too 'smoothed' and flat , I must admit ) for the header of the future dedicated www.peppercarrot.com website. The final flat file is a badass 20MB png , 6400x3600px available [on DeviantArt](http://fav.me/d8gvor6) . You can also [download here the 1080p wallpaper version](data/images/blog/2015/02/2015-01_pepper-and-carrot_cover-artwork.jpg) ![](data/images/blog/2015/02/2015-01_pepper-and-carrot_cover-artwork.jpg)

Flying around Komona

WRITTEN_BY David REVOY - - 4 comments
It was made for video tutorial, [link need update] Link : [Wallpaper 1080p version ](data/images/artworks/2015-02-05_Pepper-and-Carrot_cover-artwork.jpg "Wallpaper 1080p version" )