[Photoshop] Portfolio Moderne Homepage

  • Tutorial

  • idontsayit2
  • 5181 Aufrufe 2 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [Photoshop] Portfolio Moderne Homepage

    Hi Leutz,
    da mir im Moment langweilig ist und ich noch nicht schlafen kann, mach ich euch ein Photoshop Portfolio-Tutorial mit Namen "Moderne Homepage".

    Achtung: Das hier soll nur ein Beispiel sein, übernehmt bitte nicht einfach alle Farben etc. sondern probiert selber auch ein bisschen aus, nicht das wir dann wieder 1000 "Moderne Homepage" Styles haben.

    So, jetzt aber los:

    1. Neues Bild erstellen und dann, je nach Größe der Homepage, Breite und Höhe angeben (ich hab mal 1024x768 genommen).

    2. Mit dem Füllwerkzeug (Shortcut: G) die Hintergrundebene mit einem dunklem Grau füllen (z.B. #303030).

    3. Vordergrundfarbe auf #4B4B4B stellen; jetzt nehmen wir das "Abgerundete-Rechteck-Werkzeug" (unter dem Textwerkzeug) und ziehen damit einen inneren Rahmen auf (Ebene so nennen).


    4. Nun wählen wir Auswahl | Farbbereich auswählen und klicken auf unseren inneren Rahmen.
    => Neue Ebene erstellen (Name: Äußerer Rahmen)
    => Auswahl | Auswahl transformieren : in der oberen Leiste bei B: 105 % und bei H: 101% und mit dem Häckchen bestätigen
    =>Bearbeiten | Fläche füllen
    Farbe: #565656
    Transparenz: ca. 40%-50%
    =>Ebene Äußerer Rahmen der Ebene Innerer Rahmen unterordnen

    5. Doppelklick auf Ebene innerer Rahmen
    =>So einstellen:


    6. Doppelklick auf Ebene äußerer Rahmen
    =>So einstellen:


    7. Neue Ebene: "Navigation"
    => Einen schwarzen Strich von der einen Seite bis zur anderen Seite des Inneren Rahmens malen
    => Ebenentransparenz auf 20%

    8. Neue Ebene: "Navigation2"
    => direkt unter den schwarzen einen weißen Strich mit der selben Länge
    => Ebenentransparent 5%

    9. Die Ebenen verbinden (Strg+e)



    10. "Navigation" kopieren
    => Etwas nach unten schieben

    11. Ein kleines Icon erstellen



    12. Jetzt kommt noch unsere Schrift hinein




    Fertig, ich hoffe es hat euch gefallen (ne nette Bewertung kann nie schaden :D ).
  • Tim Glomb schrieb:

    Sehr schönes Tutorial.. habs mal nachgemacht und dann strak abgeändert

    Nun meine Frage: Wie kann ich jetzt, wenn ich die Datei im Photoshop fertig hab, als Homepage verwenden?

    Ist eigentlich nur so eine Art Vorlage, aber man kann auch slicen (mit dem Slice-Werkzeug) und dann als HTML-Page exportieren (Datei|Für Web Speichern und dann beim Speichern als Typ HTML und Bilder angeben).

    Tim Glomb schrieb:

    Sehr schönes Tutorial.. habs mal nachgemacht und dann strak abgeändert

    Nun meine Frage: Wie kann ich jetzt, wenn ich die Datei im Photoshop fertig hab, als Homepage verwenden?

    Eigentlich soll das ja nur als Vorlage dienen, wer das umbedingt so als Homepage benutzen will (was ich nicht empfehle) muss das slicen (Slice-Werkzeug) und dann "Für Web Speichern" und beim Speichern HTML und Bilder angeben.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword ()