Yourgimp

Dienstag, 2. Dezember 2008

Horizontales css Menü mit Gimp

Hier mal ein Kleines Tutorial für eine horizontale Navigation.

Die Buttons dafür werden mit Gimp gemacht.

Hier erst mal der Code für das Menü :

Nun zum Button->
Zuerst erstellt ihr eine neue Datei mit Gimp, 150*40
Macht einen Verlauf mit den Farben #00234b & #00c6ff von oben nach unten und lasst dabei die [Strg] Taste Gedrückt damit der Verlauf gerade verläuft.

Erstellt eine neue Ebene und
wählt die obere Hälfte des Buttons mit der rechteckigen
Auswahl aus und füllt diese mit weißer Farbe.
Stellt danach im Ebenendialog die Deckkraft auf 30.

Wenn ihr einen Onmouseover effekt machen wollt braucht ihr eine dunkle und eineHelle Version,
dazu passt ihr die Farben unter/ ->Farben->Kurven.../ an.
Speichert die Bilder z.b unter 1 & 2 .png

OK hier seht ihr das Menü mal in Aktion:Link

Sonntag, 30. November 2008

"Schoene Schraegstriche" mit GIMP (moeverichs version)

"Schoene Schraegstriche" in GIMP zaubern, z.B. fuer einen Background einer Webseite oder aehnlichem.

Beispiel:

Als erstes Starten wir mal GIMP, dann waechseln wir in den File-Explorer (z.B. unter Windows -> windows taste + e) und gehen ins GIMP verzeichnis, bei mir liegt es unter: C:\Program Files\Gimp-2.0 von dort aus dann weiter nach C:\Program Files\Gimp-2.0\share\gimp\2.0\patterns. Dann ziehen wir warning.pat in GIMP und sehen schon unsere "schoenen schraegstriche" in gelb - schwarz. Nun koennen wir diese nach belieben anpassen, z.B. drehen, oder Farben anpassen. Gut, Farben angepasst und gedreht? :) Okay, ihr habs mal gemacht - dann gehts weiter. Nun drueckt ihr auf BEARBEITEN - SICHTBARES KOPIEREN. Dann auf DATEI - NEU. Dort waehlt ihr nun breite 100 x hoehe 100 pixel. Nun geht ihr auf FUELLEN, waehlt nun MUSTER und drueckt auf ganz oben links (zwischenablage), nun solltet ihr euer musster sehen, und koennt das Bild ausfuellen. Und schon habt ihr eure "schoenen schraegstriche" aufm "Blatt", speichern und einbinden ;).

So koennte das ganze dann am ende aussehen: http://codes.moeverich.de/designs/schraegstriche/.
Zwar nicht sehr einfallsreich, aber ihr muesst euch ja drann setzen ;)

Gruesse moeverich.

Samstag, 29. November 2008

Runde ecken mit CSS

Erst mal hallo leute, ich bin neu hier ;).
Heute gehts um Runde ecken welche z.B. im FireFox angezeigt werden doch wohl nicht im Internet Explorer. Das ganze ist eigentlich recht easy, wir erstellen erst mal ne simple HTML File (wenn nicht schon getan).

<html>
<head>
</head>
<body>
</body>
<html>

So das wäre nun schon mal getan, nun müssen wirn Style deklarieren und nen paar DIV boxen anlegen.
Also schreiben wir nun in den Head teil folgendens:

<style type="text/css">
#divbox {
/* Color Stuff */
background-color: #111; /* Hintergrund Farbe */
color: #fff; /* Text Farbe */

/* Positions Stuff */
position: absolute; /* Wir wollen das Element versetzen koennen */
min-height: 190px; /* Minimale Hoehe 190px */
width: 190px; /* Breite 190px */
top: 200px; /* Von oben her verschoben um 200px nach unten */
left: 200px; /* Von links her verschoben um 200px nach rechts */

/* innen positionirungs stuff */
padding: 10px; /* Innen abstand 10px (Links, Rechts, Oben und Unten) */

/* Runde Ecken */
-moz-border-radius: 30px; /* Mozila Border Radius (Runde ecken fuern mozilla) */
-webkit-border-radius: 30px; /* Warscheinlich fuer den safari */
border-radius: 30px; /* Keine ahnung :( */
}

</style>

Und in den body teil:
<div id="divbox">HelloWorld</div>

Und dann haben wir nen kleines Div welches runde ecken hat.

Doch das wichtigeste fuer die Runden ecken beim CSS sind eigentlich:
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
Welche derweil leider noch nicht standart sind und somit wohl nicht bei jedem Browser funktioniert.
Es gibt allerdings noch eine andere Art um an runde ecken zu kommen beispielsweise über die benutzung eines background bildes, aber mehr dazu vieleicht in einem Anderem Post.

Hier noch mal der ganze Quelltext:

<html>
<head>

<style type="text/css">
#divbox {
/* Color Stuff */
background-color: #111; /* Hintergrund Farbe */
color: #fff; /* Text Farbe */

/* Positions Stuff */
position: absolute; /* Wir wollen das Element versetzen koennen */
min-height: 190px; /* Minimale Hoehe 190px */
width: 190px; /* Breite 190px */
top: 200px; /* Von oben her verschoben um 200px nach unten */
left: 200px; /* Von links her verschoben um 200px nach rechts */

/* innen positionirungs stuff */
padding: 10px; /* Innen abstand 10px (Links, Rechts, Oben und Unten) */

/* Runde Ecken */
-moz-border-radius: 30px; /* Mozila Border Radius (Runde ecken fuern mozilla) */
-webkit-border-radius: 30px; /* Warscheinlich fuer den safari */
border-radius: 30px; /* Keine ahnung :( */
}

</style>
</head>
<body>

<div id="divbox">HelloWorld</div>

</body>
</html>

Viel spass damit

moeverich.

Freitag, 28. November 2008

Ausrufezeichen Mit Gimp erstellen

Findet ihr hier