Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Montag, 8. August 2016

Pattern & Paletten

lulu
Als Webmaster oder Hobby Grafiker stolpert man früher oder später über die Begriffe "Pattern", "Platten" und "Shapes". Alles englische Begriffe, die du bestimmt schon einmal gehört hast. Aber was hat es mit diesen Begriffen auf sich? Genau darüber schreibe ich in dem heutigem Beitrag.

Patter -  Was ist das?

Den Begriff Pattern gibt es in der Musik, in der Programmierung und auch in Photoshop. Darum die Frage: Was sind "Pattern" eigentlich? 

Im Grafikbereich ist eine Patter (auf deutsch "Muster") ein Bild, das wiederholt oder gekachelt wird, wenn Sie damit eine Ebene oder eine Auswahl füllen.
Ein kleines Bild, was ständig wiederholt angezeigt wird. Das ist natürlich gerade für Hintergründe sehr praktisch, da es egal ist wie groß der Monitor ist und ob die Webseite mobil oder auf dem Rechner aufgerufen wird. Die Patter wiederholt sich bei größeren Monitoren einfach automatisch öfters. Praktisch, oder?

Downloadest du zum Beispiel diese Patter sieht sie so aus:

Patter von Skyblue2u 

Fügst du jetzt in deiner CSS folgendes ein:
body { background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/99/99015.png) repeat; }
Wiederholt sich dieses kleine Bild unendlich oft. Das sieht dann schließlich so aus. Cool, oder?
Pattern findet ihr übrigens auch auf vielen Mitglieder Seiten wie zum Beispiel PinkPearlDepressionistAlicante DesignThe Seduction und Kuroi Inku.

Für Pattern braucht man übrigens nicht immer ein Bild. Mit CSS3 kann auch nur mithilfe von CSS Code (zum Beispiel gradial-gradient) eine Patter erstellt werden. Wie das aussehen kann und wie das funktioniert, kannst du in der Patterns Gallery nachschauen.

Paletten?

Einige Grafikseiten wie zum Beispiel PinkPearl haben unter "Ressourcen" den Punkt "Platten". Aber was ist damit gemeint?

"Paletten" helfen dir dabei, ein Design oder eine andere Grafik zu erstellen. Die Farben auf einer Palette sind abgestimmt und passend. Kopier dir die Palette in dein Grafikprogramm und verwendet für das Stylen deiner Grafik nur diese Farben (bei Designs z.B. in der style.css). Quelle: PinkPearl
Mit Paletten sind eigentlich "Farb Paletten" gemeint. Eine Palette besteht somit aus zwei oder mehr Farben. Diese Farben wurden vom Ersteller gewählt und passen seiner Meinung nach gut zusammen. Wenn du der gleichen Meinung bist, kannst du diese Farben nun für dein Design/deine Grafiken verwenden.

Eine Palette von PinkPearl


Mithilfe von Gimp oder Photoshop (oder auch Paint / Paint.Net) kannst du nun den Farbcode dieser Farben mit Hilfe des Farbauswahl Tools herausfinden:


Farbcode auswählen (Paint.Net)

In Photoshop, Gimp und Co. funktioniert das übrigens genau gleich (das Farbauswahl Tool sieht auch genauso aus).


2 Kommentare:

  1. Vielen Dank für dieses kleine Tutorial.
    Pattern gibt es wirklich immer sehr schöne, vor allem auf Grafikseiten und/oder auf Deviantart, wenn man Zeit hat und auf Suche geht - die Zeit habe ich meistens nicht. xD Vor allem benutze ich die meisten Grafiken ja auch gerne für Blockquote-Hintergründe. :3

    AntwortenLöschen
  2. Super Post, danke dafür! Besonders schön finde ich, dass du als Links nur Seiten aus unsere Szene angegeben hast. <3
    Daraus solltest du vielleicht gar eine Serie machen - mit solchen Grundlagen. ^^

    AntwortenLöschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates