Wie wir alle wissen, codiert das Site-Layout tatsächlich ein Design-Layout. Um uns komfortabler zu machen, verwenden wir verschiedene Programme für die Arbeit mit Layouts. Photoshop? Skizze? Zeplin? Ja, das sind alles großartige Tools, aber heute werden wir über ein Produkt sprechen, mit dem es wirklich schön ist, das Layout einer Website zu erstellen. Es geht um Avocode.
Wenn Sie auf die Avocode-Website gehen, wird uns sofort angeboten, eine kostenlose 14-Tage-Frist zu erlassen. Nehmen Sie sich jedoch Zeit. Ich zeige Ihnen, wie Sie einen 30-Tage-Tarif für coole Tarife registrieren. Das Wichtigste zuerst.
Sie können direkt hier auf der Website arbeiten, ich empfehle jedoch, das Programm auf den Computer herunterzuladen. Wir finden die Registerkarte
Download , wählen das System, Download.
Nachdem wir das Programm geöffnet haben, müssen wir uns anmelden, sind aber noch nicht im System registriert. Wie oben erwähnt, müssen Sie dies so profitabel wie möglich tun.
Registrierung der Probezeit für 30 Tage.
Also zurück zur Seite.
Scrollen Sie nach unten und suchen Sie nach dem Link
Avocode vs. Zeplin und klicken Sie darauf. Zeplin ist eine Alternative zu Avocode.
Wir interessieren uns ganz unten auf der Seite, Twist suchen wir für diesen Block. Hier steht, dass Sie den Avacode 30 Tage lang kostenlos über diesen Link erhalten können, und sie fragen uns: "Worauf warten wir noch?" und wirklich was? Nachdem Sie alle Zweifel zurückgewiesen haben, klicken Sie auf die Schaltfläche und füllen Sie das Formular aus.
Und dann werde ich Sie sofort darauf hinweisen, dass, wenn Sie einen Monat lang keine Zeit haben, das Programm zu genießen, dieser Vorgang durch Registrieren einer weiteren E-Mail wiederholt werden kann. Natürlich können Sie diese Aktionen endlos wiederholen. Aber ich persönlich bezahle für den Avocode und berate Sie. Auf der anderen Seite können Sie als Anfänger Geld sparen. Es liegt an dir.
Wir bestätigen unsere E-Mail, indem wir auf den Link im Brief klicken und zur Bewerbung gehen. Gehen Sie sofort zum Menü und klicken Sie auf Ihren Spitznamen. Dann sehen wir auf der Registerkarte "
Abrechnung" , dass wir 30 Balltage haben, und selbst der coole, teure Unternehmensplan kostet übrigens 100 US-Dollar pro Monat. Freut euch. Das Hauptmerkmal dieses Tarifs ist, dass er für 5 Personen ausgelegt ist, dh Sie können vier weitere Slipper zu Ihrem Team einladen. Sie können dies auf der Registerkarte
Mitglieder tun. Weitere Informationen zu Tarifen finden Sie auf der Programmwebsite.
Übrigens, wenn Sie sich entscheiden, für das Programm zu bezahlen, vergessen Sie nicht, den Tarifplan auf einen einfacheren zu ändern. Wir gehen in den
Abrechnungsänderungsplan und hier ist der billigste durchaus geeignet. Danach müssen Sie eine Kreditkarte hinzufügen und 168 Grüns pro Jahr abrollen. Aber beeilen Sie sich nicht, nach einem Zeitraum von 30 Tagen bietet Avocode normalerweise an, die Einarbeitung für 1 US-Dollar durch dieselbe E-Mail zu verlängern. Zumindest funktioniert es heute.
Was bekommen wir für dieses Geld? Und warum ist Avocode so cool? Es ist Zeit zu sehen, was er weiß.
Arbeite mit dem Programm
Lassen Sie uns unser Testprojekt erstellen. Klicken Sie auf
Neues Projekt .
Einer der Hauptvorteile des Avocodes für den Layout-Designer sind die unterstützten Formate ohne Plugins. Und das für eine Sekunde
Photoshop (PSD) ,
Sketch ,
Adobe XD und
Illustrator . Sowie teilweise Integration mit
Figma . Was ist kein universeller Mähdrescher?
Neben der Tatsache, dass Dateien direkt geladen werden können, kann der Avocode über Plugins in den grafischen Editoren selbst sowie über
Dropbox synchronisiert werden. Ich bin es irgendwie gewohnt, Dateien hochzuladen.
Wir fügen also ein beliebiges Layout hinzu. Dazu können Sie die Datei entweder in diesen Bereich ziehen und auf der Festplatte auswählen. Nach dem Herunterladen können wir die Datei öffnen und über die Programmoberfläche sprechen, aber ich werde mit den allgemeinen Einstellungen beginnen. Klicken Sie auf unsere
Avatar - App-Einstellungen.
Zunächst werde ich auf die dunkle Seite von Theme Dark Power wechseln. Als nächstes kann ich den Standardordner für den Export von Bildern auswählen sowie die Bildoptimierung deaktivieren, das Anti-Aliasing deaktivieren, wenn das Layout gezoomt ist, und das Überschreiben des exportierten Bildes aktivieren. Und eine Reihe kleinerer Einstellungen, die ich nicht benutze. Tatsächlich gehe ich hier nur auf ein dunkles Thema ein und lasse alles andere so wie es ist.
Programmschnittstelle
Um mit dem Layout arbeiten zu können, benötigen wir die Registerkarte Inspizieren. Links sehen wir so etwas wie Ebenen wie in Photoshop. Sie können durch Klicken auf das Auge ausgeblendet und angezeigt werden. Links sehen wir eine Symbolleiste und ich benutze alle beiden - dies ist ein Lineal und eine Pipette. Deshalb:
Hand - Ermöglicht das Verschieben des Layouts mit gedrückter rechter Maustaste. Aber die Linie kann dasselbe mit der eingeklemmten Leertaste tun.
Pfeil (Auswahl auswählen) - Ermöglicht die Auswahl mehrerer Ebenen. Aber die Leitung kann genau das Gleiche tun.
Messer (Slice) - kann beim anschließenden Export des Bildes einen beliebigen Bereich auswählen, aber irgendwie habe ich ihn trotzdem nie benutzt.
Manchmal wird eine Pipette benötigt - sie kopiert den Farbcode des ausgewählten Bereichs.
Und schließlich der
Herrscher . Wenn Sie dieses Werkzeug auswählen, beginnt die Magie.
Zum Beispiel muss ich die Größe eines Objekts sowie den Abstand zu anderen Elementen kennen.
Dazu klicke ich einfach auf das Objekt, sehe sofort seine Abmessungen in Pixel, wenn ich über benachbarte Objekte schwebe, sehe ich sofort unterschiedliche Entfernungen, was beim Layout unglaublich praktisch ist.
Wenn die Abstände aus irgendeinem Grund nicht angezeigt werden, können Sie sie manuell messen, indem Sie die linke Maustaste gedrückt halten und zwischen den erforderlichen Objekten strecken. Die Höhe und Breite des ausgewählten Bereichs werden rechts im Informationsfenster angezeigt.
Gehen Sie nahtlos zur rechten Seite des Programms. Klicken Sie zuerst auf die oberste Ebene unserer Ebenen, und zwar auf den Dateinamen. Rechts sehen wir:
Ein Bild des gesamten Layouts, seiner Größe. Die Möglichkeit, einen Screenshot des Layouts hochzuladen, der für das Portfolio praktisch ist. Allgemeine Informationen: was, wo, wann. Das Folgende ist eine Liste aller im Layout verwendeten Farben, was nützlich ist, aber noch nützlicher ist eine Liste aller im Layout verwendeten Schriftarten.
Schriftarten werden normalerweise vom Designer zusammen mit dem Layout bereitgestellt. Dies ist jedoch nicht immer der Fall. Diese Liste hilft uns daher, die benötigten Schriftarten selbst zu finden.
Für fortgeschrittene Benutzer ist es außerdem möglich, verschiedene Variablen für sich selbst zu konfigurieren.
Der untere Streifen ist zwar klein, aber nicht weniger nützlich. Hier haben Sie den Maßstab des Layouts. Sie kann auch geändert werden, indem Sie die Steuerung gedrückt halten und das Mausrad drehen. Als nächstes haben wir das Tool zur Layoutüberprüfung für Pixel Perfect, dh Pixel für Pixel. Damit können wir dem Layout ein durchscheinendes Layout auferlegen und die Größen und Einrückungen überprüfen. Das Tool verfügt über eine Reihe nützlicher Einstellungen, z. B. Transparenz und Deaktivieren des Layouthintergrunds.
Der letzte Punkt sind Anleitungen. Hier können Sie die Designerhandbücher aktivieren oder eigene hinzufügen. Auch zwischen ihnen können Sie den Abstand messen.
Das Panel für das gesamte Layout wurde also auseinander genommen. Nun wollen wir sehen, was das Panel für ein separates Objekt uns bietet. Klicken Sie zum Beispiel auf das Bild. Rechts sehen wir das ausgewählte Objekt, seine Größe und eine Schaltfläche zum Exportieren des Bildes.
Klicken Sie auf. Hier können wir den Dateinamen, die Skalierung, das Suffix und das PNG JPEG SVG- und WEBP-Format einstellen. Unten können Sie den Ordner auswählen, in dem das Bild gespeichert werden soll. Sie können mehrere Bilder in eine Datei hochladen, indem Sie sie mit der Maus auswählen oder bei gedrückter
Umschalttaste auf die gewünschten Bilder klicken. Sie können auch mit der linken Maustaste auf das Bild klicken und das gewünschte Element auswählen.
Jetzt ist der lustige Teil der Text und andere Gestaltungselemente. Klicken Sie beispielsweise auf den Text. Rechts im
Styles- Fenster sehen wir das Allerheiligste - den gesamten fertigen CSS-Code unseres Elements! Wir können alles kopieren, nur einen Parameter kopieren, indem wir darauf klicken, und auch das Aussehen und den Typ unseres Codes konfigurieren. Und um unseren Text zu kopieren, doppelklicken Sie einfach mit der Maus darauf.
Ein Avocode kann die nativen Grafikeditoren für jedes Format fast vollständig ersetzen. Mit diesem Programm ist die Arbeit mit dem Layout ein Vergnügen und spart viel Zeit!
Basierend auf der Veröffentlichung von
Avocode für den Layout-Designer. So nutzen Sie Avocode 30 Tage kostenlos “aus der Reihe„
Programme und Tools für das Website-Layout “auf dem YouTube-Kanal„
Freelancer for Life “.