JOY'S LAYOUT TUTORIAL

Hello, and welcome to Joy (heartsinhollywood)'s Layout tutorial! This tutorial is made for those who use PSP 8, 9, and up. However, I'm sure it can be easily translated into Photoshop and other programs. All the content in this tutorial: the css, the screenshots, the writing, the layout itself..etc is copyright to Joy, heartsinhollywood or joyfulnoise. Please enjoy, but you must give credit for using it! If I find you using a layout made with this tutorial & you don't credit, I will put you on the wall of shame here, and send the word out to all my friends about you. And trust me, you don't want to mess with my friends, especially Jackie & Simone. Also, if that happens too many times, I'll take the layout tutorial down forever. As in, never coming back.

ON TO THE MATERIALS

You will need:

PSP 8, 9, & up
A full list of brushes(try here, Mary has a great selection of stamps. However, make sure you give her credit for these stamps as it took her a while to stamp these for your use)
Some knowledge of PSP
A good font (Download the font "Automobile" from Serenade- anitaDOTburnthestageDOTorg, make sure to give credit for it, too)
A pixel font(Download the font "04b_03" from Swimchick- swimchickDOTnet, make sure to give credit for it, too)
Knowledge of how to download a psd(We'll be getting ours from outspoken-kateDOTcom, and make sure to give her credit for it, too)

THE TUTORIAL ITSELF

Ok, first, let's open a blank canvas. Open one that is 709 pixels by 527 pixels, with a background color of #cbf890.

Now, let's choose our main colors. I'll be using 3 main colors- actually, 4, counting white. Our colors will be:
#018299
#ff1b76
#84ff0b
#ffffff

Next, we'll start with a base. I like to do a couple kinds of bases: sketchy, glowy, & text. Today, I'll be showing you a sketchy base with some text & splats thrown in.

First, make a new raster layer. If you like organizing your layers, name it "Base". Second, stamp across splattered brushes: paint splats, photographs, filmstrips, swirly brushes, etc. We'll be using the color white to stamp this layer, .
Then, make a new raster layer. If you like, you can name it "Base 2". Now, stamp some sketchy- anything handrawn or some small text- brushes across your canvas. Use the turquiose color,.
Next, make a new raster layer- you can call it "Base 3" if you wish. Stamp some small text across the layout in the color .
Now you've made your base! :)
-invalid_words-

Then, we'll start on the actual layout. We'll begin with some circle brushes. Make a new raster layer (named "Circles 1" if you prefer). Stamp across brushes in this color, . The brushes should not go outside the base layers. The brushes should only be circle brushes for this layer. Go to "layer properties" under the layer option at the top and select "Burn" with an opacity of "84" for the layer "Circles 1".

Now we'll add a nice border to our circles. Copy the circles layer- and only the circles layer-. Paste it into a new canvas(with the background color white) as a new selection. Go to the "selections" tab at the top and click on "modify", then "select selection borders". See the screenshot below for better clarity.

Okay! Now we're clear on borders, so let's actually add the borders! :) You've just clicked on "Select Selection Borders". Set the settings to this and hit okay:

Copy this new selection and go to your layout canvas. Paste it as a new layer and align it appropriatly(pshh I spelled that wrong!) with the "Circles 1" layer. Set the Circles Border to "Screen" in layer properties.

It's time to add that sweet glowing effect! Go to the "Effects" tab at the top, then "3D Effects", then "Drop Shadow". See below:

Then, we set our drop shadow settings to this:(the color I use it a darker version of our limegreen)

Click okay. Duplicate this layer- the circle border layer, named "Raster 1 Shadow 1" if you've been naming yours- 5 times. Yes, 5! It'll look something like this now:

Ta da! You've completed your first "glowing" layer.

Now we have to repeat all these steps for our next layer. I'll be giving you a briefer version, however.

