Symbole (Entwurfsgrundlagen) - Win32 apps (2023)

  • Artikel
  • 15Minuten Lesedauer

Hinweis

Dieses Entwurfshandbuch wurde für Windows 7 erstellt und wurde nicht für neuere Versionen von Windows aktualisiert. Viele der Anleitungen gelten weiterhin im Prinzip, aber die Präsentation und Beispiele spiegeln unsere aktuellen Designleitlinien nicht wider.

Symbole sind bildliche Darstellungen von Objekten, nicht nur aus ästhetischen Gründen als Teil der visuellen Identität eines Programms, sondern auch aus utilitären Gründen als Kurzhand zur Vermittlung der Bedeutung, dass Die Benutzer fast sofort wahrnehmen. Windows Vista führt eine neue Art der Symbolografie ein, die eine höhere Detailebene und Einephistik auf Windows bringt.

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 darstellt, die im Design der Ästhetik enthalten 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 hochwertige und elegante Erfahrung, die die Produktivität des Benutzers erleichtert und sogar eine emotionale Reaktion fördert.

Windows Vista-Symbole unterscheiden sich von Windows XP-Formatsymbolen 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, wodurch sie für Bildschirme mit hohem DPI-Wert (Punkt pro Zoll) geeignet sind. Diese hochauflösenden Symbole ermöglichen eine hohe visuelle Qualität in Listenansichten mit großen Symbolen.
  • Überall in der Praxis werden feste Dokumentsymbole durch Miniaturansichten des Inhalts ersetzt, wodurch Dokumente leichter zu identifizieren 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 seine Anpassung und Das Ende.
  • Verbessern Sie die Benutzerfreundlichkeit, indem Sie Programme, Objekte und Aktionen einfacher identifizieren, lernen und finden.

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

Symbole (Entwurfsgrundlagen) - Win32 apps (1)

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

Symbole (Entwurfsgrundlagen) - Win32 apps (2)

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

Symbole (Entwurfsgrundlagen) - Win32 apps (3)

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

Symbole (Entwurfsgrundlagen) - Win32 apps (4)Symbole (Entwurfsgrundlagen) - Win32 apps (5)Symbole (Entwurfsgrundlagen) - Win32 apps (6)

Diese Beispiele zeigen verschiedene Arten von Symbolen, einschließlich eines dreidimensionalen Objekts in Perspektive, ein frontseitiges (flaches) Symbol und ein Symbolleistensymbol.

Richtlinien

Perspektive

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

    Symbole (Entwurfsgrundlagen) - Win32 apps (7)

    Typische 3D- und flache Symbole.

  • Dreidimensionale Objekte werden perspektivisch als solide Objekte dargestellt, die aus einer niedrigen Vogelsicht mit zwei verschwindenden Punkten gesehen werden.

    Symbole (Entwurfsgrundlagen) - Win32 apps (8)

    In diesem Beispiel werden perspektiven- und verschwindende Punkte gezeigt, die typisch für 3D-Symbole sind.

  • In den kleineren Größen kann sich dasselbe Symbol von Perspektive zu Geraden ändern. Rendern Sie bei der Größe von 16 x 16 Pixeln und kleineren Symbolen direkt auf der Vorderseite. Verwenden Sie für größere Symbole Perspektive.

    • Ausnahme: Symbolleistensymbole sind immer frontgeschützt, auch in größeren Größen.

    Symbole (Entwurfsgrundlagen) - Win32 apps (9)

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

Lichtquelle

  • Die Lichtquelle für Objekte innerhalb des Perspektiverasters 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, eine einheitliche Beleuchtungsdarstellung über alle Symbole und Spotlighteffekte hinweg zu haben. Parallele Lichtstrahlen erzeugen Schatten, die alle die gleiche Länge und Dichte haben und eine weitere Einheit über mehrere Symbole hinweg bieten.

Schatten

Allgemein

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

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

  • Federn oder Kürzen des Schattens bei Bedarf, um es daran zu halten, durch die Größe des Symbolfelds zugeschnitten zu werden.

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

    Symbole (Entwurfsgrundlagen) - Win32 apps (10)

    Typische Symbolschatten.

Flache Symbole

  • Flache Symbole werden in der Regel für Dateisymbole und flache reale Objekte wie ein Dokument oder ein Papierstück verwendet.
  • Flache Symbolbeleuchtung stammt von oben links um 130 Grad.
  • Kleinere Symbole (z. B. 16x16 und 32x32) werden vereinfacht, um die Lesbarkeit zu verbessern. Wenn sie jedoch eine Spiegelung innerhalb des Symbols (häufig vereinfacht) enthalten, haben sie möglicherweise einen engen Schatten. Der Schlagschatten liegt in der Deckkraft von 30 bis 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 in der Größe und mit den anderen Symbolen in Windows Vista am besten konsistent ist. Manchmal kann es sogar notwendig sein, die Schatten zu ändern. Dies gilt insbesondere, 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 Gewichtung des Schattens aus, und kann das Bild verzerren, wenn es zu schwer ist.

Symbole (Entwurfsgrundlagen) - Win32 apps (11)Symbole (Entwurfsgrundlagen) - Win32 apps (12)

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

Einfache flache Schattenbereiche

MerkmalBereich
Farbe
Schwarz
Blendmodus
Multiplizieren
Opacity
22-50 Prozent, je nach Farbe des Elements
Angle
120-130 (globales Licht verwenden)
Distance
3 für 256x256, von 1 für 32x32
Spread
0
Größe
7 für 256x256, von 2 für 32x32

Dreidimensionale Symbole

  • Erstellen Sie Schatten für 3D-Symbole auf Fall-nach-Fall-Basis, mit dem Versuch, innerhalb eines Bereichs von Umwandlungsabstand 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 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.

Symbole (Entwurfsgrundlagen) - Win32 apps (13)

Symbole (Entwurfsgrundlagen) - Win32 apps (14)

In diesen Beispielen werden Variationen veranschaulicht, die basierend auf der Form und Position des Objekts selbst erstellt wurden. Der Schatten muss manchmal gefedert oder gekürzt werden, um es von der Größe des Symbolfelds zuzuschneiden.

Farbe und Sättigung

  • Farben sind im Allgemeinen weniger Sättigung als sie Windows XP waren.

  • 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; Verwenden Sie keine Farbstandardsymbole, z. B. Warnungssymbole, da dadurch die Fähigkeit der Benutzer beeinträchtigt wird, die Bedeutung zu interpretieren. Weitere Richtlinien finden Sie unter "Farbe".

  • Symboldateien erfordern 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 Retouchierung für eine bessere Lesbarkeit erfordern.

    Symbole (Entwurfsgrundlagen) - Win32 apps (15)

    Es gibt keine strikte Farbpaletteneinschränkung. Es wird nur die volle Sättigung (oben rechts) vermieden.

  • Bitebenen: ICO-Design für 32-Bit (alpha enthalten) + 8-Bit + 4-Bit (thered down automatisch pixel poke only critical). Es sollte nur eine 32-Bit-Kopie des 256x256-Pixelbilds enthalten sein, und nur das 256x256-Pixelbild sollte komprimiert werden, um die Dateigröße zu senken. 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

Allgemein

  • Achten Sie auf Symbole mit hoher Sichtbarkeit, z. B. Hauptanwendungssymbole, Dateisymbole, die im Windows Explorer angezeigt werden können, und Symbole, die im Startmenü oder auf dem Desktop angezeigt werden.
    • Anwendungssymbole und Systemsteuerung Elemente: Der vollständige Satz enthält 16x16, 32x32, 48x48 und 256x256 (Codeskala 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 Live-Miniaturansichten oder Dateisymbole des Dateityps (z. B. .doc); Vollständiger Satz.
    • Symbolleistensymbole: 16x16, 24x24, 32x32. Beachten Sie, dass Symbolleistensymbole immer flach sind, nicht 3D, auch bei der Größe von 32x32.
    • Dialogfeld- 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 dieser Elemente geringfügig kleiner sind, aber je nach Form und optischem Gleichgewicht nahe an dieser Größe liegen.
    • Schnellstartbereich: Symbole werden von 48x48 in dynamischen Alt+Tab-Überlagerungen verkleinern, aber für eine präzisere Version fügen Sie eine 40x40-Datei zu ICO-Datei hinzu.
    • Sprechblasensymbole: 32x32 und 40x40.
    • Zusätzliche Größen: Diese sind nützlich, um andere Dateien zu erstellen (z. B. Anmerkungen, Symbolleistenstreifen, Überlagerungen, high dpi 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.

In den folgenden Tabellen sind Beispiele für Skalierungsverhältnisse aufgeführt, 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 skaliert größere Elemente nach unten.

dpiSymbolgrößeSkalierungsfaktor
96
16x16
1.0 (100%)
120
20 x 20
1.25 (125%)
144
24x24
1.5 (150%)
192
32x32
2.0 (200%)
dpiSymbolgrößeSkalierungsfaktor
96
32x32
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)

Symbole (Entwurfsgrundlagen) - Win32 apps (16)

ICO-Dateigrößen (Sonderfälle)

Symbole (Entwurfsgrundlagen) - Win32 apps (17)

Anmerkungen und Überlagerungen

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

Detailgrad

  • 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 Schlüsselpunkt 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 und verwendet werden, um die Schlüsselformen hervorzuheben.

    Symbole (Entwurfsgrundlagen) - Win32 apps (18)

    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 soll.

  • Die Skalierung von der Größe 256x256 funktioniert nicht.

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

    Symbole (Entwurfsgrundlagen) - Win32 apps (19)

    Symbole (Entwurfsgrundlagen) - Win32 apps (20)

Symbolentwicklung

Entwerfen und Produzieren von Symbolen

  • Stellen Sie einen erfahrenen Grafikdesigner ein. Für großartige Grafiken, Bilder und Symbole arbeiten Sie mit Experten zusammen. Erfahrung in Illustrationen mithilfe von Vektorkunst- 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 -fertigstellung 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 von Symbolen, die benötigt werden; die Hauptfunktion und Bedeutung für jede; Familien oder Cluster im Satz, den Sie erkennen möchten; Markenanforderungen; die genauen Dateinamen; Bildformate, die in Ihrem Code verwendet werden; und Größenanforderungen. Stellen Sie 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, sodass sie funktionsbezogene Informationen, Screenshots und Spezifikationsabschnitte bereitstellen.
  • Planen Sie die geopolitischen und rechtlichen Überprüfungen entsprechend.
  • Zuordnen eines Zeitrahmens und regelmäßiger Kommunikation.

Vom Konzeptskizze bis zum Endprodukt

Symbole (Entwurfsgrundlagen) - Win32 apps (21)

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

Extras

  • Bleistift und Papier: Anfängliche Konzeptideen, aufgelistet und skizziert.
  • Max. 3D Studio: Rendern von 3D-Objekten perspektivisch.
  • Adobe Photoshop: Skizzen und Iterieren, Mock-Up im Kontext und endisieren Details.
  • Adobe Illustrator/ Macromedia Freehand: Skizzieren und Iterieren, Fertigstellen von Details.
  • Gamani Gif Movie Gear: Erstellen Sie die .ico-Datei (bei Bedarf mit Komprimierung).
  • Axialis Icon Workshop: Erstellen Sie die .ico-Datei (bei Bedarf mit Komprimierung).
  • Microsoft Visual Studio unterstützt Windows Vista-Symbole nicht (es gibt keine Unterstützung für Alphakanal oder mehr als 256 Farben).

Produktion

Tipp

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

Schritt 1: Konzeptualisieren

  • Verwenden Sie etablierte Konzepte, um die Konsistenz der Bedeutungen für das Symbol und ihre Relevanz für andere Verwendungen zu gewährleisten.
  • Überlegen Sie, wie das Symbol im Kontext der Benutzeroberfläche angezeigt wird und wie sie als Teil einer Reihe von Symbolen funktioniert.
  • Wenn Sie ein vorhandenes Symbol überarbeitet haben, sollten Sie berücksichtigen, 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 so generisch wie möglich, falls erforderlich.
  • Wenn Sie mehrere Objekte in ein einzelnes Bild in einem Symbol kombinieren, sollten Sie berücksichtigen, wie das Bild auf kleinere Größen skaliert wird. Verwenden Sie nicht mehr als drei Objekte in einem Symbol (zwei wird bevorzugt). Für die Größe 16x16 sollten Sie Objekte entfernen oder das Bild vereinfachen, um die Erkennung zu verbessern.
  • Verwenden Sie nicht das Windows-Flag in Symbolen.

Schritt 2: Veranschaulichen

  • Um Windows Aero-Formatsymbole zu veranschaulichen, verwenden Sie ein Vektortool wie Macromedia Freehand oder Adobe Illustrator. Verwenden Sie die Paletten- und Stileigenschaften wie zuvor in diesem Artikel beschrieben.
  • Abbildung mit Freehand oder Illustrator veranschaulichen. Kopieren und Einfügen der Vektorbilder in Adobe Photoshop.
  • Stellen Sie eine Vorlagenebene in Photoshop bereit, um sicherzustellen, dass die Arbeit in quadratischen Bereichen der regulierten Größen ausgeführt wird.
  • Erstellen Sie die Bilder in einer Größe ein bisschen kleiner als die Gesamtsymbolgröße, um Platz für einen Dropdownschatten 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 Serie ein anderes Objekt hinzufügen, halten Sie das Hauptobjekt in einer festen Position, und platzieren Sie flache kleinere Bilder in einer festen Position, z. B. die unteren linken oder oberen rechten Elemente je nach Fall.

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 16x16 und kleineren Größen. Pixel-Poking mit Prozentsätzen von Farben kann erforderlich sein. Eine Verringerung der Transparenz kann auch erforderlich sein. Es ist üblich, Aspekte in kleineren Größen zu überzeichnen und Aspekte zu beseitigen, um sich auf den wichtigsten 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 Anti-Aliasing-Elemente vorhanden sind (Ränder sind möglicherweise abgeklickt und Bild kann schwer gelesen werden).
  • Duplizieren Sie in Photoshop die 24-Bit-Bildebene, und benennen Sie die Ebene in 4-Bit-Bilder um. Index 4-Bit-Bilder zur Windows 16 Farbpalette.
  • Bereinigung von Bildern mit nur 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, müssen Sie sicherstellen, dass die Hintergrundfarbe nicht in der Bildansicht selbst verwendet wird, da diese Farbe die transparente Farbe sein wird. Magenta (R255 G0 B255) wird häufig als Hintergrundtransparenzfarbe verwendet.

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

  • Da die 24-Bit-Bilder jetzt in 32-Bit-Symbole erstellt werden können, müssen 8-Bit-Versionen erstellt werden.
  • Dies ist eine großartige Zeit, 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 die Produktion durchlaufen und übergeben werden.
  • Fügen Sie den Drop shadow zu Ihren Bildern in Größen hinzu, die sie benötigen.
  • Zusammenführen sie den Dropdownschatten und die 24-Bit-Bilder zusammen.
  • Erstellen Sie eine neue Photoshop-Datei für jede Größe. Kopieren und Einfügen des entsprechenden Bilds. 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 im Dateinamen während der Arbeit einzuschließen, aber die Datei muss möglicherweise letztendlich 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 jede bietet die Möglichkeit, in Adobe Photoshop CS zu exportieren.
    • Gamani Gif Movie Gear: Produzieren .ico-Datei
    • Axialis Icon Workshop: Produzieren .ico-Datei
  • Visual Studio unterstützt nicht Windows Vista-Symbole (es gibt keine Unterstützung für Alphakanal oder mehr als 256 Farben), sodass die Verwendung nicht empfohlen wird.
  • Symboldateien (ico-Format) müssen die 4- und 8-Bit-Versionen sowie die 24-Bit- und Alpha-Version enthalten.
  • Speichern Sie Dateien als "Windows Symbol (.ico)" unabhängig davon, welches Symbolerstellungsprogramm Sie verwenden möchten.
  • Einige symbolografische Ressourcen sind möglicherweise Bitmapstreifen, die auch einen Alphakanal (z. B. für Symbolleisten) erfordern, oder .png Dateien, die mit Transparenz gespeichert wurden. Nicht alle sind unbedingt .ico-Format; Überprüfen Sie, welche Format im Code unterstützt wird.

Schritt 6: Bewerten

  • Sehen Sie sich alle Größen an.
  • Schauen Sie sich die Familie zusammen an, um die Familienabgleichheit, den optischen Gleichgewicht und die 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. Könnte dieses Symbol jemals annotiert 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 im kleinen Maßstab unterscheiden, sodass Benutzer die gewünschte Datei direkt erkennen können. (Verwenden Sie die Windows Miniaturansicht-Anwendungsprogrammierungsschnittstelle für diese.)

    Symbole (Entwurfsgrundlagen) - Win32 apps (22)

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

Hinweis: Für Dateien ohne visuelle Inhalte verwenden Sie keine Miniaturansichten. Verwenden Sie stattdessen herkömmliche symbolische Dateisymbole, 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 eine unerwünschte Dominanz oder Ungleichgewichte zu vermeiden.
  • Das Testen in Screenshots hilft einfach, 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 können weitere Iterationen erforderlich sein.

Symbole (Entwurfsgrundlagen) - Win32 apps (23)

Im obigen Beispiel wurde das optische Gleichgewicht noch nicht erreicht.

Symbole (Entwurfsgrundlagen) - Win32 apps (24)

Versuchen Sie Iterationen im Kontext.

Strukturansichten

  • Das optische Gleichgewicht ist erforderlich, 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 über andere verfügt.
  • Die Vergütung für optische Ungleichgewichte ist ein wichtiger Teil der Herstellung von Top-Qualitätssymbolen.

Symbole (Entwurfsgrundlagen) - Win32 apps (25)

Top Articles
Latest Posts
Article information

Author: Ray Christiansen

Last Updated: 04/27/2023

Views: 6286

Rating: 4.9 / 5 (49 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Ray Christiansen

Birthday: 1998-05-04

Address: Apt. 814 34339 Sauer Islands, Hirtheville, GA 02446-8771

Phone: +337636892828

Job: Lead Hospitality Designer

Hobby: Urban exploration, Tai chi, Lockpicking, Fashion, Gunsmithing, Pottery, Geocaching

Introduction: My name is Ray Christiansen, I am a fair, good, cute, gentle, vast, glamorous, excited person who loves writing and wants to share my knowledge and understanding with you.