Adobe | t3n News News, Infos, Tipps und aktuelle Artikel zu Adobe 2015-01-26T09:24:59Z t3n Redaktion http://t3n.de/tag/adobe Flash Player: Adobe liefert Update wegen kritischer Sicherheitslücke http://t3n.de/news/adobe-flash-player-update-590289/ 2015-01-26T09:24:59Z
Adobe hat am Samstag damit begonnen, ein überfälliges Update des Flash Players auszuliefern. Der US-Konzern reagiert damit auf eine Sicherheitslücke, die Virenforscher „Kafeine“ zuvor auf …

Adobe hat am Samstag damit begonnen, ein überfälliges Update des Flash Players auszuliefern. Der US-Konzern reagiert damit auf eine Sicherheitslücke, die Virenforscher „Kafeine“ zuvor auf seiner Website öffentlich machte.

Angreifern war es bislang möglich, bösartigen Code mithilfe des „Angler Exploit Kits“ über speziell präparierte Websites zu verbreiten. Exploit Kits vereinfachen das Ausnutzen einer Sicherheitslücke, indem sie den Rechner des Opfers auf Programme mit offenen Sicherheitslücken abklopfen und automatisch den passenden Exploit ausliefern. Für ihren Einsatz sind kaum technische Kenntnisse erforderlich.

Adobe schließt Sicherheitslücke durch Update

Seit Samstag verteilt Adobe ein automatisches Update für die betroffene Flash-Version 16.0.0.257, seit Sonntag ist auch ein manueller Download verfügbar. Wir raten, dass Update schnellstmöglich auf allen System zu installieren. Experten bis dahin zum Abschalten der Software.

Virenforscher „Kafeine“ konnte die Sicherheitslücke über das Exploit Kit erfolgreich an mehrere Browser- und OS-Kombinationen ausliefern, darunter auch das aktuelle Windows 8.1 mit Internet Explorer 11. Seine Testreihe konzentrierte sich vor allem auf Windows in Kombination mit dem Internet Explorer, vermutlich sind aber auch andere Systeme und Browser betroffen.

via www.heise.de

]]>
Lars Budde
Style-Guides in Windeseile erstellen: Markly unterstützt Designer http://t3n.de/news/sketch-photoshop-markly-design-specs-588596/ 2015-01-15T09:39:49Z
Markly generiert automatisch Design-Specs aus euren Photoshop- oder Sketch-Entwürfen. Wir verraten euch, was die App alles kann.

Markly generiert automatisch Design-Specs aus euren Photoshop- oder Sketch-Entwürfen. Wir verraten euch, was die alles kann.

Markly: Design-Specs für Photoshop- und Sketch-Entwürfe

Für Photoshop und Sketch: Markly hilft beim Erstellen von Design-Specs. (Grafik: Markly)
Für Photoshop und Sketch: Markly hilft beim Erstellen von Design-Specs. (Grafik: Markly)

Für das Erstellen von Design-Specs kann viel Zeit draufgehen. Eine neue App namens Markly will den Prozess jetzt deutlich beschleunigen. Eure Entwürfe könnt ihr direkt von Photoshop oder Sketch importieren. Anschließend reicht beispielsweise ein einziger Klick auf ein Element, um seine Dimensionen zu vermerken.

Abstände lassen sich bequem per Drag-and-Drop einfügen. Per Doppelklick auf ein Textelement könnt ihr einen genutzten Font und die Schriftfarbe vermerken. Das Aussehen der Linien und anderen Elemente, mit denen beispielsweise Abstände gemessen werden, könnt ihr in Markly jederzeit ohne viel Aufwand ändern.

Markly funktioniert auf Macs und Windows-Rechnern

Wenn ihr Änderungen an eurem vornehmt, also beispielsweise die Farbe, Position oder Größe eines Elements verändert, passt auch Markly die entsprechenden Angaben automatisch an. Die Photoshop-Version von Markly existiert in Versionen für OS X und Windows.

Markly ist ein praktisches Tool, das die Erstellung von Design-Specs und UI-Style-Guides deutlich vereinfachen kann. Eine Einzellizenz der Photoshop-Version kostet 39 US-Dollar. Die Sketch-Variante erscheint leider erst am 31. Januar 2015. Ihr könnt sie aber schon jetzt für den vergünstigten Preis von 29 US-Dollar vorbestellen. Bezahlen könnt ihr die Software per PayPal oder mit einer Kreditkarte.

via www.producthunt.com

]]>
Kim Rixecker
JavaScript, Flash, CSS und mehr: Die Geschichte des Webdesigns in 9 GIFs http://t3n.de/news/javascript-flat-geschichte-webdesign-585903/ 2014-12-25T14:20:41Z
Webdesign als Disziplin kann mittlerweile auf eine bewegte Geschichte zurückblicken. Sandijs Ruluks hat sie nicht nur aufgeschrieben, sondern auch mithilfe von schönen GIFs visualisiert.

Webdesign als Disziplin kann mittlerweile auf eine bewegte Geschichte zurückblicken. Sandijs Ruluks hat sie nicht nur aufgeschrieben, sondern auch mithilfe von schönen GIFs visualisiert. Mit seiner Erlaubnis teilen wir sie hier mit euch.

Ein Hinweis vorab: Mit den in Klammern angegebenen Zahlen verdeutlicht Sandijs Ruluks den Beginn, also das Aufkommen einer bestimmten Technologie. Nicht selten entfaltete sie ihre Schlagkraft erst in den Folgejahren.

Die Vorläufer des Webdesigns (1989)

 

01-Tab_keys-1

 

Die Anfänge des Webdesigns, wenn man denn überhaupt davon sprechen kann, könnte man vielleicht mit dem dunklen Mittelalter vergleichen: Immerhin gab es damals vor allem schwarze Bildschirme, auf denen nur wenige – nicht besonders farbenfrohe – Pixel lebten. Zwar gab es von Anfang an Ideen und Methoden zur grafischen Darstellung – oftmals war Design hier aber noch eine Frage von Symbolen und Textabständen. Für Sandijs Ruluks von Froont ist damit auch klar: „Spulen wir vor zu den grafischen User-Interfaces – dem Wilden Westen der Tabellen-Ära!“

Tabellen: Die wahren Anfänge (1995)

 

02-Tables-1

 

Im Prinzip ging es mit dem Webdesign erst richtig los, als die ersten Browser aufkamen – und mit ihnen die Möglichkeit, Bilder darzustellen. Lange Zeit behalf man sich hier mit dem Trick, Informationen über die in HTML vorhandenen Tabellenfunktionen zu strukturieren und anzuordnen. Ausgangspunkt für diese Praxis war laut Ruluks das Buch Creating Killer Sites von David Siegel. „Obwohl es sich nicht komplett ‚richtig‘ anfühlte, weil man mit Tabellen ja vor allem Zahlen strukturieren möchte, war es doch für eine ziemlich lange Zeit die beste und übliche Methode, um im Netz zu designen“, schreibt Ruluks. Design-Ideen wurden in einzelne Elemente aufgeteilt und einzeln für das Web übersetzt. Der Transfer eines schönen Designs in funktionierenden Code war zu dieser Zeit ein aufwändiger und schwieriger Prozess, der nicht wenige Entwickler von Anfang an vor den „Tücken des Frontends“ zurückschrecken ließ.

