Hilfreiche Ratschläge

Wie erstelle ich eine Website, wenn ich Anfänger bin?

Pin
Send
Share
Send
Send


In diesem Artikel werden Aspekte des Website-Designs wie die Auswahl eines Editors für die Erstellung eines Website-Layouts, die Bestimmung der Größe einer Website sowie das Format zum Speichern von Quellen, das Arbeiten mit Text und vieles mehr behandelt.

Dieser Artikel richtet sich hauptsächlich an Anfänger-Webdesigner.

Welchen Editor soll ich verwenden?

Sie können eine zukünftige Site mit jedem Grafikeditor entwerfen, in dem Sie arbeiten. Die Verwendung von Adobe Illustrator ist für mich praktischer, obwohl die meisten Designer Photoshop für diese Zwecke verwenden. Zum Teil, weil Browser keine Vektorgrafiken anzeigen.

Infolgedessen werden beim Vorbereiten der Website-Layer alle grafischen Elemente in ein Raster konvertiert. Zum größten Teil - im JPEG-Format. Wenn Sie jedoch einen transparenten oder durchscheinenden Hintergrund benötigen, können Sie Grafiken im PNG- oder GIF-Format verwenden (seltener).

Die meisten Designer verwenden Photoshop nicht nur, weil es einer der besten Editoren für Bitmap-Grafiken ist, die HTML versteht, sondern auch, weil dieses Programm bekannt ist und daher die meisten unerfahrenen Designer in der Regel beginnen, Computergrafiken mit Adobe Photoshop zu studieren.

Dies sind die Hauptgründe, warum Photoshop als das bequemste Programm zum Rendern von Webdesign gilt:

Welche Größe sollte eine Site haben?

Erstens, wenn Sie ein Website-Design bestellt haben - vergessen Sie Konzepte wie dpi oder metrisches System. Auf der Site eingefügte Blöcke und Bilder werden in Pixel oder Prozent (Breite / Höhe) der Größe des Browserfensters (oder des übergeordneten Elements) gemessen.

Wenn die Site-Größe als Prozentsatz festgelegt ist, handelt es sich um ein adaptives (oder gummiartiges / ansprechendes) Design. Responsive oder Responsive Design ist eine ziemlich praktische Sache. Wenn Sie jedoch nicht genau wissen, was Sie tun, verwenden Sie feste Größen.

Wenn der Kunde auf einem adaptiven oder reaktionsschnellen Design besteht, überlegen Sie sich vor dem Fortfahren mit der Aufgabe genau, welche Blöcke beim Ändern der Größe des Browserfensters gedehnt werden und welche nicht. Auf diese Weise können Sie ein Design erstellen.

Erstellen Sie mehrere Dateien für Standardbildschirmauflösungen (z. B. 1280 x 1024, 1920 x 1280 und 1024 x 768). Mit ihrer Hilfe erhalten Sie eine visuelle Darstellung, wie die Website bei verschiedenen Auflösungen aussieht. Notieren Sie im Anhang der Vorlage die maximale und minimale Blockgröße:

Wie groß sollte die Webseite sein?

Wenn wir ein Visitenkarten- oder Flyer-Layout erstellen, kennen wir die endgültige Größe. Bei der Gestaltung der Website ist alles etwas komplizierter.

Alle Monitore haben unterschiedliche Auflösungen (Anzahl der Pixel in Breite und Höhe). Dies ist genau das, was Sie beim Entwerfen einer Website berücksichtigen müssen. Die meisten Monitore haben derzeit eine Auflösung von 1280 oder 1920 Pixel. In der Regel verlassen wir uns auf diese Werte. Machen Sie jedoch keine Textblöcke breiter als 800 Pixel.

Wenn die Auflösung des Monitors 800 mal 600 beträgt und wir die äußere Attraktivität der Site verlieren, ist das nicht so schlimm. Wenn jedoch eine Textzeile nicht auf den Bildschirm passt, wird dies zu einem Funktionsproblem.

Erstellen Sie am besten Websites mit einer Breite von 1024 Pixel und lassen Sie in der Vorlage bis zu einer Größe von 1280 Pixel etwas „freien Speicherplatz“.

Das Seitenlayout kann links - rechts oder mittig ausgerichtet werden. Darüber hinaus muss dieser „freie Platz“ kein weißer Rand sein. Es kann mit einer beliebigen Farbe oder einem sich wiederholenden Muster gefüllt werden.

Alternativ können Sie eine dem Design ähnliche Textur erstellen. Sie können auch ein sich nicht wiederholendes Hintergrundbild verwenden, das bei deaktivierter Bildlaufoption auf eine Breite von 100% vergrößert wird. Zum einen ist dies manchmal nicht sehr praktisch, zum anderen wird eine Site mit einem solchen Hintergrund sehr "schwer" und erfordert erhebliche Änderungen Zeit zum Download.

In welchem ​​Format soll der Quellcode gespeichert werden?

Für Quelldateien verwenden Sie am besten das PSD-Format (Photoshop), bei dem sich jedes Grafikelement auf einer eigenen Ebene befindet. Darüber hinaus ist es wünschenswert, den Layern Namen zu geben, damit sie für den Layout-Designer verständlich sind. Zum Beispiel: "Seitenhintergrund", "Textblockhintergrund" usw. Ebenen können nach Zweck gruppiert werden.

Nehmen wir an, der Text und der Hintergrund zu diesem Text können gruppiert werden, und geben Sie dieser Gruppe den Namen "Haupttextblock". Oder Sie können den Verknüpfungsblock mit dem Hintergrund in eine Gruppe mit dem Namen "Verknüpfungsgruppe XX" gruppieren. Kurz gesagt, versuchen Sie, die Quelldatei so klar wie möglich zu gestalten, damit der Layout-Designer Sie nicht alle fünf Minuten nachfragen muss.

Wie mache ich ein gutes Design?

Der Ausdruck "schönes Design" kann einen erfahrenen Webmaster leicht erschrecken. Das Wichtigste ist die Funktionalität der Website. Dann nur noch schnelles Laden und benutzerfreundliche Oberfläche. Und Schönheit und Pracht stehen im Hintergrund. Und übrigens, der Geschmack und die Farbe, wie sie sagen ...

Daher ist es unwahrscheinlich, dass jemand Ihnen beibringen kann, wie man "Schönheit" macht. Beim Erstellen eines neuen Designs geht es in erster Linie darum, Funktionalität zu erstellen. Die Aufgabe besteht darin, ein Design zu erstellen und die Site-Elemente so anzuordnen, dass der Besucher die benötigten Informationen leicht findet.

Sie müssen sicherstellen, dass der Benutzer, der die Site besucht, nicht sofort von dort wegläuft, weil er Angst hat oder sich durch Würgen zurückhält. Verwenden Sie ein Minimum an Animation, um dies zu verhindern. Solche Websites ähneln billigen Porno-Websites, auf denen Sie leicht Viren auf Ihrem Computer "abfangen" können.

Darüber hinaus lenken animierte Objekte die Aufmerksamkeit des Besuchers vom Hauptteil der Site ab - dem Text. Nur nicht in der Gestaltung von verschiedenen "Features" in der Darstellung von niedlichen kleinen Hunden oder Katzen verwenden. Das Web ist schon voller Müll. Kreieren Sie etwas wirklich Interessantes.

Ausnahmen können für diejenigen gemacht werden, die eine Ressource mit Informationen wie "Mein Name ist Philip, meine Nase ist an die Decke geklebt" erstellen.

Entscheide dich für ein Ziel

Zunächst müssen Sie verstehen, warum Ihr Kunde eine Website benötigt. Lassen Sie ihn ein paar einfache Fragen beantworten:

  • Wem widmet sich die Site?
  • Welche Aufgaben sollen gelöst werden?
  • Wie wollen Sie die Site bewerben?
  • Welche Site sollte strukturiert sein?
  • Welche Inhalte sollen platziert werden?
  • Hat der Kunde ein fertiges Markenbuch?

Je mehr der Kunde diese Fragen beantwortet, desto klarer sollte das Ergebnis sein. Die beste Möglichkeit ist, das Briefing eines der führenden Designstudios auszufüllen.

Unabhängig davon, wie seltsam, lang und detailliert es für Sie sein mag, das Ausfüllen eines Briefings ist eine der wichtigsten Phasen bei der Erstellung einer Website, da es hilft, die Besonderheiten und die Komplexität des Projekts zu verstehen. Es gibt Dutzende von Site-Erstellungsschriftsätzen im Web, aber ich empfehle den Schriftsatz von Creative People.

Entscheiden Sie sich für die Art der Site

Bevor Sie über das Entwerfen einer Site nachdenken, müssen Sie wissen, welche Site Sie erstellen möchten. Es gibt viele Arten von Websites. In den meisten Fällen müssen Sie jedoch eine Zielseite, eine Unternehmenswebsite oder einen Onlineshop erstellen.

