Share
In diesem Lernprogramm erfahren Sie, wie Sie statistische Daten sammeln und verarbeiten und anschließend mit Adobe Illustrator visualisieren. Außerdem erfahren Sie, wie die verschiedenen Vektorelemente dieses Projekts erstellt wurden, wie Sie das Projekt im PDF-Format speichern, bearbeiten, Hyperlinks hinzufügen und die Navigation zwischen den Seiten vornehmen. Dies ist ein detailliertes Infografik-Tutorial, das Sie am Sprung mitverfolgen können.
Informationsgrafiken oder Infografiken sind grafische Darstellungen von Informationen, Daten oder Wissen. Diese Grafiken zeigen komplexe Informationen schnell und übersichtlich, z. B. in Schildern, Karten, Journalismus, technischem Schreiben und Bildung. Mit einer Informationsgrafik entwickeln und kommunizieren Informatiker, Mathematiker und Statistiker Konzepte unter Verwendung eines einzigen Symbols, um Informationen zu verarbeiten (Wiki)..
Informationen, die nur in Zahlen dargestellt werden, können unangenehm erscheinen und die Leute interessieren sich möglicherweise nicht dafür. Unsere Aufgabe ist es, die Nachricht an das Publikum zu senden, das aus Ihren Kunden, Besuchern oder potenziellen Sponsoren bestehen kann.
Heute werden wir Infografiken für Websites erstellen. Unser Ziel ist es, genaue Zahlen zur Verfügung zu stellen, um die Dynamik seiner Entwicklung, die demographische Zusammensetzung der Besucher und das Hinzufügen von Verweisen auf das Dokument aufzuzeigen, die zu einem Zuwachs an Publikum führen können.
Die Datenerfassung für dieses Projekt sollte einfach sein. Moderne Content Management Systeme (CMS) wie WordPress ermöglichen das Erstellen von Websites mit Statistikmodulen. Meine Website wurde vom UCOZ CMS erstellt. Das folgende Bild zeigt das Statistikmodul in diesem System.
Darüber hinaus enthält Ihre Website Informationen, die gesammelt, analysiert und in grafischer Form dargestellt werden können. Zum Beispiel Anzahl der Beiträge, Anzahl der Kommentare dazu, die beliebtesten Veröffentlichungen usw. Es gibt auch externe Datenquellen. Die beliebtesten dieser Ressourcen sind sicherlich Google Analytics und Alexa.
Dies sind die Quellen, die ich in diesem Projekt verwenden werde.
Nachdem die Daten erfasst wurden, müssen Sie sie wahrscheinlich bearbeiten. Beispielsweise werden die Informationen in digitalen Werten dargestellt und Sie möchten sie nur in Prozent darstellen. Sie können eine Kalkulationstabelle wie Microsoft Excel für die Datenverarbeitung verwenden.
Mit diesen Anwendungen können Sie Formeln für Berechnungen verwenden und große Datenmengen verarbeiten.
Daher habe ich mich entschieden, die folgenden Daten anzuzeigen: Zielort - Top 10, Alter und Geschlecht der Demografie, Verkehrsquellen, einige dynamische statistische Daten sowie Informationen zu Top-Inhalten und Werbung.
Nach einigem Nachdenken entschied ich mich, Website-Infografiken in Form eines mehrseitigen Dokuments zu präsentieren. Mit den neuesten Versionen von Adobe Illustrator können Sie diese Art von Dokumenten erstellen. Führen Sie die Anwendung aus und legen Sie die Anzahl der Zeichenflächen und deren Größe im Dialogfenster Neues Dokument fest.
Mit mehrseitigen Dokumenten können Sie effizienter zwischen den Zeichenflächen wechseln, anstatt mehrere Dateien zu öffnen. Auf diese Weise können Sie Zeit und Arbeitsspeicher auf Ihrem Computer sparen.
Darüber hinaus bietet das Dokument eine Reihe von Vorteilen, die Sie am Ende dieses Tutorials erfahren werden. Ich habe 1024 x 768 px Zeichenfläche gewählt. Das ist die genaue Größe eines iPad-Bildschirms. Mobilgeräte sind im Moment sehr beliebt, deshalb habe ich mich entschlossen, dieses Infografik-Projekt zu erstellen, um auf ihnen angezeigt zu werden.
Jetzt arbeiten wir am Design unserer ersten Zeichenfläche. Nimm das Rechteckwerkzeug (M) und erstelle ein Rechteck mit blauer Füllung. Das Rechteck wird auf die Größe der Zeichenfläche festgelegt.
Kopieren Sie das Rechteck vorne und fügen Sie es ein (Befehl + C; Befehl + F). Lassen Sie uns ein einfaches Verlaufsnetz mit dem Maschenwerkzeug (U) erstellen, wählen Sie dann die Knoten dieses Gitters mit Hilfe des Direktauswahl-Werkzeugs (A) aus und färben Sie sie in verschiedenen Graustufen. Der zentrale Knoten ist weiß. Je weiter wir uns vom Zentrum entfernen, desto dunkler werden die Graustufen.
Wählen Sie nun das gesamte Verlaufsnetz aus und wenden Sie im Transparenzbedienfeld den Modus „Multiplizieren“ an.
Schränken Sie den Bereich ein, in dem sich die Informationen befinden. Erstellen Sie einen Kreis mit dem Ellipse-Werkzeug (L). Füllen Sie den Kreis mit einem radialen Verlauf von Schwarz nach Weiß und wenden Sie den Modus "Multiplizieren" an.
Nehmen Sie das Auswahlwerkzeug (V) und strecken Sie den Begrenzungsrahmen in horizontaler Richtung, während Sie die Wahltaste gedrückt halten.
Erstellen Sie mit dem Rechteckwerkzeug (M) ein Rechteck wie folgt:
Wählen Sie die Ellipse und das Rechteck aus, und wählen Sie dann Objekt> Schnittmaske> Erstellen aus, oder verwenden Sie die Tastenkombination Befehl + 7.
Wählen Sie die erreichte Gruppe aus und gehen Sie zu Objekt> Transformieren> Reflektieren…. Klicken Sie anschließend im Dialogfeld auf die Schaltfläche Kopieren.
Platzieren Sie die resultierende Gruppe oben auf der Zeichenfläche.
In der oberen rechten Ecke der Zeichenfläche habe ich beschlossen, das Logo meiner Website zu platzieren. Zuerst erstellen wir ein Menüband, auf dem es sich befindet. Erstellen Sie ein Rechteck und fügen Sie mit dem Stiftwerkzeug (P) einen neuen Punkt an der unteren Seite hinzu.
Wählen Sie mit dem Direktauswahl-Werkzeug die unteren Ecken des Rechtecks aus und verschieben Sie sie nach oben.
Füllen Sie das Band mit einem linearen Farbverlauf, der aus verschiedenen Schattierungen einer dunkelgrauen Farbe besteht.
Jetzt erstellen wir einen Schatten aus dem Menüband. Kopieren Sie die Form und fügen Sie sie wieder ein (Befehl + C; Befehl + B). Füllen Sie die neue Form mit einer grauen Farbe und verschieben Sie sie ein wenig nach rechts und unten. Wenden Sie den Überblend-Mischmodus auf den Schatten an. Verschieben Sie die oberen Ecken der Schattenform so, dass sie am Rand der Zeichenfläche liegen.
Jetzt habe ich das Logo eingefügt und es mit einem linearen Verlauf von Blau nach Weiß aufgefüllt, damit es nicht flach aussieht und mit dem Gesamtfarbschema der Komposition übereinstimmt.
Da mein Dokument aus mehreren Seiten besteht, ist es angebracht, eine Navigation zwischen den Seiten zu erstellen. Fahren Sie mit der Erstellung der Paginierung fort. Erstellen Sie mit dem Rechteckwerkzeug (M) ein Quadrat mit 25 x 25 Pixeln und einer linearen Farbverlaufsfüllung, die aus zwei blauen Abstufungen besteht.
Lass das Rechteck ausgewählt, gehe zu Effekt> Stilisieren> Runde Ecken ... und stelle den Radius der abgerundeten Ecken ein.
Fügen Sie dem Objekt im Bereich "Darstellung" eine neue Füllung hinzu. Ändern Sie die Farbe des Farbverlaufsschiebers der unteren Füllung in einen helleren Blauton.
Wenn Sie die untere Füllung ausgewählt lassen, gehen Sie zu Effekt> Verzerrung und Transformation… und legen Sie den vertikalen Versatzwert fest.
Fügen Sie eine weitere Füllung zum Erscheinungsbildbereich hinzu, platzieren Sie diese unter den anderen Füllungen und ersetzen Sie die Farbe durch ein dunkles Blau.
Lassen Sie diese Füllung ausgewählt, gehen Sie zu Effekt> Verzerrung und Transformation… und legen Sie den vertikalen und horizontalen Versatzwert fest.
Gehen Sie nun zu Effekt> Weichzeichnen> Gaußsche Weichzeichnung… und stellen Sie den Radius im Dialogfenster ein.
Duplizieren Sie die erstellte Schaltfläche dreimal.
Nimm das Textwerkzeug (T) und erstelle die Zahlen auf den Schaltflächen.
Kopieren Sie die Zahlen und fügen Sie sie wieder ein. Füllen Sie sie mit einer dunkelblauen Farbe und verschieben Sie sie um 1 px nach unten.
Lassen Sie uns eine Schaltfläche erstellen, die der ersten gedrückten Seite entspricht. Löschen Sie eine der Füllungen im Erscheinungsbildfenster, ersetzen Sie den Verlauf der zweiten Füllmenge und ändern Sie die Transformationsparameter der dritten.
Erstellen Sie ein schwarzes Rechteck am unteren Rand der Zeichenfläche. Erstellen Sie mit Hilfe des Type-Tools (T) einen Text, der die Urheberschaft und die Informationsquelle angibt.
Gruppieren Sie alle erstellten Elemente, kopieren Sie sie und fügen Sie sie auf den restlichen Seiten unseres Dokuments ein (Befehl + C; Befehl + V)..
Seiten sollten sich nur in der Darstellung der aktiven Schaltfläche in der Paginierung unterscheiden. Sie können das Aussehen der Schaltfläche mit Hilfe des Pipettenwerkzeugs (I) mit den Einstellungen in der folgenden Abbildung schnell ändern.
Erstellen Sie Titel auf den Seiten gemäß den Informationen, die darauf platziert werden. Für die Titel habe ich mich für die gleiche Schriftart entschieden, die ich früher verwendete, nämlich Rockwell Regular.
Informationen zum Standort des Publikums werden normalerweise auf einer Weltkarte angezeigt. Sie können diese Vektorkarte herunterladen, indem Sie auf den folgenden Link klicken. Oder Sie können wie ich selbst eine Karte erstellen. Zu diesem Zweck haben Sie die richtige Karte gefunden und fügen mit Hilfe des Pencil-Tools (N) eine benutzerdefinierte Kontur hinzu. Die Einstellungen für das Stiftwerkzeug (N) werden unten gezeigt:
Markieren Sie nun die Länder, die den meisten Besuchern entsprechen, mit Kreisen, die mit einem radialen Verlauf gefüllt sind. Der Farbverlauf besteht aus drei Farben: Weiß, Blau und Schwarz. Der schwarze Schieberegler ist auf 0% Deckkraft eingestellt.
Nun legen Sie die Daten ab. Je größer die Anzahl der Besucher ist, desto größer ist die Schriftgröße. Es gibt keine direkte quantitative Abhängigkeit zwischen der Schriftgröße und dem prozentualen Wert, obwohl Größenunterschiede beim Augapfel größere Werte hervorheben werden.
Die Quelle des Inhalts, das bin ich, befindet sich in der Ukraine. Also habe ich den Ort meines Standorts mit dem Kartenschild markiert.
Verbinden Sie die Ukraine mit anderen Verkehrsquellen mit Hilfe gepunkteter gekrümmter Segmente, die mit dem Stiftwerkzeug erstellt werden sollten.
Beachten Sie, dass hier die Informationen eindeutig interpretiert wurden. Ich entschied mich dafür, die Diagrammlegende unten rechts auf der Seite zu platzieren.
Nun fahren wir mit der zweiten Seite fort. Wir werden die Informationen auf dieser Seite mit den Werkzeugen von Adobe Illustrator visualisieren. Die Informationen zu den Altersgruppen der Besucher werden in Form eines Radardiagramms präsentiert. Nehmen Sie das Radargraph-Werkzeug und erstellen Sie eine Auswahlliste.
Als Ergebnis dieser Aktionen wird ein primäres Diagramm erstellt und ein Diagrammdatenfenster geöffnet, in das wir die Daten eingeben.
Wählen Sie die Zellen aus, und geben Sie in das Textfeld "Eingabe" die Kategorien- und Datenbeschriftungen ein.
Klicken Sie im Fenster Graph Data auf die Schaltfläche Apply, um das Radar-Diagramm zu erhalten.
Sie können den Diagrammstil nach seiner Erstellung auswählen. Doppelklicken Sie auf das Werkzeugsymbol in der Symbolleiste, und wählen Sie im Dialogfeld Diagrammtyp die erforderlichen Optionen aus.
Um mit den Elementen des Diagramms arbeiten zu können, müssen Sie es wie bei einfachen Vektorobjekten aufheben. Schließen Sie dazu das Fenster Graph Data und gehen Sie zu Object> Ungroup. Nach diesem Vorgang können Sie den Diagrammstil nicht mehr mit dem Dialogfenster Diagrammstil verwalten und Daten im Diagrammdatenfenster ändern. An diesem Punkt wird ein Warnfenster geöffnet, das uns darüber informiert.
Platzieren Sie nun das Diagramm auf der Seite und wählen Sie Objektfarben aus, die dem Gesamtdesign des Projekts entsprechen.
Um das Diagramm auf der nächsten Seite zu erstellen, habe ich die gesammelten Daten und die Werkzeuge für Spalten-, Balken- und Kreisdiagramm verwendet.
Die Prinzipien der Arbeit mit diesen Instrumenten unterscheiden sich nicht von denen der Arbeit mit dem Radargraphenwerkzeug. Weitere Informationen zum Arbeiten mit Diagrammen in Adobe Illustrator finden Sie unter dem folgenden Link.
Die Weltkarte auf der ersten Seite hat einen Silhouette-Look, daher habe ich mich dazu entschlossen, Informationen über die geschlechtsspezifische Zusammensetzung der Besucher in Form von Silhouetten bereitzustellen. Dieses Set besteht aus Mann und Frau. Meine Website wird von 88% Männern und nur 12% Frauen besucht. Ich bin irgendwie überrascht von dieser Tatsache. Also entschied ich mich für die Silhouetten, die im Bild unten gezeigt sind.
Um sicherzustellen, dass alle Seiten des Projekts im selben Stil erstellt werden, habe ich auch Personen-Silhouetten auf anderen Seiten platziert.
Die letzte Seite enthält nur Textinformationen zu den beliebtesten Inhalten und Werbedetails. In dieser Arbeit habe ich kostenlose Vektor-Silhouetten verwendet, die Sie finden können, indem Sie auf den folgenden Link klicken. Sie können natürlich nach der Prozessgliederung in diesem Lernprogramm eine eigene erstellen, um eine Vektor-Silhouette zu erstellen.
Wir speichern unser Projekt im PDF-Format, sodass es bei Bedarf problemlos verteilt werden kann. Gehen Sie dazu auf Datei> Speichern unter… und wählen Sie die entsprechenden Optionen in den geöffneten Dialogfenstern aus.
Das Speichern der Datei im PDF-Format bietet uns eine Reihe von Vorteilen. Ich liste nur einige davon auf:
Schauen wir uns genauer an, wie Sie einen Hyperlink in das Dokument einfügen und darin eine interne Navigation erstellen. Um eine PDF-Datei zu bearbeiten, sollten Sie Adobe Acrobat Pro verwenden. Öffnen Sie also die Datei in dieser Anwendung, öffnen Sie die Registerkarte Inhalt und klicken Sie auf die Schaltfläche Link.
Erstellen Sie nun eine Auswahlrahmen über dem Objekt, an dem sich der Hyperlink befinden soll.
Wählen Sie im geöffneten Dialogfeld die Optionen aus der folgenden Abbildung aus und klicken Sie auf die Schaltfläche Weiter.
Fügen Sie den Link ein und klicken Sie auf die Schaltfläche OK.
Verwenden Sie zum Erstellen einer internen Navigation dasselbe Link-Tool. Erstellen Sie eine Auswahlliste über einer der Schaltflächen. Wählen Sie im Dialogfenster "Gehe zu einer Seitenansicht" und klicken Sie auf "Weiter". Klicken Sie anschließend auf "Link festlegen".
Doppelklicken Sie nun in den Begrenzungsrahmen der Schaltfläche. Gehen Sie dann im geöffneten Dialogfenster auf die Registerkarte Aktionen.
Wählen Sie Aktion, klicken Sie auf die Schaltfläche Bearbeiten und geben Sie die gewünschte Seitennummer ein.
Fügen Sie mit der beschriebenen Technik alle erforderlichen Links in unser Dokument ein.
Das ist es! Sie haben gerade gelernt, wie Sie Infografiken für Ihre Website erstellen. Wenn Sie einen eigenen Blog betreiben und Werbetreibende gewinnen möchten, kann dies ein mächtiges Werkzeug sein. Angesichts dieser Fähigkeiten gibt es natürlich viele potenzielle Kunden, die ein solches Informationsgrafik-basiertes Geschäftsdokument benötigen.
Accentsconagua