Nahtlose Hintergründe erstellen

von Tanya 7. Mai 2008 15:30 | Kategorie Tutorials

Wer kennt sie nicht, die Hintergründe (oder auch Pattern genannt), die nur aus einem Bild bestehen und nahtlos aneinander gereiht werden können. Was gar nicht so leicht zu erstellen aussieht, geht eigentlich ganz einfach. Nur dieses Tutorial lesen und sich daran mit Photoshop ausprobieren :) .

Pattern erstellen 01

Zunächst brauchen wir natürlich ein Bild aus dem wir einen Pattern erstellen wollen. Bedenkt dabei, dass euer Bild nicht allzu groß ist, denn je größer das Bild, desto länger die Ladezeit und bei Hintergründen ist das meist unnötige Zeitinvestition. Des weiteren ist wichtig, dass die Seitenverhältnisse durch zwei teilbar sind, sprich unsere Breite und Höhe aus einer geraden Zahl besteht.

Wieso das Seitenverhältnis gerade sein muss, erfahrt ihr im nächsten Schritt. Zunächst duplizieren wir jedoch unsere Ebene (“Ebene” – “Ebene duplizieren”). Auf der neu erstellten Ebene wenden wir jetzt den Verschiebungseffekt an (“Filter” – “Sonstiger Filter” – “Verschiebungseffekt”).

Ein kleines Fernster öffnet sich. Nun wird sich auszahlen, dass wir ein gerades Seitenverhältnis haben, denn jetzt müssen wir jeweils die Hälfte unserer Seiten eintragen. Teilt also schnell eure Breite durch zwei und tragt den Wert ein – genauso macht ihr das dann auch bei der Höhe. Anschließend wählt ihr “durch verschobene Teile ersetzen” aus.

Pattern erstellen 02

So sieht nun unser Bild aus:

Pattern erstellen 03

Euer Ergebnis sieht schließlich so wie dieses Beispiel aus. Wir haben jetzt praktisch gesehen die Außenseiten nach innen geholt. Jetzt stören also nur noch die Kanten.

In der Mitte des Bildes bzw. auf dem Schneidepunkt der Kanten erstellen wir eine neue Auswahl. Hierzu wählen wir dieses Symbol Pattern erstellen 04. In der Auswahlleiste klicken wir schließlich abermals auf das Rechteck, das nun jedoch einen kleinen Pfeil nach unten neben sich hat Pattern erstellen 05. Eine kleine Auswahlliste öffnet sich. In dieser wählen wir “Sternenexplosion-Farbziel”. Statt der üblichen Auswahlleiste erscheint nun eine neue, die ihr bitte folgendermaßen auswählt:

Pattern erstellen 06

Jetzt kann die Ellipse auf dem Schnittpunkt des Bildes gezogen werden. Achtet dabei darauf, dass er mit eurer Form nicht bis zu den Rändern kommt, denn das würde die Nahtlosigkeit wieder zerstören. Um diese Form schließlich endgültig in eine Auswahl zu verwandeln, wird mit der rechten Maustaste auf das Bild geklickt und die Option “Auswahl erstellen” gewählt.

Pattern erstellen 07

Da wir jedoch nicht den inneren Bereich ausgewählt haben möchten, sondern den Außenbereich, kehren wir nun unsere Auswahl in der Menüleiste unter “Auswahl” – “Auswahl umkehren” um.

Über die umgekehrte Auswahl legen wir eine Maskenebene. Hierzu gehen wir in unser kleines Ebenenfenster und wählen das Ebenenmasken-Symbol Pattern erstellen 08.

Das entstandene Bild weist nun vermutlich kleine Unebenheiten auf. Mit einem kleinen schwarzen Pinsel können wir diese Unebenheiten transparent machen. Wichtig hierbei ist, dass auf der Ebenenmaske gemalt wird und natürlich immer noch die äußeren Seitenränder unberührt bleiben.

Wenn du alles beseitigt hast, dann ist dein Pattern fertig und du kannst mit der rechten Maustaste auf eine beliebige Ebene “auf Hintergrundebene reduzieren” auswählen.

Mein Pattern sieht nun so aus:

Pattern erstellen 09

