Bilder & Vektorgrafiken bearbeiten

40 unterhaltsame Infografiken und Tipps zur eigenen Gestaltung mit Photoshop

4. März 2013
von

Infografiken bilden häufig komplexe Zusammenhänge stark vereinfacht in Illustrationen ab. Informationen werden visualisiert, wobei der Textanteil deutlich kleiner ist, als die fast schon selbst erklärenden Grafiken. So kann der Betrachter Fakten schneller erfassen.

40-infografiken-teaser-w550
Bildquelle: Lauren Manning via photopin cc

Wir haben in dieser Kollektion 40 unterhaltsame Infografiken gesammelt. Diese stammen aus unterschiedlichen Bereichen des Weltennetzes. Die Themen sprechen zumeist Grafiker, Programmierer und Nerds an (und das sind wir doch alle hier, oder?). Tauchen Sie ein in die Welt der Diagramme, Abläufe und Abbildungen von Größenverhältnissen, Schichten und Funktionsweisen.

Und wenn Sie dann selbst tätig werden wollen, haben wir was für Sie: Zwischen den Infografiken finden Sie Tipps und Tricks zur eigenen Gestaltung.

Designing The “World Of Programming” Infographic

Website: smashingmagazine.com
Thema: Geschichte der Programmiersprachen
infografik1

© Adit Gupta

Logos: A Look at the Meaning in Colors [Infographic]

Website: dailyinfographic.com
Thema: Wirkung von Farben
infografik2

© Grayson

Quick Tips for Obtaining a Trademark

Website: dailyinfographic.com
Thema: Die eigene Marke schützen
infografik3

© Tim

The History of the iPhone

Website: mashable.com
Thema: Die Geschichte des iPhones
infografik4

© mashable.com

Prozente abbilden

01 Erster Balken

Aktuelle Infografiken beeindrucken nicht nur mit harten Fakten, sondern auch mit ansprechend gestalteten Grafiken, welche diese Fakten transportieren. Für unser kleines Mini-Tutorial setzen wir den Grafik-Klassiker Photoshop ein. Mit genügend Abstraktionsfähigkeit können Sie die Anweisungen sicherlich auch mit der Software Ihrer Wahl umsetzen.

Um Prozente in Form einiger Balken darzustellen, könnten Sie etwa eine leichte 3D-Variante umsetzen. Ziehen Sie dazu mit dem Rechteck-Werkzeug einen kurzen Balken in einer Farbe Ihrer Wahl auf. In der Optionsleiste sollte Form aktiviert sein.

drweb-balken1

02 Zweiter Balken

Strg+J kopiert den Balken. Positionieren Sie ihn mit dem Verschieben-Werkzeug etwas nach unten und zur rechten Seite. Beide Balken sollten sich noch etwas überschneiden. Über einen Doppelklick auf die Ebenenminiatur können Sie die Farbe neu definieren. Wählen Sie einfach einen helleren Ton der gleichen Farbe aus. Wählen Sie auf der rechten Seite die zwei Ecken mit dem Direktauswahl-Werkzeug aus und ziehen Sie die Ecken nach rechts.

drweb-balken2

03 Übergang gestalten

Über Strg+J kopieren Sie noch einmal einen Balken und setzen bei diesem mit dem Direktauswahl-Werkzeug den rechten, oberen Punkt an den rechten, oberen Punkt des ersten Balkens. Den unteren, rechten Punkt ziehen Sie auf gleicher Höhe nach. Dunkeln Sie die Farbe dieses Balkens stärker ab, als die Grundfarbe der anderen zwei Balken und ändern Sie die Ebenenreihenfolge so, dass dieser kleine Balken in der Mitte der anderen beiden Balken liegt.

drweb-balken3

04 Kopieren und beschriften

Sehr leicht können Sie nun die drei Teilstücke in der Ebenenpalette auswählen, etwa mit gedrückter Umschalttaste, kopieren, neu positionieren und eine andere Farbe auswählen. Um die Prozente mit unterschiedlichen Balkenlängen abzubilden, nutzen Sie wieder das Direktauswahl-Werkzeug. Auch eine Beschriftung darf nicht fehlen, vielleicht in den Farben der Balken.

drweb-balken4

The Evolution of the Geek

Website: visual.ly
Thema: Die Evolution der Geeks
infografik5

© maggie

Sitting All Day is Killing You

Website: coolinfographics.com
Thema: Ungesundes Sitzen
infografik6

© Randy Krum

Salmon: Wild vs. Farm

Website: dailyinfographic.com
Thema: Tierhaltung
infografik7

© Jasmin

SEO In Pictures – Our SEO Infographic

Website: datadial.net
Thema: Suchmaschinenoptimierung
infografik8

© Matt

The Digital Dump

