Get images working from .md post files

This commit is contained in:
2020-09-23 17:45:36 -05:00
parent 0fb5d6ef41
commit 0bba342e8e
28 changed files with 2247 additions and 21 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View File

@@ -14,11 +14,11 @@ It took me a long time to figure out a good method (Im no graphic designer!),
The first step, of course, is to find an icon. There are billions of free ones out there on the web. This is mine.
![Blue phone icon](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/icon-phone-blue.png)
![Blue phone icon](./icon-phone-blue.png)
I love it. Its just what I needbut what a terrible color! I need something else. Its a PNG and when I open it in Gimp, heres what it looks like.
![Original in Gimp](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/original_in_gimp-300x236.png)
![Original in Gimp](./original_in_gimp-300x236.png)
You can see the edges have been blended into a white background which would work great if I only ever put it on a white background. Well, I just might be doing that, but Im too much of a perfectionist to use it like that. So, lets get to work.
@@ -26,7 +26,7 @@ You can see the edges have been blended into a white background which would work
Add a new layer to the image by selecting Layer > New Layer. Call it “color”. Make sure its on top of the “Background” layer.
![Adding a color layer](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/color_layer-149x300.png)
![Adding a color layer](./color_layer-149x300.png)
Fill this new layer with the color you want to change the icon to. Im using this lovely puke color (not my choice!): #afbd0a.
@@ -38,17 +38,17 @@ Select the “Background” layer. Desaturate the image by selecting Colors > D
Now, invert the image by selecting Colors > Invert. Next, create another layer called “mask” and fill it with black. Move this layer below the “Background” layer. Your layers should look like the image below.
![Creating the mask layer](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/mask_layer-209x300.png)
![Creating the mask layer](./mask_layer-209x300.png)
Right-click on the “Background” layer and select “Merge down”. Now you should have something similar to the image below.
![After merging down](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/after_merge_down-300x156.png)
![After merging down](./after_merge_down-300x156.png)
## 4. Adjust the curves
Now, with the “mask” layer selected, select Colors > Curves. In the dialog, drag the very middle of the line straight up to the top-center of the graph. Gimp should look like the screenshot below. Click “OK”.
![Adjusting the curves](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/curves-300x189.png)
![Adjusting the curves](./curves-300x189.png)
## 5. Create a layer mask on the “color” layer
@@ -62,7 +62,7 @@ Paste what youve copied to the layer mask by selecting Edit > Paste. Youl
Now hide your “mask” layer and show your “color” layer. Perfect!
![Completed image](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/done-300x163.png)
![Completed image](./done-300x163.png)
You now have a new icon with a completely different color, but with the nice blending at the edges and perfect shape of the original icon. Dont believe me? Well, test it! Select your “mask” layer and delete everything on it. Fill it with any background color you want and see how it looks. Make sure to show your “mask” layer again by click on the eye button.

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB