149 lines
6.7 KiB
Markdown
149 lines
6.7 KiB
Markdown
---
|
|
title: 'Logo Design'
|
|
date: 2024-01-27T20:13:10+01:00
|
|
draft: true
|
|
---
|
|
|
|
I'm not that much into graphics design and this is not supposed to be a full
|
|
tutorial on how to create a logo. However, I'd like to share my experiences with
|
|
[Inkscape](https://inkscape.org/) and [GIMP](https://www.gimp.org/) for creating
|
|
the logo and favicon of this site.
|
|
|
|
## Getting inspired
|
|
|
|
First of all I inspect other logo designs by searching for vector images using
|
|
the terms `music` and `logo` in the [Pixabay](https://pixabay.com/) community.
|
|
|
|
{{< icon "link" >}} URL: https://pixabay.com/vectors/search/music%20logo/
|
|
|
|
The idea of using notes appeals to me and as I also want to convey the spirit of
|
|
[FLOSS](https://fsfe.org/freesoftware/comparison.en.html) I need to extend it by
|
|
something that represents its characteristics. I remember that in the logo of
|
|
the Gitea fork [Forgejo](https://forgejo.org/) the letter `F` is shown as a
|
|
forking path and want to combine it with notes.
|
|
|
|
## Creating shapes
|
|
|
|
I run Inkscape and create a new document from template (`<Ctrl><Alt><N>`) and
|
|
choose *Icon 512x512* in the *Others* tab. Using the rectangle and ellipse tool
|
|
I create the note head, stem and flag by scaling and rotation. Learn more about
|
|
[shapes](https://inkscape.org/doc/tutorials/shapes/tutorial-shapes.html) in the
|
|
official tutorial.
|
|
|
|
|
|
|
|
To indicate the fork at the top of second note's flag an ellipse without filling
|
|
is used. For the purpose of recognizing the note head and fork symbol as unit I decide to also leave out the filling of the note head making it a half note.
|
|
This decision is reflected in the colorization of the elements, too. The colors
|
|
are selected in the *fill and stroke* dialog of the object menu explained in the
|
|
[basic](https://inkscape.org/doc/tutorials/basic/tutorial-basic.html) tutorial.
|
|
Finally, adjusting the *z-order* of the objects creates the layering.
|
|
|
|
## Iterating on the idea
|
|
|
|
Some feedback and discussion in a music community chat makes me create just
|
|
another iteration to realize that the symbol of a note may be misleading as it
|
|
is typically associated with sheet music and notation programs. Thus, I start
|
|
a new approach and play around with the Pen tool to create a music wave that
|
|
forks into two different directions. The wave form is just a single path with
|
|
some [Bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) handles.
|
|
This drawing technique and a lot of useful applications are described in the
|
|
[advanced](https://inkscape.org/doc/tutorials/advanced/tutorial-advanced.html)
|
|
Inkscape tutorial.
|
|
|
|
|
|
|
|
Before saving the document as [SVG](https://en.wikipedia.org/wiki/SVG), useful
|
|
meta data can be added by opening the document settings (`<Ctrl><Shift><D>`) and
|
|
selecting the *Meta data* tab. Additionally, the *License* tab allows to
|
|
integrate URLs and the license deed and granted rights. Besides saving this file
|
|
for further editing, I use the export dialog (`<Ctrl><Shift><E>`) to create a
|
|
*Plain SVG* file leaving out Inkscape specific meta data which supports to
|
|
decrease the file size.
|
|
|
|
## Serving diversity
|
|
|
|
The shapes of the logo are simple and recognizable. Thus, it can be perfectly
|
|
used as [favicon](https://en.wikipedia.org/wiki/Favicon) for the website. Though
|
|
recent browsers and devices can render SVG files for this resource, it's good
|
|
practice to serve other file types. Consequently, the last step is to convert
|
|
(and if necessary scale) the SVG file to support older browsers and devices.
|
|
|
|
I open the SVG file in GIMP and confirm the dialog to render the Scalable Vector
|
|
Graphics using default settings. Depending on the target file type and device I [scale](https://docs.gimp.org/en/gimp-image-scale.html) the image and convert it
|
|
via the [export dialog](https://docs.gimp.org/en/gimp-export-dialog.html) using
|
|
the dimensions (in pixels) and file types shown in the table.
|
|
|
|
| Dimensions | File type | Additional info |
|
|
|------------|-----------|-----------------|
|
|
| 512 x 512 | PNG | |
|
|
| 192 x 192 | PNG | |
|
|
| 180 x 180 | PNG | Apple devices |
|
|
| 48 x 48 | ICO | 32 bpp, 8-bit alpha, no palette settings |
|
|
| 32 x 32 | PNG | |
|
|
| 16 x 16 | PNG | |
|
|
|
|
You can also use Inkscape on the terminal to create these files:
|
|
|
|
```bash
|
|
inkscape --export-background-opacity=0.0 --export-width=512 --export-filename="android-chrome-512x512.png" logo.svg
|
|
inkscape --export-background-opacity=0.0 --export-width=192 --export-filename="android-chrome-192x192.png" logo.svg
|
|
inkscape --export-background-opacity=0.0 --export-width=180 --export-filename="apple-touch-icon.png" logo.svg
|
|
inkscape --export-background-opacity=0.0 --export-width=32 --export-filename="favicon-32x32.png" logo.svg
|
|
inkscape --export-background-opacity=0.0 --export-width=16 --export-filename="favicon-16x16.png" logo.svg
|
|
```
|
|
|
|
The file `favicon.ico` is created via Inkscape and the `convert` command of the
|
|
[ImageMagick](https://imagemagick.org/) tool suite:
|
|
|
|
```bash
|
|
inkscape --export-background-opacity=0.0 --export-width=48 --export-filename="favicon-tmp.png" logo.svg
|
|
convert favicon-tmp.png favicon.ico
|
|
rm favicon-tmp.png
|
|
```
|
|
|
|
In addition to [ICO](https://en.wikipedia.org/wiki/ICO_(file_format)) file type
|
|
conversion best practice is to stack smaller size versions on top of the 48 x 48
|
|
pixels one. This can achieved by opening the `favicon.ico` in GIMP, copying and
|
|
scaling the original layer down to 32 x 32 and 16 x 16 pixels, and inserting it
|
|
as a [new layer](https://docs.gimp.org/en/gimp-using-layers.html) (`<Ctrl><V>`).
|
|
The new layer is inserted into the center of the image and has to be dragged to
|
|
the top left corner.
|
|
|
|
|
|
|
|
## Adding a manifest
|
|
|
|
For a [Progressive Web App](https://en.wikipedia.org/wiki/Progressive_web_app)
|
|
(PWA) create a [manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest)
|
|
file. At least provide the following values to serve different icon sizes and
|
|
change `<your-name>` to fit your needs:
|
|
|
|
```json {filename="site.webmanifest"}
|
|
{
|
|
"name": "<your-name>",
|
|
"start_url": "index.html",
|
|
"display": "standalone",
|
|
"icons": [
|
|
{
|
|
"src": "android-chrome-192x192.png",
|
|
"sizes": "192x192",
|
|
"type": "image/png"
|
|
},
|
|
{
|
|
"src": "android-chrome-512x512.png",
|
|
"sizes": "512x512",
|
|
"type": "image/png"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
The [icons](https://developer.mozilla.org/en-US/docs/Web/Manifest/icons) array
|
|
contains the images to be used when integrated as an app in the target OS.
|
|
Learn more about the members in the manifest file and best practices for
|
|
[PWAs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) in the
|
|
MDN Web Docs.
|
|
|
|
## Resources
|
|
|
|
Repository: https://dri.ven.uber.space/thisven/Identity
|