Get images working from .md post files
BIN
src/posts/2012/03/15/after_merge_down-300x156.png
Normal file
|
After Width: | Height: | Size: 37 KiB |
@@ -14,11 +14,11 @@ It took me a long time to figure out a good method (I’m 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.
|
||||
|
||||

|
||||

|
||||
|
||||
I love it. It’s just what I need–but what a terrible color! I need something else. It’s a PNG and when I open it in Gimp, here’s what it looks like.
|
||||
|
||||

|
||||

|
||||
|
||||
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 I’m too much of a perfectionist to use it like that. So, let’s 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 it’s on top of the “Background” layer.
|
||||
|
||||

|
||||

|
||||
|
||||
Fill this new layer with the color you want to change the icon to. I’m 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.
|
||||
|
||||

|
||||

|
||||
|
||||
Right-click on the “Background” layer and select “Merge down”. Now you should have something similar to the image below.
|
||||
|
||||

|
||||

|
||||
|
||||
## 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”.
|
||||
|
||||

|
||||

|
||||
|
||||
## 5. Create a layer mask on the “color” layer
|
||||
|
||||
@@ -62,7 +62,7 @@ Paste what you’ve copied to the layer mask by selecting Edit > Paste. You’l
|
||||
|
||||
Now hide your “mask” layer and show your “color” layer. Perfect!
|
||||
|
||||

|
||||

|
||||
|
||||
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. Don’t 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.
|
||||
|
||||
|
||||
BIN
src/posts/2012/03/15/color_layer-149x300.png
Normal file
|
After Width: | Height: | Size: 31 KiB |
BIN
src/posts/2012/03/15/curves-300x189.png
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
src/posts/2012/03/15/done-300x163.png
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
src/posts/2012/03/15/icon-phone-blue.png
Normal file
|
After Width: | Height: | Size: 9.1 KiB |
BIN
src/posts/2012/03/15/mask_layer-209x300.png
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
src/posts/2012/03/15/original_in_gimp-300x236.png
Normal file
|
After Width: | Height: | Size: 76 KiB |