How to Make "Sail"'s Layout || Pictures Included

I'm using the layout from my story "Sail" because it's a simple layout and doesn't require a lot of fixing around. You don't need photoshop for this layout either, so it's pretty simple. I'm going to do this step-by-step for some of the newer members, so if you know your way around, you can skip down to step three. c:

You need:
*A patterned background that repeats (you can't tell it's the same picture repeated)
*A photo of whatever you want with a width of 500px (yes, you're cat can be in the photo)
or If you want, I can give you the links to the images on my layout so you can see how it works.

1. Go to "My Mibba." When you write a story, you'd go to stories. Instead of clicking stories, hover over it. A drop down menu appears. Click the last item, Layouts.

2. In the layouts page, there is a button next to the search bar that says "New Layout." Click it. You'll be asked to choose a display story. Click "default" from the drop-down menu and click Submit. The screen you will say will have a movable box with different tabs on it. The tabs are Page, Content, Title, Subtitle, Text, Summary, and Chapters. Under each tab are three sub tabs: Background, Text, and Box. The Page tab is already opened.

3. Now to the fun stuff! With the Page tab still open, click the content in the box next to Image, and click backspace. The background will turn white, blending in with the content box. Next to color, there is a text box. You can either A type in #000000 or B click the box next to the text box. The default shade is red, but just move the cursor to the bottom of the color selector and #000000 will be automatically placed. It's your choice. c:

Image

4. Click the Content tab. Click box, and then, using the slider next to width, bring the content box's width down to 502. In the box next to the slider, replace the 2 with a 0 making the width 500px.

Image

5. If you are using photo bucket, you will need the direct link of the image for this part. If you are using the image from Google or Bing, the URL will work. I'm using Image Shack so I will be using the direct link like photobucket. Click the Title tab. In the background tab, where it says "Image," Copy & Paste the direct link/url of the image into the text back. Underneath "Image" there is an option for repeating. Click the drop down arrow and select "No Repeat."

Image

6. Click the Box sub tab under Title. Scroll down to Padding. Using the slider next to Top, slide to the right until it stops at 200. Use the slider next to bottom to adjust the padding until the image is completely shown. It may took a couple tries to fix it. Usually, my padding is top: 200 and bottom:96 or 98.

Image

7. Click the Content tab. Keep the Background sub tab open. This step is similar to step 6 except you won't be dealing with any padding on the content yet. The background tab looks identical to the one under Title. Copy & Paste your patteren image direct link/URL to the image text box. Keep the repeating option to repeat.

Image

8. This step is similar to step three. Click the Subtitle tab. Next to background color, choose a background color. It can be anything you want. I chose #OAOAOA because it goes with my theme. Copy and paste the background color to the background on the Text, Summary, and Chapters tabs.

Image

9. Go back to the Subtitle tab. Click Box and scroll down (if necessary) to Margin. Using the slider next to Bottom, slide to the left making the number change from 4 to 0.

Image

10. Click the Content tab, and then click the Box sub tab. Scroll down to padding. The default padding is 25px. Change the top, right, and bottom padding to 0. Change the left padding to 76. You can do this by selecting 25 and typing 0 or 76.

Image

11. Now that the layout set up and positioning is finished, we can style the text for the story. We'll start with the title by clicking the Title tab and the text sub tab. The color for the text is white, so the number is #FFFFFF. The alignment is Center. The font is Times New Roman. Under the font option is a slider. This changes the size of the text. Slide the dot to the left until the number changes to 21. Alternately, you can select the number next to the slider and type 21. Then, change the style from Normal to Italic.

Image

12. Do the same thing to your subtitle except change the font size to 17.

Image

13. Now, click the Summary tab, and then the Text sub tab. The color for the text is #545454. I don't have a specified color for the links, but if you're including links, I would do a lighter color than the text color or the same color. Whichever. The alignment is center. The font, again, is Times New Roman, size is 14, and the style is Normal.

Image

14. Now to work on the chapters. The font and size are the same as the font and size for the summary. The color for the link is #C7C7C7 because I don't really do chapter descriptions. If you do, you can choose a color that is the same, darker, or lighter than the link color. The alignment is centered.

Image

15. For the text, the text color is #FFFFFF with the link color being #C7C7C7. Alignment is center, text is Times New Roman, size is 14, and the style is normal. When you have completed the layout, it should like this:

Image

If you have any questions, please message me. No question is stupid, and I am here to help you.
December 10th, 2013 at 05:15am