Forum Wiki Galerie Kontakt Wie man Fragen richtig stellt. Tutorial Forum
Zurück   GIMP-Forum 3.0 > Arbeiten mit Gimp > Tutorials > Grundlagen

Hinweise
Alt 20.09.2007, 16:49   #1
Mefisto
Erfahrener Benutzer
 
Benutzerbild von Mefisto
 
Registriert seit: 29.01.2007
Ort: Kassel
Beiträge: 1.487
Standard Website Tutorial

[FONT=Arial, sans-serif]Hallo!

Ich hoffe ihr habt viel Spaß mit dem Tutorial und könnt es einigermaßen nachvollziehen. Solltet ihr Fragen oder Kritik haben würde ich mich natürlich sehr freuen wenn diese hier geäußert werden würden, damit ich mein Tutorial dann überarbeiten kann. Ihr helft somit also mit, anderen dieses Tutorial zu erleichtern.

Nun noch ein kurzes Wort zum Inhalt: In diesem Tutorial behandele ich die grafische, wie auch CSS- und Div-basierte Gestaltung eurer Homepage. Ihr braucht keinerlei Vorkenntnisse, da ich auch bei für erfahrene Benutzer einleuchtende Schritte sehr ins Detail gehen werde. Wie gesagt, sollte dennnoch etwas unklar sein, gebt mir einfach bescheid.

Was ihr für das Tutorial benötigt:[/FONT]
  • [FONT=Arial, sans-serif]The GIMP [/FONT]
  • [FONT=Arial, sans-serif]einen Editor (Luxus wäre natürlich WYSIWYG zum zwischenansehen der Ergebnisse oder Syntaxhighliting) [/FONT]
  • [FONT=Arial, sans-serif]Geringe Vorkenntnisse von Gimp (Wo ist das Werkzeugfenster, wie benutze ich ein Werkzeug (dazu zählt nichtmal der Ebenendialog )) [/FONT]
  • [FONT=Arial, sans-serif]etwas Geduld, das Tutorial kann einige zeit dauern! [/FONT]
  • [FONT=Arial, sans-serif]Motivation & Spaß [/FONT]
!WARNUNG! Die Seite wird im Internet Explorer nicht korrekt dargestellt, welches an diesem, nicht am Code liegt. Die Anpassung des Codes würde zu lange dauern und den Ramen dieses Tutorial sprengen. Die Darstellungsprobleme sind minimal und daher werde ich auf die Anpassung an den IE verzichten. !WARNUNG!
[FONT=Arial, sans-serif]
So, genug des Vorwortes, jetzt zum eigentlichen Teil, das Tutorial Ersteinmal, das Endergebnis soll inetwa so aussehen (klicken auf das Bild vergrößert es):


[/FONT]


[FONT=Arial, sans-serif]1. Erläuterung zum Gesamtaufbau[/FONT]
[FONT=Arial, sans-serif]Als erstes sollten wir uns klar machen, welche Maße die Homepage später haben sollte. Für Anfänger ist es anfangs sehr schwer, die Pixel eines Bildschirms in eine Länge auf diesem denken zu können. Daher hier eine kleine Grafik:[/FONT]
[FONT=Arial, sans-serif][/FONT]
[FONT=Arial, sans-serif]In dieser Grafik ist „px“ die Abkürzung für „Pixel“ und wird in diesem Tutorial im weiteren Verlauf als feste Maßeinheit verwendet. Solltest du in diesem Tutorial mal eine Pixel-Angabe finden und kannst nicht einschätzen wieviel das ist, kannst einfach hier auf dieser Grafik spicken.[/FONT]
[FONT=Arial, sans-serif]In unserem Fall soll die Seite 700px breit werden. Die Höhe einer Seite hängt natürlich von dem Inhalt ab und sollte nie fest bestimmt werden (eventuell eine Mindestgröße).[/FONT]
[FONT=Arial, sans-serif]2. Der HTML-Code[/FONT]
[FONT=Arial, sans-serif]Ja, dieser Teil ist durchaus sehr auf Theorie beschränkt und vermutlich für alle sehr langweilig. Aber denkt dran: Erst die Arbeit, dann das vergnügen Ich habe diesen Teil absichtlich vor den grafischen Teil gezogen, da sich hinterher anhand des Codes sehr schön der spezielle Nutzen der Grafiken erläutert werden kann. Aber nun zum Code![/FONT]
[FONT=Arial, sans-serif]Eine jede HTML-Seite hat grundsätzlich einen bestimmten Aufbau, welcher IMMER eingehalten werden muss. Hier einfach mal ein Code, die Erläuterung folgt dann später.

