Teilen über


Symbole (Designgrundlagen)

Anmerkung

Dieses Designhandbuch wurde für Windows 7 erstellt und wurde für neuere Versionen von Windows nicht aktualisiert. Ein Großteil der Anleitungen gilt weiterhin im Prinzip, aber die Präsentation und Beispiele spiegeln nicht unsere aktuelle Designleitfadenwider.

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

Hinweis: Richtlinien für Standardsymbole werden in einem separaten Artikel vorgestellt.

Designkonzepte

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

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

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

Gut gestaltete Symbole:

  • Verbessern Sie die visuelle Kommunikation Ihres Programms.
  • Wirkt sich stark auf den Eindruck des visuellen Designs Ihres Programms aus, und die Wertschätzung für die Anpassung und Das Ende des Programms.
  • Verbessern Sie die Benutzerfreundlichkeit, indem Sie Programme, Objekte und Aktionen einfacher identifizieren, lernen und finden.

Die folgenden Bilder zeigen, was den Aero-Stil der Symbolographie in Windows Vista von denen unterscheidet, die in Windows XP verwendet werden.

Bilder von Sperr- und Schlüsselsymbolen

Die Windows Vista-Symbole (die Sperre und taste auf der linken Seite) sind authentisch, knackig und detailliert. Sie werden statt gezeichnet, sondern nicht vollständig fotorealistisch dargestellt.

Bilder von Globus- und Spiralnotizbuchsymbolen

Die Windows Vista-Symbole (die beiden links) sind professionell und schön, mit Aufmerksamkeit auf Details, die die Qualität der Symbolproduktion verbessern.

Bilder von Notizbuch-, Sperr-, Monitor- und Papier-

Diese Windows Vista-Symbole zeigen optische Balance und wahrgenommene Genauigkeit in Perspektive und Details. Dies ermöglicht es ihnen, groß oder klein, nah oder aus einer Entfernung zu aussehen. Darüber hinaus funktioniert dieser Stil der Symbolographie für hochauflösende Bildschirme.

Bild eines Wlan-Routersymbols Bild eines Blatts papiersymbols Bild eines großen, grünen Pfeilsymbols nach rechts

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

Leitlinien

Perspektive

  • Symbole in Windows Vista sind entweder dreidimensional und werden perspektivisch als einfarbige Objekte oder zweidimensionale Objekte direkt angezeigt. 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-Computern und flachen, 2D-Papier

    Typische 3D- und flache Symbole.

  • dreidimensionale Objekte werden perspektivisch als einfarbige Objekte dargestellt, die aus einer niedrigen Vogelperspektive mit zwei verschwindenden Punkten gesehen werden.

    Bild des Notizbuchs mit Linien, die perspektivisch

    Dieses Beispiel zeigt perspektiven- und verschwindende Punkte, die typisch für 3D-Symbole sind.

  • In den kleineren Größen kann sich dasselbe Symbol von Perspektive zu gerade ändern. Rendern Sie bei der Größe von 16 x 16 Pixeln und kleineren Symbolen direkt auf der Vorderseite.At the size of 16x16 pixels and smaller, rendern Icons straight-on (front-facing). Verwenden Sie für größere Symbole perspektive.

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

    Bild 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 im perspektivische Raster liegt oberhalb, leicht vor und leicht links vom Objekt.
  • Die Lichtquelle wandelt Schatten, die leicht nach hinten und rechts von der Basis des Objekts liegen.
  • Alle Lichtstrahlen sind parallel und schlagen das Objekt entlang desselben Winkels (wie die Sonne). Ziel ist es, ein einheitliches Beleuchtungserscheinungsbild für alle Symbole und Spotlight-Effekte zu haben. Parallele Lichtstrahlen erzeugen Schatten, die alle dieselbe Länge und Dichte aufweisen und eine weitere Einheit über mehrere Symbole hinweg bieten.

Schatten

allgemeine

  • Verwenden Sie Schatten, um Objekte visuell aus dem Hintergrund zu heben, und um 3D-Objekte geerdet zu machen, anstatt ungünstig im Raum zu schweben.

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

  • Feder oder kürzen Sie den Schatten bei Bedarf, damit er nicht durch die Symbolfeldgröße zugeschnitten wird.

  • Verwenden Sie keine Schatten in Symbolen mit 24 x 24 oder kleineren Größen.

    Bilder von 3D-Symbolen mit Schatten

    Typische Symbolschatten.

flache Symbole

  • Flachsymbole werden in der Regel für Dateisymbole und flache reale Objekte verwendet, wie z. B. ein Dokument oder ein Stück Papier.
  • Flache Symbolbeleuchtung kommt von oben links bei 130 Grad.
  • Kleinere Symbole (z. B. 16 x 16 und 32 x 32) werden zur besseren Lesbarkeit vereinfacht. Wenn sie jedoch eine Spiegelung innerhalb des Symbols enthalten (oft vereinfacht), haben sie möglicherweise einen engen Schlagschatten. Der Schlagschattenbereich liegt in Deckkraft von 30-50 Prozent.
  • Layereffekte können für flache Symbole verwendet werden, sollten jedoch mit anderen flachen Symbolen verglichen werden. Die Schatten für Objekte variieren etwas, je nachdem, was am besten aussieht und innerhalb des Größensatzes 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, sich im Raum zu befinden. Die Farbe wirkt sich auf die wahrgenommene Stärke des Schattens aus und kann das Bild verzerren, wenn es zu schwer ist.

Screenshot des Dialogfelds mit aktivierten Schlagschatten Screenshot des Papiersymbols mit schmalen Schlagschatten

Die Option "Schlagschatten" im Dialogfeld "Ebenenart" und einen typischen Schatten für ein flaches Symbol.

Einfache flache Schattenbereiche

Charakteristisch Bereich
Farbe
Schwarz
Blend-Modus
Multiplizieren
Undurchsichtigkeit
22-50 Prozent, abhängig von der Farbe des Elements
Winkel
120-130 (globales Licht verwenden)
Abstand
3 für 256 x 256, von 1 bis 32 x 32
Verbreitung
0
Größe
7 für 256 x 256, von 2 bis 32 x 32

dreidimensionale Symbole

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

Abbildung der Erstellung 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 wurden. Der Schatten muss manchmal gefiedert oder gekürzt werden, damit er nicht von der Größe des Symbolfelds zugeschnitten 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 der Farben; farben Sie keine Standardsymbole neu, z. B. Warnsymbole, da dies die Fähigkeit der Benutzer beeinträchtigt, die Bedeutung zu interpretieren. Weitere Richtlinien finden Sie unter Color.

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

    Screenshot des Dialogfelds

    Es gibt keine strikte Farbpaletteneinschränkung. Es wird nur eine vollständige Sättigung (oben rechts) vermieden.

  • Bitebenen: ICO-Design für 32-Bit (alpha enthalten) + 8-Bit + 4-Bit (dithered down automatically pixel poke only critical). Es sollte nur eine 32-Bit-Kopie des 256 x 256-Pixelbilds enthalten sein, und nur das Bild mit 256 x 256 Pixel sollte komprimiert werden, um die Dateigröße zu verkleinert. Mehrere Symboltools bieten 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

allgemeine

  • achten Sie besonders auf Symbole mit hoher Sichtbarkeit, wie Hauptanwendungssymbole, Dateisymbole, die im Windows-Explorer angezeigt werden können, und Symbole, die im Startmenü oder auf dem Desktop angezeigt werden.
    • Anwendungssymbole und Systemsteuerungselemente: Der vollständige Satz umfasst 16x16, 32x32, 48x48 und 256x256 (Codemaßstabe 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.
    • Optionen für Listenelementsymbole: Verwenden von Liveminiaturansichten oder Dateisymbolen des Dateityps (z. B. .doc); Vollständiger Satz.
    • Symbolleistensymbole: 16 x 16, 24 x 24, 32 x 32. Beachten Sie, dass Symbolleistensymbole immer flach und nicht 3D sind, selbst bei der Größe 32x32.
    • Symbole für Dialogfeld und Assistent: 32 x 32 und 48 x 48.
    • Overlays: Core-Shellcode (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 in Abhängigkeit von Form und optischem Gleichgewicht nahe an dieser Größe liegen.
    • Schnellstartbereich: Symbole werden von 48 x 48 in dynamischen Überlagerungen von ALT+TAB herunterskaliert, aber für eine scharfere Version fügen Sie .ico Datei eine 40x40 hinzu.
    • Sprechblasensymbole: 32x32 und 40x40.
    • Zusätzliche Größen: Diese sind nützlich, 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, .bmpoder andere Dateiformate verwenden.

Für hohe DPI-

  • 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 datei .ico enthalten sein müssen. Der Code skaliert größere verkleinerte.

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

.ico Dateigrößen (Standard)

Diagramm, das verschiedene Routersymbole der Standardgröße anzeigt.

.ico Dateigrößen (Sonderfälle)

Abbildung von Routersymbolen unterschiedlicher Größe

Anmerkungen und Überlagerungen

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

Detailebene

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

  • Die Details in einem Symbol dieser Größe müssen eindeutig den wichtigsten Punkt des Symbols anzeigen.

  • Da ein Symbol kleiner wird, sollten Transparenz und einige spezielle Details in größeren Größen geopfert werden, um den Punkt zu vereinfachen und zu erreichen.

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

    Abbildung eines großen und zwei kleinen Geräts

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

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

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

    Abbildung von Mobiltelefonen mit klaren Details

    Abbildung von Mobiltelefonen 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. Erfahrung in Abbildungen mit Vektorgrafiken oder 3D-Programmen wird empfohlen.
  • Planen sie eine Reihe von Iterationen, von anfänglichen Konzeptskizzen bis hin zu kontextbezogenen Mockups, bis hin zur endgültigen Produktionsüberprüfung und zum Anpassen und Fertigstellen von Symbolen im Arbeitsprodukt.
  • Denken Sie daran, 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 Hauptfunktion und Bedeutung für jeden; Familien oder Cluster in der Gruppe, die Sie erkennen möchten; Markenanforderungen; die genauen Dateinamen; Bildformate, die in Ihrem Code verwendet werden; und Größenanforderungen. Stellen Sie im Vorfeld 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 ggf. funktionale Informationen, Screenshots und Spezifikationsabschnitte bereit.
  • Plan für geopolitische und rechtliche Überprüfungen gegebenenfalls.
  • Zuordnen eines Zeitrahmens und einer regelmäßigen Kommunikation.

Von Der Konzeptskizze bis zur Produkt-

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 unterschiedliche Hintergrundfarben.
  • Auswerten von Symbolen im Kontext der realen Benutzeroberfläche.
  • Erstellen Sie endgültige .ico Datei- oder andere Grafikressourcenformate.

tools

  • Bleistift und Papier: Konzeptideen, aufgelistet und skizziert.
  • 3D Studio Max: Rendern von 3D-Objekten perspektivisch.
  • Adobe Photoshop: Skizzieren und Iterieren, Modellieren im Kontext und Fertigstellen von Details.
  • Adobe Illustrator/ Macromedia Freehand: Skizzieren und Durchlaufen, Fertigstellen von Details.
  • Gamani Gif Movie Gear: Produzieren .ico Datei (bei Bedarf mit Komprimierung).
  • Axialis Icon Workshop: Produzieren .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).

Produktions-

Trinkgeld

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

Schritt 1: Konzeptualisieren von

  • Verwenden Sie nach Möglichkeit etablierte Konzepte, um die Konsistenz der Bedeutungen für das Symbol und deren 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 funktioniert.
  • Berücksichtigen Sie bei der Überarbeitung eines vorhandenen Symbols, ob die Komplexität reduziert werden kann.
  • Berücksichtigen Sie die kulturellen Auswirkungen Ihrer Grafiken. Vermeiden Sie die Verwendung von Buchstaben, Wörtern, Händen oder Gesichtern in Symbolen. Darstellen von Darstellungen von Personen oder Benutzern möglichst generisch, falls erforderlich.
  • Wenn Sie mehrere Objekte in einem Einzigen Bild in einem Symbol kombinieren, überlegen Sie, wie das Bild auf kleinere Größen skaliert wird. Verwenden Sie nicht mehr als drei Objekte in einem Symbol (zwei werden bevorzugt). Für die Größe 16 x 16 sollten Sie Objekte entfernen oder das Bild vereinfachen, um die Erkennung zu verbessern.
  • Verwenden Sie das Windows-Flag nicht in Symbolen.

Schritt 2: Veranschaulichen

  • Verwenden Sie zum Veranschaulichen von Symbolen im Windows Aero-Stil ein Vektortool wie Macromedia Freehand oder Adobe Illustrator. Verwenden Sie die Paletten- und Stilmerkmale, wie weiter oben in diesem Artikel beschrieben.
  • Abbildung 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 Bereichen der regulierten Größen erfolgt.
  • Erstellen Sie die Bilder in einer Größe etwas kleiner als die Gesamtsymbolgröße, um Platz für einen Schlagschatten zu ermöglichen (für diese Größen, die eine benötigen).
  • Platzieren Sie Bilder am unteren Rand der Quadrate, sodass alle Symbole in einem Verzeichnis konsistent positioniert werden. Vermeiden Sie das Abschneiden von Schatten.
  • Wenn Sie einem Bild oder einer Datenreihe ein weiteres Objekt hinzufügen, behalten Sie das Hauptobjekt an einer festen Position bei, und platzieren Sie flache kleinere Bilder an einer festen Position, z. B. unten links oder oben rechts, je nach Groß-/Kleinschreibung.

Schritt 3: Erstellen der 24-Bit-Bilder

  • Nachdem Sie Größen in Photoshop eingefügt haben, überprüfen Sie die Lesbarkeit von Bildern, insbesondere bei 16 x 16 und kleineren Größen. Pixelpoping mit Prozentsätzen von Farben ist möglicherweise erforderlich. Eine Verringerung der Transparenz kann auch erforderlich sein. Es ist üblich, Aspekte in kleineren Größen zu übertreiben und Auch Aspekte zu beseitigen, um sich auf den zentralen Punkt zu konzentrieren.
  • Die 8-Bit-Symbole werden in jedem Farbmodus unter 32-Bit angezeigt und verfügen nicht über den 8-Bit-Alphakanal, sodass sie möglicherweise ihre Kanten oder mehr bereinigt haben müssen, da keine Antialiasing vorhanden ist (Ränder können markiert sein und das Bild kann schwer zu lesen sein).
  • 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 aus der 16 Farbpalette. Gliederungen aus dunkleren oder helleren Versionen der Farben des Objekts sind in der Regel grau oder schwarz vorzuziehen.
  • Wenn Sie an einer Bitmap arbeiten, stellen Sie 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-Bilder

  • Da nun die 24-Bit-Bilder in 32-Bit-Symbole erstellt werden können, müssen 8-Bit-Versionen erstellt werden.
  • Dies ist ein guter Zeitpunkt, um kontextbezogene Screenshots zu testen. Es ist erstaunlich, was entdeckt werden kann, indem andere Symbole oder eine Familie von Symbolen im Kontext angezeigt werden. Dieser Schritt kann Zeit und Geld sparen. Es ist viel besser, Probleme zu erfassen, bevor Dateien durch die Produktion gehen und übergeben werden.
  • Fügen Sie den Schlagschatten zu Ihren Bildern in Größen hinzu, für die sie erforderlich sind.
  • Führen Sie den Schlagschatten 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, die Größe und Farbtiefe beim Arbeiten in den Dateinamen einzuschließen, die Datei muss jedoch möglicherweise umbenannt werden.

Schritt 5: Erstellen der .ico Datei

  • Wählen Sie die Anwendung aus, die den Anforderungen und Fähigkeiten von Künstlern 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 produziert haben, und jeder bietet die Möglichkeit, nach Adobe Photoshop CS zu exportieren.
    • Gamani Gif Movie Gear: Produzieren .ico Datei
    • Axialis Icon Workshop: Produzieren .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.
  • Bei einigen symbolografischen Ressourcen kann es sich um Bitmapstreifen handeln, die auch einen Alphakanal (z. B. für Symbolleisten) oder .png Dateien erfordern, die mit Transparenz gespeichert wurden. Nicht alle sind unbedingt .ico Format; Überprüfen Sie, welches Format im Code unterstützt wird.

Schritt 6: Auswerten von

  • Sehen Sie sich alle Größen an.
  • Schauen Sie sich die Familie zusammen an, um die Familiäre Ähnlichkeit, optische Balance und Unterscheidung zu bewerten.
  • Sehen Sie sich im Kontext an, um relative Gewichtungen und Sichtbarkeit zu bewerten (stellen Sie sicher, dass man nicht dominiert).
  • Berücksichtigen Sie Fälle, die jetzt nicht verwendet werden können, aber in Naher Zukunft sein könnten. Könnte dieses Symbol jemals kommentiert oder über eine Überlagerung verfügen?
  • Sehen Sie sich den Code an.

Symbole im Kontext von Listenansichten, Symbolleisten und Strukturansichten

Listenansichten

  • Verwenden Sie für Windows Vista Miniaturansichten für Dateien, die Inhalte enthalten, die visuell unterschiedlich sind, sodass Benutzer die gesuchte Datei direkt erkennen können. (Verwenden Sie dazu die Programmierschnittstelle der Windows-Miniaturansichtenanwendung.)

    Screenshot des Windows-Explorers mit Ordnersymbolen

  • Anwendungssymbolüberlagerungen (nicht hier gezeigt) in Miniaturansichten helfen bei der Zuordnung mit der Anwendung für den Dateityp, zusätzlich zur Anzeige der Vorschau der Datei.

Hinweis: Verwenden Sie für Dateien ohne visuell unterschiedliche Inhalte keine Miniaturansichten. Verwenden Sie stattdessen herkömmliche symbolische Dateisymbole mit Objektdarstellung und der zugehörigen Anwendung oder dem zugehörigen Typ.

Symbolleisten

  • Symbole, die in einer Symbolleiste angezeigt werden, müssen ein optisches Gleichgewicht 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 trägt dazu bei, teure Iterationen im Code zu vermeiden.
  • Überprüfen Sie auch die Symbole im Code. Bewegung und andere Faktoren können sich auf den Erfolg eines Symbols auswirken; in einigen Fällen können weitere Iterationen erforderlich sein.

Screenshot der Symbolleiste mit kleinen Symbolen und Beschriftungen

Im obigen Beispiel wurde das optische Gleichgewicht noch nicht erreicht.

Abbildung von Symbolen auf verschiedenen Hintergründen

Probieren Sie Iterationen im Kontext aus.

Strukturansichten

  • Das optische Gleichgewicht wird benötigt, um die Hierarchie in einem Strukturansichtssteuerelement beizubehalten.
  • Daher sollten symbole, die in diesem Kontext in der Regel verwendet werden, dort ausgewertet werden. Manchmal sollte ein bestimmtes 16x16-Symbol kleiner gemacht werden, da seine Form eine optische Dominanz gegenüber anderen hat.
  • Die Kompensation optischer Ungleichgewichte ist ein wichtiger Bestandteil der Herstellung hochwertiger Symbole.

Abbildung von zwei Ordnergruppen in der Strukturansicht