Home
Admina
Impressum
Link Me
Contact
Credits
Datenschutz
///


Wunschbrunnen
Tutorials
Jigsaw
Poké Ry
Umfragen
///

Sammler
Bestellen
Regeln
Vergebene Set's
Normale Set's
Pokémon Set's
One Piece Set's
Naruto Set's
Gakuen Babysitters
Yu-Gi-Oh! Set's
Yo-Kai Watch Set's
Food Set's
Natur Set's
Tiere Set's
Limitierte Set's
Digimon Set's


März 2019
M D M D F S S
« Dez    
 123
45678910
11121314151617
18192021222324
25262728293031

Pixel Vorschaubutton erstellen

In diesem Tutorial zeige ich euch wie ihr einen Mini-Vorschaubutton erstellen könnt in Pixeltechnik :D

Schritt 1)
Wir erstellen erst einmal eine neue Datei. Dafür lassen wir den Hintergrund Transparent und geben als Größe 70 pixel in der Breite und 45 pixel in der Höhe an. Dann verstellen wir die Ansicht auf 1200% um dieses Bild gut bearbeiten zu können.


Schritt 2)
Wir beginnen nun mit dem Rahmen. Dazu machen wir zuerst die runden Ecken. Nehmt dazu das Bleistift-Tool mit der Größe von 1 px und beginnt die Ecken wie hier abgebildet. Das macht ihr an allen 4 Ecken des Bildes. Damit erschafft ihr den abgerundeten Eckrahmen.


Wie ihr sehen könnt habe ich an den Eckpunkten leere Stellen. Wenn ihr euch mir den Abmessungen nicht ganz sicher seid könnt ihr diese auch mit einer Zweitfarbe erst markieren. Vergesst aber nicht diese nach anbringen der Eckpunkte sofort wieder zu Löschen.


Links: mit Eckpunkten | Rechts: ohne die Eckpunkte.


Schritt 3)
Nun beginnen wir mit dem Rest des Rahmens. Hierfür benutzen wir weiterhin das Bleistift-Tool, jedoch wechseln wir die Farben immer ab. Alternativ könnt ihr mit einer Farbe den Rahmen soweit fortführen wie ihr möchtet und anschließend Füllt ihr den Rest mit der anderen Farbe.



Schritt 4)
Nun fügen wir ein Fenster ein für das Vorschaubild. Dazu setzen wir erst 4 Eckpunkte und verbinden dann diese Eckpunkte miteinander. Danach benutzt ihr das Auswahl-Tool, klickt in die Mitte und macht das Fenster ‚frei‘.

TIPP:
Um die Linien für das Fenster so hin zu bekommen, setzt das Bleistift-Tool an, drückt dabei die Shift-Taste und zieht die Maus einfach in die Gewünschte Richtung.

Schritt 5)
Kommen wir nun zum nächsten Schritt. Mit dem Auswahl-Tool wählt ihr nun die Zweitfarbe aus (in diesem Fall ist es Blau) und schneidet diese aus. Dann fügt ihr diese als neue Ebene wieder ein und zieht sie wieder in Position. Das ist für den letzten Schritt wichtig.

Schritt 6)
Im vorletzten Schritt fügen wir eine Schriftart ein. Hierzu eignen sich am Besten die Pixelfonts. Eine große Auswahl dazu findet ihr bei DaFont.com!

Für dieses Beispiel benutze ich die Schriftart PixelSix14 in Größe 8pt und richte diese Mittig aus. Über die Fülloptionen fügen wir dann noch einen Außenrahmen von 1px dazu in Weiß. Das ganze sieht dann so aus. Dann ziehe ich die Schrift genau in die Mitte des Buttons. So richtet sich die Schrift beim bearbeiten gleichmäßig aus.



Schritt 7)
Im letzten Schritt begeben wir uns nun an das Design. Zuerst stellen wir die Ansicht von 1200% wieder auf 100% zurück. Dann bearbeiten wir zuerst den Rahmen. Über die Fülloptionen fügen wir eine Farbüberlagerung hinzu. Ich habe mich hier für einen Magenta/Lilaton entschieden.



Dann widmen wir uns der Blauen Ebene. Hier habe ich über die Fülloptionen einen rosanen Farbverlauf hinzugefügt. Ihr könnt natürlich auch Pattern benutzen oder eine andere Farbe oder was immer Ihr wollt.



Zu guter letzt kümmert ihr euch noch um die richtige Farbe der Schriftart. Diese könnt ihr beliebig Anpassen.



Speichert den Button nun als PSD datei ab um ihn immer wieder bearbeiten zu können und, voilá – somit habt ihr einen eigenen kleinen Pixelbutton erstellt. Ihr könnt diesen natürlich in allen verschiedenen Formen und Größen anfertigen, das bleibt ganz euch überlassen.


Zurück zu den Tutorials