Exactly two years ago, I published an article about a fix for a DokuWiki’s WYSIWYG editor which I explicitly not mentioning by name because I forgot what is it.
(Shoot!—self-mutter) Well… I tried.
Anyway, since my site was new back then, with most articles being more like placeholders to evaluate what is the look I want, I needed to some image for my post. I may be still finding my ways and I’m aware that I will make mistakes like a beautiful young geisha who got railed by a soccer team and broke character in the moment, that’s fine. But like the geisha, I have something very well semented cemented: I want as little color as possible other than in accents. So for like the fourth time this week, I created another logo.
UPDATE
…and note to self—I need to find out how to put dates and update dates on this thing.
I spent the whole day troubleshooting one of the firewalls, specifically the edge, I checked a box I shouldn’t have and next thing I know: full meltdown. I could’ve whipped up a new one in minutes, it’s not hard, or even faster if I cloned it instead from the master since it’s a VM but I had just consolidated a lot of stuff in this specific one and hadn’t taken it out of it yet. I digress though, when I sit back at this desk I’m at right now the document was still open.
Seeing it with fresh eyes I realized I over-engineered, take that as you will since I barely count to ten. The “fold” between the K and U looked reallly jagged. Also, the layers are swimming in blending effects, I didn’t account for what color of background it would sit on. You would think on the opposite of black is white, the most common background colors, not according to this design, changing slightly the background would make it morph into a new beast.
So to stabilize it I created a new design from it that’s just it’s silhouette1 in white. No frills.
Then, it occurred to me I could take that to my advantage; so I re-proportioned the design to be a little smaller, NOT RESIZING, but making the white background look as if it was the main design and the main design some sort of contour of it. I get to keep the effects and future designers could, among many many options, take the alpha almost all the way up (make it transparent basically) and give it bright highlights to make it look like a pane of glass, and maybe give the background a thick blur to give it depth. I’d do it myself but I suck at shadowing, honestly that fold was like a huge milestone and ish, but it should be easy for a real graphic designer. I think.
1. I wasn’t sure I was gonna get that word right on the first try without the wavy red line below it.
What are those lines inside the letters, I hear no one ask?
DokuWiki’s original, official, logo is very busy. I has way too much color for a logo, not that there’s a rule or they’re doing anything wrong. It’s just… stressful (for me). So, to make it a little more busy while still keeping some symmetry and well-defined letter-shapes, I took what I learned from my originally hand-written logo of Antipostal.com and this other one I can’t remember right now and applied it: I wrote “DokuWiki” and observed my own pen strokes, unlike in Antipostal’s, which is supposed to look hand-written, this is too technical for that look, so I drew the pen (more like marker-) strokes inside the letters, and cut some letters to follow the pen strokes but still within the confines of the original shape.
The D was drawn from scratch to loosely continue the lines left by the pencils of the main icon-type logo. Also, I wanted a Disney logo-shaped D. With the giant ass hitting the floor, it just felt fitting. It’s not a the normal way I’d draw that letter, making the strokes come out different each but mostly in two different ways, and so I used both. I wasn’t going to let both thought, this was an accident, when I zoomed out to see from which artboard I could copy things to fix it, but instead I ended up tweaking it a little bit more and it stuck.
The other letters were always drawn using the same path. On the Wiki part, the font is bolder, both in weight and color. Also, I used small caps instead of lower case letters because in combination with the style it just looked more imposing. Fonts are deformed way beyond than what was typed in. So, no, there is no font that will match. And even if it wasn’t deformed, I used two fonts merged to create the style I wanted. If you want the fonts, I’m sorry it’s really custom, there’s no way I could reproduce it from scratch, I’m sure — the D doesn’t even come from a keyboard! — On the flipside though, I guess you could say it’s one of a kind. 🙂
Files
Unfortunately, with the qBittorrent logo I learned that not all properties can be exported to SVG, which I think is the only open vector graphics format that’s actually known (and compatible with the software I use). So, I’m exporting hi-res PNG, the original multi-artboard AFDESIGN file, SVGs, and this time I thought about adding PSD to the mix, it’s not an open format and it’s a raster format but it’s guaranteed for high quality given its normal use, it’s supported by Microsoft Paint at this point and it appears to support alpha:
…or at least I think it does. I check them using macOS’ QuickLook Finder feature, if the background is blurred then I take it as it supports alpha. But in Illustrator, it’s not shown, and I don’t have (nor want) Photoshop to test. But, in this specific case, DokuWiki’s, it’s kinda goes against its ethos; DokuWiki2 is all good, and communal, and nice, and helpful and Adobe’s PSD is…not. Antithetical, is the word that keeps popping in my head.
2. DokuWiki the project, or DokuWiki the software, either is true.
Specs
| Document resolution | 400 DPI |
| Artboard dimensions – squared | 1024px × 1024px |
| Artboard dimensions – banner/header-type | 5400px × 1024px |
| Color format | RGB/32 (HDR) |
| Color profile | sRGB IEC61966-2.1 (Linear) |
| Alpha channel | ✔︎ |
| 68K | dokuwiki.afdesign |
| 10M | dokuwiki.zip |
| 4.8M | dw-svlogo-header-lightsout.png |
| 401K | dw-svlogo-header-lightsout.svg |
| 4.8M | dw-svlogo-header.png |
| 375K | dw-svlogo-header.svg |
| 297K | dw-svlogo-icon-lightsout.png |
| 108K | dw-svlogo-icon-lightsout.svg |
| 369K | dw-svlogo-icon.png |
| 148K | dw-svlogo-icon.svg |
Allez ! C’est tout.
Leave a Reply