Eine einseitige Website, deren Zweck darin besteht, ein Produkt oder eine Dienstleistung schnell und effizient zu verkaufen. Landing Pages zeichnen sich in der Regel durch ein helles Design und das Vorhandensein eines oder mehrerer Blöcke aus, in denen der Benutzer aufgefordert wird, seine Kontakte für die Kommunikation zu hinterlassen.

Unternehmens-Website

Es unterscheidet sich in Größe, Funktionalität - und enthält oft verschiedene komplexe Tools für Design und technische Umsetzung. Die Komplexität von Unternehmensstandorten kann sehr unterschiedlich sein, alles hängt von den Anforderungen des Kunden und der Größe des Unternehmens ab.

Online-Shops

Diese Websites sind jedem von Ihnen vertraut: AliExpress, OZON, M.Video und Dutzende anderer ähnlicher Websites. Die größte Herausforderung für den Designer ist hierbei die Menge an Informationen und Waren sowie die Gestaltung der Bestellseite.

Entdecken Sie die Konkurrenten

Wenn Sie sich für das Thema, den Typ und den Zweck der Website entschieden haben, ist es Zeit, die Konkurrenten sorgfältig zu untersuchen. Jeder von ihnen überlegte einmal, wie er eine Website erstellen sollte, und konnte sie so gestalten, dass er ganz oben in den Suchergebnissen stand.

Achten Sie beim Untersuchen der Websites von Wettbewerbern darauf, wo und wie sich Informationen befinden, welche Websitestruktur und Funktionalität implementiert sind. Nachdem Sie einige Dutzend Websites analysiert haben, werden Sie wahrscheinlich die allgemeinen Merkmale und Muster der Websites des gewünschten Themas erkennen.

Überspringen Sie diesen Schritt nicht, auch wenn sich aus irgendeinem Grund keine Konkurrenten in Ihrer Nische befinden. Versuchen Sie, die Standorte einer angrenzenden Nische zu untersuchen, eine Mind Map im XMind-Programm oder im MindMeister-Dienst zu erstellen, Skizzen der zukünftigen Benutzeroberfläche zu erstellen und nicht zu vergessen, jeden Schritt zu analysieren, da jedes Element der Benutzeroberfläche einen bestimmten Zweck erfüllen sollte.

Hier finden Sie die Referenzen

Die visuelle Komponente der Site ist eine der wichtigsten Aufgaben des Designers, da die Site nicht nur praktisch, sondern auch schön sein soll. Sie müssen die Schriftarten, die Hauptfarben, das Design der Blöcke und die Organisation der Informationen auf der Seite auswählen.

Wenn Sie neu im Design sind, ist es eine zweifelhafte Entscheidung, dies selbst zu tun. Am besten finden Sie Beispiele für Websites, die Ihnen gefallen, und nehmen einige Ideen an. Zeichnen Sie die gewünschte Site einfach nicht von der Kopfzeile zur Fußzeile neu - dies ist ein offenkundiges Plagiat. Wir empfehlen Ihnen, einige Dutzend (oder mehr) Websites mit verwandten Themen auszuwählen, deren Design Ihnen gefallen hat, und sich die Details genauer anzusehen, indem Sie die Layouts in Komponenten sortieren.

Darüber hinaus können Sie dem Kunden die Auswahl der Referenzen sicher anzeigen. Wählen Sie gemeinsam den passenden Stil aus, um unnötige Änderungen in Zukunft zu vermeiden. Auf Behance, Awwwards und Pinterest finden Sie viele gute Beispiele.

Wie man eine schöne Seite macht

Zu diesem Zeitpunkt sollten Sie ein Verständnis dafür haben, wie das Website-Design aussehen sollte. Es ist Zeit, darüber nachzudenken, wie man es schafft.

Bisher wurde nur Photoshop zum Erstellen von Layouts verwendet, aber der moderne Designer hat viel mehr Auswahlmöglichkeiten.

Preiswertes und sehr praktisches Online-Tool zum Erstellen einfacher Websites und Landing Pages. Mit dem Online-Designer können Sie eine Site direkt im Browser erstellen, was Ihrem Kunden hilft, Layout und Programmierung zu sparen, und Sie werden sofort verstehen, wie die Site aussehen wird.

Vielleicht der beliebteste Site Builder von heute. Konstruktoren sind nützlich, wenn Sie eine Website mit mehr Zielseiten erstellen müssen und es keine Möglichkeit gibt, einen Layout-Designer und einen Programmierer zu gewinnen.

