Share
In dem folgenden Lernprogramm erfahren Sie, wie Sie einen Preisbereichsfilter erstellen, der in einer Handy-App oder auf einer Website-Oberfläche gut aussieht. Wir werden in Adobe Illustrator mit einigen grundlegenden Tools arbeiten, um ein wesentliches Element für jedes Designer-Portfolio zu erstellen.
Öffnen Sie Illustrator und drücken Sie die Befehlstaste + N, um ein neues Dokument zu erstellen. Geben Sie 600 in das Feld Breite und 300 in das Feld Höhe ein, und klicken Sie auf die Schaltfläche Erweitert. Wählen Sie RGB, Bildschirm (72ppi) und vergewissern Sie sich, dass das Kontrollkästchen "Neue Objekte am Pixelraster ausrichten" deaktiviert ist, bevor Sie auf OK klicken.
Aktivieren Sie das Raster (Ansicht> Raster anzeigen) und die Option Am Raster ausrichten (Ansicht> Am Raster ausrichten). Sie benötigen alle 1 Pixel ein Raster. Gehen Sie einfach zu Bearbeiten> Voreinstellungen> Hilfslinien> Raster, geben Sie jeweils 1 in das Feld Rasterzeile und 1 in das Feld Unterteilungen ein. Sie können auch das Infofenster (Fenster> Info) für eine Live-Vorschau mit der Größe und Position Ihrer Formen öffnen. Vergessen Sie nicht, die Maßeinheit unter Bearbeiten> Voreinstellungen> Einheit> Allgemein in Pixel zu ersetzen. Alle diese Optionen erhöhen die Arbeitsgeschwindigkeit erheblich.
Erstellen Sie mit dem Rechteckwerkzeug (M) eine 301 x 3px-Form und füllen Sie sie mit R = 50 G = 50 B = 50. Wählen Sie dieses dünne Rechteck aus, konzentrieren Sie sich auf das Bedienfeld „Erscheinungsbild“ („Fenster“> „Erscheinungsbild“), und fügen Sie mithilfe der Schaltfläche „Neue Füllung hinzufügen“ eine zweite Füllung hinzu (durch den Pfeil im folgenden Bild gezeigt). Wählen Sie diese neue Füllung aus, stellen Sie ihre Farbe auf R = 25 G = 25 B = 25 und gehen Sie zu Effekt> Path> Offset Path. Geben Sie einen -1px-Offset ein und klicken Sie auf OK. Kehren Sie zum Fenster "Darstellung" zurück, stellen Sie sicher, dass keine Füllung oder Kontur ausgewählt ist, und wechseln Sie zu Effekt> Stil> Abgerundete Ecken. Geben Sie einen Radius von 1,5 Pixel ein und klicken Sie auf OK.
Fokussieren Sie auf der linken Seite der im vorherigen Schritt erstellten Form. Erstellen Sie mit dem Rechteckwerkzeug (M) zwei 1 x 3px-Rechtecke. Füllen Sie beide Formen mit R = 50 G = 50 B = 50, platzieren Sie sie wie im ersten Bild gezeigt, und verwandeln Sie sie in einen zusammengesetzten Pfad (Object> Compound Path> Make). Wählen Sie diesen neuen zusammengesetzten Pfad aus und gehen Sie zu Effekt> Stilisieren> Abgerundete Ecken. Geben Sie einen Radius von 0,5 Pixel ein, klicken Sie auf OK und gehen Sie zu Effekt> Verzerrung und Transformation> Transformation. Geben Sie die im dritten Bild angezeigten Daten ein und klicken Sie auf OK.
Erstellen Sie mit dem Rechteckwerkzeug (M) zwei 1 x 4 Pixel große Rechtecke. Füllen Sie beide Formen mit R = 50 G = 50 B = 50, platzieren Sie sie wie im ersten Bild gezeigt, und verwandeln Sie sie in einen zusammengesetzten Pfad (Object> Compound Path> Make). Wählen Sie diesen neuen zusammengesetzten Pfad aus und gehen Sie zu Effekt> Stilisieren> Abgerundete Ecken. Geben Sie einen Radius von 0,5 Pixel ein, klicken Sie auf OK und gehen Sie zu Effekt> Verzerrung und Transformation> Transformation. Geben Sie die im dritten Bild angezeigten Daten ein und klicken Sie auf OK.
Erstellen Sie mit dem Rechteckwerkzeug (M) eine Form von 359 x 96 Pixel, füllen Sie sie mit dem unten gezeigten linearen Farbverlauf, senden Sie sie nach hinten (Umschalt + Strg + [) und platzieren Sie sie wie in der folgenden Abbildung gezeigt.
Wählen Sie das im vorherigen Schritt erstellte Rechteck erneut aus, konzentrieren Sie sich auf das Erscheinungsbildbedienfeld, fügen Sie eine zweite Füllung hinzu, setzen Sie die Farbe auf R = 210 G = 210 B = 210 und ziehen Sie es in den unteren Bereich des Bedienfelds. Kehren Sie zur ersten Füllung zurück, wählen Sie sie aus und gehen Sie zu Effekt> Verzerrung und Transformation> Transformation. Geben Sie die Daten in der folgenden Abbildung ein und klicken Sie auf OK.
Wählen Sie das im fünften Schritt erstellte Rechteck erneut aus, konzentrieren Sie sich auf das Bedienfeld „Erscheinungsbild“, fügen Sie eine dritte Füllung hinzu und ziehen Sie es unter das Bedienfeld. Wählen Sie diese neue Füllung aus, fügen Sie den im folgenden Bild gezeigten linearen Farbverlauf hinzu und gehen Sie zu Effekt> Pfad> Versatzpfad. Geben Sie einen 1px-Offset ein und klicken Sie auf OK.
Wählen Sie das im fünften Schritt erstellte Rechteck erneut aus, konzentrieren Sie sich auf das Erscheinungsbildbedienfeld, stellen Sie sicher, dass keine Füllung oder Kontur ausgewählt ist, und wechseln Sie zu Effekt> Stilisieren> Abgerundete Ecken. Geben Sie einen Radius von 3 Pixeln ein, klicken Sie auf OK und gehen Sie zu Effekt> Stilisieren> Schlagschatten. Geben Sie die im oberen Fenster angezeigten Daten ein, klicken Sie auf OK und gehen Sie erneut zu Effekt> Stilisieren> Schlagschatten. Geben Sie die im mittleren Fenster angezeigten Daten ein, klicken Sie auf OK und gehen Sie noch einmal zu Effekt> Stilisieren> Schlagschatten. Geben Sie die angezeigten Daten im unteren Fenster ein und klicken Sie auf OK. Am Ende sollte Ihre Form wie im folgenden Bild aussehen.
Erstellen Sie mit dem Ellipse-Werkzeug (L) einen 9px-Kreis, füllen Sie ihn mit R = 88 G = 88 B = 88 und platzieren Sie ihn wie in der folgenden Abbildung dargestellt.
Wählen Sie die im vorherigen Schritt erstellte Form erneut aus, konzentrieren Sie sich auf das Erscheinungsbildfenster und fügen Sie eine zweite Füllung hinzu. Wählen Sie es aus, stellen Sie die Farbe auf R = 190 G = 190 B = 190 und gehen Sie zu Effekt> Path> Offset Path. Geben Sie einen -1px-Offset ein und klicken Sie auf OK.
Wählen Sie den im neunten Schritt erstellten Kreis erneut aus, konzentrieren Sie sich auf das Erscheinungsbildfenster und fügen Sie eine dritte Füllung hinzu. Wählen Sie es aus, fügen Sie den im folgenden Bild gezeigten linearen Farbverlauf hinzu und gehen Sie zu Effekt> Pfad> Versatzpfad. Geben Sie einen -1px-Offset ein, klicken Sie auf OK und gehen Sie zu Effekt> Verzerrung und Transformation> Transformation. Geben Sie die Daten in der folgenden Abbildung ein und klicken Sie auf OK.
Wählen Sie den im neunten Schritt erstellten Kreis erneut aus, konzentrieren Sie sich auf das Erscheinungsbildbedienfeld und fügen Sie einen Strich hinzu. Wählen Sie es aus, setzen Sie die Farbe auf Schwarz, richten Sie sie nach außen aus und verringern Sie die Deckkraft auf 20%. Konzentrieren Sie sich weiterhin auf das Erscheinungsbildfenster und fügen Sie einen zweiten Strich für diese Form hinzu, indem Sie die Schaltfläche „Neuen Strich hinzufügen“ (durch den Pfeil in der folgenden Abbildung gezeigt) verwenden. Wählen Sie diesen neuen Strich aus, machen Sie ihn um 1pt breit, setzen Sie die Farbe auf R = 50 G = 50 B = 50 und richten Sie ihn nach innen aus.
Wählen Sie diesen 9px-Kreis erneut aus und erstellen Sie eine Kopie vor (Control + C> Control + F). Wählen Sie es aus und verschieben Sie es um 84 Pixel nach rechts, wie in der folgenden Abbildung dargestellt.
Wählen Sie das dünne, abgerundete Rechteck aus, das im zweiten Schritt erstellt wurde, und erstellen Sie eine Kopie vor (Control + C> Control + F). Wählen Sie diese Kopie aus und ändern Sie die Größe wie in der folgenden Abbildung dargestellt. Behalten Sie die Höhe bei 2px, aber verringern Sie die Breite auf 85px. Wechseln Sie in das Erscheinungsbildfenster und ändern Sie die Farbeigenschaften für diese neue Form. Wählen Sie zuerst die Füllung aus und setzen Sie die Farbe auf R = 0 G = 69 B = 33, wählen Sie dann den Strich und die Farbe auf R = 57 G = 181 B = 74. Am Ende sollte es so aussehen wie im dritten Bild.
Wählen Sie die zusammengesetzten Pfade in den Schritten 3 und 4 erneut aus und gehen Sie zu Effekt> Stilisieren> Schlagschatten. Geben Sie die Daten in der folgenden Abbildung ein und klicken Sie auf OK.
Fügen Sie mit dem Textwerkzeug (T) wie unten gezeigt einfachen Text hinzu. Verwenden Sie die Texteigenschaften und die Farbcodes, die in der folgenden Abbildung dargestellt sind.
Wählen Sie die im vorherigen Schritt hinzugefügten Textteile erneut aus und fügen Sie die im folgenden Bild gezeigten Schatteneffekte hinzu.
Schließlich können Sie die Gesamtfarbe Ihrer Hauptform leicht ändern. Wählen Sie das im fünften Schritt erstellte graue Rechteck erneut aus, konzentrieren Sie sich auf das Erscheinungsbildbedienfeld, fügen Sie eine neue Füllung hinzu und vergewissern Sie sich, dass sie oben im Bedienfeld angezeigt wird. Wählen Sie es aus, stellen Sie die Farbe auf R = 196 G = 154 B = 108, verringern Sie die Deckkraft auf 70%, ändern Sie den Mischmodus in Farbe und wählen Sie Effekt> Pfad> Versatzpfad. Geben Sie einen 1px-Offset ein und klicken Sie auf OK. Natürlich können Sie für diese neue Füllung eine andere Farbe auswählen, andere Mischmodi ausprobieren oder den Deckkraftanteil erhöhen oder verringern. Es gibt unzählige Möglichkeiten.
Jetzt ist deine Arbeit erledigt. So sollte es aussehen.
Accentsconagua