161 lines
No EOL
7.2 KiB
Markdown
161 lines
No EOL
7.2 KiB
Markdown
---
|
|
title: 'Logo Design'
|
|
date: 2024-01-27T20:13:10+01:00
|
|
weight: 2
|
|
---
|
|
|
|
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[^1] 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.
|
|
|
|
{{< figure src="img/inkscape-rotate-object.png" alt="Inkscape rotate object"
|
|
caption="Rotation of an rectangle shape in Inkscape" >}}
|
|
|
|
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[^2] 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.
|
|
|
|
{{< figure src="img/inkscape-edit-path.png" alt="Inkscape edit path"
|
|
caption="Editing a path using Bezier curve handles in Inkscape" >}}
|
|
|
|
Before saving the document as SVG[^3], 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[^4] 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[^5] 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.
|
|
|
|
{{< figure src="img/gimp-stack-layers.png" alt="GIMP stack layers"
|
|
caption="Stacking layers of scaled image versions in GIMP" >}}
|
|
|
|
## Adding a manifest
|
|
|
|
For a Progressive Web App[^6] (PWA) create a Manifest[^7] 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/src/branch/main/logo
|
|
|
|
[^1]: [Free Software](https://fsfe.org/freesoftware/comparison.en.html)
|
|
comparison by the Free Software Foundation Europe
|
|
[^2]: [Bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) in the
|
|
Wikipedia
|
|
[^3]: [SVG](https://en.wikipedia.org/wiki/SVG) in the Wikipedia
|
|
[^4]: [Favicon](https://en.wikipedia.org/wiki/Favicon) in the Wikipedia
|
|
[^5]: [ICO (file format)](https://en.wikipedia.org/wiki/ICO_(file_format)) in
|
|
the Wikipedia
|
|
[^6]: [Progressive Web App](https://en.wikipedia.org/wiki/Progressive_web_app)
|
|
in the Wikipedia
|
|
[^7]: [Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) in the
|
|
MDN Web Docs |