Design Assets — De签名 As设置s

de签名-as设置s

创建 and edit graphic de签名 as设置s: icons, favicons, images, and color 系统s.

工具 Selection Task 工具 Why AI image generation nano-banana-pro 生成 images from text prompts Image resize/convert sips macOS native, fast, no deps Advanced manipulation ImageMagick Compositing, effects, batch processing Icons & 记录os SVG Scalable, small file size, editable Screenshots screencapture macOS native 应用 Icon Generation

生成 all required sizes from a single 1024x1024 source icon.

iOS / macOS Icon Sizes #!/bin/bash # 生成-应用-icons.sh <输出-dir> SOURCE="$1" OUTDIR="${2:-.}" mkdir -p "$OUTDIR"

SIZES=(16 20 29 32 40 48 58 60 64 76 80 87 120 128 152 167 180 256 512 1024) for SIZE in "${SIZES[@]}"; do sips -z $SIZE $SIZE "$SOURCE" --out "$OUTDIR/icon-${SIZE}x${SIZE}.png" 2>/dev/null done echo "生成d ${#SIZES[@]} icon sizes in $OUTDIR"

Android Icon Sizes # Android adaptive icon sizes declare -A ANDROID_SIZES=( ["mdpi"]=48 ["hdpi"]=72 ["xhdpi"]=96 ["xxhdpi"]=144 ["xxxhdpi"]=192 ) for DENSITY in "${!ANDROID_SIZES[@]}"; do SIZE=${ANDROID_SIZES[$DENSITY]} mkdir -p "res/mipmap-$DENSITY" sips -z $SIZE $SIZE "$SOURCE" --out "res/mipmap-$DENSITY/ic_launcher.png" done

Favicon Generation #!/bin/bash # 生成-favicons.sh <输出-dir> SOURCE="$1" OUTDIR="${2:-.}" mkdir -p "$OUTDIR"

# Standard 网页 favicons sips -z 16 16 "$SOURCE" --out "$OUTDIR/favicon-16x16.png" sips -z 32 32 "$SOURCE" --out "$OUTDIR/favicon-32x32.png" sips -z 180 180 "$SOURCE" --out "$OUTDIR/应用le-touch-icon.png" sips -z 192 192 "$SOURCE" --out "$OUTDIR/android-chrome-192x192.png" sips -z 512 512 "$SOURCE" --out "$OUTDIR/android-chrome-512x512.png"

# ICO file (requires ImageMagick) magick "$OUTDIR/favicon-16x16.png" "$OUTDIR/favicon-32x32.png" "$OUTDIR/favicon.ico"

echo "Favicons 生成d in $OUTDIR"

HTML Meta Tags

site.网页manifest { "name": "My 应用", "short_name": "应用", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" }

Color Palette 生成器

Given a primary color, 生成 a full palette:

// HSL-based palette generation function 生成Palette(hue, saturation = 70) { return { 50: hsl(${hue}, ${saturation}%, 97%), 100: hsl(${hue}, ${saturation}%, 94%), 200: hsl(${hue}, ${saturation}%, 86%), 300: hsl(${hue}, ${saturation}%, 74%), 400: hsl(${hue}, ${saturation}%, 62%), 500: hsl(${hue}, ${saturation}%, 50%), // Primary 600: hsl(${hue}, ${saturation}%, 42%), 700: hsl(${hue}, ${saturation}%, 34%), 800: hsl(${hue}, ${saturation}%, 26%), 900: hsl(${hue}, ${saturation}%, 18%), 950: hsl(${hue}, ${saturation}%, 10%), }; }

ImageMagick Quick Reference # Resize magick 输入.png -resize 800x600 输出.png

# Convert 格式化 magick 输入.png 输出.网页p

# 添加 border magick 输入.png -border 10 -bordercolor "#333" 输出.png

# Round corners (with transparency) magick 输入.png \( +clone -alpha 提取 -draw "roundrectangle 0,0,%[w],%[h],20,20" \) -alpha off -compose CopyOpacity -composite 输出.png

# Composite / overlay magick base.png overlay.png -gravity center -composite 输出.png

# Batch resize all PNGs magick mogrify -resize 50% *.png

# 创建 solid color image magick -size 1200x630 xc:"#1a1a2e" 输出.png

# 添加 text to image magick 输入.png -gravity south -pointsize 24 -fill white -annotate +0+20 "Caption" 输出.png

sips Quick Reference (macOS) # Resize (mAIntAIn aspect ratio) sips --resampleWidth 800 输入.png --out 输出.png

# Exact resize sips -z 600 800 输入.png --out 输出.png

# Convert 格式化 sips -s 格式化 jpeg 输入.png --out 输出.jpg

# 获取 image 信息 sips -g all 输入.png

# Rotate sips --rotate 90 输入.png --out 输出.png