From 0a217bfd9ede6ecabb46613d0dd063ffcfc8e8b8 Mon Sep 17 00:00:00 2001 From: "this.ven" Date: Fri, 2 Feb 2024 13:58:22 +0100 Subject: [PATCH] Create and document profile image --- content/_index.md | 7 ++ content/docs/graphics/profile-image/_index.md | 90 +++++++++++++++++++ .../img/gimp-manually-posterize.jpg | 3 + .../img/open-camera-popup-menu.jpg | 3 + static/img/profile.jpg | 3 + 5 files changed, 106 insertions(+) create mode 100644 content/docs/graphics/profile-image/_index.md create mode 100644 content/docs/graphics/profile-image/img/gimp-manually-posterize.jpg create mode 100644 content/docs/graphics/profile-image/img/open-camera-popup-menu.jpg create mode 100644 static/img/profile.jpg diff --git a/content/_index.md b/content/_index.md index ea8dcde..3b52fc8 100644 --- a/content/_index.md +++ b/content/_index.md @@ -12,3 +12,10 @@ draft: true This video features Influenca from the [Inconvenient EP](music/inconvenient-ep/), free to download and also available via {{< icon "funkwhale" >}} [Funkwhale](https://open.audio/library/albums/19811/). + +## Profile + +{{< cards >}} + {{< card link="about/" title="this.ven" image="img/profile.jpg" + subtitle="FLOSS musician, tinkerer and privacy advocate" >}} +{{< /cards >}} \ No newline at end of file diff --git a/content/docs/graphics/profile-image/_index.md b/content/docs/graphics/profile-image/_index.md new file mode 100644 index 0000000..ecf4b01 --- /dev/null +++ b/content/docs/graphics/profile-image/_index.md @@ -0,0 +1,90 @@ +--- +title: 'Profile Image' +date: 2024-01-31T22:19:42+01:00 +draft: true +--- + +In addition to a [logo design](../logo-design/) a profile image is another means +to visually convey the idea of a project and be recognized. It may determine +whether or not somebody will read, watch or listen to your content. Thus, it's favorable to use one and the same profile image for different services and take +some time to think about how to best show your personality in context of the +project. This article is supposed to be the documentation of my approach using +the [Open Camera](https://opencamera.org.uk/) app to take a picture and editing +it with [GIMP](https://www.gimp.org/). + +## Photo shooting + +I decide to take a picture of myself playing guitar in a recording situation. +As drums play another important role in my music and I started learning them I +locate myself behind my e-drums. Additionally, I arrange my acoustic guitar, notebook and audio interface to fill some space in the background. I don't like +showing off gear and brands, as such an image soon would look like advertising. +As a result I choose a perspective that hides manufacturer information. + +![Open Camera popup menu](img/open-camera-popup-menu.jpg +"Popup menu of the Open Camera app (irrelevant elements are blurred)") + +Using some boxes as a smartphone stand and the timer and repeat function in the +popup menu of the camera app I can take some pictures while playing the guitar. +This makes the images look more authentic than just portraying in front of the +camera. However, it may take some attempts to get a shot that appeals to you. + +## Image editing + +The pictures are transfered to the computer and viewed on the bigger screen. The +one that appeals to me is opened in GIMP for the editing process. First, I apply +[White Balance](https://docs.gimp.org/en/gimp-layer-white-balance.html) to +automatically correct any color dominants of the light source and obtain a good +foundation for further adjustments. + +As the wall and most of the instrument parts are white, the idea is to increase +the brightness and maximize the contrast level until some edges get lost to +create a [posterization](https://en.wikipedia.org/wiki/Posterization) effect. +Though the [Posterize](https://docs.gimp.org/en/gimp-filter-posterize.html) tool +can be used to achieve this effect I like to manually fine tune the settings via +[Brightness-Contrast](https://docs.gimp.org/en/gimp-tool-brightness-contrast.html). + +![GIMP manually posterize](img/gimp-manually-posterize.jpg +"Split view of the Brightness-Contrast tool in GIMP") + +Next, the [Desaturate](https://docs.gimp.org/en/gimp-filter-desaturate.html) +filter is used in *Luminance* mode to convert the colors to shades of black and +white. This way the image can be colorized using a custom color using the +[Colorize](https://docs.gimp.org/en/gimp-tool-colorize.html) filter dialog and +full [opacity](https://docs.gimp.org/en/gimp-dialogs-structure.html#gimp-layer-dialog-opacity-scale). + +Profile images are typically squared. Consequently, the final step is to use the +[Crop](https://docs.gimp.org/en/gimp-tool-crop.html) tool and specify the same +amount of pixels for the horizontal and vertical size of the crop-rectangle in +the *Tool Options*. I drag the crop-rectangle over an area that appeals to me +and press the `` key to apply cropping. You have to decide which area in +the image is most important and discard the rest of it. If your camera supports +it, you can also choose a squared camera resolution in your camera app to skip +this step. However, I like to use the maximum resolution and crop afterwards. + +## File size reduction + +Most platforms and services limit the dimensions and file size of uploaded +profile images. Depending on the amount of information in the picture the file +size can be varying. As I drastically reduced the colors by posterization the +color [mode](https://docs.gimp.org/en/gimp-image-mode.html) can be changed to +[Indexed](https://docs.gimp.org/en/gimp-image-convert-indexed.html). However, in +my case this doesn't decrease the file size significantly. Thus, for images in +[JPEG](https://en.wikipedia.org/wiki/JPEG) format the quality is a key value for +[compressing images](https://docs.gimp.org/en/gimp-tutorial-quickie-jpeg.html). +This value is set in another dialog that appears after specifying the file name +and `.jpg` extension in the *Export image* dialog. A quality of 75 percent +typically produces a reasonable image with a small file size. In my case I can +even go down to 20 percent without any perceptible degradations and gain a file +size of less than one third. + +Ultimately, [ImageMagick](https://imagemagick.org/)'s `convert` tool and its +`-resize` option can be used to create typical dimensions. For example, a 1200 +pixels version is created by the following command: + +```bash +convert profile.jpg -resize 1200 profile-1200x1200.jpg +``` + +My best practice is to try uploading the original image and create a resized +version if necessary according to a potential error message or field note in +advance. \ No newline at end of file diff --git a/content/docs/graphics/profile-image/img/gimp-manually-posterize.jpg b/content/docs/graphics/profile-image/img/gimp-manually-posterize.jpg new file mode 100644 index 0000000..c955d6d --- /dev/null +++ b/content/docs/graphics/profile-image/img/gimp-manually-posterize.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7857a0fbb25ac076f9eb004196494e7fcbf554d5da283ec1bd974664af918de7 +size 23338 diff --git a/content/docs/graphics/profile-image/img/open-camera-popup-menu.jpg b/content/docs/graphics/profile-image/img/open-camera-popup-menu.jpg new file mode 100644 index 0000000..6b5c02b --- /dev/null +++ b/content/docs/graphics/profile-image/img/open-camera-popup-menu.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5211ec82951442d9d73dca782cefea0a6b36cf953438c0f1d7f435db54b77512 +size 29914 diff --git a/static/img/profile.jpg b/static/img/profile.jpg new file mode 100644 index 0000000..e17c1c0 --- /dev/null +++ b/static/img/profile.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1f4bcd924408259454bfe5b44fca159c5ad31fce70195454af74522c1a19e4ec +size 55645