Diese Woche am beliebtesten

Vertiefendes Material

Smilie Schild Generator

Erstelle individuelle Grafiken mit unserem Smilie Schild Generator. Mit diesem Php Script kannst du im Handumdrehen personalisierte Smilies erstellen, die ein Schild mit deinem eigenen Text halten. Egal ob für Foren, Blogs, Discord oder soziale Netzwerke, unser Generator bietet dir eine zeitgemäße Oberfläche und eine intuitive Bedienung.

Wähle einfach deine gewünschte Emotion (zB. glücklich, traurig oder wütend), gib deinen individuellen Text ein, ändere die Farbe oder Schriftgröße und beobachte in der Live Vorschau, wie sich das Schild dynamisch an deine Botschaft anpasst. Dank der hochwertigen PNG Ausgabe mit Transparenz lassen sich die generierten Bilder perfekt in jedes Design integrieren. Klicke auf den Download Button und erhalte dein persönliches Smilie Schild sofort als gebrauchsfertige Grafik.

Die install.php. Es erstellt die Ordnerstruktur, lädt eine Schriftart herunter und generiert die benötigten Smilie Grafiken (per Code), damit du sofort ein funktionierendes Paket hast. Sollte die font.ttf fehlen lade dir eine aus dem Netz herunter.

<?php
$folders = ['smilies', 'fonts'];
foreach ($folders as $f) {
    if (!file_exists($f)) mkdir($f, 0777, true);
}
function createSmilie($name, $color, $eyeType = 'normal') {
    $path = "smilies/{$name}.png";
    if (!file_exists($path)) {
        $im = imagecreatetruecolor(30, 30);
        imagesavealpha($im, true);
        $trans = imagecolorallocatealpha($im, 0, 0, 0, 127);
        imagefill($im, 0, 0, $trans);
        $yellow = imagecolorallocate($im, 255, 204, 0);
        $black = imagecolorallocate($im, 0, 0, 0);
        imagefilledellipse($im, 15, 15, 28, 28, $yellow);
        imageellipse($im, 15, 15, 28, 28, $black);
        imagefilledellipse($im, 10, 12, 4, 4, $black);
        imagefilledellipse($im, 20, 12, 4, 4, $black);
        if($name == 'happy') imagearc($im, 15, 18, 15, 10, 0, 180, $black);
        if($name == 'sad') imagearc($im, 15, 22, 15, 10, 180, 360, $black);
        imagepng($im, $path);
        imagedestroy($im);
    }
}
createSmilie('happy', null);
createSmilie('sad', null);
$fontFile = 'fonts/font.ttf';
if (!file_exists($fontFile)) {
    $fontData = file_get_contents("https://github.com/google/fonts/raw/main/apache/roboto/static/Roboto-Bold.ttf");
    if($fontData) file_put_contents($fontFile, $fontData);
}
echo "<h3>Installation abgeschlossen!</h3>";
echo "<p>Ordner erstellt, Standard Smilies generiert und Schriftart geladen. Cool ...!</p>";
echo "<a href='index.html' style='padding:10px 20px; background:green; color:white; text-decoration:none; border-radius:5px;'>Jetzt Dreamcodes Generator öffnen</a>";
?>

Die index.html. Du kannst einfach weitere PNGs in den smilies/-Ordner werfen (z.B. wut.png, cool.png) und sie einfach als neue <option> im <select> Menü hinzufügen. Das System erkennt sie automatisch.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Schilder-Smilie Generator | Dreamcodes</title>
    <style>
        :root { --accent: #2563eb; --bg: #f1f5f9; }
        body { font-family: sans-serif; background: var(--bg); display: flex; flex-direction: column; align-items: center; padding: 20px; }
        .card { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 500px; }
        .control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .full-width { grid-column: span 2; }
        label { font-size: 12px; font-weight: bold; color: #64748b; text-transform: uppercase; }
        input, select { width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; margin-top: 5px; box-sizing: border-box; }
        .preview { background: #fafafa; border: 2px dashed #cbd5e1; margin: 20px 0; padding: 20px; display: flex; justify-content: center; min-height: 80px; }
        .btn { background: var(--accent); color: white; border: none; padding: 15px; border-radius: 12px; cursor: pointer; text-decoration: none; display: block; text-align: center; font-weight: bold; }
        footer { margin-top: 30px; font-size: 14px; }
        footer a { color: var(--accent); text-decoration: none; }
    </style>
</head>
<body>
<div class="card">
    <h2 style="margin-top:0">Schilder-Generator</h2>
        <div class="control-grid">
        <div class="full-width">
            <label>Text</label>
            <input type="text" id="t" value="Dreamcodes" maxlength="30">
        </div>
        <div>
            <label>Schriftfarbe</label>
            <input type="color" id="c" value="#000000">
        </div>
        <div>
            <label>Schriftgröße</label>
            <select id="sz">
                <option value="9">Klein</option>
                <option value="12" selected>Normal</option>
                <option value="16">Groß</option>
            </select>
        </div>
        <div>
            <label>Emotion</label>
            <select id="s">
                <option value="happy">Glücklich</option>
                <option value="sad">Traurig</option>
            </select>
        </div>
        <div>
            <label>Schriftart</label>
            <select id="f">
                <option value="font.ttf">Standard</option>
                </select>
        </div>
    </div>
    <div class="preview">
        <img id="p" src="" alt="Vorschau">
    </div>
    <a id="db" href="#" class="btn">Download PNG</a>
</div>
<footer>
    © 2026 <a href="https://www.dreamcodes.net" target="_blank">Dreamcodes</a>
</footer>
<script>
    const el = { t: 't', c: 'c', sz: 'sz', s: 's', f: 'f', p: 'p', db: 'db' };
    Object.keys(el).forEach(k => el[k] = document.getElementById(el[k]));
    function update() {
        const color = el.c.value.replace('#', '');
        const url = `generate.php?text=${encodeURIComponent(el.t.value)}&type=${el.s.value}&color=${color}&size=${el.sz.value}&font=${el.f.value}`;
        el.p.src = url;
        el.db.href = url + '&dl=1';
    }
    [el.t, el.c, el.sz, el.s, el.f].forEach(i => i.addEventListener('input', update));
    update();
</script>
</body>
</html>

Die generate.php:

<?php
$text       = $_GET['text']  ?? 'Dreamcodes';
$type       = $_GET['type']  ?? 'happy';
$color      = $_GET['color'] ?? '000000'; // Hex ohne #
$size       = (int)($_GET['size'] ?? 12);
$font_file  = $_GET['font']  ?? 'font.ttf';
$download   = isset($_GET['dl']);
$font_path  = __DIR__ . '/fonts/' . $font_file;
if(strlen($color) == 6) {
    $r = hexdec(substr($color, 0, 2));
    $g = hexdec(substr($color, 2, 2));
    $b = hexdec(substr($color, 4, 2));
} else {
    $r = $g = $b = 0;
}
$bbox = imagettfbbox($size, 0, $font_path, $text);
$tw = abs($bbox[2] - $bbox[0]);
$th = abs($bbox[5] - $bbox[1]);
$sw = max($tw + 24, 50); // Schildbreite
$iw = $sw + 60; // Gesamtbreite
$im = imagecreatetruecolor($iw, 70);
imagesavealpha($im, true);
$trans = imagecolorallocatealpha($im, 0, 0, 0, 127);
imagefill($im, 0, 0, $trans);
$txt_color = imagecolorallocate($im, $r, $g, $b);
$black     = imagecolorallocate($im, 0, 0, 0);
$white     = imagecolorallocate($im, 255, 255, 255);
imageline($im, 45, 35, 45, 65, $black);
imagefilledrectangle($im, 30, 5, 30 + $sw, 40, $white);
imagerectangle($im, 30, 5, 30 + $sw, 40, $black);
$smilie_file = __DIR__ . "/smilies/{$type}.png";
if (file_exists($smilie_file)) {
    $s_img = imagecreatefrompng($smilie_file);
    imagecopy($im, $s_img, 5, 25, 0, 0, 30, 30);
}
$tx = 30 + ($sw / 2) - ($tw / 2);
$ty = 22 + ($th / 2);
imagettftext($im, $size, 0, $tx, $ty, $txt_color, $font_path, $text);
header('Content-Type: image/png');
if ($download) header('Content-Disposition: attachment; filename="smilie.png"');
imagepng($im);
imagedestroy($im);
Dreamcodes Redaktion
Dreamcodes Redaktion
Jeder Inhalt auf Dreamcodes entsteht mit einem klaren Anspruch: geprüfte Praxis statt schneller Theorie. Was hier veröffentlicht wird, basiert auf Best Practices, echten Projekterfahrungen und technischem Verständnis, das über das Offensichtliche hinausgeht. Unser Ziel ist ein Fundament, auf dem du aufbauen kannst, nicht eines, das beim ersten produktiven Einsatz bricht. Wie du die Inhalte integrierst, absicherst und in deinen Kontext überträgst, liegt bei dir. Die fachliche Grundlage liefern wir, die Verantwortung für den Einsatz bleibt deine.

Mehr entdecken? Lass dich von weiteren ähnlichen Inhalten inspirieren!