Kategorien
(Kostenlose) Services Bilder & Vektorgrafiken bearbeiten Design Essentials Sonstige Programme

Schnelle Bild-Overlays mit Cloudinary

Bei Bild-Overlays geht es nicht nur darum, das richtige Fingerspitzengefühl zu haben, um ein großartiges Bild zu erstellen. Du brauchst auch ein großartiges Tool, das den Prozess erleichtert. Cloudinary, ein Cloud-basierter Bild- und Videoservice für Websites und mobile Anwendungen, ist genau das Werkzeug, das dir an dieser Stelle hilft.

Wie man Bilder überlagert

Als erstes, lege dir einen kostenlosen Cloudinary-Account an, sofern du noch keinen hast. Dann kannst du entweder über die Cloudinary Management-Konsole, oder per API Bilder hochladen. Wenn ein Bild in deinen Cloudinary-Account geladen wird, speicherst du es automatisch auch in der Cloud.

Um ein Overlay zu erstellen, musst du lediglich definieren, wie du das ursprüngliche Bild innerhalb der entsprechenden URL verändern möchtest. Anhand der Anweisungen, die zur URL hinzugefügt werden, wird in Echtzeit ein neues, abgeleitetes Bild verarbeitet und zwischengespeichert. Das Ergebnis wird unverzüglich via Content Delivery Network (CDN) ausgeliefert. Alle folgenden Anfragen an dieselbe URL werden vom Cache aus gestellt.

Hier zeigen wir dir, wie man ein Firmenlogo auf einen Koala legt. Zugegebenermaßen dürfte diese Kombination eher selten vorkommen, die Aufgabe an sich aber durchaus häufig. Mit Cloudinary ist sie einfach. Die ursprüngliche URL des Koala-Bildes lautet:

https://res.cloudinary.com/cld-name/koala.jpg

Die Overlay-URL ist:

https://res.cloudinary.com/cld-name/l_cloudinary_icon,w_200,c_scale/koala.jpg

Die URL-Struktur ist:

<domain name>/<cloud  name>/<image manipulation parameters>/<image  public-id>.<image format>

Das Overlay wurde erstellt, indem die folgenden Parameter zur URL hinzugefügt wurden:

  • l_<overlay_public_id>
  • w_<width>
  • c_<crop_method>

Für exakte Eindrücke rufe auch die Bild URLs in den Beispielen auf und teste sie.

Die Bild-URL mit JavaScript bauen

Du kannst die Bild-URL selbst erstellen, oder eine von Cloudinarys SDK-Bibliotheken dazu nutzen. In den folgenden Beispielen werde ich die Kern-JavaScript-Bibliothek nutzen, also pures JavaScript. Es gibt auch ein JQuery-Plugin.

Als erstes musst du die JavaScript-Quelle einschließen, welche du vom Cloudinary-Core-Projekt auf Github herunterladen kannst.

<script src="<path>/cloudinary-core-shrinkwrap.js"  type="text/javascript"></script>

Als nächstes fügst du deinen Account-Cloud-Namen zum Code hinzu. Der Account-Name wird bei der Registrierung bei Cloudinary festgelegt. Im folgenden Beispiel ist der Cloud Name “cld-name.”

var cl = cloudinary.Cloudinary.new({cloud_name: "cld-name"});

Jetzt werde ich die hier erstellte cl-Variable nutzen, um alle Cloudinary-Methoden abzurufen. Wenn du JQuery bevorzugst, kannst du das entsprechende Plugin hier finden.

Das ist der JavaScript-Call für die Bild-URL mit Overlay:

cl.url("koala", { overlay: "cloudinary_icon", width: 200, crop: "scale" });

Die benutzten Parameter sind die image public_id, hier „koala“ und die image overlay public_id, also „cloudinary_icon“. In beiden Fällen steht public_id für den Namen des Bildes in der Cloudinary-Medienbibliothek. Der nächste Parameter ist width = 200 pixels, welcher benutzt wird, um das Overlay-Bild auf eine Breite von 200 Pixeln zu skalieren. Die ausgewählte „scale“ Option skaliert das Bild auf die gewünschte Breite, ohne das ursprüngliche Seitenverhältnis zu verändern. Das Ergebnis dieses Calls ist die Overlay-Bild-URL, wie ich bereits demonstriert habe.

Wasserzeichen erstellen

Ein häufiger Anwendungsfall für Bild-Overlays ist das Hinzufügen eines Wasserzeichens. Das ist ein gängiger Weg, Bilder online (urheberrechtlich) zu schützen. Unser Ausgangsbild hat unser Icon schon, aber vielleicht bevorzugst du eine subtilere Darstellung, wie zum Beispiel in Form eines Wasserzeichens. Hier sind die dafür benötigten Parameter:

  • Die Dimensionen des Overlays sind durch width definiert, während crop den Ausschnitt festlegt.
  • Die Platzierung des Overlays ist durch „gravity“ definiert
  • Die folgenden visuellen Effekte wurden auf das Overlay angewandt: opacity (Deckkraft) und brightness (Helligkeit)
cl.url("koala", { overlay: "cloudinary_icon", width: 200, crop: "scale", gravity: "south_east", opacity: 50, effect: "brightness:200"});

Bild URL:

https://res.cloudinary.com/cld-name/image/upload/l_cloudinary_icon,w_200,c_scale,g_south_east,o_50,e_brightness:200/koala.jpg

Dynamische Text-Overlays

Das Erstellen von dynamischen Text-Overlays öffnet eine neue Welt der Möglichkeiten. Damit ist es sehr einfach, Banner mit den neuesten Angeboten und Werbung aufzufrischen. Google Fonts werden standardmäßig unterstützt, aber du kannst auch eigene Schriften auf deinen Account laden. Das ist nützlich, wenn du zum Beispiel einen besonderen Ausverkauf bewerben möchtest, der nur heute stattfindet.

cl.url("bag", { transformation: [
  {overlay: "text:roboto_60:EXTRA%2010%25%20OFF", color: "white", y: 110}, 
{overlay: "text:roboto_60:SALE%20ENDS%20TODAY", color: "white", y: 200}]});

Image-URL: https://res.cloudinary.com/cld-name/image/upload/l_text:roboto_60:EXTRA 10%25 OFF,co_white,y_110/l_text:roboto_60:SALE ENDS TODAY,co_white,y_200/bag.jpg

Benutzerdefinierte Text-Overlays

Text-Overlays können auch individualisiert werden. Es ist möglich, den Text in deinem Code spontan zu ersetzen, indem du die Informationen nutzt, die in einem Cookie gespeichert wurden. So könntest du jedem Nutzer einen individuellen Text anzuzeigen, der auf Websites basiert, die dieser Nutzer zuvor aufgerufen hat. Um sicher zu gehen, dass der Text auf jeder Hintergrundfarbe sichtbar ist, empfiehlt es sich, eine umrandete Schriftart auszuwählen.

cl.url("gift", {  overlay: " text:arial_80_stroke:Happy%20Birthday%20John", color: "white", gravity: "north", y: 5, border: "2px_solid_black"});

https://res.cloudinary.com/cld-name/image/upload/l_text:arial_80_stroke:Happy Birthday John,co_white,bo_2px_solid_black,g_north,y_5/gift.jpg

Ebenso kannst du sie einbinden, indem du den Cloudinary-Cookie als Parameter in der Bild-URL verwendest. Du brauchst dazu deinen eigenen CName, vergeben durch Cloudinary. Dann würde die URL wie folgt aussehen:

http://CNAME/l_text:arial_80_stroke:__cld_attribute1__,co_white,bo_2px_solid_black,g_north,y_5/ gift.jpg

Der auf dem Bild angezeigte Text ist der Wert des Cookies __cld_attribute1__

Profilbilder aus sozialen Netzen überlagern

Mit Cloudinary ist es auch möglich, dein Profilbild aus sozialen Netzwerken (Facebook, Twitter, Instagram, Google+) zu nehmen und es als Basis für ein Overlay-Bild zu verwenden.

cl.url ("KermitTheFrog", { type: "twitter_name", transformation: [ 
  { width: 150, crop: "scale"} , 
  { overlay: "instagram_name:realmisspiggy",  width: 150, crop: "scale", x: 150 },
{ border: "3px_solid_black"}]});

https://res.cloudinary.com/cld-name/image/twitter_name/w_150,c_scale/l_instagram_name:realmisspiggy,w_150,x_150/bo_3px_solid_black/KermitTheFrog.jpg

Gesichtserkennungs-basiertes Overlay

Um ein cooles Overlay auf Basis der Gesichtserkennung zu erschaffen, ist es hilfreich, wenn das Gesicht möglichst prominent im Bild zu erkennen ist. Das gilt besonders, wenn du versuchst, den venezianischen Maskenkarneval nachzuahmen, wie unten zu sehen ist. Das Overlay wird automatisch auf den Augen platziert, die im Bild erkannt wurden.

cl.url("team.jpg", { transformation: [ 
  { width: 640, crop: "scale",  } , 
{ flags: "region_relative", gravity: "adv_eyes", overlay: "harlequinmask", width: 1.7 }]});

https://res.cloudinary.com/cld-name/image/upload/c_scale,w_640/l_harlequinmask,w_1.7,g_adv_eyes,fl_region_relative/team.jpg

Eine weitere Möglichkeit ist das automatische Verpixeln von Gesichtern.

cl.url("couple", { width: 640,  crop: "scale", effect: "pixelate_faces:10"});

https://res.cloudinary.com/cld-name/image/upload/w_640,c_scale,e_pixelate_faces:10/couple.jpg

Bild-Overlay auf Videos

Cloudinary unterstützt auch Videos. So kannst du dieselbe API für Interaktionen zwischen Bildern, animierten GIFs und Videos verwenden. Du bist in der Lage, ein animatiertes GIF aus mehreren Bildern zu bauen, ein Bild von einem GIF oder Video-Clip aufzunehmen und sogar ein Bild für eine bestimmte Zeitspanne über ein Video zu legen, wie unten zu sehen ist.

cl.video(  "run", } controls: true, poster: cl.url("run.jpg", {resource_type: "video"}), transformation: [  { overlay: "candy", width: 0.4, gravity: "south_west", start_offset: "5", end_offset: "7.5" }, { overlay: "candy", width: 0.4, gravity: "south_east", start_offset: "8", end_offset: "12", angle: "hflip"}]});

Fazit

In diesem Beitrag konnten wir dir nur die Spitze des Eisbergs zeigen. Cloudinary bietet eine weitaus längere Liste mit Manipulationsoptionen, welche du hier findest. Nahezu ebenso gewaltig sind die Möglichkeit für Videos. Außerdem kannst du Bilder für den Versand optimieren, indem du Funktionen wie automatisches Formatieren und automatische Qualität. verwendest.
Jetzt ist es an der Zeit, dass du hergehst und deine Website-Grafiken verbesserst. Viele Studien haben gezeigt, dass Millennials Bilder Texten sowieso vorziehen.

Disclaimer: Bei diesem Artikel handelt es sich um einen Sponsored Post aus dem Hause Cloudinary.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Offene Beta: Affinity Photo für Windows ist da

Bist du Windows-Nutzer? Dann solltest du dir auf jeden Fall die kostenlos verwendbare Betaversion von Affinity Photo herunterladen. Den designierten Photoshop-Killer gibt es nämlich ganz aktuell nicht mehr nur für macOS, sondern auch für das Betriebssystem aus Redmond.

photo-win-surface

Affinity Photo: Kostenlose Nutzung während der Beta-Phase

Im Juni hatte Serif, die Entwicklerschmiede hinter der Affinity-Reihe, angekündigt, das Fotobearbeitungs-Tool auch Windows-Nutzern bieten zu wollen. Seit gestern ist es soweit. Genau wie bei ihrem Illustrator-Wettbewerber Affinity Designer erfolgt der Launch im Rahmen einer Public Beta, für die sich jedermann kostenlos registrieren kann.

Der Download-Link wird unverzüglich per Mail versandt. Alles, was du tun musst, ist die 277 MB große Installationsdatei zu laden und auszuführen. Während der Beta-Phase ist die Nutzung kostenfrei. Aber auch nach Beendigung der Beta reißt Photo keine tiefen Löcher in dein Portemonnaie. Lediglich 49,99 Euro werden für die Vollversion einmalig aufgerufen. Ein Abo-Modell wie beim Konkurrenten Photoshop gibt es nicht. Laut Serif werden auch zukünftige Updates nach dem erstmaligen Kauf kostenlos abgegeben.

affinityphoto-landing

Affinity Photo: Feature-Identität der Plattform-Versionen

Laut Ashley Hewson, Chef von Serif, wurden die Affinity-Produkte von Beginn an so entwickelt, dass die zugrundeliegende Codebasis im Grunde plattformunabhängig ist, zumindest soweit es die Kernfunktionalitäten betrifft. Dadurch war es nicht nur möglich, das Featureset vollkommen identisch zu halten, auch die Dateikompatibilität ist zu 100% gegeben. Selbst das Nutzer-Interface weicht nur insoweit ab, als es sich systemtechnisch nicht vermeiden lässt.

Wo wir gerade beim Nutzerinterface sind; Affinity Photo spricht Deutsch, Englisch, Spanisch, Portugiesisch, Französisch, Italienisch, Japanisch und Chinesisch. Also, ich vermisse für meinen persönlichen Sprachbereich nichts ;-)

In meinem Kurztest startete Affinity Photo nicht nur rasant, sondern verhielt sich insgesamt überaus responsiv. Selbst das Öffnen mittelschwerer PSD-Dateien erfolgte nahezu verzögerungs-, aber vor allem völlig fehlerfrei. Wer sich in Photoshop zurechtfindet, wird auch in Photo nicht auf Probleme stoßen. Die Oberflächen ähneln sich doch sehr, vor allem die Werkzeugleiste birgt keine Überraschungen.

liquify

Affinity Photo für Windows mit Funktionsvorsprung

Obschon ich weiter oben behauptete, dass die Windows- und Mac-Version funktionsidentisch sind, so stimmt das doch nur perspektivisch. Denn aktuell bietet die Windows-Beta sogar mehr Features als das Mac-Produkt. Die Windows-Beta repräsentiert nämlich schon die Version 1.5, die erst noch für macOS veröffentlicht werden muss.

Zu den vorläufig exklusiven Features der Windows-Version zählen eine erweiterte Funktion zum Erstellen von HDR-Kompositionen, das sog. Focus-Stacking, eine Technik, um mehrere Bilder mit unterschiedlichem Fokus bei gleichem Motiv zu einem zu verbinden, die Einführung einer Stapelverarbeitung und die Möglichkeit, 360 Grad-Panoramen zu bearbeiten. Photoshopper werden bei dieser Aufzählung nur müde lächeln. Natürlich hat der Adobe-Bolide entsprechendes seit längerem im Gepäck, mit Ausnahme der Bearbeitungsfunktion für Kugelpanoramen, die allerdings auch eher wenig Breitenwirkung haben dürfte.

Das folgende Video führt in die Funktionen von Affinity Photo für Windows ein:

Fazit: Windows-Nutzer lassen sich die Gelegenheit nicht entgehen und laden sich die freie Beta herunter. Adobe-Kunden können wenigstens mal schauen, was der Wettbewerb so zu bieten hat. Wenn es nur um den Preis geht, kann die Entscheidung nur pro Affinity fallen, im professionellen Umfeld wird Affinity Photo meiner Meinung nach auf absehbare Zeit Adobe nicht in Bedrängnis bringen. Affinity Photo macht Fotobearbeitung allenfalls einer breiteren Zielgruppe zugänglich. Und das ist ja schon viel.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Vectr 1.0: Vektorgrafiken für jedermann

Vectr ist eine brandneue Grafiksoftware aus Taipei. Fast zwei Jahre arbeiteten die Gründer im Verborgenen am Release des ambitionierten Projekts. Vor zwei Tagen dann beendeten sie die Betaphase und entließen die Software in die freie Wildbahn.

vectr-pic01

Vectr: Plattformunabhängig, kostenlos, leistungsfähig

Vectr will nicht weniger sein als das Google Docs der Vektorbearbeitung und ein besserer Wettbewerber zu Inkscape. In der Tat ist das Featureset erstaunlich. Vectr kann als Web-App oder als downloadbare App für Mac OS, Windows und Linux verwendet werden. Die Funktionalität ist identisch. Die Web-App ist unter Chrome offline-fähig.

Derzeit arbeitet das Team daran, Integrationen mit Slack und WordPress zu erstellen. Damit kannst du in Slack visuell kommunizieren. In WordPress wirst du per Plugin sogar direkt Grafiken bearbeiten können.

Generell ist Vectr für jede Art von 2D-Grafik geeignet und darf somit durchaus auch zur Konkurrenz von Canva gerechnet werden, das wir dir hier vorstellten. Ähnlich wie Canva findest du in Vectr vordefinierte Layouts der großen sozialen Medien, die du nur noch mit Inhalten füllen musst. Allerdings ist Vectr weitaus leistungsfähiger als Canva, was in Anbetracht der Tatsache, dass es bislang komplett kostenfrei ist, schon beachtlich ist.

Anders als Canva richtet sich Vectr nicht bloß an die Fraktion der Präsentanten, Blogger und Social Medians. Vielmehr ist Vectr leistungsfähig genug, sogar komplexe Aufgabenstellungen zu lösen.

Vectrs UI kommt einem bekannt vor. (Illustration: Vectr)
Vectrs UI kommt einem bekannt vor. (Illustration: Vectr)

So ist etwa für das Webdesign besonders interessant, dass du Vectr-Grafiken direkt in deine Designs einbauen kannst. Wenn du sie dann mit Vectr bearbeitest, werden die Änderungen automatisch auf der Website, die die Grafik verwendet, aktualisiert. Praktisch, oder?

Wie du dir sicherlich schon gedacht hast, lässt der Name Rückschlüsse auf die verwendete Technologie zu. Vectr arbeitet vektor-, nicht pixelbasiert und ist insofern auf einer Linie mit Inkscape oder Illustrator.

Eines der fast fertig gestellten Kernfeatures des Produktes ist die Möglichkeit, in Teams gleichzeitig an den Grafiken zu arbeiten. Das soll, ganz ähnlich wie bei Google Docs, in Echtzeit funktionieren.

Vectr: Wo ist das Geschäftsmodell?

Vectr will dauerhaft kostenlos bleiben. Ob es in Zukunft kostenpflichtige Extras geben wird, ist derzeit nicht zu erkennen. Die erste Runde Seed-Funding konnte Vectr schon erfolgreich abschließen. Damit stellt sich die Frage nach dem Geschäftsmodell wohl eher früher als später.

Ein passendes Feature ist bereits in Planung. Es soll in Kürze einen Marktplatz geben, auf dem du Designs mit anderen teilen, verkaufen oder kaufen kannst. Der Marktplatz wird voll in den Editor integriert sein, so dass der Kaufprozess ohne Brüche während der Bearbeitung eines Projekts bei Bedarf durchlaufen werden kann.

Insgesamt ist das Team hinter Vectr äußerst ambitioniert, was du an der massiven Roadmap erkennst, die allein schon 55 in der Umsetzung teils anspruchsvolle Features listet, derer man sich in absehbarer Zeit annehmen will.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Sonstige Programme Tutorials

Turbowissen: 20 nützliche Sketch Tutorials für Einsteiger und Fortgeschrittene

Auch wenn Sketch für Grafikdesigner konzipiert ist, fällt es der Zielgruppe dennoch nicht so leicht, den Einstieg zu finden. Zu umfangreich ist das Featureset und zu wenig ähnlich ist das Tool anderen aus seiner Liga. Mit Sketch in die Gänge zu kommen, ist dementsprechend ebenso viel Arbeit wie der Einstieg in beliebige andere Funktionsboliden. Die probateste Methode, schnell zum Erfolg zu kommen, sind – wie immer – Tutorials, in unserem Falle Sketch Tutorials.

Tutorials erlauben, am lebenden Objekt zu üben und sich praxisbezogen fortzubilden. Alles, was du tun musst, ist, den detaillierten Anleitungen ebenso detailliert zu folgen. Du kannst gar nicht umhin, dir dabei bestimmte Vorgehensweisen zu merken und Grund- oder fortgeschrittene Kenntnisse zu erwerben. Unser heutiger Beitrag stellt dir 20 Sketch Tutorials vor, die teilweise den Anfänger, teilweise den Fortgeschrittenen ansprechen.

Titel: Designing for Apple Watch: Designing a Glance in Sketch

designing for apple watch
Erstellt von: Sven Lenaerts

Titel: Prototyping a Quotes App using Sketch and Flinto for Mac

prototyping an app
Erstellt von: Marcus Siegel

Titel: Sketch Workflow — Atomic Symbols

atomic symbols
Erstellt von: Anthony Collurafici

Titel: Exploring Dynamic Layout in Sketch

exploring dynamic layout
Erstellt von: Matej Hrescak

Titel: Sketch Tutorial: Colorful Switch

sketch tutorial
Erstellt von: Sebastien Gabriel

Titel: Pixel Density, Demystified

pixel density demystified
Erstellt von: Peter Nowell

Titel: Sketch App Tutorial Series: Part 1 of 5.

sketchapp tutorial
Erstellt von: Marc Andrew

Titel: Designing an iOS Fitness Application with Apple Watch Compatibility

designing an iOS app
Erstellt von: Daniel Korpai

Titel: Sketch for Beginners: Design a Bold Email Newsletter

designing a newsletter
Erstellt von: Armando Sotoca

Titel: Designing an eCommerce Portfolio: Timelapse

design an ecommerce portfolio
Erstellt von: Adi Purdila

Titel: Free Sketch 3 Tutorials

free sketch 3 tutorials
Erstellt von: learnsketch

Titel: Mastering the Bézier Curve in Sketch

mastering bezier curve
Erstellt von: Peter Nowell

Titel: Sketch Tricks

sketch tricks
Erstellt von: Peter Assentorp

Titel: How to use only rectangle,circle and line to draw illustration in Sketch

how to create an illustration
Erstellt von: Yuki_erqiudao

Titel: 5 Very Special, 10 Sketch Tips

5 special tips
Erstellt von: Emin Inanc Unlu

Titel: 5 Simple Steps To Perspective Mockups In Sketch

5 simple steps to perspective objects
Erstellt von: Marko Vuletic

Titel: Create a simple illustration of prescription bottle in Sketch

illustration in Sketch
Erstellt von: Abhijeet Wankhade

Titel: 5 Tips to Speed Up Your Workflow in Sketch

5 tips for speeding up workflow
Erstellt von: Tatyana Kuva

Titel: Creating Patterns in Sketch

creating patterns in Sketch
Erstellt von: Aaron Tenbuuren

Titel: How to: Draw a seaside scene in Sketch App.

how to draw a seaside
Erstellt von: insel.design

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Sonstige Programme

Photoshop Elements 14 #8: Ebenenmasken, Freisteller, Fotomontagen

Herzlich willkommen zum achten und letzten Teil unserer Serie hilfreicher Tutorials rund um die neue Version 14 des kleinen Bruders von Photoshop. Heute werden wir uns unter anderem mit Ebenenmasken beschäftigen. Gerade für das Webdesign reicht vielfach das wesentlich günstiger zu erwerbende Photoshop Elements 14 vollkommen aus. Wenn es um einfache Bildbearbeitung mit Assistentenunterstützung geht, ist Elements sogar empfehlenswerter als der große Bruder. Kurzum, für die meisten Seitenbetreiber in der Weite des Netzes wird Photoshop Elements 14 jedenfalls nicht zu wenig bieten. Verfolge unsere umfassende Serie und du wirst zum Master of the Elements.

Photoshop Elements 14 #8: Ebenenmasken, Freisteller, Fotomontagen

Da die Serie zu einem späteren Zeitpunkt auch als eBook verfügbar sein wird, haben wir für die Tutorials die formelle Anrede gewählt.  Wundere dich also nicht, wenn du im folgenden plötzlich wieder gesiezt wirst ;-)

Grundkurs: Photoshop Elements 14

Elements-Kurs Folge 8 | Ebenenmasken, Freisteller, Fotomontagen erzeugen und angleichen

Die hohe Kunst der Bildbearbeitung fängt mit dem professionellen Freistellen an, welches mit der Maskentechnik leicht möglich ist. Einmal freigestellte Bildelemente können mit anderen Fotos zu einer Collage oder realistischen Kompositionen zusammengefügt werden. Auch das Wissen um das Angleichen der unterschiedlichen Bildquellen unterscheidet den Anfänger vom Profi. Wir zeigen die Tricks auf.

Ebenenmasken

Professionelles Freistellen #1: Funktionsprinzip Ebenenmasken

Es ist nicht immer erwünscht, den kompletten Inhalt einer Ebene zu verwenden. Sie wollen vielleicht bestimmen, dass nur ein Bildelement daraus sichtbar bleibt, während der ganze Rest transparent, also unsichtbar wird. Photoshop Elements bietet Ihnen dazu eine Maskierungstechnik an. Auf den Pixel genau können Sie damit bestimmen, was sichtbar und was unsichtbar ist. Zur Vorbereitung gehen Sie im Menü auf Ebene > Ebenenmaske > Nichts maskiert.

Ebenenmasken

Wo sehe ich die Maske?

Schauen Sie in das Ebenenbedienfeld, so werden Sie sehen, dass der Ebene eine Maske zugeordnet wurde. Unser Ziel ist es, Bereiche als sichtbar oder unsichtbar zu definieren. Adobe hat sich gedacht, dass diese Zustände der Sichtbarkeit über die Farben Weiß (100% Sichtbarkeit) und Schwarz (0% Sichtbarkeit) gelöst werden können, natürlich nur innerhalb der Maske (denn: malen Sie mit den genannten Farben im Bild, so wird dieses auch wirklich angemalt, was natürlich nicht erwünscht ist).

Ebenenmasken

Wechsel: Maske auf Ebeneninhalt und zurück

Die Maske ist gerade aktiv, was mit einem Rahmen angezeigt wird. Möchten Sie den Inhalt der Ebene bearbeiten, so aktivieren Sie diesen durch einen Doppelklick auf die Ebenenminiatur. Ein Klick auf die Maskenminiatur aktiviert dann wieder die Maske.

Ebenenmasken

Professionelles Freistellen #2: Bildelemente freistellen

Um nun ein Bildelement freizustellen, sollten Sie dieses zunächst grob bearbeiten. Arbeiten Sie mit dem Buntstift, schwarzer Farbe und einer mittleren Werkzeugspitze und umfahren Sie das gewünschte Objekt in der Maske. Dabei wird der Rand des Bildelements noch nicht berührt.

ps-elements8d

Feiner freigestellt

Rufen Sie einen Bereich am Rand des Elementes mit dem Zoom-Werkzeug groß auf und aktivieren Sie das Polygon-Lasso. Folgen Sie einem Stück der Kontur und schließen Sie die Auswahl nach außen hin. Drücken Sie bei schwarzer Hintergrundfarbe die Entfernentaste, um den Bereich auf Transparent zu setzen. So gehen Sie komplett um das Objekt herum.

ps-elements8e

Professionelles Freistellen #3: Bildelemente kombinieren

Nehmen wir an, ein Model soll freigestellt vor einem neuen Hintergrund positioniert werden. Dazu wählen Sie es mit dem Schnellauswahl-Werkzeug aus und gehen unten auf den Button Kante verbessern. Es öffnet sich ein Dialog-Fenster, in dem Sie zahlreiche Einstellungen in Bezug auf die Auswahl vornehmen können. Wir arbeiten mit dem Werkzeug weiter, das schon aktiv ist, und malen über den Rand der Haare. Nach dem Bestätigen wurde die Auswahl optimiert. Gehen Sie im Ebenenbedienfeld auf den Button Ebenenmaske hinzufügen.

ps-elements8f

Maske optimieren

Die Auswahl wurde in eine Maske verwandelt, die Sie nun weiter von Hand optimieren könnten, etwa mit dem Pinsel und schwarzer oder weißer Farbe, zum Entfernen oder wieder Hinzufügen von Bildabschnitten. Sind Sie zufrieden, so aktivieren Sie das Verschieben-Werkzeug, klicken in das Dokument, halten da die Maustaste gedrückt und ziehen das freigestellte Objekt in das Dokument mit dem Hintergrund, wo Sie die Maustaste lösen. Leicht kann das Bildelement jetzt noch positioniert oder skaliert werden.

ps-elements8g

Professionelles Freistellen #4: Bildelemente angleichen

Auch wenn Sie das Bildelement perfekt freigestellt haben, kann es vorkommen, dass dieses vor neuem Hintergrund nicht so recht passen mag. Oft reichen wenig Schritte aus, um das freigestellte Objekt anzugleichen. Falls noch nicht geschehen, klicken Sie die Ebenenminiatur (gleich neben der Maskenminiatur im Ebenenbedienfeld) doppelt an. Um die Farbtemperatur anzugleichen gehen Sie im Menü auf Filter > Anpassungsfilter > Fotofilter. Ist das freigestellte Element zu kühl, so wählen Sie einen Warmfilter aus, ist es zu gelb (im Vergleich zum Hintergrund), so wählen Sie entsprechend einen Kaltfilter.

ps-elements8h

Weiter anpassen

Neben den Farben gibt es weitere Bereiche, die oft Probleme machen. So könnten es die Kontraste sein, der Schärfegrad oder auch die aktuelle Lichtstimmung. So fallen bei dem Hintergrundbild etwa die Schatten eher zur linken Seite hin, während bei dem freigestellten Bildelement das Licht frontal auftrifft. Um diesen Umstand auszugleichen erstellen Sie eine neue Ebene, etwa über Umschalt+Strg+N. Nennen Sie die Ebene „Lichtstimmung“ und stellen Sie den Modus von Normal auf Ineinanderkopieren um. Aktivieren Sie auch Mit neutraler Farbe für Modus Ineinanderkopieren füllen.

ps-elements8i

Lichtstimmung angleichen

Nach dem Bestätigen sehen wir keine Änderung, da bei der Berechnungsmethode Ineinanderkopieren zwar dunkle Farben abdunkeln, helle weiter aufhellen, doch 50% Grau keine Auswirkungen hat und somit auch nicht sichtbar ist. Um nun die Lichtstimmung zu steuern arbeiten Sie mit dem Nachbelichter- und dem Abwedler-Werkzeug. Die neutralgraue Fläche wird damit heller oder dunkler umgesetzt, was sich im Dokument wie Licht oder Schatten auswirkt. So malen Sie die gewünschte Lichtsituation einfach ein.

ps-elements8j

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Sonstige Programme

Photoshop Elements 14 #7: Das Ebenenprinzip einsteigerfreundlich erklärt

Herzlich willkommen zu unserer Serie hilfreicher Tutorials rund um die neue Version 14 des kleinen Bruders von Photoshop. Gerade für das Webdesign reicht vielfach das wesentlich günstiger zu erwerbende Photoshop Elements 14 vollkommen aus. Wenn es um einfache Bildbearbeitung mit Assistentenunterstützung geht, ist Elements sogar empfehlenswerter als der große Bruder. Kurzum, für die meisten Seitenbetreiber in der Weite des Netzes wird Photoshop Elements 14 jedenfalls nicht zu wenig bieten. Verfolge unsere umfassende Serie und du wirst zum Master of the Elements.

Das Ebenenprinzip einsteigerfreundlich erklärt

Da die Serie zu einem späteren Zeitpunkt auch als eBook verfügbar sein wird, haben wir für die Tutorials die formelle Anrede gewählt.  Wundere dich also nicht, wenn du im folgenden plötzlich wieder gesiezt wirst ;-)

Grundkurs: Photoshop Elements 14

Elements-Kurs Folge 7 | Das Ebenenprinzip einsteigerfreundlich erklärt

Der Erfolg der Bildbearbeitung Photoshop und seiner Varianten basiert sehr stark auf der Idee der Ebenen. Statt mit nur einem Foto in einem Dokument zu arbeiten, liegen in diesem auf Wunsch nicht nur einige Fotos übereinander und ergeben so ein ganz neues Bild, sondern es könnten auch Formen, Text oder gar Einstellungen der Software abgelegt werden. Dazu bietet uns Elements ein eigenes Bedienfeld, dessen Optionen so vielfältig wie mächtig sind.

teaser-ps-elements7

Das Ebenenprinzip #1: Ebenen leicht erklärt

Bisher wurden Farben und Kontraste optimiert, auch schon im Detail. Und damit haben wir auf einer Ebene gearbeitet. Jedes Dokument besteht aus mindestens einer Ebene, der so genannten Hintergrundebene. Sie sehen diese am rechten Rand, sobald Sie ein Foto öffnen, mit „Hintergrund“ betitelt. (falls nicht, so gehen Sie bitte auf Fenster > Ebenen)

ps-elements7a

Weitere Ebene erzeugen

Gehen Sie im Menü auf Ebene > Neu > Ebene. Sie können der Ebene einen Namen geben und auch einige weitere Einstellungen vornehmen. Es reicht aber zunächst, den Vorgang über OK abzuschließen. Sie sehen am rechten Rand oberhalb der Ebene „Hintergrund“ nun eine „Ebene 1“. Aktivieren Sie den Pinsel aus der Werkzeugleiste und malen Sie mit einer beliebigen Farbe im Dokument einige Striche ein. Da Sie eine neue Ebene erzeugt haben, malen Sie nicht auf dem Foto, sondern auf einer leeren Ebene genau darüber.

Zum Beweis könnten Sie diese einmal kurz deaktivieren und dann auch gleich wieder aktivieren. Gehen Sie dazu im Ebenenbedienfeld an der rechten Seite auf das Augensymbol der „Ebene 1“ und klicken Sie dieses an. Die Ebene wurde ausgeblendet, die farbigen Striche sind nicht mehr zu sehen. Klicken Sie das Augensymbol ein zweites Mal an, so werden die Linien wieder sichtbar.

ps-elements7b

Ebenenprinzip dargestellt

Anhand der folgenden Grafik können Sie das Grundprinzip leichter verfolgen. Ebenen bauen sich zu einem Bild auf, wobei weiter oben liegende Ebenen darunter liegende überdecken. Sie sehen dazu in der rechten, unteren Ecke die einzelnen Ebenen des Bildes, das sich oben im Hintergrund als Ganzes zeigt. Die Grafik auf der linken Seite zeigt den Aufbau der Ebenen noch einmal anhand von Farben. Die braune Ebene 5 könnte etwa die Hintergrundebene sein, darüber liegen dann die weiteren Ebenen 1 bis 4, die jeweils mit einer anderen Farbe gefüllt wurden.

ps-elements7c

Das Ebenenprinzip #2: Deckkraft und Transparenz

Die „Ebene 1“ ist aktiv und blau hinterlegt. Sie sehen gleich oberhalb des Schriftzuges „Ebene 1“ die Deckkraft. Darüber steuern Sie die Sichtbarkeit einer Ebene. 100% bedeutet eine komplette Sichtbarkeit, bei einem Wert von 50% ist die Ebene halbdurchsichtig und bei 0% natürlich gar nicht mehr sichtbar. Bereiche, die eine Sichtbarkeit von 0% aufweisen, werden auch als transparent beschrieben.

ps-elements7d

Das Ebenenprinzip #3: Verschiedene Typen von Ebenen

Es gibt verschiedene Arten von Ebenen in Photoshop Elements 14. Zwei haben Sie schon kennengelernt: die Hintergrundebene, die sich von normalen Ebenen nur dadurch unterscheidet, dass sie fixiert und somit von Bewegungen ausgeschlossen ist, sowie normale Ebenen, wie halt die „Ebene 1“. Setzen Sie ein Text-Werkzeug ein, so entsteht eine Text-Ebene. Dabei bleibt der geschriebene Inhalt jederzeit editierbar. Übrigens: Ein Doppelklick auf die Ebenenminiatur wählt den kompletten Text schnell aus.

ps-elements7e

Weitere Ebenenarten

Auch bei den Form-Werkzeugen wie etwa dem Rechteck-Werkzeug wird eine besondere Ebene erzeugt. Hier sorgt ein Doppelklick für das Öffnen des Farbwählers, um schnell die Farbe der Form anzupassen.

ps-elements7f

Optimierungen als Ebene

Über das Menü und Ebene > Neue Einstellungsebene können Sie sogar einige der Korrekturen zum Überarbeiten im Ebenenbedienfeld ablegen. Nach dem Bestätigen stellen Sie die jeweilige Funktion nach Bedarf und wie gewohnt ein. Wir die Ebene später wieder durch Anklicken aktiviert, so können Sie die Einstellungen wieder editieren.

ps-elements7g

Farben als Ebene

Ebene > Neue Füllebene bietet noch die Option, Farben, Verläufe oder Flächen als Ebene abzulegen, die ebenso jederzeit editierbar bleibt.

ps-elements7h

Das Ebenenprinzip #4: Füllmethoden vorgestellt

Ihnen wird vielleicht schon im Ebenenbedienfeld (gleich neben der Deckkraft) der Eintrag „Normal“ aufgefallen sein. Dahinter verbergen sich zahlreiche Berechnungsmethoden, wie die aktuelle Ebene mit allen darunter liegenden verrechnet wird. Diese Methoden werden Füllmethoden oder auch Mischmodi genannt. Zum Kennenlernen bitte ich Sie, ein relativ helles Foto zu öffnen und einmal im Menü auf Ebene > Neu > Ebene durch Kopie zu klicken. Ändern Sie die Füllmethode dieser Ebene von Normal auf Multiplizieren ab. Sie werden erkennen, dass sich das Foto generell abgedunkelt hat.

ps-elements7i

Negativ multiplizieren

Öffnen Sie ein zu dunkles Foto, drücken Sie Strg+J auf Ihrer Tastatur (das entspricht Ebene > Neu > Ebene durch Kopie) und ändern Sie die Füllmethode auf Negativ multiplizieren ab. So wurde das Foto aufgehellt. Diese zwei Berechnungsmethoden beziehen sich also auf die Helligkeitswerte.

ps-elements7j

Ineinanderkopieren und Weiches Licht

Es gibt zwei weitere Füllmethode, die praktisch eine Kombination aus Multiplizieren und Negativ multiplizieren sind: Ineinanderkopieren und Weiches Licht. Dabei sorgen hellere Bereiche der Ebene für eine Aufhellung (wie bei Negativ multiplizieren) und dunkle Bereiche für eine Abdunkelung (wie bei Multiplizieren).

ps-elements7k

Das Ebenenprinzip #5: Reihenfolge anpassen oder löschen

Oft ergibt es Sinn, die Reihenfolge der Ebenen anzupassen. Wir haben gelernt, dass die jeweils obere Ebene die darunter liegende überdeckt. Um nun die Position einer Ebene zu verändern klicken Sie diese an, halten die Maustaste gedrückt und ziehen sie nach oben oder unten. Bei einer Hintergrundebene, die ja fixiert ist, müssen Sie diese Fixierung zunächst lösen, über einen Klick auf das Icon an der rechten Seite der Ebene.

ps-elements7l

Löschen und benennen

Um eine Ebene zu löschen, aktivieren Sie diese durch Anklicken (falls nicht schon geschehen) und drücken dann die Entfernen-Taste. Auch der Papierkorb als Symbol am oberen Rand des Ebenenbedienfeldes sorgt dafür. Übrigens können Sie einer Ebene auch einen weitaus aussagekräftigeren Namen geben: klicken Sie dazu den aktuellen Ebenennamen im Ebenenbedienfeld doppelt an.

ps-elements7m

Das Ebenenprinzip #6: Ebenenstile

Erstellen Sie eine neue Ebene, etwa über Umschalt+Strg+N (was Ebene > Neu > Ebene entspricht), und erstellen Sie mit dem Abgerundetes-Rechteck-Werkzeug eine Fläche. Gehen Sie im Menü auf Ebene > Ebenenstil > Stileinstellungen. Es öffnet sich ein Dialog-Fenster, in dem Sie einige Effekte für die aktuelle Ebene aktivieren können. Aktivieren Sie etwa einen Schlagschatten und eine Kontur. Nach dem Bestätigen werden Sie sehen, dass diese Effekte der Ebene zugeordnet wurden, was durch ein fx-Symbol dargestellt wird. Ein Doppelklick darauf öffnet wieder das entsprechende Dialog-Fenster.

ps-elements7n

(dpe)

Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung Sonstige Programme Webdesign

Adobe: Flash ist tot, es lebe Animate CC

Ende letzten Jahres wurde angekündigt, dass Anfang 2016 Schluss sein soll mit Adobe Flash. Zumindest der Name sollte aus der ehemals beliebten Anwendung verschwinden, die damit auch ihren Schwerpunkt auf andere, offene und zeitgemäße Formate verschieben soll. Jetzt hat Adobe Ernst gemacht und das Nachfolgeprodukt namens Animate CC an den Start gebracht. Wir haben es uns genauer angeschaut. Um es vorwegzunehmen: Flash ist nicht so richtig tot, es spielt nur keine große Rolle mehr.

Adobe: Flash ist tot, es lebe Animate CC

HTML5 Canvas und WebGL

Wer Flash CC tatsächlich noch installiert hatte, bei dem wird es sich mit einem Update automatisch verabschieden. Denn das alte Flash CC wird durch das neue Animate CC ersetzt. Aber um allzu große Veränderungen muss sich niemand Sorgen machen. Beim Öffnen von Animate CC stellst du schnell fest, dass das Allermeiste doch beim Alten geblieben ist: Die Bühne und Zeitleiste sind ebenso geblieben, wie die restlichen Arbeitsbereiche.

animate-cc_buehne-zeitleiste
Gewohnte Bereiche: Bühne und Zeitleiste

Auch die Dateiendung „.fla“ ist geblieben, um Projekte zu speichern. Die erste große Neuerung entdeckst du, wenn du ein neues Dokument anlegst. Beim Dokumenttyp werden dir noch vor verschiedenen ActionScript- und AIR-Dokumenten die beiden Formate HTML5 Canvas und WebGL vorgeschlagen – beides zeitgemäße Formate, die von allen modernen Browsern unterstützt werden.

animate-cc_neu
HTML5 Canvas und WebGL stehen nun im Mittelpunkt

Hast du dich für eines der Formate entschieden, legst du wie gewohnt los. Das Schöne am neuen Animate CC ist, dass (ehemalige) Flash-Entwickler sich schnell zurechtfinden, da sich ansonsten wenig geändert hat. Du kannst Grafiken und Texte auf der Bühne platzieren, Movieclips und Schaltflächen erstellen, Instanzen anlegen und Animationen auf die Zeitleiste bringen.

Auswahl der richtigen Scriptsprache: ActionScript oder JavaScript

Das Besondere an Flash war immer die eigene Programmiersprache ActionScript, mit der du Animationen steuern und Funktionen ausführen konntest. ActionScript steht dir weiterhin zur Verfügung. Aber mit den neuen Formaten HTML5 Canvas und WebGL ist vor allem JavaScript gefragt. Über das Aktionenfenster kümmerst du dich weiterhin um deine Programmierung – sei es in mit ActionScript oder JavaScript.

animate-cc_aktionen
ActionScript oder JavaScript für HTML5 Canvas und WebGL

Für viele oft genutzte Funktionen stellt dir Animate CC eine ganze Reihe von Codefragmenten zur Verfügung. Diese sind nun gegliedert in ActionScript, HTML5 Canvas und WebGL. Zu den Codefragmenten gehören Aktionen zum Öffnen von Websites, sowie zur Steuerung von Animationen. Du wählst einfach ein Fragment aus, welches in der Zeitleiste oder auf ein Objekt angewendet wird.

Außerdem steht dir für HTML5-Canvas-Projekte das Framework CreateJS zur Verfügung. Hiermit erstellst du komplexe Formen und Animationen direkt per JavaScript.

Veröffentlichen von Animate-Projekten

Wie schon bei Flash muss beim neuen Animate CC dein fertiges Projekt veröffentlicht werden. Hierzu generiert Animate CC ein HTML-Dokument und die dazugehörigen Dateien. Hast du HTML5 Canvas gewählt, wird neben dem HTML-Dokument, welches das Canvas-Element enthält, eine JavaScript-Datei mit der Programmierung erstellt.

Bei WebGL werden mehrere Dateien angelegt. Neben dem HTML-Dokument ist eine WebGL-Bibliothek erforderlich, die durch Animate CC erstellt wird, sowie verschiedene JSON-Objekte und Grafikdateien.

animate-cc_veroeffentlichen
Veröffentlichungseinstellungen für HTML5 Canvas

Wenn du zunächst erst einmal die beiden neuen Formate HTML5 Canvas und WebGL kennen lernen möchtest, findest du einige Vorlagen, die du zum Erstellen neuer Dokumente verwenden kannst.

Animate CC jetzt mit Typekit und Adobe Stock

Zu den weiteren Neuerungen von Animate CC gehört, dass die beiden Adobe-Dienste Typekit und Adobe Stock ein fester Bestandteil von Animate CC geworden sind. Wurden bei Flash Schriften einfach eingebettet, müssen bei den neuen Formaten Webschriften her. Hier bietet es sich natürlich an, dass Adobe seinen eigenen Schriftendienst Typekit integriert.

Zu seiner Nutzung musst du einfach die URL der Website angeben, auf der das Projekt zu finden ist. Animate CC bindet dann automatisch die aus Typekit gewählten Schriften ein. Die Verwendung von Adobe Stock funktioniert ähnlich wie in anderen CC-Anwendungen. Du wählst direkt aus der Anwendung heraus ein Bild aus Adobe Stock und platzierst es in deinem Dokument.

Und Flash gibt es auch noch

Zu guter Letzt sei noch erwähnt, dass du natürlich weiterhin ganz klassisch Flash-Inhalte entwickeln kannst. Auch wenn das Flash-Format keine große Rolle mehr spielt, ist es noch nicht tot. Zumindest im Bereich der Spiele-Entwicklung hat es derzeit noch einen gewissen Stellenwert. So sind ein Großteil der Facebook-Spiele beispielsweise noch mit Flash realisiert.

Aber es ist nur eine Frage der Zeit, bis Flash gänzlich verschwindet. Einen Schritt dorthin ist Adobe mit seinem neuen Animate CC gegangen.

Hast du es dir schon angeschaut? Was hälst du persönlich davon?

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme Webdesign

So optimierst du SVG-Dateien für deine Website

Man muss die SVG-Syntax nicht zwingend beherrschen, um Grafiken in das Webformat bringen zu können. Anwendungen wie Illustrator haben entsprechende Exportfunktionen. Und gerade für komplexe Grafiken ist es auch gar nicht sinnvoll oder machbar, diese per Hand auszuzeichnen. Aber bei generierten SVG-Dateien ist es nicht verkehrt, den Quelltext einmal zu überprüfen. Denn hier und da sind häufig Optimierungsmöglichkeiten vorhanden.

So optimierst du SVG-Dateien für deine Website

Einfache Formen verwenden

SVG kennt eine Vielzahl von Elementen zum Zeichnen von Formen. Neben „<rect>“, „<circle>“ und „<polygon>“ gibt es mit dem „<path>“-Element quasi einen Allrounder, der nicht nur Rechtecke, Kreise und Polygone zeichnen kann, sondern auch sehr komplexe Formen. Dennoch sollte man immer anstreben, nach Möglichkeit die einfache Form zu verwenden – bei einem Kreis also stets „<circle>“. Denn bei einfachen Formen braucht das „<path>“-Element aufgrund seiner Syntax mehr Platz.

<circle cx="75" cy="75" r="75" />
<path d="M75,0C33.6,0,0,33.6,0,75c0,41.4,33.6,75,75,75s75-33.6,75-75C150,33.6,116.4,0,75,0z" />

Das Beispiel zeigt zweimal dieselbe Form. Das „<path>“-Element benötigt aber etwa dreimal so viel Quelltext. Illustrator sucht automatisch das sinnvollste Element – in diesem Fall „<circle>“. Sobald man beispielsweise per Pathfinder zwei Formen vereint oder eine Form abzieht (zum Beispiel eine Aussparung innerhalb des Kreises erstellt), kommt nur noch das „<path>“-Element in Frage.

svg-optimieren_pathfinder
Pathfinder in Illustrator

Illustrator erzeugt jedoch nur aus nicht bearbeiteten Kreisen auch ein „<circle>“-Element. Sobald ein Kreis per Pathfinder behandelt wurde, wird dieser als „<path>“ ausgegeben. Das gilt auch, wenn es sich augenscheinlich um einen einfachen Kreis handelt, also gar keine tatsächliche Veränderung per Pathfinder durchgeführt wurde.

Pfade kombinieren

Wenn Formen dasselbe Aussehen besitzen, kann es sinnvoll sein, diese zu einem Pfad zu kombinieren. Wie erwähnt, wird dazu zwingend das „<path>“-Element erzeugt. Aber wenn die einzelnen Formen aufgrund ihrer Komplexität ohnehin per „<path>“ ausgezeichnet sind, spielt das keine Rolle.

Werden Pfade per Pathfinder vereint, wird nur noch ein „<path>“-Element benötigt. Auch das Aussehen muss in diesem Fall nur noch einmal festgelegt werden. Der Nachteil ist natürlich, dass die einzelnen Formen nicht mehr bearbeitbar sind.

Pfade vereinfachen

Illustrator bietet die Möglichkeit, Pfade zu vereinfachen. Hierbei wird die Anzahl der Punkte eines Pfades reduziert. Diese Funktion solltest du indes nur mit Vorsicht verwenden. Denn nicht jeder Punkt, der dabei weggelassen wird, ist tatsächlich verzichtbar. Dennoch kann gerade bei sehr komplexen Formen eine Reduzierung der Pfade zu einer schlankeren SVG-Datei führen.

svg-optimieren_vereinfachen
Pfade vereinfachen für weniger Punkte

Je nach Form kann ein Pfad schon einmal auf ein Drittel seiner Punkte reduziert werden. Gerade bei Bitmaps, die in Pfade umgewandelt wurden, oder sehr komplexen und detailreichen Grafiken kann sich das lohnen. Hier musst du natürlich sehr genau schauen, welche Details verzichtbar sind.

Zeichenfläche für „viewBox“ anpassen

Illustrator setzt für alle SVG-Dateien das „viewBox“-Attribut. Dieses sorgt dafür, dass eine SVG-Grafik unterschiedlich skaliert und beschnitten werden kann. Sinnvoll ist, wenn die Breite und Höhe der „viewBox“ identisch ist mit der Größe der Formen. Da die Maße der „viewBox“ aus der Zeichenfläche von Illustrator erzeugt werden, sollte die Zeichenfläche den darin platzierten Elementen entsprechen.

svg-optimieren_zeichenflaeche
Zeichenfläche an Objekte anpassen

Mit Illustrator kannst du die Zeichenfläche einfach anpassen, indem du im „Objekt“-Menü den Punkt „Zeichenflächen“ und „an ausgewählte Grafik anpassen“ auswählst. Andernfalls wird als „viewBox“ die automatisch vorgegebene oder manuell gesetzte Zeichenfläche verwendet. Im Normalfall ist dies das A4-Format.

Aussehen per Attribut oder Stylesheets bestimmen

Während Position und Größe einer Form immer über Attribute innerhalb des SVG-Elementes definiert werden, gibt es für das Aussehen unterschiedliche Möglichkeiten. So kannst du die Füllfarbe beispielsweise über das Attribut „fill“ direkt im Element definieren. Alternativ dazu kannst du ein Stilattribut verwenden. Hierbei bündelst du alle Angaben wie Füll- und Rahmenfarbe in einem „style“-Attribut.

<circle fill="#E1E04C" cx="75" cy="75" r="75"/>
<circle style="fill: #E1E04C;" cx="75" cy="75" r="75"/>

Als Letztes besteht die Möglichkeit, das Aussehen über ein eigenes Stilelement zu definieren. Der Vorteil hierbei besteht darin, dass Aussehen und Formelemente getrennt sind und das Aussehen per Klasse mehreren Elementen zugewiesen werden kann. Gerade bei komplexen Grafiken kann man sich so viel doppelten Quelltext sparen.

<style type="text/css">
 .st0 {fill:#E1E04C;}
</style>
<circle class="st0" cx="75" cy="75" r="75"/>

Für welche Möglichkeit du dich entscheidest, hängt von verschiedenen Faktoren ab – unter anderem davon, ob du per JavaScript das Aussehen dynamisch verändern möchtest. In diesem Fall bietet sich die Auszeichnung des Aussehens innerhalb des Elementes an.

svg-optimieren_stile
Auszeichnung des Aussehens festlegen

Kommentare entfernen und SVG komprimieren

Für den letzten Feinschliff solltest du etwaige Kommentare aus den SVG-Dateien entfernen. Gerade wenn du eine SVG-Datei generieren lässt, fügt die verwendete Anwendung gerne mindestens eine Kommentarzeile ein. Wer unnötigen Ballast grundsätzlich vermeiden möchte, wird hier sicher tätig werden.

Außerdem besteht die Möglichkeit, eine SVG-Datei per gzip zu komprimieren. Aus Illustrator heraus wird hierbei ein eigenes Dateiformat angeboten. Aber auch manuell kannst du eine SVG-Datei entsprechend komprimieren und mit der Endung „.svgz“ versehen. Der Browser entpackt die Datei automatisch.

Fazit

Es gibt viele Möglichkeiten, mit denen du deine SVG-Dateien optimieren kannst. Nicht immer lohnt sich der Aufwand. Aber je nach Komplexität einer Grafik und der Anzahl der verwendeten SVG-Dateien kann eine gute Optimierung durchaus zu bemerkenswerten Ergebnissen führen.

Übrigens: zum Themenkomplex „SVG und responsives Webdesign“ haben wir hier bei Dr. Web ebenfalls einen Beitrag.

(dpe)

Kategorien
Design Sonstige Programme

SmallPDF: Umfassender PDF-Werkzeugkasten als Web-App

Adobe Acrobat ist nach wie vor die Standardlösung für das Erstellen, Bearbeiten und Optimieren von PDF-Dateien. Seit es die Document Cloud gibt, steht einem neben der Desktopanwendung auch eine Webanwendung mit den wichtigsten PDF-Funktionen zur Verfügung. Mit smallpdf gibt es einen ganz ähnlichen Dienst, mit dem man per Webanwendung PDF-Dateien unter anderem erstellen, konvertieren und zusammenfügen kann. Im Gegensatz zur Document Cloud von Adobe ist smallpdf kostenlos.

smallpdf

JPEG- und Office-Dateien in PDFs konvertieren – und umgekehrt

Eine PDF-Anwendung sollte natürlich in erster Linie eines können: unterschiedliche Formate in PDFs umwandeln. Hierbei unterstützt der Dienst das JPEG-Format sowie Microsoft Office mit Word, Excel und PowerPoint. All diese Dateien lassen sich schnell und einfach in ein PDF umwandeln. Einstellungsmöglichkeiten hat man hierbei nicht. Das Ergebnis entspricht in etwa dem Standard-Export aus der jeweiligen Office-Anwendung heraus. Beim Export einer Excel-Datei werden beispielsweise der jeweilige Tabellenname sowie die Seitennummerierung mit ausgegeben.

smallpdf_word-pdf
Word-Dokumente in PDF-Dateien konvertieren

Einen Nachteil, den allerdings auch andere Webanwendungen mit sich bringen, gibt es hierbei: Da Office-Formate Schriften nicht einbetten, können diese beim Export auch nicht berücksichtigt werden. Im Zweifel erhält man eine PDF-Datei, in der die Arial die eigentlich in der Word-Datei verwendete Schrift ersetzt.

smallpdf_jpeg-pdf
Bilder wie JPEGs und Bitmaps in PDF-Dateien konvertieren

Auch beim Export eines JPEG-Bildes hat man nicht allzu viele Einstellungsmöglichkeiten. Leider verwendet smallpdf nicht das jeweilige Bildformat als Seitenformat für die PDF-Datei. Stattdessen muss man sich zwischen DIN A4 und dem US-Letter-Format entscheiden. Optional kann man Hoch- oder Querformat vorgeben und zwischen keinem, kleinem und großem Rahmen wählen, der um das Bild angelegt werden soll. Außerdem besteht die Möglichkeit, direkt mehrere Dateien hochzuladen, die dann zu einer PDF-Datei zusammengefügt werden. Im Übrigen erkennt der Dienst die Formate PNG, GIF und BMP.

smallpdf_pdf-jpeg
Aus PDF-Dateien JPEGs machen

Neben der Möglichkeit, JPEG- und Office-Dateien ins PDF-Format zu konvertieren, geht es mit smallpdf auch anders herum. So wird aus einer PDF-Datei zum Beispiel ein JPEG oder eine Word-, Excel oder PowerPoint-Datei. Während die Konvertierung ins Excel-Format ganz ordentlich funktioniert – vorausgesetzt, das Ursprungsformat war ebenfalls eine Excel-Tabelle –, sehen die Ergebnisse bei der Konvertierung in ein Word-Dokument nicht immer optimal aus. Zwar werden Texte – ebenso Tabellen und andere semantische Formatierungen – gut erkannt, die Schrift wird jedoch stark verzerrt dargestellt. Außerdem sind bei meinen Versuchen sämtliche Leerzeichen ersatzlos entfernt worden. Das macht das Ergebnis ziemlich unbrauchbar.

PDF-Dateien komprimieren

Neben dem beidseitigen Konvertieren von PDF-Dateien stellt smallpdf ein Komprimierungswerkzeug zur Verfügung, welches die Dateigröße einer PDF reduziert. Auch hierbei gibt es keine Möglichkeit, die Kompressionsrate vorzugeben. Der Dienst entscheidet hier selbst, wie stark das Ergebnis komprimiert wird. Dabei wird für Bilder eine Auflösung von 144 DPI gewählt. Allerdings sorgt smallpdf dafür, dass das komprimierte PDF in jedem Fall noch gut lesbar ist. Aus einem 20 MB großen PDF mit hohem Bildanteil hat smallpdf mir eine etwa 700 KB große Datei gemacht. Bei normalen Fotos, bei denen es keine feinen Details zu erhalten gab, war der Qualitätsverlust im Verhältnis zur Reduzierung der Dateigröße mehr als in Ordnung.

smallpdf_komprimieren
PDF-Dateien komprimieren

PDF-Dateien zusammenführen und extrahieren

Während der Export von Bild- und Office-Formaten ins PDF-Format auch mit Bildbearbeitungsprogrammen und Office-Anwendungen möglich ist, ist das Zusammenführen von PDF-Dateien und das Extrahieren einzelner Seiten aus einer PDF-Datei damit in der Regel nicht möglich. Diese klassische Acrobat-Funktion kann von smallpdf übernommen werden. Beim Zusammenführen werden einfach alle PDF-Dateien, die in einer Datei kombiniert werden soll, hochgeladen.

smallpdf_extrahieren
Seiten aus PDF-Dateien extrahieren

Beim Extrahieren wird eine Datei hochgeladen, bei man anschließend die jeweiligen Seiten, die extrahiert werden sollen, angibt. Anschließend erhält man eine PDF-Datei mit genau diesen Seiten.

PDF-Dateien entsperren

PDF-Dateien können bekanntlich mit einem Kennwortschutz versehen werden. Per smallpdf soll dieser Kennwortschutz entfernt werden können – auch wenn man das Kennwort nicht kennt. Natürlich sollte man diese Funktion nur nutzen, wenn man selbst Urheber dieser PDF ist oder zumindest die Erlaubnis des Urhebers hat. In meinen Tests war es aber ohnehin nicht möglich, den Kennwortschutz ohne Kennwort entfernen zu lassen.

Wer das Kennwort weiß, kann mit smallpdf den Kennwortschutz natürlich tatsächlich entfernen.

Fazit und Link zum Beitrag

smallpdf ist zwar nicht so umfangreich wie Adobe Acrobat und seine Document Cloud, bietet aber für einen kostenlosen Dienst durchaus nützliche Funktionen an. Hier und da wären mehr Einstellungsmöglichkeiten wünschenswert. Aber dafür ist die Bedienung einfach und die Bedienoberfläche sehr intuitiv und ansprechend gestaltet. Schön ist zudem die Möglichkeit, auf Dateien zuzugreifen, die in einer Dropbox oder bei Google Drive liegen .

Laut Angaben von smallpdf werden alle hochgeladenen Dateien spätestens eine Stunde nach dem Hochladen vom Server gelöscht.

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

100 kostenlose Designelemente für Sketch

Beinahe täglich erzählt mir ein Designkollege, dass er für die Grafikbearbeitung, wie sie im Webdesign typisch ist, von Photoshop oder Fireworks zu Sketch gewechselt ist. Der Preis des Adobe-Boliden ist dabei in den seltensten Fällen das ausschlaggebende Kriterium gewesen. Obwohl es natürlich schon ein Unterschied ist, ob man einmalig 99 Dollar überweist oder sich in einem längerfristigen Abonnement bindet. Sketch ist also nicht nur günstiger in der Anschaffung, sondern schlichtweg schneller, weniger mit Features beladen, die man nicht benötigt und dadurch übersichtlicher und besser zu beherrschen. So kann man sich voll auf die eigentliche Aufgabe konzentrieren, mit nur genau denjenigen Werkzeugen an der Hand, die man wirklich benötigt. Simplify your Life.

100 kostenlose Designelemente für Sketch

Obwohl Sketch ausschließlich für Apples Mac OS X verfügbar ist, verbreitet es sich wie ein Virus auf den Rechnern von Grafik-, Web-, UX- und App-Designern weltweit. Nach wie vor ist das Betriebssystem aus Cupertino stark in den kreativen Industrien. Sketch gewinnt Fans aber nicht nur durch seine sehr klare und reduzierte Ausrichtung, sondern vor allem auch aufgrund der schnell wachsenden Community, die sich mit einer Vielzahl von Plugins und anderen Assets, die sich nahtlos im Produktionsprozess verwenden lassen, in das Produkt einbringt.

Heute haben wir 100 kostenlose Sketch-Designelemente für Sie. Machen Sie was draus…

Soundtrack Playlist App

playlist template
Erstellt von:  Eduardo Higareda
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Music Player Overlay 

play overlay
Erstellt von: Ced
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Marvel Icons

marvel icons
Erstellt von: Abraham Guerra
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sport iOS app

sport ios
Erstellt von: Oleksiy Tymoshenko
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Another Weather App!

weather app
Erstellt von: Prashant Bhatnagar
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

DiscoMusica – Free Sketch UI Ki

disco music ui
Erstellt von: Tobia Crivellari
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Apple Watch Concept GUI v2.0

iwatch ui
Erstellt von:  Jan Losert
Lizenz: frei nur für nichtkommerzielle Zwecke bei Urhebernennung

Apple Watch

apple watch
Erstellt von: Josh Whitehead
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch Icons

sketch icons
Erstellt von: Hakan Ertan
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iPad App Store Assets

ipad app store
Erstellt von: Alex Münch
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Login Form

login form
Erstellt von: Ced
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Photo Blog iOS App

2 app screens
Erstellt von: Maximlian Hennebach
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Digital Stuff Icon Set

digital stuff icons
Erstellt von: Raymond Wong
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

60 Vicons

60 vicons
Erstellt von: Alexander Slash
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Wireframe kit freebies .sketch – iPhone 6

iphone6 ui
Erstellt von: Barbara Giardelli
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch – Valentine’s Day icons

valentines day icons
Erstellt von: Alexander Slash
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch iOS App Analytics

analytics app
Erstellt von: igor leygerman
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Filo Icon Set

flat icon set
Erstellt von: Alexander Slash
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Mail App UI

mail app ui
Erstellt von: Anton Aheichanka
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch Icon Set

sketch icon set
Erstellt von: Maximlian Hennebach
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch

buttons
Erstellt von: Ronald Ravelo
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Valenticons – Love & Romance Icon Set

valentines icons
Erstellt von: ozanoz
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Free Icon Set

line icons
Erstellt von: Danny Saltaren
Lizenz: frei für persönliche und kommerzielle Zwecke

Android Lollipop for Sketch 3

android lollipop
Erstellt von:  Brian Moyano
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Jimi’s Avatar Icons

avatr icons
Erstellt von: Petr Ondrusz
Lizenz:frei für persönliche und kommerzielle Zwecke

Steam Concept

steam concept
Erstellt von: Alex
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch UI Kit

sketch ui kit
Erstellt von: Pausrr
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Dishes Freebie

dishes app
Erstellt von: Wayne Dahlberg
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Video Stream App für iOS 

app for ios
Erstellt von: Maximlian Hennebach
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch Soundcloud Embed Player

soundcloud player
Erstellt von: Anthony Daniel II
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Moto 360 watch

moto 360
Erstellt von: Aivis Mežals
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Happy Holidays Icons

holidays icons
Erstellt von: Maximlian Hennebach
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iOS PIN User Interface

pin user interface
Erstellt von: Maximlian Hennebach
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Email Template

email template
Erstellt von: Aurélien Salomon
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Slicklist

slicklist
Erstellt von: Adis
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Dark Homescreen UI

dark homescreen ui
Erstellt von: Maximlian Hennebach
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Storex

shopping app
Erstellt von: Ozan Oztaskiran
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Icon Set – Free Download

icon set
Erstellt von: Oliur
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iOS Phone/Call Icons für Sketch

ios phone call
Erstellt von: Sarah Li
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Icon iOS7

apple icon
Erstellt von: Kevin Py
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Business Icons

business icons
Erstellt von: Icons Mind
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Capture – Take Panaroma

capture app
Erstellt von: ismail köse
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

DesignersMX Free Download

redesign concept
Erstellt von: Aaron Moody
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Weather Icon Set

weather icon set
Erstellt von: Orlando Marty
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iOS 8 UI Design Kit 

ios8 ui
Erstellt von: Adam Zielonko
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Freebie Sketch: Resume Template

resume template
Erstellt von: Drew Chandler
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

UX Diagrams Kit for iPhone 6/6 Plus and Apple Watch

ux diagrams
Erstellt von: Alex Tsayun
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

100 Free Sketch Icons

100 sketch icons
Erstellt von: Icons Mind
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Martini NewYear Landing Page

landing page
Erstellt von: Yuri Yurchenko
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Nebula Dashboard

dashboard
Erstellt von: Maximlian Hennebach
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Social login widget 

login form 2
Erstellt von: Razlan Hanafiah
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

UIFrames

ui frames
Erstellt von: Mariz Melo
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Education Platform Landing Page 

education landing page
Erstellt von: Himanshu Gupta
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

20 Christmas Icons

xmas icons
Erstellt von: Maximlian Hennebach
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Font Specimen für Sketch

font specimen
Erstellt von: Pietro Schirano
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Dribbble App Material Design

app material
Erstellt von: Soumya Ranjan Bishi
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Simple Voting App

voting app
Erstellt von: Borrys Hasian
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

My Best Restaurant – Free .sketch resource

restaurant theme
Erstellt von: Vivien Bocquelet
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Material Design App [.sketch]

material design app
Erstellt von: PLUS8 digital agency
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Twitter Card Concept

twitter card concept
Erstellt von: Tobia Crivellari
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Wireframe

wireframe template
Erstellt von: Riza Selçuk Saydam
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Apple Watch App Concept

watch app concept
Erstellt von: Riza Selçuk Saydam
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Nexus 9

nexus 9 mockup
Erstellt von: Ivan Bjelajac
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iOS Devices für Sketch v3

ios devices
Erstellt von: Robbie Pearce
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Free Sketch Download – iOS Message Notification 

message notification
Erstellt von: Matt D. Smith
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Workout Icons

workout icons
Erstellt von: Liam Shalon
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Diagram Template

wireframe kit
Erstellt von: ismail köse
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Free Frames

iphone and ipad frames
Erstellt von: Thiago Vian
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Dashboard Sketch Freebie

dashboard ui
Erstellt von: Ante Matijaca
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Flat UI Kit

flat ui kit
Erstellt von: Pavel Kreewtsov
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iTunes UI Free .sketch

itunes ui
Erstellt von: Gauthier Eloy
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Simple Line Icons 2 – 100+ Free Icons

line icons set
Erstellt von: Mirko Monti
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Android Hangouts – Sketch Template

android ui
Erstellt von: Johan Jonsson
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Surf UI – Sketch Freebie 

surf ui
Erstellt von: Marcelo Silva
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Flag Set

flag set
Erstellt von: Luc Chaissac
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Spooky Icons Free – 12 hand-drawn Halloween icons

spooky icons
Erstellt von: Hatchers
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iPhone6 Template

iphone6 template
Erstellt von: Hai Ninh Nguyen
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Simple iPhone 6/6+ für Sketch

simple iphone6
Erstellt von: Jon Rundle
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Apple iPhone 6 Vector Shape

iphone6 vector
Erstellt von: Norman Posselt
Lizenz:frei für persönliche und kommerzielle Zwecke

Adobe Illustrator UI Kit .sketch

illustrator ui
Erstellt von: Artem Svitelskyi
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Vector iOS Icons

vector ios icons
Erstellt von: Marcelo Silva
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Data Visualization Elements (Sketch, SVG +EPS)

data visualization
Erstellt von: Sagi Shrieber
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch Date Picker Download

date picker
Erstellt von:  Jason Calleiro
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iPhone 6 Flat + Sketch / Freebie AI

iphone6 flat
Erstellt von: Georgian-Sorin Maxim
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch Social Logos (Vector)

social logos
Erstellt von: Erica Jaclyn Stein
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iPhone 6 & 6 Plus Wireframe

iphone6 wireframe
Erstellt von: Hudson-Peralta
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Apple Watch Free Mockup

apple watch template
Erstellt von: Sebastiano Giuseppe Garilli
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

iPhone 6 und 6 Plus

iphone6 and 6plus
Erstellt von: Michael Stache
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Android L Mobile UI Template

android template
Erstellt von: Vincent Tantardini
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

440 Free Icons

440 free icons
Erstellt von: Catalin Fertu
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Video Screen Concept for Mobile App

video screen ui
Erstellt von: Riza Selçuk Saydam
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Travel Widget

travel widget
Erstellt von: Jordi Tambillo
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Creator Platform UI Kit

creator platform
Erstellt von: Jay Stakelon
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Material Design

material design template
Erstellt von: Kyle Ledbetter
Lizenz: Free for personal and commercial use.

Dark and Light UI Kit 

dark and light ui
Erstellt von: Mateusz Dembek
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Mac OS X Yosemite UI (PSD & Sketch)

mac os x
Erstellt von: Cory Shoaf
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sparrow Yosemite

yosemite
Erstellt von: Oleg Stirbu
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Sketch Icons

contour icons
Erstellt von: Christian
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Safari OS X Yosemite .Sketch File

safari os x
Erstellt von: Kuswanto
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Music Player

music player
Erstellt von: Andreea Nicolaescu
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Lightroom CC mit mehr Geschwindigkeit, HDR und Panorama-Blick

Adobe hat ganz frisch Lightroom CC veröffentlicht und präsentiert neben einer Geschwindigkeitszunahme zahlreiche weitere Funktionen. So ist nun das Zusammenfügen zu HDR-Bildern sowie das Erstellen eines Panoramas möglich, eine Gesichtserkennung vereinfacht die Bildersuche und auch sonst wurde so einiges an der Software geschraubt, um die digitale Fotoentwicklung weiterhin auf einem professionellen Stand zu halten. Wir haben uns die Neuerungen einmal angeschaut.

Lightroom CC 2015

Lightroom-Update #1: Performance-Booster

Lightroom ist schneller geworden. Besonders deutlich wird das im Modul Entwickeln. Lightroom überprüft nun, ob ein kompatibler Grafikprozessor (GPU) bereit steht und nutzt diesen dann, um für einen spürbaren Leistungsschub zu sorgen. Dieser Performancevorteil ist selbst beim Importieren spürbar. Adobe sagt, dass manche Anwender einen Geschwindigkeitsvorteil von bis zum Zehnfachen der Leistung im Vergleich zum Vorgänger spüren sollten. Die Realität ist da etwas zurückhaltender, trotzdem handelt es sich (ganz klar) um ein sehr willkommenes Update.

lightroom-cc1
brandless generic car / Bildnummer: 97401731 / Urheberrecht: zentilia

Lightroom-Update #2: HDR-Bilder erzeugen

HDR-Aufnahmen wirken oft surreal – fast wie aus einer anderen Welt. Jetzt ist es auch in Lightroom möglich, einzelne Fotos mit verschiedenen Belichtungszeiten zu einem HDR-Bild zu vereinen. Dazu werden die Aufnahmen bei gedrückter Strg-Taste ausgewählt. Danach klickt man im Menü auf Foto > Zusammenfügen von Fotos > HDR. Eine Vorschau wird angezeigt und einige Vorgaben stehen zum Anklicken bereit. Automatisch ausrichten ist aktiv und sorgt für eine passgenaue Überlagerung.

Automatischer Tonwert sorgt für eine Tonwertkorrektur, die besonders die Farben noch etwas hervorhebt. Dann können wir noch bestimmen, wie stark Geistereffekte heraus gerechnet werden (falls doch etwas Bewegung im Bild war). Diese Stellen können wir uns auch als Überlagerung anzeigen lassen. Über Umschalt+O können diese Stellen mit den verschiedenen Versionen der genutzten Bilder ausgetauscht werden. Nach dem Bestätigen sehen wir oben links einen Fortschrittsbalken. Nach dem Ablauf wird das Ergebnis als neues Foto abgelegt.

lightroom-cc2

Lightroom-Update #3: Zahlreiche Fotos, ein großes Panorama

Spannend ist hier, dass aus einzelnen Raw-Bildern auch ein Raw-Panorama erzeugt werden kann. Auch hier werden zunächst alle Fotos ausgewählt und über Foto > Zusammenfügen von Fotos > Panorama vereint. Wir sehen sofort eine Vorschau des Panoramas. Projektion automatisch auswählen ist aktiv. Wir können aber auch aus den drei Optionen eine passende wählen. Empfehlenswert ist Automatisches Freistellen. So brauchen wir das Ergebnis nicht mehr zuschneiden, das nach dem Bestätigen erstellt und als neues Foto abgelegt wird.

lightroom-cc3a

lightroom-cc3b
Brooklyn Bridge / Bildnummer: 187048664 / Urheberrecht: mandritoiu

Lightroom-Update #4: Intelligente Gesichtserkennung

Um eine Person gleich auf zahlreichen Fotos zu entdecken, bietet uns Lightroom CC in der Bibliothek eine Filterung nach Personen an. Einmal angeklickt, analysiert Lightroom das Bildmaterial und zeigt uns die einzelnen Gesichter an. Unbenannte und benannte Personen werden dabei getrennt gelistet, so dass wir deren Namen schnell in die passenden Felder schreiben können. So erhalten wir bei der nächsten Suche die Chance, diese Person auf allen Fotos zu entdecken, auf denen sie enthalten ist.

Gleiche Namen werden hier gestapelt, so dass wir bei Personen mit gleichem Vornamen auch den Nachnamen oder zumindest dessen Abkürzung schreiben sollten. Wird ein Gesicht gezeigt, welches definitiv kein Gesicht ist, so kann dieses Bild über das X-Icon abgelehnt werden. Das Tastenkürzel O führt uns immer wieder in diese Ansicht. Die Namen werden übrigens auch unter den Stichwörtern gelistet.

lightroom-cc4
travel, vacation / Bildnummer: 215910649 / Urheberrecht: Syda Productions

Lightroom-Update #5: Punktgenaue Pinselarbeit

Verlaufs- oder Radial-Filter wirken sich auf einen recht großen Bereich eines Dokumentes aus. Bisher konnten wir nicht bestimmen, an welchen Stellen Bereiche ausgeschlossen oder gar verstärkt werden sollen. Lightroom CC bietet uns da einen speziellen Pinsel an. Wurde ein Verlaufsfilter aufgezogen, so können wir über Überlagerung für ausgewählte Maske anzeigen die Fläche sehen, die bearbeitet wird. Auf der rechten Seite, gleich neben Neu und Bearbeiten, ist jetzt auch Pinsel zu lesen.

Wird dieser aktiviert, können wir Bereiche der Maske dazu geben oder davon subtrahieren. Malen Sie einfach über einen Bereich, der bearbeitet werden soll. Möchten Sie dagegen, dass dieser nicht bearbeitet wird, so malen Sie bei gedrückter Alt-Taste darüber. Unten rechts haben Sie die Option, die Größe, den Fluss sowie eine weiche Kante für den Pinsel einzustellen. Die Dichte steht da praktisch für die Deckkraft.

lightroom-cc5
Two basketball players / Bildnummer: 232344658 / Urheberrecht: Eugene Onischenko

Lightroom-Update #6: Optimierte Dia-Show

Jetzt ist es noch leichter, eine ansprechende Dia-Show zu gestalten. Unter Abspielen sind zwei verschiedene Modi zu sehen: Automatisch und Manuell. Unter Automatisch ist jezt Schwenken und Zoomen angeordnet, um die Bilder etwas dynamischer zu präsentieren. Über Musik können verschiedene Audiospuren (bis zu zehn) hinzugefügt werden. So wird etwa das MP3-Format unterstützt. Während der Dia-Show werden die Lieder überblendet. Der Wechsel der Bilder kann sich auf Knopfdruck dem Tempo der Lieder anpassen, über Folien zur Musik synchronisieren.

lightroom-cc6

Lightroom-Update #7: Zahlreiche Feinheiten

Natürlich wurden zahlreiche, weitere Features optimiert oder neu eingefügt. Dabei wurde besonders die Verbindung Lightroom zu Mobilgerät gestärkt. So gibt es Lightroom seit einiger Zeit auch für Android-Geräte. Anpassungen können auf iPad und iPhone von einem Foto in ein anderes kopieret werden. Beide Geräte bieten nun zusätzlich einen Präsentationsmodus an. Spannend sind auch die erweiterten Web-Galerien –  mit HTML5-kompatiblen Galerievorlagen.

lightroom-cc7

Bemerkenswert: Lightroom CC steht zwar erstmal nur Abonnenten der Creative Cloud zur Verfügung, wird aber in Kürze auch als Box-Version unter dem Namen Lightroom 6 für Normalsterbliche erhältlich sein. Der Preis wird – wie gehabt – bei etwa 130 Euro liegen.

Was ist Ihre neue Lieblingsfunktion? Sie wissen nicht, wozu Sie Lightroom einsetzen könnten? Hier haben wir ein paar handfeste Tipps für Sie zusammengetragen.

(dpe)

Kategorien
Sonstige Programme Webdesign

WebAnimator Plus: Anspruchsvolle Animationen für moderne Browser erstellen

Bis vor einigen Jahren war Flash fester Bestandteil des Webs – vor allem, wenn es darum ging, Animationen zu erstellen und diese auf einer Website bereitzustellen. Abgesehen davon, dass Flash damals fast die einzige Möglichkeit war, um Bewegung in eine Website zu bringen, trug sicher auch die grafische Oberfläche zum Erfolg bei. Animationen ließen sich ohne Programmierkenntnisse erstellen. Mit HTML5 und CSS3 hat sich die Welt der Webanimationen verändert. Mit dem WebAnimator Plus gibt es jedoch eine Anwendung, welche die Vorteile von Flash aufgreift und ins zeitgemäße Web rund um HTML5 und CSS3 überführt.

webanimator

Oberfläche erinnert an Flash

Wer bereits Erfahrungen mit Adobe Flash gemacht hat, wird sich schnell zurechtfinden in der Programmoberfläche von WebAnimator Plus. Auch die Bezeichnungen sind teils identisch. So sind die zentralen Bereiche die Bühne sowie die Hauptzeitleiste. Auf der Bühne werden grafische Elemente platziert und gestaltet und in der Hauptzeitleiste animieren Sie diese. Wie auch bei Flash können unterschiedliche Szenen angelegt werden, die sich losgelöst voneinander gestalten und mit Animationen versehen lassen.

webanimator-plus_oberflaeche
Die Oberfläche und Funktionalität von WebAnimator Plus erinnert an die von Flash

Neben einfachen geometrischen Figuren wie Recht- und Dreiecken sowie Ellipsen können auch Grafiken in unterschiedlichen Bitmapformaten auf der Bühne platziert werden. Unterstützt werden JPEG-, PNG- und GIF-Dateien. Schön wäre es, wenn auch Vektorformate wie das in HTML5 etablierte SVG-Format eingebunden werden könnten, was derzeit zumindest noch nicht der Fall ist.

Natürlich können auch Texte auf der Bühne platziert werden. Neben der Auswahl von Systemschriften hat man über den WebAnimator Plus Zugriff auf Googles Webfonts und bindet diese direkt ein, ohne mit CSS hantieren zu müssen. In einer Vorschau erhält man schnell einen Überblick über das Aussehen der Schriften in verschiedenen Größen.

Zusätzlich lassen sich auch Video- und Audiodateien in einem Projekt verwenden. WebAnimator Plus berücksichtigt hierbei die unterschiedlichen erforderlichen Dateiformate, um alle Browser abdecken zu können. Zwar ist keine Konvertierung der Formate mit der Anwendung möglich. Aber es lassen sich für ein und dasselbe Video- beziehungsweise Audioelement verschiedene Formate hinterlegen. Auf Wunsch wird bei Videos auch eine Steuerleiste dargestellt.

webanimator-plus_video
HTML5-Videos einfach in WebAnimator Plus einbinden

Elemente gestalten und ausrichten

Jedes auf der Bühne platzierte Element kann individuell gestaltet werden. Hier stehen einem je nach Elementtyp unterschiedliche Eigenschaften zur Verfügung, mit denen man Größe und Aussehen eines Elementes anpassen kann. Dazu gehören unter anderem Füll- und Rahmenfarbe, Rahmenstärke, Deckkraft, Drehung und Neigung. Auch Schlagschatten sind verwendbar. Leider werden Schlagschatten immer als Rechteck dargestellt, wie man es von der CSS-Eigenschaft „box-shadow“ kennt. Daher sind die Schlagschatten nur für rechteckige Elemente geeignet, nicht aber für elliptische oder andere nicht rechteckige Formen.

Dafür gibt es aber als besonderen Effekt die Möglichkeit, ein Element auf der Bühne reflektieren zu lassen. Dazu wird der Abstand der Reflexion zum Element sowie die Tiefe der Reflexion festgelegt. Dieser Reflexionseffekt lässt sich per HTML5 und CSS3 so nicht realisieren. Somit hat der WebAnimator Plus hier ein nettes Alleinstellungsmerkmal.

webanimator-plus_reflexion
Reflexionen als besonderen Effekt zu Elementen hinzufügen

Alle Änderungen, die man vornimmt, werden direkt auf der Bühne dargestellt. Außerdem gibt es eine Vorschaufunktion, welche das Projekt im Browser öffnet. Dabei ist es möglich, einen beliebigen installierten Browser für die Vorschauansicht voreinzustellen.

Animationen erstellen

Der eigentliche Schwerpunkt der Anwendung sind natürlich die Animationen. Auch hier müssen sich Flash-Nutzer nicht groß umgewöhnen. Jedes Element auf der Bühne ist auch im Hauptzeitstrahl vorhanden. Für jede Eigenschaft, die per Animation verändert werden soll, wird auf dem Zeitstrahl eine eigene Zeile angelegt. Standardmäßig sind die Eigenschaften „Links“ und „Oben“ vorhanden, um ein Element auf der Bühne bewegen zu können.

webanimator-plus_zeitleiste
Die Zeitleiste in WebAnimator Plus ermöglicht einfache und komplexe Animationen

Es lassen sich weitere Eigenschaften zum Zeitstrahl hinzufügen. So können Elemente skaliert und gedreht werden. Füll- und Rahmenfarben können ebenso wie Schatteneffekte verändert werden. Es stehen mehrere Dutzend Eigenschaften zur Verfügung. Um eine Eigenschaft zu verändert, platziert man auf dem Zeitstrahl zwei Schlüsselbilder – eines für den Beginn und eines für den Schluss der Animation. Dann werden für beide Schlüsselbilder die jeweiligen Eigenschaften verändert. Das geschieht entweder durch Verschieben eines Elementes auf der Bühne oder über das Eigenschaften-Fenster.

Über die Timing-Funktion kann die Art der Animation festgelegt werden. Hier stehen einem die bekannten Funktionen zur Verfügung, die CSS3 für die „transitions“- und „animations“-Eigenschaft verwendet – zum Beispiel „Linear“, „Ease in“ und „Ease out“. Es kann auch eine individuelle Timung-Funktion definiert werden. Hierzu wird eine Bézierkurve angelegt, welche die Beschleunigung der Animation visualisiert.

webanimator-plus_easing-funktion
Individuelle Timing-Funktionen werden als Bézierkurve angelegt

Über eine Wiedergabesteuerung spielen Animationen direkt in der Anwendung ab. Ein Wechsel zwischen WebAnimator Pro und dem Browser zum Testen der Animation ist also nicht nötig.

Live-Animationen

Eine Besonderheit des WebAnimator Plus stellen die sogenannten Live-Animationen dar. Dabei handelt es sich um fertige Animationsvorlagen, die man einfach auf ein Element anwendet. Mit diesen Live-Animationen lassen sich Elemente beispielsweise um die eigene Achse drehen oder fliegen von links nach rechts oder oben nach unten über die Bühne.

Live-Animationen können auch mit den Animationen auf dem Zeitstrahl kombiniert werden. So gibt es beispielsweise einen Federeffekt, der beim Ende einer Animation dazu führt, dass das Element abgefedert wird.

webanimator-plus_live-animationen
Animationseffekte einfach per Live-Animationen hinzufügen

Außerdem stehen spezielle Live-Animationen für Texte bereit. Damit werden Texte wie ein Gummiband oder Akkordeon auseinander gezogen. Alternativ lassen sich Texte etwa als pulsierendes Herz darstellen. Mit den Live-Animationen sind viele Effekte möglich, die nett anzusehen sind, aber nicht überladen wirken.

Elementen Ereignisse hinzufügen

Nicht immer will man einfach nur Animationen abspielen. Dank der Ereignisse in WebAnimator Plus hat man die Möglichkeit, auf Nutzereingaben zu reagieren. So können per Klick oder Hover auf ein Element bestimmte Ereignisse ausgeführt werden. Dabei ist es möglich, eine URL oder eine andere Szene aufzurufen. Man kann auch zusätzliche Zeitleisten mit Animationen unabhängig der Hauptzeitleiste erstellen. Diese Zeitleisten können dann ebenfalls per Klick abgespielt werden.

webanimator-plus_ereignisse
Mit Ereignissen wird die Animation zu einer interaktiven Seite

Für individuelle Ereignisse können eigene Funktionen per JavaScript programmiert werden. Für die meisten Anwendungsfälle sind jedoch keine Programmierkenntnisse erforderlich, da WebAnimator Plus bereits viele Anwendungsfälle abdeckt.

Animation per HTML5-Export bereitstellen

WebAnimator Plus speichert Projekte in einem eigenen Dateiformat ab. Das fertige Animationsprojekt muss anschließend noch per HTML5-Export bereitgestellt werden. WebAnimator Plus erstellt dann eine HTML-, sowie CSS- und JavaScript-Dateien. Die HTML-Datei ist hier recht übersichtlich. Sie bindet lediglich die CSS- und JavaScript-Dateien ein. Sämtliche Animationen werden per JavaScript bereitgestellt. Hierbei wird jedoch auf CSS3-Animationen gesetzt. Außerdem wird jQuery verwendet und auf Modernizr zurückgegriffen. Beide Bibliotheken werden von WebAnimator Plus automatisch für jedes Projekt mit exportiert.

Alle aktuellen Browser können mit WebAnimator Plus erstellte Animationen darstellen, beziehungsweise abspielen. Der Internet Explorer wird ab Version 10 unterstützt. Auf Wunsch kann bei allen Browsern, die nicht unterstützt werden, eine Grafik angegeben werden, die anstelle der Animation angezeigt wird.

Animationen in WebSite X5 Professional 11 integrieren

Wer Webprojekte mit WebSite X5 Professional 11 realisiert, kann per WebAnimator Plus erstellte Animationen direkt in ein Webprojekt integrieren. WebSite X5 Professional 11 ist eine Anwendung, mit der sehr einfach umfangreiche und individuelle Websites gestaltet und mit Inhalt gefüllt werden können. Die Anwendung stellt sogenannte Objekte zur Verfügung, mit denen verschiedene Inhalte auf einer Seite platziert werden. Dazu gehören einfache Inhalte, wie Texte und Bilder.

websitex5
Animationen einfach in WebSite X5 Professional 11 integrieren

Es gibt aber auch Objekte, mit denen beispielsweise multimediale Inhalte, sowie Galerien, Karten und Tabellen platziert werden können. Wer WebSite X5 Professional 11 zusammen mit dem WebAnimator Plus verwendet, integriert Animationsprojekte ebenfalls als Objekt auf einer Seite. So muss man sich nicht mit dem Quelltext der Animation auseinandersetzen. WebSite X5 Professional 11 sorgt dafür, dass die Animation samt der erforderlichen Dateien korrekt in das Webprojekt integriert wird.

Fazit und Link zum Beitrag

Der WebAnimator Plus ist eine umfangreiche Anwendung zum Erstellen komplexer und individueller Animationen. Der Funktionsumfang der Anwendung erlaubt es, komplette Webprojekte zu realisieren – ähnlich wie es mit Adobes Flash möglich ist. Anders als Flash setzt WebAnimator ganz auf HTML5 und CSS3, sowie auf JavaScript. Das sorgt dafür, dass Projekte auch auf mobilen Geräten laufen – und das ganz ohne Plug-ins.

WebAnimator Plus läuft auf Windows-Systemen, ist für 89,99 Euro erhältlich und kann vorab für zwei Wochen getestet werden. Hier geht es zum Download der Testversion. Es gibt eine ausführliche Dokumentation sowie ein deutschsprachiges Forum zum Austausch mit anderen Anwendern.

(pot/dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Fotor: Kostenlose Bildbearbeitung für jedermann und jedes Gerät

Wirklich gute Bildbearbeitungsprogramme findet man nur sehr selten. Besonders, wenn sie kostenlos sein sollen. Die Fotor-Bildbearbeitung stellt eine rühmliche Ausnahme dar, denn Sie ist nicht nur kostenlos, sondern auch auf allen Plattformen erhältlich. Eine hervorragende Smartphone-App gibt es für Android und iOS, die Desktop-Anwendung bekommt man für Windows und Mac. Gerade die Smartphone-App ist für Foto-Freunde sehr interessant, denn die Funktionen zur Verbesserung der aufgenommenen Fotos funktionieren ausgezeichnet. Grund genug für uns, Ihnen die Fotor App-Familie einmal genauer vorzustellen.

fotor-app-teaser

Der Fotor Photo-Editor – die Smartphone-App

Die Smartphone-App ist hoch interessant, weil sie einerseits sehr vielseitig, anderseits sehr einfach und benutzerfreundlich in der Bedienung ist. Fotor bringt hier nicht nur einfache Funktionen zur nachträglichen Bildbearbeitung mit, sondern noch einen ganzen Haufen weiterer Features. Zum Beispiel besitzt die App eine eigene Kamera mit 6 verschiedene Kamera-Modi. Sie können Fotos schießen mit den Funktionen Raster, Große Tasten, Burst, Quadrat, Timer und Stabilisator. Gleich im Anschluss können sie das aufgenommene Foto mit dem Foto-Editor bearbeiten.

Die Qualität der Fotos lässt sich mit nur einem Klick tatsächlich zum Teil immens verbessern. Dieser Effekt kommt besonders bei Aufnahmen im schlechten Licht zum Tragen. Hier einige Funktionen der Fotor App:

  • 13 verschiedene Fotoeinstellungen, um die Bilder ganz den Bedingungen bei der Aufnahme anzupassen
  • Fotos bearbeiten mit Dutzenden von einfachen und erweiterten Tools
  • Über 50 Filter und Effekte,  jedes Foto lässt sich durch mehrere Effekte schicken
  • Fotos können mit Texten, Stickern und Rahmen versehen werden
  • Anpassung der Tiefenschärfe
  • Mit dem Pixelpinsel können Sie Bilder verpixeln
  • Collagen erstellen: Klassisch: Verwenden Sie bis zu 9 Fotos in einer Collage mit zahlreichen Vorlagen
  • Collagen erstellen: Magazin: Erstellen Sie eine Collage mit den eingebauten Magazinvorlagen

Fotor Photo Editor
Fotor-App: Kamera, Galerie Ansicht mit Auswahl und Verbesserungen

Trotz des relativ hohen Funktionsumfangs ist der Umgang sehr einfach. Ich finde mich überall schnell zurecht. Die Kamera löst langsamer aus als meine Stock-Kamera (Galaxy Note 3), liefert bei gutem Licht jedoch auch gute Ergebnisse. Bei schlechterem Licht greife ich lieber auf meine Samsung-Kamera-App zurück, da diese unter diesen Umständen bessere Ergebnisse bringt.

Wenn es um das Verbessern von Fotos geht, welche unter schlechten Lichtverhältnissen aufgenommen wurden, ist der Fotor Photo Editor fast unschlagbar und liefert tolle Ergebnisse ab.

Fotor App
Ein verbessertes Foto, die Mosaik-Funktion und ein Collagen-Rahmen

Die Startseite der App zeigt standardmäßig die Galerieübersicht mit den drei Buttons „Kamera, Bearbeiten und Collage“, jedoch kann die Startseite auch auf die Kamera der App eingestellt werden. Die Einstellungsmöglichkeiten berücksichtigen ebenfalls den Speicherpfad und die Auflösung der mit der Fotor Kamera-App geschossenen Fotos.

Die Funktion „Verbessern“ im Detail

Fotos verbessern mit Fotor
Links: das original Foto. Rechts: Verbessert mit Fotor

Bereits die niedrige Verbesserung bringt oftmals schöne Ergebnisse und ist leicht anzuwenden. Man kann alle Möglichkeiten ausprobieren und immer wieder zum Original-Foto zurückkehren. Damit Sie sich ein Bild von der Qualität der Verbesserungen machen können, verlinke ich zwei Fotos. Aufgenommen wurden diese Fotos mit der Kamera eines Samsung Galaxy Note 3 bei schlechten Lichtverhältnissen. Sie sehen einmal das Original und darunter das mit Fotor verbesserte Foto.

Ein Klick auf die Fotos öffnet die Version in voller Auflösung.

Original Foto Hamburg-Eppendorf
Das Original-Foto aus Hamburg-Eppendorf

Das von Fotor verbesserte Foto von Hamburg-Eppendorf
Die von Fotor verbesserte Version des obigen Bildes

Fotor Photo Editor: Download für Android | für iOS

Die Fotor Desktop Anwendung

Fotor für den heimischen Rechner ist für Windows und Mac erhältlich. Der Aufruf des Programms zeigt ebenfalls die drei Hauptfunktionen an, unter denen man wählen kann. Ein Foto bearbeiten, eine Collage erstellen oder viele Fotos gleichzeitig bearbeiten (die Batch-Funktion).

hauptfunktionen-fotor-desktop-app

Die Oberfläche der App zeigt sich modisch dunkel und aufgeräumt. Ein kleiner Schatten in der App zeigt sich unten rechts in der Ecke, es wird eine nicht sonderlich störende Werbung eingeblendet. Es scheint so, dass sich Fotor auf diese, vergleichsweise zurückhaltende Weise finanziert.

fotor-desktop-oberflaeche

Fotor for Desktop schluckt alle wichtigen Dateiformate, wie JPG, TIFF, PNG, GIF und bietet eine Umwandlungs-Funktionalität für RAW Formate.

Die Funktionen von Fotor for Desktop

Fotor ist eine einfach zu bedienende Bildbearbeitung, mit der Sie Fotos bearbeiten können, ohne ein Photoshop-Profi zu sein. Die Bildverarbeitung geht zügig, Sie können die Belichtung, die Helligkeit, den Kontrast, einen Weißabgleich und die Sättigung, die Schärfe und Unschärfe anpassen. Zuschneiden, gerade richten, drehen, Text hinzufügen, rote Augen korrigieren und vieles mehr können Sie ebenfalls durchführen. Schauen wir uns einmal einige weitere Funktionen genauer an:

Batch Processing – die Stapelverarbeitung

Die Stapelverarbeitung spart Ihnen viel Zeit und Mühe, wenn es darum geht, Dutzende von Fotos auf einmal zu bearbeiten. Sie können Szenen, Effekte und Rahmen anwenden, die Größe ändern, die Fotos umbenennen und Dateikonvertierungen durchführen.

batch-groessenaenderung
Größenänderung im Stapel

batch-effekte
Effekte im Stapel anwenden

Collagen erstellen

Die Collagen-Funktion gibt Ihnen eine Menge Möglichkeiten, kreativ zu sein. Sie können aus 80 verschiedenen Vorlagen auswählen, in die bis zu 9 Fotos auf einmal integrierbar sind. Mit der „Freestyle“-Funktion können Sie die Fotos nach eigenem Gutdünken mit mehr als 20 Hintergründen anordnen.

collagen-anfertigen-mit-fotor
Auf der linken Seite die Fotos hinzufügen und dann per Drag and Drop in die Vorlage ziehen

Die Tilt Shift-Funktion

Sehr interessant ist auch die Tilt Shift-Funktion, die es Ihnen ermöglicht, im Nachhinein eine andere Blende zu wählen, als die, mit der das Foto aufgenommen wurde. Das verschafft Ihnen die Möglichkeit, die Tiefenschärfe direkt zu beeinflussen und sie dorthin zu legen, wo Sie die Schärfe haben wollen.

tiefenschaerfe-mit-fotor-festlegen

Das mit der Tilt Shift-Funktion bearbeitete Bild. Verwendet wurde die Blende F/8. Ein Klick öffnet die hohe Auflösung des Bildes.

Tiefenschärfe mit Fotor bearbeitet - Blende F/8

Die Verbesserungen für bestimmte Aufnahme-Szenarien

Die meisten Bilder sind nicht in einer kontrollierten Umgebung aufgenommen worden und manchmal gibt es keine Zeit, um die Einstellungen an der Kamera zu ändern, wenn die Bedingungen wechseln. „Szenen“ bietet 13 verschiedene 1-Klick-Verbesserungen, die für bestimmte Aufnahme-Bedingungen konzipiert wurden. Zum Beispiel Wolkig, Nacht, Blitz, Sonnenuntergang, Portrait und weitere.

Verbesserungen für bestimmte Aufnahme-Szenarien

Effekte, Texte und Rahmen

Fotor bietet Ihnen eine riesige Palette an Effekten und Rahmen. Nach Aussagen des Unternehmens wurde dieser Bereich der App in Zusammenarbeit mit professionellen Fotografen und Designern erarbeitet. Die Anwendung offeriert 90+ Effekte, darunter klassische, Lomo, Schwarzweiß, künstlerische Effekte und Vignetten. Des Weiteren können Sie unter 30 verschiedenen Rahmen wählen. Ebenfalls besteht die Möglichkeit, den Bildern Text hinzuzufügen. Hier können Sie die Schriftart, Textgröße und Farbe einstellen. Die Texte lassen sich drehen (Rotate) und in der Größe leicht anpassen. Die Transparenz des Textes kann ebenso beeinflusst, wie auch ein Textschatten vergeben werden kann.

text-werkzeug-fotor

Fotor for Desktop: Download für Mac OS X | Windows | Windows8

Die Fotor Webanwendung

Die Fotor Webanwendung

Auch eine reine Webanwendung wird angeboten, diese hat jedoch nicht den gleichen Funktionsumfang, wie die dedizierten Apps zum Installieren auf dem Smartphone oder dem Desktop-Rechner. Für das schnelle Bearbeiten ist die Web-App durchaus geeignet. Es bietet sich noch die Möglichkeit, die Bilder direkt in den Sozialen Netzwerken zu teilen. Genau das erscheint mir die richtige Anwendungsmöglichkeit für die Web-App zu sein – eine kurze Optimierung, um die Bilder anschließend bei Twitter, Facebook oder Google+ zu posten.

Fazit

Um Fotos sehr schnell, sehr einfach und hinreichend wirkungsvoll zu bearbeiten, gibt es meiner Meinung nach kaum etwas Besseres. Die einfache und intuitive Art der Optimierung und die wirklich brauchbaren Ergebnisse lassen andere Programme schnell in Vergessenheit geraten. Hinzu kommen noch die vielen Funktionen zur „Bildverschönerung“. Selbstverständlich kann Fotor kein Photoshop und auch kein Affinity Photo ersetzen, die beide sehr viel mehr Funktionen und Anwendungsbereiche bieten. Doch wenn es um die reine Fotobearbeitung Quick-and-Dirty geht, dann ist Fotor immer eine gute Alternative.

Links zum Beitrag:

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Sonstige Programme

Affinity Photo Beta: Die erste echte Photoshop-Alternative?

Am 10. Februar diesen Jahres erblickte eine neue Software für kreatives Design das Licht der Öffentlichkeit: Affinity Photo geht in die kostenfreie Beta-Phase und ist exklusiv für Mac OS X erhältlich. Das Programm versteht sich als High-End-Konkurrenz zu Adobe Photoshop, den unumstrittenen Platzhirschen der Branche. Nach der Beendigung der Beta-Phase wird Affinity Photo exklusiv im Mac App-Store für voraussichtlich schmale € 49.99 erhältlich sein. Heute werfen wir einen genauen Blick auf die neue Software, die auch auf Deutsch erhältlich ist, und vergleichen sie mit dem großen Konkurrenten, Adobe Photoshop.

AffinityPhotoBeta-teaser

Erste Eindrücke der Affinity Photo App

Affinity Photo befindet sich in einer kostenfreien Beta-Phase. Jeder kann sich für die Nutzung registrieren und das Programm eingehend testen, ohne das Zwiebelleder bemühen zu müssen. Als erstes fällt die Geschwindigkeit auf, mit der sich die App öffnet. Affinity Photo ist in weniger als der Hälfte der Zeit, die Photoshop benötigt, bereits betriebsbereit. Liegt das am kleineren Featureset? Die Oberfläche ist modern, klar, aufgeräumt und kommt mit einer modernen, dunklen UI daher. Photoshop-Nutzer fühlen sich sofort heimisch, weil sich Werkzeuge und andere wichtige Elemente an den bekannten Plätzen befinden.

Affinity Photo Oberfläche

Affinity Photo wendet sich eindeutig an Design- und Foto-Schaffende, die jeden Tag auf die Software angewiesen sind. Professionelle Fotografen profitieren von Features wie Frequenztrennungs-Bearbeitung, Live-Mischmodi, Fehlerkorrekturen und erweiterte Retusche. Im Gegensatz zu anderen vermeintlichen Photoshop-Rivalen verfügt die Software über End-to-End-CMYK, 16-Bit pro Kanal Bearbeitung, LAB-Farbraum, RAW-Verarbeitung, ICC-Farbmanagement, Photoshop PSD-Kompatibilität, sowie über eine 64-Bit Plugin-Kompatibilität zum Bestand des Gegners.

Affinity Photo ist mit OS X Lion 10.7.5 und höher auf der Intel Macs 64-Bit Plattform kompatibel und ist zur Zeit verfügbar in Englisch, Deutsch, Spanisch und Französisch. Anwender von Affinity Designer werden sich freuen, zu hören, dass die Zusammenarbeit zwischen beiden Programmen problemlos und intuitiv, fast schon nahtlos funktioniert.

Da die Beta noch recht frisch auf dem Markt ist, kann noch keine zuverlässige Aussage getroffen werde, ob alle beliebten Photoshop-Aktionen importiert werden können. Aber dessen Plugins und Stile für Photoshop können definitiv mit Affinity Photo verwendet werden.

Für den folgenden Vergleich haben wir Photoshop CS5 herangezogen, obwohl wir auch die aktuellste CC-Version zur Verfügung haben. Wir glauben, dass das Szenario eines Wechselwilligen eher dieser Konfiguration entspricht. Denn diejenigen Designer, die ohnehin immer die Jahresupdates von Adobe mitgemacht haben, können nicht die sein, die Sturm gegen das Abo-Modell laufen. Denn das Abo-Modell ist ja billiger als das vorherige Jahresupdate-Modell. Hinzu kommt: wieso sollte jemand, der die CC abonniert hat, in Erwägung ziehen, zu Affinity zu wechseln? Können wir uns nicht vorstellen.

Die Oberflächen: Affinity Photo vs. Photoshop

Affinity Photo
Ein Klick auf das Bild öffnet einen hochauflösenden Screenshot
Die Oberfläche von Affinity Photo

Photoshop CS5
Ein Klick auf das Bild öffnet einen hochauflösenden Screenshot
Die Oberfläche von Photoshop CS5

Da ich Photoshop CS5 verwende, fällt mir natürlich sofort die Retina-Display-Unterstützung von Affinity Photo ins Auge. Doch das ist nur natürlich, denn Photoshop CS5 stammt aus 2011 und wurde nicht auf Retina-Unterstützung programmiert. Ein weiterer Fakt ist die gleiche Anordnung der einzelnen Elemente, Werkzeuge und Funktionen. Der linke Werkzeugbereich ist bei beiden Anwendungen mehrfach belegt und auch der rechte Bereich ist ähnlich strukturiert. Der wirkliche Unterschied fällt sofort auf, denn bei Photoshop ist vieles in die rechte Seitenleiste ausgelagert, was sich in der Übersichtlichkeit eher negativ auswirkt.

Affinity Photo geht hier einen anderen Weg, vieles ist hier in die obere Leiste integriert worden, was der Übersichtlichkeit sehr zuträglich ist. Die obere Leiste kann auf eigene Bedürfnisse hin optimiert und angepasst werden. Die Programme verfügen über viele Gemeinsamkeiten, die Funktionsvielfalt ist ähnlich. Obwohl Photoshop natürlich immer noch umfangreicher ist und über eine regere Community verfügt. Das fehlt Affinity Photo noch, sollte aber angesichts der Tatsache, dass Adobes Bolide seit 25 Jahren am Markt ist, niemanden wirklich überraschen.

Viele Funktionen aus Photoshop sind auch in Affinity Photo vorhanden und zumeist an derselben Stelle zu finden. Die häufigsten Filter befinden sich bei beiden Programmen an derselben Stelle, allerdings besitzt Photoshop noch etliche mehr als sein günstiger Konkurrent. Sicherlich, Photoshop muss ja seinen Preis irgendwie rechtfertigen können.

Ein Vergleich: Fotos für das Web speichern

Die für mich als Autor wichtigste Funktion ist das Zurechtschneiden und Abspeichern von Fotos für die Nutzung im Internet. Daher ist ein Vergleich beider Programme mit denselben Einstellungen recht interessant. Ich denke, so wird es auch den meisten Bloggern gehen, die viel mit Bildmaterial arbeiten. Als Einstellung wähle ich: Qualität 80%, Zuschnitt auf 640 Pixel Breite und die Einstellung „Bikubisch“. Das Ausgangsbild ist 647 KB groß mit den Ausmaßen von 1732 × 1155 Pixel.

Beispielfoto Affinity Photo (70 KB):

Working Desk

Beispielfoto Photoshop (110 KB):

Working Desk

Der Unterschied in der ausgegebenen Dateigröße ist extrem. Die Qualität des ausgegebenen Fotos von Photoshop ist natürlich besser, wird aber durch eine bedeutend höhere Dateigröße erkauft. Im Sinne der SEO und der Performance einer bildlastigen Website hat Affinity Photo klar die Nase vorn. Schon bei wenigen Bildern pro Artikel spart man recht viel an bremsender Dateigröße ein.

Die Exportfunktion von Affinity Photo

„Für Web und Geräte speichern“ heißt bei Affinity „Exportieren“ und ist zu finden unter dem Menüpunkt „Datei“. Die Exportfunktion von Affinity Photo ist sehr umfangreich. Man kann nicht nur als PNG, GIF und JPG speichern, sondern auch als TIFF, PSD und PDF.

Speichermöglichkeiten unter Affinity Photo – „Exportieren“

Die Exportfunktion von Affinity Photo

Speichermöglichkeiten unter Photoshop – „Speichern unter“

Die Möglichkeiten zum Abspeichern unter Photoshop

Rechnet man die „Speichern unter“-Funktionen bei Photoshop hinzu, bietet das teurere Programm natürlich wesentlich mehr Möglichkeiten zum Abspeichern von Dateien an. Bei Affinity Photo hingegen gibt es keine weiteren Dateiformate zum Speichern, denn unter „Speichern unter“ wird nur das native Dateiformat angeboten, man kann also nichts weiteres auswählen.

Trotzdem sind die angebotenen Funktionen von Affinity für ein Programm mit einem angepeiltem Verkaufspreis von nur € 49.99 schon ziemlich gut und für die meisten Anwendungsbereiche sicherlich ausreichend.

Affinity Photo Beta im Video

Einige Funktionen von Affinity Photo im Test

Das Gute an der Oberfläche von Affinity Photo ist die Übersichtlichkeit. Alle Module sind standardmäßig aktiv und werden angezeigt. Natürlich sind es eine ganze Menge weniger als in Photoshop, doch die Navigation durch die Menüs ist – nicht zuletzt dadurch – auch wesentlich einfacher.

Gaußscher Filter

Gaußscher Filter im Einstz bei Affinity Photo

Photoshop hat eine Menge mehr an Filtern zu bieten, doch die wichtige Frage steht natürlich im Raum: Brauchen wir das alles? Das, was Affinity an Filtern bietet, lässt sich intuitiv bedienen. Die Einarbeitungszeit in das neue Programm ist recht kurz und erste, gute Ergebnisse gelingen schnell.

Unscharf maskieren

Unscharf maskieren in Affinity Photo

Photoshop hat sehr viel mehr Schärfe-Filter, doch für viele Anwendungsbereiche sollten „Klarheit“ und „Unscharf maskieren“ ausreichen.

Arbeit mit Texten

Grundsätzlich empfinde ich die Arbeit mit dem Text-Werkzeugen als relativ einfach, sogar einfacher als in Photoshop. Einmal geschriebene Texte können nicht nur frei bewegt, sondern auch beliebig gezoomt und in der Größe angepasst werden. Auch der Winkel, in dem der Text stehen soll, ist sehr einfach zu gestalten – Textrahmen anfassen und in den passenden Winkel verschieben. Die Möglichkeiten sind bei Photoshop allerdings umfangreicher, aber weniger einfach zu verwenden.

Affinity Photo - Die Arbeit mit Texten

Ich vermisse zur Zeit das „Ineinanderkopieren“ von Text-Schatten in den Text. Das würde ich auf meine Wunschliste für eine spätere Version setzen.

Affinity Photo - Die Arbeit mit Texten

Die „Zeichen“-Funktion von Affinity gefällt mir sehr gut. Hier hat der günstige Rivale dem Platzhirschen wirklich etwas voraus.

Fotobearbeitung Affinity Photo vs. Photoshop

Für viele Fotografen sind die vielfältigen Möglichkeiten zur Foto-Nachbearbeitung in Photoshop ein Kaufgrund gewesen. Sehr vieles kann im Programmteil „Camera Raw“ manuell angepasst und beeinflusst werden, sofern es sich um eine JPEG-/JPG- oder RAW-Datei handelt.

photoshop-camera-row

Wichtig für professionelle Fotografen ist auch die Bearbeitung von Fotos im RAW-Format, das beide Programme beherrschen.

Photoshops Möglichkeiten zur Nachbearbeitung

fotonachbearbeitung-photoshop

Affinitys Möglichkeiten zur Nachbearbeitung

Zur Anzeige aller Möglichkeiten habe ich den Umweg über die Ebenen genommen, jedoch sind alle Funktionen in der rechten Sidebar leicht zugänglich.

fotonachbearbeitung-affinity-foto

Auch hier bietet Photoshop etwas mehr an Möglichkeiten, jedoch sind die praktischen Auto-Korrekturen nur über das Menü zugänglich und nicht wie bei Affinity gleich über die obere Leiste. Unter Umständen arbeitet es sich mit dem Schnellzugang also komfortabler.

Die gut zugänglichen Auto-Korrekturen der Fotonachbearbeitung in Affinity Photo
Schnell zugängliche Auto-Korrekturen für die Fotonachbearbeitung in Affinity Photo

Die Auto-Korrekturen im direkten Vergleich

Um einen direkten Vergleich der Foto-Auto-Korrekturen beider Programme zu haben, wähle ich ein nicht sonderlich gelungenes Foto aus und lasse die Auto-Korrekturen der jeweiligen Programme darüber laufen. Ich verlinke zum besseren Vergleich auch das Original-Bild, damit Sie sich einen besseren Eindruck von den Möglichkeiten beider Programme machen können. In Photoshop wendete ich die Auto-Korrekturen „Auto Farbton“, „Auto Kontrast“ und „Auto Farbe“ an und in Affinity die Korrekturen „Auto Tonwert“, „Auto Kontrastkorrektur“ und „Auto Farbkorrektur“.

Das Originalbild – Hamburger Hafen

Ein Klick auf das Bild öffnet die Original-Datei
Hamburger Hafen

Auto-Korrektur mit Adobe Photoshop

Ein Klick auf das Bild öffnet die Original-Datei
Der Hamburger Hafen nach Auto-Korrektur mit Photoshop

Auto-Korrektur mit Affinity Photo

Ein Klick auf das Bild öffnet die Original-Datei
Der Hamburger Hafen nach Auto-Korrektur mit Affinity Photo

Auto-Korrektur Affinity Photo ohne Auto Farbkorrektur

Ein Klick auf das Bild öffnet die Original-Datei
Affinity Photo Korrektur

Sicherlich erzeugen beide Programme ansprechende Ergebnisse. Die Entscheidung, welches Ergebnis nun das Bessere ist, überlasse ich dem Betrachter.

Affinity Photo – Arbeitsbereiche

Affinity Photo bietet verschiedene Arbeitsbereiche, Personas genannt. Diese Personas sind Module, die jeweils für einen spezifischen Anwendungsbereich die dafür nötigen Werkzeuge zur Verfügung stellen. Es existieren zur Zeit folgende Personas: Photo, Liquify, Develop (für Raw-Bilder), Macro (für die Aufzeichnung von Aktionen) und Export. Etwas ähnliches wären die Photoshop-Arbeitsbereiche, doch es ist nicht ganz dasselbe.

So erreichen Sie die einzelnen Personas:

Der Zugang zu Affinitys Personas

Mit dem Liquify Persona kann man surreale Verwirbelungs- und Verzerrungs-Effekte erstellen.

Die Arbeit mit dem Liquify-Persona von Affinity Photo

Das Export Persona bietet vielfältige Möglichkeiten des Exports von Bildern an, zum Beispiel kann man sie in 3-facher Dateigröße exportieren. Auch das Erstellen von Slices ist im Export Persona möglich.

Das Export Personas von Affinity Photo

RAW-Dateien bearbeiten

Photoshop: Photoshop bietet umfassende Möglichkeiten zur Bearbeitung von RAW-Dateien in Camera RAW. Eine Funktion, die Affinity Photo zur Zeit noch nicht bietet, ist das Drehen (90 Grad im und gegen den Uhrzeigersinn) von Dateien.

RAW-Dateien in Photoshop bearbeiten

Affinity Photo: Ansonsten steht Affinity Photo Photoshop in den Möglichkeiten der RAW-Foto-Bearbeitung nicht nach. Ganz im Gegenteil sogar, die Funktionen für die RAW-Bearbeitung scheinen in Affinity Photo wesentlich umfassender zu sein. Wie ich bereits erwähnte, fehlt nur die Möglichkeit des Drehens von Fotos. Die Funktionen zur Bearbeitung von RAW-Dateien sind im Develop Persona gebündelt.

RAW-Dateien in Affinity Photo bearbeiten

Die rechte Seitenleiste von Affinity ist im Develop Persona ausschliesslich der RAW-Bearbeitung vorbehalten und bietet echte Funktionsvielfalt.

Die Belegungen der rechten Seitenleiste zur RAW-Bearbeitung in Affinity Photo

Das Macro Persona für die Aufzeichnung von Aktionen ist in der von mir getesteten Beta-Version (1.1.2.22821) leider nicht funktional, so dass keine Aussage darüber getroffen werden kann.

Fazit

Affinity Photo erscheint bereits in der Beta-Phase als erste echte, ernst zu nehmende Alternative zu Adobe Photoshop. Die Funktionsvielfalt ist für ein Programm in der angepeilten Preis-Kategorie unglaublich. Gleichzeitig wurde viel Wert auf eine leicht verständliche Arbeitsweise mit dem Programm gelegt. Vieles ist intuitiv zu erfassen und wer bereits mit Photoshop gearbeitet hat, kommt mit Affinity Photo sofort zurecht. Sicher wird man sich an die eine oder andere Funktion erst gewöhnen müssen, doch ist die Lernkurve im Umgang mit Affinity Photo wesentlich steiler als bei seinem High-End-Konkurrenten.

Tutorials oder eine Dokumentation zum neuen Programm sind leider noch nicht vorhanden, doch können im Affinity-Forum Fragen gestellt und Anregungen für zukünftige Versionen gegeben werden.

Mit Alternativen zu Photoshop haben wir uns bei Dr. Web schon in der Vergangenheit beschäftigt.

Links zum Beitrag

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme Webdesign

Adobe Lightroom für unterwegs: So klappt die Bildbearbeitung auf Mobilgeräten (jetzt auch unter Android)

Letzten Monat hat Adobe die neue Version seiner Lightroom-App für Mobilgeräte veröffentlicht. Erstmals steht diese nicht nur für iPhones und iPads zur Verfügung, sondern auch für Android-Geräte. Aber wie gut klappt die Fotobearbeitung per Tablet oder gar Smartphone?

lightroom-app

App kostenlos, aber nur mit Abo nutzbar

Die Lightroom-App ist kostenlos in den jeweiligen App-Stores erhältlich, lässt sich jedoch nur mit einem Creative-Cloud-Abo von Adobe nutzen. Des weiteren muss Lightroom als Desktopanwendung  mindestens in der Version 5.4 installiert sein. Dafür ist es dann aber möglich, Fotos nach Belieben auf dem Desktop und dem Mobilgerät zu bearbeiten. Voraussetzung ist allerdings, dass man sich mit der Desktopanwendung über seine Adobe-ID im Lightroom-Netzwerk anmeldet – auch wenn man bereits in der Creative Cloud angemeldet ist. Über das Lightroom-Netzwerk werden nun alle Fotos zwischen Desktopanwendung und mobiler App synchronisiert.

lightroom-desktop-synchronisierung
Anmelden zur Synchronisierung in der Desktopanwendung

Außerdem hat man über eine Weboberfläche Zugriff auf alle Fotosammlungen, die man synchronisiert. Diese lassen sich auf sozialen Netzwerken teilen oder als Link an bestimmte Personen weitergeben.

Fotos per App bearbeiten

Wie die klassische Lightroom-Anwendung unterstützt auch die App zahlreiche RAW-Formate und kann freilich auch JPEG- und PNG-Dateien öffnen. In den meisten Fällen wird man wohl ohnehin eher Aufnahmen bearbeiten wollen, die mit dem Smartphone selbst gemacht wurden.

lightroom-app-grundeinstellungen
Grundeinstellungen in der App

Öffnet man ein Foto in der App, stehen einem viele bekannte Möglichkeiten zur Bearbeitung zur Verfügung. So sind alle Funktionen der Grundeinstellungen vorhanden. Darüber lassen sich unter anderem Temperatur, Weißabgleich und Tönung sowie die verschiedenen Werte für Tonwert und Präsenz einstellen.

Neben den Grundeinstellungen gibt es über 40 Vorgaben, die in fünf Kategorien unterteilt sind. Über diese Vorgaben lassen sich Fotos unter anderem in bestimmte Farbstimmungen bringen oder mit Effekten wie Körnungen und Vignetten versehen. Die Vorgaben der App sind nicht so umfangreich wie die der Desktopanwendung, aber dennoch recht vielfältig.

lightroom-app-vorgaben
Vorgaben in der App

Als drittes ist das Freistellungswerkzeug integriert. Auch hier lassen sich wie in der Desktopanwendung verschiedene Seitenverhältnisse auf einen Bildausschnitt anwenden. Anders als auf dem Desktop ist eine Drehung des Bildes jedoch nicht möglich.

Wie man es von Lightroom gewohnt ist, werden Änderungen nicht destruktiv gespeichert. Dabei arbeitet die App mit sogenannten Smart-Vorschauen, die über die Desktopanwendung mit den Originalfotos synchronisiert werden.

lightroom-app-freistellungswerkzeug
Freistellungswerkzeug in der App

Ebenfalls in die mobile App übernommen wurde die Diashow. Sammlungen lassen sich so einfach präsentieren und anderen zeigen.

Bedienung mit Zwei- bis Dreifingergesten

Während man am Desktop mit Maus und Tastatur genügend Eingabegeräte hat, um schnell und effektiv Einstellungen vornehmen zu können, hat man am Tablet oder Smartphone lediglich seine Hand zur Verfügung.

Daher lassen sich in der Lightroom-App bestimmte Funktionen mit Zwei- beziehungsweise Dreifingergesten aufrufen. So werden per Doppeltipp mit zwei Fingern die Metadaten beziehungsweise das Histogramm des Fotos eingeblendet. Der dritte Finger kommt ins Spiel, wenn es darum geht, während der Bearbeitung eine Vorher-Nachher-Ansicht einzublenden. Hält man drei Finger auf das Foto, wechselt die Ansicht in die Vorher-Ansicht. Beim Loslassen erscheint wieder die aktuelle Ansicht.

Fotos bewerten und markieren

Das Bewertungssystem von Lightroom steht auch in der App zur Verfügung. Neben der Vergabe von bis zu fünf Sternen gibt es auch die Möglichkeit, Fotos als “ausgewählt” oder “abgelehnt” zu markieren. Über einfache Gesten nach oben beziehungsweise unten können Fotos innerhalb einer Sammlung schnell sortiert werden.

Intuitive Bedienung für schnelle Bildbearbeitung

Insgesamt ist die Bedienung der App sehr intuitiv und dank der kurzen Hilfeeinblendungen während der ersten Anwendung schnell verständlich. Die Synchronisation mit der Desktopanwendung sorgt für einen unkomplizierten Wechsel zwischen den Anwendungen.

Eine professionelle Bildbearbeitung würde ich mit der App nicht machen. Aber wer mit seinem Smartphone Fotos in sozialen Netzwerken teilen möchte, hat mit der Lightroom-App viele Möglichkeiten, von unterwegs das Beste aus seinen Fotos herauszuholen.

Übrigens: Mit LightZone und Darktable haben wir Ihnen hier bei Dr. Web bereits veritable Alternativen zu Lightroom vorgestellt. Die funktionieren zwar nicht mobil, sind dafür aber komplett kostenlos.

Links zum Beitrag

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Illustrator Photoshop Sonstige Programme

Adobe InDesign für Tutorial-Freunde: Die komplette Übersetzung von Englisch zu Deutsch

Adobe InDesign ist der Profi für Layout und Satz professioneller Druckerzeugnisse. Eher in Werbeagenturen und Druckereien im Einsatz, gibt es kaum deutschsprachige Tutorials zu entdecken, da diese Software nicht von der Masse eingesetzt wird, anders als etwa Photoshop oder auch Illustrator. Englischsprachige Inhalte liegen zwar zahlreich vor, doch mit unserer deutschen InDesign-Version kommen wir da nicht so schnell voran. Als Lösung bietet sich diese komplette Übersetzung an. Damit erschließen Sie sich die bunte Welt der englischsprachigen Tutorials schnell und effektiv…

teaser-indesign-uebersetzung

Wir haben die wichtigsten Begriffe in den Menüeinträgen und Werkzeugleisten gelistet und ins Deutsche übersetzt. Leicht können Sie zum jeweiligen Menüeintrag springen. Sind Sie übrigens auf der Suche nach genau einer solchen Übersetzung, bloß für Illustrator? Das haben wir uns schon gedacht und den Beitrag „Adobe Illustrator für Tutorial-Freunde“ veröffentlicht. Auch für Photoshop-Verwender gibt es den entsprechenden Beitrag, unter „Adobe Photoshop für Tutorial-Freunde„.

Sprungbrett

File | Datei

Edit | Bearbeiten

Layout | Layout

Type | Schrift

Object | Objekt

Table | Tabelle

View | Ansicht

Window | Fenster

Help | Hilfe

Tools | Werkzeuge

Sprache der Software ändern

Anwendungsmenüs

File | Datei

Englischer Begriff Deutsche Übersetzung
File
New > Document… Neu > Dokument…
New > Book… Neu > Buch…
New > Folio… Neu > Folio…
New > Library… Neu > Bibliothek…
Open… Öffnen…
Browse in Bridge… Bridge durchsuchen…
Folio Preview Foliovorschau
Folio Preview Settings… Foliovorschau-Einstellungen…
Close Schließen
Save Speichern
Save as… Speichern unter…
Check in… Einchecken
Save a Copy… Kopie speichern…
Revert Zurück zur letzten Version
Place… Platzieren…
Import XML… XML importieren…
Adobe PDF Presets Adobe PDF-Vorgaben
Export… Exportieren…
Document Presets > Define… Dokumentenvorgaben > Definieren#8230;
Document Setup… Dokument einrichten…
User… Benutzer…
File Info… Dateiinformationen…
Package… Verpacken…
Print Presets > Define… Druckvorgaben > Definieren…
Print… Drucken…
Print Booklet… Broschüre drucken…
Exit Beeenden

Seitenanfang

indesign1

Edit | Bearbeiten

Englischer Begriff Deutsche Übersetzung
Edit
Undo Rückgängig
Redo Wiederholen
Cut Ausschneiden
Copy Kopieren
Paste Einfügen
Paste without Formatting Unformatiert einfügen
Paste Into In die Auswahl einfügen
Paste in Place An Originalposition einfügen
Clear Löschen
Duplicate Duplizieren
Step and Repeat… Duplizieren und versetzt einfügen…
Place and Link Platzieren und Verknüpfen
Select All Alles auswählen
Deselect All Auswahl aufheben
InCopy > Add Selection to Assignment InCopy > Auswahl der Aufgabe
InCopy > Add Layer to Assignment InCopy > Ebene der Aufgabe hinzufügen
InCopy > Add All Stories to Assignment InCopy > Alle Textabschnitte der Aufgabe hinzufügen
InCopy > Add All Graphics to Assignment InCopy > Alle Grafiken der Aufgabe hinzufügen
InCopy > Export > Selection InCopy > Exportieren > Auswahl
InCopy > Export > Layer InCopy > Exportieren > Ebene
InCopy > Export > All Stories InCopy > Exportieren > Alle Textabschnitte
InCopy > Export > All Graphics InCopy > Exportieren > Alle Grafiken
InCopy > Export > All Graphics and Stories InCopy > Exportieren > Alle Grafiken und Textabschnitte
InCopy > Save Content InCopy > Inhalt speichern
InCopy > Check Out InCopy > Auschecken
InCopy > Check In InCopy > Einchecken
InCopy > Check In All InCopy > Alle einchecken
InCopy > Cancel Check Out InCopy > Auschecken abbrechen
InCopy > Update Content InCopy > Inhalt aktualisieren
Edit Original Original bearbeiten
Edit With > Other… Bearbeiten mit > Andere…
Go To Source Gehe zu Quelle
Edit in Story Editor Im Textmodus bearbeiten
Quick Apply Schnell anwenden
Find/Change Suchen/Ersetzen
Find Next Weitersuchen
Spelling > Check Spelling… Rechtschreibprüfung > Rechtschreibprüfung…
Spelling > Dynamic Spelling Rechtschreibprüfung > Dynamische Rechtschreibprüfung
Spelling > Autocorrect Rechtschreibprüfung > Autokorrektur
Spelling > User Dictionary… Rechtschreibprüfung > Benutzerwörterbuch…
Transparency Blend Space > Document RGB Transparenzfüllraum > Dokument-RGB
Transparency Blend Space > Document CMYK Transparenzfüllraum > Dokument-CMYK
Transparency Flattener Presets… Transparenzreduzierungsvorgaben…
Color Settings… Farbeinstellungen…
Assign Profiles… Profile zuweisen…
Convert to Profile… In Profil umwandeln…
Keyboardshortcuts… Tastaturbefehle…
Menus… Menüs…
Sync Settings > Sync Settings Now Einstellungen synchronisieren > Einstellungen jetzt synchronisieren
Sync Settings > Sync Settings is disabled Einstellungen synchronisieren > Einstellungen synchronisieren ist deaktiviert
Sync Settings > Manage Sync Settings Einstellungen synchronisieren > Einstellungen synchronisieren verwalten…
Sync Settings > Manage Creative Cloud Account… Einstellungen synchronisieren > Creative Cloud-konto verwalten…
Preference > General… Voreinstellungen > Allgemein…
Preference > Sync Settings… Voreinstellungen > Einstellungen synchronisieren…
Preference > Interface… Voreinstellungen > Benutzeroberfläche…
Preference > Type… Voreinstellungen > Eingabe…
Preference > Advanced Type… Voreinstellungen > Erweiterte Eingabe…
Preference > Composition… Voreinstellungen > Satz…
Preference > Units & Increments… Voreinstellungen > Einheiten und Einteilungen…
Preference > Grids… Voreinstellungen > Raster…
Preference > Guides & Pasteboard… Voreinstellungen > Hilslinien und Montagefläche…
Preference > Dictionary… Voreinstellungen > Wörterbuch…
Preference > Spelling… Voreinstellungen > Rechtschreibung…
Preference > Autocorrect… Voreinstellungen > Autokorrektur…
Preference > Notes… Voreinstellungen > Notizen…
Preference > Track Changes… Voreinstellungen > Änderungen verfolgen…
Preference > Story Editor Display… Voreinstellungen > Textmodusanzeige…
Preference > Display Performance… Voreinstellungen > Anzeigeleistung…
Preference > Appearance of Black… Voreinstellungen > Schwarzdarstellung…
Preference > File Handling… Voreinstellungen > Dateihandhabung…
Preference > Clipboard Handling… Voreinstellungen > Zwischenablageoptionen…

Seitenanfang

indesign2

Layout | Layout

Englischer Begriff Deutsche Übersetzung
Layout
Pages > Add Page Seiten > Seite hinzufügen
Pages > Insert Pages… Seiten > Seiten einfügen…
Pages > Move Pages… Seiten > Seiten verschieben…
Pages > Delete Pages… Seiten > Seiten löschen…
Pages > Apply Master to Pages… Seiten > Musterseite auf Seiten anwenden…
Pages > Transitions > Choose… Seiten > Seitenübergänge > Wählen…
Pages > Transitions > Edit Seiten > Seitenübergäbnge > Bearbeiten
Pages > Transitions > Clear All Seiten > Seitenübergänge > Alle löschen
Margins and Columns… Ränder und Spalten…
Ruler Guides… Hilfslinien
Create Guides… Hilfslinien erstellen…
Create Alternate Layout… Alternatives Layout erstellen…
Liquid Layout Liquid Layout
First Page Erste Seite
Previous Page Vorherige Seite
Next Page Nächste Seite
Last Page Letzte Seite
Next Spread Nächster Druckbogen
Previous Spread Vorheriger Druckbogen
Go to Page… Gehe zu Seite…
Go Back Zurück
Go Forward Vor
Numbering & Section Options… Nummerierungs- und Abschnittsoptionen…
Table of Contents… Inhaltsverzeichnis…
Update Table of Contents Inhaltsverzeichnis aktualisieren
Tabel of Contents Styles… Inhaltsverzeichnisformate…

Seitenanfang

indesign3

Type | Schrift

Englischer Begriff Deutsche Übersetzung
Type
Add Fonts from Typekit… Schriftarten aus Typekit hinzufügen…
Font Schrift
Size Schriftgrad
Character Zeichen
Paragraph Absatz
Tabs Tabulatoren
Glyphs Glyphen
Story Textabschnitt
Character Styles… Zeichenformate…
Paragraph Styles… Absatzformate…
Create Outlines In Pfade umwandeln
Find Font Schriftart suchen
Change Case > UPPERCASE Groß-/Kleinschreibung ändern > GROSSBUCHSTABEN
Change Case > lowercase Groß-/Kleinschreibung ändern > kleinbuchstaben
Change Case > Title Case Groß-/Kleinschreibung ändern > Erster Buchstabe Im Wort Groß
Change Case > Sentence case Groß-/Kleinschreibung ändern > Erster buchstabe im satz groß
Type on a Path > Options Pfadtext > Optionen
Type on a Path > Delete Type from Path Pfadtext > Text aus Pfad löschen
Notes > Notes Mode Notizen > Notizenmodus
Notes > New Note Notizen > Neue Notiz
Notes > Open Note Notizen > Notiz öffnen
Notes > Delete Note Notizen > Notiz löschen
Notes > Previous Note Notizen > Vorherige Notiz
Notes > Next Note Notizen > Nächste Notiz
Notes > Convert to Note Notizen > In Notiz umwandeln
Notes > Convert to Text Notizen > In Text umwandeln
Notes > Split Note Notizen > Notiz teilen
Notes > Expand/Collapse Notes in Story Notizen > Notizen in Textabschnitt maximieren/minimieren
Notes > Remove Notes from Story Notizen > Notizen aus Textabschnitt entfernen
Notes > Remove All Notes Notizen > Alle Notizen entfernen
Track Changes > Track Changes in Current Story Änderungen verfolgen > Änderungen in aktuellem Textabschnitt verfolgen
Track Changes > Enable Tracking in All Stories Änderungen verfolgen > Änderungsverfolgung in allen Textabschnitten aktivieren
Track Changes > Disable Tracking in All Stories Änderungen verfolgen > Änderungsverfolgung in allen Textabschnitten deaktivieren
Track Changes > Previous Change Änderungen verfolgen > Vorherige Änderung
Track Changes > Next Change Änderungen verfolgen > Nächste Änderung
Track Changes > Accept Change Änderungen verfolgen > Änderung annehmen
Track Changes > Reject Change Änderungen verfolgen > Änderung ablehnen
Track Changes > Accept Change, Find Next Änderungen verfolgen > Änderung annehmen, weiter zur nächsten
Track Changes > Reject Change, Find Next Änderungen verfolgen > Änderung ablehnen, weiter zur nächsten
Track Changes > Accept All Changes > In This Story Änderungen verfolgen > Alle Änderungen annehmen > In diesem Textabschnitt
Track Changes > Accept All Changes > In This Document Änderungen verfolgen > Alle Änderungen annehmen > In diesem Dokument
Track Changes > Reject All Changes > In This Story Änderungen verfolgen > Alle Änderungen ablehnen > In diesem Textabschnitt
Track Changes > Reject All Changes > In This Document Änderungen verfolgen > Alle Änderungen ablehnen > In diesem Dokument
Track Changes > Accept All Changes by This User > In This Story Änderungen verfolgen > Alle Änderungen von diesem Benutzer annehmen > In diesem Textabschnitt
Track Changes > Accept All Changes by This User > In This Document Änderungen verfolgen > Alle Änderungen von diesem Benutzer annehmen > In diesem Dokument
Track Changes > Reject All Changes by This User > In This Story Änderungen verfolgen > Alle Änderungen von diesem Benutzer ablehnen > In diesem Textabschnitt
Track Changes > Reject All Changes by This User > In This Document Änderungen verfolgen > Alle Änderungen von diesem Benutzer ablehnen > In diesem Dokument
Insert Footnote Fußnote einfügen
Document Footnote Options… Optionen für Dokumentfußnoten…
Hyperlinks & Cross-References > New Hyperlink… Hyperlinks und Querverweise > Neuer Hyperlink…
Hyperlinks & Cross-References > New Hyperlink from URL Hyperlinks und Querverweise > Neuer Hyperlink aus URL
Hyperlinks & Cross-References > Convert URLs to Hyperlink… Hyperlinks und Querverweise > URLs in Hyperlinks konvertieren…
Hyperlinks & Cross-References > Edit Hyperlink… Hyperlinks und Querverweise > Hyperlink bearbeiten
Hyperlinks & Cross-References > Insert Cros-Reference… Hyperlinks und Querverweise > Querverweise einfügen…
Hyperlinks & Cross-References > Cross-Reference Options… Hyperlinks und Querverweise > Querverweisoptionen…
Hyperlinks & Cross-References > Update Cros-Reference Hyperlinks und Querverweise > Querverweis aktualisieren
Text Variables > Define… Textvariablen > Definieren…
Text Variables > Insert Variable > Chapter Number Textvariablen > Variable einfügen > Kapitelnummer
Text Variables > Insert Variable > Creation Date Textvariablen > Variable einfügen > Erstellungsdatum
Text Variables > Insert Variable > File Name Textvariablen > Variable einfügen > Dateiname
Text Variables > Insert Variable > Image Name Textvariablen > Variable einfügen > Bildname
Text Variables > Insert Variable > Last Page Number Textvariablen > Letzte Seitenzahl
Text Variables > Insert Variable > Modification Date Textvariablen > Variable einfügen > Änderungsdatum
Text Variables > Insert Variable > Output Date Textvariablen > Variable einfügen > Ausgabedatum
Text Variables > Insert Variable > Running Header Textvariablen > Variable einfügen > Lebender Kolumnentitel
Text Variables > Conver Variable to Text Textvariablen > Variable in Text konvertieren
Bulleted & Numbered Lists > Apply Bullets Aufzählungs- und nummerierte Listen > Aufzählungszeichen anwenden
Bulleted & Numbered Lists > Apply Numbers Aufzählungs- und nummerierte Listen > Nummerierung anwenden
Bulleted & Numbered Lists > Restart/Continue Numbering Aufzählungs- und nummerierte Listen > Nummerierung neu beginnen/fortführen
Bulleted & Numbered Lists > Convert Bullets and Numbering to Text Aufzählungs- und nummerierte Listen > Aufzählungszeichen und Nummerierung in Text konvertieren
Bulleted & Numbered Lists > Define Lists… Aufzählungs- und nummerierte Listen > Listen definieren…
Insert Special Character > Symbols Sonderzeichen einfügen > Symbole
Insert Special Character > Markers Sonderzeichen einfügen > Marken
Insert Special Character > Hyphens and Dashes Sonderzeichen einfügen > Trenn- und Gedankenstriche
Insert Special Character > Quotation Marks Sonderzeichen einfügen > Anführungszeichen
Insert Special Character > Other Sonderzeichen einfügen > Andere
Insert White Space > Em Space Leerraum einfügen > Geviert
Insert White Space > En Space Leerraum einfügen > Halbgeviert
Insert White Space > Nonbreaking Space Leerraum einfügen > Geschütztes Leerzeichen
Insert White Space > Nonbreaking Space (Fixed Width) Leerraum einfügen > Geschütztes Leerzeichen (feste Breite)
Insert White Space > Hair Space Leerraum einfügen > 1/24-Geviert
Insert White Space > Sixth Space Leerraum einfügen > Sechstelgeviert
Insert White Space > Thin Space Leerraum einfügen > Achtelgeviert
Insert White Space > Quarter Space Leerraum einfügen > Viertelgeviert
Insert White Space > Third Space Leerraum einfügen > Drittelgeviert
Insert White Space > Punctuation Space Leerraum einfügen > Interpunktionsleerzeichen
Insert White Space > Figure Space Leerraum einfügen > Ziffernleerzeichen
Insert White Space > Flush Space Leerraum einfügen > Ausgleichs-Leerzeichen
Insert Brake Character > Column Break Umbruchzeichen einfügen > Spaltenumbruch
Insert Brake Character > Frame Break Umbruchzeichen einfügen > Rahmenumbruch
Insert Brake Character > Page Break Umbruchzeichen einfügen > Seitenumbruch
Insert Brake Character > Odd Page Break Umbruchzeichen einfügen > Umbruch für ungerade Seiten
Insert Brake Character > Even Page Break Umbruchzeichen einfügen > Umbruch für gerade Seiten
Insert Brake Character > Paragraph Return Umbruchzeichen einfügen > Absatzumbruch
Insert Brake Character > Forced Line Break Umbruchzeichen einfügen > Harter Zeilenumbruch
Insert Brake Character > Discretionary Line Break Umbruchzeichen einfügen > Bedingter Zeilenumbruch
Fill with Placeholder Text Mit Platzhaltertext füllen
Show Hidden Characters Verborgene Zeichen einblenden

Seitenanfang

indesign4

Object | Objekt

 

Englischer Begriff Deutsche Übersetzung
Object
Transform > Move Transformieren > Verschieben
Transform > Scale Transformieren > Skalieren
Transform > Rotate Transformieren > Drehen
Transform > Shear Transformieren > Scheren
Transform > Rotate 90 CW Transformieren > Um 90 Grad drehen (Uhrzeigersinn)
Transform > Rotate 90 CCW Transformieren > Um 90 Grad drehen (gegen Uhrzeigersinn)
Transform > Rotate 180 Transformieren > Um 180 Grad drehen
Transform > Flip Horizontal Transformieren > Horizontal spiegeln
Transform > Flip Vertical Transformieren > Vertikal spiegeln
Transform > Clear Transformations Transformieren > Transformationen löschen
Transform again > Transform Again Erneut transformieren > Erneut transformieren
Transform again > Transform Again Individually Erneut transformieren > Erneut transformieren – Einzeln
Transform again > Transform Sequence Again Erneut transformieren > Erneut transformieren – Abfolge
Transform again > Transform Sequence Again Individually Erneut transformieren > Erneut transformieren – Abfolge, Einzeln
Arrange > Bring to Front Anordnen > In den Vordergrund
Arrange > Bring Forward Anordnen > Schrittweise nach vorne
Arrange > Send Backward Anordnen > Schrittweise nach hinten
Arrange > Send to Back Anordnen > In den Hintergrund
Select > First Object Above Auswählen > Erstes Objekt darüber
Select > Next Object Above Auswählen > Nächstes Obejekt darüber
Select > Next Object Below Auswählen > Nächstes Objekt darunter
Select > Last Object Below Auswählen > Letztes Objekt darunter
Select > Container Auswählen > Container
Select > Content Auswählen > Inhalt
Select > Previous Object Auswählen > Vorheriges Objekt
Select > Next Object Auswählen > Nächstes Objekt
Group Gruppieren
Ungroup Gruppierung aufheben
Lock Sperren
Unlock All on Spread Alles auf Druckbogen entsperren
Hide Ausblenden
Show All on Spread Alles auf Druckbogen anzeigen
Insert HTML… HTML einfügen…
Generate QR Code… QR-Code generieren…
Text Frame Objects… Textrahmenoptionen…
Anchored Object > Options Verankertes Objekt > Optionen
Anchored Object > Insert Verankertes Objekt > Einfügen
Anchored Object > Release Verankertes Objekt > Lösen
Fitting > Fill Frame Proportionally Anpassen > Rahmen proportional füllen
Fitting > Fit Content Proportionally Anpassen > Inhalt proportional anpassen
Fitting > Fit Frame to Content Anpassen > Rahmen an Inhalt anpassen
Fitting > Fit Content to Frame Anpassen > Inhalt an Rahmen anpassen
Fitting > Center Content Anpassen > Inhalt zentrieren
Fitting > Clear Frame Fittings Options Anpassen > Rahmeneinpassungsoptionen löschen
Fitting > Frame Fitting Options Anpassen > Rahmeneinpassungsoptionen
Content > Graphic Inhalt > Grafik
Content > Text Inhalt >Text
Content > Unassigned Inhalt > Nicht zugewiesen
Effects > Transparency… Effekte > Transparenz…
Effects > Drop Shadow… Effekte > Schlagschatten…
Effects > Inner Shadow… Effekte > Schatten nach innen…
Effects > Outer Glow… Effekte > Schein nach außen…
Effects > Inner Glow… Effekte > Schein nach innen…
Effects > Bevel and Emboss… Effekte > Abgeflachte Kante und Relief…
Effects > Satin… Effekte > Glanz…
Effects > Basic Feather… Effekte > Einfache weiche Kante…
Effects > Directional Feather… Effekte > Direktionale weiche Kante…
Effects > Gradient Feather… Effekte > Weiche Verlaufskante…
Effects > Clear Effects Effekte > Effekte löschen…
Effects > Clear All Transparency Effekte > Sämtliche Transparenzen löschen…
Effects > Global Light… Effekte > Globales Licht…
Corner Options… Eckenoptionen…
Object Layer Options Objektebenenoptionen
Object Export Options Objektexportoptionen
Captions > Caption Setup Beschriftungen > Beschriftung einrichten
Captions > Generate Live Caption Beschriftungen > Dynamische Beschriftung erstellen
Captions > Generate Static Caption Beschriftungen > Statische Beschriftung erstellen
Captions > Convert to Static Caption Beschriftungen > In statische Beschriftung konvertieren
Clipping Path > Options Beschneidungspfad > Optionen
Clipping Path > Convert Clipping Path to Frame Beschneidungspfad > Beschneidungspfad in Rahmen konvertieren
Image Color Settings Farbeinstellungen für Bild
Interactive > Convert to Button Interaktiv > In Schaltfläche umwandeln
Interactive > Convert to Checkbox Interaktiv > In Kontrollkästchen umwandeln
Interactive > Convert to Combo Box Interaktiv > In Kombinationsfeld umwandeln
Interactive > Convert to List Box Interaktiv > In Listenfeld umwandeln
Interactive > Convert to Radio Button Interaktiv > In Optionsfeld umwandeln
Interactive > Convert to Signature Field Interaktiv > In Unterschriftsfeld umwandeln
Interactive > Convert to Text Field Interaktiv > In Textfeld umwandeln
Interactive > Convert to Object Interaktiv > In Objekt konvertieren
Interactive > Convert to Motion Path Interaktiv > In Bewegungspfad umwandeln
Interactive > Set Tab Order Interaktiv > Aktivierungsreihenfolge festlegen
Paths > Join Pfade > Verbinden
Paths > Open Path Pfade > Pfad öffnen
Paths > Close Path Pfade > Pfad schließen
Paths > Reverse Path Pfade > Pfad umkehren
Paths > Make Compound Path Pfade > Verknüpften Pfad erstellen
Paths > Release Compound Path Pfade > Verknüpften Pfad erstellen
Pathfinder > Add Pathfinder > Addieren
Pathfinder > Subtract Pathfinder > Subtrahieren
Pathfinder > Intersect Pathfinder > Schnittmenge bilden
Pathfinder > Exclude Overlap Pathfinder > Überlappung ausschließen
Pathfinder > Minus Back Pathfinder > Hinteres Objekt abziehen
Convert Shape > Rectangle Form konvertieren > Rechteck
Convert Shape > Rounded Rectangle Form konvertieren > Abgerundetes Rechteck
Convert Shape > Beveled Rectangle Form konvertieren > Rechteck mit abgeflachten Ecken
Convert Shape > Inverse Rounded Rectangle Form konvertieren > Rechteck mit nach innen gewölbten Ecken
Convert Shape > Ellipse Form konvertieren > Ellipse
Convert Shape > Triangle Form konvertieren > Dreieck
Convert Shape > Polygon Form konvertieren > Polygon
Convert Shape > Line Form konvertieren > Linie
Convert Shape > Orthogonal Line Form konvertieren > Rechtwinklige Linie
Convert Point > Plain Punkt konvertieren > Einfacher Eckpunkt
Convert Point > Corner Punkt konvertieren > Eckpunkt
Convert Point> Smooth Punkt konvertieren > Kurvenpunkt
Convert Point > Symmetrical Form konvertieren > Symmetrischer Kurvenpunkt
Display Performance > Fast Display Anzeigeleistung > Schnelle Anzeige
Display Performance > Typical Display Anzeigeleistung > Normale Anzeige
Display Performance > High Qualitty Display Anzeigeleistung > Anzeige mit hoher Qualität
Display Performance > Use View Settings Anzeigeleistung > Ansichtseinstellungen verwenden

Seitenanfang

indesign5

Table | Tabelle

Englischer Begriff Deutsche Übersetzung
Table
Insert Table… Tabelle einfügen…
Convert Text to Table… Text in Tabelle umwandeln…
Convert Table to Text… Tabelle in Text umwandeln
Table Options > Table Setup… Tabellenoptionen > Tabelle einrichten…
Table Options > Alternating Row Strokes… Tabellenoptionen > Abwechselnde Zeilenkonturen…
Table Options > Alternating Column Strokes… Tabellenoptionen > Abwechselnde Spaltenkonturen…
Table Options > Alternating Fills… Tabellenoptionen > Abwechselnde Flächen…
Table Options > Headers and Footers… Tabellenoptionen > Tabellenkopf und -fuß…
Cell Options > Text… Zellenoptionen > Text…
Cell Options > Strokes and Fills… Zellenoptionen > Konturen und Flächen…
Cell Options > Rows and Columns… Zellenoptionen > Zeilen und Spalten…
Cell Options > Diagonal Lines… Zellenoptionen > Diagonale Linien…
Insert > Row… Einfügen > Zeile
Insert > Column… Einfügen > Spalte
Delete > Row Löschen > Zeile
Delete > Column Löschen > Spalte…
Delete > Table Löschen > Tabelle
Select > Cell Auswählen > Zelle
Select > Row Auswählen > zeile
Select > Column Auswählen > Spalte
Select > Table Auswählen > Tabelle
Select > Header Rows Auswählen > Tabellenkopfzeile
Select > Body Rows Auswählen > Tabellenkörperzeilen
Select > Footer Rows Auswählen > Tabellenfußzeilen
Merge Cells Zellen verbinden
Unmerge Cells Zellverbindung aufheben
Split Cell Horicontally Zelle horizontal teilen
Split Cell Vertically Zelle vertikal teilen
Convert Rows > To Header Zeilen umwandeln > In Tabellenkopf
Convert Rows > To Body Zeilen umwandeln > In Tabellenkörper
Convert Rows > To Footer Zeilen umwandeln > In Tabellenfuß
Distribute Rows Evenly Zeilen gleichmäßig verteilen
Distribute Columns Evenly Spalten gleichmäßig verteilen
Go to Row… Gehe zu Zeile…
Edit Header Kopfzeile bearbeiten
Edit Footer Fußzeile bearbeiten

Seitenanfang

indesign6

View | Ansicht

Englischer Begriff Deutsche Übersetzung
View
Overprint Preview Überdruckenvorschau
Proof Setup Proof einrichten
Proof Colors Farbproof
Zoom In Einzoomen
Zoom Out Auszoomen
Fit Page in Window Seite in Fenster einpassen
Fit Spread in Window Druckbogen in Fenster einpassen
Actual Size Originalgröße
Entire Pasteboard Ganze Montagefläche
Match Pasteboard to Themecolor Montagefläche an Motivfarbe anpassen
Rotate Spread > 90 CW Druckbogen drehen > 90 Grad im UZS
Rotate Spread > 90 CCW Druckbogen drehen > 90 Grad gegen UZS
Rotate Spread > 180 Druckbogen drehen > 180 Grad
Rotate Spread > Clear Rotation Druckbogen drehen > Drehung löschen
Screen Mode > Normal Bildschirmmodus > Normal
Screen Mode > Preview Bildschirmmodus > Vorschau
Screen Mode > Bleed Bildschirmmodus > Anschnitt
Screen Mode > Slug Bildschirmmodus > Infobereich
Screen Mode > Presentation Bildschirmmodus > Präsentation
Display Performance > Fast Display Anzeigeleistung > Schnelle Anzeige
Display Performance > Typical Display Anzeigeleistung > Normale Anzeige
Display Performance > High Quality Display Anzeigeleistung > Anzeige mit hoher Qualität
Display Performance > Allow Object-Level Display Settings Anzeigeleistung > Objektspezifische Anzeigeeinstellungen zulassen
Display Performance > Clear Object-Level Display Settings Anzeigeleistung > Objektspezifische Anzeigeeinstellungen löschen
Hide Rulers Lineale ausblenden
Extras > Hide Frame Edges Extras > Rahmenkanten ausblenden
Extras > Show Text Threads Extras > Textverkettungen einblenden
Extras > Show Assigned Frames Extras > Zugewiesene Rahmen einblenden
Extras > Hide Hyperlinks Extras > Hyperlinks ausblenden
Extras > Hide Notes Extras > Notizen ausblenden
Extras > Hide Link Badge Extras > Verknüpfungsmarke ausblenden
Extras > Hide Content Grabber Extras > Inhaltsauswahlwerkzeug ausblenden
Extras > Hide Live Corners Extras > Dynamische Ecken ausblenden
Extras > Hide Anchored Object Control Extras > Steuerelement für verankertes Objekt ausblenden
Extras > Hide Conveyor Extras > Überträger ausblenden
Grind & Guides > Hide Guides Raster und Hilfslinien > Hilfslinien ausblenden
Grind & Guides > Lock Guides Raster und Hilfslinien > Hilfslinien sperren
Grind & Guides > Lock Column Guides Raster und Hilfslinien > Spaltenhilfslinien sperren
Grind & Guides > Snap to Guides Raster und Hilfslinien > An Hilfslinien ausrichten
Grind & Guides > Smart Guides Raster und Hilfslinien > Intelligente Hilfslinien
Grind & Guides > Delete All Guides on Spread Raster und Hilfslinien > Alle Hilfslinien auf Druckbogen löschen
Grind & Guides > Show Baseline Grid Raster und Hilfslinien > Grundlinienraster einblenden
Grind & Guides > Show Document Grid Raster und Hilfslinien > Dokumentraster einblenden
Grind & Guides > Snap to Document Grid Raster und Hilfslinien > Am Dokumentraster ausrichten
Structure > Show Structure Struktur > Struktur einblenden
Structure > Hide Tag Markers Struktur > Tag-Marken ausblenden
Structure > Show Tagged Frames Struktur > Rahmen mit Tags einblenden
Story Editor > Hide Changes Textmodus > Änderungen ausblenden
Story Editor > Hide Style Name Column Textmodus > Formatnamensspalte ausblenden
Story Editor > Hide Depth Ruler Textmodus > Tiefenlineal ausblenden
Story Editor > Show Paragraph Brake Marks Textmodus > Absatzumbruchzeichen einblenden
Story Editor > Expand All Footnotes Textmodus > Alle Fußnoten maximieren

Seitenanfang

indesign7

Window | Fenster

Englischer Begriff Deutsche Übersetzung
Window
Arrange > Cascade Anordnen > Überlappend
Arrange > Tile Anordnen > Neben-/Untereinander
Arrange > Float in Window Anordnen > Im Fenster verschiebbar
Arrange > Float All in Windows Anordnen > Alle in Fenstern verschiebbar
Arrange > Consolidate All Windows Anordnen > Alle Fenster zusammenführen
Arrange > New Window for Anordnen > Neues Fenster
Arrange > Split Window Anordnen > Fenster teilen
Arrange > Minimize Anordnen > Minimieren
Workspace > Advanced Arbeitsbereich > Erweitert
Workspace > Book Arbeitsbereich > Buch
Workspace > Digital Publishing Arbeitsbereich > Digitale Veröffentlichung
Workspace > Essentials Arbeitsbereich > Grundlagen
Workspace > Interactive for PDF Arbeitsbereich > Interaktiv für PDF
Workspace > Printing and Proofing Arbeitsbereich > Druckausgabe und Proofs
Workspace > Typography Arbeitsbereich > Typografie
Workspace > Reset Essentials Arbeitsbereich > Grundlagen zurücksetzen
Workspace > New Workspace… Arbeitsbereich > Neuer Arbeitsbereich…
Workspace > Delete Workspace… Arbeitsbereich > Arbeitsbereich löschen…
Workspace > Show Full Menus Arbeitsbereich > Vollständige Menüs anzeigen
Articles Artikel
Color > Color Farbe > Farbe
Color > Gradient Farbe > Verlauf
Color > Swatches Farbe > Farbfelder
Control Steuerung
Editorial > Assignments Redaktionelle Aufgaben > Aufgaben
Editorial > Notes Redaktionelle Aufgaben > Notizen
Editorial > Track Changes Redaktionelle Aufgaben > Änderungen verfolgen
Effects Effekte
Folio Builder Folio Builder
Folio Overlays Folio Overlays
Info Informationen
Interactive > Animation Interaktiv > Animation
Interactive > Bookmarks Interaktiv > Lesezeichen
Interactive > Buttons and Forms Interaktiv > Schaltflächen und Formulare
Interactive > Hyperlinks Interaktiv > Hyperlinks
Interactive > Liquid Layout Interaktiv > Liquid Layout
Interactive > Media Interaktiv > Medien
Interactive > Object States Interaktiv > Objektstatus
Interactive > Page Transitions Interaktiv > Seitenübergänge
Interactive > SWF Preview Interaktiv > SWF-Vorschau
Interactive > Timing Interaktiv > Zeitpunkt
Layers Ebenen
Links Verknüpfungen
Mini Bridge Mini Bridge
Object & Layout > Align Objekt und Layout > Ausrichten
Object & Layout > Pathfinder Objekt und Layout > Pathfinder
Object & Layout > Transform Objekt und Layout > Transformieren
Output > Attributes Ausgabe > Attribute
Output > Flattener Preview Ausgabe > Reduzierungsvorschau
Output > Preflight Ausgabe > Preflight
Output > Separations Preview Ausgabe > Separationsvorschau
Output > Trap Presets Ausgabe > Überfüllungsvorgaben
Pages Seiten
Stroke Kontur
Styles > Cell Styles Formate > Zellenformate
Styles > Character Styles Formate > Zeichenformate
Styles > Object Styles Formate > Objektformate
Styles > Paragraph Styles Formate > Absatzformate
Styles > Table Styles Formate > Tabellenformate
Text Wrap Textumfluss
Tools Werkzeuge
Type & Tables > Character Schrift und Tabellen > Zeichen
Type & Tables > Conditional Text Schrift und Tabellen > Bedingter Text
Type & Tables > Cross-References Schrift und Tabellen > Querverweise
Type & Tables > Glyphs Schrift und Tabellen > Glyphen
Type & Tables > Index Schrift und Tabellen > Index
Type & Tables > Paragraph Schrift und Tabellen > Absatz
Type & Tables > Story Schrift und Tabellen > Textabschnitt
Type & Tables > Table Schrift und Tabellen > Tabelle
Utilities > Background Tasks Hilfsprogramme > Hintergrundaufgaben
Utilities > Data Merge Hilfsprogramme > Datenzusammenführung
Utilities > Script Label Hilfsprogramme > Skriptetikett
Utilities > Scripts Hilfsprogramme > Skripte
Utilities > Tags Hilfsprogramme > Tags
Utilities > Tool Hints Hilfsprogramme > Werkzeughinweise

Seitenanfang

indesign8

Help | Hilfe

Englischer Begriff Deutsche Übersetzung
Help
InDesign Help… InDesign-Hilfe…
InDesign Support Center… InDesign Support Center…
About InDesign… Über InDesign…
Manage Extensions… Erweiterungen verwalten…
Complete/Update Adobe ID Profile… Eigenes Konto verwalten…
Sign Out Abmelden
Updates… Aktualisierungen…
InDesign Online… InDesign Online…

Seitenanfang

indesign9

Tools | Werkzeuge

Toolleiste

Englischer Begriff Deutsche Übersetzung
Tools
Selection Tool Auswahl-Werkzeug v
Direct Selection Tool Direktauswahl-Werkzeug m
Page Tool Seitenwerkzeug
Gap Tool Lückenwerkzeug l
Content Collector Tool Inhaltsaufnahme-Werkzeug
Content Placer Tool Inhaltsplatzierungs-Werkzeug
Type Tool Text-Werkzeug w
Type on a Path Tool Text auf Pfad w
Line Tool Linienzeichner-Werkzeug
Pen Tool Zeichenstift i
Add Anchor Point Tool Ankerpunkt hinzufügen
Delete Anchor Point Tool Ankerpunkt löschen
Convert Direction Point Tool Richtungspunkt umwandeln
Pencil Tool Buntstift n
Smooth Tool Glätten
Erase Tool Radieren
Rectangle Frame Tool Rechteckrahmen f
Ellipse Frame Tool Ellipsenrahmen
Polygon Frame Tool Polygonrahmen
Rectangle Tool Rechteck-Werkzeug m
Ellipse Tool Ellipse-Werkzeug l
Polygon Tool Polygon-Werkzeug
Scissors Tool Schere c
Free Transform Tool Frei Transformieren e
Rotate Tool Drehen r
Scale Tool Skalieren s
Shear Tool Scheren o
Gradient Swatch Tool Verlaufsfarbfeld-Werkzeug g
Gradient Feather Tool Weiche-Verlaufskante-Werkzeug
Note Tool Notiz
Eyedropper Tool Pipette-Werkzeug i
Measure Tool Messwerkzeug-Werkzeug k
Hand Tool Hand-Werkzeug h
Zoom Tool Zoomwerkzeug z
Swap Fill and Stroke Fläche und Kontur austauschen x
Formatting Formatierung j
Apply Color Farbe anwenden

Seitenanfang

So stellen Sie InDesign von Deutsch auf Englisch um

Starten Sie Adobe Creative Cloud und klicken Sie da oben, rechts auf das Zahnrad. Wählen Sie Voreinstellungen an und wechseln Sie zu Apps. Stellen Sie die App-Sprache auf English ein und installieren Sie die englischsprachige Version der Software, die sich dann über das entsprechende Icon im Fenster der Creative Cloud direkt starten lässt. Um wieder die deutschen Versionen Ihrer Programme zu erreichen, ändern Sie die App-Sprache wieder auf Deutsch .

indesign10

(dpe)