Webdesign in den 90er-Jahren: JavaScript eilt zur Rettung! (1995)

 

03-Javascript-1

 

Mit JavaScript entstand dann eine Möglichkeit, die Defizite von HTML anderweitig auszugleichen. Funktionen wie Popup-Fenster oder unterschiedliche Reihenfolgen für einzelne Design-Elemente ließen sich nun viel einfacher realisieren. Allerdings legt JavaScript sich sozusagen wie eine eigene Schicht über die Infrastruktur einer Seite und muss auch separat geladen werden. „Es ist sehr mächtig, wenn es richtig angewendet wird, allerdings wird es oft von faulen Entwicklern als eine Art Flickenlösung verwendet“, so Ruluks. Daher wird heute oftmals eher CSS genutzt. In Form von jQuery und Node.js bleibt JavaScript aber sowohl für das Front- als auch für das Backend enorm wichtig.

Das goldene Zeitalter der Freiheit – Flash (1996)

 

04-Flash-1

 

Formen, Layouts, Interaktionen, Animationen und beliebige Schriftarten: All diese Freiheiten gewährt die Technologie Flash. Das fertige Design wird in eine einzige Datei verpackt und an den Browser gesendet, der diese dann darstellt. Hört sich sehr einfach an – funktioniert aber nur, wenn der Nutzer des Browsers das aktuelle Flash-Plugin installiert und kein Problem damit hat, eine Weile auf das Laden der Seite zu warten. „Es war das goldene Zeitalter von Splash-Seiten, Intro-Animationen und allen möglichen interaktiven Effekten“, schreibt Ruluks. Letztlich verbrauchte Flash aber zu viele Ressourcen und war auch nicht Suchmaschinen-freundlich genug, um zum dauerhaften Non-Plus-Ultra zu werden. Der Todesstoß für Flash im Webdesign kam 2007, als Apple sich für sein erstes iPhone gegen die Technologie entschied.

CSS (1998)

 

05-CSS-2

 

Nicht viel später als Flash betraten die Cascading Style Sheets (CSS) die Bühne des Webdesigns. Während die eigentlichen Inhalte hier in HTML bleiben, kümmert sich CSS gesondert um deren Darstellung, was eine technisch saubere Unterscheidung zwischen Content und Design ermöglicht. Das anfängliche Problem von CSS lag vor allem in der Inkompatibilität vieler Browser, die die Gestaltungssprache nicht verstanden oder nur in Teilen unterstützten. Für Entwickler bedeutete dies auch, dass ihr Projekt in jedem Browser unterschiedlich aussehen und unterschiedliche Probleme aufweisen konnte – nicht gerade eine Arbeitserleichterung. Es dauerte mehrere Jahre, bis diese Kinderkrankheiten behoben waren. Zur jetzigen Bedeutung von CSS für Designer hat Sandijs Ruluks folgende Meinung:

„Sollten Webdesigner programmieren lernen? Vielleicht. Sollten sie verstehen, wie CSS funktioniert? Absolut!“

Der Aufstieg von Mobile: Grids und Frameworks im Webdesign (2007)

 

06-Grids-1

 

Mit dem Aufkommen mobiler Endgeräte wurde eine neue Ära des Webdesigns eingeläutet – eine Ära, die ihre ganz eigenen Herausforderungen mit sich brachte: Brauchen wir mobil insgesamt weniger Inhalte oder „nur“ neue Darstellungsformate? Welche Layouts funktionieren auf welchem Screen? Und was machen wir bloß mit der Werbung auf diesen winzigen Bildschirmen? Gerade in den Anfangszeiten des mobilen Internets waren auch lange Ladezeiten und damit verbundene horrende Kosten für die Nutzer ein Problem.

Der erste Schritt zur Lösung dieser Probleme lag in festen Gestaltungsrastern. Besonders das 960-Grid-System und seine zwölfspaltige Aufteilung setzten sich durch. In einem weiteren Schritt wurden besonders häufig genutzte Design-Elemente wie Buttons oder die Navigation standardisiert und zu festen „visuellen Bibliotheken“ verdichtet: Unter diesen Frameworks machten Bootstrap und Foundation das Rennen. Für Sandijs Ruluks hängt diese Entwicklung auch mit der Tatsache zusammen, dass die Grenzen zwischen Apps und Websites immer weiter verschwinden und die beiden Frameworks es erlauben, den Mobile-First-Ansatz auf alle Webprojekte anzuwenden. Der Nachteil in seinen Augen: Viele Designs ähneln sich aufgrund der zugrunde liegenden Frameworks sehr stark. Und Designer, die nicht programmieren können, bleiben auch bei Bootstrap, Foundation und ihren Verwandten immer noch außen vor.

Responsive Webdesign (2010)

 

07-Responsive-3

 

Mit seiner Idee, denselben Content, aber unterschiedliche Layouts für Designs zu nutzen, brachte Ethan Marcotte frischen Wind in die Entwicklung des Webdesigns. Marcotte mag nicht der Erste gewesen sein, der diese Idee hatte – doch hat er dem Kind mit „Responsive Webdesign“ einen einschlägigen Namen und ein sauberes Konzept gegeben, so dass sich seine Perspektive innerhalb kurzer Zeit weit verbreitet und durchgesetzt hat (übrigens haben wir die Prinzipien des Responsive Webdesigns hier vorgestellt, ebenfalls in schönen GIFs von Froont).

Ruluks betont, dass Responsive Design momentan noch für jeden etwas anderes bedeutet: Für den Auftraggeber heißt es, dass die Website auch auf dem Smartphone funktioniert. Für den Designer, dass er viele verschiedene Mockups erstellen muss. Für den Entwickler diverse Unterschiede in der Ausspielung der Bilder, Download-Zeiten und eine Menge mehr. „Der größte Vorteil ist die Gleichwertigkeit des Contents, also die Tatsache, dass ein und dieselbe Website überall funktioniert. Hoffentlich können wir uns auf diesen gemeinsamen Nenner einigen.“

Back to the roots? Flat Design (2010)

 

08-Flat-2

 

Je mehr Layouts man entwerfen muss, desto besser fährt man damit, sich auf das Wesentliche zu konzentrieren: Weniger tolle Animationen und Effekte, mehr Fokus auf die Inhalte. Für Ruluks bedeutet das in Sachen modernes Webdesign: hochwertige Fotos, durchdachte Typografie, klare Illustrationen und schlaue Layouts. Zu dieser Entwicklung gehört auch das Flat Design, bei dem visuelle Elemente auf ihre wesentliche Funktion reduziert werden: „Glänzende Buttons werden ersetzt durch Icons, für die man skalierbare Vektorgrafiken und Icon-Fonts verwenden kann, Web-Fonts sorgen für wunderschöne Typografie.“ In gewisser Weise liegt in der Besinnung auf simples, funktionales Design eine Rückkehr zu den frühen Zeiten des Webdesigns, als technisch einfach noch nicht viel mehr möglich war: Back to the roots, sozusagen – nur in schöner.

