Freigeben über


Symbole (Entwurfsgrundlagen)

Hinweis

Dieses Entwurfshandbuch wurde für Windows 7 erstellt und wurde nicht für neuere Versionen von Windows aktualisiert. Ein Großteil der Anleitungen gilt weiterhin im Prinzip, aber die Präsentation und die Beispiele entsprechen nicht unseren aktuellen Entwurfsleitfäden.

Symbole sind bildliche Darstellungen von Objekten, die nicht nur aus ästhetischen Gründen als Teil der visuellen Identität eines Programms wichtig sind, sondern auch aus utilitaristischen Gründen als Kurzform für die Vermittlung von Bedeutung, die der Nutzer fast sofort wahrnimmt. Windows Vista führt einen neuen Stil der Ikonographie ein, der windows eine höhere Detail- und Raffinesse bietet.

Hinweis: Richtlinien im Zusammenhang mit Standardsymbolen werden in einem separaten Artikel vorgestellt.

Entwurfskonzepte

Aero ist der Name für die Benutzererfahrung von Windows Vista, die sowohl die Werte im Design der Ästhetik als auch die Vision hinter der Benutzeroberfläche (UI) darstellt. Aero steht für: authentisch, energisch, reflektierend und offen. Aero zielt darauf ab, ein Design zu etablieren, das sowohl professionell als auch schön ist. Die Aero-Ästhetik schafft eine hochwertige und elegante Erfahrung, die die Benutzerproduktivität erleichtert und sogar eine emotionale Reaktion antreibt.

Windows Vista-Symbole unterscheiden sich von Symbolen im Windows XP-Stil auf folgende Weise:

  • Der Stil ist realistischer als illustrativ, aber nicht ganz fotorealistisch. Symbole sind symbolische Bilder, die besser aussehen sollten als fotorealistisch!
  • Symbole haben eine maximale Größe von 256 x 256 Pixel, sodass sie sich für Displays mit hoher DPI-Auflösung (Punkte pro Zoll) eignen. Diese Symbole mit hoher Auflösung ermöglichen eine hohe visuelle Qualität in Listenansichten mit großen Symbolen.
  • Wo immer es sinnvoll ist, werden feste Dokumentsymbole durch Miniaturansichten des Inhalts ersetzt, sodass Dokumente leichter zu identifizieren und zu finden sind.
  • Symbolleistensymbole haben weniger Details und keine Perspektive, um für kleinere Größen und visuelle Unterscheidungsmerkmale zu optimieren.

Gut gestaltete Symbole:

  • Verbessern Sie die visuelle Kommunikation Ihres Programms.
  • Dies wirkt sich stark auf den Gesamteindruck der Benutzer auf das visuelle Design Ihres Programms und die Wertschätzung für seine Passform und sein Finish aus.
  • Verbessern Sie die Benutzerfreundlichkeit, indem Sie Programme, Objekte und Aktionen leichter identifizieren, lernen und finden.

Die folgenden Bilder zeigen, was den Aero-Stil der Ikonographie in Windows Vista von dem unterscheidet, der in Windows XP verwendet wird.

Bilder von Schloss- und Schlüsselsymbolen

Die Windows Vista-Symbole (Schloss und Taste auf der linken Seite) sind authentisch, scharf und detailliert. Sie werden eher gerendert als gezeichnet, sind aber nicht vollständig fotorealistisch.

Bilder von Globus- und Spiral-Notizbuchsymbolen

Die Windows Vista-Symbole (die beiden auf der linken Seite) sind professionell und schön, mit Liebe zu Details, die die Produktionsqualität der Symbole verbessern.

Bilder von Notebook, Schloss, Monitor und Papier

Diese Windows Vista-Symbole zeigen optische Balance und wahrgenommene Genauigkeit in Perspektive und Details. Dadurch können sie groß oder klein aussehen, aus nächster Nähe oder aus der Ferne. Darüber hinaus funktioniert dieser Stil der Ikonographie für hochauflösende Bildschirme.

Abbildung eines Funkroutersymbols Bild eines Blatts mit Papiersymbolbild eines großen grünen Pfeils nach rechts

Diese Beispiele zeigen verschiedene Arten von Symbolen, einschließlich eines dreidimensionalen Objekts in der Perspektive, einem frontseitigen (flachen) Symbol und einem Symbolleistensymbol.

Richtlinien

Perspektive

  • Symbole in Windows Vista sind entweder dreidimensional und perspektivisch als vollfarbige Objekte oder zweidimensionale Objekte, die direkt angezeigt werden. Verwenden Sie flache Symbole für Dateien und für Objekte, die tatsächlich flach sind, z. B. Dokumente oder Papierstücke.

    Bilder von 3D-Computer und flachen 2D-Papieren

    Typische 3D- und flache Symbole.

  • Dreidimensionale Objekte werden perspektivisch als feste Objekte dargestellt, die aus einer niedrigen Vogelperspektive mit zwei Verschwindenspunkten gesehen werden.

    Abbildung des Notizbuchs mit Linien mit Perspektive

    Dieses Beispiel zeigt Perspektiven und Fluchtpunkte, die typisch für 3D-Symbole sind.

  • In den kleineren Größen kann sich das gleiche Symbol von der Perspektive zu direkt ändern. Bei der Größe von 16 x 16 Pixeln und kleiner rendern Sie Symbole direkt (frontseitig). Verwenden Sie für größere Symbole die Perspektive.

    • Ausnahme: Symbolleistensymbole sind immer nach vorne gerichtet, auch in größeren Größen.

    Abbildung eines großen 3D-Computers und eines kleinen 2D-Computers

    In diesem Beispiel wird gezeigt, wie dasselbe Symbol je nach Größe unterschiedlich behandelt wird.

Lichtquelle

  • Die Lichtquelle für Objekte innerhalb des Perspektivrasters befindet sich oberhalb, leicht vor und leicht links vom Objekt.
  • Die Lichtquelle wirft Schatten, die leicht nach hinten und rechts von der Basis des Objekts liegen.
  • Alle Lichtstrahlen sind parallel und treffen das Objekt entlang desselben Winkels (wie die Sonne). Ziel ist es, ein einheitliches Lichtbild über alle Symbole und Strahlereffekte hinweg zu erhalten. Parallele Lichtstrahlen erzeugen Schatten, die alle die gleiche Länge und Dichte haben, was eine weitere Einheit über mehrere Symbole hinweg bietet.

Schatten

Allgemein

  • Verwenden Sie Schatten, um Objekte visuell aus dem Hintergrund zu heben und 3D-Objekte geerdet erscheinen zu lassen, anstatt unbeholfen im Raum zu schweben.

  • Verwenden Sie für Schatten einen Deckkraftbereich von 30 bis 50 Prozent. Manchmal sollte je nach Form oder Farbe eines Symbols eine andere Schattenebene verwendet werden.

  • Federn oder kürzen Sie den Schatten bei Bedarf, damit er nicht durch die Größe des Symbolfelds zugeschnitten wird.

  • Verwenden Sie keine Schatten in Symbolen mit einer Größe von 24 x 24 oder kleiner.

    Bilder von 3D-Symbolen mit Schatten

    Typische Symbolschatten.

