Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dirk Metzmacher 4. März 2013

40 unterhaltsame Infografiken und Tipps zur eigenen Gestaltung mit Photoshop

Infografiken bil­den häu­fig kom­ple­xe Zusammenhänge stark ver­ein­facht in Illustrationen ab. Informationen wer­den visua­li­siert, wobei der Textanteil deut­lich klei­ner ist, als die fast schon selbst erklä­ren­den Grafiken. So kann der Betrachter Fakten schnel­ler erfas­sen.

40-infografiken-teaser-w550
Bildquelle: Lauren Manning via pho­to­pin cc

Wir haben in die­ser Kollektion 40 unter­halt­sa­me Infografiken gesam­melt. Diese stam­men aus unter­schied­li­chen Bereichen des Weltennetzes. Die Themen spre­chen 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 wer­den wol­len, haben wir was für Sie: Zwischen den Infografiken fin­den Sie Tipps und Tricks zur eige­nen 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 eige­ne Marke schüt­zen
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 beein­dru­cken nicht nur mit har­ten Fakten, son­dern auch mit anspre­chend gestal­te­ten Grafiken, wel­che die­se Fakten trans­por­tie­ren. Für unser klei­nes Mini-Tutorial set­zen wir den Grafik-Klassiker Photoshop ein. Mit genü­gend Abstraktionsfähigkeit kön­nen Sie die Anweisungen sicher­lich auch mit der Software Ihrer Wahl umset­zen.

Um Prozente in Form eini­ger Balken dar­zu­stel­len, könn­ten Sie etwa eine leich­te 3D-Variante umset­zen. Ziehen Sie dazu mit dem Rechteck-Werkzeug einen kur­zen Balken in einer Farbe Ihrer Wahl auf. In der Optionsleiste soll­te Form akti­viert sein.

drweb-balken1

02 Zweiter Balken

Strg+J kopiert den Balken. Positionieren Sie ihn mit dem Verschieben-Werkzeug etwas nach unten und zur rech­ten Seite. Beide Balken soll­ten sich noch etwas über­schnei­den. Über einen Doppelklick auf die Ebenenminiatur kön­nen Sie die Farbe neu defi­nie­ren. Wählen Sie ein­fach einen hel­le­ren Ton der glei­chen Farbe aus. Wählen Sie auf der rech­ten Seite die zwei Ecken mit dem Direktauswahl-Werkzeug aus und zie­hen Sie die Ecken nach rechts.

drweb-balken2

03 Übergang gestal­ten

Über Strg+J kopie­ren Sie noch ein­mal einen Balken und set­zen bei die­sem mit dem Direktauswahl-Werkzeug den rech­ten, obe­ren Punkt an den rech­ten, obe­ren Punkt des ers­ten Balkens. Den unte­ren, rech­ten Punkt zie­hen Sie auf glei­cher Höhe nach. Dunkeln Sie die Farbe die­ses Balkens stär­ker ab, als die Grundfarbe der ande­ren zwei Balken und ändern Sie die Ebenenreihenfolge so, dass die­ser klei­ne Balken in der Mitte der ande­ren bei­den Balken liegt.

drweb-balken3

04 Kopieren und beschrif­ten

Sehr leicht kön­nen Sie nun die drei Teilstücke in der Ebenenpalette aus­wäh­len, etwa mit gedrück­ter Umschalttaste, kopie­ren, neu posi­tio­nie­ren und eine ande­re Farbe aus­wäh­len. Um die Prozente mit unter­schied­li­chen Balkenlängen abzu­bil­den, nut­zen Sie wie­der das Direktauswahl-Werkzeug. Auch eine Beschriftung darf nicht feh­len, viel­leicht in den Farben der Balken.

drweb-balken4

The Evolution of the Geek

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

© mag­gie

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 frei­stel­len