Wir sind noch nicht fertig: Zur Zukunft des Webdesigns (2014)

 

09-Future-1

 

Seit den frühen Zeiten hat sich für Webdesigner viel verändert. Doch noch immer ist nicht alles möglich und noch immer hängt viel von der „Übersetzung“ ihrer Ideen in die richtigen Zeilen Code ab. Sandijs Ruluks träumt von einer Welt, in der es noch weniger technische „Frickelei“ im Webdesign gibt, wenn es um schöne und inspirierende Designs geht. „Stellt euch vor, dass Designer einfach Elemente auf dem Bildschirm neu anordnen und es kommt ein neuer, sauberer Code dabei heraus. Stellt euch vor, dass Entwickler sich nicht um Browser-Kompatibilitäten kümmern müssen, sondern sich auf das Lösen von Problemen konzentrieren können.“

Einige Ansätze gibt es bereits, um diese Zukunft Wirklichkeit werden zu lassen. Etwa Flexbox, mit dem sich Layouts in CSS deutlich einfacher und flexibler gestalten lassen, oder neue CSS-Elemente wie vh (viewport height) oder vw (viewport width), die es einfacher machen, Elemente auf einer Seite zu positionieren. Ein weiteres viel versprechendes Konzept ist das der Web-Components, bei denen einzelne Website-Elemente wie zum Beispiel Bildergalerien oder bestimmte Formulare als einfach einzubindende (und einfach zu pflegende) Bündel zusammengefasst werden, so dass nicht mit unzähligen verschiedenen Plugins gearbeitet werden muss. Es bleibt also spannend!

Was wird sich eurer Ansicht nach durchsetzen, was nicht?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp
Die 10 beliebtesten Artikel der Woche: Fangfragen für Bewerber, Photoshop-Alternativen und Apps, die vom ersten Moment an überzeugen http://t3n.de/news/10-beliebtesten-artikel-woche-58-585848/ 2014-12-20T09:59:41Z
Wie jede Woche stellen wir euch auch heute wieder die zehn beliebtesten Artikel der letzten sieben Tage zusammen. Mit dabei: Ein Print-Magazin mit eingebautem Like-Button, Tipps für das Onboarding …

Wie jede Woche stellen wir euch auch heute wieder die zehn beliebtesten Artikel der letzten sieben Tage zusammen. Mit dabei: Ein Print-Magazin mit eingebautem Like-Button, Tipps für das Onboarding neuer App-User und die besten Photoshop-Alternativen für Windows, Mac und Linux. Viel Spaß beim Stöbern!

1. App-Design: Wie ihr eure Nutzer vom ersten Moment an überzeugt

Eine Bedienungsanleitung ist das Eingeständnis eines Design-Fehlers. Doch wie schafft man Apps, die vom allerersten Moment überzeugen? Andrew Coyle hat sich ein paar perfekte Beispiele angeguckt.

Unser Artikel: App-Design: Wie ihr eure Nutzer vom ersten Moment an überzeugt

2. Die besten Photoshop-Alternativen für Windows, Mac und Linux

gehört zur Standardausrüstung von Designern und Fotografen, wären da nicht die vielen Photoshop-Alternativen. Sie erhalten vor allem im Zuge der Umstellung auf die Creative enormen Aufwind.

Unser Artikel: Die besten Photoshop-Alternativen für Windows, Mac und Linux

3. Semantisches HTML5: 10 Elemente, die du wahrscheinlich falsch nutzt

Eines der wichtigsten Features von ist die Möglichkeit, Inhalte in einen semantischen Kontext zu setzen. Gerade Googles Hummingbird zeigt uns, wohin die Reise gehen wird. In diesem Artikel zeigen wir euch, wie semantisches HTML5 zu schreiben ist. Mit dabei: Die Unterschiede zwischen em, i, strong und b.

Unser Artikel: Semantisches HTML5: 10 Elemente, die du wahrscheinlich falsch nutzt

4. Fangfragen nur für Bewerber? So fühlt ihr im Vorstellungsgespräch dem Arbeitgeber auf den Zahn [Interview]

Wie tickt eigentlich das Unternehmen? Welche Kultur wird gelebt? Wie steht es um die Aufstiegschancen? Bewerber sollten im Vorstellungsgespräch genau nachfragen, meint Karriere-Coach Karin Zintz-Volbracht im .

Unser Artikel: Fangfragen nur für Bewerber? So fühlt ihr im Vorstellungsgespräch dem Arbeitgeber auf den Zahn [Interview]

5. Guerilla-Marketing mal anders: Wie Sixt mit Tinder-Nutzern flirtet

Guerilla-Marketing auf Tinder? Sixt hat es versucht – auf gewohnt freche Art und Weise, wie ihr in diesem Beitrag erfahrt.

Unser Artikel: Guerilla-Marketing mal anders: Wie Sixt mit Tinder-Nutzern flirtet

6. Linkbuilding 2015: Content allein bringt keinen Umsatz

ist nicht mehr, was es einmal war. Wie sich die Anforderungen und Strategien im modernen Linkbuilding gewandelt haben, erklärt Stefanie Isabel Kobsa.

Unser Artikel: Linkbuilding 2015: Content allein bringt keinen Umsatz

7. WordPress 4.1 erschienen – Das ist neu

Unter dem Codenamen „Dinah“ ist in Anlehnung an die bekannte Jazz-Musikerin Dinah Washington eine neue Version von WordPress erschienen. WordPress 4.1 bringt unter anderem ein neues Standard-Theme sowie einen optimierten Modus für ablenkungsfreies Schreiben mit.

Unser Artikel: WordPress 4.1 erschienen – Das ist neu

8. Ein Print-Magazin mit funktionierendem Like-Button: Völlig verrückt oder visionär?

Leser-Blatt-Bindung, Verknüpfung von Print und Online, sauberes Tracking der Lesegewohnheiten – all das sind Dinge, mit denen Verlage seit beinahe zwei Jahrzehnten zu kämpfen haben. Eine brasilianische Werbeagentur hat eine Print-Anzeige konzipiert, die zeigt, dass es eigentlich nur ein bisschen Phantasie und Technik braucht.

Unser Artikel: Ein Print-Magazin mit funktionierendem Like-Button: Völlig verrückt oder visionär?

9. Gute Adressen sind nicht billig: Das waren die teuersten Domainverkäufe 2014

Auch wenn .com-Domains nach wie vor das meiste Geld einbringen, konnte sich der Verkäufer von kaffee.de immerhin über 100.000 Euro freuen. Für welche Domains 2014 das meiste Geld den Besitzer gewechselt hat, verraten wir euch in diesem Artikel.

Unser Artikel: Gute Adressen sind nicht billig: Das waren die teuersten Domainverkäufe 2014

10. Aus Scheiße Gold machen: Diese zwei Unternehmen sind auf einem guten Weg

Mit einem Geschenk von schenkscheisse.eu und shitexpress.com kann man unlieb­same Mit­men­schen überraschen. Das Geschäft läuft ganz gut.

Unser Artikel: Aus Scheiße Gold machen: Diese zwei Unternehmen sind auf einem guten Weg

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp
Hardware für iPad-Apps: Adobe Ink und Slide jetzt auch in Deutschland verfügbar http://t3n.de/news/adobe-ink-slide-deutschland-585065/ 2014-12-15T10:45:44Z
Die neuen Eingabegeräte Ink und Slide von Adobe sind jetzt auch offiziell in Deutschland verfügbar. Die Gadgets werden bis Anfang Januar zum Sonderpreis von 174,99 US-Dollar angeboten.

Die neuen Eingabegeräte Ink und Slide von Adobe sind jetzt auch offiziell in Deutschland verfügbar. Die Gadgets werden bis Anfang Januar zum Sonderpreis von 174,99 US-Dollar angeboten.

Adobe: Ink und Slide zum Einführungspreis

Ab sofort können der druckempfindliche Eingabestift Ink und das digitale Lineal Slide, die Adobe im Juni dieses Jahres vorgestellt hat, offiziell auch in Deutschland bestellt werden – allerdings nur im Doppelpack. Bis Ende Januar gilt dabei beim Anbieter Adonit ein Sonderpreis von 174,99 US-Dollar (plus Versandkosten und Steuern). Ab 5. Januar 2015 werden dann 199 US-Dollar als regulärer Preis aufgerufen.

Adobe Ink und Slide jetzt auch für Kreative in Deutschland. (Foto: Adobe)
Adobe Ink und Slide jetzt auch für Kreative in Deutschland. (Foto: Adobe)

Mit den beiden Gadgets will Adobe Designer nicht zuletzt dazu motivieren, iPad-Apps wie Illustrator Line, Illustrator Draw, Photoshop Sketch und Brush CC zu verwenden. Durch die Eingabegeräte sollen präzisere Eingaben ermöglicht werden. Die Spitze des dreieckigen Stifts Ink aus Aluminium ist feiner als die gewöhnlicher Eingabegeräte. Das zehn Zentimeter lange Lineal Slide macht – aufgelegt auf das Tablet-Display – eine Hilfslinie in der Software sichtbar. Verbunden werden die Gadgets mit dem iPad via Bluetooth 4.0.

Um alle Funktionen von Ink und Slide sowie die Verbindung zu anderen Adobe-Diensten auszureizen, wird allerdings ein Creative-Cloud-Konto benötigt. Laut Adobe lässt sich Ink bisher nur beschränkt mit anderen Apps einsetzen. Die Vorstellung der digitalen Eingabegeräte im Sommer ging einher mit einigen Neuerungen bei der Creative Cloud.

via www.heise.de

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Jörn Brien
Die besten Photoshop-Alternativen für Windows, Mac und Linux http://t3n.de/news/besten-photoshop-alternativen-436275/ 2014-12-15T09:30:17Z
Adobe Photoshop gehört zur Standardausrüstung von Designern und Fotografen, wären da nicht die vielen Photoshop-Alternativen. Sie erhalten vor allem im Zuge der Umstellung auf die Creative Cloud …

gehört zur Standardausrüstung von Designern und Fotografen, wären da nicht die vielen Photoshop-Alternativen. Sie erhalten vor allem im Zuge der Umstellung auf die Creative enormen Aufwind.

Mit einem Abomodell vertreibt das US-Unternehmen Adobe seit einiger Zeit die beliebte Software Photoshop und andere Bestandteile der Creative Cloud. Alte Versionen laufen zum einmaligen Verkaufspreis wie gehabt auf dem lokalen Gerät, die neuesten Versionen sind jedoch fester Bestandteil der sogenannten Creative Cloud. Nur wer monatlich zahlt, kann sie grenzenlos einsetzen. Die Kosten liegen bei monatlich 24,59 Euro pro Software oder 61,49 Euro für das gesamte Paket.

Der Aufschrei der Community zeigte, die Neuerungen sorgen nicht nur für Zustimmung. Grund genug für ein Update unserer Übersicht dieser Photoshop-Alternativen. Fehlt eure Lieblingssoftware? Dann freuen wir uns auf einen Hinweis in den Kommentaren.

Plattformübergreifende Photoshop-Alternativen

GIMP ist die bekannteste plattformübergreifende Photoshop-Alternative.

GIMP

Der Vorreiter unter den Photoshop-Alternativen heißt GIMP. Die kostenlose Bildbearbeitungs-Software ist für alle gängigen Systeme erhältlich und bietet fast alle Funktionen der Adobe-Software. Wer sich an Fotobearbeitung oder Design versuchen möchte, muss deshalb tief in die Thematik einsteigen, ehe erste Grenzen der Open-Source-Alternative deutlich werden. Die große Community bietet Anfängern viel Unterstützung in Form von Foren und Anleitungen, weshalb GIMP vor allem unter Einsteigern hohe Beliebtheit genießt.

Website: Gimp.org ; Preis: Kostenlos 

CinePaint

Auch CinePaint ging als Abwandlung aus dem GIMP-Projekt hervor. Die Open-Source-Software ermöglicht die Bearbeitung ganzer Bildserien in einem Vorgang und unterstützt Farbtiefen von 8, 16 und 32 Bit. Sie richtet sich deshalb in erster Linie an die Filmindustrie, ist aber auch für Fotografen interessant. CinePaint wird in mehreren Versionen für OS X und Linux angeboten, eine Windows-Version ist allerdings nicht erhältlich.

Website: Cinepaint.org ; Preis: Kostenlos

Photoscape

Photoscape ist schon seit Jahren eine beliebte Alternative zu Photoshop, zumindest unter Amateur-Fotografen. Für Anfänger ist die einfache Bedienung und ordentliche Leistung ein Pluspunkt. Photoscape reicht allerdings nicht an Software wie GIMP oder Paint.Net heran. Sie wird kostenlos angeboten, neue Updates finanzieren die Entwickler durch Spenden. Auf der Projektwebsite werden Versionen für Mac und angeboten.

Website: Photoscape.org ; Preis: Kostenlos

Webbasierte Bildbearbeitung: Pixlr und Photoshop.com

Plattformübergreifend funktioniert auch die webbasierte Bildbearbeitung mit Diensten wie Pixlr und Photoshop.com. Die kostenlose Web-Version der Adobe-Software gehört aufgrund ihrer Funktionsvielfalt auch in diesen Artikel über Photoshop-Alternativen. Wer keine schnelle Internetverbindung sein Eigen nennt, sollte auf die webbasierten Angebote aber lieber verzichten.