Flache Symbole

  • Flache Symbole werden in der Regel für Dateisymbole und flache reale Objekte wie ein Dokument oder ein Stück Papier verwendet.
  • Flache Symbolbeleuchtung kommt von oben links bei 130 Grad.
  • Kleinere Symbole (z. B. 16x16 und 32x32) werden zur Lesbarkeit vereinfacht. Wenn sie jedoch eine Reflektion innerhalb des Symbols enthalten (oft vereinfacht), können sie einen engen Schlagschatten aufweisen. Der Schlagschattenbereich liegt in der Deckkraft von 30 bis 50 Prozent.
  • Ebeneneffekte können für flache Symbole verwendet werden, sollten aber mit anderen flachen Symbolen verglichen werden. Die Schatten für Objekte variieren etwas, je nachdem, was am besten aussieht und innerhalb der festgelegten Größe und mit den anderen Symbolen in Windows Vista am konsistentsten ist. Manchmal kann es sogar notwendig sein, die Schatten zu ändern. Dies gilt insbesondere dann, wenn Objekte über andere gelegt werden.
  • Ein subtiler Farbbereich kann verwendet werden, um das gewünschte Ergebnis zu erzielen. Schatten helfen Objekten, im Raum zu sitzen. Farbe wirkt sich auf die wahrgenommene Gewichtung des Schattens aus und kann das Bild verzerren, wenn es zu schwer ist.

Screenshot des Dialogfelds mit aktiviertem Schlagschattenscreenshot des Papiersymbols mit schmalem Schlagschatten

Die Option Schlagschatten im Dialogfeld Ebenenformat und ein typischer Schatten für ein flaches Symbol.

Einfache flache Symbolschattenbereiche

Merkmal Bereich
Color
Schwarz
Mischmodus
Multiplizieren
Opacity
22-50 Prozent, abhängig von der Farbe des Elements
Angle
120-130 (globales Licht verwenden)
Distance
3 für 256 x 256, 1 für 32x32
Spread
0
Size
7 für 256x256, bereichsabsend auf 2 für 32x32

Dreidimensionale Symbole

  • Erstellen Sie Schatten für 3D-Symbole auf Fall-für-Fall-Basis, mit dem Versuch, innerhalb eines Bereichs von Wurfdistanz und Federung vollständig transparent zu passen. Erstellen Sie die Bilder in einer Größe, die etwas kleiner ist als die Gesamtsymbolgröße, um Platz für einen Schlagschatten zuzulassen (für die Größen, die einen erfordern). Stellen Sie sicher, dass der Schatten nicht abrupt am Rand des Symbols endet.

Abbildung des Erstellens von Schatten in Photoshop

Abbildung von vier Objekten mit unterschiedlichen Schatten

In diesen Beispielen werden Variationen veranschaulicht, die basierend auf der Form und Position des Objekts selbst erstellt werden. Der Schatten muss manchmal gefiedert oder gekürzt werden, damit er nicht durch die Größe des Symbolfelds abgeschnitten wird.

Farbe und Sättigung

  • Farben sind im Allgemeinen weniger gesättigt als Windows XP.

  • Verwenden Sie Farbverläufe, um ein realistischer aussehendes Bild zu erstellen.

  • Obwohl es keine bestimmte Farbpalette für Standardsymbole gibt, denken Sie daran, dass sie in vielen Kontexten und Designs gut zusammenarbeiten müssen. Bevorzugen Sie den Standardsatz von Farben; färben Sie Standardsymbole, z. B. Warnsymbole, nicht um, da dies die Fähigkeit der Benutzer, die Bedeutung zu interpretieren, beeinträchtigt. Weitere Richtlinien finden Sie unter Farbe.

  • Symboldateien erfordern auch 8-Bit- und 4-Bit-Palettenversionen, um die Standardeinstellung auf einem Remotedesktop zu unterstützen. Diese Dateien können über einen Batchprozess erstellt werden, sollten aber überprüft werden, da einige für eine bessere Lesbarkeit eine Retuschierung erfordern.

    Screenshot des Dialogfelds

    Es gibt keine strikte Einschränkung der Farbpalette. Nur die volle Sättigung (oben rechts) wird vermieden.

  • Bitebenen: ICO-Design für 32-Bit (Alpha enthalten) + 8-Bit + 4-Bit (automatisch nach unten gestreute Pixel-Poke nur kritisch). Es sollte nur eine 32-Bit-Kopie des Bilds mit 256 x 256 Pixeln enthalten sein, und nur das Bild mit 256 x 256 Pixeln sollte komprimiert werden, um die Dateigröße zu reduzieren. Mehrere Symboltools bieten eine Komprimierung für Windows Vista.

  • Bitebenen: Symbolleisten 24-Bit + Alpha (1-Bit-Maske), 8-Bit und 4-Bit.

  • Symbolleisten oder AVI-Dateien: Verwenden Sie magenta (R255 G0 B255) als Hintergrundtransparenzfarbe.

