How To Make-Layouts - The Book Of Howrse
How To Make Layouts
Um Layout, gibt es zwei Möglichkeiten. Die erste ist ein div-Layout genannt. Der zweite ist ein Tabellen-Layout genannt. Hier werde ich Ihnen beibringen, um ein div Layout zu machen, because- gut, denn es ist viel einfacher, dauert ca. 4 Stunden weniger und noch habe ich nicht die Tabellenlayouts noch gemeistert. ;)
Ich habe auch ein Video-Tutorial für dieses Verfahren, wenn Sie lieber UND HIER ALS READ- KLICK WÜRDE UHR LISTEN!
Erster Schritt: Das Bild
Es gibt ein paar Möglichkeiten, um Ihre Image- die erste zu erhalten ist, einen zu finden, ist der zweite zu machen, der dritte ist ein ein selbst fotografieren. Sie werden nicht Hilfe benötigen Sie Ihr eigenes Foto in Einnahme Ich bin sicher, aber ich kann Ihnen mit den anderen Optionen helfen.
Methode eins: Finden Sie ein Bild ohne RequiredAttributation
Das erste, was Sie tun müssen, ist ein Bild finden Sie wollen. Ich mache einen zulässigen Bilder suchen. Das ist wie:
Gehen Sie zu dieser gelinkten Seite (öffnet in neuem Tab / Fenster) und scrollen Sie nach unten. Dort finden Sie eine Option mit einem Drop-Down-Menü finden:
Wählen Sie die letzte Option, „Free zu verwenden, zu teilen oder ändern, auch im Handel“. Dann klicken Sie auf „Erweiterte Suche“ und es wird Sie zu Google Bilder nehmen. Dann können Sie wie normale Suche, aber es wird nur Bilder bringen Sie nicht in Schwierigkeiten für die Verwendung erhalten.
So suchen Sie nach Ihrem Bild. In diesem Beispiel Layout Ich bin für das Tutorial zu machen, sind wir auf der Suche nach „Pferd close up“.
Wenn Sie das Bild finden müssen Sie sicherstellen, dass es mit dem Layout, das Sie machen wollen kompatibel ist. Zum Beispiel:
Methode zwei: Die Suche nach einem Bild auf DeviantART (mit dem erforderlichen Attributierung)
Methode drei: Making Your Bild (Doing a Manip)
Inzwischen sollten Sie Ihr Bild haben! W enn Sie einen Anwärter finden, stellen Sie sicher, dass Sie es irgendwo speichern, wo Sie es leicht finden. Jetzt ist es Zeit bearbeiten it- diese nächsten Teile sind komplett optional, aber sie machen das Layout sehr professionell aussehen!
Zweiter Schritt: Bearbeiten Sie das Bild
Jetzt ist es Zeit zu einer Online-Bildbearbeitung von Kopf! Sie können auch eine normale wie GIMP verwenden; nur weiß, kann ich Ihnen nicht zeigen, wie das zu tun, wie ich zu diesem Zeitpunkt nicht, dass verwenden. Einige verschiedene Online-Foto-Editoren gehören Pixlr, Canva, Polarr, Lunapic. und Fotor.
Nun wollen wir unsere Textfelder setzen, wo wir sie haben wollen.
Erste Ihr Foto Ribbet laden, und klicken Sie auf die Registerkarten am oberen Rand für was auch immer Sie wollen. Die Effekte können durch die Hunderte tun sind, und während einige sagen, „Premium“ neben ihnen, sie sind eigentlich alle kostenlos. So tun, was Sie wollen! Aber bedenken Sie, wo Sie Ihre Textfelder setzen wollten. Und dann, wenn Sie mit dem Spaß Sachen fertig sind, machen Sie sich bereit für die genaue Sachen. Klicken Sie zunächst auf die Registerkarte „Basics“. Klicken Sie auf „Größe ändern“. Ihr Bild muss 890 x sein ---- für eine große Layout oder 503 x --- für ein schmales Layout. Ribbet machen die Höhe gut aussehen, so lange wie Sie das Seitenverhältnis Taste aktiviert haben. Geben Sie einfach 800 im ersten Feld und klicken Sie auf „Übernehmen“.
Klicken Sie nun auf die „Aufkleber“ -Reiter. navigieren Sie zu der „geometrischen“ Option nach unten.
Setzen Sie ein VIERECKS wo Sie ein Textfeld wollen und die Größe es so, dass es nur so, wie Sie es für das Textfeld wollen werde.
ein Quadrat zu verwenden ist eine schlechte Idee, weil es ein Quadrat zu sein, muss die gleiche Höhe und Breite für alle vier Seiten sein. Rectangles auf der anderen Seite, kann eingestellt werden, in jeden Raum zu passen.
erhalten Sie nun den Rest der Textfelder auf, und dann ist es Zeit, Titel Ihrer Textfelder! Sie einfach den Text Registerkarte klicken, und Sie werden viele Schriftarten, die Arbeit zu erledigen.
Ein cooler Trick, den Sie mit dem Text tun, wenn Sie mögen es, wie Sie wollen und dann nach rechts klicken, um es bekommen alle einrichten und klicken Sie auf ‚Duplikat‘. Positionieren Sie den doppelten Text, wo man kann kaum den ursprünglichen Stick und Boom sehen! Instant-Schatten-Effekt. ;) Ich mag, dass mit schwarzem Text zu tun und farbigen Front Text, aber man kann es trotzdem tun wollen Sie da.
Wenn Sie einen Rahmen um es hinzuzufügen, können Sie, aber nicht mit ribbet- es zwei zusätzliche Schritte, aber es wird sehr cool aussehen. In diesem Beispiel störte ich nicht, aber man kann einfach weitermachen und speichern Sie das Bild (nach allem, aber die Grenzen auf sie fertig sind) und dann in Ihre Bilder gehen und es finden. Wenn Sie einen Windows-Computer haben, werden Sie ein Programm namens Farbe auf ihm finden somewhere- soweit ich weiß, Sie Windows Vista oder höher haben müssen und ich bin nicht positiv auf Windows 8 jetzt, aber wenn Sie sehen das Bild, das Sie sehen soll ein „öffnen mit“ Option am oberen Ende der Bar und wenn es gibt nicht eine dort direkt darauf klicken und die Maus über das „öffnen mit“ Namen, und klicken sie dann auf „Farbe“ unter dem Menü, das erscheint. Es wird das Bild in Farbe öffnen, und dann können Sie die richtigen Tasten und Farben wählen Sie wollen und Breite Ihr will mit einem Quadrat zu zeichnen. In Farbe können Sie den Platz wählen nicht eine Füllung haben in so können Sie es gleich um die Hintergründe zeichnen Sie mit Ribbet gemacht. Wenn Sie speichern es als JPEG fertig sind und dann können Sie es wie normale verwenden. Ich schlage vor, Betitelung sie erst, nachdem Sie das tun, und dann das Hochladen es wieder Ribbet Titel hinzuzufügen.
Wenn Sie das getan haben, können Sie „Speichern“ an der Spitze klicken in dieser oberen Reihe von Registerkarten (sie sind grün) und Ihr Bild speichern. Sie sollten es als JPEG für eine normale speichern. Wenn Sie irgendwelche Transparenzeffekte verwendet (das heißt ausgewählt, um die „transparente Ecken“ Box in der ‚abgerundeten Ecken‘ -Effekt), dann müssen Sie es als .PNG speichern oder es wird nicht transparent sein.
Nun könnte man auf glitterbase.com oder lunapic.com Kopf auf einige Glitzer-Akzente / Text auf dem Bild zu setzen oder auf einem animierten Text setzen, aber ich denke, dass wir dies wird als verlassen würden, und nehmen Sie an den nächsten und grundlegendste Stief- den Code!
Schritt drei: Der HTML-Code
Nun, wenn Sie in den Editor zu bekommen, wird es einige Beispiele HTML drin sein. Löschen Sie es, Sie brauchen es nicht. Jetzt ist es Zeit, in der ersten Zeile des Codes zu setzen:
Sobald Sie, dass in füllen, drücken Sie die Eingabetaste, und den Code starten Sie Ihren Text weiter anpassen:
Jetzt können Sie in Ihrem zufälligen Text, auf eine neue Zeile setzen, und stellen Sie sicher, eine Tonne zu verwenden, um sicherzustellen, dass Ihr Feld rechts scrollen wird. So was:
* Achten Sie darauf Kopieren Be + dieses Stück ‚Text‘ Einfügen unten, wenn Sie Google Chrome verwenden. Aus irgendeinem Grund friert es immer Ihren Computer. Ich sollte wissen.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Und dann können Sie die Code- am Ende wie folgt:
Und nun eine weitere Zeile nach unten gehen und setzen:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Wie kam ich die beiden anderen Textfelder Sie fragen? So was:
Und es gibt noch mehr Dinge, die Sie zum Beispiel tun können allzu in dem Codetextfeld Sie Hintergrundfarbe hinzufügen = „red“ oder was auch immer Farbe und haben einen Hintergrund auf den Text Box- Sie können es einfach nicht verblassen wie wir taten die Bildbearbeitung. )
Und du bist fertig!
Fehlerbehebung:
Wenn das nicht hilft, mailen Sie mir, oder PM mich, und ich werde sehen, was ich tun kann. )
Ich möchte einen Ruf heraus zu Overo im Internationalen Howrse-Server geben, diese Layout-Tutorial für die Buchung und werden so mit meiner endlosen patentiert, und zwangsläufig ärgerlich, Fragen per PM. XD. Bitte klicken Sie auf den Link oben, um vorbei und gratulieren ihr!