Photoshop-Alternativen für Windows

Paint.Net ist als Photoshop-Alternative für Windows-Nutzer zu empfehlen.

Paint.Net

Das ursprüngliche Ziel, Microsoft Paint zu ersetzen, hat Paint.Net bei weitem übertroffen. Das Projekt ist zu einer Bildbearbeitungs-Software gewachsen, die auch Ebenen, Blenden und Transparenzen unterstützt. Mittlerweile hat die große Community zahlreiche Plugins entwickelt, durch die sich die Software erweitern lässt. So können Nutzer mit der kostenlosen Software und dem passenden Plugin auch PSD-Dateien öffnen und bearbeiten.

Website: GetPaint.net ; Preis: Kostenlos

PhotoPlus

Die PhotoPlus Starter Edition bietet Einsteigern grundlegende Funktionen der Bildbearbeitung und unterstützt alle notwendigen Dateiformate. Für Nutzer, die schon mit der Software vertraut sind, lohnt sich das Update auf die Vollversion. Sie ist mittlerweile in der siebten Version erhältlich und kostet mittlerweile nur noch knapp 40,00 Euro pro Lizenz – trotz ähnlicher Funktionen – deutlich weniger als Photoshop.

Website: Serif.com ; Preis: Kostenlos

PaintShop Pro X7 Ultimate

PaintShop Pro X7 Ultimate bietet Nutzern für rund 90,00 Euro pro Lizenz viele nützliche Funktionen zur Bildbearbeitung. Die Architektur der aktuellen Version ermöglicht die schnelle Bearbeitung von mehreren Fotografien sowie die Umsetzung von HDR-Effekten. Im Fokus steht zweifelsfrei der Fotograf, sowohl im Amateur- als auch im Profibereich. Seit der Version 7 sind interessante Bildbearbeitungswerkzeuge, wie das inhaltssensitive Flächenfüllen und eine Datensammlung an kostenfreien Texturen und Hintergründen hinzugekommen. Mit Corel werkelt außerdem ein namhafter Hersteller im Hintergrund.

Website: Corel.com ; Preis: 89,99 Euro

Xara Photo & Graphic Designer 10

Wer schon immer umsteigen wollte, aber durch Kunden oder Kollegen zwangsläufig mit Photoshop zutun hat, kann dieses Bildbearbeitungsprogramm von Tara helfen. Die Kompatibilität mit Adobe Photoshop Daten ist ein wichtiges Feature des Tools, das mittlerweile in der 10 Version erhältlich ist. Für knapp 70,00 Euro ist das Tool eine gelungene Photoshop Alternative. PGD10 ist ausschließlich für Windows erhältlich.

Website: xara.com ; Preis: 69,99 Euro

Photoshop-Alternativen für Mac

Pixelmator ist eine gelungene Photoshop-Alternative für Mac OS X, die auch von der t3n-Redaktion eingesetzt wird.

Pixelmator

Pixelmator ist Mac-Nutzern bestens bekannt. Die Software gilt weithin als gelungene Alternative zu Photoshop und wird auch von der t3n-Redaktion eingesetzt. Pixelmator liefert alle grundlegenden Funktionen des Adobe-Vorbilds und kostet regulär nur 13,99 Euro im App Store. Das letzte Update der Software, Pixelmator 3.3, erschien im November 2014.

Website: Pixelmator.com ; Preis: 13,99 Euro

Seashore

Die Open-Source-Software Seashore basiert auf dem Cocoa-Framework von Mac OS X und richtet sich an Nutzer mit reduzierten Anforderungen. Die zugrundeliegende Technik orientiert sich an GIMP, auch das Dateiformat gleicht diesem Vorbild. Der Funktionsumfang der Software wurde allerdings deutlich heruntergefahren. SeaShore wird kontinuierlich weiterentwickelt, ist zurzeit aber nur als Beta-Version erhältlich.

Website: Seashore.Sourceforge.net Preis: Kostenlos

Aperture

Aperture dient vor allem zur Verwaltung von Bilddateien, bietet aber auch einfache Bearbeitungsoptionen. Die Software wird direkt von Apple entwickelt und läuft deshalb nur unter Mac OS. Eine Reihe von sogenannten Quick-Brush-Pinseln sowie Effekten erleichtern die Bearbeitung, beschränken aber auch die Möglichkeiten. Aperture lohnt deshalb nur für Amateurfotografen. Zudem hat Apple angekündigt ihre beiden Bildbearbeitungssoftwares Aperture und iPhoto einzustampfen und einen Nachfolger auf den Markt zu bringen. 2015 könnte es schon soweit sein.

Website: Apple.com Preis: 69,99 Euro

Lightroom

Lightroom begann als einfache Fotoverwaltungssoftware seinen Marsch, darf mittlerweile aber auch guten Gewissens in diese Liste aufgenommen werden. Besonders für fotografische Bildbearbeitung ist die Software ein adequater Ersatz. Einzeln ist Adobe's Lightroom nicht mehr abonnierbar.  Wer sich für die "Fotografie" Variante der Creative Cloud entscheidet, ist dann für monatlich 12,29 Euro Lizenznehmer von Photoshop und Lightroom. Zur Alternative für Photoshop wird Lightroom also erst, wenn man das Programm einzeln erwirbt. Im Angebot gibt es Lightroom immer mal wieder bei diversen Händlern ab 65,00 Euro.

Website: Adobe.com Preis: ab 65,00 Euro / 12,29 Euro Abo

Affinity Photo

Die Entwickler von PhotoPlus (serif.com) bieten Anfang 2015 auch eine Bildbearbeitungslösung für den Mac. Aus der Affinity Reihe soll "Affinity Photo" für eine neue Adobe Alternative sorgen. Dieses soll nach eigenen Angaben besonders durch die einwandfreie Programm-Performanz überzeugen. Welche Features das Tool tatsächlich bereitstellen wird, ist derzeit noch unbekannt. Seit dem 2. Oktober 2014 ist das erste Produkt "Affinity Designer" im Mac Store für knapp 45,00 Euro erhältlich.

Website: Serif.com ; Preis: Unbekannt

Photoshop-Alternativen für Linux

Krita zählt zu den bekannteren Photoshop-Alternativen für Linux-Systeme.

Krita

Krita ist Teil der Office-Suite KOffice und läuft auch auf Linux-Systemen. Die Open-Source-Software wurde erstmals 2005 veröffentlicht und genießt unter Linux-Nutzern große Beliebtheit – vor allem die Benutzung wird hochgelobt. Die Funktionsvielfalt reicht nicht an Photoshop oder GIMP heran, genügt aber allen grundlegenden Anforderungen.

Website: Krita.org ; Preis: Kostenlos

Pinta

Pinta sollte das Paint.Net der Linux-Systeme werden und ist diesem ambitionierten Ziel überzeugend nah gekommen. Die Open-Source-Software orientiert sich erfolgreich am Windows-Vorbild, das bis zur Version 3.5 offen entwickelt wurde, und überzeugt durch eine intuitive Benutzung. Wer auch die Techniken der Profis einsetzen möchte, um seinen Fotos einen besseren Look zu verleihen, sollte aufgrund der eingeschränkten Funktionen aber lieber zu GIMP greifen. Pinta ist auch

Website: Pinta-Project.com ; Preis: Kostenlos

Welches ist eure liebste Photoshop-Alternative? Schreibt uns eure Meinung in die Kommentare!

Letztes Update des Artikels: 15. Dezember 2014 von Julia Lindenberg.

Original Artikel von: Lars Budde

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Julia Lindenberg
Fotolia: Adobe kauft Stockfotografie-Primus für 800 Millionen Dollar http://t3n.de/news/adobe-fotolia-584672/ 2014-12-12T06:30:08Z
Für 800 Millionen US-Dollar kauft Adobe den bekannten Anbieter für Stockfotografie Fotolia. Dessen Angebot soll künftig vor allem Nutzern von Adobes Creative-Cloud-Umgebung zur Verfügung stehen.

Für 800 Millionen US-Dollar kauft Adobe den bekannten Anbieter für Stockfotografie Fotolia. Dessen Angebot soll künftig vor allem Nutzern von Adobes Creative-Cloud-Umgebung zur Verfügung stehen.

Einer der weltweit größten Marktplätze für kommerzielle Stockfotografie hat einen neuen Besitzer: Fotolia gehört ab sofort zu Adobe. Wie der amerikanische Photoshop-Konzern mitteilt, liegt der Kaufpreis bei rund 800 Millionen US-Dollar.

Fotolia soll in Creative Cloud einziehen

Creative Cloud: Hier soll Fotolia künftig einziehen. (Foto: Adobe)
Creative Cloud: Hier soll Fotolia künftig einziehen. (Foto: Adobe)

Mit dem Kauf will Adobe das mit über 34 Millionen Bildern und Videos bestückte Fotolia-Archiv stärker in seine Creative-Cloud-Lösung einbinden. „Die Übernahme von Fotolia wird die Rolle von Creative Cloud als führende Umgebung für Kreative stärken“, teilte ein Sprecher des Unternehmens aus dem Hauptquartier in San José mit. Creative Cloud hat derzeit 3,4 Millionen aktive Mitglieder und werde mithilfe von Fotolia zum wichtigsten Marktplatz für Kreative, die etwa auf Fotos, Videos und Schriftarten zugreifen wollen.

Adobe verspricht autonome Fotolia-Nutzung

Wie genau Mitglieder an das kostenpflichtige Fotolia-Archiv herankommen, kommuniziert Adobe nicht. Laut Informationen von TechCrunch plane der Konzern allerdings spezielle Abonnement-Modelle, zu deren Features unter anderem ein Zugriff auf Fotolia gehören soll. Zudem soll Fotolia auch Teil des Sozialen Netzwerks Behance werden, um Mitgliedern neue Möglichkeiten zur Monetarisierung ihrer Arbeiten zu eröffnen.

Befürchtungen, Fotolia könnte ab sofort nur noch für Adobe-Kunden zugänglich sein, erteilt das Unternehmen eine Absage. Demnach werde Fotolia für jeden Nutzer als alleinstehender Marktplatz für Stockfotografie erhalten bleiben.

via techcrunch.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Daniel Hüfner
Kostenloses UI-Kit für iOS 8: Über 90 Design-Elemente für Photoshop und Sketch http://t3n.de/news/kostenloses-ui-kit-fuer-ios-8-583200/ 2014-12-05T10:11:46Z
Um für das eigene Design-Tool zu werben, verschenkt UXPin ein umfangreiches UI-Kit für iOS 8. Die mehr als 90 Design-Elemente wurden für das iPhone 5, das iPhone 6 und das iPhone 6 Plus angepasst …

Um für das eigene Design-Tool zu werben, verschenkt UXPin ein umfangreiches UI-Kit für iOS 8. Die mehr als 90 Design-Elemente wurden für das iPhone 5, das iPhone 6 und das iPhone 6 Plus angepasst und können direkt in Photoshop oder Sketch genutzt werden.

UI-Elemente für iOS 8: UXPin veröffentlicht kostenloses Design-Kit

Um Nutzer auf das eigene Prototyping-Tool aufmerksam zu machen, hat UXPin ein kostenloses Design-Kit mit UI-Elementen für iOS 8 veröffentlicht. Alle Elemente lassen sich direkt in Photoshop oder Sketch verwenden. Dankenswerterweise liegen alle Elemente außerdem in den entsprechenden Größen für das iPhone 5, das iPhone 6 und das iPhone 6 Plus vor.

In dem Kit stecken UI-Vorlagen für Benachrichtigungen, verschiedenste Buttons und andere Steuerungselemente, Tabs oder Navigationsleisten. Aber auch speziellere Interface-Elemente für Kontakte, E-Mail- oder Messaging-Clients haben die UXPin-Designer für euch vorbereitet. Ein Blick auf das kostenlose Set lohnt sich daher.

Kostenlose UI-Elemente für iOS-8-Apps: UXPin liefert euch Vorlagen in passenden größen für iPhone 5, 6 und 6 Plus. (Screenshot: UXPin)
Kostenlose UI-Elemente für iOS-8-Apps: UXPin liefert euch Vorlagen in passenden größen für iPhone 5, 6 und 6 Plus. (Screenshot: UXPin)

iOS 8: UI-Elemente für eure App

Das UI-Kit für iOS 8 von UXPin könnt ihr euch kostenlos über die Website des Anbieters herunterladen. Dazu ist lediglich die Angabe eures Namens und eurer E-Mail-Adresse notwendig. Wer sich eingehender mit der Gestaltung von iOS-8-Apps befassen möchte, der sollte auch einen Blick auf unseren Artikel „iOS: Umfangreiche Übersicht liefert alle wichtigen Informationen zum App-Design“ werfen.

Weitere Vorlagen für euer Interface-Design findet ihr außerdem in unserem Artikel „Flat Design: 15 User-Interface-Kits zum Download“. Passende Icon-Sets haben wir euch in diesem Artikel herausgesucht.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Reanimation für’s Web: Einführung in Animationen ohne Flash mit Snapsvg http://t3n.de/magazin/animationen-ohne-flash-einfuehrung-snapsvg-reanimation-235841/ 2014-12-01T14:13:42Z
Eine einfache Alternative für bewegte Bilder im Web ganz ohne Flash hört auf den Namen Snapsvg. Das beste und gleichzeitig mächtigste Feature daran ist neben den Animationen selbst die universelle …

Eine einfache Alternative für bewegte Bilder im Web ganz ohne hört auf den Namen Snapsvg. Das beste und gleichzeitig mächtigste Feature daran ist neben den Animationen selbst die universelle Anwendbarkeit auf mobilen Endgeräten. Der folgende Artikel liefert einen Überblick über die Möglichkeiten von Snapsvg und eine Einführung in die Praxis.

Animationen sind das Herz von Snapsvg. Etwas Background kann nicht schaden und daher lohnt sich ein Blick auf das Grundgerüst SVG. SVG steht für Scalable Vektor Graphics, eine auf XML basierende Spezifikation, die vom World Wide Web Consortium (W3C) als eine Empfehlung für die Darstellung zweidimensionaler Vektorgrafiken gilt. Im Gegensatz zu einer gewöhnlichen Rastergrafik basiert die Vektorgrafik nicht auf einem Pixelraster, sondern aus grafischen Primitiven wie Linien, Kreisen, Polygonen oder allgemeinen Kurven. Hier liegt auch der entscheidende Vorteil einer Vektorgrafik, denn sie wird je nach Größe berechnet und kann daher ohne Qualitätsverlust dargestellt werden.

Seit sich Responsive Webdesign durchgesetzt hat, entstehen ganz neue Anforderungen und Möglichkeiten. Alles muss sich online anpassen können und gleichzeitig sollte die Qualität mindestens gleich gut bleiben – wenn nicht sogar besser sein. Hier springt SVG in die Bresche, denn einer der schwerwiegendsten Nachteile von Flash ergibt sich aus dem Fakt, dass die Technologie nicht auf allen mobilen Endgeräten zur Verfügung steht. Wer Animationen auch mobilen Nutzern ohne Ausgrenzung ausliefern will, kann auf SVGs in Verbindung mit Snapsvg setzen – eine deutlich schlankere Lösung als Flash. Einen kleinen Vorgeschmack über die beachtlichen Möglichkeiten von Snapsvg erhalten Interessierte auf der Snapsvg-Website.

Snapsvg: Schlank und Open Source

Snapsvg ist eine sehr gute Möglichkeit um SVGs auf der eigenen Website einzubinden, denn es handelt sich um eine Open-Source-JavaScript-Library, die von Adobe auf der HTML5 Developer's Conference in San Francisco vorgestellt wurde. Snapsvg macht es Webentwicklern möglich, eigene Vektorgrafiken im SVG-Format zu erstellen und interaktiv zu gestalten. Das ist aber noch nicht alles. Diese Library kann außerdem mit Vektorgrafiken umgehen, die bereits mittels Illustrator oder einer anderen vektorbasierten Zeichensoftware erstellt wurden. Somit lassen sich diese problemlos in die Website einbinden und weiterverarbeiten. Die intuitive API bietet Webentwicklern viele Möglichkeiten, um die SVGs zu bearbeiten oder auch zu animieren.

Wer bereits mit Raphaël zu tun hatte, wird auch zu Snapsvg eine Vorliebe entwickeln. Beide Libraries stammen vom selben Entwickler – Dmitry Baranovskiy. Er hat sich die Mühe gemacht und die komplette Library von Grund auf neu entwickelt und an die Möglichkeiten moderner Browser angepasst.

Der Fokus der Snapsvg-Library liegt nicht auf der Unterstützung von älteren Browser-Versionen. Für diesen Fall sollte eher auf die verwandte Library Raphaël zurückgegriffen werden. Snapsvg kann seine Stärken lediglich im Kontext moderner Browser wie Chrome, Firefox, Safari, Opera und IE9+ ausspielen. Beim Einsatz von SVGs auf mobilen Geräten müssen Entwickler allerdings auf CSS-Basics wie Breite und Höhe des Containers, in dem das SVG-Objekt platziert ist, achten. Ein nettes Beispiel dafür ist pbskids.org, denn dort wird bereits die Snapsvg-Library verwendet und liefert bei jeder Auflösung gestochen scharfe Grafiken.

tec snapsvg 4
Die Startseite von snapsvg.io gibt einen kurzen Überblick, warum und wofür sich der Einsatz von SVG und Snap eignet.

Snapsvg ist nicht nur aufgrund der mobilen Möglichkeiten eine mehr als probate Alternative zu Flash. Ein weiterer Vorteil von Snapsvg ist die Unterstützung einiger sehr mächtiger Features für vektorbasierte Grafiken.

Fancy Animationen mit Snapsvg

Anhand eines Beispiels lässt sich gut erkennen, wie leicht das Erstellen einer animierten Vektorgrafik mit Hilfe des interaktiven API ist. Als Beispiel dient ein Mail-Icon, dessen Wechsel zwischen zwei Zuständen animiert werden soll – geöffnet und geschlossen. Als erstes gilt es, die Snapsvg-Bibliothek im Head-Bereich zu integrieren, um danach ein HTML-Element zu erstellen.

Lib und Depends einbinden:

<script xsrc="js/snap.svg-min.js"></script>

Listing 1

Im darauf folgenden JavaScript-Code wird das SVG-Icon geladen und konfiguriert. Anschließend folgt eine Initialisierung des Icons mit der vorher definierten Konfiguration.

Das Icon einbinden:

<section class="si-icons si-icons-default">
	<span id="mail-icon" class="si-icon si-icon-mail" data-icon-name="mail"></span>
</section>

Listing 2

Als nächstes folgt die Definition der Animation selbst.

Animation definieren:

<script>
	(function() {
		//Animation configuration
		var svgIconConfig = {
			mail: {
				url: 'svg/mail.svg',
				animation: [{
					el: 'path',
					animProperties: {
						from: {
							val: '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,19.897984 z"}'
						}
						to: {
							val: '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,-19.897984 z"}'
						}
					}
				}]
			}
		};
		//Initialize
			var svgicon = new svgIcon(document.getElementByID("mail-icon"), svgIconConfig);

	})();
</script>

Listing 3

Der Aufbau des Codes dürfte gestandene Entwickler vor keine großen Probleme stellen. Eine detaillierte Erläuterung des Codes kann dennoch nicht schaden:

  • Icon Name: dieser muss mit dem Wert des „data-icon-name“-Attributes übereinstimmen
  • url: hier befindet sich die URL zur entsprechenden SVG Datei
  • animation: Ein Array bestehend aus Animationskonfiguration
  • 
el: Der Selector des Elementes, also worauf soll die Animation angewendet werden. In diesem Beispiel ist es „path“
  • animProperties: Hier befindet sich die Animationskonfiguration für den „from“ (der Ursprungszustand) und den „to“ (den End-/Zielzustand)

Das Mail-Icon wird aus dem geschlossenen Zustand in den geöffneten Zustand animiert. Dazu verwendet man folgende anim-Properties:

Animation um die Z-Achse:

from: {
	val: '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,19.897984 z"}'
},
to: {
	val: '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,-19.897984 z"}' }

Listing 4

