Adobe hat kürzlich ein Projekt namens Rome gestartet, das als All-in-One-Plattform für die Veröffentlichung von Inhalten gedacht ist. Mit dieser innovativen Anwendung können Sie Websites erstellen, Projekte drucken, interaktive PDFs und vieles mehr.
Heute gebe ich Ihnen eine sehr einfache Einführung in Rom für Anfänger, damit Sie sehen können, was es ist, wie man es benutzt und ob es für Sie richtig ist oder nicht.
Rom
Mit den Worten von Adobe ist Project Rome "einfache, leistungsstarke Erstellung und Veröffentlichung von Inhalten für praktisch alle". Wenn Sie denken, dass dies etwas vage ist, haben Sie recht. Andererseits ist das gesamte Projekt etwas rätselhaft. Ist Rom die Zukunft von Photoshop? Ist es ein Wettbewerb um Dreamweaver oder InDesign?
Die Antwort ist wirklich "keine der oben genannten." Nachdem Sie ein wenig damit gespielt haben, wird klar, dass Adobe versucht, einen anderen Markt als mit der Creative Suite zu erreichen. Während CS ein unglaublich teurer Satz von leistungsstarken, professionellen Anwendungen ist, die jahrelang (Jahrzehnte?) Lang lernen können, ist Rom ein benutzerfreundlicher Weg für jedermann, um reichhaltige Inhalte zu erstellen.
Bevor wir loslegen, sollten Sie die Rom-Website besuchen und entweder die Desktop-Anwendung herunterladen oder die Web-App starten (ich verwende die Desktop-Version).
Wie viel kostet es?
Rom ist derzeit in einer kostenlosen Vorschau verfügbar. Adobe hat offenbar noch nicht über ihre Preisstrategie entschieden und möchte sehen, wie die Benutzer reagieren, bevor sie fortfahren. Sie können eine Kopie jetzt herunterladen, wissen aber nur, dass sie eines Tages wahrscheinlich deaktiviert wird und Sie entweder eine einmalige Lizenz kaufen müssen oder vielleicht sogar ein Abonnement.
Fertig machen
Sobald Sie die Anwendung heruntergeladen haben, sollte beim Starten der Software ein vertikaler Streifen von Schaltflächen auf Ihrem Desktop erscheinen.
Von hier aus können Sie die Standardvorlagen oder sogar eine schöne Galerie mit von Benutzern eingereichten Vorlagen durchsuchen. Diese haben jedoch bereits eine Menge zu bieten, so dass es für Lernzwecke besser ist, von vorne zu beginnen.
Klicken Sie auf? Neu erstellen? Klicken Sie auf diese Schaltfläche, um eine ziemlich große Galerie mit möglichen Dokumentgrößen zu öffnen. Von hier gehen Sie zu? Blank for Screen? und wählen Sie etwas in den? Browsergrößen? Mappe. Ich habe 960? 550 gewählt.
Meet Rome: Die Schnittstelle
Wenn Sie zum ersten Mal einen Blick auf die Rom-Benutzeroberfläche werfen, sieht es aus wie eine extrem vereinfachte Version von Photoshop. Anstelle eines endlosen Palettenmeeres gibt es nur ein Paar. In der Tat scheint es viel zu wenig zu sein. Dies liegt daran, dass Adobe scheinbar mit einigen neuen Ideen experimentiert, die Ihnen nur das zeigen, was Sie sehen müssen, wenn Sie es sehen müssen, anstatt Ihnen die ganze Enchilada auf einmal zu geben.
Das Bild oben zeigt, wie nackt der Bildschirm mit dem ist, was wir in der Creative Suite gewohnt sind. Wir werden uns jeden Abschnitt unten genauer ansehen, während wir in unser einfaches Projekt eintauchen.
Blätter
Die Site, die wir erstellen werden, wird mehrere Seiten haben. Rom bezieht sich auf diese als? Sheets? und zeigt sie oben links mit Miniaturansichten an.
Als erstes möchten wir ein "Master Sheet" erstellen. Dadurch können wir einige grundlegende Elemente einrichten, die auf jeder Seite angezeigt werden. Anstatt Elemente manuell auf jedes Blatt zu legen, werden Elemente im Masterblatt automatisch auf Ihre anderen Blätter übertragen. Dies kann zunächst verwirrend sein, da auf einem Arbeitsblatt häufig Elemente angezeigt werden, die Sie scheinbar nicht bearbeiten können. Dies liegt daran, dass das Element zwar auf diesem Arbeitsblatt angezeigt werden kann, jedoch ein Masterelement ist und Sie daher vor dem Bearbeiten das Hauptblatt auswählen müssen.
Um ein Masterblatt zu erstellen, klicken Sie auf? Masterblätter anzeigen? in der Ansicht? Speisekarte. Das Menü "Blätter" sollte in zwei Abschnitte unterteilt werden: Blätter und Vorlagenblätter. Klicken Sie auf die kleine Plus-Schaltfläche, um einige zusätzliche reguläre Blätter hinzuzufügen. Neben der Miniaturansicht eines Blatts befindet sich ein kleines Rom-Symbol. Diese werden in der Benutzeroberfläche verstreut angezeigt, was darauf hinweist, dass es hier ein verstecktes, kontextsensitives Menü gibt.
Verwenden Sie dieses kleine Flyout-Menü, um Ihre Blätter Home, About, Portfolio und Contact zu benennen.
Navigationsmenü
Da wir dies als einfache Einführung in die App beibehalten, können wir viele grundlegende Funktionen durch das Erstellen eines Navigationsmenüs hervorheben. Um zu beginnen, schnappen Sie sich das Textwerkzeug und zeichnen Sie eine Box. Dann tippen Sie? Home? und verwenden Sie das unten abgebildete Menü, um die gewünschte Schriftart auszuwählen.
Hier sieht man wirklich diese Menümagie in Aktion. Es gibt eine Menge Menüoptionen, jede mit einer Reihe von Untermenüs. Was Sie bekommen, ist eine Menge Funktionalität ohne all das Durcheinander. Es ist definitiv gewöhnungsbedürftig und kann zeitaufwändig sein, aber wenn man es erst einmal herausgefunden hat, ist es nicht so schlimm. Ich mag wirklich die kleinen Schieberegler, mit denen verschiedene Eigenschaften wie die Schriftgröße angepasst werden können.
Sobald Sie die Größe und die Schriftart ermittelt haben, gehen Sie zum Link. Menü und setzen Sie den Link auf? Home? Blatt.
Dadurch wird das Erscheinungsbild des Links automatisch mit einer Unterstreichung in Blau geändert. Da wir keines von diesen wollen, müssen wir es reparieren. Die Farbe wieder in Schwarz umzuwandeln ist leicht genug, aber die Unterstreichung war schwerer zu finden. Diese Option befindet sich unter? Mehr Zeichenoptionen? Menü unten gezeigt.
Hover-Effekt
Als Nächstes möchten wir das Erscheinungsbild der Verknüpfung ändern, wenn der Benutzer mit dem Cursor darüber fährt. Dies ist nicht gerade ein intuitiver Prozess und ich habe ein paar Minuten gebraucht, um das herauszufinden.
Wenn Ihr Textfeld ausgewählt ist, gehen Sie zu? Ereigniseinstellungen? in der? Advanced? Menü und aktivieren Sie? Standard Events?
Sie sollten jetzt ein? Events? Option im Hauptmenü. Von hier aus gehen Sie zu? Mouse Enter? und? Set Property? Wählen Sie anschließend Ihr Textobjekt aus und setzen Sie die Eigenschaft auf Deckkraft. Setzen Sie schließlich den Wert auf 50%.
Dadurch wird der Text auf 50% seiner ursprünglichen Deckkraft verkleinert, wenn jemand darüber schwebt.Ich hätte gerne einfach die Farbe eingestellt, aber diese Option scheint nicht im Ereignismenü zu erscheinen.
Das Problem, dem wir jetzt begegnen, ist, dass der Text bei Mouse Enter die Farbe ändert, jedoch dauerhaft so bleibt. Um dieses Problem zu lösen, müssen Sie ein weiteres Ereignis in Mouse Exit hinzufügen, das die Deckkraft auf 100% zurücksetzt. Siehe die Abbildung unten für eine Referenz.
Duplizieren des Home Links
Jetzt, da wir unseren ersten Link eingerichtet haben, können Sie ihn nach Belieben dreimal kopieren und einfügen, um die Links "Über", "Portfolio" und "Kontakt" zu erstellen. Denken Sie daran, dass Sie den Text für jeden auswählen müssen, dann gehen Sie hinein und ändern Sie die Links, um auf die entsprechenden Seiten zu verweisen.
Sie sollten die Objekte auch vertikal verteilen, um sicherzustellen, dass sie gleichmäßig verteilt sind. Markieren Sie dazu alle Textfelder und wählen Sie das Menü Ausrichten.
Vorschau Ihrer Arbeit
Klicken Sie auf die kleine Überwachungsschaltfläche mit einer Wiedergabeschaltfläche am oberen Rand des Bildschirms, um festzustellen, ob Ihr Navigationsmenü ordnungsgemäß funktioniert. Dies sollte Ihnen eine Live-Vorschau Ihrer Site in Aktion geben.
Bewegen Sie den Mauszeiger über die Links, um sicherzustellen, dass sie funktionieren, und klicken Sie auf, um zu sehen, ob sich das Blatt ändert.
Die Objektpalette
Nachdem Sie nun einige Elemente auf der Seite haben, werfen wir einen Blick auf die Palette "Objekte". Dies entspricht der Ebenen-Palette, die Sie in anderen Apps gewöhnt sind, und ist im Wesentlichen nur eine interaktive Liste aller Elemente auf der Seite.
Beachten Sie, dass dies viel einfacher ist als die Photoshop-Ebenenpalette. Es gibt keine Maskierung, Ebeneneffekte usw.
Beenden des Master Sheets
Da jede gute minimalistische Website ein Klischee-Logo hat, kann unsere Website nicht ohne eines bleiben. Wenn Sie sich schnell verspotten, erhalten Sie ein Gefühl für das Formwerkzeug. Beachten Sie, dass die Formen vollständig verkleinert werden können, ohne dass das Bild beeinträchtigt wird. Rome eignet sich hervorragend für die Arbeit mit Vektor- und Rasterobjekten.
Und damit sind wir mit unserem Master Sheet fertig. Diese Elemente werden auf jeder Seite ohne zusätzlichen Aufwand angezeigt.
Fertigstellen der Site und Exportieren
Wie ich bereits erwähnt habe, erlaubte uns die Navigation, die meisten Funktionen abzudecken, die ich zeigen wollte. Wir bauen Links, positionieren und verteilen Objekte und erstellen Hover-Effekte.
Von hier aus sollten Sie alleine herumspielen und die anderen Seiten beenden. Versuchen Sie, ein Bild einzufügen, mit Textabschnitten zu arbeiten und möglicherweise sogar ein Raster zu erstellen. Stellen Sie sicher, dass Sie das entsprechende Arbeitsblatt auswählen, bevor Sie Inhalte hinzufügen, damit Sie nicht weiter zum Hauptblatt hinzufügen.
Wenn Sie mit der Site fertig sind, haben Sie zwei grundlegende Optionen zum Exportieren. Der erste ist wie ein Standort in Rom. Dadurch wird Ihre Site mit Ihrer Adobe-ID (derzeit kostenlos) auf einem von Adobe gehosteten Server hochgeladen. Sie können jedoch auf diese Weise nichts damit anfangen, also bevorzuge ich es in eine SWF-Datei zu exportieren und die Option zum Erstellen einer HTML-Datei auszuwählen.
Dadurch erhalten Sie eine funktionierende Live-Website, die von Ihnen ganz ohne Code erstellt wurde.
Meine Gedanken zu Rom
Nun kommt der Teil, an dem Sie wirklich interessiert sind. Können Sie Rom für aktuelle Projekte verwenden? Um diese Frage zu beantworten, betrachten wir die Vor- und Nachteile.
Lassen Sie uns zunächst die positive Seite betrachten. Rome ist ein innovativer WYSIWYG, der keineswegs perfekt ist, sondern sich poliert und kraftvoll anfühlt. Die Lernkurve ist viel kleiner als bei den CS-Apps und sollte jeden ansprechen, der von dieser Suite eingeschüchtert wird. Außerdem wird das immer illusorische Ziel erreicht, dass Nicht-Entwickler eine funktionsfähige Website ohne eine einzige Codezeile erstellen können.
Trotz dieser Vorteile sehe ich Rom jedoch nicht in einem professionellen Kontext für Webprojekte. Die größte Hürde ist für mich, dass es so sehr auf Flash angewiesen ist. Ich werde nicht in einen Flash-Bashing-Schrei einsteigen, aber dies ist einfach eine unpraktische Verwendung der Technologie, egal ob Sie sie lieben oder hassen. Die Seite, die wir gerade aufgebaut haben, enthielt nur einige Links und Bilder. Es gibt absolut keinen Grund, dass die resultierenden Dateien etwas anderes als reines HTML und CSS sein sollten. Ich kann verstehen, dass Adobe Flash-Unterstützung bietet. Ich behaupte jedoch nicht, dass ich mit diesem Tool Websites erstellen kann, wenn Sie nicht einmal eine Option für eine einfache Webausgabe haben.
Beachten Sie, dass dieser Artikel Rom nur aus Web-Sicht betrachtet hat. Es ist möglicherweise immer noch ideal für die Entwicklung von Druckmaterialien und interaktiven PDF-Dateien. Tatsächlich ist es tatsächlich ein wirklich tolles Werkzeug für Letzteres.
Fazit
Zusammenfassend lässt sich sagen: Wenn Sie der Webentwicklung völlig fremd sind und selbst eine schnelle Website erstellen müssen, ohne jemanden einzustellen oder 15 Bücher zu lesen, sollten Sie sich Rom ansehen. Es ist ziemlich einfach zu erlernen und auszuführen, unabhängig von Ihrem Fachwissen.
Wenn Sie jedoch auf dem Markt nach einem robusten und benutzerfreundlichen WYSIWYG suchen, der tatsächlich professionelle Websites erstellt, lesen Sie unser Tutorial zu Flux 3. Wenn Sie CSS verstehen, ist Flux eine Killer-Anwendung, und ich habe keine würdige Konkurrenz gefunden.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie über das Projekt Rom denken. Was hat Adobe in diesem Experiment richtig gemacht? Was haben sie falsch gemacht? Wir wollen von dir hören!