Wie man eine Web-Seite Vorlage von Grund auf neu zu bauen

Das Standardwerkzeug für Digitalagenturen und Inhouse-Abteilungen für den Aufbau von Website-Grafiken ist Adobe Photoshop. Obwohl Feuerwerk optimiert und speziell gebaute Web-Grafik-Quelldateien zu erzeugen, es hat einfach nicht gefangen, wahrscheinlich wegen der massiven Umschulungsaufwand wäre es mit sich bringen, um ganze Abteilungen den Schalter zu machen. So legen Sie eine neue Web-Layout-Vorlage auf:

  1. Starten Sie Photoshop.

  2. Wählen Sie Datei-Neu.

    Im Dialogfenster geben Sie eine Leinwand Dimension von 1200 Pixel breit und 1000 Pixel hoch erscheint. Die Auflösung sollte auf 72 dpi eingestellt werden (Pixel pro Zoll, tatsächlich). Der Farbmodus sollte RGB-Farbe sein. Die Hintergrundfarbe kann weiß sein. Klicken Sie auf OK.

  3. Aus dem Photoshop-Menü wählen Sie Einstellungen-Allgemein.

    Auf der linken Seite wählen Sie die Einheiten Lineale Option. Dann wird in der Hauptfensterbereich für Lineale, wählen # 147-Pixel # 148- aus dem Drop-Down-Menü. Klicken Sie auf OK.

    Sie werden mit Führer sein. Dazu müssen Sie zunächst aus dem Menü Ansicht auf den Linealen drehen, wie in Schritt 4 gezeigt.

  4. Wählen Sie View-Lineale aus dem Menü.

    Nachdem Sie die Herrscher zu sehen, klicken Sie auf den Seitenlineal links und eine vertikale Führung ziehen und an der 100-Pixel-Marke fallen.

    bild0.jpg
  5. Setzen Sie die 0,0-Marker.

    In der sehr linken oberen Ecke des Dokuments, an der Kreuzung der beiden Herrscher ist ein kleiner Platz mit gepunkteten Linien in ihr. Klicken Sie auf diesen Platz und ziehen, um Ihre Führung bei der 100-Pixel-Marke, aber vorsichtig sein, an der Spitze der Seite zu bleiben. Was Sie versuchen zu tun, halten 0 am oberen Rand der Seite (wo es jetzt ist), aber stellen Sie Ihren aktuellen 100-Pixel-Kennmarke auf 0 statt. Wenn Sie es richtig machen, werden Sie die Nummerierung Update in Ihrem oberen Lineal zu sehen.

  6. Stellen Sie die zweite Führungs Marker.

    Klicken Sie auf das linke Lineal wieder und ziehen Sie ein anderes Führung heraus. Ziehen Sie diesen neuen Leitfaden über die Seite und legen Sie es auf dem 1.000-Pixel-Marke. Wenn Sie die Schritte 1-6 richtig gemacht haben, sollten Sie haben eine 100-Pixel-Rand auf beiden Seiten Ihrer beiden Führungen. Speichern Sie das Dokument.

  7. Drehen Sie den Hintergrund in eine Ebene.

    Im Ebenen-Bedienfeld, sollten Sie nur eine Ebene mit dem Namen # 147-Background # 148- in Kursivschrift. Doppelklicken Sie darauf, es in eine Schicht zu verwandeln, die Transparenz der Lage ist, und der in die Schicht bewegt wird, setzt, dass Sie erstellen. In dem Fenster, das, lassen Sie den Namen als Schicht 0 für jetzt und klicken Sie auf OK.

  8. Erstellen Sie vier Ebenen-Sets.

    Am unteren Rand der Ebenen-Palette finden Sie eine Ordner-Symbol zu sehen. Klicken Sie es viermal verschieden zu schaffen vier Ebenen-Sets (Ordner, die können Schichten enthalten). Sie sind eine gute Möglichkeit, Ihnen zu helfen, organisiert zu halten. Hier sind die Schritte:

  1. Doppelklicken Sie auf die Gruppe 1 Text der untersten Schicht Satz und benennen Sie sie in allen Kappen in den Hintergrund.

    Verwenden Sie alle Kappen für Ordnernamen und Klein für Layer-Namen, ihnen zu helfen zu unterscheiden.

  2. Klicken Sie auf und ziehen Sie die Ebene 0 Schicht in die Menge Hintergrundebene.

  3. Doppelklicken Sie auf die Gruppe 2 Text und es FUSS umbenennen.

  4. Benennen Sie die beiden anderen Ebenen-Sets Inhalt und die Navigation.

Diese Ebenen-Sets sind nur Ihr Ausgangspunkt, und Sie können weniger oder mehr benötigen, wie Sie gehen. Speichern Sie Ihre Vorlage.

image1.jpg

Sie haben jetzt eine leere Leinwand für Ihre kreativen Inspirationen bereit. Wie Sie neue Ebenen erstellen, die auf verschiedene Teile des comp zu arbeiten, nennen sie sofort und stellen Sie sicher, sie werden in der entsprechenden Ebene Satz gezogen. Nicht nur, dass Ihnen helfen, organisiert zu bleiben, jeder andere Designer, die Ihre comp nimmt, um Änderungen vorzunehmen - wie auch die Entwickler, die es benutzen muss, um die HTML-Version zu bauen - wird besser in der Lage einen Sinn zu machen.

Menü