Größenanforderungen

Allgemein

  • Achten Sie besonders auf Symbole mit hoher Sichtbarkeit, z. B. Standard Anwendungssymbole, Dateisymbole, die in Windows Explorer angezeigt werden können, und Symbolen, die im Startmenü oder auf dem Desktop angezeigt werden.
    • Anwendungssymbole und Systemsteuerung Elemente: Der vollständige Satz umfasst 16x16, 32x32, 48x48 und 256x256 (Codeskalen zwischen 32 und 256). Das ICO-Dateiformat ist erforderlich. Für den klassischen Modus ist der vollständige Satz 16x16, 24x24, 32x32, 48x48 und 64x64.
    • Listenelementsymboloptionen: Verwenden Sie Liveminiaturansichten oder Dateisymbole des Dateityps (z. B. .doc); vollständiger Satz.
    • Symbolleistensymbole: 16x16, 24x24, 32x32. Beachten Sie, dass Symbolleistensymbole auch bei der Größe 32x32 immer flach und nicht 3D sind.
    • Dialog- und Assistentensymbole: 32x32 und 48x48.
    • Overlays: Kernshellcode (z. B. eine Verknüpfung) 10x10 (für 16x16), 16x16 (für 32x32), 24x24 (für 48x48), 128x128 (für 256x256). Beachten Sie, dass einige davon etwas kleiner sind, aber je nach Form und optischem Gleichgewicht nahe an dieser Größe liegen.
    • Schnellstartbereich: Symbole werden in dynamischen Alt+Tab-Überlagerungen von 48 x 48 herunterskaliert, aber für eine gestochen scharfere Version fügen Sie der ICO-Datei eine 40x40-Datei hinzu.
    • Ballonsymbole: 32x32 und 40x40.
    • Zusätzliche Größen: Diese sind nützlich, um als Ressourcen zur Hand zu haben, um andere Dateien zu erstellen (z. B. Anmerkungen, Symbolleistenstreifen, Überlagerungen, hohe dpi-Werte und Sonderfälle): 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10 und 8x8. Je nach Code in diesem Bereich können Sie ICO-, .png-, .bmp- oder andere Dateiformate verwenden.

Für hohe DPI-Werte

  • Windows Vista zielt auf 96 dpi und 120 dpi ab.

Die folgenden Tabellen zeigen Beispiele für Skalierungsverhältnisse, die auf zwei gängige Symbolgrößen angewendet werden. Beachten Sie, dass nicht alle diese Größen in der ICO-Datei enthalten sein müssen. Der Code wird größere herunterskaliert.

dpi Symbolgröße Skalierungsfaktor
96
16 x 16
1.0 (100%)
120
20 x 20
1.25 (125%)
144
24x24
1.5 (150%)
192
32 x 32
2.0 (200%)
dpi Symbolgröße Skalierungsfaktor
96
32 x 32
1.0 (100%)
120
40 x 40
1.25 (125%)
144
48x48
1.5 (150%)
192
64 x 64
2.0 (200%)

.ico-Dateigrößen (Standard)

Diagramm, das verschiedene Routersymbole in Standardgröße zeigt.

.ico-Dateigrößen (Sonderfälle)

Abbildung von Routersymbolen unterschiedlicher Größe

Anmerkungen und Überlagerungen

  • Anmerkungen befinden sich in der unteren rechten Ecke des Symbols und sollten 25 Prozent des Symbolbereichs ausfüllen.
    • Ausnahme: 16x16-Symbole nehmen 10 x 10 Anmerkungen an.
  • Verwenden Sie nicht mehr als eine Anmerkung für ein Symbol.
  • Überlagerungen befinden sich in der linken unteren Ecke des Symbols und sollten 25 Prozent des Symbolbereichs ausfüllen.
    • Ausnahme: 16x16-Symbole nehmen 10x10-Überlagerungen an.

Detailgrad

  • Die Größe 16x16 vieler dieser Symbole ist immer noch weit verbreitet und daher wichtig.

  • Die Details in einem Symbol dieser Größe müssen den Schlüsselpunkt des Symbols deutlich anzeigen.

  • Wenn ein Symbol kleiner wird, sollten Die Transparenz und einige spezielle Details, die in größeren Größen gefunden werden, geopfert werden, um den Punkt zu vereinfachen und zu vermitteln.

  • Attribute und Farben sollten übertrieben und verwendet werden, um die Schlüsselformen hervorzuheben.

    Abbildung eines großen und zwei kleinen Geräts

    Bei 16x16 kann das Symbol für das tragbare Audiogerät leicht mit einem Mobiltelefon verwechselt werden, sodass das Ohrstück ein wichtiges visuelles Detail ist, das angezeigt werden sollte.

  • Das einfache Herunterskalieren von der Größe 256 x 256 funktioniert nicht.

  • Alle Größen benötigen einen relevanten Detailgrad; je kleiner das Symbol, desto mehr müssen Sie die definierenden Details übertreiben.

    Abbildung von Mobiltelefonen mit klaren Details

    Abbildung von Handys mit verschwommenen Details

Symbolentwicklung

Entwerfen und Erstellen von Symbolen

  • Stellen Sie einen erfahrenen Grafikdesigner ein. Für großartige Grafiken, Bilder und Symbole arbeiten Sie mit Experten zusammen. Erfahrungen mit Illustrationen mit Vektorgrafiken oder 3D-Programmen werden empfohlen.
  • Planen Sie eine Reihe von Iterationen, von anfänglichen Konzeptskizzen über kontextbezogene Mockups bis hin zur endgültigen Produktionsüberprüfung und Anpassung der Symbole im Arbeitsprodukt.
  • Denken Sie voraus, dass die Erstellung von Symbolen teuer sein kann. Sammeln Sie alle vorhandenen Details und Anforderungen, z. B. den vollständigen Satz der benötigten Symbole; die Standard Funktion und Bedeutung für jede; Familien oder Cluster in der Gruppe, die Sie offensichtlich sein möchten; Markenanforderungen; die genauen Dateinamen; die im Code verwendeten Bildformate; und Größenanforderungen. Stellen Sie im Voraus sicher, dass Sie Ihre Zeit mit dem Designer optimal nutzen können.
  • Denken Sie daran, dass der Designer möglicherweise nicht mit Ihrem Produkt vertraut ist. Stellen Sie daher funktionsbezogene Informationen, Screenshots und Spezifikationsabschnitte bereit.
  • Planen Sie nach Bedarf geopolitische und rechtliche Überprüfungen.
  • Erstellen Sie einen Zeitrahmen und eine regelmäßige Kommunikation.

Von der Konzeptskizze bis zum Endprodukt

Abbildung der Entwicklung von Skizzen von Mobiltelefonen

  • Erstellen Sie Konzeptskizzen.
  • Probieren Sie das Konzept in verschiedenen Größen aus.
  • Rendern Sie bei Bedarf in 3D.
  • Testgrößen für verschiedene Hintergrundfarben.
  • Werten Sie Symbole im Kontext der realen Benutzeroberfläche aus.
  • Erstellen Sie die endgültige .ico-Datei oder andere Grafikressourcenformate.

Extras

  • Bleistift und Papier: Erste Konzeptideen, aufgelistet und skizziert.
  • 3D Studio Max: Rendern Sie 3D-Objekte perspektivisch.
  • Adobe Photoshop: Skizzieren und durchlaufen, im Kontext simulieren und Details abschließen.
  • Adobe Illustrator/Macromedia Freehand: Skizzieren und Durchlaufen, Abschließen von Details.
  • Gamani Gif Movie Gear: Erstellen Sie eine .ico-Datei (bei Bedarf mit Komprimierung).
  • Axialis Icon Workshop: Erstellen Sie eine .ico-Datei (bei Bedarf mit Komprimierung).
  • Microsoft Visual Studio unterstützt keine Windows Vista-Symbole (es gibt keine Unterstützung für Alphakanal oder mehr als 256 Farben).

Produktion

Tipp

Führen Sie diese Schritte aus, um eine einzelne ICO-Datei zu erstellen, die mehrere Bildgrößen und Farbtiefen enthält.

Schritt 1: Konzeptualisieren

  • Verwenden Sie nach Möglichkeit etablierte Konzepte, um die Konsistenz der Bedeutungen für das Symbol und seine Relevanz für andere Verwendungen sicherzustellen.
  • Überlegen Sie, wie das Symbol im Kontext der Benutzeroberfläche angezeigt wird und wie es als Teil einer Gruppe von Symbolen funktionieren kann.
  • Wenn Sie ein vorhandenes Symbol überarbeiten, sollten Sie überlegen, ob die Komplexität verringert werden kann.
  • Berücksichtigen Sie die kulturellen Auswirkungen Ihrer Grafiken. Vermeiden Sie die Verwendung von Buchstaben, Wörtern, Händen oder Gesichtern in Symbolen. Darstellungen von Personen oder Benutzern so generisch wie möglich, falls erforderlich.
  • Wenn Sie mehrere Objekte zu einem einzelnen Bild in einem Symbol kombinieren, sollten Sie überlegen, wie das Bild auf kleinere Größen skaliert wird. Verwenden Sie nicht mehr als drei Objekte in einem Symbol (zwei sind bevorzugt). Für die Größe 16 x 16 sollten Sie Objekte entfernen oder das Image vereinfachen, um die Erkennung zu verbessern.
  • Verwenden Sie nicht das Windows-Flag in Symbolen.

Schritt 2: Veranschaulichen

  • Verwenden Sie ein Vektortool wie Macromedia Freehand oder Adobe Illustrator, um Symbole im Windows Aero-Stil zu veranschaulichen. Verwenden Sie die zuvor in diesem Artikel beschriebenen Paletten- und Stilmerkmale.
  • Bild mit Freehand oder Illustrator veranschaulichen. Kopieren Sie die Vektorbilder, und fügen Sie sie in Adobe Photoshop ein.
  • Erstellen und verwenden Sie eine Vorlagenebene in Photoshop, um sicherzustellen, dass die Arbeit in quadratischen Regionen der regulierten Größen ausgeführt wird.
  • Erstellen Sie die Bilder in einer Größe, die etwas kleiner ist als die Gesamtsymbolgröße, um Platz für einen Schlagschatten zuzulassen (für die Größen, die einen erfordern).
  • Platzieren Sie Bilder am unteren Rand der Quadrate, sodass alle Symbole in einem Verzeichnis konsistent positioniert werden. Vermeiden Sie Schatten.
  • Wenn Sie einem Bild oder einer Serie ein weiteres Objekt hinzufügen, behalten Sie das Standard-Objekt an einer festen Position bei, und platzieren Sie bilder kleinerer Größe in einer festen Position, z. B. unten links oder rechts oben, je nach Groß- und Kleinschreibung.

Schritt 3: Erstellen der 24-Bit-Images

  • Nachdem Sie Größen in Photoshop eingefügt haben, überprüfen Sie die Lesbarkeit von Bildern, insbesondere bei 16x16 und kleineren Größen. Pixel-Poking mit Prozenten von Farben ist möglicherweise erforderlich. Es kann auch eine Verringerung der Transparenz erforderlich sein. Es ist üblich, Aspekte bei kleineren Größen zu übertreiben und auch Aspekte zu beseitigen, um sich auf den Schlüsselpunkt zu konzentrieren.
  • Die 8-Bit-Symbole werden in jedem Farbmodus angezeigt, der niedriger als 32 Bit ist und nicht über den 8-Bit-Alphakanal verfügen, sodass sie möglicherweise ihre Kanten oder mehr bereinigen müssen, da es keine Antialiasing gibt (Kanten sind möglicherweise gezackt und das Bild ist schwer zu lesen).
  • Duplizieren Sie in Photoshop die 24-Bit-Bildebene, und benennen Sie die Ebene in 4-Bit-Bilder um. Indizieren Sie 4-Bit-Bilder in die Windows 16-Farbpalette.
  • Bereinigen Sie Bilder nur mit den Farben der 16-Farbpalette. Umrisse aus dunkleren oder helleren Versionen der Objektfarben sind in der Regel grau oder schwarz vorzuziehen.
  • Stellen Sie beim Arbeiten an einer Bitmap sicher, dass die Hintergrundfarbe nicht im Bild selbst verwendet wird, da diese Farbe die transparente Farbe ist. Magenta (R255 G0 B255) wird häufig als Hintergrundtransparenzfarbe verwendet.

Schritt 4: Erstellen der 8-Bit- und 4-Bit-Images

  • Da die 24-Bit-Images nun in 32-Bit-Symbole umgewandelt werden können, müssen 8-Bit-Versionen erstellt werden.
  • Dies ist eine großartige Zeit, um kontextbezogene Screenshots zu testen. Es ist erstaunlich, was sie entdecken können, wenn Sie andere Symbole oder eine Familie von Symbolen im Kontext anzeigen. Dieser Schritt kann Zeit und Geld sparen. Es ist viel besser, Probleme abzufangen, bevor Dateien in die Produktion gehen und übergeben werden.
  • Fügen Sie Ihren Bildern den Schlagschatten in Größen hinzu, für die sie erforderlich sind.
  • Führen Sie den Fallschatten und die 24-Bit-Bilder zusammen.
  • Erstellen Sie eine neue Photoshop-Datei für jede Größe. Kopieren Sie das entsprechende Bild, und fügen Sie es ein. Speichern Sie jede Datei als .psd-Datei.
  • Führen Sie die Bildebene nicht mit der Hintergrundebene zusammen. Es ist hilfreich, während der Arbeit die Größe und Farbtiefe in den Dateinamen aufzunehmen, aber die Datei muss möglicherweise umbenannt werden.

Schritt 5: Erstellen der ICO-Datei

  • Wählen Sie die Anwendung aus, die den Anforderungen und Fähigkeiten der Künstler am besten entspricht. Denken Sie daran, dass Symbole, die in einem Versandprodukt verwendet werden sollen, in einem Tool erstellt werden müssen, das erworben oder lizenziert wurde. Dies bedeutet, dass Testversionen nicht verwendet werden können.
  • Beide unten aufgeführten Produkte wurden von Designern verwendet, die Symbole für Windows Vista erstellt haben, und jedes bietet die Möglichkeit, nach Adobe Photoshop CS zu exportieren.
    • Gamani Gif Movie Gear: ICO-Datei erstellen
    • Axialis Icon Workshop: Erstellen einer .ico-Datei
  • Visual Studio unterstützt keine Windows Vista-Symbole (es gibt keine Unterstützung für Alphakanal oder mehr als 256 Farben), daher wird die Verwendung nicht empfohlen.
  • Symboldateien (.ico-Format) müssen die 4- und 8-Bit-Versionen sowie die 24-Bit+ Alpha-Version enthalten.
  • Speichern Sie Dateien als "Windows-Symbol (.ico)", unabhängig davon, welches Symbolerstellungsprogramm Sie verwenden möchten.
  • Einige symbolografische Objekte können Bitmapstreifen sein, die auch einen Alphakanal erfordern (z. B. für Symbolleisten), oder .png Dateien, die mit Transparenz gespeichert werden. Nicht alle sind notwendigerweise .ico-Format; Überprüfen Sie, welches Format im Code unterstützt wird.

