Dies Adobe Photoshop Tutorial zeigen und diskutieren, wie man Photoshop die Gestaltung einer Web-Site, die ausgeführt werden, wie html und Image-Scheiben. Dies kann später werden in eine html Editor-Programm wie Adobe Dreamweaver. Dies ist ein Adobe Photoshop Web-Design-Tutorial zeigt, wie Sie eine ganze Web-Seite direkt in Photoshop.
Abraham chaffin creativecow.net, Cambria, Kalifornien, USA
Es gibt viele verschiedene Möglichkeiten, um die Gestaltung einer Website. Einige wählen die Entwicklung die ganze Sache in Dreamweaver, Oder eine schnelle Skizze auf dem Papier und dann ihre Website, , während andere lieber eine grafische Design-Ansatz und die Verwendung Photoshop als Design-Werkzeug. Erstellen Sie Ihre Website als Photoshop Datei zunächst die SchafSpaßg von Ihrer Website später viel einfacher, aus verschiedenen Gründen.
Beginn eines jeden Design-Konzept ist es, eine gute Inspiration von etwas, das sehen Sie schon. Wie ein Maler erhält Inspiration aus der Welt um sie herum, Ein Web-Designer wird auch inspiriert von dem, was sie sehen. Manchmal ist, dass eine bestehende Website, Website-Vorlagen, Oder von einem Bild, Grafik, Oder das Logo.
Neben einer guten Inspiration zu erkennen ist Ihre Zielgruppe und Gestaltung rund um, was sie sind komfortabel mit. Layout und Stil werden in einigen Übereinstimmung mit dem, was Ihr Publikum ist bereits zu. Bildschirmauflösung muss ebenfalls in Betracht gezogen werden bei der Gestaltung einer Website. Die Breite der Seite und das erste mal von Ihrer Seite sind wichtig für den Erfolg Ihrer Website. (die Klappe ist der Bereich Ihre Zuschauer, bevor sie haben, um die Seite.), Während nur die Aufnahme von größeren Auflösungen könnte Ihre Arbeit leichter Schneiden Sie sind ein Teil des Publikums. Die Mehrheit der Web-Nutzer heute größeren Auflösungen als je zuvor und in der Zukunft von Websites, die für kleine Bildschirmauflösungen wird weniger ein Faktor, aber jetzt ist es noch zu berücksichtigen.
Es ist auch möglich, für Ihre Website, eine flexible Breite, so dass es erweitert und Aufträgen auf der Grundlage einer Benutzer Fenstergröße, Dies ist optimal, wenn Sie versuchen, um eine Website, die jeder Aufnahme. Eine Website entwickelt, um ein Fenster Größe von mindestens 750 Pixel breit ist optimal. Die minimale Auflösung, die von den meisten Menschen heute ist 800 x 600.
Die Schritte von der Erstellung Ihrer Webseite mit Photoshop sind:
1. Verwenden Photoshop um das Aussehen und Layout der Website, auf die Sie wollen.
2. Stück das Bild in Photoshop, Export der Bilder in Scheiben geschnitten oder als html. Verständnis html Formatierung ist sehr hilfreich für die Interpretation, wie Sie Ihr Bild Scheibe zu gehen in die html.
3. Die html Vorlage an die Photoshop Website-Design-and-Drop die Bilder in Scheiben geschnitten oder die Verwendung Dreamweaver , um die html Datei, die Photoshop aus Ihrer PSD Scheiben.
Die Gestaltung einer Website in diesem Tutorial wird aus einem Bild der Bessie in ihrer Weide.
Dies sollte ein glückliches site = o
Erstellen einer Header-Grafik
Den ersten Teil von der Gestaltung einer Website in Photoshop ist die SchafSpaßg einer Header-Grafik für Ihre Website. Der Header-Grafik ist der grafische Teil Ihrer Website zu sehen, die erste und wird das Zentrum für die allgemeine "Look and Feel" Ihrer Website. Erhalten die fertigen Header-Grafik Hier.
Schritte, die:
1. Recht klicken Sie hier Zum Speichern des Bildes. Speichern Sie das Bild in einem neuen Ordner.
2. Öffnen Sie die heruntergeladene Datei in Photoshop.
3. Das Bild auf 745 x 320 mit der Kuh-Logo auf der rechten Seite des Bildes. Um dies zu tun wählen Sie die rechteckige Festzelt Tool (m), Dann unter dem Drop-Down-Stil wählen feste Größe. In 745 px für die Breite und 320 px für die Höhe. Ihre Position Festzelt, um Ihren Kopf und das Bild (Bild-Menü Kultur).
4. Ein kleines 10 Pixel Feder am oberen Rand des Bildes. Wählen Sie das Werkzeug Farbverlauf (g), Klicken Sie auf das Gefälle in der oberen Gradienten-Tool-Fenster, Die Start-und End-Farben weiß, Den Start Deckkraft auf 0% und die Trübung bis zu 100%. Eine neue Ebene und ziehen und die Rampe an der Spitze halten, um die Verlagerung Rampe direkt.
5. Verringerung der Grafik durch die SchafSpaßg einer anderen Rampe an, über die Bild ab, während an der Unterseite und der Blitz nach oben (SHIFT gedrückt halten, um die Rampe direkt). Der Endpunkt der Rampe sollte ca. 300 Pixel über das Bild, um eine schöne Dunst auf die Grafik. Dies gibt das Erscheinen eines heller Tag in der Kuh Bauernhof.
6. Schließlich werden wir zur Erleichterung der Header-Grafik noch weiter, indem sie einen anderen vertikalen Rampe in die entgegengesetzte Richtung wie zuvor, nur. Ausgangspunkt sollte auch mit der Spitze des Kuh-Logo und unten sollte 1 Pixel über dem unteren Teil der Grafik.
7. Speichern Sie die Header-Grafik in einem Ordner, in dem Sie sich um Ihre Website mit "Save for Web (Alt + Umschalttaste + Strg + S). Speichern als jpg, Optimiert, Auf etwa 70 Qualität.
Ihre Header-Grafik ist nun erstellt. Die Grafik kann auf unterschiedliche Art und Weise in eine Website-Vorlage. Sie at it's Skalenendwerts und wickeln die Navigation und Text um ihn herum, Oder in der Größe reduziert, und legen Sie sie in eine moderne Design-Vorlage Layout.
Gestaltung einer Website in Layout Photoshop
Das Design Ihrer Website, sollten über eine mindestens drei verschiedene Teile, die sich auf spezifische Elemente:
1. Header
Firmenlogo
Grafik Banner
Links / Buttons für die Startseite, über, Und Kontakt-Seite
2. Körper
Content-Bereich für den Text auf der Seite
Bilder oder Grafiken Aufgenommen mit dem Inhalt
3. Footer
Copyright-Informationen
Links zu Politik / Nutzungsbedingungen, Und zurück nach oben Link
Bei der Erstellung der Layout-Design in Photoshop Stellen Sie sicher, dass genügend Spielraum für zusätzliche Navigation, Text, Ort und Expansion in die Zukunft oder sind Sie vielleicht zu müssen vollständig Redesign Ihrer Website, weil Sie nicht Raum für Links zu weiteren Seiten in Ihrem Design. Die folgenden Schritte sind für die Erstellung des Layouts für die Photoshop Website-Layout, die sich Download hier.
Schritte, die:
1. Erstellen Sie eine neue PSD Datei 745 px x 600 px und speichern Sie es als Layout.PSD
2. Die Header-Grafik in das Dokument. (Öffnen Sie die Header-Datei (g_header.Jpg), Wählen Sie es aus (Strg + A), Kopieren (Strg + C), Aktivieren Sie das Layout.PSD Fenster, Einfügen (Strg + v).)
3. Benutze das Verschieben-Werkzeug (V), um den Kopf an die Spitze der Layout-Schicht Betrieb zu vermieten sie einrastet an der Spitze.
4. Öffnen Sie die Firmenlogo, Kopieren und fügen Sie ihn in Ihr Layout.
5. Aus dem Logo (Strg + T) und verschieben Sie sie in der linken oberen Ecke der Website-Layout.
6. Geben Sie die horizontale Instrument (t) Einige kleine Text-Links in der Luft zwischen den beiden Logos auf den Leiter. Geben Sie das Wort "Heimat", 4 Leerzeichen, "Kontakt", Weitere 4 Räume, Und dann "über". Text sollte ungefähr 12 pt, Schriftart "Arial", Mit der Farbe # a6ff94 für einen Spaß hellgrüne Farbe.
7. Geben den Text ein dropshadow (Layer- Layer Style dropshadow) mit einem Abstand von 2 und einer Größe von 3.
8. Positionieren Sie den Text mit dem Verschieben-Werkzeug und den Pfeiltasten entsprechend neben dem Logo oben links.
9. Unter den kleineren Kuh Logo erstellen wir einige größere Navigation / Bild links:
Geben Sie die horizontale Instrument (t) Art "Home Seite 1 Seite 2 Seite 3 Seite 4" mit Arial, 17 pt Schrift mit schwarzem Text. Die etwa 4 oder 5 Leerzeichen zwischen den Wörtern, um die Tasten etwas Platz.
Erstellen Sie eine neue Ebene
Und ziehen Sie sie unter den Text, den Sie gerade erstellt
Mit dem rechteckigen Zelt Tool (m) wählen Sie einen Bereich um die größeren Navigation.
Wählen Sie das Farbeimer-Werkzeug (g) und füllen den ausgewählten Bereich der neuen, leeren Ebene mit (# a6ff94) die grüne Farbe.
Diese Schicht wie ein Schalter, indem Sie auf das Layer-Menü Layer Style Bevel und Emboss. Verwenden Sie die Standard-Einstellungen durch Drücken der Taste OK
Mit dem einzigen Spalte Festzelt Werkzeug löschen Sie eine Spalte der Pixel zwischen den einzelnen Wort in der festen grünen Hintergrundebene Sie gerade erstellt. Dies wird brechen die Fase und jedes Wort wie eine separate Taste. Sie müssen um das Bild zu vergrößern, um in den Worten.
8. Duplizieren Sie die grüne Taste, indem Sie sie auf den neuen Layer Oder gehen Sie auf die Layer-Menü " " Duplizieren "-Schicht.
9. Wählen Sie die grüne Taste unteren Schicht und eine Motion Blur auf die Ebene mit einem Abstand von ca. 150 Pixel, indem Sie auf das Menü Filter Blur Motion Blur.
10. Den verwischt Schicht nach etwa 10 Punkte niedriger und die Deckkraft auf 20%. Daraus ergibt sich eine feine Linie unter den Tasten, um die Kluft nach oben aus dem Inhalt.
12. Erstellen Sie eine neue Ebene hinter dem Copyright-Text, wird der Hintergrund hinter den Fußnoten, Stellen Sie sicher, dass die Schicht ausgewählt ist.
13. Verwenden Sie die Rechteck-Werkzeug Festzelt (m), um ein Gebiet in der unteren Teil der Seite, sondern nur ein wenig höher als das Urheberrecht Text.
14. Benutze das Farbeimer-Werkzeug (g) und füllen Sie die mit dem hellen Grün (# a6ff94).
15. Feder Rand mit der inneren Schicht leuchten Stil (Layer-Menü Layer Style innere Glut) die Mischung zum normalen Modus, Farbe weiß (# ffffff) und die Größe auf 10 Pixel.
Wir haben jetzt für eine einfache, Spaß, Website Photoshop mit einem Kopf-und Fußzeile. Die Leerzeichen zwischen den Kopf-und Fußzeile werden alle Text-Inhalte und Bilder, die füllen im aktuellen Web-Site.
Slicing Bilder in Photoshop für das Web
Nun, da haben wir eine einfache Website mit Photoshop Wir werden sie in Stücke schneiden und exportieren Sie die Stücke als html Datei, die später verwendet werden kann und geändert Dreamweaver. Slicing, wenn Sie Ihre Website-Design nicht vergessen, dass jedes Stück wird eine gesonderte Zelle einer Tabelle und Bild, so versuchen Sie, um die Scheiben so wenig und so einfach wie möglich. Stellen Sie sicher, dass Anfang und Ende und Ihre Scheiben außerhalb des Design wann immer dies möglich ist, so Photoshop Fehler nicht ein einziges Pixel können Sie verpasst haben, als ein Stück. Öffnen Sie die Website-Design haben wir früher, Wählen Sie das Slice-Tool (k) und Let's get started. (wiederum auf Snap für bessere Ergebnisse - Menü "Ansicht" Snap (Strg + Umschalt +;), Stellen Sie sicher, dass Snap zu Schichten eingeschaltet.) Laden Sie die In Scheiben geschnitten PSD Datei hier.
Schritte, die:
Erstellen Sie eine Scheibe um die ganze Grafik. Start außerhalb der Grafik-und Ende außerhalb der Grafik. Dies wird dazu beitragen, sagen Photoshop nicht zu schaffen einzigen Pixelgrafiken irgendwo, dass wir nicht wollen,.
Scheibe der Fußzeile Grafik Beginn und Ende im grauen außerhalb des Layout. Sie finden das Einrasten der Spitze der Schicht für Sie.
Scheibe der Kopf ganz am oberen Rand beginnend über die Grafik in der grauen und endet knapp unter dem größeren Navigation. Dies sollte Teil der Kuh in zwei (oh nein! ). Sie sollten nun 3 Scheiben für Ihren Kopf-Teil, Ihre Inhalte, Und Ihre footer.
Scheibe alle Tasten, Versuchen, um sicherzustellen, dass Sie das Einrasten der gleichen Position für jede Taste, so dass die Höhe der Tasten sind die gleichen. Für den unteren, Größere Tasten können Sie Snap an der Unterseite des umgebenden Scheibe.
Dein Photoshop Web-Design werden in Scheiben geschnitten und nun bereit, um für das Web.
Export / Speichern Photoshop Scheiben als Web-Seite
In früHiern Versionen von Photoshop Speichern eines Bildes in Scheiben geschnitten für das Web kann nur mit ImageReady, aber jetzt ist alles in Adobe Photoshop CS3. Die folgenden Teil der Anleitung zeigt Ihnen, wie Sie die in Scheiben geschnittenen Website-Design haben wir in Photoshop als html Datei mit den dazugehörigen Bildern.
Schritte, die:
Mit dem in Scheiben geschnittenen Grafik öffnen Wählen Sie im Menü Datei Speichern für Web und Geräte (Alt + Umschalttaste + Strg + S). Dies führt zu speichern, die für das Web und Geräte-Fenster.
Im Rahmen der Dropdown-Preset wählen Sie JPEG für die hohe Qualität und Datei-Typ. (dies ist nur eine Präferenz.)
Klicken Sie auf die optimierte arrow Menü zu öffnen, die Unter-Menü und klicken Sie auf "Bearbeiten"-Einstellungen...
Wir gehen nicht ins Detail auf die Ausgabe-Einstellungen hier. Wählen Sie Standard-Einstellungen aus der Dropdown-Einstellungen. Nutzung vorh. und neben dem Blick auf alle Einstellungen.
Klicken Sie auf OK, und speichern Sie dann. Stellen Sie sicher, dass Sie sich in einen Ort können Sie leicht.
Wählen Sie als Typ: html und Bilder (*.html )
Einstellungen: Standardeinstellungen
Scheiben: Alle Scheiben
Klicken Sie auf Speichern
Herzlichen Glückwunsch Sie haben nun erfolgreich für eine Website mit Photoshop, Es in Scheiben geschnitten, Und dann erfolgreich exportiert sie als html Datei! Es gibt einige einfache Änderungen, die es zu tun, aber vor dem Design kann vollständig als Web-Seite oder Website-Templates, aber ich lasse, dass für einen anderen Tutorial.
Nun, da haben wir eine einfache Website mit Photoshop Wir werden sie in Stücke schneiden und exportieren Sie die Stücke als html Datei, die später verwendet werden kann und geändert Dreamweaver. Slicing, wenn Sie Ihre Website-Design nicht vergessen, dass jedes Stück wird eine gesonderte Zelle einer Tabelle und Bild, so versuchen Sie, um die Scheiben so wenig und so einfach wie möglich. Stellen Sie sicher, dass Anfang und Ende und Ihre Scheiben außerhalb des Design wann immer dies möglich ist, so Photoshop Fehler nicht ein einziges Pixel können Sie verpasst haben, als ein Stück. Öffnen Sie die Website-Design haben wir früher, Wählen Sie das Slice-Tool (k) und Let's get started. (wiederum auf Snap für bessere Ergebnisse - Menü "Ansicht" Snap (Strg + Umschalt +;), Stellen Sie sicher, dass Snap zu Schichten eingeschaltet.) Laden Sie die In Scheiben geschnitten PSD Datei hier.
Einige kleine Text-Links in der Luft zwischen den beiden Logos auf den Leiter. Geben Sie das Wort "Heimat", 4 Leerzeichen, "Kontakt", Weitere 4 Räume, Und dann "über". Text sollte ungefähr 12 pt, Schriftart "Arial", Mit der Farbe # a6ff94 für einen Spaß hellgrüne Farbe.
Und ziehen Sie sie unter den Text, den Sie gerade erstellt