[/FONT] [FONT=Arial, sans-serif]

[/FONT] [FONT=Arial, sans-serif]In HTML werden „Befehle“ in so genannten „Tags“ dargestellt („<“ oder „>“, dazwischen die Anweisung). Die „Klammer“, die nach links kleiner wird, öffnet den Tag, das heißt sie steht vor der Anweisung die damit signalisiert werden soll, und die Klammer, die nach rechts kleiner wird, schließt den Tag und schließt die Anweisung. Die meisten Anweisungen haben eine genaue Funktion, denn das, was im Tag steht, sagt meistens nur was genau mit dem INHALT getan werden soll. In unserem obigen Codebeispiel ist das sehr schon am „<title>“-Tag zu erkennen. Nach dem „<title>“ steht der Inhalt, nämlich „Website“. Danach folgt erneut der „<title>“-Tag, allerdings hat er nun einen Querstrich davor („/“): </title>. Dieser signalisiert, dass der Titel hier endet. Alles, was jetzt zwischen „<title>“ und „</title>“ steht, wird dann später im Browser als Seitentitel im Fensterrahmen angezeigt. An dieser Stelle ist kurz anzumerken, dass HTML keine Programmiersprache, sondern eine Auszeichnungssprache, aber das soll jetzt hier nicht näher vertieft werden. Nun machen wir uns nämlich an die Auswertung des oben aufgeführten Codes.[/FONT]
[FONT=Arial, sans-serif]<html> signalisiert, dass hier ein HTML-Dokument anfängt und muss an den Anfang jedes Dokuments.[/FONT]
[FONT=Arial, sans-serif]<head></head> ist ein spezieller Bereich des HTML-Dokuments und sollte NIE fehlen! Hier werden alle wichtigen Seitenangaben getätigt (wir werden später noch einige kennen lernen), sowie auch der[/FONT]
[FONT=Arial, sans-serif]<title>Website</title> der Titel-Tag wurde oben schon etwas erläutert, aber hier auch nochmal kurz: Er sagt dass „Website“ im Browserfenster oben als Titel angezeigt werden soll.[/FONT]
[FONT=Arial, sans-serif]<body> </body> Dieser Tag ist der mit Abstand wichtigste Tag im ganzen HTML-Dokument. Er umschließt den eigentlichen Seitencode. Hier befinden sich z.B. Text und Formatierungen, Bilder und Formulare die du auf anderen Websites siehst.[/FONT]
[FONT=Arial, sans-serif]</html> Klar, am ende muss das HTML-Dokument ja auch wieder beendet werden. Also brauchen wir den schließenden Tag, der sagt dass das HTML-Dokument hier zu ende ist.[/FONT]
[FONT=Arial, sans-serif]Noch als index.html abspeichern und schon hast du deine erste HTML-Datei! [/FONT]
[FONT=Arial, sans-serif]So, jetzt haben wir schon mal die Grundlagen von HTML kennen gelernt. Du kannst den Code von oben abtippen und auch etwas damit rum experimentieren. Wenn du dir die Datei angucken willst, kannst du im Browser über „file:///der komplette Pfad zu deiner Datei“ die Datei ausgeben lassen. Du kannst auch mal probieren, einfach Text in den body-Bereich deiner Seite zu schreiben.[/FONT]
[FONT=Arial, sans-serif]Nun kommen wir zum für Einsteiger vermutlich schwierigsten Teil des Tutorials: Ein ganzer, kompletter, großer, überwältigender Batzen an Code, der euch vermutlich gleich komplett demotivieren wird. Daher überlasse ich es euch, ob ihr die nachfolgende Erklärung durchlesen wollt oder ob ihr einfach nur den Code übertragt. Mein Rat wäre allerdings die Erklärung zu lesen, da sie für den restlichen Verlauf des Tutorials eventuell wichtig sein könnte.[/FONT]

