Lernprogramm: Layout einer Webseite mit Adobe Photoshop

Es gibt eine Vielzahl von Tools, mit denen Sie Webseiten gestalten und ganz einfach und funktional arbeiten können, ohne Code eingeben oder berühren zu müssen. Sie sind unzählig, vorgeschlagen von Anwendungen (Adobe Dreamweaver ist ein Beispiel) oder direkt von Online-Plattformen wie Wix. Für einen Webdesigner ist es jedoch wichtig, die manuellen Verfahren zu kennen. HTML5 und CSS sind die Grundpfeiler für das Layout von Websites und Zielseiten.

Sie müssen sich jedoch häufiger als erwartet an Anwendungen wie Indesign oder wenden Adobe Photoshop um Ihre Layoutarbeit zu ergänzen und ihnen ein perfektes Finish zu verleihen. Heute werden wir in diesem umfangreichen Tutorial sehen, wie wir eine Webseite mit Adobe Photoshop gestalten können. In diesem ersten Teil bleiben wir in der Arbeit, die aus Photoshop entwickelt werden soll, obwohl wir in zukünftigen Abschnitten sehen werden, wie wir diese Arbeit bereits direkt in HTML-Code anwenden können, um sie funktionsfähig zu machen.

Beginnend mit dem Design unseres Drahtgitters

Um mit dem Layout und Design einer Webseite zu beginnen, ist es enorm wichtig, dass wir zunächst die Grundelemente definieren. Dies ist das Grundgerüst. Diese Struktur dient als Unterstützung für den gesamten Inhalt (ob Text oder Multimedia). Indem wir jeden der Abschnitte definieren, aus denen unsere Seite besteht, können wir sie mit vollständiger Genauigkeit bearbeiten und ein möglichst genaues visuelles Design bereitstellen.

Es ist sehr wichtig, dass wir die Dimensionen berücksichtigen, die unsere Website haben wird, wenn sie eine haben wird verpackt oder in voller Breite. Eine Webseite in einer Box befindet sich in einem kleinen Container und daher wird ein Leerzeichen um ihn herum angezeigt. Im Gegenteil, ein volles Web nimmt den gesamten Bildschirm des Geräts ein, das die Seite reproduziert. Die Wahl zwischen der einen oder anderen Modalität beantwortet lediglich stilistische Fragen und hängt auch von den Anforderungen des Projekts ab, an dem wir arbeiten. In diesem Beispiel wird mit dem Box-Modus gearbeitet, damit nicht der gesamte vom Browser bereitgestellte Speicherplatz belegt wird.

Um unser Drahtmodell zu erstellen, müssen wir zunächst die Adobe Photoshop-Anwendung aufrufen und die Abmessungen angeben, die unsere Seite haben soll. In diesem Beispiel ist unsere Seite 1280 Pixel breit. Das Größenproblem kann jedoch abhängig vom endgültigen Ziel oder dem Gerät variieren, auf dem wir unsere Seite reproduzieren möchten. Es besteht kein Zweifel, dass ein Webdesign funktional und effizient sein muss ansprechbar und es muss sich an alle Geräte auf dem Markt anpassen. In diesem Fall werden wir jedoch daran arbeiten, einen Prototyp zu erstellen, den wir auf einem Desktop-Computer reproduzieren werden. Trotzdem wird das Problem der Reaktion später erläutert. Im Folgenden finden Sie eine Hierarchie der Bildschirmabmessungen, mit denen Sie in diesem Beispiel arbeiten können. Beachten Sie, dass wir in diesem Fall ein Layout der Zielseite in Adobe Photoshop erstellen und diese dann auf HTML5 UND CSS3 migrieren. Das Ziel dieser kleinen Übung ist es, ein in Photoshop erstelltes Design in ein verwendbares und interaktives Webdesign umzuwandeln, das auf die Bewegungen des Benutzers reagiert.

Messungen für Mobiltelefone

iPhone 4 und 4S: 320 x 480

iPhone 5 und 5S: 320 x 568

iPhone 6: 375 x 667 Zoll

iPhone 6+: 414 x 736

Nexus 4: 384 x 598 Zoll

Nexus 5: 360 x 598 Zoll

Galaxy S3, S4, S5: 360 x 640

HTC One: 360 x 640

Tablettenmessungen

iPad alle Modelle sowie iPad Mini: 1024 x 768

Galaxy Tab 2 und 3 (7.0 Zoll): 600 x 1024

Galaxy Tab 2 und 3 (10.1 Zoll): 800 x 1280

Nexus 7: 603 x 966 Zoll