Website: visual.ly
Thema: Elektromüll
infografik9

© charles

Illustrationen

01 Illustration freistellen

Um Infografiken schnell aufzuwerten, bieten sich fertige Illustrationen von Stockagenturen an. Zumeist liegen diese als Vektorgrafik vor und können so leicht in der Größe angepasst werden, ohne Qualitätsverluste befürchten zu müssen. Spielen wir etwa mit dem Thema “Verteilung der Haustierarten auf Haushalte”, so brauchen wir Illustrationen eben jener Tiere. Hier kommt die Grafik Origami animals logo templates | #89604826 | sellingpix von Shutterstock.com zum Einsatz.

Falls die Grafik noch nicht freigestellt vorliegt, klicken Sie die Ebene doppelt an, um eine Ebene 0 zu erhalten. Jetzt können Sie den Button Ebenenmaske hinzufügen unten in der Ebenenpalette anklicken und zunächst mit dem Buntstift-Werkzeug und schwarzer Vordergrundfarbe das Bildelement grob freistellen, dann immer feiner, etwa mit dem Polygon-Lasso.

drweb-balken2-1b

02 Illustrationen einfügen

Liegen die Illustrationen auf eigenen Ebenen vor, so lassen sich diese leicht mit der weiter oben gestalteten Abbildung einiger Prozente kombinieren. Da wir mit Formen gearbeitet haben, können Sie die Farben schnell an die der Illustrationen angleichen. Dieser Teil der Infografik wurde aufgewertet, aber natürlich sollte eine Infografik noch weitaus mehr Elemente zeigen und diese in Verhältnis setzen.

drweb-balken2-2

So You Want to Watch YouTube Flowchart

Website: karenkavett.blogspot.de
Thema: Was schaue ich auf YouTube?
infografik10

© karenkavett.com

Mobile Mania – The Growing Importance of Mobile Website Optimization

Website: blog.kissmetrics.com
Thema: Website-Optimierung für mobile Endgeräte
infografik11

© blog.kissmetrics.com

Beautiful-HTML

Website: css-tricks.com
Thema: Schöner HTML-Code
infografik12

© css-tricks.com

Facebook vs. Twitter Social Demographics

Website: coolinfographics.com
Thema: Mitglieder-Vergleich
infografik13

© Randy Krum

What Makes Someone Leave A Website?

Website: blog.kissmetrics.com
Thema: Warum es zu Absprüngen nach einem Website-Besuch kommt
infografik14

© blog.kissmetrics.com

CSS Infographic – Interesting Facts and History

Website: blog.templatemonster.com
Thema: CSS-Fakten
infografik15

© Edward Korcheg

Die Evolution des Webs

Website: evolutionofweb.appspot.com
Thema: Die Entwicklung des Netzs
infografik16

© evolutionofweb.appspot.com

How To Get A Job In Social Media In 5 Minutes

Website: dailyinfographic.com
Thema: So einfach ist es, einen Social Media Job zu ergattern
infografik17

© Jay Willingham

What do I.T. Specialists do?

Website: dailyinfographic.com
Thema: Was machen IT-Leute?
infografik18

© Eric Lyday

The Infographic Noob Guide to Online Marketing

Website: coolinfographics.com
Thema: Online-Marketing
infografik19

© Randy Krum

Online Testing Essentials

Website: blog.kissmetrics.com
Thema: Online-Testing
infografik20

© blog.kissmetrics.com

The Anatomy of an Effective Web Design

Website: webdesignledger.com
Thema: Effektives Webdesign
infografik21

© Dona Collins

The Internet, a Decade Later

Website: dailyinfographic.com
Thema: Das Internet, eine Dekade später
infografik22

© Chelsey Kilzer

The Anatomy Of A Perfect Landing Page

Website: formstack.com
Thema: Die perfekte Landingpage
infografik23.jpg

© formstack.com

For the Love of Facebook

Website: dailyinfographic.com
Thema: Wie Facebook unsere Beziehungen beeinflusst
infografik24

© Chelsey Kilzer

Awesome Idea For A Website

Website: vitamintalent.com
Thema: Tolle Idee für ein Webprojekt?
infografik25

© vitamintalent.com

35 Years of Apple Products – Visual History

Website: coolinfographics.com
Thema: Geschichte von Apple
infografik26

© Randy Krum

Mann und Frau

01 Kopf und Beine

Stellen Sie die Vordergrundfarbe ein und und ziehen Sie mit dem Ellipse-Werkzeug bei gedrückter Umschalttaste einen Kreis als Kopf auf. Die Beine entstehen mit dem Abgerundeten-Rechteck-Werkzeug, bei dem in der Optionsleiste ein Radius von 20 Pixel eingestellt wurde.

Für das Icon der Frau können Sie die Formen kopieren, mit dem Verschieben-Werkzeug positionieren, um dann die Farben über einen Doppelklick auf die Ebenenminiatur anzupassen. Das Kleid der Frau habe ich auf einer eigenen Ebene mit dem Zeichenstift-Werkzeug gestaltet, bei dem in der Optionsleiste Form ausgewählt war.

drweb-balken3-1

02 Arme und Körper

Erstellen Sie den Körper des Mannes mit dem Rechteck-Werkzeug. Ziehen Sie die Schultern mit dem Abgerundeten-Rechteck-Werkzeug auf. Damit diese nur halb zu sehen sind, wählen Sie das Rechteck-Werkzeug an und in der Optionsleiste Vordere Form subtrahieren aus. Jetzt können Sie innerhalb der Form Bereiche auf transparent setzen, einfach indem Sie eine weitere Form darüber aufziehen. Die Arme enstehen wie die Beine mit dem Abgerundeten-Rechteck-Werkzeug.

drweb-balken3-2

03 Prozente

Die Arme der Frau werden über Bearbeiten > Pfad transformieren > Drehen positioniert. Zeichnen Sie die Balken für die Prozente mit dem Rechteck-Werkzeug ein und schreiben Sie die Prozente mit dem Text-Werkzeug in weißer Farbe.

drweb-balken3-3

Flickr User Model

Website: flickr.com/photos/bryce
Thema: Flickr-Anwender
infografik27

© Bryce Glass

Twitter Users Profile Infographic

Website: infographicsshowcase.com
Thema: Typische Twitter-Nutzer
infografik28

© Ciaran Duffy

Disk Space

Website: flickr.com/photos/36343059@N08
Thema: Speicherplatz
infografik29

© Section Design

Hierarchy Of Digital Distractions

Website: informationisbeautiful.net
Thema: Aufmerksamkeitspyramide
infografik30

© David McCandless

The Colors Of The Web

Website: static.colourlovers.com.s3.amazonaws.com
Thema: Die Farben des Internets
infografik31

© colourlovers.com

Social Media Yearbook

Website: visual.ly
Thema: Das Social-Media-Jahrbuch
infografik32

© maggie

What Your Web Design Says About You

Website: sixrevisions.com
Thema: Was dein Webdesign über dich aussagt
infografik33

© Dona Collins

History of the Internet:1969-2012

Website: dailyinfographic.com
Thema: Die Geschichte des Internets
infografik34

© Rachel

Client Infographic: How Affiliate Marketing Works

Website: coolinfographics.com
Thema: Funktionsweise Affiliate Marketing
infografik35

© Randy Krum

Web Designers vs. Web Developers

Website: sixrevisions.com
Thema: Unterschied Webdesigner und Webdeveloper
infografik36

© Shane Snow

How Loading Time Affects Your Bottom Line

Website: blog.kissmetrics.com
Thema: Wie die Ladezeit die Absprungrate beeinflusst
infografik37

© kissmetrics.com

Gamers Get Girls (Or Guys)

Website: dailyinfographic.com
Thema: Gamer und Partnerschaften
infografik38

© Eric Lyday

Should I work for free?

Website: shouldiworkforfree.com
Thema: Sollte man für lau arbeiten?
infografik39

© Jessica Hisch

A Quick and Comprehensive Type Guide

Website: dailyinfographic.com
Thema: Eigenschaften von Schriftarten
infografik40

© Chelsey Kilzer

(dpe)

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

Tags:

4 Kommentare zu „40 unterhaltsame Infografiken und Tipps zur eigenen Gestaltung mit Photoshop
  1. Robbyn Gerhardt am 4. März 2013 um 13:39

    35 Years of Apple Products – Visual History

    Dort aus dem Link die doppelten “” entfernen, sonst führt der Link zu einer leeren Seite.

  2. […] das coole Dr.Web-Magazin habe ich den Beitrag 40 unterhaltsame Infografiken und Tipps zur eigenen Gestaltung mit Photoshop erstellt. Neben zahlreichen Beispielen von guten Infographics könnt ihr auch einige Tipps zur […]

  3. […] Infografiken sind ein beliebtes Mittel, um komplexe Informationen schön aufzubereiten und damit leichter zu transportieren. Für nahezu jeden möglichen Zweck existieren mittlerweile Infografiken. In der Druck- und Medienbranche dürfte gerade die Infografik „Print lebt!“ von zipcon consulting und grafikpolizei.de bekannt sein. Das „Dr. Web“-Onlinemagazin hat 40 schöne, wenn auch teilweise schon ältere, Infografiken zusammengestellt. Darüber hinaus gibt es einige nützliche Tipps, für die Gestaltung der eigenen Infografik: drweb.de […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!