Nur nicht den Mut verlieren, wenn es nicht sofort bei jedem Bild klappt. Ich selbst habe gemerkt, dass vor allem der letzte Pinsel-Schritt der entscheidende ist und man erst dann sehen kann, ob sich auch das Ergebnis wirklich sehen lässt. Leider ist es auch hin und wieder so, dass man aus machen Bildern einfach keine Pattern erstellen kann. Letztendlich macht aber Übung den Meister!

Fragen? Dann nur zu.

2 Kommentare »

Zeilenabstand/Typo 1

von jojosan 6. März 2008 20:19 | Kategorie Tutorials

So fangen wir mal mit was einfachen an, dem Zeilenabstand. Dazu aktiviert ihr erstmal unter Fenster das Fenster Zeichen. Dies funktioniert bei allen Programmen aus dem Hause Adobe gleich oder sehr ähnlich. So sieht sie dann aus.

Jetzt keinen Schreck bekommen, dies Fenster kann noch sehr viel mehr, aber wir gehen erstmal auf den Zeilenabstand ein.

In diese Grafik sieht man die unterscheide und das Symbol.Große ptzahl großer Abstand so einfach ist das. Im Web sollte man min. line-hight:130%; verwenden um das lesen zu erleichtern.

Ihr könnt also mit Zeilenabstand für jede einzelne Zeile in Photoshop festlegen also probiert mal etwas rum.

0 Kommentare »

Blenden

von jojosan 7. Mai 2007 19:19 | Kategorie Tutorials

Hier zeige ich euch nun wie man Blenden erstellt. Unter Blenden versteht man zwei Bilder die miteinander zu einem verschmolzen wurden.

Zu Beginn benötigen wir zwei Bilder, die ihr zusammen bringen wollt. Ihr könnt nach belieben auswählen. Diese beiden Bilder legt ihr so übereinander, dass sie etwas überlappen.

Da zieht ihr eine Auswahl um den Bereich wo ihr den Übergang haben wollte.

So jetzt geht ihr auf die obere der beiden Ebene und geht auf Auswahl und wählt darin Weiche Auswahlkante.

Schließlich braucht ihr nichts weiter zu tun als nur noch die Entf-Taste zu drücken bis ihr das gewünschte Ergebnis habt. Ihr könnt auch noch an einigen Stellen mit dem Radiergummi nach helfen um das Ergebnis zu verschönern.

Mein Ergebnis:

0 Kommentare »

Einleitung in CSS

von jojosan 27. April 2007 17:59 | Kategorie Tutorials

So ich dachte mir ich erklär mal ein bisschen CSS.

Heute mal was allgemein.

Also es gibt bei CSS 2 Typen die man definieren kann.Das wären class und id aber wo ist hier der unterschied?

In euren Quelltext:

<div class=”test”></div>

In eure CSSdatei.

.test{}

Also wie man sehen kann schreibt man eine Klasse in der CSSdatei immer mit einem Punkt davor.Aber wozu sind Klassen gut?Tja ganz einfach!Also klassen setzt man dann ein wenn der z.B. der divtag öfters vorkommt.So z.B. bei Navigationen ,da benutzt man ja meist mehr als einmal die selbe Formatierung .

Also Klassen sind für mehrfach Verwendung innerhalb eines Dokumentes.

In euren Quelltext:

<div id=”test2″></div>

In eure CSSdatei.

#test2{}

Bei id´s wird immer ein Raute davor geschrieben als Kennzeichnung.Man benutzt sie auch nur einmal in einem Dokument z.B id=”content” .

Id´s sind für einfach Nutzung.

1 Kommentar »

Licht 3

von jojosan 12. April 2007 18:19 | Kategorie Tutorials

So hier nun eine weiter Möglichkeit um Bilder zum leuchten zu bekommen:

Zu erst öffnet ihr ein Bild wobei sich am Anfang am besten ein Foto eignet das es schon Lichteffekte enthält!
So jetzt habe ich erst mal das Tut Licht 2 verwendet! Dann habe ich weiße Brushes verwendet und die Einstellung der Brushes auf Weiches Licht und die Deckkraft hier auf 20 gestellt!

Hier ein paar Werte:
Hell Bilder: 10% bis 20%
Mittel: 20% bis 40%
Dunkel: 40% bis 70%

So mein Ergebnis:

0 Kommentare »