Anzeige
Tutorialbeschreibung

Web: Steam Style

Web: Steam Style

Dann wollen wir mal anfangen:   

Schritt 1:

Erstellt ein neues Dokument mit der Größe 900x500px.

Schritt 2:

Erstellt eine neue Ebene und nennt sie Grundform. (Es ist egal ob ihr der Ebene nen Namen gebt oder nicht ich habe es für das tut mal gemacht)

 

 

Bilder

 

Nehmt das abgerundetes Rechteck Werkzeug und zieht die Grundform. Die Farbe is an dieser Stelle noch egal.  Jetzt ein Doppelklick auf die Ebene Grundform und setzt ein Häkchen bei Verlaufsüberlagerung.

 

Bei dem Verlauf stellt ihr den Winkel erstma auf 90 Grad und setzt Folgende Farben:

 

Bilder

 

 Schritt 3:

 Erstellt eine neue Ebene und nennt sie Header.

 Zur Hilfe solltet ihr jetzt noch 2 Hilfslinien erstellen und so wie auf dem Bild platzieren.

 

 

Bilder

 

So nun die Fordergrundfarbe auf #a6a50 stellen.

Mit dem abgerundetes Rechteck Werkzeug zwischen den Hilfslinien ein Rechteck ziehen das sollte dann etwa so aussehen:

 

 

Bilder

 

  Nun das Auswahlrechteck Werkzeug nehmen und eine Auswahl knapp auf die Hälfte des Headers ziehen:

Bilder

 

 Jetzt einfach entfernen drücken damit wird die untere Hälfte des Headers "abgeschnitten". Die Auswahl mit Auswahl -> Auswahl aufheben entfernen.

Schritt 4:

Wieder eine neue Ebene erstellen und diese Hauptteil nennen.

Die Farbe auf #86a65 stellen.

Mit dem abgerundetes Rechteck Werkzeug an den Hilfslinien entlang den Hauptteil ziehen:

 

Bilder

 

Da die Hilfslinien nun stören: über Ansicht -> Hilfslinien Löschen die Hilfslinien entfernen

So jetzt wieder mit dem Auswahlrechteck ne Auswahl über die obere Kante des Hauptteils ziehen etwas so:

 

 

Bilder

 

Nu  wieder  entfernen drücken um den Teil weg zu schneiden und wieder Auswahl -> Auswahl aufheben um die Auswahl zu entfernen.

Bilder

 

Schritt 5:

Wir erstellen wieder eine neue Ebene und nennen sie Navi.

Vielleicht könnt ihr es schon erraten ^^ ja richtig wir nehmen wieder das abgerundetes Rechteck Werkzeug und ziehen damit eins der Navielemente Größe sollte so seien:

 

 

Bilder

 

 

Da der Navi Punkt die gleiche Farbe hat wie der Hauptteil habe ich die Größe nochma mit schwarz deutlich gemacht.

Wie wir auch das mittlerweile kennen nehmen wir wieder das Auswahlrechteck und erstellen ne Auswahl auf der unteren Hälfte des Navi Elements:

Bilder

Nun entfernen drücken und über Auswahl -> Auswahl aufheben die Auswahl entfernen.

Mit dem verschiebe Werkzeug können wir nun das Navielement passend positionieren:

Bilder

 Die Naviebene nun 2 mal kopieren und die einzelnen Elemente etwa so positionieren:

Bilder

Schritt 6:

Eine neue Ebene erstellen und diese Footer nennen.

Mit dem Rechteck Werkzeug und der Farbe schwarz einen kleinen Teil unten der Grundform mit einem "Balken" überziehen:

Bilder

Bei gedrückter STRG Taste einen Linksklick auf die Grundform Ebene machen. Dann auf Auswahl -> Auswahl umkehren gehen und entfernen drücken. Das ganze sollte dann so aussehen:

Bilder

Sollte der schwarze Balken unverändert bleiben einfach noch mal die footer Ebene mit einem Linksklick auswählen und nochmals entfernen drücken.

Schritt 7:

Jetzt kommen die kleinen Einbuchtungen im footer dran!!

Dazu eine neue Ebene erstellen und diese bucht nennen.

Die Hilfslinien so anordnen wie auf dem Bild:

Bilder

Stellt die Farbe auf #464646

Nun mit dem Zeichenstift Werkzeug folgende Form zeichnen:

Bilder

Mit dem Punkte umwandeln Werkzeug nun die unteren 2 Punkte so "bearbeiten" das die Ecken rund werden das sollte dann so aussehen:

Bilder

Die Buchtebene noch 4 mal kopieren und die Buchten so anordnen:

Bilder

So jetzt sieht das ganze doch schon fast wie Steam aus wa ^^

Schritt 7:

Macht einen Doppelklick auf die Ebene Hauptteil und stellt bei Schlagschatten folgendes ein:

Bilder

Schritt 8:

Mit dem Bleistift und der Farbe weiß nun noch oben rechts die minimier und schließ Symbole zeichnen:

Bilder

So damit beende ich das tut jetzt die Beschriftung sollte jeder hinbekommen denke ich mal.....

  

Bilder

So viel Spaß beim nachmachen :)

mfg Bla 


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von ak56Lk
  • 20.03.2010 - 04:36

Schreibstil geht so. Allerdings setzt du ein gewisses Maß an Kenntnissen vorraus, deshalb für Anfänger ungeeignet.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.03.2010 - 11:00

Schönes Tutorial, nur leider sind in der PDF die Bilder nicht vorhanden, was die sache etwas schwer macht :(

Gruß,
hell

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.10.2009 - 17:25

schön geworden, und noch nichtmal so kompliziert, dankeschön

Portrait von BiggBoss
  • 30.09.2009 - 21:43

Schön geworden ;)
Werde es mal nachmachen ;)
Mal gucken ob das klappt :D
ich hoffe mal aber das ist ja nciht so schwer nachzu machen hoffe ich mal ^^
Also danke dafür ;)

mfg

Portrait von saint44
  • 25.07.2009 - 23:54

Kann ich gut gebrauchen...
aber die rechtschreibung scheint nicht gut geprüft zu sein:

"fordergrundfarbe" wird mit V geschrieben ^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.05.2009 - 21:06

sehr gut weiter so das habe ich gebraucht dankeeeee

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.04.2009 - 19:53

Super gemacht geil :))

bsi auf die 2 farben aber des macht nix^^

Portrait von magooon
  • 12.02.2009 - 11:37

Die farbe des oberen balken stimmt nicht ganz, bei deinen Angaben kommt so nen grün raus.

Bin in meinen Cs orner udn hab mir ein Orginal-Bild geholt.

Die richtige Farbe ist #5a6a50 wahrschinlich hast es falsch rauskopiert;)

Portrait von Saint
  • 18.01.2009 - 02:42

net schlecht gut erklärt

Portrait von kleinerkruemel
Portrait von gigi
  • 30.09.2008 - 20:49

Gut einzelne Schritte erklärt

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.09.2008 - 20:56

schöön beschriieben ..

versteht man gut!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 30.08.2008 - 14:00

Gut erklärt, sieht aber dem Original nur etwas ähnlich

Portrait von Zeichen32
  • 24.08.2008 - 14:34

Ein sehr interresantes tut, auch sehr gut erklärt. 5 Sterne!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.08.2008 - 07:25

hehe endlich ma richtig cooles website design für meine cs site thx

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.05.2008 - 19:19

war gut nachzuvollziehen :) beim nachbauen sah es auch genauso aus und man kann es gut benutzen..danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.01.2008 - 12:42

Was soll man damit Anfangen?
Dachte erst diesen style kann man in steam rein haun naja totz meiner meinung 5sterne für deine mühe die drin steckt!!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.11.2007 - 11:34

Vielen Dank, echt gutes und einfach nachzuvollziehendes Tutorial zum Üben und lernen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.10.2007 - 00:24

super gemacht aber i hate steam

Portrait von Picco79
  • 20.09.2007 - 09:02

Super gemacht, danke

x
×
×