Our expirience

So erstellen Sie Ihre eigene Symbolschrift

07/07/18 / Longread

Moskau wurde nicht an einem Tag gebaut

Moskau wurde nicht an einem Tag gebaut und unsere Ikonen haben eine lange Geschichte.

Es ist kein Geheimnis für irgendjemanden, hoffe ich? dass es eine normale Praxis ist, Erfahrung und Arbeit auf dem Gebiet der Programmierung, des Designs und anderer IT-Bereiche im Zusammenhang mit geistigem Eigentum zu sammeln. In einer gewissen Zeit wurde es sogar ein angenehmer Bonus bei der Einstellung. Wenn Sie Ihre Code-Stücke, Design-Elemente oder andere Boni haben, die das Eintauchen und die Entwicklung in diesem Bereich beschleunigen, könnte es, wenn nicht entscheidend, dann einer der wichtigsten Faktoren sein.

Danach – vor dem Hintergrund des Erscheinens von Bibliotheken wie jQuery und viel später von Bootstrap und FontAwesome – verschwand das dringende Bedürfnis nach solchen Stücken. Aber im Gegenzug haben wir die Einzigartigkeit der Web-Produkte verloren. Hart und aggressiv sündigte ich und fuhr fort. Manchmal.

Für beliebte Produkte, die von der Community unterstützt werden, ist es einfach, es gibt gute Dokumentation und genug, um eine bequeme und geeignete Reihe von Funktionen zu studieren, oder zumindest nur eine Basis und voila.

In Bezug auf denselben Bootstrap, ehrlich gesagt, werde ich nicht genau sagen, an welchem Punkt, gibt es eine Möglichkeit, ein Projekt für mich selbst zu erstellen, als im Moment, wir sind glücklich zu verwenden, sammeln Projekte auf Gulp. Importieren Sie einfach die benötigten Komponenten und überschreiben Sie die Variablen (Wir verwenden nicht einmal custom.scss, um die Stile zu überschreiben).

Was ist der Prozess

Selbst als ich wegen des Zeitmangels des Arbeitgebers mit dem Zeichnen meiner Ikonen für verschiedene Großprojekte begann, musste ich den gleichen FA verwenden, weil er bereits existiert und alles vorhanden zu sein scheint. Deshalb war es irgendwie so:

  1. Ich habe ein Layout gezeichnet
  2. Ich fing an, Icons zu schneiden oder Sprites zu machen, aber alles endete fast ohne zu starten
  3. Stuck FA für Cross-Browser-Kompatibilität und Geschwindigkeit

Und das Projekt, vielleicht wäre es ein gemaltes Projekt geblieben, aber kürzlich haben wir den Markt geöffnet, und gleichzeitig wurde FA # 5 bedingt frei, was uns dazu brachte, unser Projekt ans Licht zu bringen.

Wie wurden Symbole erstellt?

Wie gesagt, die Geschichte der Ikonen begann damit, sie für verschiedene Projekte zu zeichnen. Das erste, in dem die Manifestation direkt offensichtlich war – die Neugestaltung der Site OsbornRus. Dann zeichnete ich sicher ein rege-compare-Icon. Und im Moment ist es fast unverändert geblieben. In gewisser Weise zum Standard für den Rest werden.

Jetzt, nach einer anständigen Zeit, nahm ich diese Symbole auf. Zuerst habe ich sie im ai-Format auf der Website veröffentlicht. Und dann begann der Spaß: Ich startete das Projekt Vivaldo – ein Musikplayer und die Kompatibilität des Site-Designs für den Künstler.

Das Projekt OsbornRus hat übrigens leider nicht das Licht gesehen. Die Seite wurde auf Bitrix gemacht, aufgehängt, welk und angeblich gestorben. Nein, ich lüge, nach ein paar Jahren sah er das Licht.

Kehren wir zur Realität zurück, im Vivaldo-Projekt habe ich nicht nur an einem Projekt gearbeitet, sondern sofort an mehr als vier Projekten.

Diese sind:

  1. Vivaldo
  2. FA-Kit – Bootstrap analog, aber leichter
  3. PH-Kit – in diesem Projekt wird ein wenig verwendet, da wir uns von der Stiftung entfernt haben, und die Basis ist ein Grundpfeiler zum Thema WP
  4. Icons Rage – kostenlose Icon-Set, der Held dieses Artikels

Also, über die Symbole

