Twitter-Look Web-Design

Benutzeravatar
eleanora
Administrator
Beiträge: 8141
Registriert: Do 25. Mär 2010, 00:53
Skype:
Wohnort: Osnabrück
Kontaktdaten:

Twitter-Look Web-Design

Beitragvon eleanora » Fr 19. Okt 2012, 13:23

Twitter ist eine bekannte Plattform für Kurzmitteilungen. Ich persönlich finde das Design von Twitter sehr schick. Also habe ich mich einmal versucht es mit Gimp nachzubasteln.

Los gehts!

Schritt 1
Starte ein neues Bild. z.B. 600px mal 300px.
Wähle eine Farbe, die dir gefällt. Lege in einer Palette Helligkeitsabstufungen der Farbe an. Es muss ja nicht unbedingt blau sein. Twitter in Lila ist doch auch ganz schick ;) Wähle einen mitteldunklen Farbton und fülle die Hintergrundebene mit der Farbe.

Füge eine neue transparente Ebene hinzu.
Aktiviere das Ellipsen-Tool :ellipse: und modeliere eine Wolke. Stelle hierzu das Ellipsentool im Werkzeugmodus auf "Hinzufügen".
#


Schritt 2
Fülle die Wolkenformation mit einem helleren Farbton auf der neuen Ebene.
Hebe die Auswahl auf und aktiviere dein Pinsel-Tool. Im Pinseleditor stellst du deinen Pinsel ein.
Einstellungen: Form: Kreis, Radius 15 oder 20, Härte 0,99
Klicke nun mit dem Pinsel in dein Bild. Forme nun deine Wolken detaillierter, indem du mit dem Pinsel an den Rand klickst. Dadurch entstehen kleine kreisförmige Ausbuchtungen.
#


Schritt 3
Füge eine neue transparente Ebene ein. Modelliere erneut eine Wolkenformation. Färbe sie in im hellsten Farbton ein. Füge wieder mit dem Pinsel kleinere Wolkendetaills ein.
#


Schritt 4
Füge eine Hilfslinie 50% horizontal ein Menü Bild - Hilfslinien - Neue Hilfslinie in Prozent.
Vereine alle Ebenen zu einer und markiere mit dem Rechteckt-Tool eine Hälfte der Ebene.
#


Schritt 5
Über Menü Bearbeiten - Ausschneiden und Menü Bearbeiten - Einfügen - Einfügen als neue Ebene zerteilst du dein Bild.
#


Schritt 6
Vertausche die beiden Hälften nun, so dass die linke Hälfte des Bildes rechts von der Hilfslinie liegt und die rechte Hälfte links. Die Schnittkante liegt nun beidseitig außen.
#


Schritt 7
Füge eine neue transparente Ebene ein.
Aktiviere die dunklere Farbe und einen runden Pinsel. Korrigiere die Mitte des Bildes mit der dunklen und anschließend mit der helleren Farbe, so dass ein Schnitt nicht mehr erkennbar ist. Am wenigsten auffällig ist es, wenn du unterschiedliche Pinselgrößen beim Korrigieren einstellst.
#


Du kannst dein Bild noch zuschneiden, wobei du den unteren überschüssigen Farbteil einfach abschneidest.
#

Speichere dein Bild als hintergrund.png. Du kannst die Grafik horizontal wiederholend auf deiner Webseite einsetzen.

Und so könnte deine Seite im Twitter-Desing aussehen --> Twitter-Look
Schau rein, in unsere Smiley-Werkstatt!
Aussuchen - Rechtsklick - Grafikadresse kopieren
im Beitrag als img einfügen!
Meine Lieblingssmileys ... BildBildBild

Zurück zu „Einsteiger Tutorien“



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast