Kategorien
(Kostenlose) Services Bilder & Vektorgrafiken bearbeiten Design E-Business Essentials Social Media Sonstige Programme Webdesign

Design mit Spark, Canva, Crello: So erstellst du perfekte Bilder für deine Website

Es ist schon erstaunlich, aber wahr. Für die Erstellung plakativer Bildkompositionen für deine sozialen Medien, deine Website und sogar deine sonstigen Kommunikationsmittel musst du nicht unbedingt Geld ausgeben. Mit Spark, Crello und Canva buhlen gleich drei kostenlose Dienste um deine Gunst. Wie du mit den drei Alternativen jeweils zum Ergebnis kommst, zeige ich dir folgend im Detail.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Freebies, Tools und Templates Photoshop Sonstige Programme

Beiwerk: Dutzende hochwertiger Texturen für deine Projekte

Texturen sorgen in einer Bildbearbeitung wie etwa Photoshop oder einer Software wie Cinema 4D schnell für ein Stück Realität. Dabei werden ganz unterschiedliche Oberflächen, wie etwa Stein-, Rost, Holz- oder Metallstrukturen benötigt. Ich habe haufenweise hochwertige Texturen zusammengestellt, die oft mit weiteren Dateien in einem Paket verpackt sind. So bekommst du mit einem Download gleich mehrere Texturen zu einem Thema.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Lightroom: Bessere Fotos mit diesen sieben Profi-Tipps

Heute habe ich ein paar Tricks und Kniffe für den ambitionierten Einsteiger und fortgeschrittenen Anwender parat. Dabei geht es um dramatische Aufwertungen des Himmels, das selektive Fokussieren, einen Colorkey-Effekt sowie eine intelligente Schärfung.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Interface-Design: Die kostenlose App Lunacy will das Sketch für Windows sein

Die Icon-Schmiede von Icons8 bringen mit Lunacy eine kostenlose App für das Windows-Betriebssystem, die als Viewer für Sketch-Dateien gestartet ist, inzwischen aber auch einfache Bearbeitungen erledigen kann. Ich zeige dir, was das Tool leistet.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Illustrator Sonstige Programme

Adobe Illustrator: Die 14 besten Alternativen für Webdesigner

Vektoren gehört die Zukunft. Das ist gut, denn Pixel-Editoren waren im Webdesign ohnehin nur solange geeignet, wie uns nichts besseres zur Verfügung stand. Skalierbare Designs hingegen sind mit Vektor-Editoren wesentlich besser zu gestalten.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme UI/UX

Design: Adobe Xd ist dein Tool fürs Prototyping

Prototyping, das Erstellen eines ersten benutzbaren Modells einer Website oder App, muss vor allem eines sein: schnell. Das schnellste Tool für diesen Zweck ist Adobe Xd.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Essentials Freebies, Tools und Templates Sonstige Programme

Undraw: Moderne und kostenlose Illustrationen im SVG-Format

Illustrationen auf Websites entwickeln sich immer mehr zum Trend. Das gerade gestartete Projekt Undraw bietet dir eben solche kostenlos.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Essentials Freebies, Tools und Templates Sonstige Programme

Kostenloses UI-Kit Elements für Sketch beeindruckt

Wenn ein UI-Kit mit Interface-Elementen für die moderne Benutzeroberfläche kostenlos ist, ist das schon mal gut. Elements für Sketch ist zudem modern und umfangreich.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Essentials Freebies, Tools und Templates Icons & Fonts Sonstige Programme

Logos erstellen: Schnell, einfach, kostenlos mit DesignEvo

Logo-Editoren als Web-App können alles sein zwischen großartig und grottig. DesignEvo schlägt auf der Skala Richtung „großartig“ aus, wenn er auch nicht perfekt ist.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design News Sonstige Programme

Project Cloak entfernt unerwünschte Elemente aus Videos

Das Video ist ja ganz schön, aber noch schöner wäre es, wenn dein(e) Ex nicht mit drauf wäre? Adobes Project Cloak ist da das Richtige für dich.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Sonstige Programme Webdesign

Adobe Photoshop Elements 2018: Der Alltagshelfer für Fotoaufgaben wird immer besser

Adobe Photoshop Elements 2018 ist da und kommt mit einigen guten Argumenten für den spontanen Kauf. Wir sagen dir, welche das sind.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Sonstige Programme

Bilder freistellen: So geht’s

Das Freistellen von Bildern, respektive Bildelementen, ist eine Disziplin, die selbst erfahrene Bildbearbeiter ein ums andere Mal herausfordert. Deshalb ist es nützlich, sich der verschiedenen Wege bewusst zu sein und zum Nachschlagen bereit zu halten. Darum geht es in diesem Beitrag.

Bilder freistellen. Wenn diese beiden Worte im Zusammenhang ausgesprochen werden, kringeln sich mindestens bei unerfahrenen Mediengestaltern die Fußnägel nach oben. Dabei ist es eigentlich wie überall. Sobald du weißt wie, ist die Ausführung der Aufgabe eigentlich bloß Handwerk.

Alternative 1: Nutzung professioneller Freisteller-Services

Wo wir gerade beim Handwerk sind. Wenn du eine Handvoll Bilder freistellen musst, das aber ansonsten nicht zu deinem Tagesgeschäft gehört, kannst du dich natürlich ebenfalls intensiv mit den später vorgestellten Alternativen beschäftigen. Ob das allerdings Sinn ergibt, darf wohl bezweifelt werden.

Gleiches gilt, wenn das Freistellen zum Massengeschäft werden soll. Nehmen wir an, du hast einen Kunden, der Fotos aller seiner 5.000 Produkte freigestellt haben will. Ja, du kannst dich intensiv einarbeiten und wirst vielleicht nach dem dreihundertsten Bild gute Qualität in akzeptabler Zeit erreichen. Aber ob das Sinn ergibt, würde ich jedenfalls deutlich bezweifeln.

Denn für diesen Job gibt es verschiedene professionelle Dienstleister, die den lieben langen Tag nur Bilder freistellen. Wenn das Freistellen insofern zum Geschäftsmodell erhoben wird, dann gehen damit einige Vorteile einher.

Erstens wissen die Anbieter aufgrund ihrer zigtausendfachen Erfahrung ganz genau wie es geht. Sie haben professionelle Arbeitsabläufe entwickelt, die darauf ausgelegt sind, möglichst schnell möglichst perfekte Ergebnisse zu bringen. Das Software-Toolset ist heterogen. Denn natürlich kann man alle Freisteller mit Photoshop erzeugen, aber wenn es nicht sein muss, warum sollte man dann die ganz große Keule auspacken?

Zweitens ersparen sie dir nicht nur die Einarbeitung, die sich für dich eher nicht rechnen wird, wenn du nicht täglich Bilder freistellen musst. Vielmehr ersparen sie dir auch die Zeit, die du selber für das Freistellen einsetzen müsstest. Und wenn du jetzt bedenkst, dass Dienstleister schon ab 80 Eurocent pro Bild arbeiten, willst du da lange überlegen?

Um eine Form der Qualitätssicherung zu haben, würde ich dir empfehlen, nicht auf Fiverr oder andere vornehmlich asiatische Billiganbieter zu setzen. Ich konnte in der Vergangenheit mehr als einmal feststellen, dass meine Qualitätserwartung und der dortige Qualitätsanspruch sehr deutlich differieren.

Alternative 2: Photoshop

Wie gesagt, kannst du mit Photoshop den Job natürlich in jedem Falle erledigen. Schauen wir uns zwei Anwendungsfälle an. Zum einen das komplizierte Freistellen von Haaren und zum anderen die Brot- und Butter-Freistellung mit Hilfe von Pfaden.

Haare sind immer noch das Top-Thema, denn feinste Strukturen lassen die Farbe des alten Hintergrunds durchschimmern. Wir zeigen dir drei aktuelle Techniken, die du mit Photoshop CC 2017 einsetzen kannst, um dem Problem Herr zu werden.

Haare freistellen, Methode 1: Kanalberechnungen

Schritt 1: Körper freistellen

In diesem ersten Schritt geht es darum, alle anderen Bereiche auf klassische Art freizustellen. Für die Haare nutzt du dann eine eigene Methode. Kopiere die Hintergrundebene über Strg+J und blende die Hintergrundebene aus. Die Kopie erhält über Ebene > Ebenenmaske > Alle einblenden eine Maske.

Körper freistellen

In dieser arbeitest du zunächst mit dem Buntstift, schwarzer Vordergrundfarbe und einer größeren Werkzeugspitze, um das Model zunächst grob freizustellen. Aktiviere das Zoom-Werkzeug und rufe den Rand des Models groß auf. Tipp: Damit auch bei hohen Zoomstufen die Inhalte gut zu erkennen sind, kannst du über Ansicht > Anzeigen das Pixelraster deaktivieren.

Model freigestellt

Wer eine ruhige Hand hat, malt am Rand mit dem Pinsel und einer kleinen, nicht ganz so weichen Werkzeugspitze entlang. Für mich ist es leichter, mit dem Polygon-Lasso-Werkzeug zu arbeiten.

Die Hintergrundfarbe steht dabei auf Schwarz. Klick für Klick folgst du der Kontur des Models. Nach einem Abschnitt schließt du die Auswahl nach außen hin. Drücke die Entfernen-Taste, um den Bereich mit Schwarz zu füllen. Schritt für Schritt wird so das Model freigestellt. Die Haare dabei allerdings nur ganz grob.

Schritt für Schritt auswählen

Schritt 2: Kanalberechnungen

Kopiere die Hintergrundebene und blende sie ein. Gehe im Menü auf Bild > Kanalberechnungen. Ändere die Kanäle bei beiden Quellen auf Blau und aktiviere jeweils Umkehren. Entdecke beim Mischmodus die Füllmethode, welche die Haare sehr weiß, den Rest aber schwarz darstellt. Wichtig ist noch, ganz unten bei Ergebnis Auswahl zu aktivieren.

Kanalberechnungen

Nach dem Bestätigen gehst du im Ebenenbedienfeld auf den Button Ebenenmaske hinzufügen. Die Haare sind nun freigestellt. In Kombination mit der ersten Freistellung ergibt sich ein zufriedenstellendes Ergebnis, das allerdings noch optimiert werden kann.

Schritt 3: Ergebnis optimieren

Erstelle unterhalb der zwei Ebenen mit freigestellten Bildelementen eine neue Ebene, die du mit der Farbe des neuen Hintergrund füllst. Erst jetzt wird deutlich, wie gut (oder auch schlecht) du freigestellt hast.

Um das Ergebnis noch zu optimieren, wählst du die zwei freigestellten Ebenen bei gedrückter Strg-Taste aus und drückst Strg+G auf der Tastatur. Damit gruppierst du die Ebenen.

Farben angleichen

Erstelle eine neue Ebene darüber und gehe im Menü auf Ebene > Schnittmaske erstellen. Stelle den Modus dieser Ebene von Normal auf Farbe um. Aktiviere den Pinsel und nehme bei gehaltener I-Taste die neue Hintergrundfarbe auf.

Male dann über den Rand der Haare. Diese erhalten damit den Schein des neuen Hintergrunds. Reduziere bei Bedarf die Ebenendeckkraft.

Haare freistellen, Methode 2: Auswählen und maskieren

Schritt 1: Auswahl vorbereiten

Auswahl und maskieren reagiert auf Kontrastsprünge zum Hintergrund. Um die Erzeugung der Maske zu vereinfachen, kopierst du die Hintergrundebene über Strg+J. Gehe dann im Menü auf Filter > Scharfzeichnungsfilter > Unscharf maskieren.

Stelle die Stärke auf 500% und den Radius auf 1 Pixel oder höher ein. Dickere Haarstränge sollen sich so deutlicher vom Hintergrund trennen. Es folgt der Filter > Stilisierungsfilter > Ölfarbe. Stilisierung und Reinheit stehen auf 1, Skalierung und Borstendetails auf dem kleinsten Wert. Damit werden die Haare geglättet.

Auswahl vorbereiten

Schritt 2: Schnellauswahl

Aktiviere das Schnellauswahlwerkzeug und male über alle Bereiche des Models. In der Optionsleiste kannst du die Größe der Werkzeugspitze kontrollieren, die sich auch auf die Feinheit der Umsetzung auswirkt. Bei gedrückter Alt-Taste werden Bereiche von der Auswahl subtrahiert.

Dein Ziel ist es, das Model so genau es möglich ist auszuwählen. Auch die Haare sollten dabei schon halbwegs gut selektiert sein.

Schnellauswahl nutzen

Schritt 3: Auswahl verfeinern

Gehe im Ebenenbedienfeld auf Ebenenmaske hinzufügen. Ein Doppelklick auf die Maske ruft den Dialog Auswählen und maskieren auf. Auf der linken Seite ist vermutlich schon das Werkzeug Kante-verbessern-Pinsel aktiv.

Stelle in der Optionsleiste dessen Größe ein und male über die Haare. Dabei sollte der Hintergrund immer zu 70% mit übermalt werden, damit Photoshop diesen leichter erkennen kann. Bei gehaltener Alt-Taste können auch wieder Bereiche eingezeichnet werden.

Ebenenmaske bearbeiten

So näherst du dich dem perfekten Ergebnis. Auf der rechten Seite könntest du noch die Regler Weiche Kante und Kontrast zusammenspielen lassen. Nach dem Bestätigen über OK kopierst du die Hintergrundebene ein zweites Mal. Ziehe die erstellte Maske per Drag & Drop auf diese Kopie. Lösche dann die Ebene, die scharfgezeichnet und mit dem Ölfilter behandelt wurde.

Kontrast und Weiche Kante

Auswahl verfeinern

Du kannst das Ergebnis wieder kontrollieren, in dem du unterhalb der Freistellung eine Ebene mit einer neuen Farbe füllst. Auch wurden die feineren Haare wie oben beschrieben optimiert, also eine neue Ebene über der Freistellung angelegt, diese per Ebenenmaske an die Form angepasst und im Modus Farbe mit passenden Farben gemalt.

Haare freistellen, Methode 3: Techniken in Kombination

Schritt 1: Erst die Haare…

Zu Recht könntest du anmerken, dass Haare vor einfarbigen Hintergrund eher leicht freizustellen sind. Dabei werden Fotos doch auch in freier Wildbahn (statt im Studio mit entsprechenden Hintergrundsystem) aufgenommen.

Und da ist der Hintergrund sehr unruhig und das Model bildet ein Ganzes mit der Umgebung. Hier ist es ratsam, die Haare und den Körper weitaus stärker getrennt zu bearbeiten.

Vorher

Haare einzeln freistellen

Kopiere dazu die Hintergrundebene über Strg+J. Nutze Bild > Korrekturen > Helligkeit/ Kontrast, um die Haare weiter vom Hintergrund zu trennen. Es folgt Bild > Kanalberechnungen, wie oben beschrieben.

Bearbeite die Maske mit dem Pinsel und schwarzer Farbe, so dass nur die Haare sichtbar bleiben. Kopiere die Hintergrundebene ein zweites Mal und ziehe die Maske darauf. Lösche die Ebene mit den starken Kontrasten.

Schritt 2: …und dann der Rest

Der Körper wird ganz klassisch freigestellt, die Haare dabei nur grob. Das kann mit Hilfe des Schnellauswahlwerkzeuges erfolgen oder gleich in der Maske mit dem Polygon-Lasso-Werkzeug. In Kombination ergibt sich das freigestellte Bildelement.

Körper sauber freistellen

Schritt 3: Optimierung

Oft ist an den Rändern freigestellter Elemente der alte Hintergrund noch leicht zu sehen. Kopiere zur Optimierung die Ebene mit dem Körper. Ein Rechtsklick auf die Ebenenmaske und Ebenenmaske anwenden rechnet die Maske ein. Gehe im Ebenenbedienfeld über die Linie zwischen den Ebenen bei gehaltener Alt-Taste und klicke. Damit wurde eine Schnittmaske umgesetzt.

Optimierung der Freistellung

Aktiviere das Wischfinger-Werkzeug, stelle in der Optionsleiste eine Stärke von ca. 30% ein und ziehe Material vom Rand nach außen. Achte darauf keine Unschärfen einzuarbeiten. So werden unschöne Ränder mit passenden Inhalten überdeckt.

Freistellen mit Pfaden und dem Zeichenstift-Werkzeug

Vermeintlich schwieriger in der Handhabung, bietet das Freistellen mit dem Zeichenstift-Werkzeug doch zahlreiche Vorteile. Sehr exakte und feine Auswahlen sind damit möglich, doch gibt es Techniken im Einsatz, die wir verstehen sollten, bevor es so richtig los geht.

teaser-pfade-zum-freistellen

Zeichenstift-Übung #1: Gerade Linien

Aktiviere das Zeichenstift-Werkzeug (Tastenkürzel: P) und überprüfe, ob in der Optionsleiste Pfad, statt Form oder Pixel, ausgewählt ist. Etwas weiter rechts ist ein Zahnrad-Icon zu sehen. Hier aktivierst du Gummiband. So siehst du den Pfad während des Aufziehens als Vorschau. Gleich daneben aktivierst du Autom. hinzuf./löschen. So kann der Pfad später leichter optimiert werden. Der Einsatz des Zeichenstift-Werkzeuges ist einfach: Klicke in das Bild und etwas entfernt noch einmal. So zieht Photoshop dazwischen einen geraden Pfad auf.

pfade-zum-freistellen1

Zeichenstift-Übung #2: Kurven ziehen

Doch was ist, wenn ich eine Kurve nachzeichnen möchte? Muss ich dann wie beim Polygon-Lasso-Werkzeug dutzende Punkte setzen, um die Kurve (un)sauber abzubilden? Natürlich nicht, denn einer der größten Vorteile der Pfade sind saubere Kurven, die sich einfach aufziehen lassen.

Klicke dazu in das Bild und etwas entfernt noch einmal, wobei du nun aber die Maustaste gedrückt hältst. Ziehe den Mauszeiger in eine Richtung und die Kurve entsteht. Je länger die dabei aufgezogene Grifflinie wird, desto größer ist der Radius.

pfade-zum-freistellen2

Zeichenstift-Übung #3: Nach Kurve eine Gerade

Photoshop möchte nach einer Kurve unbedingt eine weitere aufziehen. Das ist nicht immer erwünscht, weshalb wir den zuletzt gesetzten Punkt neutralisieren müssen. Klicke dazu einfach den Punkt bei gedrückter Alt-Taste an. Jetzt können wieder gerade Linien gezogen werden. Durch das Drücken der Alt-Taste erhalten wir für den Moment die Möglichkeiten des Punkt-umwandeln-Werkzeuges, das also nicht extra für diesen Schritt aktiviert werden muss.

pfade-zum-freistellen3

Zeichenstift-Übung #4: Pfad korrigieren

Um einen falsch gesetzten Punkt zu optimieren, halte die Strg-Taste gedrückt. Du siehst den weiß gefüllten Pfeil des Direktauswahl-Werkzeuges. Dank des Tastenkürzels musst du dieses Werkzeug also nicht jedes Mal auswählen. Klicke einen Punkt an, halte die Maustaste gedrückt und ziehe den Punkt an die gewünschte Position.

Um eine Kurve zu verändern, klicke diese bei gedrückter Strg-Taste an, halte dann Strg- und Maustaste über dem Pfad gedrückt. Ziehe die Kurve in Form. Auch die Grifflinien könnten zur Optimierung versetzt werden. Wenn du willst, kannst du Sie aus einer Kurve jederzeit eine Ecke machen. Klicke dazu den Punkt bei gedrückter Alt-Taste an.

Um einen Abschnitt eines Pfades zu löschen, halte die Strg-Taste gedrückt und ziehe über dem Abschnitt ein Rechteck auf. Es werden die Punkte ausgewählt, die in diesem Abschnitt liegen. Drücke die Entfernen-Taste zum Löschen. Um einem Pfad weitere Punkte hinzuzufügen, klicke diesen einfach an gewünschter Stelle an. Um einen Punkt zu löschen, kann dieser auch angeklickt werden. Möchtest du einen noch offenen Pfad fortführen, so klicke den zuletzt gesetzten Punkt an.

pfade-zum-freistellen4

Zeichenstift-Übung #5: Auswahl eines Bildobjektes

Möchtest du nun ein Bildelement freistellen, so nutzt du das Zoom-Werkzeug, um einen Bildausschnitt vergrößert anzusehen. Setze an den Rand des Bildobjekts einen ersten Punkt, wobei dieser generell immer eher im Bildobjekt liegen sollte, als genau auf der Kante oder gar darüber hinaus (um so auch noch den alten Hintergrund mitzunehmen). Siehst du einen geraden Abschnitt, so setze den nächsten Punkt in entsprechender Entfernung.

pfade-zum-freistellen5

An kurvigen Abschnitten setzt du einen Punkt und ziehst dann, wie oben beschrieben, die Kurve als Pfad nach. Ist der Pfad geschlossen und hast du alle Optimierungen vorgenommen, kann daraus leicht eine Auswahl entstehen.

Zeichenstift-Übung #6: Pfad in Auswahl umwandeln

Der schnellste Weg vom geschlossenen Pfad hin zur Auswahl führt über das Tastenkürzel Strg + Eingabetaste. Die Ameisen laufen und der Pfad ist verschwunden. Eine weitere Option entdeckst du im Pfad-Bedienfeld, unten in der Buttonreihe als Schaltfläche Pfad als Auswahl laden. Interessant ist dort auch ein Klick mit der rechten Maustaste über dem Pfad. Wähle aus der Liste Auswahl erstellen aus. So hast du zusätzlich die Option, der Auswahl eine weiche Kante zu spendieren.

pfade-zum-freistellen6

Zeichenstift-Übung #7: Bildobjekt freistellen

Jetzt könntest du den Inhalt der Auswahl einfach über Strg + J auf eine neue Ebene kopieren. Somit wäre das Bildelement freigestellt. Jetzt müsstest du nur noch die Hintergrundebene ausblenden, um das auch im Dokument sehen zu können. Oder du klickst im Ebenenbedienfeld auf den Button Maske hinzufügen. Die Auswahl ist verschwunden und das Bild dank der Maske freigestellt. Zur Info: Die Ebene zeigt neben der Ebenenminiatur die Maskenminiatur, in der die Farbe Schwarz = unsichtbar und die Farbe Weiß = sichtbar bedeuten. Diese Maske könnte jetzt natürlich noch mit dem Pinsel optimiert werden.

pfade-zum-freistellen7

Lernt man die Techniken Schritt für Schritt, so sind auch Pfade über den Zeichenstift kein Problem mehr. Und anders als beim Polygon-Lasso schließt sich hier nichts aus Versehen, nur weil einmal zu schnell hintereinander geklickt wurde. Die Auswahl wird feiner und wir können zwischendurch auch mal ein anderes Werkzeug, wie etwa die Lupe, einsetzen, ohne gleich die Auswahl zu verlieren. Und selbst nach dem Speichern kann die Arbeit jederzeit optimiert und ergänzt werden.

Weiterführende Artikel zum Thema:

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Schritt für Schritt: Kreative Bildlooks in Adobe Lightroom umsetzen

Gönne deinen Aufnahmen einen coolen Bildlook wie aus Hollywood. Mit einfachen Einstellungen sorgt Lightroom dafür, normale Aufnahmen in inspirierende Meisterwerke zu verwandeln. So steuerst du die Bildwirkung auf den Betrachter. Du wirst staunen, was du alles aus deinen Fotos herausholen kannst!

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Responsive Design Sonstige Programme

Page Weight: Kostenlose Web-App untersucht deine Website auf Bild-Adipositas

Große Bilder verlangsamen den Aufbau deiner Website beim Besucher. Das ist soweit logisch. Dennoch machen sich viele Seitenbetreiber genau über diesen Umstand keine Gedanken. Das kostenlose Tool Page Weight hilft dir, grafische Fettsucht zu diagnostizieren und zu beheben.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Plugins Sonstige Programme WordPress

Bilder synchron halten mit der WordPress Real Media Library, WP/LR Sync und Adobe Lightroom

Bloggende Fotografen werden sich über eine Möglichkeit, Lightroom mit WordPress zu synchronisieren freuen. Wenn sich diese Option mit der Fähigkeit paart, auch alle übrigen Medien ungewohnt gut zu strukturieren, könnte sich Begeisterung entwickeln.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Affinity Designer will das perfekte Werkzeug für UI- und UX-Design sein

Affinity Designer hat sich in rasanter Geschwindigkeit den Ruf erarbeitet, das schnellste, geschmeidigste und präziseste Grafikdesignwerkzeug überhaupt zu sein.  Ein heiß begehrter Apple Design Award und Tausende von 5-Sterne-Bewertungen im Mac-App-Store legen eindrucksvoll Zeugnis darüber ab.

Man kann mit Fug und Recht sagen, dass sich Affinity Designer als revolutionär für alle Kreativen, die an Branding, Icons, Illustrationen, Concept Art und Print-Projekten. arbeiten, erwiesen hat. Mit den neuesten Features der Version 1.5 will Designer nun auch in die Bereiche UI-, UX- und Web-Design vordringen.

Diese 15 Gründe sprechen dafür:

The perfect tool for UI and UX design

1. Ein Komplettpaket

Affinity Designer ist ein professionelles Komplettpaket für grafische Designs und kein spezialisiertes Tool für eine einzelne Aufgabe. Insofern hat es den Anspruch, alle Werkzeuge für die professionelle Erstellung einer Benutzeroberfläche – von intialen Konzepten bis zur Produktion jedes einzelnen Elements  des letztendlichen Ergebnisses – an Bord zu haben.

The complete package

Voll ausgestattet

Alle Tools, die du von einer professionellen Vektor-Design-App erwartest, sind nicht nur da, sondern wurden auch behutsam gestaltet und sorgsam durchdacht für Designer wie dich.

Schnell

Alle deine Arbeitsschritte, seien es Anpassungen, Effekte, Transformationen oder Pinsel, werden in Echtzeit umgesetzt. Pan & Zoom arbeitet mit bis zu 60fps (Frames pro Sekunde), egal wie groß das Projekt ist.

Detailverliebt

Affinity Designer verfügt über die erstaunliche Fähigkeit, um mehr als eine Million Prozent in deine Arbeit einzuzoomen und bietet dann immer noch absolute Präzision in der Bearbeitung.

Kompatibel

Designer arbeitet mit jedem Farbraum, bietet die beste PSD-Importfunktion und unterstützt die Formate SVG, EPS, PDF, PDF/X und FH vollständig.

2. Symbole auf das nächste Level gehoben

Seit v1.5 erlaubt das Symbols-Feature mehrere Instanzen  des gleichen Objekts, wobei das Editieren eines Objekts sich auf alle anderen Instanzen direkt mit auswirkt. So änderst du Piktogramme wie Textbausteine. Das ist aber noch nicht alles – Affinity Designer bietet insgesamt eine komplette Lösung für die Erstellung und das Management deiner Symbolsätze.

Nested Symbols

Verschachtelte Symbole

Mit verschachtelten Symbolen kannst du komplexe Designs dadurch erstellen, dass du eine unbegrenzte Zahl von Ebenen innerhalb einer Ebene verwendest. Dabei bleibt der Workflow trotz aller Komplexität überschaubar und einfach.

In place, real time editing

Echtzeit-Bearbeitung an Ort und Stelle

Die Bearbeitung erfolgt an der Stelle im Design, an der sich das Element befindet. Updates erfolgen unverzüglich, sogar in Echtzeit über alle Versionen. Wenn du also etwa für mehrere Geräte gestaltest, kannst du direkt alle neuen Versionen sehen, wenn du eine bearbeitet hast.

Unlimited versions

Unbegrenzte Anzahl an Versionen

Wenn du einzelne Instanzen deiner Symbole nicht über die eben beschriebene Funktion synchronisieren willst, kannst du sie einfach abkoppeln und dann als indivisuelle Instanz separat bearbeiten. Dabei kannst du entscheiden, welche Eigenschaften nicht synchronisiert werden sollen, seien es Farben, Text, Formen, Größe, Strichstärke oder Effekt – du behältst die volle Kontrolle über die Optik.

3. Designs mit Reaktionsvermögen

Das neue Constraints-Feature erlaubt es dir, die Position oder Größe eines Objekts relativ zu seinem umgebenden Container festzulegen. So erreichst du pseudo-responsive Elemente, die du auf einfache Weise wiederverwenden kannst.

Wenn du für verschiedene Geräte oder ganz responsiv arbeitest, wirst du dieses Feature bald als unverzichtbar ansehen.

Designs that respond example - Before
Designs that respond example - After

4. Auch perfekt für Pixel

Ein herausstechendes Feature von Affinity Designer besteht darin, dass es in der Lage ist, nahtlos mit Vektoren und Pixeln innerhalb des selben Dokuments zu arbeiten. Auf diese Weise entfällt der bisweilen frustrierende Wechsel zwischen verschiedenen Apps.

Comprehensive pixel editing tools

Umfangreiche Tools fürs Pixel-Editing

Die Pixel-Persona ermöglicht dir, mittels eines einfachen Klicks auf Pixel-Editing umzuschalten und bietet eine verblüffende Vielfalt an Auswahl-Werkzeugen und Pinseln.

Real time pixel preview

Echtzeit-Pixel-Vorschau

Damit alles passt, kannst du deine Designs in Echtzeit in einer pixelorientierten Preview anzeigen lassen. So kannst du deine Vektoren umgesetzt in normaler und Retina-Auflösung begutachten, und beurteilen, wie dein Design nach dem Export aussehen wird.

5. Erstaunliche Effekte

Affinity Designers nicht-destruktive Arbeitsweise lässt dich deine UI-Elemente verfeinern und mit vielerlei Filtern und Effekten bearbeiten, darunter Weichzeichner, Glow-Effekte und Schlagschatten. Du kannst jede beliebige Kombination von Effekten, Füllungen und Strichstärken als Style speichern, um sie so einfach auf andere Objekte anzuwenden.

Amazing effects

6. Totale Präzision

Die volle Kontrolle über das Grid mit seiner Einrastfunktion ist eines der Features, das Designer-Nutzer immer wieder begeistert.

Ausrichtungen lassen sich sehr leicht über anpassbare Grids erledigen. Mit v1.5 erfolgen Platzierungen jetzt in Echtzeit, so dass du ein Live-Feedback erhältst, mit dessen Hilfe du die Präzision deines Designs sicherstellen kannst.

Du kannst Affinity Designer so einstellen, dass sich Objekte immer zwingend pixelgenau am vorher eingerichteten Grid ausrichten. Das ist unschlagbar für Web- und UI-Designer. Einmal angelegte Grids mit den Einrast-Optionen lassen sich speichern und immer wieder verwenden.

Total precision example - After

7. Fortgeschrittene Typografie

Ob du nur einen auffälligen Font für eine Überschrift suchst oder Text um eine Form laufen lassen willst, Affinity Designer hilft dir mit professionellen Typografie-Tools. Dabei hast du die volle Kontrolle über typografische Aspekte wie Kerning und andere. Auch an dieser Stelle lassen sich alle Einstellungen speichern und auf anderen Elementen erneut einsetzen.

Advanced typography

8. Inventar-Management

Affinity Designers neues Inventarmanagement ist ein weiterer Aspekt, der den Workflow vereinfacht. Simpler könnte es nicht sein. Du bewegst schlicht Elemente, die du häufiger benötigst per Drag und Drop rein oder raus aus dem Inventar-Panel. Du kannst ausgewachsene Galerien erstellen und in eigenen Ordnern verwalten. Alle Elemente sind so auf jeden Fall zur Hand, wenn du sie brauchst, und das sogar projektübergreifend.

Asset management

9. Große Dokumente verzögerungsfrei

Affinity Designer verfügt über ein sehr fortschrittliches Speichermanagement. Egal, ob du an einem großen Retina-Mockup oder einem Projekt mit Hunderten von Zeichenflächen arbeitest, du wirst keine Verzögerungen bemerken. Alle Bearbeitungen erfolgen in Echtzeit.

Huge documents, zero lag example - Before
Huge documents, zero lag example - After

10. Kompromissloser Export

Unsere dedizierte Export-Persona bietet dir alles, was du brauchst, um deine Werke zu exportieren. Es gibt kaum einen einfacheren Weg, alle deine Elemente in diversen Größen, Auflösungen und Formaten zu exportieren – ideal, wenn du für unterschiedliche Geräte gestaltest. Mit v1.5 kannst du jetzt auch einzelne Export-Ordner definieren, um unterschiedliche Elemente für unterschiedliche Zwecke sauber zu sortieren. Diese Einstellung wirkt dann auch für  zukünftige Exports. Sogar Assets für Xcode und Spine JSON werden automatisch generiert.

Powerful export

11. Skizzenansicht

Je komplexer und farbiger deine Designs werden, desto wichtiger wird es, bei Bedarf auf Skizzenansicht umschalten zu können. So lassen sich vielfach einzelne Ebenen wesentlich leichter selektieren. Mit Designer kannst du die Skizzenansicht sogar als Split-Screen-Anwendung aktivieren.

Outline View

12. Eingebettete Dokumente im Kontext editieren

Es dürfte eines der beeindruckendsten Features sein, das Editieren eingebetteter Dokumente in Echtzeit.

Mit Version 1.5 kommt die häufig gewünschte Kontextbezogenheit bei eingebetteten Dokumenten hinzu. Es ist nunmehr möglich, direkt zwischen den einzelnen Screens oder Seiten zu wechseln und direkt visuell das Design zu beurteilen.Artboard-aware embedded document editing example - Before

13. Unbegrenztes Rückgängigmachen

Affinity Designer merkt sich alles. Du kannst bei Bedarf bis zu 8.000 Schritte rückgängig machen. Das gilt natürlich auch für die umgekehrte Form des Rückgängigmachens, also die Wiederholung eines Arbeitsschritts. Dadurch, dass die Historie mitgespeichert wird, kannst du sogar auf einem anderen Gerät oder in einer anderen Affinity-App darauf zugreifen.

Schnappschüsse sorgen dafür, dass deine Dokumente während der Arbeit immer wieder gespeichert werden, damit dich auch unerwartete Unterbrechungen nicht zurückwerfen.

14. Kostenloses UI-Kit im Wert von 58 USD geschenkt

Sergey Azovskiys großartiges Grade UI-Kit bekommst du beim Kauf des Affinity Designer kostenlos dazu. Mit 10 Kategorien, 100+ Icons und der erstaunlichen Zahl von 1000+ Elementen ist dieses UI-Kit etwas, das du dir nicht entgehen lassen solltest. Falls du es noch nicht bemerkt hast, der Wert des UI-Kit übersteigt den Preis der eigentlichen App!

Free UI kit worth $58

15. Kein Abo, nur einmalig 49,99 Euro

Dein Kauf von Affinity Designer ist nicht mit einem Abo verbunden. Du zahlst nur einmal und erhältst trotzdem alle künftigen Updates.

AFFINITY DESIGNER

Professionelle Grafik-Design-Software

Kaufe die Mac-Version | Kaufe die Windows-Version