Ich fing einfach an, ein paar Icons zu zeichnen, die ich aus dem Projekt im Projekt verwendete. Sie waren nur ein paar Stücke und sie hatten wenig mit normalen professionellen Symbolen zu tun. Unter ihnen waren Symbole wie:

  1. Pfeile in alle vier Richtungen
  2. Chevrons beiseite
  3. Vergleichen Symbole für den Laden
  4. Korb-Symbol
  5. Und noch ein paar Stücke

Manchmal wurden sie ergänzt, aber sie hatten keine Systeme. Im Extremfall retteten mich Symbole mit Flaticon.

Im Allgemeinen zeichnete ich sie, zeichnete sie erneut und übermalte sie neu.

Das magische Gitter

Während ich nach Informationen darüber suchte, wie man diese verdammten Icons richtig zeichnet, habe ich nichts Sinnvolles gefunden. Leider muss ich zugeben, dass Designer, die cool zeichnen – fehlende Systeme: pure Emotionen. Es mag cool sein, aber persönlich bin ich eine Person, die versucht, alles dem System auszusetzen.

Und dann voila, ich habe das System gefunden.

Ehrlich gesagt, wenn ich eine neue Technik finde, frage ich sie zunächst nicht (wenn es keinen offensichtlichen Unsinn gibt), versuche ich zu verstehen.

In diesem Fall kam ich zu folgendem:

Icons grid Rage

Und dieses System, möchte ich bemerken, hat einen Platz zu sein. Obwohl ich zum Zeitpunkt des Schreibens noch nie das wahre Wesen dieses Gitters entdeckt habe. Höchstwahrscheinlich werden wir es später veröffentlichen, weil wir im Moment nicht planen, bei der Erstellung von Symbole aufzuhören. Oder wir werden unser eigenes erschaffen.

Zu den Pluspunkten des Rasters können Symbole hinzugefügt werden:

  1. Leichtigkeit der Konstruktion
  2. Skalierbarkeit
  3. Zumindest ein System

Im Minus:

  1. Das Raster ist kein Allheilmittel, wenn Sie eine Symbolschrift erstellen
  2. Es ist ratsam zu verstehen, was Sie tun

Wenn Sie eine eigene Symbolschrift erstellen möchten

Was wir weiter beschreiben werden, wird nicht empfohlen, als eine unbedingte Beschreibung von Handlungen wahrgenommen zu werden, sondern nur als unsere Erfahrung.

Um die gezeichneten Symbole korrekt anzuzeigen, müssen Sie folgende Empfehlungen beachten:

  1. Sie müssen entweder die Symbole für die Breite des Bereichs anpassen oder die Breite des Bereichs unter dem Symbol anpassen
  2. Für den Export zeichnen Sie Symbole mit mindestens 500 x 500 Pixel
    Beim Export müssen Sie entweder das Symbol optimieren, das es verzerren kann
  3. Wenn Sie Icons im Stil von Lineart zeichnen, können Sie die Größe anpassen, naja, fast.
    Wenn ich Symbole unter einem Maßstab von 600 bis 600 zeichnete, einige mit einem internen Strich, skalierte ich auf eine Höhe von 500px (in einigen Fällen auf die volle Höhe) und mit einem Standardhub von 500px in der Mitte, die Strichbreite ( in diesem Fall – 35px). Bei einem komplett externen Hub jeweils – 2 Hubschläge. 70px. Passen Sie Elemente durch die Logik der Dinge, zum Beispiel Chevron sollte wahrscheinlich weniger als das Listenelement, aber nicht unbedingt. Später kann dies in Stilen korrigiert werden.
  4. Vor dem Export den Hub und das Gesamtdesign zerlegen und die Kontur zu einem ungebrochenen zusammensetzen.

Und jetzt das Wichtigste: Infa-Weben, das erste Mal, dass du ein Iconicfont machst, wird Unsinn rauskommen. Komplett. Schließe zumindest deine Augen. Und Punktion.

So war es bei mir, die Problembereiche waren Armaturenbrett und Pfeile mit Pfeilen. Sie wurden breiter als der Rest der Gegend.

Merkmale des Exports

Allgemeines

Es gibt keinen einzigen Dienst für die Erstellung einer ikonischen Schriftart wie Iconmoon, aber obwohl die Schriftart scheinbar eine Opensource hat, möchte ich sie nicht in den Türmchen verschütten, wie es der Service bietet. Ich begann nicht einmal zu verstehen, aber ich sah einen Hinweis, dass er [die Schrift] öffentlich werden könnte, drehte sich um und ging.

