Hey!
Ich öffne hier ein Tutorial zur Layouterstellung. Hier versuche ich euch alles zu erklären, was für ein schönes Layout nötig ist. Dazu stelle ich Screenshots mit Beschreibungen rein, was man machen muss. Außerdem erkläre ich auch, wie man Brushes und Schriftarten bei Gimp benutzen kann. Wenn ihr Fragen habt, könnt ihr sie hier gerne stellen, ich werde versuchen, alle zu beantworten.
Viel Spaß und ich hoffe, dass ich wenigstens ein paar dazu bekomme, es auch mal zu probieren.
Dieser Tut ist nicht zum kopieren gedacht! Gerne zum üben und empfhelen, aber nicht zum Veröffentlichen in anderen Foren, außer ich mache das selbst.
Schritt 1:Um ein Layout zu gestalten braucht ihr ein Grafikprogramm z.B. Photoshop oder Gimp. Ich arbeite mit Gimp, da man es kostenlos im Internet herunterladen kann, wohingegen Photoshop Geld kostet. Schaut am besten hier nach:
KlickErstmal eine kleine Einführung: Rechts ist der Werkzeugkasten, wo man alles mögliche finden kann. Links ist der Ebenenkasten, indem eure vorhandenen Ebenen angezeigt werden. Das große in der Mitte ist eure Arbeitfläche.
Also ich öffne Gimp gehe auf Datei -> Neu. Jetzt kann man die Höhe und die Breite des Layouts einstellen. Ich nehme immer Höhe: 1000 und Breite: 750, da man damit genauer arbeiten kann. Dann kann man darunter noch die Füllung des Layouts wählen. Dazu nimmt man immer Hintergrundfarbe. Zur Transparenz komme ich später. Alles andere so lassen, wie es dort steht.
So sollte es dann nachher aussehen:
Schritt 2:Jetzt füllen wir das Layout mit der gewünschten Farbe. AUFGEPASST: Die Farbe vom Hintergrund sollte nicht zu grell sein! Also lieber immer etwas Deckkraft herausnehmen.
Zum füllen benutzen wir den Eimer. Unter den Werkzeugen kann man nun die gewünschte Farbe auswählen, ich habe mich für ein Braun entschieden. Nun könnt ihr eure Deckkraft einstellen, dazu müsst ihr etwas herumtesten. Ich habe meine auf 90 eingestellt. Jetzt füllt ihr die Fläche mit der Farbe.
Schritt 3:Jetzt sucht man sich ein paar Brushes aus, die man auf sein Layout machen möchte. Diese kann man kostenlos bei
deviantart.com herunterladen. Schaut dort unter Resources & Stock Images -> Application Resources -> Gimp Brushes. Bei Search nicht vergessen einzugeben, nach was für Brushes ihr genau sucht.
Um sie bei Gimp benutzen zu können, müsst ihr sie speichern. Dann geht ihr in den Ordner und kopiert die Pinsel/Brushes. Danach geht ihr auf Arbeitplatz -> Lokaler Datenträger C -> Programme -> Gimp -> share -> gimp -> brushes. Dort fügt ihr sie dann ein. Wenn ihr dann Gimp neu öffnet, seht ihr unten im Ebenenkasten viele verschiedene Pinsel. Davon wählt ihr jetzt einen aus und skaliert ihn auf die passende Größe. Danach sucht ihr euch eine Farbe aus. Am besten etwas heller oder dunkler, als die Hintergrundfarbe. Dann könnt ihr euer Layout verschönern, aber achtet wieder auf die Deckkraft. Ein Brush sollte nicht zu stark sein, lieber etwas leichter und blasser. Aber vorsicht: Nicht zu viele Brushes machen, sonst sieht es zu voll aus.
Ich hab mich für ein paar Blumen entschieden.
Schritt 4:Jetzt kommen wir zur Überschrift. Erstmal suchen wir uns eine Schriftart aus, die einem gefällt. Wenn ihr Schriftarten herunterladen wollt, dann geht dazu am besten auf
myfont.de oder
dafont.com. Die sind da auch komplett kostenlos. Wenn ihr sie benutzen wollt, müsst ihr sie dazu speichern. Danach müsst ihr auf den Ordner klicken und dann müsste links oben in dem Kasten „Dateien extrahieren“ stehen, worauf ihr klicken müsst. Danach nehmt ihr nur die Dateien, wo irgendwelche großen Buchstaben, als Bilder angezeigt werden. Diese kopiert ihr wieder. Dann Arbeitplatz -> Lokaler Datenträger C -> Windows -> Fonts. Da müsst ihr sie dann einfügen.
Wenn ihr die Schriftart ausgewählt habt, sucht euch eine passende Farbe zum Layout aus. Es muss nicht unbedingt ein ähnlicher Ton sein, wie der Hintergrund hat, aber er sollte schon zu dem Layout passen und man sollte die Schrift gut lesen können. Ihr klickt auf das Layout und dann erscheint eine Textebene, in die ihr euren gewünschten Text eingebt. Jetzt könnt ihr noch Größe, die Ausrichtung (links-/rechtsbündig/zentriert/Blocksatz) und die Entfernung der einzelnen Buchstaben oder untereinander liegenden Wörter verändern. Mit dem Verschieben-Symbol könnt ihr eure Textebene noch an die richtige Stelle rücken. Danach klickt ihr auf Ebene -> Ebene nach unten vereinen.
Schritt 5:Jetzt müsst ihr euch überlegen, wie viele Scrollboxen das Layout später haben soll. Ich empfehle wenige, da es sonst nachher zu voll wirkt. Lieber ein paar Boxen weglassen oder zusammenfassen. Bei diesem Layout entscheide ich mich mal für 4. Dazu braucht ihr die rechteckige Auswahl. Jetzt könnt ihr unten auswählen, ob ihr Kanten haben wollt oder ob diese abgerundet sein sollen. Den Rest würde ich einfach ignorieren, der verwirrt nur. Nun sucht ihr euch die Stelle aus, an der die Box platziert werden soll. Zur Info: Ihr zieht die Box aus einer Ecke auf. Wenn ihr die Maustaste loslasst, müsstet ihr eine bewegende Box haben.
Damit man die Box nachher auch sieht, muss man sie vom Hintergrund hervorheben. Das kann man auf verschiedene Weisen machen z.B. durch Umranden, durch einen Schatten, etc. Ich benutze hier die Umrandung. Dazu geht ihr auf Auswahl -> Rand. Jetzt könnt ihr die Breite einstellen. Nur 1 oder 2 verwenden, da der Rest viel zu dick ist. Jetzt füllt ihr das mit einer Farbe. Tipp: Ihr könnt auch einfach einen Pinsel benutzen, den mit der gewünschten Farbe ausstatten und einfach drübermalen. Dem Layout passiert dabei nichts. Wenn ihr den Rand gefüllt habt, geht einfach auf Auswahl -> Nichts auswählen.
So sollte es dann nachher aussehen:
Dasselbe macht ihr jetzt mit den restlichen Boxen und später habt ihr dieses Ergebnis:
Schritt 6:Jetzt macht ihr Überschriften über die Scrollboxen. Ihr könnt wieder dieselbe Schrift verwenden oder eine andere, wie es euch gefällt. Ich benutze eigentlich immer dieselbe Schrift und auch dieselbe Schriftfarbe. Das Einzige, was ich ändere, ist die Größe der Schrift. Mach es einfach wieder wie bei der Überschrift, aber verkleinert die Buchstaben. Mit dem Verschieben-Symbol könnt ihr den Text wieder an die richtige Stelle ziehen. Denkt daran, die Ebene vorher zu vereinen, ehe ihr eine Neue macht.
So sieht es dann nachher aus:
Schritt 7:Jetzt kommt noch das Copyright unten drunter. Das macht ihr ebenfalls einfach mit einer Textebene. Dabei könnt ihr euch eine andere Schrift aussuchen, als eure „Unterschrift“. Wenn ihr noch Bilder in das Layout einbaut, dann MÜSST ihr den Namen angeben, dem die Bilder gehören, aber informiert euch vorher, ob ihr die Bilder auch kostenlos nutzen dürft. Bei Bob Langrish sind die kostenlos, aber das komplette Copyright muss auf dem Bild erkennbar sein. Niemals vergessen, sonst könnt ihr bestraft werden!
Das Copyright sollte auch nicht zu groß sein, testet das einfach aus. Ebene schön wieder nach unten vereinen und fertig! Ein einfaches, schönes Layout.
Danach speichert ihr es. Schreibt hinter den Namen .png, dann hat es eine bessere Qualität. Beispiel: Layout.png
So sieht es dann ohne Gimp aus:
Denkt daran, dass das jetzt nur ein Bild von eurem Layout ist! Um es benutzen zu können, müsst ihr es vorher coden. Dafür empfehle ich diese Seite:
KlickIch hoffe, dass es euch geholfen hat!
LG Bekkes
Startseite 