First, make your new raster layer(make sure it's the top layer, and you can name it "Solid Brushes 1"). Again, stamp across circle brushes- but this time, you can add in a few random brushes as well, such as a small umbrella, a bird, a hand, etc. Stamp them in this color,. Set this layer to "Color" with an opacity of "100".
Add your borders the same way you did for the green circle layer. Set this layer to "Screen" with an opacity of "100". Now, add a drop shadow(the color I use is a slightly darker version of our hot pink) using the same settings as you did with the green circles layer. Duplicate this shadow 5 times. You should come out with something like this:

Here we go again! Here's the next layer in the layout, the turquiose colored one. Again, I've made a brief version of the steps to shorten it down, but you can always look at the green layer's instructions for step-by-step pictures & directions.

Next, make your new raster layer(make sure it's the top layer, and you can name it "Solid Brushes 2"). Again, stamp across circle brushes, and add in a few random brushes as well, such as a cloud, a fish, a heart, a star set, etc. Stamp them in this color,. Set this layer to "Color (Legacy)" with an opacity of "100".
Add your borders the same way you did for the green circle layer. Set this layer to "Screen" with an opacity of "100". Now, add a drop shadow(the color I use is a slightly darker version of our turquiose) using the same settings as you did with the green circles layer. Duplicate this shadow 5 times. You should come up with something around these lines:

Phew! This is exhausting- thank god there's only a few more layers! Next, we'll be doing a layer.

Next, make your new raster layer(make sure it's the top layer, and you can name it "Solid Brushes 3"). Again, stamp across circle brushes, and add in a few random brushes as well, such as a broken heart, a circle with a !, a puzzle piece, the eiffel (I still can't spell!) tower, etc. Stamp them in this color,. Set this layer to "Overlay" with an opacity of "100".
Add your borders the same way you did for the green circle layer. Set this layer to "Screen" with an opacity of "100". Now, add a drop shadow(the color I use is white, plain & simple) using the same settings as you did with the green circles layer. Duplicate this shadow 3 times. (Only 3 this time- otherwise it'll blind you with the glow!) You should come up with something similar to the following:

Voila! You have now completed the first half of your layout! Now all you need is a psd, blog, text, & a copyright!

Now it's time to make the blog. Today, I'll be using a vector to make our blog- this way, the blog will have a pretty shape instead of a square. Many people have asked for how I make my special blog style(see my examples for proof), but I'm not going to show you that, it's my little secret. ;) However, I will show you an even prettier style of blog boxes.

First, you need to merge your layers into one big copy. Click "Layers", then "Merge", then "Merge All(Flatten)". See this picture to clear things up:

Next, we'll sharpen this layout to give a crisp, clean look. Go to "Adjust", then "Sharpness", then "Sharpen". See below for some more clarity.

Sharpen the layout twice. However, sharpening it once will work, too, but I like mine clearer. So I sharpened it twice.

Now it's time for our vectors. This step by step screenshot should help:

1 Click on the "vector" button
2 Make sure your settings are the same as mine
3 Click on the drop-down box of vector shapes
4 Click on "Callout 4" .

Stretch the callout cloud across your layout. You can resize it if needed.

Now we make the vector normal colors & turn it into a blog. Click on "Objects", then "Properties". See below for help:

Set your properties to this:

Then, convert it to a raster layer. Use the screenshot under this to see how:

Next, we make it transparent to write in. Go to the properties of the blog layer, and set it to "Normal" with an opacity of "72". Now, take out your eraser brush and erase those two circles under the cloud.

Yay! Now our blog box is done! :) Next up: A PSD!

Head over to Outspoken-kateDOTcom and grab a psd with me. I'll be using this one:

Download the PSD. Next, mirror the image so Carmen faces right. Then, resize the PSD:

Now, sharpen the PSD so it's crystal clear. After that, copy & paste it as a new selection into a new white canvas. Go to "Selections", then "Modify", then "Expand". Set your settings to this:

Copy and paste it as a new layer onto your layout. Position it as you like. I prefer mine near the blog, but not too close. Next, take out your selection tool- the lasso to be exact. Make sure your settings match mine:

Create a square shaped selection. It should feather out like mine did. Next, hit "delete" on your keyboard 3 times. "Delete" is a row above the "Enter" key and a row to the right by one key. If you're really confused, look around key by key. Seriously. That's what I did, it eventually works. :)

After that, duplicate the PSD layer. Then, take the copy of the PSD and give it a gaussian blur:

Next, set the layer properties of your blurry layer to "Overlay" with an opacity of "100".

Now, I'm going to add a "Mini-Me Carmen" next to her. Go back to original PSD and resize her to:

Then, go & repeat all the other steps from the first PSD onto "Mini-Me". See here- does it look something like yours?

Yay, now we get to do the text! This part is easy. :)

Before you do anything, go to your big blank canvas. Next, make a vector with this image:

Make the curvy arrow part about the size of the width of the layout itself. If you need to, you can make the vector on the layout itself so you can measure, and then copy the vector and paste it as a new layer into your big white blank canvas. To get rid of the vector on the layout, just undo your last moves until it's gone. Use the vector rotate button on the vector itself and rotate it until it looks like so(size is accurate):

Then, set your text settings to match mine:

Now click on the beginning of the curvy part of your arrow. You should get a weird little "A" when you hover near it. Click where you see the weird "A". Type in the name of your guild, or you can write "Example" or "Guild Name Here". Make sure your background color is ! Hit enter. Then, using the move tool, move your text away from your curvy arrow. Next, make a new raster layer. Fill your selection with this:


Set that diagonal layer to "Overlay" with an opacity of "33". Next, expand the text by 1 pixel, just as you exapanded your PSD. Then copy merged & paste it on your layout. Give it a drop shadow of black & then duplicate that 3 times.

Now we add a copyright! Using the same font settings as above but with white as our bg color & black as the color of our canvas, and the font is 04b_03 with a size 5. The copyright will say:
LAYOUT (C) NAME AKA USERNAME
THANKS TO JOY AKA HEARTSINHOLLYWOOD'S
TUTORIAL. PSD FROM OUTSPOKEN-KATE.COM
AND FONTS FROM ANITA.BURNTHESTAGE.ORG
& SWIMCHICK.NET.


THE FINISHED PRODUCT




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions