Affiliate Marketing Tipps | PPC Marketing | Photoshop Tutorials | Xfire Skins » Affiliate Marketing Tipps | PPC Marketing | Photoshop Tutorials | Xfire Skins

Gepunktete Linien und Formen

Manuel — Fri, 16 Jul 2010 08:39:52 +0000

Ich denke wenn ihr mit Photoshop arbeitet, habt ihr sicherlich auch schon gepunktete Linien oder Rechtecke benötigt. Hierzu gibt es ja einige Methoden um ans Ziel zu gelangen. Einige wären da z.B:

Textwerkzeug und simpel einfach einige Punkte reinmachen (mühselig aber pixelgenaue Ausrichtung möglich)
2px grosses Muster erstellen und kreuzweise zwei Pixel in schwarz einfärben, danach 1px Auswahl erstellen, füllen und als Hintergrundmuster das soeben erstelle Muster nehmen

Habt ihr jedoch gewusst, dass ihr dies auch anhand von Ebeneneffekten realisieren könnt? Nicht super, dann mal weiter im Text Photoshop kommt von Haus aus mit einer Bibliothek names “Gepunktete Linien”. Und genau dieser Bibliothek bedienen wir uns jetzt. Was ihr tun müsst um diese zu laden beschreibe ich euch kurz:

Photoshop öffnen
Neue Ebene erstellen
Ebene mit einer Linie anhand 1px Bleistift ziehen (oder alternativ via 1px Auswahl undFarbe füllen)
Ebene doppelklicken um die Ebeneneffekte aufzurufen
Im linken Bereich ganz oben auf Stile klicken
Ihr seht jetzt eure zurzeit geladenen Stile
Ladet nun die “gepunktete Linien” Bibliothek indem ihr auf den kleinen Pfeil Button neben den Stilen klickt
Dort wählt ihr die “Gepunktete Linien” Bibliothek und ihr seht die dazugehörenden Stile
Auf Stil klicken und Vorschau geniessen
Fertig

So einfach gehts um in Photoshop gepunktete Linien oder Rechtecke/Quadrate zu erstellen. Um das ganze noch ein wenig zu verdeutlichen habe ich unten noch einen kleinen Screenshot angehängt.

Bei den Rechtecken geht ihr genau so vor wie bei den Linien, nur dass ihr die Auswahl via “Kontur füllen” im Kontextmenü füllt. Vorzugsweise mit einer 1 Pixel Kontur, um die Stile auch sauber nutzen zu könnn. Viel Spass beim testen…

Eingebrannter – Eingravierter Text

Manuel — Fri, 10 Oct 2008 09:17:18 +0000

Ein kurzes Tutorial über einen meiner Meinung nach hübschen Effekt. Das Ganze kann schlussendlich als Ebenenstil gespeichert werden und ist via ein-Klick-Methode für andere Objekte verfügbar. Wichtig bei der Anwendung auf eine Schrift ist deren Aussehen. Besorgt euch also eine möglichst “alte” Schrift. In meinem Beispiel habe ich die Schrift “Old English Text MT” für das Tutorial benutzt.

Mit weiterem rumprobieren der Ebeneneffekte lässt sich aus dieser Methode eigentlich zwei Effekte zaubern. Nämlich einmal einen eingebrannten sowie auch einen eingravierten Text, je nachdem was für einen Hintergrund man wählt. Eingravierter Text kommt besser auf metallischen Texturen zum Vorschein, wo der eingebrannte jedoch seine Vielfalt auf Holztexturen ausspielt.

Resultat

In zwei wirklich einfachen Schritten gelangen wir zu folgendem Endbild. Und dies nur durch Ebeneneffekte.

Schritt 1

Besorg dir eine Holztextur auf CGTextures.com oder sonst einer deiner Lieblingsquellen. Schneid dir diese so zurecht wie du sie später verwenden möchtest und schreibe deinen Text. Wie schon erwähnt ist es hier enorm wichtig dass du eine alt aussehende Schriftart wählst. Die Schriftfarbe spielt absolut keine Rolle.

Schritt 2

Nun stellst du den Schieber “Fläche” auf 0% (zu finden direkt unter dem Deckkraft Schiebregler) und machst einen Doppelklick auf die Ebene um zu den Ebeneneffekten zu gelangen. Alternativ kannst du auch das Icon “fx”unten im Ebenenmanager benutzen.
Folgende Einstellungen habe ich für mein Beispiel benutzt:

“Schatten nach Innen”

“Schein nach Aussen”

Tutorial ist jetzt bereits fertig und du hast erfolgreich einen Text in Holz eingebrannt

In diesem Beispiel hab ich den Effekt “Schein nach Aussen” durch den Effekt “Abgeflachte Kanten und Relief” vertauscht um den Effekt von eingraviertem Text zu erhalten.

Lichteffekt “Glühen” in Photoshop erstellen

Manuel — Thu, 18 Sep 2008 08:15:40 +0000

Mit diesem Artikel möchte ich die Technik für meine verwendeten Lichteffekte erläutern. Ich verwende diese in meinen Interface Designs, sowie auch Xfire Skins. Mit Lichteffekten lassen sich hübsche Spielereien herzaubern und Eyecatcher besonders hervorheben. Diese Technik ist wirklich einfach zu erlernen, zaubert aber wunderschöne Effekte hin. Im heutigen kurzen Tutorial erstellen wir einen “Glüh” Effekt in 4 Schritten.

Schritt 1

Wir erstellen ein neues Dokument und füllen die Hintergrundebene mit schwarz. Danach wechseln wir zum Pinselwerkzeug (b) mit einer Deckkraft von 100% und wählen eine weiche runde 3px kleine Werzeugspitze. Als Vordergrundfarbe wählen wir weiss. Neue Ebene erstellen und einmal in die Arbeitsfläche klicken.

Schritt 2

Erneut eine neue Ebene erstellen und eine grössere Werkzeugspitze, jedoch nicht grösser als 10px. In meinem Beispiel hab ich 6px verwendet. Wir stellen die Deckkraft auf 20% und klicken ein bis zweimal.

Schritt 3

Wiederhole das Ganze und wähle hierfür jetzt eine Werkzeugspitze von 20px. Die Deckkraft belassen wir noch immer auf 20%. Nochmals ein bis zweimal klicken.

Schritt 4

Jetzt setzen wir die Deckkraft wieder auf 100% und wählen eine 30px grosse Spitze. Als Farbe wähle ich in meinem Beispiel einen blauton und klicke einmal. Diese Ebene setzen wir auf “Ineinanderkopieren” oder ältere Versionen auf “Überlagern”.

Schritt 5

Das fertige Resultat sieht in etwa aus wie im linken Bild dargestellt. Es lassen sich damit auch grössere Lichtpunkte erstellen

Photoshop Carbon Button

Manuel — Mon, 15 Sep 2008 08:46:55 +0000

Vor langer Zeit hab ich für die Tutorial Sektion auf 24-7media.de dieses “requested” Tutorial geschrieben. Es beschreibt den Vorgang um einen Carbonbutton zu erstellen. Bist du bereits ein fortgeschrittener Photoshop Benutzer dann kannst du dieses Posting ruhig überfliegen

Schritt 1

Erstelle ein neues Dokument und definiere eine Auswahl von 105*28 Pixel. Diese Auswahl füllen wir mit der Farbe #6e6e6e. Die Auswahl kannst du jetzt mit (d) deselektieren. Ebene bennen wir in “Base Shape” und dient lediglich zum späteren Laden der Auswahl und der Beleuchtung.

Schritt 2

Erstelle eine neue Ebenen und nenne sie “Inset“. Erstelle nun eine Auswahl mit dem Zeichenstift oder dem abgerundeten Formenwerkzeug von Photoshop. Diese Auswahl füllen wir mit einem Verlauf von Schwarz zu Transparent.

Schritt 3

Diese Auswahl wird jetzt wie im linken Bild zu sehen verzerrt.

Schritt 4

Hier ist noch viel zu viel schwarz in unserem Button. Also nehmen wir den Radiergummi und stellen eine weiche runde Pinselspitze mit der Stärke um die 25% ein. Radiert bis ihr ein ähnliches Restultat seht wie im linken Bild.

Schritt 5

Als nächstes kopiere das linke Bild und erstelle daraus in Photoshop ein Muster. Hierzu kopiere das Bild in deine Zwischenablage, wechsle zu Photoshop und drücke CTRL+N für ein neues Dokument. Photoshop übernimmt automatisch die richtigen Seitenverhältnisse von dem Bild in deiner Zwischenablage. Bestätige diese und füge das Bild mit CTRL+V wieder ein. Danach drücke CTRL+A (um das ganze Dokument zu selektieren) und wähle “Bearbeiten-Muster festlegen…“. Gib dem Muster einen Namen wie “Carbon Muster” und klicke auf OK.

Danach klickst du mit gedrückter CTRL Taste auf die Ebene “Base Shape” (auf das Thumbnail nicht auf den Ebenennamen) um deren Auswahl zu laden, erstellst eine neue Ebene und füllst diese mit einer Farbe deiner Wahl. Mache nun einen Doppelklick auf diese Ebene und gehe zu “Musterüberlagerung“. Dort wählst du jetzt dein vorhin erstelltes Carbon Muster aus. Bestätige mit OK. Erstelle wiederum eine neue leere Ebene und verbinde diese mit der darunterliegenden Ebene und drücke CTRL+E. Somit löschen wir die Fülloption und erhalten eine gerasterte Ebene zurück. Danach stellst du diese Ebene auf den Modus “Abdunkeln”. In meinem Beispiel hab ich die Deckkraft auf 50% gesenkt.

