Tipp Erstellen Sie in Photoshop scharfe, pixelgenaue Kreise

Die Pixel-Perfektion beim Entwerfen von Benutzeroberflächenelementen kann dank der Funktion "An Pixel ausrichten" von Photoshop ganz einfach sein. Leider ist diese Funktion für das Ellipsenwerkzeug nicht verfügbar. Das Erstellen von scharfen, pixelgenauen Kreisen kann daher zusätzliche Aufmerksamkeit für Details erfordern. Ich werde Ihnen ein kleines Geheimnis verraten, das beim Erstellen von Kreisen "Einrasten an Pixeln" verfügbar macht.


Formebenen und "An Pixel ausrichten"

Mit dem steigenden Bedarf an maßstäblichen Designs wird das Design mit Formebenen in Photoshop immer wichtiger. Formebenen basieren auf Vektorpfaden, wodurch das Ändern von Größe, Farbe und Form sehr einfach ist. Wenn Sie jedoch nicht aufpassen, können Sie beim Erstellen von Formebenen leicht vom Pixelraster herunterfallen, was zu unscharfem, unprofessionellem Design führt.

Dank der Funktion "In Pixel ausrichten" von Photoshop für Form-Layer lässt sich Pixel-Perfektion mit Form-Layern ganz einfach erreichen.

Wie Sie vielleicht bereits wissen, ist die Funktion "An Pixeln ausrichten" für das Ellipsenwerkzeug leider nicht verfügbar.

Wenn Sie vorhaben, eine Formebene für diese schönen Kreisavatare in Ihrer Benutzeroberfläche zu erstellen, müssen Sie die Genauigkeit Ihres Kreises prüfen und prüfen, ob er korrekt in das Pixelraster fällt ).

Wenn es nur Kreise für Pixel geben würde, richtig? Nun, es gibt eine nette kleine Problemumgehung! Sie können mit dem Werkzeug "abgerundetes Rechteck" Kreise zeichnen, indem Sie einfach einen Radius angeben, der mindestens halb so groß ist wie der Kreis, den Sie erstellen.


Schritt 1: Schnappen Sie sich das abgerundete Rechteckwerkzeug

Ich weiß, was Sie vielleicht denken: "Ein Rechteckwerkzeug zum Erstellen eines Kreises?" Ich weiß, es hört sich vielleicht komisch an, aber vertrau mir hier.


Schritt 2: Aktivieren Sie "An Pixel ausrichten".

Stellen Sie jetzt sicher, dass das Kontrollkästchen "An Pixeln ausrichten" markiert ist (in CS6 ist dies das Kontrollkästchen "Kanten ausrichten" oder "Vektorwerkzeuge und Transformationen an Pixelgitter ausrichten" über die Voreinstellungen). Dadurch wird sichergestellt, dass unser abgerundetes Rechteck am Pixelraster haftet.


Schritt 3: Geben Sie einen (großen) Grenzradius an

Geben Sie nun einen Wert für den Randradius ein, der mindestens die Hälfte der Abmessungen des Kreises beträgt, den Sie zeichnen möchten. Oder geben Sie statt "Mathematik" einfach "1000px" ein, da dies der größte Wert ist, den Photoshop akzeptiert (dies bedeutet, dass Sie dies nicht tun können) anfänglich Zeichnen Sie einen Kreis, der größer als 2000 Pixel ist. Sie können das Ergebnis jedoch jederzeit vergrößern..


Schritt 4: Zeichnen Sie Ihren scharfen, pixelgenauen Kreis

Halten Sie SHIFT gedrückt und zeichnen Sie Ihren Kreis! (Wenn Sie die Umschalttaste gedrückt halten, werden die Proportionen des abgerundeten Rechtecks ​​beibehalten.).

Wenn Sie einen zu kleinen Randradius erstellen, wird der Randradius des abgerundeten Rechtecks ​​umgangen, wenn das abgerundete Rechteck größer wird. An diesem Punkt haben Sie ein Rechteck mit abgerundeten Kanten.


Das ist es!

Sehen Sie, wie einfach das war? Wie bereits erwähnt, besteht der einfache Trick darin, dem abgerundeten Rechteck einen Randradius zu geben, der mindestens halb so groß ist wie seine Abmessungen. Jetzt können Sie in Photoshop ganz einfach pixelgenaue, gestochen scharfe und skalierbare Kreise erstellen!


Lesen Sie weiter

  • Schneller Tipp: Abgerundete Ecken richtig gemacht
  • Entwerfen Sie einen schön detaillierten Web-Button