So erstellst du pixelperfekte Symbole | Margarita Ivanchikova | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

So erstellst du pixelperfekte Symbole

teacher avatar Margarita Ivanchikova, Icon and Motion Designer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

9 Einheiten (11 Min.)
    • 1. Einführung

      1:21
    • 2. Wo du anfangen solltest.

      2:42
    • 3. Strichbreite

      1:15
    • 4. Inner

      1:57
    • 5. Bezier-Kurven

      0:50
    • 6. Anzahl der Details

      1:19
    • 7. Perspektive

      0:30
    • 8. Skalierung

      0:54
    • 9. Final

      0:32
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

904

Teilnehmer:innen

7

Projekte

Über diesen Kurs

b604e43b

Das Zeichnen eines gut aussehenden Symbols reicht nicht aus. Das Symbol skalierbar, ansprechende und für viele Geräte geeignet, ist wichtig, wenn du deine Symbole kaufen und verwenden möchtest. Das geht sehr viel Gedanken und Erfahrung erfordert, und ich werde dir mit der Hilfe helfen.

Mein Name ist Margarita und in den letzten 2 Jahren habe ich Symbole für Icons8.com - den größten and die du auf konsistente Weise von einem einzigen Designteam erstellt hat. Und alle 40.000 Symbole davon sind Pixel, die sich perfekt machen.

So kannst du sehen, wie du deine schönen Symbole perfekt make

Triff deine:n Kursleiter:in

Teacher Profile Image

Margarita Ivanchikova

Icon and Motion Designer

Kursleiter:in

I love creating animations, vector graphics, clean geometric shapes, and cute characters.

View my profile on Dribbble