Zweifellos ist der Weg, den ich wählte, schwerer, auf dem gleichen iconmoon gibt es eine Menge Dienstprogramme für das individuelle Anpassen jedes Symbols, und hier, mit Aufgabenläufern, wirst du mit der Tatsache konfrontiert, dass du zuerst alles richtig berechnen musst.

Aber es ist zum besseren, wie ich oben erwähnt habe – Quests mit der Berechnung sind die meisten, die notwendig sind.

Und jetzt über den Export. Als Hauptwerkzeug wählte ich Schluck mit Add-Ons:

  1. Gulp icon-font
    Enthält ein Bündel von Aufgaben, die Svg-Icons verarbeiten, du kannst alles rein auf sie anwenden, aber das ist nicht unsere Hauptaufgabe, also vielleicht nächstes Mal
  2. Gulp svg-sprites
    Im Gegensatz zur Schriftart gibt es Svg-Sprites und bessere Zeichen. Sie können als magischer Gebrauch bezeichnet werden, der Magie erzeugt. Und ist besser Schriftart gezeichnet.

Wie bereits erwähnt, müssen Sie entweder die Breite des Bereichs anpassen oder einige Multiplizitäten auswählen, für die Sie die Symbole anpassen müssen. Sie haben beispielsweise eine Höhe von 500 Pixeln und eine Breite von 500, 450, 175, wo Sie unter der Breite verschiedene Objekte in der Breite zeichnen. Unter dem schmalsten wird der Chevron oder Pfeil passen, und unter dem breitesten – das Symbol des Briefes.

Erfahren, fand ich heraus, dass es ideal ist – wenn Sie ein Symbol haben, das die gesamte Fläche einnimmt. Aber hier gibt es einen Nachteil, mit Adobe CC könnte versucht werden, den Export von Objekten zu verwenden:

Dieser Export schneidet den Exportbereich automatisch auf die Größe des exportierten Objekts. Aber das ist schlecht. Sie müssen bei 146% sicher sein, dass die Größe des Objekts ideal für die ikonische Schriftart ist.

Ich empfehle wirklich nicht, dieses Werkzeug zu benutzen. Bearbeiten Sie die Bearbeitungsbereiche selbst.

Weiter über den Unterschied zwischen Sprites und Icon Font:

Export Rage

Gulp iconfont

Hier ist unsere Konfiguration:

gulp.task('iconfont', function(done){
var iconStream = gulp.src(['source/svg/*.svg'])
.pipe(iconfont({ 
	fontName: 'rage-icons',
	normalize: false,
	prependUnicode: true,
	startUnicode: 0xE001,
	//fontHeight: 550,
	formats: ['ttf', 'eot', 'woff','truetype','svg','woff2'],
	copyright: 'iAmStudio',
	centerHorizontally: false,
	//ascent : 50,
	descent : 60,
}));
async.parallel([
function handleGlyphs(cb) {
	iconStream.on('glyphs', function(glyphs, options) {
		// Font css
		gulp.src('source/templates/font-rage.css')
			.pipe(consolidate('lodash', {
				glyphs: glyphs,
				fontName: 'rage-icons',
				fontPath: '../fonts/',
				className: 'rage',
			}))
			.pipe(gulp.dest('dist/css/'))
			.on('finish', cb);
		console.log(glyphs, options);
	});
},
function handleFonts(cb) {
	iconStream
		.pipe(gulp.dest('dist/fonts/'))
		.on('finish', cb);
}
], done);
});

Der Großteil der Schriftgenerierung befindet sich in der ersten iconStream-Variablen:

  1. fontName – Der Name der Schriftart, der Name wird in die Links und der Name der Schriften selbst eingetragen
  2. normalize – Standardmäßig ist es deaktiviert, aber hier spielte ich mit den Größen
  3. prependUnicode – Bei dieser Option kam plötzlich sowohl das Problem als auch die Rettung heraus. Um die Symbole (Hinzufügen, Entfernen) ihres Unicode nicht zu ändern, müssen Sie diese Option aktivieren. Dann wird der Quellcode am Anfang des Namens der Unicode-Datei hinzugefügt. Diesen Weg:
    Экспорт иконок Rage
    Das Problem ist, dass die so genannten Dateien dem Konzept "alles auf einmal" widersprechen. Immerhin habe ich für solche Fälle eine Datei im Illustrator und die benötigte Anzahl an Bearbeitungsbereichen. So können Sie alles auf einmal sehen. Für den Export muss jeder Zeichenflächenbereich mit seinen Namen im Ressourcenordner umbenannt werden. Dies ist ein echtes Problem, da das Erzeugen von Symbolen (Schluck-Sprites) ohne Präfixe benötigt wird. Die Lösung kam zum Absturz – ich erstellte zwei Dateien für den Export, eine mit dem Namen der Unicode-Installationsbereiche, die andere ohne.
  4. startUnicode – Wir sind zu einem persönlichen Fetisch geworden und können im Allgemeinen wirklich sparen, wenn Sie 2 oder mehr Zeichensätze im Projekt verwenden. Stellen Sie einfach den Maximalwert der vorherigen Schriftart ein und dieser wird dann wie von oben festgelegt. In der Tat, die Schriftarten sind unterschiedlich, aber wir haben uns im Allgemeinen nicht als nützlich erwiesen. Hergestellt in Schönheit, denn im Original ist ein anderer Wert nicht von Nullen.
  5. fontHeight – speichert, wenn Sie kleine Symbole haben und normalisieren aktiviert: true.
  6. centerHorizontaly – höchstwahrscheinlich wird kein Ergebnis geben.
  7. ascent – aus dem Bereich der professionellen Konstruktion von Schriften, unterlassen der Schriftart, kann speichern, wenn die Schriftgrößen unterschiedlich sind, Sie auf die Marken gebaut und Sie müssen es übereinstimmen.
  8. descent – Auch das Anheben der Schrift kann helfen.
  9. Als nächstes folgt die Erstellung von CSS-Stilen für die Arbeit von Icons. Wir haben die Rage-Klasse an das i-Tag gebunden, um die Font-Icons von svg mit derselben Klasse zu trennen.

Gulp svg-sprites

Diese Methode habe ich verwendet, weil die Fonts mit einem Bitmap-Bild gleichgesetzt werden können, ihre Zeichnung eindeutig lahm ist und Sie mehrere Fonts auf einmal sicher herunterladen müssen.

SVG-Zeichen können sehr bequem verwendet werden: Es ist einfach und die Zeichnung wird anständig sein. Außerdem gibt es eine Menge von Brötchen, im Gegensatz zu der Schriftart, das häufigste Beispiel ist, dass für die Svg-Zeichen können Sie explizit einen Strich in Stilen oder beim Aufruf angeben. Und zur gleichen Zeit können Sie es wie eine Schriftart verwenden, müssen Sie angeben:

  1. font-size: 1em – für den Elternteil
  2. height + width: 1em – Es ist notwendig, die Dimensionen anzugeben, andernfalls wird das Symbol abgeflacht und es wird nicht sichtbar sein
  3. fill: currentColor – dann erbt das Symbol die Farbeigenschaft.
gulp.task('symbols', function () {
gulp.src('source/symbols/*.svg')
	.pipe(svgSprite({
		mode:'symbols',
		svgId: 'rage-%f',
		preview: false,
	}))
	.pipe(gulp.dest('dist/'));
});

Config ist einfacher als für eine Schriftart:

  1. mode – verarbeitungsmodus, können Sie auch wählen und Sprites, aber das ist nicht unser Fall
  2. svgId – %f – In diesem Fall ist es der Name der Datei. Aus diesem Grund können Sie keine Exportfälle mit Unicode verwenden
  3. preview – erstellt eine HTML-Datei, in der alle Symbole aufgelistet sind.

Fast das Ende

Warum Svg ist besser als Schriftart

  1. Zeichnung
  2. Anpassung

Im Allgemeinen können Sie lange sprechen, aber es sollte beachtet werden, und die Vorteile des Symbols Schriftart, zumindest dies ist die niedrige Schwelle des Benutzereintrags. Verbunden und verwenden.

Nichtsdestotrotz erfordert Svg nicht viel Manipulation. Es muss direkt verbunden werden, indem man es am Anfang in den Körper einbaut, so dass es sicher funktioniert. Und dann ruf einfach die Konstruktion an:

<svg class="rage"><use xlink:href="#rage-name"/></svg>

Wichtig zu erinnern:

  1. Wenn Sie im Symbolcode explizit fill = "currentColor" angeben, können Sie ihn nicht mehr mit css beeinflussen, indem Sie einfach die color – Eigenschaft angeben
  2. Internet Explorer bereinigt den Cache und Edge verzehrt keine neuen Stile ohne Neustart

Wir hoffen, dass dieser Artikel Ihnen bei Ihren Bemühungen helfen wird.