Gerasterte Zeichnungen in Pfade umwandeln und bergradigen
  • Frickler Oktober 2017
    Hallo,
    ich habe in meinem Vespa Shop Roller aus Blech eine Dauer Baustelle mit den Bildern.
    Ich habe damals die Bilder mit Gimp bearbeitet und versuche seitdem, das Design zu verbessern, indem ich die Bilder "clean" mache.
    Auf Pixelbasis komme ich aber irgendwie nicht mehr weiter und möchte die Pixel deswegen in Pfade umwandeln.

    Das Umwandeln habe ich grundsätzlich hinbekommen, jedoch weiß ich nicht weiter, wie ich dann einzelne Knoten zu Elementen gruppieren kann, um einzelne Bereiche Bereiche kräftiger und kontraststärker anzeigen zu lassen.

    Vlt. kann mal jemand einen Blick auf die Bilder auf meiner Homepage werfen und mir einen Tipp geben.
    Vielen Dank schon einmal!
  • Frank Beckmann Oktober 2017
    Moin.
    Meinst Du solche Bilder wie dieses hier?

    image

    Das sieht ja furchtbar aus. Was erwartest Du von einem 5KB großem JPG? Wolltest Du den Großen Preis für die kleinste Website-Größe gewinnen?  
    :D
    Ich weiß wirklich nicht wie man da noch etwas retten will. Hast Du möglicherweise noch das Originalfoto?
    Den Ansatz der Umsetzung finde ich eigentlich gut.

    Gruß
    Frank
    VespaRahmen.png
    573 x 355 - 43K
  • Frickler Oktober 2017
    Danke für deine Rückmeldung!
    Ja, ich habe noch alle Bilder

    Die Bilder sind ja nur zwischen 175px und 200px breit. Wenn man das vergrößert, dann sieht das natürlich nicht mehr so schön aus, klar.

    Ich habe damit begonnen, vier ersten vier Bilder auf der Startseite weiter zu reduzieren und dann in Inkscape die Pfade nachzuzeichnen.

    Ich versuche heute Abend noch einen Zwischenstand einzureichen
  • Frank Beckmann Oktober 2017
    175x200px ist aber auch nicht gerade viel. Gibt es kein hochauflösendes Grundmaterial?
    Wenn Du es manuell nachzeichnen würdest - könnte das vielleicht ausreichen.
    Bin gespannt wie die neue Umsetzung ausfällt.

    Gruß
    Frank
  • Frickler Oktober 2017
    Hallo Frank,
    das Grundmaterial ist höher aufgelöst.
    Letzlich werden dibe Bilder aber auf 200px eingestampft.
    Leider bekomme ich die Grafik hier im Forum nicht hochgeladen! Es lädt und lädt und lädt ..
  • Frank Beckmann Oktober 2017
    Ja - altes bekanntes und unabänderliches Problem.
    Kannst Du es anderswo verlinken oder verfügbar machen?

    Gruß
    Frank
  • Frickler Oktober 2017
    ...
  • Frank Beckmann Oktober 2017
    Benutzt Du Fotos als Grundlage und wenn kannst Du mal eins zur Verfügung stellen?

    Gruß
    Frank
  • Frickler Oktober 2017
    Ich setze morgen früh mal ein Bild ein. Ich war heute damit beschäftigt, die vorhandenen BIlder als webp mit fallback einzurichten.

    PS: Ich setze in den kommenden Tagen auch noch einen kleinen FTP Bereich ein. Das macht mehr Spaß zu bedienen, glaub ich - und man kann dann gemeinsam an einer .svg arbeiten
  • Frank Beckmann Oktober 2017
    Ja lass mal schauen - vielleicht gibt es eine einfache Lösung für die Umsetzung.

    Gruß
    Frank
  • Frickler Oktober 2017
    Ich habe das Originalbild jetzt eingestellt
  • Frickler Oktober 2017
    kannst du mir bitte sagen, wie ich bei einem Objekt die Knoten zwei abgeschlossener und voneinander getrennter Bereiche verbinde?
  • Frank Beckmann Oktober 2017
    Kannst Du die Frage nochmal anders stellen? Oder einen Screenshot verlinken? Danke.


    Ich weiß gar nicht wohin the Reise mit den Fotos+Inkscape gehen soll. Brauchst Du überhaupt Vektorgrafiken zum Skalieren? Links in Graustufen automatisch nachgezeichnet, Mitte händisch nachgezeichnet, Rechts Originalfoto.

    Gruß
    Frank
    image
    Vespa.png
    743 x 401 - 319K
  • Frickler Oktober 2017
    Das sieht gut aus was du gemacht hast.

    Meine Idee ist es, saubere Kanten zu erzeugen, die unauffällig sind und nicht irgendeinen "Cartoon-Look" verursachen.

    Im Pixelsumpf sind viele Kanten durch die Interpretation des Kanten plug-ins von Gimp einfach kaputt geraten, bzw. die Flächen zu griselig.

    Irgendwie soll das ganze auch zukunftsträchtig sein, also skalierbar.
    Dann kann ich die vorhandenen Reste des Pixelmatschs weiter reduzieren und stellenweise hinzugeben als Fläche oder als Farbakzent. Ich schätze, das Pixelschärfe dann nebensächlich wird. 

    Anstatt über den Effekt "Pfade nachzeichnen" sollte ich die Kanten wohl selber zeichnen. Dein Ergebnis überzeugt mich!
    Ich weiss aber noch nicht wie das geht. Ich bin gerade in der Überarbeitung von vorhandenem. Das erschien mir für den Anfang leichter.

    Im Anhang sollte ein Screenshot sein. Ich kann wieder nicht hochladen. Kannst du mir bitte sagen, worauf ich achten muss, damit der Upload funktioniert?

    Edit: Ich habe Screenshot und alle neuen Ergebnisse wieder auf meiner Webseite eingestellt.
  • Frank Beckmann Oktober 2017
    Zum Screenshot: Du könntest die Zwei Enden sich überlappen lassen und mit->Pfad->Vereinigen zu einem machen.

    Gruß
    Frank
  • Frickler Oktober 2017
    Hallo Frank,
    Danke für deine Vorlage!

    Ich weiss jetzt, das es von Hand nachgezeichnete Kanten werden sollen und versuche das gerade in Inkscape  mit Bezier Kurven nachzuzeichnen.
  • Frickler Oktober 2017
    Ich habe jetzt ein neues Bild angefangen und dort einmal einen "geschlossenen Rahmen" durch "Bezier-Kurven" zeichnen erstellt und dann darin "Freihand-Linien" gezeichnet, deren Endpunkte ich dann an den Rahmen Pfad "angebunden" habe.

    Soweit so gut. Fühlt sich aber sehr laienhaft an.

    Leider kann ich die Farbe der Linien jetzt nicht mehr verändern. Es wird immer die Fläche gefüllt
  • Frank Beckmann Oktober 2017
    Ich habe (fast) alle SVG-Editoren am Mac außer dem überteuerten Adobe-Zeug und komme immer wieder zu Inkscape zurück. Leider kann ich von dort aus nicht drucken (weiß nicht woran es liegt) und muss immer über PDF gehen, was nicht immer so ein toller Workflow ist. ;-)

    Gruß
    Frank
  • Frickler Oktober 2017
    Die erste eigene Zeichnung ist jetzt fertig. Es handelt sich um die Vespa PK 50 Automatik auf der Startseite.
    Die Vespa V50 oben links ist noch über Kantenerkennung automatisch nachgezeichnet. Die Pfade (richtiger Begriff?) sind dadurch zweiseitig, während meine selbst gezeichneten Pfade einseitig sind.
  • Frank Beckmann Oktober 2017
    Wo ist Deine Version zu sehen?

    Gruß
    Frank
  • Frickler Oktober 2017
    schon eingebunden auf der Startseite

    Drück im Browser mal STRG + F5

    Das umgeht den Cache
  • Frank Beckmann Oktober 2017
    Ich finde nix was nach Inkscape aussieht. Cache leeren hat auch nix gebracht offensichtlich. 

  • Frickler Oktober 2017
    die ersten vier bilder auf der startseite sind schon die überarbeiteten
  • Moini Oktober 2017
    Die Hauptlinien sind hervorgehoben, die gräulichen Schattierungen sind noch da. Ich sehe einen Unterschied (finde die Bilder allerdings jetzt auch nicht viel attraktiver, aber das ist ja Geschmackssache).
  • Frickler Oktober 2017
    Vielen Dank für dein Feedback.

    Ich habe einen für mich großen Lernzuwachs erlebt.
    Das Ergebnis hat sich aus meiner Sicht deutlich verbessert.

    Hast du einen Vorschlag wie ich das insgesamt ansprechend gestalten kann?
  • Moini November 2017
    Der Hover-Effekt ist ganz cool. Ich kann mit dem schmutzig-grau nicht soviel anfangen, und die winzige Größe und die Pixeligkeit, die trotzdem da ist, stören mich. Außerdem habe ich als Nicht-Fachmann Schwierigkeiten, zu erkennen, was das auf den Bildern eigentlich ist. Mit farbigen Fotos oder Cliparts von kompletten Rollern könnte ich vermutlich mehr anfangen.

    Den gräulichen Schatten, der sich beim Hovern ausdehnt, würde ich eher in schwarz-transparent umwandeln, damit das nicht so merkwürdig aussieht, wenn er sich über die Bildunterschrift legt.
  • Frickler November 2017
    Hi!

    [quote]Der Hover-Effekt ist ganz cool.[/quote]
    Freut mich :)

    [quote]Ich kann mit dem schmutzig-grau nicht soviel anfangen, und die winzige Größe und die Pixeligkeit, die trotzdem da ist, stören mich.[/quote]
    Kann ich nachvollziehen. Das ermöglicht mir, Bilder aus verschiedensten Situationen, mit verschiedenen Hintergründen und Lichtsituationen so zu überarbeiten, dass sie alle "gleich scheiße" aussehen. An dem nicht ganz so scheiße bin ich gerade dran.
    Die Größe ist ein "Problem", das durch die Umstellung auf Responsive Design entstanden ist. Davor war das ein ordentliches Verhältnis von Seite zu Bild. Ich habe für Mobilnutzer ein eigenes Template eingerichtet.

    [quote]Außerdem habe ich als Nicht-Fachmann Schwierigkeiten, zu erkennen, was das auf den Bildern eigentlich ist. Mit farbigen Fotos oder Cliparts von kompletten Rollern könnte ich vermutlich mehr anfangen.[/quote]
    Als Besitzer eines dieser Fahrzeuge sollte es aber recht eindeutig sein. Es ist eine recht kleine Nische ausschließlich für Zweitakt Vespa Roller mit Handschaltung und bestimmter Baujahre. 

    [quote]Den gräulichen Schatten, der sich beim Hovern ausdehnt, würde ich eher in schwarz-transparent umwandeln, damit das nicht so merkwürdig aussieht, wenn er sich über die Bildunterschrift legt.[/quote]
    Das versuch ich mal. Danke für den Tipp!
Kommentieren

Hey Fremder!

Sieht so aus als wenn du neu hier bist. Wenn du mitmachen willst, drücke einen dieser Buttons!

Anmelden Registrieren

Kategorien

In dieser Diskussion

Links

Inkscape
Links
Communities
Gimp
Scribus