PHOTOSHOP TUTORIALS/TUTORIALS
Here,I would describe and show you many techniques I use in layout making.You do NOT have to give me any credits for making any graphics or layouts. However, if you do, I would really appreciate. Here, you will not FIND tutorials made by people, only tutorials made by me.Therefore, redistributing these tutorials are not allowed. If you really need to, please ask me for permission. Any comments or suggestions for the tutorials are welcomed. :]
Layout Tutorial for Paint
Oh, how low can you go? No, it's not impossible to make a layout with paint. It really isn't. So gather up all you people who lacks Photoshop or Imageready [or just didn't get them off of limewire... psstt psstt... j/k] Nah, I didn't get it from the internet. My friend gave me the CD. Yes, very nice. xD Otherwise, I would be photoshop-less, and I know how it feels: horrible. So now, I will show you how to make layouts with Paint. I will not provide the instructions on how to code. Just only how to make the banner. Check the other layout tutorial if you want to know how to code.
Final Result:

To make a [paint] layout, you need: +Paint [oh lord, don't tell me you DON'T HAVE PAINT!!! *shakes you* +Internet Explorer +This Page to Be Opened +Images of your Choice
Now that you have everything need, you are ready. Step 1: The Image: [REMEMBER, click on the images on this tutorial to open a new screen for a BIGGER VIEW!!!]I feel like Balthier today. So I choose this image:
 So, you right click on the image, and select "Copy Image [firefox]" or "Copy". Go to the Start menu, Accessories, and then Paint. Click on the Paint program. On the top menu, click on Image, and then click on Attributes. Or just click [Ctrl+E]. On Units, check on Pixels. On Colors, it should be checked on Colors. For Width, type in 750. For Height, type in 700. Click Okay.
 Paste your image by holding Ctrl and pressing V.
When you paste it, it should automatically be on the Marquee tool. You can drag the image around. I'll just move it down a bit.

Step 2: The Background: Now, since your layout will be made in paint, it's best to make it like a collage or scrapbook kind of layout. Paint program has no LAYERS. So whatever you're doing, make sure you do it RIGHT. The edit undo button [Ctrl+Z] works only a few times, and whatever you've done is history. It's good to save frequently whenever you've done something perfectly. But don't save it when you've done something wrong. Just load it up. =D Anyway, for the background, use a color that commonly appeared on the image, or a matching color. If your image has many colors, stick with a black or white background. I'll use a color that's on Balthier. Select the Eye Dropper tool and click on the color you want for the background color. Or you can just use default color from the color selection. I chose a color from his sleeves.
 Now, I shall use the Bucket tool or as they call it: Fill With Color. Click on the white background to dump paint. This is what it looks like on my screen now.
 It looks bad because of the white border, no? That's because the paint bucket tool only dumps and replace one certain color. But don't worry, we'll fix that up. If your image doesn't have a white border, then that's great!!! You can skip the part of the tutorial with the grundge and stuff. ^_^
Step 3: Faking the Grunge or Cut Out: Yes, the next step is to fake a grunge--- or a cut out! Since the border of the image has these ugly pixels, why not make it look attractive? Unless you'll willingly go through the trouble of using your pencil tool and coloring over those ugly pixels, let's make it look professional. Select the Eye Dropper Tool. and click on the pixels surrounding the image. Mine is white, so I'll just use white. Now carefully, select the Brush Tool. On the bottom in which you can select the shape of your brush, select one of the diagonal brush. I chose the smallest one slanting down to the left. 
Draw an outline on the image, but make it bigger and wide, not a real outline actually. Draw an outline of the cutout, let me show you what I mean.
 See how it's an outline? Don't DUMP the color of the outline inside. Instead, use the brush you've chosen to do the outline and color in. Do not color every space though. Just go zigzag and color most spaces, but leave a few pixels untouched. I colored in and left a lot of pixels floating around. It's true, it doesn't look as good as the Photoshop effect, but hey, at least you have something since you got paint. xD
 With the same brush tool, draw some splattering specks outside with the same color. You can also use the pencil tool. At first it looks bad, but I'll show you what to do next.
 Using the eye dropping tool, , click on the background to get the color, don't use the same color you've just used. Click back on Brush if you weren't using it, and use the smallest Circular brush. 
Go over the white marks you just did OUTSIDE of the image. Again, do it diagonally or vertically, but make sure you leave some scraps of marks left, don't go over the whole thing. You can also use the second to biggest circle brush. When you're done, slightly go over the outline with that brush. Make sure you don't hurt your image, just the pixelly outline. This is my result:
 You can repeat the same thing, but with different colors. I chose a grayish color, and I drew specks and erased them. I also used the airbrush tool , and did a little spraying.
 I airbrushed it a little bit with a greenish color around the scribbles [but not on the picture]. Using the line tool , you can draw lines vertically or horizontally. Hold Shift key to make it go straight.
 By using the line tool , draw Horizontally some lines, for your Title or name. Make multiples of lines one underneath the other.Remember to hold the "Shift Key" for straight lines.

Afterwards, click on the Text tool . With the tool, make a wide rectangular figure on the top-left corner of your lines.
Right-click inside the square Marquee and select Text Toolbar. If you have never done this before, you can now change your text font, size, and color! You could also make it bold, italic, or underline. It's simple. =D Select your color for the font by the same way you usually select your color for your brushing.
Following, write your title. It could be a cool name for the layout, or just the character's name. On this Paint layout, I wrote Balthier. With double spacing in between letters, white, and underlined.

Step 4: Patterning on Paint: Open a new Paint program. [please do, you can't do this part without opening another file.]. Once you make your canvas [to any size], click on Image at the top and select Attributes on the drop-down menu. [Or hold Ctrl+E] When the window pops up with the canvas editing, on the bottom of the window, there's a choice between "Color" and "Black and White". Select "Black and White" followed by [OK]. The message: "Converting to black and white cannot be undone. This action affects the current file and may cause some loss of color information. Do you want to continue?" should pop-up. Click okay [nothing lost since this is a new paint window]. Immediately on the bottom of your paint program, the color selections should have changed dramatically into patterns.
Awesome huh? Now you can use patterns. I'd go ahead and click on the Ellipse tool , and set it to the bottom option.
On your Color [but now pattern] Selection, click on a pattern you like. 
I chose the bottom row, and the third to the last. [not shown above though] Back to your canvas, hold the Shift Key and produce a perfect circle. It could be big, but not too big. I'll make it medium size. This is what it should look like:
Click on the Marquee tool , make a marquee around the circle, and right-click. On the drop down, click on "Copy". Switch back to your layout window, and click on the Marquee tool . On the two options for the Marquee tool, select the bottom one.
For your color selection on your layout window, make sure the bottom/second color is white.
It doesn't matter if the top one is white or not. Finally, right-click and Paste. Wow!!! It's a TRANSPARENT SCREEN!!! Yes it is! It's a fully transparent patterned screen. You can drag it anywhere you want.
 If you want different patterned screen, repeat this step, except when it is time to select your pattern, click on a different pattern. You can place as much patterns as you want. However, I'd stay for 1-3. You may also use a Rectangle tool , a Rounded Rectangle tool , or a Polygon tool to create shapes for the patterns. Always remember to select the last option for that tool. 
The flaw to this technique is that you can't change the colors of the patterns. But that's okay. =D It still looks great on Paint. My final result of this step:
 Step 6: Blog and Modules: Easiest step, just click on the Rounded Rectangle tool , or the Rectangle tool , and make a rectangle on the bottom of the layout. On the option for the tool, click on the first option. [actually you may use ANY option. I chose the second for some odd reason. xD
If you chose the second option for the Rounded/Rectangle tool. [the border, and the fill in]. LEFT CLICK on any color on the Color selection for the BORDER color. RIGHT CLICK on any color on the Color selection for the FILL IN COLOR. I'll use the top border of the Rounded Rectangle to cover up the missing part of Balthier. You can also change the Thickness of the Rounded/Rectangle's border, by click on the line tool , and choosing any of the thickness option.
Whenever you draw the modules or blog, make sure you let the rectangle's bottom border NOT APPEAR on the bottom of the screen.
 You can tell that I'm not making any modules, I'm just making a blog. If you're making modules, just do the same thing. The border for the rectangle was a Left-click on brown while using my Eyedropper tool . The fill for the rectangle was a Right-click on a greenish gray using my Eyedropper tool as well. Basically, you're almost done! You can write your credits somewhere on the layout, add some more shapes, or words. I'm going to write someting on the blog area, and play around for a bit. Step 6: Repeating Background: Another rather easy step, is the repeating background. Using the marquee tool, , create a marquee on the bottom half of the layout where everything looks the same horizontally and vertically. There should be lines only going VERTICALLY.
 Right-click and click on Copy. Open a new Paint program. [by this time, you can close the other one with the patterns you've used. ] On your new paint program, click on Images at the top, then on Attributes. Change the Width to 1, and the Height to 1. Make sure that the Units are set to Pixels. Click okay. The Canvas should be barely visible right now. No worries! Hold Ctrl and press V for a paste. Now, the whole canvas should be wrapped around the background, so there shouldn't be any white spots!
 Now you're finish. Click on File, Save As... and on the "Save as type:", select JPEG. Name your file name, and add background to the end of the name. Hit Save. Back on your Layout window, click on File>Save As, and on Save as type, select JPEG. Name your file, and hit Save. Go to imageshack.us, click on browse, and upload both of your files. CONGRATS! You've just made your first layout on Paint! =D Step 7: Coding Problems: There shouldn't be any coding problems. Go to my other layout tutorial, and start on the coding section. The only problem is probably the "Cropping" part. But you'll do fine. Just guess on the number of pixels for the Height and Width. That's what I did when I first started making layouts. I didn't use the crop tool. Like for the header's height, or for the module's width, just guess and input numbers. Easy. This whole tutorial took me Five painful hours, because of the screenshots and instructions. I hope you like this tutorial! When I first got my computer, I loved Paint to death. I really did. All I did all day was draw in Paint. Yes, I had no life. Hahahaha... now I understand for those who cannot get Photoshop, or Paint Shop Pro. I feel for them, and I felt the need to make this tutorial for those in need. =D Final Results: Banner: http://img213.imageshack.us/img213/4453/balthierrh1.jpg Background: CLICK!
I hope you love this tutorial, for it should have taught you many new things about Paint. Paint could be love. ^_^ Love you all! =D Thanks for supporting me. More tutorials to come soon.... -Angel Wings, Ancient Whisper, Aeris |