In der Animation wird der Pfad so geändert, dass das Mail-Icon geöffnet ist. Im Beispiel wird mit relativen Koordinaten gearbeitet. Beim Pfad startet man bei Punkt 61.693118, 24.434001 (x / y) durch die „m“-Anweisung. Dann wird der Pfad solange gezogen, bis er eine Dreiecksform bildet. Schließlich wird der Pfad mit der Angabe von „z“ (ClosePath) geschlossen. Diese Angabe verbindet den zuletzt angegebenen Punkt mit dem Punkt, der als letztes mit einer Anweisung angegeben wurde (in diesem Fall „m“).

tec snapsvg neu 03
Schritt für Schritt zum Dreieck. Die Grafik verdeutlicht, wie mit dem vorangehenden Code ein Dreieck allein durch Pfadangabe erstellt wird. Dieses wird für die Animation des Mail-Icons benötigt.

Nach der Konfiguration des Icons muss es nur noch initialisiert werden:

Initialisierung eines Objekts:

new svgIcon(SVG Element, Konfiguration [, weitere Optionen]);

Listing 5

Als weitere Optionen dienen folgende Eigenschaften.

Definition der Eigenschaften:

speed : 200, //Animationsgeschwindigkeit
easing : mina.linear, //Animationsverlauf
evtoggle : 'click', //Das Event worauf das zu animierende Element
reagiert.
size : { w : 64, h : 64 }, //Größe
onLoad : function() { return false; }, //Wird aufgerufen wenn das SVG
Element geladen wird.
onToggle : function() { return false; } //Wird durch eine Aktion auf das SVG Element aufgerufen z. B. MouseOver, Click

Listing 6

Das Beispiel beschränkt sich jedoch auf das Element und die bereits erstellte Konfiguration. Das Element wird wie folgt initialisiert:

Initialisierung als Objekt:

var svgicon = new svgIcon(document.getElementById("mail-icon"), svgIconConfig);

Listing 7

Das Ergebnis ist eine Animation eines skalierbaren Mail-Icons. Mit ein wenig Übung und einem kurzen Blick in die Dokumentation lassen sich auch anspruchsvollere Animationen umsetzen.

Des Weiteren besteht die Möglichkeit, die Grafiken beispielsweise mit Adobe Illustrator zu erstellen, um sie anschließend mit Snapsvg weiterzuverarbeiten. Auch die Verarbeitung von SVG Strings, die zum Beispiel mit Ajax geladen wurden, ist möglich. Somit kann nach spezifischen Formen gesucht werden.

Die jQuery-ähnliche Syntax, die Snapsvg auszeichnet, dürfte Web- und Frontend-Entwicklern zudem entgegenkommen – was im folgenden Code-Snippet deutlich wird:

jQuery:

$("a.group").slider({
	'transitionIn' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false });

Listing 8

Snapsvg:

circle.attr({
	fill: "#FFF", stroke: "#000", strokeWidth: 3 });

Listing 9

Zeichnen mit Snapsvg als weiteres Feature

Snapsvg bietet neben Animationen auch Funktionen zum Erstellen und Befüllen von Formen wie Kreisen, Rechtecken und andere Figuren. Schnittmasken, Patterns und Gruppen sind weitere wichtige Features der Library.

  1. Schnittmasken bieten dem Anwender die Möglichkeit, Bereiche des Bildes zu verstecken, ohne dabei die Bildinformationen komplett zu verlieren. Die sichtbaren Bereiche liegen vielmehr innerhalb der Form des Maskenobjekts (zum Beispiel eines Kreises). Es wird also das Bildmaterial auf die Maske zugeschnitten.
  2. Patterns sind Muster und teilen sich in Füllmuster zum Füllen von Objekten und Pinselmuster, die zum Füllen von Objektkonturen verwendet werden.
  3. Gruppen ermöglichen schließlich das Gruppieren mehrerer erstellter Elemente, um bestimmte Effekte und andere Veränderungen gleichzeitig auf eine ganze Gruppe von Elementen anzuwenden.

Fazit: Das Web ganz ohne Flash animieren

Snapsvg macht es möglich, das Web auch ganz ohne Flash zu animieren. Die bereitgestellte API eignet sich dazu, jede SVG im Handumdrehen zum Leben zu erwecken und den Inhalt einer Website auf einfache Weise interaktiv zu gestalten. Durch den Einsatz von Media Queries und SVGs sind beispielsweise responsive animierte Werbebanner für verschiedene Werbeformate innerhalb einer Datei im Handumdrehen erstellt – und das ganz ohne Flash.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Michael Ulm
Pixactly: Wie gut kennst du deine Pixel? http://t3n.de/news/pixactly-pixelschubser-579144/ 2014-11-17T16:40:03Z
Wer mit Programmen wie Photoshop arbeitet, der kann es: Das exakte Abschätzen von Pixelabständen und -größen. Das kleine Spiel Pixactly hilft euch dabei, noch besser zu werden. Wie das …

Wer mit Programmen wie Photoshop arbeitet, der kann es: Das exakte Abschätzen von Pixelabständen und -größen. Das kleine Spiel Pixactly hilft euch dabei, noch besser zu werden. Wie das funktioniert, zeigen wir euch in diesem Artikel.

Wer schnell arbeiten möchte und nicht unbedingt die exakten Pixelabstände von der Software angezeigt bekommt, der muss oft schätzen. Gerade beim Positionieren von Elementen auf einer Leinwand in Photoshop oder Pixelmator benötigt der Designer ein gutes Augenmaß. Wobei Pixelmator eine durchaus nutzbare und angenehme Option bietet: nämlich die Anzeige von Abständen zu anderen grafischen Objekten.

Jedoch, auch bei der Webentwicklung muss auf so eine Hilfestellung meistens verzichtet werden, außer man nutzt xScope oder andere Tools die ein Ausmessen erleichtern, aber ganz ehrlich: Wer startet ein Programm, um mal schnell ein DOM-Element mal schnell 187 Pixel nach unten zu verschieben? Denn hier gilt meistens: Trial-and-Error. Und genau hier hilft euch ein kleines Spiel namens Pixactly.

Pixactly: Lässt euch Abstände besser schätzen

pixactly
Pixactly: Ein Spiel für Pixelschubser. (Screenshot: t3n)

Die Idee hinter Pixactly ist denkbar einfach: Es werden euch Längen- und Breiten-Angaben vorgegeben und ihr müsst dann ein Rechteck der gegebenen Größe, per Drag-&-Drop, zeichnen.

Nachdem ihr das Rechteck aufgezogen habt, bekommt ihr Feedback, um wie viele Pixel ihr euch verschätzt habt. Das Spiel hat insgesamt fünf Runden, über die ihr jeweils Punkte sammelt.

Fazit: Pixactly

Dieses kleine Spiel ist durchaus geeignet um das Auge an die eigene Auflösung des Monitors zu gewöhnen. Da Pixactly nur für Desktop-Größen konzipiert wurde, könnt ihr es nicht wirklich auf dem Smartphone spielen, dort wäre allerdings das Üben nicht so sinnvoll.

Pixactly findet ihr übrigens hier.

Habt ihr die fünf Runden fehlerfrei geschafft?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz