So erstellen Sie eine Website mit Adobe Project Rome
Adobe hat kürzlich ein Projekt namens Rom gestartet, das eine Art All-in-One-Plattform für die Veröffentlichung von Inhalten sein soll. Mit dieser innovativen Anwendung können Sie Websites erstellen, Projekte drucken, interaktive PDFs erstellen und vieles mehr.
Heute werde ich Ihnen eine grundlegende Einführung für Anfänger in Rom geben, damit Sie sehen können, was es ist, wie man es benutzt und ob es für Sie richtig ist oder nicht.
Rom
In Adobes eigenen Worten ist Project Rome „Einfache, leistungsstarke All-in-One-Erstellung und Veröffentlichung von Inhalten für praktisch jeden.“ Wenn Sie denken, dass dies ein wenig vage ist, haben Sie Recht. Andererseits ist das gesamte Projekt ein wenig rätselhaft. Ist Rom die Zukunft von Photoshop? Ist es ein Wettbewerb um Dreamweaver oder InDesign?
Die Antwort lautet wirklich "keines der oben genannten". Nachdem Sie ein wenig damit gespielt haben, wird deutlich, dass Adobe versucht, einen anderen Markt als mit der Creative Suite anzusprechen. Während CS eine unglaublich teure Reihe leistungsstarker, professioneller Anwendungen ist, deren gründliches Erlernen Jahre (Jahrzehnte?) Dauern kann, soll Rom eine benutzerfreundliche Möglichkeit für nahezu jeden sein, umfangreiche Inhalte zu erstellen.
Bevor wir beginnen, sollten Sie auf der Rom-Website vorbeischauen und entweder die Desktop-Anwendung herunterladen oder die Web-App starten (ich werde die Desktop-Version verwenden).
Wieviel kostet das?
Rom ist derzeit in einer kostenlosen Vorschau verfügbar. Adobe hat offenbar noch keine Preisstrategie festgelegt und möchte sehen, wie Benutzer reagieren, bevor sie fortfahren. Sie können jetzt eine Kopie herunterladen, wissen aber nur, dass sie eines Tages wahrscheinlich deaktiviert wird und Sie entweder eine einmalige Lizenz oder sogar ein Abonnement erwerben.
Anfangen
Sobald Sie die Anwendung heruntergeladen haben, sollte beim Starten ein vertikaler Streifen von Schaltflächen auf Ihrem Desktop angezeigt werden.
Von hier aus können Sie die Standardvorlagen oder sogar eine schöne Galerie von vom Benutzer eingereichten Vorlagen durchsuchen, aber in diesen ist bereits viel los, sodass es für Lernzwecke besser ist, von vorne zu beginnen.
Klicken Sie auf die Schaltfläche "Neu erstellen", um eine ziemlich große Galerie möglicher Dokumentgrößen zu öffnen. Gehen Sie von hier aus zu "Leer für Bildschirm" und wählen Sie etwas im Ordner "Browsergrößen" aus. Ich habe 960 × 550 gewählt.
Treffen Sie Rom: Die Schnittstelle
Wenn Sie sich zum ersten Mal die Benutzeroberfläche von Rom ansehen, sieht es aus wie eine extrem vereinfachte Version von Photoshop. Anstelle eines endlosen Meeres von Paletten gibt es nur ein paar. In der Tat scheint es viel zu wenige zu geben. Dies liegt daran, dass Adobe anscheinend mit einigen neuen Ideen experimentiert, die Ihnen nur zeigen, was Sie sehen müssen, wenn Sie es sehen müssen, anstatt Ihnen die gesamte Enchilada auf einmal zu geben.
Das obige Bild zeigt, wie kahl der Bildschirm im Vergleich zu 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 bezeichnet diese als "Blätter" und zeigt sie oben links mit Vorschaubildern an.
Als erstes möchten wir ein „Master Sheet“ erstellen. Auf diese Weise können wir einige grundlegende Elemente einrichten, die auf jeder Seite angezeigt werden. Anstatt Elemente manuell auf jedem Blatt zu platzieren, werden Elemente im Hauptblatt automatisch auf Ihre anderen Blätter übertragen. Dies kann zunächst verwirrend sein, da auf einem Blatt häufig ein Element angezeigt wird, das Sie scheinbar nicht bearbeiten können. Dies liegt daran, dass das Element zwar auf diesem Blatt angezeigt wird, jedoch ein Hauptelement ist und Sie daher vor der Bearbeitung das Hauptblatt auswählen müssen.
Um ein Master Sheet zu erstellen, klicken Sie im Menü „View“ auf „Master Sheets anzeigen“. Dies sollte Ihr Blattmenü in zwei Abschnitte unterteilen: Blätter und Hauptblätter. Klicken Sie auf das kleine Pluszeichen, um ein paar zusätzliche reguläre Blätter hinzuzufügen. Neben der Miniaturansicht eines Blattes befindet sich ein kleines Rom-Symbol. Diese sind auf der Benutzeroberfläche verteilt und weisen darauf hin, dass hier ein verstecktes, kontextsensitives Menü angezeigt wird.
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 der grundlegenden Funktionen durch Erstellen eines Navigationsmenüs demonstrieren. Nehmen Sie zunächst das Textwerkzeug und zeichnen Sie eine Box. Geben Sie dann "Home" ein und wählen Sie im unten gezeigten Menü eine Schriftart aus, die Ihnen gefällt.
Hier sehen Sie diese Menüzauber wirklich in Aktion. Hier gibt es eine Menge Menüoptionen, jede mit einer Reihe von Untermenüs. Was Sie erhalten, ist eine Menge Funktionalität ohne all die Unordnung. Es ist definitiv gewöhnungsbedürftig und kann zeitaufwändig sein, aber wenn Sie es einmal herausgefunden haben, ist es nicht so schlimm. Ich mag die kleinen Schieberegler, mit denen verschiedene Eigenschaften wie die Schriftgröße angepasst werden können.
Wenn Sie die Größe und Schriftart herausgefunden haben, gehen Sie zum Menü „Link“ und stellen Sie den Link zum Blatt „Home“ ein.
Dadurch wird das Erscheinungsbild des Links automatisch mit einer Unterstreichung in Blau geändert. Da wir beides nicht wollen, müssen wir es reparieren. Das Zurücksetzen der Farbe in Schwarz ist einfach genug, aber die Unterstreichung war schwerer zu finden. Diese Option finden Sie im unten gezeigten Menü "Weitere Zeichenoptionen".
Hover-Effekt
Als nächstes möchten wir das Erscheinungsbild des Links ä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.
Gehen Sie bei ausgewähltem Textfeld im Menü "Erweitert" zu "Ereigniseinstellungen" und aktivieren Sie "Standardereignisse".
Sie sollten jetzt eine Option "Ereignisse" im Hauptmenü haben. Gehen Sie von hier aus zu "Mouse Enter" und "Set Property". Wählen Sie als Nächstes Ihr Textobjekt aus und setzen Sie die Eigenschaft auf Deckkraft. Stellen Sie den Wert schließlich auf 50% ein.
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, auf das wir jetzt stoßen, ist, dass der Text bei der Mauseingabe seine Farbe ändert, aber dauerhaft so bleibt. Um dies zu lösen, müssen wir am Maus-Exit ein weiteres Ereignis hinzufügen, das die Deckkraft auf 100% zurücksetzt. Siehe das Bild unten als Referenz.
Duplizieren des Home-Links
Nachdem wir unseren ersten Link so eingerichtet haben, wie wir es möchten, kopieren Sie ihn dreimal und fügen Sie ihn ein, um die Links "Info", "Portfolio" und "Kontakt" zu erstellen. Denken Sie daran, dass Sie den jeweiligen Text auswählen und dann die Links ändern müssen, um auf die entsprechenden Blätter zu verweisen.
Sie sollten die Objekte auch vertikal verteilen, um sicherzustellen, dass sie gleichmäßig verteilt sind. Wählen Sie dazu alle Textfelder aus und gehen Sie zum Menü Ausrichten.
Vorschau Ihrer Arbeit
Um festzustellen, ob Ihr Navigationsmenü ordnungsgemäß funktioniert, klicken Sie auf die kleine Monitortaste mit einer Wiedergabetaste oben auf dem Bildschirm. Dies sollte Ihnen eine Live-Vorschau Ihrer Website in Aktion geben.
Bewegen Sie den Mauszeiger über die Links, um sicherzustellen, dass sie funktionieren, und klicken Sie herum, um festzustellen, ob sich das Blatt ändert.
Die Objektpalette
Nachdem Sie einige Elemente auf der Seite haben, werfen wir einen Blick auf die Objektpalette. Dies entspricht der Ebenenpalette, die Sie in anderen Apps gewohnt 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.
Fertigstellen des Master Sheets
Da jede gute minimalistische Site ein Klischeekreis-Logo hat, kann unsere einfach nicht ohne eines bleiben. Wenn Sie sich schnell über eines lustig machen, bekommen Sie ein Gefühl für das Formwerkzeug. Beachten Sie, dass die Größe der Formen ohne Bildverschlechterung vollständig geändert werden kann. Rom eignet sich perfekt für die Arbeit mit Vektor- und Rasterobjekten.
Und damit sind wir mit unserem Master Sheet fertig. Diese Elemente werden ohne zusätzlichen Aufwand auf jeder Seite angezeigt.
Fertigstellen der Site und Exportieren
Wie ich bereits erwähnt habe, konnten wir mit der Navigation die meisten Funktionen abdecken, die ich zeigen wollte. Wir haben Links eingerichtet, Objekte positioniert und verteilt und Hover-Effekte erstellt.
Von hier aus sollten Sie alleine herumspielen und die anderen Seiten fertigstellen. 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 Blatt auswählen, bevor Sie Inhalte hinzufügen, damit Sie nicht ständig zum Master-Blatt hinzufügen.
Wenn Sie mit der Site fertig sind, haben Sie zwei grundlegende Optionen zum Exportieren. Der erste ist als Standort in Rom. Dadurch wird Ihre Website mit Ihrer Adobe-ID (vorerst kostenlos) auf einen von Adobe gehosteten Server hochgeladen. Auf diese Weise können Sie jedoch nichts damit anfangen. Ich bevorzuge es, es in eine SWF-Datei zu exportieren und die Option zum Erstellen einer HTML-Datei auszuwählen.
Auf diese Weise erhalten Sie eine funktionierende Live-Website, die Sie selbst erstellt haben, ohne eine Unze Code!
Meine Gedanken zu Rom
Nun kommt der Teil, an dem Sie wirklich interessiert sind. Können Sie Rom für tatsächliche Projekte verwenden? Um diese Frage zu beantworten, schauen wir uns die Vor- und Nachteile an.
Schauen wir uns zunächst die positive Seite an. Rom ist ein innovatives WYSIWYG, das keineswegs perfekt ist, sich aber sehr poliert und kraftvoll anfühlt. Die Lernkurve ist viel kleiner als bei den CS-Apps und sollte auf jeden Fall jeden ansprechen, der von dieser Suite eingeschüchtert ist. Darüber hinaus wird das immer illusorische Ziel erreicht, Nicht-Entwicklern das Erstellen einer funktionierenden Website ohne eine einzige Codezeile zu ermöglichen.
Trotz dieser Vorteile sehe ich mich nie in einem professionellen Kontext für Webprojekte. Die größte Hürde für mich ist, dass es so verdammt abhängig von Flash ist. Ich werde nicht mit einem Flash-Bashing-Rant beginnen, aber dies ist einfach eine unpraktische Verwendung der Technologie, egal ob Sie sie lieben oder hassen. Die Seite, die wir gerade erstellt haben, enthielt nur wenige Links und Bilder. Es gibt absolut keinen Grund, warum die resultierenden Dateien alles andere als reines HTML und CSS sein sollten. Ich kann verstehen, dass Adobe die Flash-Unterstützung einbauen möchte, behaupte jedoch nicht, dass ich mit diesem Tool Websites erstellen kann, wenn Sie nicht einmal eine Option für eine grundlegende Webausgabe haben.
Denken Sie daran, dass dieser Artikel Rom nur aus der Sicht des Webs betrachtete. Es ist möglicherweise immer noch ideal für die Entwicklung von Druckmaterialien und interaktiven PDFs. Tatsächlich ist es ein wirklich großartiges Werkzeug für Letzteres.
Fazit
Zusammenfassend lässt sich sagen, dass Sie Rom besuchen sollten, 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. 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, das tatsächlich Websites auf professioneller Ebene erstellt, lesen Sie unser Tutorial zu Flux 3. Wenn Sie CSS verstehen, ist Flux eine Killeranwendung, und ich habe keinen würdigen Rivalen gefunden.
Hinterlassen Sie unten einen Kommentar und teilen Sie uns Ihre Meinung zum Projekt Rom mit. Was hat Adobe in diesem Experiment richtig gemacht? Was haben sie falsch gemacht? Wir wollen von dir hören!