Dies ist die Grundlage für die Grundlagen, die Sie noch lernen müssen, wenn Sie sich für Design entscheiden. Ja, es gibt bereits viele Analoga zum Erstellen von Layouts, aber keines von ihnen bietet Ihnen eine solche Kontrolle über das Bild wie Photoshop.

Geeignet, wenn Sie Apple-Produkte verwenden, da das Programm derzeit nur für iOS verfügbar ist.

Ein relativ neues, aber schon sehr beliebtes Produkt. Sie ist beliebt für Barrierefreiheit - es funktioniert sowohl im Browser als auch auf jeder Plattform, praktische Struktur, die Fähigkeit zur Teamarbeit, die Benutzeroberfläche.

Denken Sie bei der Auswahl eines Programms zum Erstellen einer Website erneut an Ihre Ziele. Wenn Sie das Projekt in ein paar Tagen übergeben müssen, lohnt es sich, die Photoshop-Einstellungen zu überprüfen? Und im Gegenteil: Wenn Sie sich für einen Berufswechsel entscheiden, müssen Sie unbedingt die grundlegenden Programme kennen.

Die im Artikel diskutierten Prinzipien sind der erste Schritt, um Designer zu werden. Wenn Sie wirklich an coolen Produkten interessiert sind, müssen Sie noch viele neue und interessante Dinge entdecken. Beginnen Sie mit unseren Webinaren und werden Sie ein echter Profi - mit Hilfe des Jahreskurses "Webdesign von 0 bis PRO".

Fortsetzung

Also lass es uns schon tun.

Zunächst habe ich ein unkompliziertes Layout erstellt, das wir mit Ihnen komplett zerlegen werden. So sieht es aus:

Wie Sie sehen, stellte sich heraus, dass die Vorlage nicht kompliziert war. Dies ist natürlich eine Blog-Vorlage, die wir später in HTML erstellen werden. In der Zwischenzeit werden wir nur zeichnen. Nun, jetzt lass uns gehen.

Dokument erstellen und in der Größe ändern

Um ein neues Dokument in Photoshop zu erstellen, müssen Sie zu „Datei“ wechseln und auf „Erstellen“ klicken. Daraufhin wird ein Fenster angezeigt, in dem Sie die entsprechenden Größen festlegen müssen.

Die Abmessungen hängen davon ab, wie breit Ihre zukünftige Site sein wird. Sie haben beispielsweise festgelegt, dass die fertige Site eine Breite von 1000 px haben soll. Daher muss die Größe des Dokuments um 1200 px erhöht werden. Dies geschieht in erster Linie aus praktischen Gründen, damit Ihr Layout so aussieht wie im Browser.

In Bezug auf die Höhe wird die Größe anhand des Themas der Vorlage festgelegt. Aber am liebsten mehr machen, 4000 rx denke ich das reicht. Dies geschieht so, dass in Zukunft alle Elemente passen. Weil ich irgendwie eine kleine Höhe gemacht habe und dann alles auf ein neues Dokument übertragen musste.

In meinem Fall hat die Site eine Breite von 1200px. Also habe ich ein Dokument mit einer Breite von 1300 px und einer Höhe von 4000 px erstellt. Lassen Sie die restlichen Einstellungen unverändert.

Website Vorlage Hintergrund

Nachdem wir das Dokument erstellt haben, erstellen Sie zunächst den Hintergrund für die Site. Es spielt keine Rolle, ob es sich um eine Farbe oder ein Bild handelt, aber machen Sie es. In meinem Fall ist es nur ein weißer Hintergrund. Wählen Sie das Füllwerkzeug in der Farbpalette, wählen Sie die weiße Farbe und klicken Sie dann einfach auf den Hintergrund.

Mit Text arbeiten

Zuallererst. Vergessen Sie niemals das Design. Die Farbe des Texts und des Hintergrunds sollte in Bezug auf Kontrast und Lesbarkeit ausgewählt werden. Der Haupttext muss lesbar sein.

