Extra tips for creating icons?

[jm355]

I'd like to add some icons, but I'm pretty unfamiliar with graphic design. What's a good image editor to use? Any good settings to adjust in the editor?

Any imagemagick commands that might make it easier to work with an icon? Some apps have an icon that seems like it'd be super easy to convert to the cuscon style just by stripping the background, adding a black border, and/or filling certain regions. Some commands that might be good:

• strip background from icon image
• add black border to icon image after stripping background
• replace color X with color Y.

I'm planning to look into some of these things later, so this issue is partially a request for tips from @MiepHD, but also partially a place to track/share what I find

[MiepHD]

I'm using Gimp. These are the steps I normally do:

• resize the image to 512x512
• get the background color if needed
• remove background
• crop it to the content left
• resize that to 450px on the longer side
• then set the image width and height to 512x512 and center the image
• replace with areas with the background color
• add the outline with 12px border in a layer behind so you can only see half of the outline (in GIMP you select an area then do a outline which selects a region around the selected line with the specified distance so a 12px border is actually 24px. But because it's a layer behind you can't see the part that goes into the selected area.) If you could automate that (or a part of it) that'd be really helpful

[jm355]

I believe most of those things up to replacing areas with the background and black borders should be pretty easy with imagemagick, I'll see if I can make a script for them

[jm355]

On my phone rn, this is a note to myself of parameters the script should have. cusconify.sh(image_filename, optional_override_background_color)

[jm355]

Here's what I've got so far. So far you can call it with ./cusconify.sh file.png and it will output potential background colors from around the edge of the image, then strip the background based on the color at 0,0. I'm still working on cropping it, resizing it down a bit, and centering it, but hopefully this is helpful in the meantime

#!/bin/sh

filename="$1"
new_file="new_$filename"
#background_color=${2:-$(command_to_get_bg)}

print_background() {
    echo "Colors around the edge of $1 to get the background color"
    for x in 0 256 512
    do
        for y in 0 256 512
        do
            if [ $x != 256 ] || [ $y != 256 ]; then
                magick $1 -format "Color at ($x,$y) %[pixel:u.p{$x,$y}]\n" info:
            fi
        done
    done
}

echo "Resize $filename to 512x512"
magick $filename -resize 512x512! $new_file

echo
print_background $filename

echo
echo "Remove the background"
magick $new_file -fill none -fuzz 30% -draw 'color 0,0 floodfill' $new_file

print_background $new_file

[jm355]

This does everything before "replace with areas with the background color"

#!/bin/sh

filename="$1"
new_file="new_$filename"
#background_color=${2:-$(command_to_get_bg)}

print_background() {
    echo "Colors around the edge of $1 to get the background color"
    for x in 0 256 512
    do
        for y in 0 256 512
        do
            if [ $x != 256 ] || [ $y != 256 ]; then
                magick $1 -format "Color at ($x,$y) %[pixel:u.p{$x,$y}]\n" info:
            fi
        done
    done
}

echo "Resize $filename to 512x512"
magick $filename -resize 512x512! $new_file

echo
print_background $filename

echo
# resize preserves the aspect ratio, so the longest edge is now 450px
# https://imagemagick.org/Usage/resize/
echo "Remove the background, trim the transparent border, and resize the image so the longest side is 450px, and add transparent border such that the image is 512x512 with the icon in the center"
magick $new_file -fill none -fuzz 50% -draw 'color 0,0 floodfill' -trim -resize 450x450 -background transparent -gravity center -extent 512x512 $new_file

[jm355]

magick in.png -bordercolor none -border 12 -background black -alpha background -channel A -blur 12x12 -level 0,0% out.pngseems to be a decent first run at adding a black border (https://stackoverflow.com/questions/29706574/add-border-outline-to-a-transparent-png-image-with-imagemagick)

[jm355]

The latest version of the script at #16 is better, it has each step split up, so you can manually edit the image from any step and because sometimes some steps need a different fuzz value, and it's easier to tweak the command at each step that way or copy it to the terminal and use it directly if needed.

The border adding line can probably still use some work, it's just based on that stack overflow page, I'm not sure if the black border thickness is acceptable or not.

[MiepHD]

The border has exactly the right thickness 👍

[MiepHD]

If the input icon has a dimension of 256x256 there is a one pixel transparent border on the left and bottom side so the image has to be cropped to 255x255 before resizing to 512x512. I have no idea why that's the case

[jm355]

I think this version should do all of the images in a folder, and output them to get/ cusconify.txt

#!/bin/sh

print_background() {
    echo "Colors around the edge of $1"
    for x in 0 256 512
    do
        for y in 0 256 512
        do
            if [ $x != 256 ] || [ $y != 256 ]; then
                magick $1 -format "Color at ($x,$y) %[pixel:u.p{$x,$y}]\n" info:
            fi
        done
    done
}

cusconify() {
    # 1st parameter: filename
    # 2nd parameter (optional): x coordinate to get background color from
    # 3rd parameter (optional): y coordinate to get background color from
    # 4th parameter (optional): fuzz percentage for background
    # 5th parameter (optional): fuzz percentage for trimming
    # 6th parameter (optional): floodfill or replace 

    filename="$1"
    new_file="new_$filename"
    temp_dir="cusconify_temp"

    mkdir -p $temp_dir
    mkdir -p get

    echo "Resize $filename to 512x512"
    magick $filename -fuzz 20% -trim -resize 512x512 +repage $temp_dir/$new_file

    echo
    print_background $filename
    print_background $temp_dir/$new_file

    echo
    echo "Remove background"
    if [ "$6" = "replace" ]; then
        magick $temp_dir/$new_file -fill none -fuzz ${4:-25}% -draw "color ${2:-256},${3:-0} replace" +repage "$temp_dir/no_bg_$new_file"
    else
        magick $temp_dir/$new_file -fill none -fuzz ${4:-25}% -draw "color ${2:-0},${3:-0} floodfill" +repage "$temp_dir/no_bg_$new_file"
    fi

    echo "Trim transparent border"
    magick "$temp_dir/no_bg_$new_file" -fuzz ${5:-75}% -trim +repage "$temp_dir/trimmed_$new_file"

    # resize preserves the aspect ratio, so the longest edge is now 450px
    # https://imagemagick.org/Usage/resize/
    echo "Resize trimmed image so longest side is 450px"
    magick "$temp_dir/trimmed_$new_file" -resize 450x450 +repage "$temp_dir/450_$new_file"

    echo "Put 450px trimmed image in center of 512x512 transparent image"
    magick "$temp_dir/450_$new_file" -background transparent -gravity center -extent 512x512 +repage "$temp_dir/aio_$new_file"

    echo "Generate icon with black borders"
    magick "$temp_dir/aio_$new_file" -bordercolor none -border 12 -background black -alpha background -channel A -blur 12x12 -level 0,5% -resize 512x512 +repage "$temp_dir/bordered_$new_file"

    echo "Make sure final icon is 512x512"
    magick "$temp_dir/bordered_$new_file" -background transparent -gravity center -extent 512x512 +repage "$temp_dir/bordered_$new_file"

    echo
    echo "To replace white with the background color run:"
    eval "magick $temp_dir/bordered_$new_file -fuzz 15% -fill '$(magick $temp_dir/$new_file -format "%[pixel:u.p{$x,$y}]\n" info:)' -opaque white get/$filename"
    echo "If the background color should be different, just change the srgba value passed in."
    echo "If the result replaces too much or not enough with the background color, try adjusting the fuzz percentage."
}

for file in *.png
do 
    cusconify file
done

[MiepHD]

Sorry for merging so quickly 😅 I now added these changes

[MiepHD]

Good work. It outputs a lot of icons that you can already use like they are