Get printed artwork at Society6

 

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Hi, ich bin Margarita. Ich bin ein Designer, den ich sagen kann dot com Es gibt viele Designer, die schöne Victor Schriften machen und sie wissen nicht, warum sie groß sein müssen, so perfekt zur gleichen Zeit. Natürlich sind Vektoren skalierbar. Sie werden großartig und glatt aussehen, wenn sie eine große. Aber was ist, wenn Sie ein Symbol verwenden, nicht als Administration? Wenn es ein Element der Benutzeroberfläche in einem kleinen 16 bis 50 großen Verkaufsbild ist, kann nur ein Florist werden . Warum kümmern wir uns um den Rest von Ihnen? Denn so wird es tatsächlich auf dem Bildschirm des Geräts gerendert. Alle Aikens hergestellt in Victor ehemaligen wird Ruhe entstehen, wenn auf einem Laptop oder mobilen Gerät Bildschirm angezeigt . Wenn Sie Aikens in der Hoffnung machen, dass andere Leute es benutzen, dann müssen sie nicht nur schön in stilvoll sein, sie müssen nützlich sein und Sie können sie perfekt machen. Bigs helfen in dieser Lektion, in der Lage, täglich etwa sechs Verdächtige im Auge zu behalten, während der Gestaltung. Und Aiken, ich werde Adobe Illustrator verwenden. Aber es hängt nicht wirklich von der Software ab. Sie können Pixel perfekt Aikens in Skizze für eine andere Grafik Reduktiv machen. Du wählst 2. Wo du anfangen solltest.: wir werden von der Einrichtung und Adobe Illustrator Dokument für die Erstellung eines großen Verkaufs perfekte Aiken für diese Klick von neuen beginnen und sagte große Selbst als Gewerkschaften und dann eine ganze Reihe großen Zellen sowie verstecken. Dann würden wir zu den Präferenzen gehen. Dafür. Sie könnten einfach die Taste K auf Ihrer Tastatur drücken und dann zu Guides und Gier gehen. Ich werde ein Pixel für die Gierlinie und eins für Unterteilungen festlegen. Klicken Sie auf OK. Dann können Sie entweder gehen, um die neue Ansicht zeigen große, oder Sie können eine Verknüpfung verwenden und es aktiviert ein Schwein vereinbart, und jede Führung zeigt die Kanten von einem Pixel. Dann kannst du wieder zu vielen von euch gehen. Und es gibt einige Optionen. Blag ist geschnappt. Eine Bildzelle ist geschnappt. Boyne hat sich geschnappt. Einverstanden. Ich werde nur eine gute Option geschnappt. Jetzt ist das Setup vorbei, und alle Formulare, die ich erstelle, werden es an Spitzenzellen gefangen. Ihre Punkte werden direkt an den Schnittpunkten von den Rasterlinien platziert werden, um zu überprüfen, dass Ihr Ich kann nicht so perfekt sprechen und es wird Ruhe entstehen in der bestmöglichen Weise können Sie bekannte Pixel prevue für solche Dinge drehen. Normalerweise verwende ich Verknüpfungen, und es macht meine Arbeit viel schneller. Jetzt werde ich ausschalten, schnappte die Schweine und laden und zeigen, wie Formen ohne sie aussehen würden. Sie können sehen, wie Bilder verschwommen sind. Wenn Sie mehr Optionen zum Auswählen von Zellen sehen möchten, können Sie in die obere rechte Ecke des Fensters gehen, und Sie können mit allen Kontrollkästchen spielen, um die besten Einstellungen für Ihre Arbeit zu finden . Also, wie kann man tatsächlich die Victor Aiken reparieren, die nicht Pixel perfekt in erster Linie ist? Es gibt im Grunde zwei Möglichkeiten, die Eiken schärfer zu machen. Zuallererst werde ich einschalten geschnappt, zustimmen Adoption Tasche auf. Dann gehe ich zur Wahrheit direkte Auswahl Zehe, und für die Reparatur kann ich. Sie können entweder die Punkte auswählen und sie einfach an den großen Schnittpunkt ziehen. Oder Sie können den Punkt auswählen und seine Position am oberen Rand des Fensters fixieren. Normalerweise ist es am besten, ihre ganze Zahlen zu behalten, so dass die Grundlagen so einfach sind. Du willst nur die Punkte auf dem großen silbrigen halten, und dann bist du ich kann knackig und scharf in den Restaurants für dich 3. Strichbreite: Das nächste, worüber wir reden werden, ist der Schlaganfall. Mit hier können Sie Strichbeispiele von 24 und sechs Pixeln sehen, und auf der anderen Seite, bei 13 und fünf Pixeln, können Sie sehen, dass alle Linien auf dem großen so großen sitzen. Aber was passiert, wenn wir ruhen sie entstehen? Sie können sehen, dass die Linien mit dem Strich mit geraden Zahlen ruhen perfekt entstehen. Aber die ungeraden Zahlen würden wir sie verschwommen, also machen wir einen Offset von der Linie selbst. Pfade einfach ein Pixel zur Seite, so dass diese Linie direkt in der Mitte des großen Verkaufs steht. Und wie Sie sehen können, fühlt sich der Schlaganfall ganz groß an. Also und das passiert mit den anderen Zeilen, wenn sie mit sind, ist eine ungerade Zahl. Das Schlimmste, was Sie mit dem Schlaganfall tun können, ist, nicht die ganze Zahl zu sagen. Dann spielt es keine Rolle, ob es auf dem großen, so großartig oder leicht angeboten ist. Es wird sowieso verschwommen, also ist es besser, wenn Ihr Strich mit eine gerade Zahl ist, um die Linie im Pixelraster zu geben, und wenn sie mit streicheln ist eine ungerade Zahl, um es in der Mitte des großen zu halten, so 4. Inner: Eine andere Sache, die Sie vielleicht überlegen möchten, ist, wie sich die inneren Elemente einer Nikon auf ihre Größe auswirken können . zum Beispiel Lassen Sie unszum Beispieleinen Kreis und ein Ausrufezeichen darin sehen. Die richtigen Versionen davon sind Schulter auf der Oberseite, und die falschen sind unten. Wenn die ICANN Pixelstrich muss und ein Ausrufezeichen mit auch zur Auswahl von Zellen ist, muss die Größe des Kreises eine gerade Zahl sein. So kann das Ausrufezeichen im Kreis zentriert werden und gleichzeitig scharf sein. Mal sehen, was passiert, wenn derselbe Kreis um ein Pixel größer wird und das Ausrufezeichen in Not zentriert ist. Dann ist es Ruhe. ist ein schreckliches Blau, das sich verlassen muss, also wollten wir nicht, dass das mit deinem Aiken passiert. Nun sehen wir den Kreis mit einem Pixelstrich und einem Ausrufezeichen in auch mit einem Pixel. Seine Größe und seine Position muss es ermöglichen, dass alle Details in der Mitte platziert werden und schön ruhen gleichzeitig entstehen, so dass wir das Element, den Hub sehen können . Alles davon hängt mit der Größe des Eiken selbst zusammen. gibt es etwas anderes, das Sie beachten müssen, wenn Sie Pfeile oder andere scharfe Objekte entwerfen . Zum Beispiel machen Sie einen Pfeil, wenn sie sich hassen. Seine Pfeilspitze ist nicht gerade Zahl, und es ist Punkt ist direkt auf der Gier auf jeder Seite aus platziert. Genau dieser Punkt ist die Hälfte eines Pixels transparent, so dass der Araber etwas abgerundet aussieht. Sie können es vorziehen, einen Pfeil zu erstellen , der in der Höhe und an der Zahl ist. Dann wird der Punkt von der Pfeilspitze in der Mitte des großen Verkaufs sein, so dass die Pfeilspitze scharfer sein wird. Jeder Pfeil ist besser für seinen eigenen Kontext, also liegt es definitiv an Ihnen, welche Option Sie wählen möchten. 5. Bezier-Kurven: Jetzt sehen wir, wie Sie Pixel perfekt machen. Ich kann zum Beispiel Englisch , belebtere Kurenarbeiten , belebtere Kuren . Nehmen wir das dunkle Symbol. Ich werde das Griechische einschalten, die große Soap-Bewertung, und dann in seine große zoomen. Ich wähle das Formular aus, also sehen wir jetzt die Änderungen, die ganze Form selbst. Es geht ein bisschen aus den Pixeln, so dass sie ein bisschen transparent sind. Wir wollen so ein Chaos nicht. Also im Grunde Drogen wir den Punkt auf die Griechen. Und dann haben wir so angepasst, dass der Griff des Punktes nicht aus der Rasterlinie herausgeht , die die Kante des Formulars selbst anzeigt. Manchmal kann man ein wenig mehr hinzufügen. Alles, was du tun willst, ist, die Gier zu respektieren. Mal sehen, wie dunkel in Victor aussieht. In den meisten Fällen sieht es eher so aus wie ein Sieger. Ich kann, aber es sieht viel besser aus als eine große Seifenbewertung 6. Anzahl der Details: wenn du entwerfst und ich kann. Alles hängt von seiner Größe ab, sogar von der Menge an Details, die Sie darin aufnehmen können. Ich fand dieses Beispiel von schönen Illustrationen im Web. Es wurde als Symbolsatz verteilt und lassen Sie uns eine ICA wählen und sehen, wie es aussieht, wenn Rest entstand und nach unten skaliert. Nehmen wir an, wir machen es 30 große Zellen auf der größten Seite. Jetzt schauen wir mal, wie es sein wird. Rendern Sie es, auch wenn je größer ich kann, nicht pixelgenau ist? Sie können noch viele Details sehen, die in der kleineren Version des Wagens nicht sichtbar sind . Also, wenn Sie etwas Detailliertes und Schönes machen, müssen Sie die Größe des Eiken vorhersagen, die ein platziert in der Schnittstelle oder auf der Website sein wird . Was wir für eines unserer Sets gemacht haben, ist, dass wir für verschiedene Größen einer Nikon vorhergesagt haben, und wir haben verschiedene Details für jede. Wir haben jede Aiken Größe ING 80 Pixel, 40 große Sells, 30 Pixel und 16 Schweinezellen. Die Anzahl der Pixel, die Sie sich in jedem von ihnen leisten können, ist sehr unterschiedlich, so dass wir unterschiedliche Menge an Details in jeder Größe 7. Perspektive: nächste Sache, die von der Größe der ich kann Sie machen abhängt, ist die Verwendung von Perspektive. Zum Beispiel, Sie machen eine große isometrische Aiken, als es sieht gut aus. Rendern Sie es auf einem Bildschirm. Es hat einige kleine Details, einige diagonale Linien. Aber wenn es ein winziges ist, kann ich Sie für einen ganz bestimmten Ort die gesamte Schnittstelle machen, dann wird es in allen Details verschwommen werden nur verloren gehen. Für kleine Größen von Aiken ist es besser, sich an den flachen Ikonenstil zu halten. 8. Skalierung: wenn er riken bereit ist und Sie wissen, dass es grundlegende Größe ist, werden Sie Skalierbarkeit oder das Symbol Gesicht. Zum Beispiel haben Sie eine Nikon erstellt, die 32 Pixel groß ist Wenn Sie sie vergrößern möchten, ist es am besten, sie zweimal oder dreimal groß zu machen. Wichtig ist hier, eine ganze Zahl zu verwenden, um die Größe darauf zu multiplizieren. Dieser Fall, wenn die Skala, die ich kann ruhen entstehen. Es wird so scharf sein wie die, die Sie erstellt haben, und es wird auch groß sein, so perfekt. Lassen Sie uns ein Beispiel für die Skalierung sehen, die auf die falsche Weise durchgeführt wird. Lassen Sie uns die Größe von einer Zufallszahl hier machen und Sie können sehen, dass der Eiken verschwommen wird , weil die Punkte davon Hall sind. Es verlagerte sich, weil die Größe nicht die Grundgröße des Eiken betrifft. Doch als Sieger kann ich schlafen alle gleich aussehen 9. Final: Jetzt haben Sie alle Informationen für die Erstellung von Big Selbst perfekte Aikens. Es ist ein guter Zeitpunkt, alles anzuwenden, was noch christlicher Verstand ist, so schnell wie möglich. Alles, was Sie tun müssen, ist, einen Screenshot Ihres Symbols in der Bigs-Up-Review-Form im Projektabschnitt unten zu veröffentlichen . Wenn Sie Fragen haben, können Sie diese bei der Community-Diskussion stellen. Ich antworte ihnen, sobald ich kann. Ich möchte Ihnen danken, dass Sie diese Klasse genommen haben, und wenn Sie die Klasse mögen, würde ich Ihre positiven Bewertungen schätzen und viel Glück mit Ihnen, das ich entwerfen kann.