Share
Was Sie erstellen werdenHeute werde ich Ihnen zeigen, wie einfach es ist, mit Adobe Illustrator eine eigene Website für den Aufbau zu erstellen. Hoffentlich inspiriert dieses kurze Tutorial Sie dazu, etwas Einzigartiges zu kreieren, das Sie dann im Web nutzen können. Nehmen Sie sich also eine Tasse Kaffee und öffnen Sie Illustrator, damit wir loslegen können.
Da diese Art der Darstellung dazu dient, Ihrer Website einen Charakter zu verleihen, der sich derzeit in der Entwicklung befindet, sollten Sie einige wichtige Punkte berücksichtigen, die das Endprodukt beeinflussen können.
Dazu müssen Sie zwei relativ einfache Fragen beantworten:
Nummer eins: Wie groß wird Ihr Hauptcontainer sein?
Dies ist wirklich sehr wichtig, da Sie Ihre Illustration in einen bestimmten Bereich (Ansichtsbereich) einfügen möchten, insbesondere wenn Sie nur den Entwurf und nicht den Kodierungsteil ausführen.
Auf diese Weise haben Sie eine grundlegende Vorstellung von der Größe (Breite und Höhe) Ihrer Abbildung, die Sie selbst oder mit Hilfe Ihres Programmierpartners festlegen müssen.
Nun, ob es eine ist 960 px breiter Behälter oder etwas Größeres (1024 px), sollten Sie sich immer eine Sekunde Zeit nehmen und entscheiden, welche anderen visuellen Elemente Sie verwenden werden, was uns zur zweiten Frage führt.
Die Art und Weise, wie Sie Ihre Informationen zentrieren, ist sehr wichtig, da der Benutzer sich auf einen bestimmten Teil der Seite konzentrieren soll. Ganz gleich, ob es sich um eine Reihe sozialer Links oder um ein Abonnement-Formular handelt, die Illustration sollte im Mittelpunkt stehen, wo alles andere passiert, da die Idee ist, etwas Nützliches und gleichzeitig visuell ansprechend zu gestalten.
In meinem Fall entschied ich mich für die Verwendung eines 960 x 480 px Größe sollte mich bedeckt haben, da die Komposition theoretisch auf weißem Hintergrund verwendet werden würde und die mittlere Stelle einnehmen würde.
Wenn Sie die Illustration für ein tatsächliches Projekt erstellen, können Sie natürlich immer größer werden, je nachdem, wie Ihr Inhalt angezeigt wird 960 px Breite für die meisten von Ihnen, die dies lesen.
Laut Online Business Dictionary kann eine Marke als „einzigartiges Design, Zeichen, Symbol, Wörter oder eine Kombination davon definiert werden, das zur Erstellung eines Bildes verwendet wird, das ein Produkt identifiziert und es von seinen Mitbewerbern unterscheidet.“
Auf dem heutigen Markt ist es wirklich wichtig, Ihr Unternehmen durch die Schaffung eines Bildes zu unterscheiden, das mit ein paar einfachen visuellen Auslösern leicht erkannt werden kann.
Die gesamte Idee hinter diesem Projekt für dieses Lernprogramm besteht darin, etwas Anziehendes zu bauen, das tatsächlich verwendet werden kann, sobald Sie das endgültige Produkt erstellt haben.
Ich möchte Sie dazu ermutigen, Ihr Design zu Ihrem eigenen zu machen, indem Sie die Abbildung mit einem Branding versehen, so dass Sie am Ende eine einzigartige Version davon haben.
Wie könnten Sie fragen??
Nun, hier sind einige Ansatzpunkte.
Farbe ist leicht eines der hilfreichsten Werkzeuge, wenn es um Markenbildung geht, denn der richtige Wert kann Sie leicht von Ihren Mitbewerbern abheben, sofern Sie ihn interessant machen.
Ich habe ein schönes Gelb für die Akzente und den Hauptfokus gewählt, aber das bedeutet nicht, dass Sie sich daran halten müssen.
Wenn Sie Ihr Farbschema ermittelt haben, können Sie Ihre Marke oder Ihr Unternehmen zeigen, indem Sie sich einem Thema widmen, das sein Kerngeschäft beschreibt. Hier können Sie kreativ werden und die visuellen Elemente reflektieren, die Sie kommunizieren möchten.
Wenn Sie beispielsweise eine Website erstellen, die sich mit der Datenanalyse befassen wird, könnten Sie etwas erstellen, das grafische Diagramme und Prozentzahlen verwendet, um Ihren Zuschauern einen kleinen Einblick in das, was Ihr Unternehmen ausmacht, zu vermitteln.
Wenn Sie sich mit einem digitalen Produkt beschäftigen, beispielsweise einer Software, können Sie aus dem eigentlichen Programm ein abstraktes Fenster mit einigen kleinen Funktionen erstellen, das ihnen einen Hinweis auf die Art Ihres Produkts gibt.
In diesem speziellen Tutorial habe ich mich für etwas allgemeineres entschieden, da ich dachte, Sie könnten meine Version als Ausgangspunkt verwenden und darauf aufbauen.
Lassen Sie uns damit aufhören, kostbare Zeit zu verschwenden, und werden Sie kreativ.
Rufen Sie Illustrator auf und erstellen Sie eine Neues Dokument (Datei> Neu oder Control-N) mit folgenden Einstellungen:
Und aus dem Erweitert Tab:
Kurzer Tipp: Wie Sie vielleicht bereits erraten haben, werden wir die Illustration mit einem pixelgenauen Workflow erstellen. Ich empfehle Ihnen dringend, dass Sie mein Tutorial lesen, wie Sie pixelgenaue Grafiken erstellen, die Ihnen sehr helfen werden.
Bevor wir mit dem Erstellen beginnen, wird dringend empfohlen, die Hauptabschnitte der Illustration auf ihrer eigenen Ebene zu identifizieren und zu trennen, da es später einfacher sein kann, sie zu bearbeiten und später zu bearbeiten, wenn Sie dies benötigen.
Wenn wir unsere Zusammensetzung betrachten, verwenden wir sechs Schichten, die ihnen leicht erkennbare Namen geben, die dazu beitragen, ein bestimmtes Element aus dem Ganzen zu identifizieren.
Sobald Sie Ihr Dokument überlagert haben, können Sie nun mit der eigentlichen Illustration beginnen. Dazu erstellen wir die Grundlinie und den Hintergrund.
Positionieren Sie sich auf der Bodenebene und verwenden Sie die Gerundet Rechteckwerkzeug Erstellen Sie drei verschiedene Breitenformen mit einer Dicke von 6 px und ein 3 px Eckenradius. Färbe sie mit einem dunklen Rot-Grau (# 3f3838) und vergewissern Sie sich dann, dass sie ungefähr positioniert sind 8 px voneinander.
Gruppieren Sie sie dann mit Steuerung-G Tastenkombination, und zentrieren Sie sie auf die Zeichenbrett Verwendung der Panel ausrichten's Horizontales Ausrichtungszentrum Option, um sicherzustellen, dass eine Lücke von 46 px zwischen ihnen und dem ZeichenbrettUnterseite.
Positionieren Sie sich auf der Hintergrundebene und verwenden Sie die Ellipsenwerkzeug (L), ein ... kreieren 536 x 536 px Form, die wir mit einfärben #efefef und dann teilweise maskieren, um den unteren Abschnitt zu verbergen, der unter der Bodenlinie verläuft.
Fügen Sie dann eine weitere kleinere hinzu 46 x 46 px Kreisen Sie zur oberen rechten Ecke und färben Sie sie mit demselben Wert (#efefef).
Kurzer Tipp: Wenn Sie eine andere Farbe für den Hintergrund verwenden möchten, können Sie dies problemlos tun. Wenn Sie jedoch die Datei exportieren, versuchen Sie es zu entfernen, da eine transparente PNG-Datei möglicherweise besser geeignet ist, insbesondere wenn die Breite des Inhalts größer ist als die Abbildung selbst.
Beginnen Sie mit der Arbeit am MacBook, indem Sie eine 426 x 24 px Basis mit rundem Boden, den wir mit Farbe bemalen # e2e2e2 und dann gib ein 6 px Gliederung (#aaaaaa) Verwendung der Versatzpfad Werkzeug.
Kurzer Tipp: Sie können lernen, wie Sie Konturen erstellen, indem Sie einen detaillierten Vergleich zwischen versetzten Pfaden und Strichen betrachten, die als Methoden zum Erstellen von Liniensymbolen verwendet werden.
Sobald Sie die Hauptformen für die Basis (1) haben, fügen Sie einige Details hinzu, wie z. B. den helleren oberen Abschnitt (Breite: 426 px; Höhe: 16px; Farbe: # e2e2e2) (3) die 426 x 6 px dicke Trennlinie (# 3f3838) (2), die subtilen Highlights (Farbe: Weiß; Mischmodus: Überlagerung; Opazität: 80%) (4) und der Touchpad-Bereich (5), damit er wie ein echter Laptop aussieht und nicht wie ein Teller.
Beginnen Sie mit der Arbeit am oberen Bereich des MacBook, indem Sie den Deckel und die tatsächliche Anzeige erstellen.
Erstelle ein 364 x 220 px Rechteck mit einem 18 px Eckenradius auf die oberen linken und rechten Ecken angewendet. Färben Sie die Form mit # 756c6c und gib ihm dann eine 6 px Gliederung (# 3f3838) (2).
Dann erstellen Sie eine andere 184 x 328 px Rechteck, färben Sie es mit Ihrer Markenfarbe (was in unserem Fall ist) # edd87e), gib es gleich 6 px Gliederung (# 3f3838) und positionieren Sie die beiden dann in Richtung Mitte des Deckels, wobei nur ein Spalt verbleibt 6 px zwischen ihnen und der MacBook-Basis (3).
Fügen Sie ein paar Highlights und einen Schatten hinzu, um das Stück ein wenig polierter zu machen (4).
Nachdem Sie das MacBook erstellt haben, können Sie mit dem Thema Ihrer Website arbeiten. Nehmen Sie sich also Zeit, werden Sie kreativ und finden Sie heraus, was genau Sie Ihren Zuschauern zeigen möchten.
In unserem Fall handelt es sich um ein einfaches Website-Layout mit einem oberen Navigationsmenü, einem Platzhalter für Bilder, einem Handlungsaufruf-Button und einigen witzigen Elementen wie der Leiter und dem weißen unbemalten Bereich.
Vergessen Sie nicht, alle Elemente des MacBook mithilfe von zu gruppieren Steuerung-G Tastenkombination, und sperren Sie dann die Ebene, damit wir zum nächsten Abschnitt der Abbildung gelangen können.
Beginnen Sie mit der Arbeit am Kran, und prüfen Sie, ob Sie einigen seiner komponierenden Stücke Markenfarbe oder -farben hinzufügen können, um Akzentfarben zu erzeugen, die Ihnen bei der Ausführung des Themas helfen.
In unserem Fall haben wir unser sonniges Gelb verwendet (# edd87e) für die Kranbedienungskabine und den kleinen Seitenaufzug.
Arbeiten Sie weiter an Ihrem Thema, indem Sie Elemente hinzufügen, die für Ihre Website relevant sind, oder füllen Sie einfach den leeren Bereich aus, damit die Illustration nicht aus dem Gleichgewicht gerät.
Ich beschloss, die Dinge einfach zu halten, indem ich auf der rechten Seite des MacBook einen kleinen Müllcontainer anbrachte, der eine Metapher für die Dinge sein könnte, die während des Baus der Baustelle recycelt wurden.
Beenden Sie die Illustration, indem Sie das letzte Puzzleteil hinzufügen. In unserem Fall handelt es sich um das kleine „Scheinbild“, das vom Kranarm gehalten wird.
So haben Sie es - eine nette, unkomplizierte Anleitung zum Aufbau einer interessanten "Website Under Construction" - Illustration, mit der sich Ihre persönliche oder Unternehmensmarke von den anderen abheben kann.
Vielen Dank für Ihre Zeit und Aufmerksamkeit, und zeigen Sie uns nach dem Lesen dieses Artikels, was Sie sich vorgestellt haben.
Da ich weiß, dass dies ein schnelles Tutorial ist und ich keine Zeit hatte, Sie durch den gesamten kreativen Prozess hinter der Illustration zu führen, gebe ich Ihnen die bearbeitbare Quelldatei, so dass Sie damit Ihr Herz basteln können Wünsche. Den Download-Link finden Sie in der rechten Seitenleiste.
Accentsconagua