Nexus 10: 800 x 1280 Zoll

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Messungen für Desktop-Computer

Kleine Bildschirme (zum Beispiel in Netbooks): 1024 x 600

Mittlere Bildschirme: 1280 x 720/1280 x 800

Große Bildschirme: Breite größer als 1400 Pixel, z. B. 1400 x 900 oder 1600 x 1200.

Um die Elemente zu verteilen und Abschnitte in unserem Web-Modell zuzuweisen, ist es sehr wichtig, dass wir die Proportionen berücksichtigen, um ein lesbares und melodisches Finish zu gewährleisten. Es ist wichtig, dass Sie die Regeln und Hilfslinien verwenden, die Sie im oberen Menü Ansicht finden. Um proportional und genau zu arbeiten, arbeiten wir am besten in Prozent. Wir klicken auf das Ansichtsmenü und dann auf die Option «Neue Anleitung», um die Modalität der Unterteilung auszuwählen. In diesem Fall werden wir vier vertikale Unterteilungen mit 25% vornehmen und diese als Referenz verwenden, um unsere Bilder in der Fußzeile und das Bild unseres Logos in der Kopfzeile zu platzieren.

Es gibt einen Code, um jeden der Bereiche zu kennzeichnen, die unsere besetzen werden Modell und die Funktion, die jeder von ihnen haben wird. Um beispielsweise den Bereich anzugeben, den ein Bild einnehmen wird, erstellen wir Rechtecke mit einer Art Kreuz. Um anzuzeigen, dass wir Videos in einen bestimmten Bereich aufnehmen möchten, fügen wir das Wiedergabesymbol in unseren Container ein. In diesem ersten Beispiel werden wir nur mit Bildern arbeiten. In der oberen Aufnahme sehen Sie den Bereich, in dem sich die logo von unserer Website.

Dies wäre das Endergebnis unserer Drahtmodell. Wie wir sehen können, ist es in eine Kopfzeile unterteilt, die aus dem Bild besteht, in dem sich das Logo befindet, und das als Link zur Startseite dient, zusammen mit zwei Registerkarten, einer Suchmaschine und vier Schaltflächen im Suchfeld. Darüber hinaus haben wir bereits innerhalb des Körpers eine Seitenleiste eingefügt, die aus einer Trennleiste und einer Reihe von Kategorien besteht, die die Art des Inhalts auf unserer Website kategorisieren. Ein weiterer Abschnitt mit einer Nummerierung, die die Einträge enthält, die auf unserer Website vorhanden sein werden, und schließlich eine Liste mit den repräsentativsten Meta-Tags auf unserer Website.

