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

Wenn ich online nach Symbolen suche, die auf meinen Websites verwendet werden können, finde ich oft sehr gut gestaltete kostenlose Symbolsätze.

Oft sind diese Icon-Sets jedoch nur in einer einzigen Größe verfügbar - zum Beispiel ist das Icon-Set http://designdeck.co.uk/a/1245 ) nur in einer Größe von 48 x 48 Pixel erhältlich.

Was wäre der beste Ansatz, um die Größe dieses Symbols in Photoshop auf 24 x 24 Pixel oder 32 x 32 Pixel zu ändern?

Ich konnte online kein gutes Tutorial für Neulinge finden. Vielen Dank

Dieses spezielle Set besteht aus Formen und Text, sodass die Größenänderung die Qualität nicht beeinträchtigt. Sie können diese Symbole jedoch nicht einfach verkleinern. Ein Symbol ist eine besondere Art von Infografik. Der Zweck besteht darin, leicht erkennbare Informationen in einer bestimmten Größe zu übermitteln. Bevor Sie mit der Skalierung beginnen, müssen Sie zunächst ermitteln, welche Teile des Symbols die Informationen enthalten. Diese müssen lesbar bleiben, der Rest ist wegwerfbar.

In diesem Fall werden die Kreisformen tragen keine Informationen, sondern in mehreren Fällen ihre Farben haben, so können Sie sie nicht beseitigen. Sie können sie jedoch frei skalieren. Die grafischen Elemente in den Kreisen enthalten die wichtigen Informationen, daher müssen Sie sie sorgfältiger behandeln.

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

• Öffnen Sie den Ebenensatz für eines der Symbole. Wählen wir das Google+ Symbol.

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

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

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

• Wählen Sie sowohl die Formebene "g" als auch die Textebene "+" aus und wählen Sie Edit > Transform > Scalewie zuvor. Geben Sie diesmal jedoch 80 in das Feld W oder H ein und drücken Sie die Eingabetaste.

• Schieben Sie die "g +" - Ebenen, um sie im Kreis zu zentrieren.

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

Behandeln Sie den Rest der Symbole ähnlich. Die Kreise definieren die Grenzen, sodass sie alle zu 50% skaliert sind. Der Betrag, um den Sie jede Grafik skalieren, variiert (das Skype-Symbol funktioniert mit 75% besser als mit 80%), sodass Sie ein wenig experimentieren müssen. Die Erfahrung wird Sie lehren, wie Sie gehen.

Unterschiedliche Größen erfordern unterschiedliche Proportionen und geeignete Skalierungsmengen. 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 "Symbole" und Symbole mit vielen Details können nicht einfach skaliert werden. Sie müssen vereinfacht werden, wenn sie verkleinert werden, damit die Informationen klar bleiben. Daher müssen Sie für kleinere Größen ein anderes Symbol erstellen. Das gleiche Prinzip wird beim Entwerfen von Logos angewendet - was auf einem Poster gut funktioniert, muss möglicherweise für eine Visitenkarte stark vereinfacht werden - und beim Schriftdesign.

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

Wenn Qualität wichtig ist, können Sie nicht.

• Große Symbole enthalten weitere Details. Diese Details, die auf einem 128 × 128-Symbol gut sind, würden auf einem 32 × 32-Symbol stören. 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 aus: Entweder Sie zeichnen vier und Benutzer verstehen, dass dies Schlüssel sind, oder Sie zeichnen mehr und alles wird flach.

  Lassen Sie uns versuchen zu sehen, was passiert. Ich nehme das grafisch hervorragende Tastatursymbol, das in Windows 7 verwendet wird:

  

  Vergleichen Sie nun nebeneinander das verkleinerte Symbol links und das Symbol, dessen Größe ich in Photoshop von dem größeren geändert habe:

  

  Der links ist ziemlich klar. Rechts glaube ich, dass es sich um einen seltsam geformten PDA mit einem großen Bildschirm, zwei Tasten am unteren Bildschirmrand und einer großen Taste ganz unten handelt. Mal sehen, was passiert, wenn wir noch kleiner werden:

  

  Das von Windows 7 verwendete Symbol auf der linken Seite ist trotz der geringen Auflösung ziemlich klar. Das Symbol auf der rechten Seite, die verkleinerte Version des großen, ist völlig bedeutungslos: Es kann sich um einen PDA, eine silberne Box oder etwas anderes handeln. Sieht für mich eigentlich aus wie ein Taschenrechner PF-19686592 .

Andere Faktoren als die Objektdetailstufe müssen berücksichtigt werden:

• Ein Schatten zum Beispiel ist schön auf einem 64 × 64-Symbol zu haben, aber der gleiche 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 winzig ist, zeichne es flach.

• Die Anzahl der Objekte muss abnehmen, wenn die Größe abnimmt. Beispielsweise kann ein großes Symbol eines Notizblocks einen Notizblock mit einem Bleistift enthalten. Auf einem kleineren Symbol ist nicht genügend Platz vorhanden, 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 .

Wenn UX und Designqualität wichtig sind, können Sie ein Symbol nicht einfach verkleinern und erwarten, dass es so klar wie das Original ist. In Anbetracht des Symbolsatzes, auf den Sie in Ihrer Frage verweisen, möchten Sie offensichtlich keinen Kreis um das Symbol für 24 × 24-Symbole halten: 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 gerade das Originalbild verkleinert. Kannst du mir sagen, was du auf der rechten Seite siehst?

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

Um eine bessere Qualität zu erzielen, möchten Sie möglicherweise noch:

• Halten Sie das gleiche Verhältnis (offensichtlich),

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

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

Ich mache meine Symbole immer in einem Vektorformat (mit Illustrator) - auf diese Weise kann ich meine Kunst einfach in jede gewünschte Größe und jedes gewünschte Format exportieren. Nun, nicht ganz richtig, da ich die Symbole für die Pixelausrichtung anpassen muss. CS5 macht einen guten Job, aber es deckt nicht alle Probleme ab ...

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