Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Web Design

Erstellen Sie ein Werbe-Wireframe für die iPhone App-Website in Fireworks

by
Read Time:17 minsLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Wireframing ist ein nützlicher Teil des Website-Designprozesses. Es ist großartig, diese Planungsphase zu trennen und die Seitenpositionierung, den Abstand, das Layout und andere Elemente wie Textgröße und -ton zu bestimmen, bevor Sie in Photoshop springen, um Farbe, Textur, Bilder und Effekte hinzuzufügen und Ihr Design zu verbessern.

Fireworks ist ein großartiges Werkzeug zum Erstellen eines Drahtgitters. Obwohl es mit Photoshop nicht perfekt funktioniert, können Sie es dort exportieren und dann Ihr Drahtgitter ausbauen. Wir werden den Entwurfsprozess zum Erstellen eines Drahtgitters für eine iPhone-Anwendungswebsite in Fireworks behandeln. Für diejenigen unter Ihnen, die mit diesem Programm nicht vertraut sind, ist es ein guter Ausgangspunkt, um damit Ihre Webdesign-Projekte zu gestalten. Dies ist ein erster Teil einer mehrteiligen Serie und wird Spaß machen!

Vorschau des endgültigen Bildes

Unten finden Sie das Drahtmodell, auf das wir hinarbeiten. Hier können Sie die Drahtmodellversion in voller Größe anzeigen. Möchten Sie Zugriff auf die vollständigen Quelldateien und herunterladbaren Kopien aller Lernprogramme, einschließlich dieses? Bekommen Sie Vector Plus für nur 9 US-Dollar pro Monat .

Tutorial Details

  • Programm: Feuerwerk CS4
  • Schwierigkeit: Mittelstufe
  • Geschätzte Fertigstellungszeit: 1 Stunde
finalfinalfinal

Vorteile von Wireframing

Das Erstellen von Wireframes als separate Phase in Ihrem Website-Designprozess bietet zahlreiche Vorteile. Hier sind einige davon:

  • Wireframes eignen sich hervorragend zum Erstellen von Layouts, Planen von Funktionen und Organisieren der Informationen Ihrer Website.
  • Mit Wireframes können Sie zahlreiche Positionierungen, Funktionsoptionen und die schnelle Zusammenarbeit von Elementen auf der Seite (oder zwischen Seiten) untersuchen.
  • Mithilfe von Wireframes können Sie sicherstellen, dass die Funktionalität untersucht wird, bevor zeitaufwändige Arbeiten zur Pixelperfektion durchgeführt werden.
  • Wireframes begrenzen die Option und zielen auf Ihren Fokus ab, wodurch Ihre Layout-Designs verbessert werden. Durch das Entfernen von Optionen wie Stil und Farbe können Sie sich auf Dinge wie Positionierung, Größe und Hierarchie konzentrieren.
  • Mit Wireframes können Sie das grundlegende Design von Seiten erarbeiten. Sie können die Position der Elemente, die Textgröße und den Ton (Wetter hell oder dunkel) festlegen, bevor Sie an anderen Designdetails arbeiten.
  • Mithilfe von Wireframes können Sie sicherstellen, dass Layouts, Funktionen und andere Elemente abgemeldet sind, bevor Sie mit dem zeitaufwändigen pixelgenauen Design fortfahren.

Auswahl Ihres Wireframing-Werkzeugs

Es gibt eine ganze Reihe von Programmen, die Webdesigner für das Wireframing von Websites verwenden können. Einige Kriterien für die Auswahl eines Programms für ein bestimmtes Projekt sind: Ihre Vertrautheit mit dem Programm, Ihre Fähigkeit, schnell darin zu arbeiten, die Funktionalität des jeweiligen Programms, seine Anpassungsfähigkeit an das jeweilige Projekt, seine Fähigkeit, wiederverwendbare Elemente zu speichern und Flexibilität für Änderungen.

Möglicherweise möchten Sie ein Programm außerhalb der Adobe-Familie verwenden, z.B. Omni Graffle, und es gibt sicherlich auch andere. Wenn Sie ein Programm in der Adobe Suite für das Wireframing verwenden möchten, obwohl die Fireworks-Regeln oberste Priorität haben.

Sie können Photoshop verwenden, obwohl die Arbeit mit Wireframing langsamer ist und es an mehrseitigen Funktionen und anderen Funktionen mangelt, mit denen Fireworks große oder kleine Websites schnell planen kann. Ich habe Anfang 2008 einen Artikel über die Verwendung von Illustrator zum Erstellen von Wireframing geschrieben (eher ein Proof of Concept als eine Empfehlung). Es ist zwar möglich, diesen Zweck zu verwenden, es fehlen jedoch die Werkzeugs, die Fireworks für das Wireframing zur Verfügung hat. Ich empfehle in den meisten Fällen die Verwendung von Fireworks für Wireframing. Es ist wirklich gut für diesen Zweck gebaut.

Feuerwerk verwenden

Wir verwenden Fireworks für dieses Projekt, da es schnell zu bearbeiten ist. Außerdem können Sie mit Fireworks problemlos Boxen erstellen, positionieren, Text hinzufügen, abgerundete Ecken hinzufügen und schnell Layouts erstellen. Es ist für die Webentwicklung und das Prototyping eingerichtet. Wenn Sie Kästchen zeichnen, werden diese automatisch an Pixeln ausgerichtet. Dies ist ohne die erweiterten Funktionen des Programms zu nutzen.

Es ist auch möglich, nach Abschluss des Drahtgitters nach Photoshop zu exportieren. Dies ist ein idealer Workflow, wenn beim endgültigen Entwurf Details am besten in Photoshop erstellt werden. Es gibt einige Probleme, die ich bei der Integration des Workflows von Fireworks in Photoshop in der nächsten Version sehen möchte.

Beginnen wir nun mit der Planung unseres Projekts und dem Aufbau unseres Drahtgitters.

Schritt 1 - Definieren Ihres Projektumfangs

Bevor Sie zu Fireworks springen und mit dem Erstellen einer Website beginnen, müssen Sie einige Schritte ausführen. Der erste ist natürlich die Definition Ihres Projekts, des darin enthaltenen Inhalts, seines Zwecks usw. Sobald Sie dies mit dem Kunden geklärt oder Ihren Fokus eingeschränkt haben, wenn es sich um ein persönliches Projekt handelt, ist es Zeit, Nachforschungen anzustellen.

Für dieses fiktive Projekt erstellen wir eine Werbewebsite für iPhone-Anwendungen für Aurora, eine hypothetische iPhone-App zum Beleuchten Ihres iPhones mit Aurora Borealis-Lichtmustern. Die Idee ist, dass dies eine Seite eines größeren Projekts für ein Unternehmen ist, das mehrere iPhone-Apps verkauft. Wir konzentrieren uns auf diese eine Seite für dieses Tutorial.

Schritt 2 - Visuelle und funktionale Forschung

Als Designer beschäftigen wir uns von Anfang an etwas mit Stil. Möglicherweise möchten Sie sich Notizen zu Stilen machen, auf die Sie bei Ihrer visuellen Recherche stoßen, oder ein Moodboard erstellen. Unser Hauptaugenmerk beim Erstellen eines Drahtgitters liegt jedoch auf der Definition unseres Layouts und unserer Funktionalität (ohne Rücksicht auf Farbe oder Stil an dieser Stelle).

Für dieses Projekt habe ich eine Reihe von iPhone-Anwendungsseiten durchgesehen. Mir ist aufgefallen, dass es einige allgemeine Funktionen gibt, die meiner Meinung nach zum Verkauf einer App beitragen würden. Ich bin auf einige Layouts gestoßen, die mir gefallen haben. Hier sind einige davon:

Ich mochte das sekundäre Menü bei Tapulous. Es gab einige andere Websites, auf denen mehrere App-Symbole vertikal ausgeführt wurden. Dies hat den Vorteil, dass sie unbegrenzt viele Apps hinzufügen können und das Menü dazu passt. Ich mochte jedoch den einfachen Zugriff, wenn diese Website horizontal nach oben ausgeführt wird, wie diese Website tut.

tapuloustapuloustapulous

Die Website Tapbots hat einige Elemente, die auf vielen der erfolgreicheren iPhone-App-Werbeseiten häufig vorkommen. Sie hat ein großes iPhone-Bild mit einer eingebetteten Videodatei, die die App in Aktion zeigt. Sie enthält eine übersichtliche Funktionsliste, Testimonials und andere Inhalte in einem organisierten Raster, Miniaturansichten zu größeren Screenshots und einen Link zum iPhone App Store, der sich deutlich von anderen abhebt.

tapbotstapbotstapbots

Die Sonico Mobile-Site verfügt auch über eine sekundäre Navigation aus horizontalen Symbolen, die mir gefallen hat. Ich mochte auch die Nutzung des Werbebereichs und wie das vertikal stehende iPhone diesen horizontalen Werbebereich auflöste. Die Art und Weise, wie sie die Preise aus dem Werbebereich abgebrochen haben, ist ebenfalls gut gelungen.

sonicosonicosonico

Ich bin sicher, ich könnte mehr Websites finden, die das Design beeinflusst haben, aber diese sind diejenigen, die für das grundlegende Layout der Website am meisten zusammengefügt haben. Zu diesem Zeitpunkt habe ich eine gute Vorstellung davon, wie die Site in meinem Kopf aussehen soll. Jetzt muss ich es auf Papier bringen.

Schritt 3 - Skizzieren

Sie können die Skizze unten sehen. Ich mache oft mehrere Skizzen, um verschiedene Layouts auszuprobieren, was sehr schnell geht, wenn ich mit Bleistift und Papier roh arbeite, aber in diesem Fall fühlte es sich direkt nach dem ersten Entwurf an, also war ich fertig. Beachten Sie, dass ich das Problem sowohl visuell als auch verbal anspreche, Notizen mache und Funktionen aufliste, die ich sehen möchte.

Denken Sie daran, dass sich die Dinge ändern können, wenn Sie in Fireworks von Skizze zu Drahtmodell wechseln. Die Skizze hilft jedoch dabei, Ihre Kernideen auf den Punkt zu bringen und Ihre ersten Gedanken zu erarbeiten.

sketchsketchsketch

Schritt 4 - Einrichten Ihres Dokuments

Nachdem wir wissen, was wir erstellen werden, richten wir unser Dokument ein. Ich entschied mich für das 960 Grid System als Grundlage für das Design. Jetzt ist es nicht unbedingt wichtig, ob dieses Framework am Ende überhaupt zum Codieren verwendet wird, aber es ist ein Raster, das bereits eingerichtet ist, mit dem man leicht arbeiten kann und von dem ich weiß, dass es in die meisten Monitore passt, daher verwende ich es häufig für Entwerfen.

Laden Sie das 960 Grid System herunter. Entpacken Sie es, wählen Sie in diesem Ordner Vorlagen > Feuerwerk und öffnen Sie das Dokument "960_grid_12_col.png" in Feuerwerk (das PNG ist eine mehrschichtige Feuerwerksdatei).

Gehen Sie zu Ändern > Leinwand > Leinwandgröße und ändern Sie die Leinwandgröße auf 1060 Pixel Breite und 1500 Pixel Höhe. Klicken Sie nun in der Ebenenpalette auf den Ebenenordner "12 Col Grid". Entsperren Sie es, wählen Sie dann alle rosa Spalten aus, strecken Sie sie auf die gesamte Länge des Dokuments und sperren Sie den Ebenenordner erneut.

Gehen Sie nun zu Datei > Speichern, wählen Sie, wo es platziert werden soll, und nennen Sie es "wireframe.png".

doc_setupdoc_setupdoc_setup

Schritt 5 - Organisieren Ihrer Ordner

Lassen Sie uns nun unsere Ebenen einrichten, um die Organisation unserer Datei zu unterstützen. Wir werden im Laufe der Zeit Änderungen vornehmen, aber dies ist ein guter Anfang. Folgen Sie dem Screenshot unten. Beachten Sie, dass die "Webebene" nicht für dieses Projekt verwendet wird, aber nicht aus Fireworks gelöscht werden kann.

layers_setuplayers_setuplayers_setup

Schritt 6 - Beginnen Sie mit der Erstellung des Layouts

Das Erstellen eines Drahtgitterlayouts ist ein organischer Prozess. Beziehen Sie sich auf Ihre Skizze und beginnen Sie zuerst mit den größten Elementen. Wir beginnen mit der Platzierung unserer Hintergründe für unsere Hauptabschnitte. In einigen Abschnitten wird der Hintergrund der Site verwendet.

Verwenden Sie das Rechteck-Werkzeug (U), um die Hintergründe "Header" (80 Pixel Höhe) und "Boden" (360 Pixel Höhe) zu erstellen, die sich über die gesamte Breite unserer Website erstrecken. Erstellen Sie auch unseren "Promotion" -Hintergrundbereich (der Platz für unsere sekundäre Navigation lässt) und er ist 940 Pixel breit (die Größe unseres Hauptdokumentbereichs mit 10 Pixel Rändern auf jeder Größe) und 280 Pixel hoch.

begginning_layoutbegginning_layoutbegginning_layout

Einer der Vorteile der Arbeit mit Fireworks ist der Eigenschafteninspektor. Ich habe dieser Box vom Inspektor eine Rundheit von 10% gegeben, was gut aussieht. Beachten Sie, dass Sie vermeiden möchten, die Größe Ihrer abgerundeten Felder manuell zu ändern, da dadurch die Krümmung des Felds beeinträchtigt wird. Verwenden Sie stattdessen die Felder Breite und Höhe im Eigenschafteninspektor, um die Größe anzupassen.

box_propertiesbox_propertiesbox_properties

Schritt 7 - Hinzufügen der Navigation

Beginnen wir mit den Bereichen "header" und "secondary_nav". Viele dieser Bereiche bilden die Haupt- und Nebennavigation sowie einige andere Details. Platzieren Sie zuerst den Site-Namen auf der linken Seite unseres "Headers". Dies ist ein Platzhalter für das endgültige Logo-Design.

Beginnen Sie, indem Sie den Navigationstext mit dem Textwerkzeug (T) in der Ebene "header" platzieren und eine serifenlose Standardschrift wie Helvetica, Myriad Pro oder eine beliebige Schriftart verwenden. Möglicherweise möchten Sie bei webfreundlichen Schriftarten bleiben. Ich stellte den Typ auf 13pt mit einer schwarzen Farbe ein und machte ihn fett. Fügen Sie dann abgerundete Felder hinzu, die 26 Pixel hoch und entsprechend breit sind. Stellen Sie den Abstand nach Belieben ein und richten Sie die Felder wie gezeigt an der rechten Führungslinie aus. Beachten Sie, wie die ausgewählte Navigation mit dunklem Hintergrund und weißem Text dargestellt wird.

Fügen Sie nun Felder für die sekundäre Navigation hinzu. Erstellen Sie jedes App-Symbolfeld mit einer Größe von 57 x 57 Pixel und einer starken Rundheit. Lassen Sie Platz für eine weitere Box mit einer Breite von 90 Pixel und einer Höhe von 100 Pixel, die hinter die Symbolnavigation passt und zwischen denen jeweils Platz ist. Fügen Sie Namen unter jedem Symbol hinzu, das auf 10pt, schwarz und fett eingestellt ist. Außerdem habe ich eine Platzhaltergrafik für eine rechtsbündig angeordnete Standard-App Store-Schaltfläche hinzugefügt, die einen Aufruf zum Handeln und eine gewisse Legitimität hinzufügt.

main_navmain_navmain_nav

Schritt 8 - Fertigstellung des Werbebereichs

Der erste Schritt besteht darin, zwei Boxen mit denselben Methoden wie oben beschrieben zu erstellen. Das große rechts stellt einen Bereich dar, in dem ein Bild eines iPhones abgelegt wird, dessen Video dem Bildschirm von hinzugefügt werden kann. Das untere Feld ist unser Hauptaufruf zum Handeln.

Jetzt hat diese Schaltfläche ungefähr die gleiche Größe wie die Standard-App Store-Schaltfläche und beide sind mit derselben Stelle verknüpft (sie haben eine ähnliche Funktion). Dies mag sich wie ein Overkill im Drahtmodell anfühlen, aber mit Farbe und anderen Details kann dies funktionieren, sobald wir das endgültige Design erstellt haben. Dies ist jedoch zu beachten.

Ich habe das Gefühl, dass der Standard-Button ein wenig Glaubwürdigkeit verleiht, und wir können den anderen Button stilistisch so behandeln, dass er mehr hervorsticht und das Auge als Hauptaufruf zum Handeln auf sich zieht.

Beachten Sie, wie diese Felder den Hintergrund des Werbebereichs überlappen. Diese Art von Layout hebt diese beiden Elemente wirklich auf der Seite hervor.

promo_boxespromo_boxespromo_boxes

Erstellen wir einen Bereich, in dem der Preis der App angegeben wird. Erstellen Sie zuerst eine Box mit dem Rechteck-Werkzeug (U). Halten Sie beim Erstellen der Box die Umschalttaste gedrückt, um ein perfektes Quadrat zu erhalten. Gehen Sie voran und machen Sie diese 170px breit und 170px hoch.

Drücken Sie nun Befehlstaste + T, halten Sie die Umschalttaste gedrückt und drehen Sie das Quadrat in einen Winkel von 45 Grad. Richten Sie es dann wie unten gezeigt aus, sodass es gleichmäßig über dem Hintergrund des Werbebereichs platziert wird. Kopieren Sie nun den Hintergrund des Werbebereichs (Befehl + C) und fügen Sie ihn ein (Befehl + V), wodurch in Fireworks automatisch eine Kopie eingefügt wird.

Wählen Sie nun das Quadrat und den Hintergrund aus und gehen Sie zu Ändern > Pfade kombinieren > Überschneiden. Und du hast die Form, die wir wollen.

price_1price_1price_1
price_2price_2price_2
price_3price_3price_3
price_4price_4price_4

Fügen Sie nun den gesamten Text wie zuvor hinzu. Sie können an dieser Stelle verschiedene Textoptionen untersuchen. Ich konzentriere mich hauptsächlich auf Größe, Gewicht und Position in diesem Drahtmodell und werde im endgültigen Design an Stil und Schriftarten arbeiten. Der Preis wird auch durch Drücken von Befehlstaste + T, Halten der Umschalttaste und Drehen des Texts um 45 Grad erstellt. Ändern Sie dann den Abstand und die Größe, bis es gut aussieht.

Fügen Sie außerdem eine horizontale Regel unter dem größten Text hinzu (Rechteck mit 1 Pixel Höhe). Schalten Sie dann die Hilfslinien ein, indem Sie Befehlstaste + Doppelpunkt drücken. Stellen Sie sicher, dass alles, was Sie erstellt haben, wie unten gezeigt ausgerichtet ist.

promo_areapromo_areapromo_area

Schritt 9 - Fügen Sie die Körperinformationen hinzu

Die Techniken zum Platzieren dieser Informationen sind alle grundlegend. Es sind alles grundlegende Kästchen und Text. Platzieren Sie also die Körperinformationen wie unten gezeigt (möglicherweise möchten Sie Ihre Hilfslinien und die Gitterüberlagerung wie im nächsten Abschnitt gezeigt aktivieren). In diesem Abschnitt werden Verkaufsdetails hinzugefügt. Wir beschreiben die App, was sie tut, zeigen Screenshots davon in Aktion, fügen kleinere technische Details hinzu und geben Testimonials.

bodybodybody

Schalten Sie die Ebene "12 Col Grid" ein, die unsere Rasterüberlagerung enthält, und schalten Sie unsere Hilfslinien ein. Beachten Sie, wie in diesem Abschnitt ein dreispaltiges Setup verwendet wird. Jede Spalte ist 300px breit. Das Raster ist oben nicht so offensichtlich, aber Sie können sehen, wie die iPhone-Box mit der dritten Spalte und der Werbetext mit den ersten beiden Spalten des Body-Abschnitts übereinstimmt. Die Struktur unseres Gitters zeigt sich jetzt wirklich.

body_gridbody_gridbody_grid

Stellen Sie sicher, dass Ihre Ebenen wie unten gezeigt organisiert sind.

body_layers

Schritt 10 - Fügen Sie den unteren Abschnitt hinzu

Das Bild unten zeigt, was wir für den unteren Bereich erstellen. Es gibt vier Abschnitte, also organisieren Sie Ihre Ebenen entsprechend. Dieser Abschnitt konzentriert sich auf das Unternehmen und nicht auf die Anwendung. Viele Websites, die iPhone-Apps verkaufen, verkaufen mehr als eine App oder in einigen Fällen Schwerpunkte, die mehr als den Verkauf von iPhone-Apps abdecken. Der Zweck dieses Abschnitts ist es, das Unternehmen, seinen Blog, seinen Kundensupport und seinen Twitter-Feed zu bewerben.

Beachten Sie, wie wir unser Raster für diesen Abschnitt unterschiedlich verwenden. Wir haben hier vier Spalten eingerichtet, wodurch jede Spalte 220 Pixel breit ist.

bottom_contentbottom_contentbottom_content

Der größte Teil der Konstruktion dieses Abschnitts besteht aus einfachen Texten und Feldern. Die Linkfelder am Ende jedes Abschnitts haben dieselbe Größe wie unsere Hauptnavigation und können von dort kopiert werden. Schauen wir uns einige Aspekte dieses Abschnitts an. Zunächst wird beschrieben, wie Sie eine gepunktete Linie erstellen, was in Fireworks einfach ist.

Sie können natürlich das Linienwerkzeug (N) verwenden, um die Linie zu erstellen, aber ich habe stattdessen das Rechteckwerkzeug (U) verwendet. Machen Sie die Größe 220px breit und 1px hoch. Geben Sie ihm keine Füllung und eine Strichfarbe, die dunkler grau als der Hintergrund ist. Stellen Sie die Hubgröße ein 1. Klicken Sie dann auf die Schaltfläche neben der Strichgröße, um die Linienoptionen anzuzeigen. Gehen Sie zu Striche und wählen Sie dann Gepunktet wie unten gezeigt.

line_dottedline_dottedline_dotted

Eine Sache, die ich beim Erstellen von Drahtgittern oft mache, ist, über Symbole nachzudenken, die im endgültigen Design verwendet werden. In diesem Fall gibt es nur eine, die wir von einer anderen Stelle verwenden. Sie könnten das Symbol in Farbe behalten, aber ich möchte, dass dieses Drahtmodell in Graustufen angezeigt wird und sich auf Layout und Abstand konzentriert und an dieserStelle nicht auf Farbe.

Laden Sie das kostenlose Practika Icon Pack aus dem Smashing Magazine herunter. Ziehen Sie die 64 x 64 Pixel große Datei "twitter.png" per Drag & Drop in das Dokument. Platzieren Sie es wie gezeigt und stellen Sie sicher, dass das Feld, auf dem es platziert ist, breit genug ist, damit es hineinpasst. Gehen Sie nun mit dem ausgewählten Bild zu Filter > Farbe anpassen > Farbton/Sättigung und drehen Sie die Sättigung ganz nach unten.

bird_colorbird_colorbird_color
bird_monobird_monobird_mono

Lassen Sie uns auch hier unsere Ordner organisieren.

bottom_folders

Schritt 11 - Hinzufügen der Fußzeile

Das ist wirklich einfach. Stellen Sie sicher, dass Sie den Site-Namen und das Copyright hinzufügen. Platzieren Sie außerdem Textlinks, die die Navigation auf der Hauptseite wiederholen. Wenn es wichtige ergänzende Links gibt, können Sie diese auch hier platzieren. Richten Sie das Copyright am linken Rand und die Links am rechten Rand wie unten gezeigt aus.

footerfooterfooter

Schritt 12 - Hinzufügen von Notizen zum Drahtmodell

Im Tutorial Erstellen eines Website-Drahtmodells in Illustrator werde ich das Hinzufügen von Beschriftungen zu einem Drahtmodell erläutern. Dies ist eine nützliche Möglichkeit, einem Drahtmodell Notizen hinzuzufügen. Ein weiterer nützlicher Weg besteht darin, die Notizen inline zu platzieren. Dies ist ziemlich einfach und hilfreich für die Kommunikation von Features, Funktionen oder Problemen mit Clients.

Ich mag es, Notizen in Blau zu platzieren, so dass die Notizen auf dem Drahtgitter liegen und Blau ein Blaupausengefühl hat. Das endgültige Drahtmodell befindet sich unten und Sie können die Drahtmodellversion in voller Größe hier anzeigen.

finalfinalfinal

Schritt 13 - Einrichten unserer Datei für den Export nach Photoshop

Gruppieren Sie alles auf, was Sie nicht rastern möchten, wenn Sie zu Photoshop wechseln. Wenn Sie beispielsweise die Bearbeitbarkeit von Text beibehalten möchten, müssen Sie sicherstellen, dass der Text nicht zu irgendetwas gruppiert ist. Es ist jedoch in Ordnung, Dinge in Ordnern abzulegen. Dies ist eine der Besonderheiten beim Exportieren von Fireworks nach Photoshop.

Möglicherweise möchten Sie auch entscheiden, ob es sich lohnt, den Text aus Fireworks in Photoshop zu übertragen (Sie können ihn löschen und dann in Photoshop neu erstellen). Ich habe die Erfahrung gemacht, dass die Textfelder seltsam wirken, was Sie im nächsten Tutorial sehen werden, das dieses Drahtmodell verwendet und ein vollfarbiges Photoshop-Website-Design erstellt. In diesem Fall behalten wir den Text bei.

Gehen Sie zu Datei > Speichern unter und klicken Sie auf Optionen. Die Standardeinstellung ist "Bearbeitbarkeit über Darstellung beibehalten". Behalten Sie die Standardeinstellung bei und klicken Sie auf Speichern. Durch Beibehalten der Essbarkeit werden unsere Formen in Photoshop als Formebenen platziert, anstatt sie zu rastern, was in diesem Fall bevorzugt wird.

savesavesave

Abschluss

Fireworks eignet sich hervorragend für Wireframing- und Prototyping-Websites. Selbst in einem einseitigen Design werden Sie feststellen, wie schnell Sie verschiedene Layoutoptionen ausarbeiten und die Struktur Ihres Designs schnell erstellen können. Sobald Sie mit diesem Programm für größere Projekte arbeiten, werden Sie auch eine Fülle von Werkzeugs entdecken. In unserem nächsten Tutorial in dieser Reihe werden wir dieses Drahtmodell der iPhone-Anwendung verwenden und das Design in Photoshop fertigstellen.

Zusätzliche Ressourcen

Es gibt einige zusätzliche Funktionen in Fireworks, die in diesem Tutorial nicht behandelt wurden, aber Ihnen bei Ihrem nächsten Projekt helfen würden. Im Folgenden finden Sie einige nützliche Tutorials zur Verwendung von Fireworks for Wireframing, die Sie möglicherweise ebenfalls überprüfen möchten. Wenn Sie auf relevante Tutorials oder Ressourcen stoßen, müssen Sie diese in den Kommentaren verlinken, um sie mit der Community zu teilen.

  • Wireframing mit Fireworks CS3
    • In diesem Lernprogramm werden zahlreiche zusätzliche Fireworks-Wireframing-Funktionen behandelt.
    • Erfahren Sie mehr über das Erstellen von Seiten, das Verwenden von Frames, das Erstellen und Verwenden von Bibliotheks-Widgets wie Schaltflächen und mehr.
  • Entwerfen einer Website-Anwendung mit Fireworks CS4
    • Dieses Tutorial behandelt Wireframing in Fireworks im Rahmen der Erstellung eines funktionalen Designs. Es ist detailliert und Schritt für Schritt.
    • Erweiterte Funktionen wie die Verwendung von Masterseiten und das Exportieren interaktiver PDFs werden behandelt. Weitere grundlegende Wireframing-Werkzeugs und -Schritte werden ebenfalls behandelt.
  • Entwerfen einer Website in Fireworks CS4
    • Dieses Video-Tutorial ist sehr detailliert und behandelt ein interessantes Drahtmodellprojekt.
    • Es behandelt Details wie die Verwendung angepasster vorgefertigter Bibliothekselemente in einem Drahtmodell, intelligente Hilfslinien und das Einrichten von Gittern.
    • Es werden auch erweiterte Details wie das Arbeiten mit mehreren Seiten zum Importieren von Illustrator-Dateien und mehr behandelt.

Abonnieren Sie den Vectortuts+ RSS-Feed, um über die neuesten Vektor-Tutorials und Artikel auf dem Laufenden zu bleiben.

Advertisement
Did you find this post useful?
One subscription.
Unlimited Downloads.
Get unlimited downloads