Im Inhaltsbereich, der durch einen Abschnitt definiert wird, der Folgendes enthält selbstverwaltbarer Inhaltfinden wir den Inhalt unserer Artikel. In diesem Fall Breadcrumbs oder Breadcrumb (der die organische Struktur unserer Website, den Titel des Artikels, die Metadaten, einen Absatz als Textkörper angibt, in dem ein Bild enthalten ist.

Als Fußzeile haben wir vier Bilder eingefügt, die als Link zu anderen Bereichen unserer Seite dienen. Hier können wir Logos oder andere interessante Abschnitte einfügen. Obwohl in Wirklichkeit wird dieser Bereich eher so handeln prefooter, da die Fußzeile selbst mit den Nutzungsrichtlinien, rechtlichen Hinweisen und dem Urheberrecht etwas weiter unten steht.

Sobald wir die Grundstruktur oder das Grundgerüst unserer Seite definiert haben, müssen wir zur nächsten Ebene übergehen. Dies besteht aus der richtigen Gestaltung aller Bereiche unserer Website. Mit anderen Worten, wir werden beginnen, jeden dieser Bereiche mit dem Inhalt zu "füllen", der schließlich auf unserer Website eingefügt wird. Es wird empfohlen, diese Elemente nicht vor der Arbeit am Drahtmodell zu entwerfen, da es sehr wahrscheinlich ist, dass wir später ihre Proportionen ändern müssen, wenn wir dies in dieser Reihenfolge tun. Wir laufen Gefahr, unsere Bilder zu verzerren und das Design jedes der Elemente wiederholen zu müssen, was entweder zu Zeitverschwendung oder zu einem Ergebnis von geringerer Qualität wird.

In diesem Fall ist das Design unserer Website äußerst einfach. Wir werden die verwenden Materialdesign-Vorschriften, da wir das Google-Logo verwenden werden, um diese Praxis zu veranschaulichen. Ich muss klarstellen, dass der Zweck dieses Tutorials darin besteht, das technische Wissen zu veranschaulichen, sodass das ästhetische Ergebnis in diesem Fall irrelevant ist. Wie Sie sehen, haben wir nach und nach den Raum mit allen Bereichen gefüllt, die wir zuvor in unserem Schema festgelegt haben. Wir haben jedoch in letzter Minute eine kleine Änderung vorgenommen. Wie Sie vielleicht bemerkt haben, haben wir die Größe unseres Logos erheblich reduziert und im unteren Kopfbereich eine Trennlinie eingefügt, die perfekt mit dem oberen Menü verbunden ist. In diesem Fall haben wir Schaltflächen und Materialien aus einer Ressourcenbank verwendet. Als Designer können wir sie selbst entwerfen (insbesondere wird diese Option empfohlen, wenn sie ein sehr ähnliches Tonikum wie das Markenimage oder das Logo aufweisen soll).

Es ist wichtig, dass wir bedenken, dass wir zur Darstellung dieses Beispiels auf zwei verschiedenen Ebenen arbeiten werden. Einerseits werden wir an den Objekten arbeiten und andererseits das Erscheinungsbild der Website. Das heißt, einerseits im Skelett unserer Website und andererseits insgesamt schwebende Elemente, die dieses Skelett unterstützt. Sie werden feststellen, dass es Bereiche gibt, die überhaupt nicht schweben, z. B. den Bereich, den unsere Seitenleiste einnimmt, den Vorfuß oder die Trennleiste, die den Header vom Körper trennt.

Die Strukturen 1, 2, 3 und 4 werden Teil der Hintergrund In Wirklichkeit ist es für uns nicht erforderlich, als solches aus Adobe Photoshop zu exportieren, obwohl wir dies tun können, ist dies nicht erforderlich. Wenn es darum geht Flache Farben (Als eines der wesentlichen Merkmale des flachen Designs und des Materialdesigns können sie mithilfe eines CSS-Stylesheets perfekt durch Code angewendet werden.) Der Rest der Elemente muss jedoch zum späteren Einfügen in unseren HTML-Code gespeichert werden. In diesem kleinen Diagramm haben wir auch die Bereiche reproduziert, die zum Hintergrund der Seite gehören, damit wir eine klare Vorstellung davon haben, wie das endgültige Erscheinungsbild unserer Website aussehen wird.

Wie Sie feststellen können, besteht der Sinn des Erstellens dieses Schemas in Adobe Photoshop darin, die tatsächliche Dimension jedes Elements zu ermitteln und die Anordnung und Struktur jedes Elements zu klären. Natürlich hat der Textinhalt in dieser Phase des Prozesses keinen Platz, da er sein muss geliefert von unserem Code-Editor. Wir müssen auch darauf hinweisen, dass wir in dieser Praxis mit Schaltflächen und statischen Elementen arbeiten werden, obwohl diese im Allgemeinen normalerweise von Frameworks wie Bootstrap oder direkt von Jquery angewendet werden.

Nachdem wir alle Elemente erstellt haben, aus denen unsere Webseite besteht, ist es an der Zeit, sie zu exportieren und im Bilderordner im HTML-Projektordner zu speichern. Es ist wichtig, dass Sie sich an das Exportieren aus Ihrem Drahtmodell gewöhnen, da es sehr wahrscheinlich ist, dass Sie einige der ursprünglichen Elemente basierend auf der Skelettkonfiguration ändern müssen. (In diesem Fall haben wir beispielsweise die Größe der Originalschaltflächen, des Logos und der meisten Elemente, die Teil der Komposition sind, einschließlich der Bilder im unteren Bereich, geändert.)

Es ist wichtig, dass wir lernen, jedes Element unabhängig zu speichern, um es mit den Abmessungen und auf präzise Weise zu speichern. Jeder noch so minimale Fehler kann alle Elemente beeinflussen, die Teil Ihrer Webseite sind. Beachten Sie, dass sie miteinander in Beziehung stehen und perfekte Abmessungen haben müssen, damit sie im endgültigen Web aus HTML eingegeben werden können. In diesem Fall müssen wir die folgenden Elemente unabhängig voneinander ausschneiden und speichern:

• Unser Logo.
• Alle Schaltflächen (diejenigen, die Teil des Hauptmenüs und der Rest sind).
• Alle Bilder.

Wir können dies auf viele Arten tun, und vielleicht finden Sie eine Alternative, die für Sie effektiver ist. Wenn Sie diese Art von Layout jedoch zum ersten Mal erstellen, empfehlen wir Ihnen, die folgenden Tipps zu befolgen.

• Zuerst müssen Sie zu dem Ordner gehen, in dem sich die PSD-Datei befindet, die unser Drahtmodell enthält, und sie so oft duplizieren wie die Elemente, die Sie exportieren möchten. In diesem Fall haben wir 12 Kopien des Originals erstellt und im selben Ordner gespeichert. Als Nächstes benennen Sie jede der Kopien um und weisen jeder von ihnen den Namen des darin enthaltenen Elements zu. Unsere 12 Exemplare werden umbenannt: Logo, Menütaste 1, Menütaste 2, Suchleiste, obere Taste 1, obere Taste 2, obere Taste 3 und obere Taste 4. Die restlichen vier werden umbenannt in: Bild 1, Bild 2, Bild 3 und Bild 4.
• Sobald dies erledigt ist, öffnen wir die Datei mit dem Logo-Namen.
• Wir gehen zu unserer Ebenenpalette und suchen die Ebene, die unser Logo enthält. Dann werden wir drücken Strg / Cmd während wir auf das Vorschaubild dieser Ebene klicken. Auf diese Weise wurde das Logo automatisch ausgewählt.
• Der nächste Schritt besteht darin, Photoshop mitzuteilen, dass das Logo präzise ausgeschnitten werden soll. Dazu müssen wir das Zuschneidewerkzeug nur über die Taste oder den Befehl aufrufen C.
• Sobald wir dies getan haben, klicken wir auf unsere Eingabetaste, um den Schnitt zu bestätigen.
• Jetzt gehen wir zum oberen Menü Datei und klicken auf Speichern wie. Wir wählen den Namen, in diesem Fall «Logo», und weisen ein Format zu PNG, um die Datei zu sein, die die höchste Qualität im Web bietet.
• Wir werden den Vorgang mit allen Kopien und Elementen wiederholen. Stellen Sie nach dem Zuschneiden sicher, dass die restlichen Ebenen in unserer Palette vorhanden sind unsichtbar oder beseitigt. Auf diese Weise können wir jedes Element mit einem transparenten Hintergrund speichern.

In diesem Fall wählen wir unsere Menüschaltfläche 2 aus der Ebenenpalette. Sie können im Screenshot sehen, wie die Grenzen unserer Schaltfläche automatisch ausgewählt wurden.

Sobald wir das Zuschneidewerkzeug mit der C-Taste auswählen, wird unsere Leinwand nur auf die Abmessungen unserer Schaltfläche reduziert.

Jetzt ist es an der Zeit, alle Elemente, die Teil unserer Website sind, einzeln zu speichern und in den Bilderordner aufzunehmen, die wir später verwenden werden. Wir werden Anrufe von unserem Code aus tätigen und unser Layout fortsetzen, aber von nun an von unserem Code-Editor aus.

Obwohl es viele Tools und Alternativen zum Layout einer Webseite gibt, die den Prozess völlig intuitiv machen, ist es sehr wichtig, dass wir lernen, dies in einem zu tun manuell. Auf diese Weise lernen wir die Grundlagen für die Gestaltung einer Webseite kennen.

Zusammenfassung:

1. Entwerfen Sie die Struktur der Website unter besonderer Berücksichtigung des Inhalts, den Sie übertragen möchten, und der Abschnitte, die Sie auf Ihrer Website erstellen müssen.
2. Arbeite an deinem Skelett oder Drahtmodell aus Adobe Photoshop, das angibt, in welchen Bereichen der Inhalt angezeigt wird und in welchem ​​Format.
3. Beginnen Sie mit den Maßnahmen und Marken, die Sie zuvor entwickelt haben Design die Oberfläche der Bahn. Beinhaltet alle Elemente (sowohl schwebend als auch fest). Vergessen Sie nicht, die entsprechenden Schaltflächen, das Logo und die Bilder anzugeben.
4. Schneiden Sie alle Elemente, die Teil des Projekts sind, einzeln aus. Stellen Sie sicher, dass sie die richtigen Maßnahmen haben und Ihnen später keine Probleme bereiten.
5. Speichern Sie alle Elemente im Format PNG im Bilderordner im Projektordner HTML.
6. Beachten Sie, dass dieses Projekt eine Ausgabe im Webfenster hat. Daher ist es sehr wichtig, dass Sie den Farbmodus berücksichtigen und anwenden RGB.
7. Lassen Sie sich von anderen Webseiten inspirieren, die Sie bewundern, bevor Sie zur Arbeit gehen, und vergessen Sie nicht, dies mit Ihren Teammitgliedern zu besprechen. Wenn es sich um ein Projekt für einen Kunden handelt, versuchen Sie, sich an das zu halten Besprechung so weit wie möglich.