So sieht unsere Seite ohne Bilder aus:





[FONT=Arial, sans-serif]index.html:[/FONT]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Website</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="main">

<div class="navigation">
<p class="header">Navigation</p>
<p class="links">Home<br />Downloads<br />...</p>
</div>

<div class="content">
<p class="content2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<div class="image">
<img src="image.png" />
</div>
</div>

</body>
</html>[/html]



Dieser HTML Code stellt im Grunde den kompletten Seitenaufbau, wie er später sein wird, dar. Doch gibt es ein weiteres wichtiges Element beim erstellen von Internetseiten: CSS (Cascarding Style Sheets). Früher hat man die Formatierung vom Inhalt der Internetseiten IM HTML-Code vorgenommen, doch kann einem CSS die Arbeit abnehmen, an sämtlichen Stellen des Codes mal einzelne Bruchstücke der Formatierungen zu haben. Im HTML-Code wird lediglich per class="irgendeinname" eine Verknüpfung auf eine Klasse im Stylesheet getätigt. Dadurch hat man alle Formatierungen in einer einzigen Datei (in unserem fall css.css) zusammen. Wenn ihr euch den Code oben mal etwas näher anschaut, wird euch auffallen, dass in den <div>-Tags sehr oft der class-Parameter verwendet wird. Übrigens: Divs sind im Grunde "Container". Man kann sich das so vorstellen:

Ihr zieht auf der Seite ein Kästchen. Dieses könnt irh hinterher (per CSS) sehr genau ins Detail konfigurieren. Nun schreibt ihr in dieses Kästchen eine Navigation. Ok, jetzt fehlt nurnoch das Kästchen für den Content-Bereich. Also erstellt ihr ein weiteres Kästchen und positioniert es neben die Navigation. Ihr könnt es jetzt wiederum über das Stylesheet formatieren und Text hineinschreiben.
Ganz so einfach ist es natürlich nicht, und man kann die DIVs auch nicht einfach per klick&hold auf die Seite ziehen, aber so kann man es sich vielleicht ganz gut vorstellen.

In der obigen HTML-Datei haben wir nun also 4 DIVs. Der erste DIV umschließt alle anderen 3. Er fängt vor allen an, und wird erst nach den 3 anderen DIVs geschlossen. Er sorgt dafür, dass die anderen 3 DIVs gut formatiert werden können. Näheres dazu aber später, wenn wir uns mit dem dazu gehörendem Stylesheet befassen.

Die drei weiteren DIVs liegen nebeneinander und bilden 1. die Navigation, 2. den Content-Bereich, und 3. ein Feld für ein kleines Bild passend zu dem späteren Content. Auf diese drei DIVs werden wir jetzt im Stylesheet näher eingehen.

css.css:

HTML-Code:
body
{
    background-color: #000000;
}
.main
{
    width: 700px;
    margin: auto;
    margin-top: 30px;
}
.navigation
{
    width: 150px;
    height: 300px;
    float: left;
    margin-top: 50px;
    color: #CCCCCC;
    background-image: url(bgnavigation.png);
}
.navigation p.header
{
    font-family: Arial Black;
    font-size: 12px;
    text-align: center;
    padding-top: 10px;
}
.navigation p.links
{
    font-family: Arial;
    font-size: 11px;
    padding-left: 20px;
}
.content
{
    width: 450px;
    height: 500px;
    float: left;
    background-color: #9F9F9F;
    background-image: url(bgcontent.png);
    color: #CCCCCC;
}
p.content2
{
    font-family: Arial;
    font-size: 12px;
    color: #CCCCCC;
    padding: 10px;
}
.image
{
    width: 100px;
    height: 300px;
    float: left;
    margin-top: 50px;
    background-color: #666666;
}
So, viiiiiiiel Code, das ist mir leider auch klar. Ein holpriger Weg bis zur eigenen Website! Arbeiten wir den Code nun mal Schritt für Schritt durch, ich versuche auch mich so kurz wie möglich zu fassen und werde NICHT die Anwendung von CSS erklären, nur was die einzelnen Deffinitionen mbewirken.

