Wie kann ich die Größe von Symbolsätzen in Photoshop ändern?

Die Antwort gilt sowohl für Vektor- als auch für gerasterte Symbole.

Wenn es auf Qualität ankommt, geht das nicht.

• Große Symbole enthalten mehr Details. Diese Details, die auf einem 128×128-Icon schön sind, würden auf einem 32×32-Icon verstörend wirken; Anstatt das Symbol visuell zu identifizieren, tun sie das Gegenteil. Beispielsweise kann ein großes Symbol einer Tastatur jede Taste der Tastatur enthalten. Für ein 16×16-Symbol reichen vier Tasten: Entweder Sie zeichnen vier und die Benutzer verstehen, dass dies Tasten sind, oder Sie zeichnen mehr und alles wird flach.

  Versuchen wir mal zu sehen, was passiert. Ich nehme das grafisch hervorragende Tastatursymbol, das in Windows 7 verwendet wird:

  

  Vergleichen Sie nun nebeneinander das verkleinerte Symbol auf der linken Seite und das Symbol, dessen Größe ich in Photoshop vom größeren geändert habe:

  

  Der Linke ist ziemlich klar. Auf der rechten Seite, glaube ich, ist es ein seltsam geformter PDA mit einem großen Bildschirm, zwei Knöpfen am unteren Rand des Bildschirms und einem großen Knopf ganz unten. Mal sehen, was passiert, wenn wir zu einem noch kleineren Maßstab gehen:

  

  Das Symbol auf der linken Seite, das von Windows 7 verwendet wird, ist trotz der niedrigen Auflösung ziemlich klar. Das Symbol auf der rechten Seite, die verkleinerte Version des großen, ist völlig bedeutungslos: Es könnte ein PDA oder eine silberne Schachtel oder irgendetwas anderes sein. Sieht für mich eigentlich wie der Rechner PF-19686592 aus .

Andere Faktoren als der Objektdetaillierungsgrad müssen berücksichtigt werden:

• Ein Schatten zum Beispiel ist schön auf einem 64×64-Icon zu haben, aber derselbe Schatten sieht auf einem 16×16-Favicon dumm aus.

• das Objekt kann gedreht werden, um perspektivisch zu sein, wenn das Symbol groß ist. Wenn es klein ist, zeichne es flach.

• die Anzahl der Objekte muss abnehmen, wenn die Größe abnimmt. Zum Beispiel kann ein großes Symbol eines Notizblocks einen Notizblock mit einem Bleistift aufweisen. Auf einem kleineren Symbol ist nicht genug Platz, um einen Bleistift so zu zeichnen, dass er den Notizblock nicht bedeckt und gleichzeitig als Bleistift erkannt wird.

Diese Regeln werden tatsächlich in Windows XP-Symbolen befolgt .

Das bedeutet, wenn UX und Designqualität wichtig sind, können Sie ein Symbol nicht einfach verkleinern und erwarten, dass es so klar ist wie das Original. In Anbetracht des Symbolsatzes, auf den Sie in Ihrer Frage verlinken, möchten Sie offensichtlich keinen Kreis um das Symbol für 24 × 24-Symbole beibehalten: Entfernen Sie den Kreis und behalten Sie nur den Inhalt bei.

Mal sehen was passiert. Dieses Bild:

wird:

Links habe ich den Kreis entfernt. Rechts habe ich das Originalbild einfach verkleinert. Können Sie mir sagen, was Sie auf der rechten Seite sehen?

Wenn die Qualität keine Rolle spielt, ändern Sie einfach die Größe des Bildes.

Um eine bessere Qualität zu erzielen, können Sie dennoch Folgendes tun:

• Behalten Sie das gleiche Verhältnis bei (offensichtlich),

• Ändern Sie die Größe, indem Sie durch ein Vielfaches von zwei teilen: Aus 128 × 128 können Sie 32 × 32 erhalten, aber das Erstellen eines 41 × 41-Symbols kann zu seltsamen Ergebnissen führen.

• Versuchen Sie es mit verschiedenen Größenänderungsalgorithmen. Ich gehe davon aus, dass Lanczos besser funktionieren, aber vielleicht nicht für jede Ikone. Das Schärfen kann auch die Qualität erhöhen oder verringern.

Dieser spezielle Satz besteht aus Formen und Text, sodass die Größenänderung die Qualität nicht beeinträchtigt, aber Sie können diese Symbole nicht einfach verkleinern. Ein Icon ist eine besondere Art von Infografik. Sein Zweck besteht darin, leicht erkennbare Informationen in jeder beliebigen Größe zu kommunizieren. Bevor Sie also mit dem Skalieren beginnen, müssen Sie zunächst feststellen, welche Teile des Symbols die Informationen enthalten. Diese müssen lesbar bleiben, der Rest ist Wegwerfartikel.

In diesem Fall tragen die Kreisformen keine Informationen, aber in einigen Fällen ihre Farben , sodass Sie sie nicht entfernen können. Sie können sie jedoch frei skalieren. Die grafischen Elemente in den Kreisen tragen die lebenswichtigen Informationen, daher müssen Sie sie sorgfältiger behandeln.

So skalieren Sie dieses Set von 48 px auf 24 px, ausgehend von der PSD:

• Öffnen Sie den Ebenensatz für eines der Symbole. Lassen Sie uns das Google+-Symbol auswählen.

• Markieren Sie den Kreis und wählen Sie Edit > Transform > Scale. Stellen Sie sicher, dass der Mittelpunkt im Transform-Steuerelement-Proxy ausgewählt ist, und schalten Sie die Verknüpfung zwischen den Feldern „W“ und „H“ um, sodass Ihre Skalierung proportional ist.

• Geben Sie 50 in das Feld W oder H ein und drücken Sie die Eingabetaste.

An diesem Punkt hat Ihr Kreis einen Durchmesser von 24 px, aber das "g" und das "+" sind zu groß.

• Wählen Sie sowohl die „g“-Formebene als auch die „+“-Textebene aus und wählen Sie Edit > Transform > Scalewie zuvor, aber geben Sie diesmal 80 in das W- oder H-Feld ein und drücken Sie die Eingabetaste.

• Bewegen Sie die „g+“-Ebenen, um sie im Kreis zu zentrieren.

Dieses reduzierte Symbol vermittelt immer noch deutlich die gleichen Informationen, hat aber die Größe, die Sie benötigen, und stimmt mit dem Rest des Satzes überein, wenn Sie sie skaliert haben.

Behandeln Sie die restlichen Symbole ähnlich. Die Kreise definieren die Grenzen, also sind sie alle auf 50 % skaliert. Der Grad, um den Sie jede Grafik skalieren, variiert (das Skype-Symbol funktioniert besser bei 75 % als bei 80 %), daher müssen Sie ein wenig experimentieren. Die Erfahrung wird Sie lehren, während Sie gehen.

Unterschiedliche Größen erfordern unterschiedliche Proportionen und geeignete Skalierungsbeträge. Wichtig ist, zu unterscheiden, was Information und was Dekoration ist. Sie können Dekoration skalieren oder wegwerfen; Sie müssen die Informationen lesbar halten.

Bildliche „Icons“ und sehr detailreiche Icons lassen sich nicht einfach skalieren. Sie müssen beim Verkleinern vereinfacht werden, damit die Informationen klar bleiben, daher müssen Sie für kleinere Größen ein anderes Symbol erstellen. Dasselbe Prinzip wird beim Entwerfen von Logos befolgt – was auf einem Poster gut funktioniert, muss für eine Visitenkarte möglicherweise stark vereinfacht werden – und beim Schriftdesign.

Ich mache meine Icons immer in einem Vektorformat (mit Illustrator) - auf diese Weise kann ich meine Kunst einfach in jeder gewünschten Größe und jedem gewünschten Format exportieren. Nun, nicht ganz richtig, da ich die Symbole für die Pixelausrichtung anpassen muss. CS5 leistet gute Arbeit, überdeckt aber nicht alle Probleme...

Da Sie in Photoshop Pixel verwenden, erhalten Sie das beste Ergebnis, wenn Sie Ihre Symbole im größten Format entwickeln, das Sie benötigen, und es dann verkleinern. Sie sollten auch "unscharf maskieren", um die verkleinerten Bilder schärfer zu machen, da sie im Verkleinerungsalgorithmus an Schärfe verlieren.