Vergessen Sie nicht, dass eine bestimmte Schriftart, die nicht auf dem Gerät des Benutzers installiert ist, vom Browser durch die Standardschriftart ersetzt wird. Dadurch besteht die Gefahr, dass die Website stark an Aussehen verliert. Verwenden Sie daher in Ihrem Design gängige Schriftarten.

  • Töte den Klienten. Aber es wird kein Geld verdienen. Und außerdem ist diese Gewalt in keiner Weise mit Design verbunden,
  • Rastere die Schrift und verwende Bilder. Dies ist jedoch nicht besser als die erste Option. Und hier ist warum. Briefe werden mit Serifen versehen und sind schwer zu lesen. Dieser Text wird von Suchmaschinen nicht indiziert, wodurch es unmöglich wird, hohe Positionen in Suchmaschinenergebnissen zu erreichen. Die Bilder sind groß und die Website benötigt viel Zeit zum Laden. Vor allem auf einem mobilen Gerät mit einer langsamen Verbindung,
  • Laden Sie die Schriftart mit CSS auf den Computer des Benutzers herunter. Dies ist jedoch möglicherweise nicht möglich, wenn der Benutzer der Installation unbekannter Schriftarten, dem Verlust von Datenverkehr und Zeit nicht zustimmt.
  • Wählen Sie aus Schriftarten, die der Unternehmensschriftart ähnlich sind. Das heißt, erledigen Sie die Arbeit für den Encoder, der diese Schriftarten registriert. Dies funktioniert so, als ob die gewünschte Schriftart nicht auf dem Computer installiert ist. Der Browser betrachtet sie und wählt die erste aus der Liste der auf dem Computer installierten Schriftarten aus. Möglicherweise liegt auch ein Problem vor, wenn die gewünschte Schriftart nicht auf dem Client-Computer installiert ist.
  • Sie können den Cufon-Dienst von jQuery aus verwenden. Auf diese Weise können Sie benutzerdefinierte Schriftarten mit minimalem Verlust auf die Site hochladen. Der Dienst funktioniert nur mit True Type-Schriftarten (im TTF-Format).
  • Machen Sie ein Remake des Markenbuchs des Kunden und ändern Sie die Unternehmensschriftart in Arial.

Diese Publikation ist eine Übersetzung von How to design the site? "Vorbereitet von dem freundlichen Team des Projekts Internet technology.ru

Die Breite der zukünftigen Site in 1200 px

Jetzt müssen wir die Größe der zukünftigen Site so einstellen, dass sie genauso aussieht wie im Browser. Wir werden dies mit einem Lineal tun. Wenn es bei Ihnen nicht aktiv ist, müssen Sie in die Ansicht gehen und das Kästchen gegen "Leitung" ankreuzen. Dann sollte es in Ihrem Ansichtsfenster erscheinen.

Und so sieht sie aus:

Wählen Sie unsere Ebene aus, Sie müssen nur einmal darauf klicken:

Und jetzt müssen Sie das Lineal in die Mitte unseres Dokuments setzen oder besser die Mitte finden. Bewegen Sie dazu den Mauszeiger über das Lineal, halten Sie die linke Maustaste gedrückt und zeichnen Sie eine Linie zu unserem Dokument. Um die Mitte ziehen, das Lineal selbst findet die Mitte.

Nachdem wir die Mitte gefunden haben, müssen wir unsere Site mit einer Breite von 1200 px in der Mitte des Dokuments platzieren, das eine Größe von 1300 px hat. Wählen Sie dazu das Werkzeug "Rechteckiger Bereich" aus, und legen Sie den Stil für die festgelegte Größe von oben fest. Dabei schreiben wir die folgenden Werte: Breite - 1200 px, Höhe 400 px. Als nächstes klicken Sie einfach auf unseren weißen Hintergrund und wir haben einen ausgewählten Bereich der Breite, die wir benötigen.

Jetzt platzieren wir unseren ausgewählten Bereich mit der Maus in der Mitte, er findet die Mitte selbst. Dann müssen Sie 2 weitere Lineale herausziehen und auf beiden Seiten des ausgewählten Bereichs installieren. So markieren wir die Grenzen unserer zukünftigen Site, die eine Breite von 1200 px haben wird. Auch in dieser Zeile ist es einfacher, die Gestaltungselemente anzupassen. Wenn Sie das nicht verstehen, machen Sie dasselbe wie in der Abbildung unten.

Wir werden die Leitung in Zukunft nutzen, da wir darauf nicht verzichten können, können wir damit alles genau einstellen.

Jetzt haben wir unser Dokument fast vollständig vorbereitet. Wir haben die Mitte gelernt und auch die genaue Größe angegeben, für die Sie nicht klettern müssen. Nun wenden wir uns dem interessantesten zu, nämlich dem Erstellen eines Website-Designs (Layouts).

Erstellen eines Website-Designs oder -Layouts

Wichtig!

Erstellen Sie immer Gruppen für Ebenen und geben Sie ihnen Namen. Denn in Zukunft werden Sie definitiv verwirrt sein!

Wir erstellen eine Gruppe und nennen sie "Kopfzeile" (Hat). Wir erstellen ein "Hauptmenü" unter der Gruppe, da wir von dort aus beginnen. Erstellen Sie in der Gruppe eine neue Ebene und nennen Sie sie "Hintergrund". Dies wird der Hintergrund unseres Top-Menüs sein.

Folgendes sollten Sie bekommen:

Top Menü

Wieder ziehen wir das Lineal heraus und setzen es wie im Bild:

Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:

В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:

Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.

Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Erstellen Sie eine neue Ebene und wählen Sie das Werkzeug „Linie“. Halten Sie dann die Umschalttaste gedrückt und ziehen Sie eine vertikale Linie durch den gesamten blauen Hintergrund unseres Menüs.

Doppelklicken Sie mit der Maus auf die Ebene. Ein Fenster mit einem Ebenenstil wird geöffnet. Wir kreuzen "Color Overlay" an und treiben diese Farbe hier an # 0aaacc.

Gehen Sie zum "Schatten" und stellen Sie die folgenden Parameter ein:

Folgendes sollten Sie bekommen:

Danach kopieren Sie einfach die Ebene mit unserer Linie und stellen sie nach jedem Wort ein. Folgendes habe ich bekommen:

Social Bookmarking Icons

Hier im Menü werden nur auf der rechten Seite Lesezeichensymbole hinzugefügt. In meinem Fall sind dies Zahlen, aber Sie können die üblichen heruntergeladenen Symbole einfügen. Sie können es hier herunterladen.

Verwenden Sie zunächst das Lineal, um die Höhe unserer Symbole so einzustellen, dass sie gleichmäßig sind. Folgendes müssen Sie tun:

Dann erstellen wir eine Gruppe, nennen sie "Social Bookmarks", erstellen eine neue Ebene darin. Klicken Sie nun auf das Werkzeug "Freie Form" und wählen Sie die gewünschte Form aus:

Bewegen Sie den Cursor an die Stelle, an der sich das Symbol befinden soll, halten Sie die Umschalttaste gedrückt (damit das Symbol gleichmäßig angezeigt wird) und strecken Sie es auf die gewünschte Größe. Und wir wiederholen den gleichen Vorgang mit den folgenden Abbildungen. Letztendlich sollte Folgendes passieren:

Wir gehen zum Logo über. Erstellen Sie erneut eine separate Gruppe für das Logo und in einer neuen Ebene.

Wir gehen auf diese Seite und laden die Schrift herunter. Wählen Sie das Werkzeug Horizontaler Text. Wir suchen im Schriftfeld nach dem Namen unserer Olivier-Schrift. Wir klicken auf die Stelle, an der sich das Logo befinden soll, und schreiben den Namen in Englisch, da diese Schriftart das kyrillische Alphabet nicht unterstützt. Folgendes sollten Sie bekommen:

Erstellen Sie die Gruppe "Unteres Menü" und eine neue Ebene.

Unteres Menü (Hauptmenü)

Stellen Sie die Lineale wie in der Abbildung ein:

Wählen Sie das Werkzeug Rechteckiger Bereich und wählen Sie. Füllen Sie dann den ausgewählten Bereich mit dieser Farbe # 303030. Folgendes sollten Sie bekommen:

Deaktivieren Sie in der Registerkarte "Auswahl". Gehen Sie nun zur Registerkarte Filter - Rauschen und wählen Sie Rauschen hinzufügen. Dann setzen wir diese Werte:

Fügen Sie den Namen der Überschriften hinzu, klicken Sie auf das Werkzeug "Horizontaler Text" und schreiben Sie den Namen der Überschriften.

Zeilen hinzufügen. Sie werden wie im oberen Menü erstellt, nur die Farbe der Linie selbst wird geändert. Ich denke, dass Sie es schaffen, und dies sollte sich wie folgt herausstellen:

Nun wenden wir uns dem Panel mit Informationen zu, die dem Benutzer mitteilen, wo er sich auf der Site befindet.

Erstellen Sie wie in der Gruppe "Kopfzeile" üblich die Gruppe "Infofenster" mit einer neuen Ebene.

Informationsbereich

Fügen Sie zunächst wie in der folgenden Abbildung Streifen vom Lineal hinzu:

Wählen Sie das Werkzeug „Rechteckiger Bereich“, wählen Sie den Bereich direkt unter dem Menü aus und füllen Sie ihn mit der schwarzen Farbe # 000000

Als nächstes erstelle eine neue Ebene, wähle dann mit demselben Werkzeug den Bereich darunter aus und fülle ihn mit dieser Farbe #eeeeee

Deaktivieren Sie, nehmen Sie "Horizontal Text", ändern Sie die Schriftgröße auf 48 pt und die Farbe # a4a4a4. Wir schreiben "Recent Entries". Hier ist, was Sie am Ende haben sollten:

Wir wenden uns der Mitte unseres zukünftigen Standorts zu. Mit dem Lineal müssen wir festlegen, wo sich die Pfostenblöcke und der Sitebar-Block (rechte Spalte) befinden.

Sofort müssen Sie 2 separate Gruppen erstellen:

  • Tags - In dieser Gruppe fügen wir Text mit der Größe unserer Spalten hinzu.
  • Inhalt - Eine Gruppe, in der sich unsere gesamte Mitte des Standorts befindet.

In der Inhaltsgruppe erstellen wir unter der Gruppe „Links“, in der sich unsere Blöcke mit Datensätzen befinden.

Wählen Sie das Werkzeug „Rechteckiger Bereich“, stellen Sie den Stil „Größe festlegen“ ein und stellen Sie die Breite auf 800 Pixel und die Höhe auf 100 Pixel ein. Hier ist die Zusammenfassung:

Fügen Sie Linien aus dem Lineal wie im Bild hinzu und deaktivieren Sie:

Es stellte sich heraus, dass wir zwei Zeilen hinzugefügt haben und den Bereich erhalten haben, in dem sich unsere Blöcke mit Datensätzen befinden werden.

Erstellen Sie in der Gruppe "Inhalt" eine Untergruppe mit dem Namen "Rechts" (Saytbar). Wir markieren einen Platz für die rechte Spalte der Site.

Auch hier nehmen wir einen "rechteckigen Bereich", aber im Stil des Bereichs setzen wir eine etwas kleinere Größe, Breite 350px, und belassen dies bei 100px. Und dann machen wir alles wie in der Abbildung:

Jetzt wissen wir genau, wo es Blöcke mit Datensätzen und eine Website-Leiste geben wird. Und alles wird glatt.

Erinnerst du dich, dass wir eine Tag-Gruppe erstellt haben? Erstellen Sie dort einfach eine Ebene mit Blockgrößenbeschriftungen. So funktioniert das:

Diese Tags helfen sehr beim Layout. Sie müssen sich die Größe nicht merken.

Blöcke aufzeichnen

Vielleicht beginnen wir mit Blöcken mit Datensätzen, die in diesem Fall sehr einfach erstellt werden.

Erstellen Sie in der Gruppe „Links“ eine Untergruppe „Block“ und eine neue Ebene.

Wählen Sie erneut das Werkzeug „Rechteckiger Bereich“. Im Stil setzen wir die Maße 800 x 300. Passen Sie die Linie an. Dann fülle es mit dieser Farbe # d9d9d9. Das ist unsere Miniatur.

Fügen Sie in derselben Gruppe eine Beschriftung mit dem Text wie in der Abbildung oben hinzu.

Fügen wir nun dem Eintrag einen Titel hinzu. Nehmen Sie den “Horizontalen Text”, stellen Sie die Größe auf 35 pt und die Farbe ist schwarz. Direkt unter der Miniaturansicht hinzufügen:

Fügen Sie dem Beitrag Informationen hinzu. Stellen Sie die Schriftgröße auf 14 pt und die Farbe näher an Grau:

Und die Beschreibung für den Beitrag:

Nun fügen wir die Schaltfläche Weiter hinzu. Sie ist auch sehr einfach. Wir wählen das Werkzeug "Rechteck mit abgerundeten Ecken", geben ihm die Farbe # 0dbfe5 und der Radius der Ecken beträgt 2px. Und zeichne einen Größenknopf, den du magst:

Fügen Sie nun den Text hinzu und sehen Sie, was wir bekommen:

Um zumindest viele Datensätze zu teilen, erstellen wir ein einfaches Kreistrennzeichen.

Erstellen Sie eine Gruppe "Separator", wählen Sie "Oval Area", erstellen Sie eine Ebene. Zeichnen Sie unter dem Block mit den Umschalttasten einen Kreis und füllen Sie ihn mit dieser Farbe #efefef.

Heben Sie die Auswahl auf und suchen Sie mit dem Lineal nach der Kreismitte

Wählen Sie eine Ebene mit unserem Kreis aus, drücken Sie die rechte Maustaste und wählen Sie "Eine doppelte Ebene erstellen". Ziehen Sie es etwas nach links.

Gehen Sie im oberen Bereich zur Registerkarte "Bearbeiten" - Transformation und wählen Sie Skalierung. Machen Sie den Kreis ein wenig kleiner als den ersten, während Sie die Umschalttaste gedrückt halten, um den Kreis zu glätten.

Folgendes sollten Sie bekommen:

Kopieren Sie die Ebene dieses kleinen Kreises und verschieben Sie sie erneut nach links. Reduzieren Sie außerdem genau die Größe wie oben beschrieben, so dass es so aussieht:

Jetzt müssen Sie ein Duplikat des mittleren Kreises erstellen und nach rechts verschieben und das Gleiche mit dem kleinen Kreis tun. Um es klarer zu machen, gehen Sie wie in der Abbildung vor:

Was aber nur in der Normalgröße passierte:

Jetzt platzieren wir den Datensatzblock unter dem Block. Erstellen Sie ein Duplikat unserer Gruppe "Block". Wählen Sie in der Symbolleiste den Cursor (ganz oben). Und ziehen Sie unseren Datensatzblock nach unten. und so mache es 5 mal.

Seitenleiste (rechte Spalte)

Wir finden unsere Sidebar-Gruppe und erstellen darin die Such-Untergruppe. Mit der Linie machen wir das so:

Wählen Sie das Werkzeug „Rechteckiger Bereich“ und wählen Sie das Suchfeld aus. Füllen Sie es dann mit dieser Farbe #eeeeee

Vergessen Sie nicht die Auswahl aufzuheben, klicken Sie auf das Werkzeug "Horizontaler Text" und geben Sie in das graue Feld das Wort "Suchen" ein

Wählen Sie links das Werkzeug „Freie Form“ und suchen Sie die Lupenform von oben. Es ist in Standardabbildungen. Erstellen Sie eine Ebene in der Gruppe "Suchen", zeigen Sie auf das Feld und zeichnen Sie unsere Form, während Sie die Umschalttaste gedrückt halten.

Das Suchfeld ist fertig. Gehen Sie nun zu den Widgets.

Erstellen Sie eine Widget-Gruppe und eine neue Ebene darin. Fügen Sie dann die Zeilen wie gezeigt hinzu. Dies ist der Hintergrund unserer Kopfzeile und füllt sie mit den folgenden Farben: #eeeeee

Jetzt müssen wir den Titel zu unserer Überschrift hinzufügen, wir tun dies mit Text. Fügen Sie dem Titel ein Symbol hinzu. Dazu müssen Sie eine beliebige Form auswählen, die Ihnen gefällt und die von Bedeutung ist :) Vergessen Sie nicht, beim Hinzufügen einer Form die Umschalttaste gedrückt zu halten. Und fülle es mit dieser Farbe # 0dbfe5

Und natürlich müssen Sie Einträge zu unseren Widgets hinzufügen. Sie müssen das horizontale Textwerkzeug auswählen und dann die Größe auf 16 pt einstellen. Und mach ka im Bild unten

Dann erstelle einfach ein Duplikat der Gruppe und ziehe das Widget nach unten. Wir machen das gleiche wie bei den Posts.

Jetzt können wir ein fast fertiges und einfaches Layout für unseren zukünftigen Standort beobachten.

Fußzeile (Ende der Seite)

Nun, was ist ohne ihn? In dieser Vorlage ist es auch nicht sehr kompliziert.

Alles, wie üblich, erstellen Sie die Gruppe "Futer" und die Ebene darin. Und markieren Sie es mit einem Lineal, wählen Sie unser bevorzugtes rechteckiges Werkzeug aus, wählen Sie es aus und füllen Sie es mit # 0dbfe5

Auswahl aufheben. Wir nehmen "Horizontal Text" wir finden die Schrift, die wir heruntergeladen haben (Olivier), und geben unser Logo ein, nur die Farbe des Textes ist etwas dunkler.

Und auf der rechten Seite unserer Fußzeile fügen wir dasselbe Menü wie oben hinzu, jedoch ohne Linie. Es kann sogar einfach kopiert und nach unten verschoben werden.

Das ist alles, Freunde, der ns hat ein fertiges Layout, das schon ausgedacht werden kann :)

Auch hier ist seine PSD-Datei für Sie. Laden Sie es herunter und prüfen Sie, ob Sie etwas nicht verstehen.

Freunde, wenn dir etwas nicht klar ist, frage unbedingt in den Kommentaren nach.

Pin
Send
Share
Send
Send