Schritt 6

Lade erneut die Selektion anhand deiner “Base Shape” Ebene (wie in Schritt 5 erklärt) und erstelle eine neue Einstellungsebene “Helligkeit & Kontrast”. Ich habe bei der Helligkeit einen Wert von -22 eingestellt. Den Kontrast lassen wir auf 0.

Schritt 7

Setze deine aktive Ebene auf “Base Shape” und wähle das Dodge (Abwedler) Werkzeug mit einer harten runden Spitze Grösse 9. Die Abwedleroptionen belasse ich auf “Mitteltöne” sowie Beleuchtung “50%“. Fahre nun ein paar mal von links nach rechts mit gedrückter SHIFT Taste um ein geradliniges horizontales Fahren mit der Maus zu ermöglichen, bis du den gewünschten Effekt erzielt hast.

Schritt 8

Fertig ist der Carbon Button. Ich hoffe es hat Spass gemacht und du hast einen Einblick in meine Arbeitsweise erhalten. Ich habe beim Beispielbutton noch eine Bitmap Schrift mit eingefügt um ihn als wirklichen Button “leben” zu lassen.

Smart Objekte in Photoshop

Manuel — Tue, 29 Jul 2008 18:59:30 +0000

Ein Smart Objekt in Photoshop ist im grunde genommen ein Container, der Raster- oder Vektorbilder enthalten kann. Diese können auch aus einer anderen Photoshop- oder Illustrator-Datei stammen. Ich benutze die Smart Objekte sehr gerne bei mehrfach verwendeten Objekten. Vorallem beim erstellen von Webseiten sind die SmartObjects ein enormer “Timesaver”

SmartObjects erstellst du indem du eine Ebene, Ebenengruppe oder mehrere Ebenen markierst (CTRL+Klick), danach mit der rechten Maustaste “In Smart Objekt konvertieren” wählst. Danach sieht deine Ebene folgendermassen aus:

Das kleine Icon in der Ebenenvorschau zeigt dir jetzt dass es sich bei dieser Ebene um ein Smart Objekt handelt. Machst du jetzt einen Doppelklick auf dieses Icon erhälst du die ursprüngliche Version und kannst Änderungen vollziehen. Speicherst du die soeben gemachten Änderungen ändert sich auch all deine Ebene mit den darin enthaltenen Smart Objekten.

Wenn du diese Ebene jetzt drei, viermal kopierst, brauchst du für Änderungen welche auf allen Ebenen gemacht werden müssten, nur noch eine Ebene und das darin enthaltene Smart Objekt ändern Praktisch, huh? Viel Spass beim rumpröbeln.

Ebenengruppen

Manuel — Tue, 10 Jun 2008 09:12:30 +0000

Ein Feature in Photoshop welches ich ständig nutze. Es ermöglicht mir eine gewisse Übersicht meiner Dateien zu erhalten, da ich bei komplexen Interfaces gerne mal über 150 Ebenen zu verwalten habe. Ebenengruppen sind, wie es der Name schon sagt, gruppierte Ebenen. Diese werden, analog wie man es von Windows kennt, mit einem Ordnersymbol dargestellt. Es ist auch eine Gruppe in der Gruppe möglich um das ganze noch mehr zu vereinfachen. Dies nutze ich z.B bei Webseitennavigationen.

NAVIGATION
- Links
  - Link 1
  - Link 1
  - Link 1
  - Link 1
- Background
  - Muster
  - Hintergrundfarbe

Im obigen Beispiel hab ich also eine Gruppe namens “NAVIGATION” und darin befinden sich zwei weitere Ordner “Links” und “Background”. In diesen beiden Ordner sind jeweils die Ebenen abgelegt. Somit muss ich beim Verschieben meiner Linktexte keine Rücksicht auf den Hintergrund nehmen und kann diese einfach neu positionieren, ohne dass mein Hintergrund mitfährt!

Am schnellste gruppiert ihr die Ebenen indem ihr diese wählt (SHIFT+Klick oder CTRL+Klick für einzelne Ebenen) und danach im Ebenenmanager oben rechts auf das kleine Pfeilchen klickt und “Neue Gruppe aus Ebenen” wählt. Ihr werden aufgefordert der Ebenengruppe einen Namen zu geben und fertig.

Ich empfehle euch die Ebenengruppen so schnell wie möglich zu verwenden um somit ein effizienteres und vorallem schnelleres Arbeiten zu ermöglich. Ihr spart Zeit indem lange nach einzelnen Ebenen gesucht werden muss. Mach auch Gebrauch von den Gruppen in den Gruppen um gewisse Objekte zu gruppieren und später ohne Hindernisse zu verschieben bzw. umzupositionieren. Viel Spass beim Ausprobieren