Inside the RealWorld Paint splash - Tutorial

Log-in or register.

How was the RealWorld Paint splash made?

Resources

The splash image with layers: rwpaint-splash.rli

Get RealWorld Paint from RWPaint homepage

Narration transcript

Welcome to another of my tutorials. This one will be a bit different. Instead of showing you how to draw something, I'll show you how I used layer styles while making the splash screen for the new RealWorld Paint.

You'll find a link to the image file in the description. Download it, open it and look at the layers with me. There are about 10 layers. Click on the "Show active layer only" button in the toolbar and inspect individual layers. There are those paint splashes, the grass, the text, the signpost parts and one more mysterious layer at the end.

Let's stop for a moment and click on the "Emphasize current layer" button. This viewing mode could be handy in some situations. While the selected layer is drawn normally, the opacity of all other layers is lowered. You can see parts of the current layer that would be obscured otherwise.

OK, switch back to the normal viewing mode (click "Show all layers") and let's look at the layer styles. Click on the "Layer style" button and then on the "Modify style" menu item.

rsrc/layer-styles-config.png image

A layer style configuration window appears. In the top left corner is the list of the active effects.

The first effect is the Fill effect configured as a wood texture. The second step is again the "Fill" effect, but this time it is using a linear gradient and the "Paint over" blending to make the lower part darker. The effect is very subtle. The third step is the good old bevel effect and the last step is a shadow. So, this what a layer style can do with a simple black shape.

The style on the next layer is very similar. There are different wood colors used and also an inner shadow.

The next layer is the contains the "Paint" word.

Look closely on the first effect, it is a 2px black outline. But there is a Gray solid fill step following it. Look what happens when I change the width of the outline. The font I used was not bold enough for my liking and so I used the Outline effect to make it bolder. The rest of this layer style is trivial. There is a bevel, an actual single-pixel black outline and a shadow.

There you see it, a small bevel and an outline. If I turn off the layer styles, you can see what the actual text looks like, it is less bold.

The next layer is the "RealWorld" word. Again, the outline and then there is the red-yellow-green gradient. You can of course easily create your own gradients. The rest of this style is the same as before.

Now, we are getting to the grass layers. They use the "Fill" effect again, this time with a cloud generator for an organic feel. There is also another "Fill" effect used that adds more details with a semitransparent wood generator.

Did I mention that you can make changes to the layers and the styles are instantly applied to the changed layers? I hope you already knew that.

The second grass layer is very similar, it just uses brighter green colors.

Now we are getting to the 3 colored paint splashes. The layer styles are quite simple in these cases. They just add an outline and a shadow.

Now the time has come to return to the mysterious last layer. When you look at it with layer styles turned off, it looks similar as the splash. In fact is it one of the earlier versions of the splash. What's interesting here is the layer style. The first step is our favorite "Fill" effect again, this time using linear gradient with two semitransparent blacks. Then there is a large blur. The third step is a perspective Transformation effect. The last step is a blur again.

It may not be trivial to see, but this layer style create a projected shadow from the source image (that's why the layer contains a copy of the entire splash).

If I delete part of the source image, the shadow disappears. Remember, I am deleting just the image in this layer, what you see is a composition of all the layers, so only the current layer - the shadow - is affected. Just what I want.

What else can you do with layers?

You can design your own styles. When you click on the "Add new effect" item in the layer configuration window, you'll be presented with a list of compatible effects. Hover over the effects and watch the preview changing.

You can even use a Photoshop-compatible plug-in or a JavaScript operation as a layer style.

You can save your styles and you can open and assign them to layers. Click on "Open style...". Oh, look, I have no layer styles in my library. Let's fix that.

Close the document and switch to the "Online" page. Then switch to the "Media" tab and click on download next to the "Basic styles" pack.

rsrc/layer-styles-open.png image

Reopen the file and click on "Open style" again. There they are, a few styles to get you started. Let's try the "blue-neon" style. See? The previously green splash looks completely different with this style.

Thanks for watching and I hope you will amaze me with your creative designs. Do your own modifications of the RWPaint splash and post it on your blogs (as .png files please so that everyone may easily see them).

Recent comments

- show all comments
user icon Anonymous on August 8th 2012

There is a stupid bug. When i want to flip the selected image, it flips the whole image! Can any1 help?

user icon Vlasta site administrator on August 8th 2012

Yes, it works like this. The behavior can be changed, but it is pretty difficult as it is buried in a very complicated configuration window. Maybe a temporary solution would be to copy the floating selection into a new layer and flip that layer. I'll see what can be done about it in the next version.

user icon Say on registered user on September 8th 2012

Hey Can you Make some option by which I can change which logo to show when I open Real World Paint????????????????PLEASE!!!!!!!!!!!!!

user icon Vlasta site administrator on September 8th 2012

The splash mods? No, it is not possible, the little extras appear at random times, some of them quite rarely.

user icon Say on registered user on September 9th 2012

Hey please help me ..................
when i am making a animation and the clicking the File,Edit,View,Image,Adjust,Effect,Ps-filter,Mask,Layer,Animation,Tools,or Help tab and clicking something inside it no action is taken ..............
Suppose i click the File tab and click the save the save box is not appearing (not saved file) but when i press 'Control (CTRL) + S' the box is appearing................
please see to it in the next version..............
PLEASE
PLEASE
PLEASE
PLEASE
PLEASE
PLEASE
PLEASE
PLEASE
PLEASE
PLEASE
PLEASE
PLEASE

it is happening to raster images also

It is happening to ALLLL image formats

user icon Say on registered user on September 9th 2012

HEY How i can bring a Unicorn 3D object

in RW cursor

user icon Say on registered user on September 10th 2012

Oh i have find it .. BUT SEE the previous POST WITH 12 PLEASE

user icon Vlasta site administrator on September 10th 2012

replied to you when you re-posted the question it on my blog...

BTW you should start a forum topic when you have a problem, not post comments on various unrelated pages

user icon Anonymous on October 13th 2012

How do i turn the line black?

user icon Anonymous on July 4th 2013

WHO CAN SAY ME HOW TO DO IN MIRROR MODE !?! :-(

user icon Anonymous
What about ICL files?
Vista & Win 7 icons