.body beschreibt die Formatierung der kompletten Seite. Dafür muss man im HTML-Code nicht extra auf das Stylesheet verweisen, sofern es mit der HTML Seite verlinkt ist reich die einfach Anwendung. Hier sthet nichts weiter als "background-color: #000000;". Dies sagt, dass die Hintergrundfarbe der KOMPLETTEN Seite schwarz sein soll. Natürlich könnt ihr anstelle von #00000 auch euren eigenen HEX-Farbcode eintragen, suchtdazu einfach mal bei GOOGLE nach einer HEX-Farbcode Tabelle.

.main beschreibt die Formatierung des Haupt-DIVs, der die anderen 3 umfasst. "width: 700px;" sagt, dass der DIV insgesammt 700px breit ist. Da die drei anderen DIVs ja alle in diesem DIV liegen, heißt das, dass diese zusammen ebenfalls 700px breit sein müssen. "margin: auto;" bewirkt nicht mehr und nicht weniger dass der main-div (und Somit die komplette sichtbare Seite) horizontal zentriert wird (dieser Punkt funktioniert im Internetexplorer nicht und ist ds oben benannte Darstellungsproblem). "margin-top: 30px;" sorgt dafür, dass die Seite 30px vom oberern Rand der kompletten Seite Abstand hat.

.navigation beschreibt nun die Formatierung des 1. DIVs, der in dem Hauptdiv liegt. Dieser bildet die Navigation. Ich spare mir hier die erneute erklärung von z.B. margin-top, die sollte aus der obigen Grafik hervorgehen. Das einzig wirklich neue, was hier hinzukommt, ist vielleicht "background-image: url('bgnavigation.png');". Nachher werden wir im grafischen Teil ein Bild "bgnavigation.png" erstellen. Dieses wird dann als Hintergrundgrafik des Navigationsbereiches angezeigt. Da wir dieses Bild noch nicht erstellt haben, wird es auch nicht angezeigt und wir sehen nur die normale Hintergrundfarbe ide über "background-color" deklariert wurde.

.content beschreibt nun die Formatierung des Content-bereiches. Das ist der Bereich im Bild oben mit der Überschrift "Home. Hier ist ebenfalls schon ein Hintergrundbild verlinkt, dass wir gleich erstellen werden.

.image beschreibt die Formatierung der Box ganz rechts, in welcher ein zum Inhalt passendes Bild angezeigt wird. Lasst euch überraschen, dass ist ein kleines Gimmick das man eigentlich nicht braucht aber in gutes Design ausmacht

Somit hätten wir nun das Stylesheet durchgeguckt. Wenn ihr wollt könnt ihr euch die jetzt von mir nicht genauer beschriebenen Formatierungen oben im Bild suchen. Überlegt euch zum Beispiel, wass wohl "margin-top: 50px;" mir dem Navigationsdiv anstellen könnte. So lernt ihr zum einen CSS und unser Template etwas besser kennen.

Öffnet nun mit eurem Editor (und wenns nur der von Windows oder so ist ) eine neue Datei, kopeirt den Inhalt von idex.html hinein und speichert sie als "index.html in einem von euch neu erstelltem Ordner ab. Tut das selbe mit unserer css.css und speichert sie im selben Ordner unter css.css ab. Wenn du nun die index.html mit deinem Browser öffnest hast du jetzt schon die Seite

Herzlichen Glückwunsch, wir sind nun somit mit dem langweiligem Teil dieses Tutorials durch. Ihr merkt sicher dass das alles ziemlich kompliziert ist und man durchaus eine Zeit braucht, bis man sowas flüssig kann. Selbst Profis müssen imemr nochmal im Internet Dinge nachschlagen.

3. die Navigationsdiv-Hintergrundgrafik

So, nun zum Teil der hoffentlich Spaß macht, die grafische Gestaltung der Seite Richtet euch hierbei bitte nicht 100% nach mir, lasst eurer kreativität freien lauf. Ändert mal eine Farbe, guckt was euch gefällt, es gibt ja immer STRG+Z, um den letzten Schritt wieder rückgängig zu machen

3.1 Neues Bild

Erstellt nun in Gimp ein neues Bild, indem ihr im Hauptfenster Datei->Neu... benutzt. Übernehmt die Werte aus dem folgendem Bild:



Bestätigt mit OK. Nun habt ihr ein Bild mit den Maßen, die auch euer Navigations-DIV hat.

3.2 Die Forum

Öffnet mit STRG+L den Ebenendialog und erstellt eine neue Ebene:



In dem sich öffnendem Fenster änder den Ebenennamen in "Dummie" und übernehme die restlichen Daten so wie sie sind. Nun hast du eine neue Ebene erstellt. Markeire diese durch einen einfachen Klick darauf und wechsele dann wieder in dein Bild-Fenster.
Markiere mit STRG+A das komplette Bild. Danach verkleinerst du die Auswahl um 2px per Rechtsklick->Auswahl->Verkleinern->Wert: 2px. Nun müssen wir das Rechteck an den Kanten etwas abrunden: Rechtsklick->Auswahl->Abgerundetes Rechteck...->Wert: 20 (Kontav darf NICHT aktiv sein). Nun müssen wir eine kleine Korektur der Auswahl durchführen. vergrößere dazu die Ansicht des Bildes auf 800% und scrolle in die rechte obere Ecke:



Nun drücke und halte die SHIFT-Taste, klicke und halte DIREKT auf die obere Kante der bisherigen Auswah (etwa da wo der rote Punkt ist). Lasse die SHIFT-Taste los. Ziehe diese Auswahl nach unten, bis sie die untere Kante der bisherigen Auswahl berührt. Nach rechts ziehst du die Auswahl bis an den Bildrand und lässt los. Deine Auswahl müsste jetzt so aussehen:



Stelle sicher, dass die Ebene "Dummie" aktiviert ist (STRG+L). Dann fülle die Auswahl mit Schwarz. ENTFERNE DIE AUSWAHL NICHT! Nun öffne erneut den Ebenendialog (STRG+L) und klicke einmal auf das Auge vor der "Dummie"-Ebene, wodurch diese Ausgeblendet wird. Du solltest jetzt (bis auf die Transparenz) ein leeres Bild vor dor haben.

3.3 Der Rand

Du solltest noch die Auswahl von eben haben (Wenn nicht, öffne den Ebenendialog: Rechtsklick auf die Dummie Ebene->Auswahl aus Alphakanal).

Erstelle eine neue Ebene mit dem Namen "Rand" und aktiviere sie (einfach draufklicken). Nun öffnest du das Bild-Fenster und machst in der Auswahl: Rechtsklick->Auswahl->Rand->Wert 2. Dadurch entsteht eine neue Auswahl um den Rand der Auswahl von eben. Fülle diese Auswahl nun mit der Farbe "525252" (Hauptfenster->Diese zwei Farbkästchen unter den Werkzeugen->auf das obere klicken) und deaktiviere mit STRG+SHIFT+A die Auswahl. Wenn ihr alles richtig gemacht habt, müsste euer Bild jetzt so aussehen:



Öffnet nun wieder mit STRG+L den Ebenendialog: Rechtsklick auf "Dummie"-Ebene->Auswahl aus Alphakanal. Danach markiert ihr wieder die Ebene "Rand" und wechselt in euer Bild. Dort macht ihr Rechtsklick->Auswahl->Auswahl verkleinern->Wert 1. Danach drückt ihr STRG+K, welches den ausgewählten Bereich aus eurer Rand-Ebene ausschneidet. Der innere Teil eures Randes sollte nun ausgeschnitten sein. Ich mache hier keinen Screenshot, da auf diesen alles recht schlecht zu erkennen wäre.

3.4 Die "Füllung"

Nun aktiviert ihr wieder den Ebenendialog (STRG+L) und erstellt eine neue Ebene, die ihr "Farbe" nennt. Diese schiebt ihr per Drag&Drop unter die "Rand"-Ebene . Euer Ebenendialog sollte nun so aussehen:



Per Rechtsklick auf "Dummie"-Ebene->Auswahl aus Alphakanal ergattert ihr euch wieder eine Auswahl und aktiviert die "Farbe"-Ebene . Wechselt wieder zu eurem Bild und füllt die Auswahl mit einer Farbe eurer Wahl, ich habe das Rot "830000" genommen . Erstellt eine neue Ebene "Muster", die ihr zwischen die "Farbe"- und die "Rand"-Ebene schiebt und aktiviert. Nehmt nun eine Farbe, die etwas heller ist als die von eben (in meinem Fall "ba0000") und brusht richtig schön mit euren Lieblingsbrushes auf der Ebene rum. Sucht dafür mal nach Brushes auf DeviantART.com. Solltet ihr keine Brushes haben/wollen, braucht ihr diesen schritt auch nict zu machen und könnt die "Muster"-Ebene wieder löschen. Stellt nun die "Muster"-Ebene im Ebenendialog auf den Ebenenmodus "Überlagern":



Nun könnte euer Bild so aussehen (kommt ja ganz auf eure Brushes an!):



3.5 Innerer Schatten

Jetzt fehlt nur noch eins an unserer bgnavigation.png-Datei; der innere Schatten. Dieser schritt sorgt dafür, dass das rote jetzt wie "versenkt" aussieht. Dafür öffnet ihr den Ebenendialog (STRG+L) und erstellt eine neue Ebene. Diese nennt ihr "Schatten". Sie sollte zwischen der "Muster"- und der "Rand"-Ebene liegen. Nun holt ihr euch wieder die Standard-Auswahl aus unerer "Dummie"-Ebene per Rechtsklick->Auswahl aus Alphakanal. Markiert die eben neu angelegte "Schatten"-Ebene und wechselt in das Bild-Fenster. Dort macht ihr Rechtsklick in die Auswahl->Auswahl->Verkleinern->Wert 1 und füllt die Auswahl komplett mit schwarz. Sieht jetzt erstmal merkwürdig aus, aber das kommt noch ... Nun verkleinert die Auswahl erneut um 5px (Rechtsklick->Auswahl->Verkleinern->Wert: 5). Bevor wir jetzt das überflüssige Schwarz wegschneiden, müssen wir die kanten der Auswahl etwas weicher machen. Dazu macht ihr folgendes: Rechtsklick->Auswahl->Ausblenden...->Wert 10. Nun könnt ihr mit STRG+K das überflüssige Schwarz wegschneiden und den Ebeenmodus (siehe Schritt 3.4) auf überlagern stellen. Euer Bild sollte jetzt so oder ähnlich aussehen:



3.6 Das Abspeichern

Speichert euer Bild unter dem Namen "bgnavigation.png" im selben Ordner ab, in dem sich auch eure index.html und die css.css befinden. LASST DAS BILD DANACH GEÖFFNET! Damit die Datei richtig angezeigt wird, müsst ihr in der Datei css.css folgende Änderungen durchführen:

Suche flgenden Absatz:

.navigation
{
...
}

Und lösche zwischen den Klammern die Zeile "background.color: ...;".

4. Die Contentdiv-Hintergrundgrafik

Ich werde hier nichtmehr näher auf die Dialoge aus 3. eingehen. Ich setzt nun wissen wie "Wie erstelle ich eine neue Ebene?" oder "Wie erstelle ich ein neues Bild" vorraus, da ich diese Dinge in 3. schon einmal erklärt hatte.

4.1 Neue Datei

Erstellt eine neue Datei: 450x500px

4.2 Die Füllung

Der einfachheithalber nehme ich in diesem Tutorial eine sehr einfache und weit verbreitete Methode, eine Fläche futuristisch zu füllen: "Gebürstetes Metall" ...

Wechselt ins Hauptmenü von Gimp, setzt die Vordergrundfarbe auf "808080". Füllt euer neues Bild komplett damit. Dann: Rechtsklick->Filter->Rauschen->Streue RGB. Übernehmt folgende Angaben:



Bestätigt mit OK. so, jetzt kommt ein einfacher aber großer Schritt : Rechtsklick->Filter->Weichzeichnen->Bewegungsunschärfe. Übernehmt wieder die Angaben aus dem Screenshot:



Hossa, gebürstetes Metall!

4.3 Der Rand

So, wiedermal ein Rand man kann ja auch wirklich nicht genug davon haben Dann mal los: Lege eine neue Ebene an und stelle sicher, dass sie sich über der Ebene mit dem gebürstetem Metall befindet. Drücke STRG+A, um alles auszuwählen. Dann: Rechtsklick->Auswahl->Auswahl verkleinern->Wert: 1. Dann: Rechtsklick->Auswahl->Rand->Wert: 5. Fülle nun die Auswahl mit schwarz und ändere den Ebenenmodus dieser Ebene auf Überlagern. Feritg! Nun müsste dein Bild so aussehen:



4.3 Abspeichern

Speichert es unter dem Namen "bgcontent.png" ab (natürlich wieder in eurem Website-Ordner!)

5. Der Imagediv

Sooo nun zum letzten Teil des Tutorials, dem "Imagediv". Dafür solltet ihr euch zuerst ein Bild aus dem Internet oder von eurem PC suchen, dass euch gefällt und in die Zwischenablage kopieren.

Öffnet das Fenster mit eurem Navigationsdiv-Hintergrund. Öffnet den Ebenendialog (STRG+L) und löscht alle Ebenen bis auf "Rand", "Schatten" und "Dummie". Deaktiviert die Auswahl, solltet ihr noch von irgendwann eine haben und fügt euer Bild mit STRG+V ein. Öffnet den Ebenendialog und klickt auf das Symbol für eine neue Ebene. Euer eingefügtes Bild wird dadurch auf eine eigene Ebene gesetzt. Es ist normal, dass kein Dialog zum erstellen einer neuen Ebene kommt. Skaliert das Bild auf eure gwünschte Größe (Rechtsklick->Ebene->Ebene skalieren) und verschiebt es gegebenenfalls (M, dann per Drag&Drop verschieben). Danach öffnet den Ebenendialog und schibt die Ebene mit dem zwischen die "Schatten"- und die "Dummie"-Ebene. Dann sollte euer Bild so aussehen:



So, jetzt musssen wir alles spiegeln. Geht dazu ins Hauptmenü von Gimp und wähle das Spiegeln-Tool aus:

Spiegelt nun die Ebenen "Dummie", "Schatten" und "Rand", indem du sie im Ebenendialog nacheinander auswählst und dann im Bild irgendwo hin klickst.

Dann: Rechtsklick auf die Dummie-Ebene->Auswahl aus Alphakanal. Invertiere die Auswahl mit STRG+I. Danach aktiviere die Bild-Ebene und lösche mit STRG+K alles aktuell ausgewählte. Das Resultat sollte in etwa so aussehen:



Das ist doch schon ganz ansehlich! Nur leider noch zu breit markiere mit dem Auswahltool nun genau 100px des Bildes. Dafür setze GANZ oben rechts an und ziehe deine Auswahl bis an den unteren Rand des Bildes. Wie groß deine Auswahl ist kannst du in der Leiste unter dem Bild erkennen. Hier nochmal zur Verdeutlichung ein Screenshot.



Danach: Rechtsklick->Bild->Bild zuschneiden...

Dann kannst du das Bild unter "image.png" abspeichern.

Jetzt musst du noch im Stylesheet folgenden Absatz finden:

.image
{
...
}

und darin die Zeile "background-color: ...;" entfernen.

FERTIG!


Boa, knapp 8 Stunden arbeit endlich beendet *stöhn/ächz/säufz* Ich weis dass das Design nicht wirklich schick ist aber es soll auch eher den Umgang mit Webdesign (auch was Code angeht) lehren.

MfG,

Jonathan

Geändert von Mefisto (21.04.2008 um 19:23 Uhr)
Mefisto ist offline   Mit Zitat antworten
 

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist An.
Smileys sind An.
[IMG] Code ist An.
HTML-Code ist Aus.

Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Newbie - Anfänger - Banner Tutorial Jyivindar Grundlagen 229 09.12.2014 14:02
[doppel] Als Tutorial kennzeichnen jo Gimpforum 2 01.04.2006 13:51
Website Design MartinG Design 4 17.02.2006 14:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:36 Uhr.


Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.