Beauty
-Age-Cindy
-Time-9-15-91
-Years-Sixteen
-Sex-Female
-Grade-Sophomore
-E-Mail- AncientWhisper @hotmail.com
-Alternative- Esoteric Memoir
-Myspace- Mrs.Strife
-DeviantART- Ancient Whisper

Oh yeah, by the way--- I own Dante from Devil May Cry at the FS Bishie Listing so back off! >3

Site

Tutorials

Rules
Rule #1:Do Not TAKE OFF THE CREDITS. More importantly, DO NOT ALTER my credits. Please let the credits, including special thanks and brush section, remain in the state it's in.
Rule #2:Do Not ALTER ANY IMAGES AND CODES AND RECONTRIBUTE THEM. This applies to the banner, background, and the code, itself. If you are planning to construct your own layout, manage with the Tutorial Codes.
Rule #3:Do Not RE CONTRIBUTE THE IMAGES.
You are NOT allowed to re contribute the images as icons, banners, or as another layout.

Affiliates
Application for Affiliation: In the past, I had no rules. Just link me, and ask me. But now, I've seen people taking an advantage of that [since I have a lot of traffic, and they want a piece of my traffic.] I have decided to place some rules.

1. You must have at least SOME traffic. If you want to start out with traffic, work your way up. I'll be checking your comments area.
2. Your xanga/site must have a purpose. If it's just your daily life, I won't accept it. 3. You must willingly link me in a visible area. Play fairly please. =D
4. I must be FAMILIAR with you. That will take a few comments on the blog, or if you're already a designer, or if you used to be a subscriber.
5. The people that are on Recommendation, are there because I highly respect them and chose to link them. If you have no button, I could still link you.

Newest Affiliates:
Stephanie/Celestial_Abyss
Celestial Abyss. <33


Statistics/Links
eXTReMe Tracker


TooPowerful.com

Please vote if you think this site deserves a top spot in the topsites. =]

Total Subscribers: 1015--THANKS GUYS!

Current Buttons Available:







ChatterBox

Entities

About this Entry
Posted by: RealitysIllusion

Original: 11/17/2006 10:34 PM
Views: 967
Comments: 32
eProps: 62

Read Comments
Post a Comment
Back to Your Xanga Site



Friday, November 17, 2006

 

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:
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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:
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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.


Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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:
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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.
Free Image Hosting at www.ImageShack.us

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!
Free Image Hosting at www.ImageShack.us

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

 Posted 11/17/2006 10:34 PM - 967 Views - 62 eProps - 32 comments

Give eProps or Post a Comment

32 Comments

browse comments: next › | last »


Visit hisaki_chan707's Xanga Site!
OMFG CINDY I LOVE YOU TO THE ULTIMATE DEATH!!!! o.o; I can make layouts now, even if they're not anywhere near yours or Zephyr's or Risa's or Yunri's or anyone (which sucks, but w/e). xD I'll still be using yours and other people's layouts though. But THANK YOU!!! OMFGWTFLOLBBQSOCOOLSOCOOOOLLLLLL~~~ *hugs you so that you start choking*

I. Must. Make. You. A. Gift. For. Making. This. Tutorial. And. Relieving. Me. Of. My. Ultimate. Depression. Phase. Even. If. It's. The. Last. Thing. I. Do. :D

Expect your gift by early December. =]
Posted 11/19/2006 10:58 PM by hisaki_chan707 - reply

Visit dobo_dog's Xanga Site!

^ That made me laugh. Hard. Oh Hisaki, you're so adorable. <33 xD

But yeah, dang. This is a great tutorial. Pwn pwn PWNAGEE... words can't express how forking amazing you are, to make such an AWESOME lay design with something as basic as Paint. And the thing is, this design that you made is so much better than a lot of other lays I've seen made by people who do use PS or PaintShop, or anything like that. Props to the infinite.

I think I might try this out for fun on Paint. :D Let's see how it comes out... x3

Posted 11/20/2006 4:44 PM by dobo_dog - reply

Visit LivingLife4Eva's Xanga Site!

OMG. I LOVE YOU. =]

I have no photoshop. This, I love.

<33 YAY! *Cheers madly*

Posted 11/20/2006 8:11 PM by LivingLife4Eva - reply

Visit quill93's Xanga Site!
Oh wow, this is so helpful. Thank you so much. Your a wonderful person.
Posted 11/20/2006 8:36 PM by quill93 - reply

Visit Stellar_Athlac's Xanga Site!
Thank you so much... ^^
Posted 11/21/2006 5:47 AM by Stellar_Athlac - reply

Visit getbacker_kim's Xanga Site!
Oh wow! That's totally cool! I never knew you could do that...
+doesn't have photoshop+
I am so going to enjoy mah time w/ this ^^
Thanks loads!
Kimchee
Posted 11/21/2006 11:12 AM by getbacker_kim - reply

Visit XLunarlightdesignsX's Xanga Site!

DANG. This tutorial is amazing! =0

^-^

Posted 11/21/2006 6:55 PM by XLunarlightdesignsX - reply

Visit TheKeybladesChosen's Xanga Site!
Wow, that's amazing!!
Posted 11/21/2006 8:20 PM by TheKeybladesChosen - reply

Visit dstnyisle's Xanga Site!

hey!

omg, thankyou so much for this tutorial! I don't have photoshop and have been searching everywhere for a site that tells you how with "the basic stuff". I had a few questions though, If I wanted to create a layout like this using a picture with more than just a person and a white background, could I? I know there was alot of filling in and stuff. Also, I need to know how to get this layout into a code. You mentioned that you tell how in a different tutorial. Hehe, yea I can't find it ^_^ Could you please send me the link to that? Oh and one more thing (yes i know, so may questions sry) Is there any way to make a code the same way and have it work for a myspace?

thank you again so much!!

I love your site ^_^

please respond to my email

luvsfrogs@bellsouth.net

Posted 11/21/2006 11:21 PM by dstnyisle - reply

Visit FinalRest's Xanga Site!

ZOMG!! THANK YOU SO MUCH FOR MAKING THIS!!!!!! I LUFF JOO!!! xD *dances around insanely*

Posted 11/22/2006 2:47 AM by FinalRest - reply

Visit Stellar_Athlac's Xanga Site!

Cindy, do reply if u see this...

In step one, you say to set the width 750. Can i set it bigger than that?

Posted 11/22/2006 6:06 AM by Stellar_Athlac - reply

Visit sxlpreview330's Xanga Site!

Thank you so much Cindy!!!! You are so awesome!!! Ive already made 2 layouts and im about to finish my third :D THIS HAS HELPED SO MUCH!

And I cant wait for the blending tutorial..I love blending stuff. Too bad my Photoshop is gone other wise id still be makin em. ^.^

I commented you here cuz I didnt know where else to and I dont know your email =P

-Nettie

Posted 11/22/2006 2:27 PM by sxlpreview330 - reply

Visit Distinct_Sorrow's Xanga Site!
Could you make a layout tutorial for Photoshop 4.0??
Posted 11/24/2006 5:33 PM by Distinct_Sorrow - reply

Visit IceAnGels30's Xanga Site!
Nify Tutorial! o< *drools over* And the Cloud one too <3 Im looking forward to seeing more tutorials They're amazing and your layouts too!

-Solita
Posted 11/25/2006 5:18 PM by IceAnGels30 - reply

Visit aggieee_x3's Xanga Site!
omg thank you so much. i love you! ^_^ well, your so awesome anyways :P
Posted 11/29/2006 5:49 PM by aggieee_x3 - reply

Visit AngelxTearxLayouts's Xanga Site!
omgsh O.O i want to thank you sooooo MUCH!!! this is soooo awesome ^^ even though i do have photosho =P

www.xanga.com/axt_008  is the one i used photoshop to do ^^
and im still working on the paint one hehe !
it looks really REALLY crappy for my first one >< i wouldve told you the site earlier but i was way to lazy xD
 
actually i think paint is easier then using photoshop xD maybe because theyre isnt any brushes and there are those polygon thingies for the modules ^^ but thanks SOOOOO MUCH CINDY!!!
YOUR SOO AWESOME! ^-^
Posted 12/3/2006 4:14 PM by AngelxTearxLayouts - reply

Visit Darkness_Sins_Productions's Xanga Site!
I love this tutorial! I can never get it right but each time it is coming out better! Thanks.
Posted 12/10/2006 10:42 AM by Darkness_Sins_Productions - reply

Visit Darkness_Sins's Xanga Site!
HEY THANKS THIS TUTORIAL IS GREAT! Look at my site for my first DIV layout! Thanks again!
Posted 12/10/2006 9:26 PM by Darkness_Sins - reply

Visit Luna_Everlasting_Soul's Xanga Site!

OMG THANK YOU ^^ I LOVE THIS THINGIE HEE^^ you rock out !

Posted 12/19/2006 2:49 PM by Luna_Everlasting_Soul - reply

Visit The_Sea_Maiden_Alchemist's Xanga Site!

omg...i freaking LOVE you!! THANK YOU SO MUCH!!!! XD

Posted 1/14/2007 5:18 PM by The_Sea_Maiden_Alchemist - reply

Visit jbm716's Xanga Site!
thank you soooo much!
For the blog part, I found out how to do a transparent blog! Its possible to make one on paint. =D
its hard to explain though. I found how to make it somewhere on this tutorial
Posted 1/16/2007 3:02 PM by jbm716 - reply

Visit Lenne_Layouts's Xanga Site!

Ahh! >< All I meant to do was make my friend a banner for her birthday. and you've helped me make a skin layout! ._.; So...

thanks you VERY much! =D

((>.> the sad thing is I have photoshop... >.>)

^___^ but Paint is pretty cool too. Thanks for the tutorial! and awesome layout.

Posted 1/21/2007 9:54 PM by Lenne_Layouts - reply

Visit rayearth_knight_02134's Xanga Site!
Wow, this is helpful to me. Aligato. Want to be affies? I want to ask you that because the tutorial encourages me (if you understand what I mean). Also, now, I can make images like photoshop kinds (sort of).
Posted 1/27/2007 8:04 PM by rayearth_knight_02134 - reply

Visit anime_myspace_layout's Xanga Site!
omg thats so cool! i never knew we can create those in paint. nice tutorial 5 stars out of 5 ^.^
Posted 1/29/2007 4:18 PM by anime_myspace_layout - reply

Visit xxWhitewingedxxlayouts's Xanga Site!
thanks
Posted 2/10/2007 9:40 PM by xxWhitewingedxxlayouts - reply

browse comments: next › | last »


Choose Identity
(?)
 
Give eProps (?)
Post a Comment
Add Link | Preview HTML comment help 
  • Say it with Minis! (?)

Profile Pic:
Default  |  Choose »  (?)



Back to RealitysIllusion's Xanga Site!
Note: your comment will appear in RealitysIllusion's local time zone:
GMT -05:00 (Eastern Standard - US, Canada)