Schritt 6: Bewerten

  • Sehen Sie sich alle Größen an.
  • Sehen Sie sich die Familie zusammen an, um die Ähnlichkeit der Familie, das optische Gleichgewicht und die Unterscheidung zu bewerten.
  • Sehen Sie sich im Kontext an, um relative Gewichtungen und Sichtbarkeit auszuwerten (stellen Sie sicher, dass sie nicht dominieren).
  • Betrachten Sie Fälle, die möglicherweise jetzt nicht verwendet werden, aber in naher Zukunft sein könnten. Könnte dieses Symbol jemals mit Anmerkungen versehen werden oder eine Überlagerung aufweisen?
  • Sehen Sie sich im Code an.

Symbole im Kontext von Listenansichten, Symbolleisten und Strukturansichten

Listenansichten

  • Verwenden Sie für Windows Vista Miniaturansichten für Dateien mit Inhalten, die sich visuell im kleinen Maßstab unterscheiden, sodass Benutzer die gesuchte Datei direkt erkennen können. (Verwenden Sie hierfür die Windows-Programmierschnittstelle für Miniaturansichten.)

    Screenshot des Windows-Explorers mit Ordnersymbolen

  • Anwendungssymbolüberlagerungen (hier nicht angezeigt) in Miniaturansichten helfen bei der Zuordnung zur Anwendung für den Dateityp und zeigen nicht nur die Vorschau der Datei an.

Hinweis: Verwenden Sie für Dateien ohne visuellen Inhalt keine Miniaturansichten. Verwenden Sie stattdessen herkömmliche symbolische Dateisymbole, die die Objektdarstellung und die zugeordnete Anwendung oder den zugehörigen Typ anzeigen.

Symbolleisten

  • Symbole, die in einer Symbolleiste angezeigt werden, müssen eine optische Balance in Größe, Farbe und Komplexität aufweisen.
  • Testen Sie potenzielle Symbole in einem kontextbezogenen Screenshot, um unerwünschte Dominanz oder Ungleichgewichte zu vermeiden.
  • Das Testen in Screenshots hilft dabei, teure Iterationen im Code zu vermeiden.
  • Überprüfen Sie auch die Symbole im Code. Bewegung und andere Faktoren können den Erfolg eines Symbols beeinflussen. in einigen Fällen sind möglicherweise weitere Iterationen erforderlich.

Screenshot der Symbolleiste mit kleinen Symbolen und Bezeichnungen

Im obigen Beispiel wurde die optische Balance noch nicht erreicht.

Abbildung von Symbolen auf unterschiedlichen Hintergründen

Testen Sie Iterationen im Kontext.

Strukturansichten

  • Optische Ausgewogenheit ist erforderlich, um die Hierarchie in einem Strukturansichtssteuerelement beizubehalten.
  • Daher sollten Symbole, die normalerweise in diesem Kontext verwendet werden, dort ausgewertet werden. Manchmal sollte ein bestimmtes 16x16-Symbol verkleinert werden, da seine Form eine optische Dominanz gegenüber anderen aufweist.
  • Die Kompensation optischer Unausgewogenheiten ist ein wichtiger Bestandteil der Herstellung von Symbolen höchster Qualität.

Abbildung von zwei Ordnersätzen in der Strukturansicht