Um Infografiken schnell auf­zu­wer­ten, bie­ten sich fer­ti­ge Illustrationen von Stockagenturen an. Zumeist lie­gen die­se als Vektorgrafik vor und kön­nen so leicht in der Größe ange­passt wer­den, ohne Qualitätsverluste befürch­ten zu müs­sen. Spielen wir etwa mit dem Thema “Verteilung der Haustierarten auf Haushalte”, so brau­chen wir Illustrationen eben jener Tiere. Hier kommt die Grafik Origami ani­mals logo tem­pla­tes | #89604826 | sel­ling­pix von Shutterstock.com zum Einsatz.

Falls die Grafik noch nicht frei­ge­stellt vor­liegt, kli­cken Sie die Ebene dop­pelt an, um eine Ebene 0 zu erhal­ten. Jetzt kön­nen Sie den Button Ebenenmaske hin­zu­fü­gen unten in der Ebenenpalette ankli­cken und zunächst mit dem Buntstift-Werkzeug und schwar­zer Vordergrundfarbe das Bildelement grob frei­stel­len, dann immer fei­ner, etwa mit dem Polygon-Lasso.

drweb-balken2-1b

02 Illustrationen ein­fü­gen

Liegen die Illustrationen auf eige­nen Ebenen vor, so las­sen sich die­se leicht mit der wei­ter oben gestal­te­ten Abbildung eini­ger Prozente kom­bi­nie­ren. Da wir mit Formen gear­bei­tet haben, kön­nen Sie die Farben schnell an die der Illustrationen anglei­chen. Dieser Teil der Infografik wur­de auf­ge­wer­tet, aber natür­lich soll­te eine Infografik noch weit­aus mehr Elemente zei­gen und die­se in Verhältnis set­zen.

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 mobi­le 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 ein­fach ist es, einen Social Media Job zu ergat­tern
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 per­fek­te Landingpage
infografik23.jpg

© formstack.com

For the Love of Facebook

Website: dailyinfographic.com
Thema: Wie Facebook unse­re Beziehungen beein­flusst
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 zie­hen Sie mit dem Ellipse-Werkzeug bei gedrück­ter Umschalttaste einen Kreis als Kopf auf. Die Beine ent­ste­hen mit dem Abgerundeten-Rechteck-Werkzeug, bei dem in der Optionsleiste ein Radius von 20 Pixel ein­ge­stellt wur­de.

Für das Icon der Frau kön­nen Sie die Formen kopie­ren, mit dem Verschieben-Werkzeug posi­tio­nie­ren, um dann die Farben über einen Doppelklick auf die Ebenenminiatur anzu­pas­sen. Das Kleid der Frau habe ich auf einer eige­nen Ebene mit dem Zeichenstift-Werkzeug gestal­tet, bei dem in der Optionsleiste Form aus­ge­wä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 die­se nur halb zu sehen sind, wäh­len Sie das Rechteck-Werkzeug an und in der Optionsleiste Vordere Form sub­tra­hie­ren aus. Jetzt kön­nen Sie inner­halb der Form Bereiche auf trans­pa­rent set­zen, ein­fach indem Sie eine wei­te­re Form dar­über auf­zie­hen. Die Arme enste­hen wie die Beine mit dem Abgerundeten-Rechteck-Werkzeug.

drweb-balken3-2

03 Prozente

Die Arme der Frau wer­den über Bearbeiten > Pfad trans­for­mie­ren > Drehen posi­tio­niert. Zeichnen Sie die Balken für die Prozente mit dem Rechteck-Werkzeug ein und schrei­ben 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

© mag­gie

What Your Web Design Says About You

Website: sixrevisions.com
Thema: Was dein Webdesign über dich aus­sagt
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 beein­flusst
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 arbei­ten?
infografik39

© Jessica Hisch

A Quick and Comprehensive Type Guide

Website: dailyinfographic.com
Thema: Eigenschaften von Schriftarten
infografik40

© Chelsey Kilzer

(dpe)

Dirk Metzmacher

Dirk Metzmacher

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.

5 Kommentare

  1. Schön und infor­ma­tiv gemacht… Danke ;o)

  2. 35 Years of Apple Products – Visual History

    Dort aus dem Link die dop­pel­ten “” ent­fer­nen, sonst führt der Link zu einer lee­ren Seite.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.