Dear visitor, welcome to Lore! My name is Nienke and here I'll share with you all the things I've learned about web design. My knowledge is mainly self-taught and based on over seven years of site owning experience. I do not aim to write tutorials that feature easy tricks, but that help you understand and think about design, so that hopefully you can become a better designer.

About lore

► The different tutorials are divided over three different catagories: photoshop, buttons and coding tutorials. I'm also going to add extras in the near future.
► Remember that all the graphic tutorials were written for Photoshop. I don't know how Gimp works, so I can't help you with that. However, I think it should be able to follow my tutorials when you use another program.
► Also, credit is not mandatory, but is still greatly appreciated. Of course, you are not allowed to distribute Lore's content. With this content I mean the actual tutorial itself.
Sep
12
New layout! Or rather, new banner and color-scheme. I decided not to change it up too much, as the coding for this layout is quite complicated and I just didn't feel like recoding everything. I also added a new button.

I added a list of ramblings that explains where I find the resources I use for my graphics. I haven't finished it entirely because I still need to finish the brushes/textures part. I've also gone through all the old tutorials and fixed some mistakes I made and updated some references. I added the premade button borders that were previously on perfect symmetry to the button border tutorial, because convenience. I finished the quick effects and adding text tutorials. I'm currently in the process of adding my web resources to this page as well, now only the bullets are up.

All in all, the page is still a bit under construction, but I needed to free up my petpage on my main.

Credits

Textures 17dayone, 99Mockingbirds, Feel.zeroexposure, Swimchick, my own. From DA: Anliah; Ro-stock; Sublimeartdust; DeviousRose; Yunyunsarang; ISOstock; Moonchilde-Stock; Cloaks; Ransie3; Bashcorpo; Jane-beata; Lilystox; Sanami276; Vikyvampirs90; So-ghislaine; Dastardly-icons; Inconditionally; Sarytah.

Brushes 17dayone, Swimchick, Memorylast, Misprintedtype, 99Mockingbirds, Moargh and Missfairytaled; Dreamon72; Dennytang; MagicalViper; Withwhipcream @ DeviantArt. PixelsJen @ Brusheezy.

Gradients Crazykira-resources, Icechicken, Shattereddesigns07 and Millepetit @ Deviantart.


Link back?

A guide to: Texturizing

Where to find textures
There are a lot of sites that offer textures, so I will not go in to detail here. I have written a list in this article. Try to only use high-quality textures (not blurry). If you use low-quality textures, this won't do your images any good. It will make them look worse instead of better.

Always keep in mind you have to give credit for the textures you use. When you save them to your computer for later use (Which I recommend! When your in a creative mood, you don't want to waste that looking for textures.), make sure you remember where you got them. Also, when you get your textures from a site as dA, you have to credit the user, not only the site.

How to use textures
To begin, it really depends on your image ánd on the textures. The one important rule is that you have to make sure they blend. If they don't blend, they won't look like a part of your image.

There are several ways to blend your textures, but as I already said, it differs so much. I'll try to explain the basics, though. Here are some things I always try to keep in mind when texturing.

Complimenting, good. Covering, bad. Something you should remember is that textures are there to compliment your images, to add something extra (like more depth, more colors, of course, more texture). Choose them carefully and think about if they actually add something, or are just covering up your image. Never ever just smack some textures on your images.

A lot of people just add textures, because they find the images they use are boring as they are or think it's something you should always do. This really is the wrong approach. You should think about what you would like to add to your image, what is the effect you want to achieve and most important, is using textures going to help you achieve this effect. It's a small change in mind set, but I think it helps you look at the important aspects of using textures. It makes you think about how to use textures to compliment your images, instead of just cover them.

If you still don't understand what I mean, try to think of textures as fancy make-up for your graphics. I think we all know how ugly wrongly applied make-up can look, like a mask. That's what you also want to avoid for your graphics. Make it look natural, like the effects belong with the image.

Change the blending modes of the textures' layers. The great thing about the layers you're working with, is the option to change the layer's blending mode and opacity. What you shouldn't do is just change the layers opacity. Why? Because then the texture will not blend very well and then it's just covering the image. I'm trying to think of a case when I did only change the opacity, but I can't think of one.

I think that when you're working with textures, changing the layer's blending mode is a must. What I usually do is scroll through all the modes to see which looks best with the texture (or if there is actually one that works). This because it really depends on the image and on the texture whether something works or not. Though I can explain a little what the different modes do with colors and shades.

Darken, Multiply, Color Burn and Linear Burn extract the lighter shades, while Lighten, Screen, Color Dodge and Linear Dodge extract darker shades. Bokeh for example works great on Lighten or Screen (though it could also become a bit overpowering, so be careful).
Overlay and Soft Light are also quite the same, only Overlay is a bit stronger. These two modes appear as if you've lowered the opacity and blended the layers a little. You can use those very well for any kind of texture.
I hardly ever use Hard Light, Vivid Light and Linear Light. They make everything super bright. When I use those, I always lower the opacity quite a lot. I don't really know how to describe what Pin Light does, I haven't quite figured it out for myself. It acts a little as the previous three, though it's different. It really depends on the colors.
I actually never use Exclusion and Difference, because they both change the colors of your image a lot. They change them into the colors opposite of the original colors (or something like that) and I don't like that for my layouts. Though I think you could get some interesting effects with it.
Hue, Saturation, Color and Luminosity all just affect the colors of the image. Hue and color change the color of the image to the color of the layer, though color is usually a bit brighter and closer to the color of the layer than Hue. Saturation changes the saturation and I'm still not sure what Luminosity does, but it usually makes your images quite gray. I don't really use those, because I don't like how they work with textures (you can't even see you've use a texture and I'd rather change colors with Adjustment layers (more about that later).

Try to use images in the same color range as your image. When your image has an overall red color, you can best try to look for red textures. Let's look at this example:


The first image is the original image. On the second I've added a purple bokeh texture (the first example of bokeh textures below set to screen) that is in the same color range as the image. As you can see, the texture blends really well with the image. On the third I've added the same texture, but I've recolored it first (I made it yellow). The bokeh doesn't really go with the original image, the yellow looks a bit awkward and very unnatural. The texture is not complimenting the image, it's covering it. Of course you can try using textures that have very different colors than your image, but it's really not a save option. Whatever you do, try to make the colors blend.

What to do if you can't find textures in the right color range or you want to use a texture that isn't in the right color range? You can two things.
1. Recolor your base image to make sure it's in the same color range as your texture. I don't usually do this. Unless I want my image to be that color, because I like it that way (and not because I want to use the texture). What I do recommend is toning some colors down so the texture works better. I'll explain how to do this later in this tutorial (like very bright colors).
2. Recolor your texture so it is in the same color range as your image. I do this all the time when I use textures. It's really not hard to do and it makes blending them so much easier. I explain recoloring here.

Keep in mind that if a texture really doesn't work with your image, you should just choose another one. You can try and force it to work, but the effect usually won't be that great.

Avoid covering important parts of your image with textures. Never cover focus points in your images with textures. Don't do that. Really. It just takes away the focus from your image and as I said before, covering isn't good. In images the focus points are usually faces. That's just how we are programmed, faces are the first thing you look at. Avoid covering them up with anything, really. Brushes, textures, don't let them ruin your most important focus points. Well, let's look at these images for example:


Here I used the same base image as above. To make things clear, her face is really the most important focus point in this image (see the nice, red, obvious cirkle). On the second example I've used a bokeh texture. The effect it gives is very subtle, but hey, what's that covering her face? You have to admit that looks a bit weird. Do you also notice how the focus is taken away from her face? In the third image I've erased some of the parts of the texture (use a soft round eraser to make it all blend in). It now looks more natural, the texture blends a lot better with the image and of course, no more covering.

Recoloring your texture is a great way to make it blend better. As I mentioned above, you can make sure your textures blend a lot easier when you recolor them. The easiest way to recolor a texture is using the option Hue/Saturation (Image » Adjustments » Hue/Saturation... or simply hit CTRL+U). Make sure you're on the right layer, otherwise you'll be recoloring another layer instead of your texture.

The box that pops up when you use this option looks like this. Always check the box preview, because otherwise you can't see what you're actually doing. It's pretty easy to use. It's pretty obvious what everything does (I think?), but I'll explain it anyway. Hue affects of course the hue of the image (whether you call it blue, red, green etc.). If your image for example is blue, you can shift it around and make it green. Saturation will affect how vibrant the colors are. You can shift between gray (-100) and really really bright (+100). With lightness you can shift between black (-100) and white (+100). I usually only use Hue, because most of the time the others will affect the quality of the texture. There are other and mostly better ways to recolor textures, but for the effect it doesn't make much of a difference. You'll only notice the overall color of the texture when used properly and then it's just a waste of time to use some extensive coloring on your texture.

Don't be afraid to erase parts of your texture. This may sound a bit obvious, but I feel like many people don't realise this: you don't have to use the whole texture. When you leave something out, something else will get more emphasis. This is something really important in designs. You can make a big spectacular layouts with sparkles and brushes and textures everywhere, but usually this will just turn into one big mess. Choose some points that you want to be the focus, the rest of the layout is there to compliment or go along with these focus points.

The same goes for using textures. Erasing parts (or blurring parts by using the blur tool) can be very beneficial for your design. As I said before, never cover focus parts with textures. But also be careful by filling empty space with textures. Your layout needs empty space (or almost empty space). Try to keep the busy stuff around focus points (no covering though!) and keep the space around that a bit more empty.

To erase parts you can use a soft round eraser. Because the edges of the eraser are soft the texture blends better with the image. If the texture changes the color of the image a little (makes it brighter for example), you can also decide to use a soft round brush in a main shade of the texture and go over the details without ruining the overall color change.

Yes, you can use too many textures. Simple as that, refrain from using too many textures. It's hard to say an exact number, but I would try to not use more than three textures per graphic. Of course it depends on how subtle your textures are, but try not to burry your image in textures. You know what they say about less is more, that sometimes also goes for textures.

Experiment. And last but not least. Experiment with different textures on different modes. I know Bokeh textures are a very safe choice, but your not the only one who knows that. You see them everywhere and at some point it just gets really boring. There are so many more textures to use which can all give new interesting effects. So, don't be afraid to try new things!

Different kind of textures
Below I've listed a few "types" of textures, although it must be said that it can be hard to categorize a lot of these. (Hover or click the texture to see where I got it)


Bokeh textures Bokeh is the blur in out-of-focus parts of photos. Usually it looks like mutiple blurry circles, though it could be any shape. You can find these textures in any color. Add these textures to create a bit of a dreamy/magical effect.
Blend Modes: Lighten and Screen.

texture by Violetspelltexture by Violetspell

Light textures I actually find it more like textures with big color blobs, but they are really useful. Use them to give your colors more depth.
Blend modes: Soft light, sometimes overlay.

texture by Violetspelltexture by Moonchilde-stock at DA

Nebula/space textures I admit, I made that name up. I don't it's called space textures, but as long as you get what I mean it's all cool right? I think this might be my favorite kind of textures, they even look really nice like this. They give your image a bit of a magical look.
Blend modes: Lighten and Screen, though you should try other blend modes too.

texture by Bashcorpo at DeviantArttexture by Babybird-Stock at DA

Paper textures Or paper stock. Obviously, it looks like paper. I like to use these to give a subtle, bit grungy, old effect to my images. I also like to use them as backgrounds.
Blend modes: Soft light or Overlay

texture by Violetspelltexture by Violetspell

Scratch textures The name says it all, textures of scratched surfaces. They are usually black with lighter scratches, but they can also be white/light grey with darker scratches.
Blend Modes: Black background Color Dodge and Linear Dodge, Light background Color Burn.

texture by Violetspelltexture by Violetspell

Grunge textures These textures have a bit of a worn and dirty look to them. They are usually a bit darker, mostly in brown, green and blue shades. These are great to give your graphics an older look. Don't over do it, because it's easy to make your graphic look too dirty (like gross) or low-quality.
Blend modes: This really depends.


Miscellaneous textures There are so many kind of textures, that I can't name them all. These are just all so different or unique, that you can't really catagorize them.

A guide to: Recoloring

When to recolor?
I actually always recolor my layouts, but it depends on the effect I'm going for when I recolor. But first I'll explain why I recolor my layouts.

1. I hardly ever like the colors the original image has. This usually means I find them dull, or sometimes even ugly. Then I change the colors to my liking. I like to make yellows and red less blue for example. It makes them brighter.

2. When I want to create more harmony in the layout. Some colors clash when put together. For example, I don't like the combination red and green. By toning one of these colors down, you would create more balance within the image.

The same goes for when your layout is almost finished. I tend to just tweak the colors a little before it's really done. It will make the layout look more completed and whole.

3. I also recolor an image when I want the layout to have a certain color or I want to use certain textures. For this layout, I wanted it blue. So I first recolored the image, to be more blue. I do not do this very often, it can be difficult to force the image to be something different than it is.

4. When images have some colors that are very difficult to work with, I also recolor the image. This actually goes for all super bright (neon) colors. Textures do not really work that well on colors that are too saturated, so I then make them less bright and saturated.

As you might have noticed I usually recolor when the layout is finished or just before I start texturing. I do recolor in the proces of texturing, but only when I don't like how the textures work with the image or when the colors start to turn funky. I suggest you always finish your layout with tweaking the colors, even if it's just a little bit.

Things to keep in mind
Major color changes are the most difficult to get right
This is actually the same as with texturing, it's hard to completely change the color of an image and still make it look good or natural. For example a green image will not easily become red, unless you use some heavy adjustment masks.


Ever seen a color wheel? For the people who haven't a short explanation. A color wheel shows the relations between primary, secondary, tertiary and complementary colors. The primary colors are blue, red and yellow. The secondary colors are the colors you get when you mix the primary colors, so orange, purple ang green. And of course the tertiary colors are made by mixing secondary colors togheter. Complementary colors are colors that are opposite in hue, for example, blue and orange.

You should remember this wheel when altering colors. It is easy to turn red colors into pink (add a little blue) or orange (add a little yellow), because they're close togheter on the color wheel. It will however be hard to make this red color blue, green or yellow. These colors do not contain any red, so in order to do this, you will have to replace the red with an completely other color. Which is difficult to do right. It can be done (using gradients masks for example), but I would advice against it. Better is to stay close to the original colors of the image.

A lot of recoloring will lower the quality of your image
It's true. It will make your lines really jagged, especially when the image isn't as high-quality as you'd like. Look at this example:


This example might be a bit extreme, but it's only to show you what happens when you keep altering the images. I've extracted all the black in this image and as you can see, some of the edges will start to look weird. This is because not all pixels were recognized by the program as black, so they won't be recolored. This also happens when you use to many recoloring layers. I suggest you be careful and always make sure your image still looks high-quality after recoloring.

Complexity versus harmony
Too many colors in one image will make it look messy, but too little colors will make it look dull and boring. Remember the previous layout I made for this page? It was mostly bordeaux red, white and a faded orange/yellow color:


On the left you see some of the main colors in the layout. I think this is a great example of the point I'm trying to make. I chose the main colors, because I wanted to create harmony in the layout. I think it worked out quite well, but I was never really happy with it, because I actually thought it lacked variaty in color. I decided I liked the layout anyway, but I grew boring of it so quickly. This probably wouldn't have happened this fast if I'd just added some other colors.

Another example is a layout I've been working on. Not only did I have a lot trouble with getting the textures to work with the image, recoloring was horrible. I kind of played with the colors to make it look even worse:


These colors make me really sad. I should say I'm not a big fan of combining green and purple in the first place, but I don't think these colors work together. As you can see, there are several shades and hues of green and purple. But there is also blue and pink and weird faded colors. The worst part is that the illusen is far darker than the background. It makes it seem as if these different parts don't belong togheter in one layout. However, it's hard to deny that there is a lot going on colorwise.

Try to find a balance between the two when making a layout. It is important to get it right, to create the harmony that makes the layout one thing and to create the complexity that makes your layout interesting to look at.

Use (adjustment) layers!
I like to use adjustment layers to recolor. These are layers that alter the colors of all the layers below it. Why? Of course you can also edit your image directly, using image » adjustments. But those adjustments will be permanent, you can't change them later on. Using layers will allow you to change, alter and undo the recoloring at any time in the process.

Furthermore, you can also use different blend modes when you use layers. If you alter the image directly, the adjustments will act the same as an adjustment layer set to normal. Being able to use blend modes gives you a lot more posibilities.

Several recoloring techniques
Selective color
This is without doubt the technique I use the most! I like it because it lets you change specific colors. You can make this layer by going to Layer » New Adjustment Layer » Selective Color...


Creating the adjustment layer will cause this box to pop up. I always set the mode to Relative, I find this gives a better result than Absolute.

As you can see in the dropdown list, you can alter the reds, yellows, greens, cyans, blues, magentas, whites, neutrals and blacks in your image. You do this by increasing or reducing the cyans, magentas and yellows in the said colors (and blacks, but I don't use this very often). Remember the color wheel and how all colors are derived from the primary colors? Great! Well, that's what you do, you add primary (though cyan and magenta aren't actually primary colors) colors to your color, therefore altering it. Let's see:


The first image is the original image. On the second I reduced all the cyans, magentas and yellows (all -100%). On the third I only added cyan (+100%), on the fourth I only added magenta (+100%) and on the fifth I only added yellow (+100%). Remember that all these changes were made to the red hues in the original image.

Do you see how adding the cyan barely has any effect? I can tell you that removing the cyan from the original red color didn't have much effect either. This tells me that the original color consisted most of yellow and red. Adding blue will only slightly make the red darker, reducing it will make it less dark and more vibrant. Adding yellow will make the color warmer and more red, reducing it will result in a pink color. Adding magenta will only make the color a more vibrant magenta and removing it will make it yellow.

If you find this difficult, you can take another look at the color wheel above. It can help you predict what effect adding cyan, magenta or yellow to your color will have. I could give you a complete list of what I do with each color, but I'd rather let you figure it out for yourself. It works better that way, I promise!

Gradient Map
I like to use gradient map when I want to change all the colors, usually to a specific other color or colors. Well, let's make one: Layer » New Adjustment Layer » Gradient Map...


This box pops up. It actually only has three options, you can click the gradient to change the gradient and you can check the boxes: dither to create noise (you don't want this, leave it unchecked) and reverse to reverse the gradient (check it to see what that means exactly). Reversing a gradient is sometimes necessary as you can see here. The gradient is reversed on the first image:



Anyway, you can see what happens. The darker colors have become purple, the slightly lighter colors pink to orange and the lightest colors have become yellow. Now you can change the blend mode of the adjustment layer:


I've already described what the several blend modes do when working with textures, it's about the same for gradient maps. Do not forget that lowering the opacity of the adjusment layer will sometimes give great results. For example. The color burn was really strong, it made the image very dark. But if you lower the opacity, it can look very nice.

For me, working with gradient maps is trial and error. I try to choose a gradient that has about the same colors as the original image or as my layout (the first is easier to work with) and then I just try all blend modes to see if it works.

As for the gradients, I found several packages on DA (go to the credit section at Nienke's Premades to find out where I got them), but I also have made some myself and I use some of the ones that were already included in photoshop.


These are some of my favorite gradients. I got the first three from a package, the last three were included in the program and the rest was made by me. The last one is the one I used in the example above. You can use the eyedropper tool to get the colors for the gradients.

To load an installed package, you have to click the little arrow that I circled in red on the first image about gradient mapping. Then choose the option Load Gradients.

Other techniques...
Of course these two techniques aren't the only ones you can use, but they are my favorites and I find they give me the best results. For quick recolorations I suggest you use the Hue/Saturation adjustment layer, for making the image brighter or darker the Brightness/Contrast adjustment layer is perfect. But these are pretty straight forward and it's not hard to find out how they work.

Then you can also work with Levels, Curves or Color Balance. I rarely use those, but maybe they work great for you! As with everything, my main advice here is to just try for yourself.

Design Process: Sun

Another design process, which is not a real tutorial, but just me showing how I made a certain piece. This time I'll explain how I made the blend featuring the bringer of the night.

This design process shows you how I work with grungy textures and how I make dark layouts. I also show how I make my graphics look choppy.


(1) Start by making a new file. I like to use a 1000 by 600 px workspace, because it fits nicely on my screen. I filled the background layer with a dark red color (#560c00). I wanted to use a sketched image for this layout, so I used one from the gallery of evil. You can find other sketched images here and here. As you can see I just pasted the image into the file, I did not move it. (2) I set the layer with the image to multiply (opacity 100%). This blending mode reduces all the lighter colors and only leave the lining of the image. (3) The image is really dark the way it is and it doesn't really stand out from the background, so I wanted to color the sketch a little. I used the pentool and traced the upper half of the image. I decided not to do the whole image, as I want the rest of the image to blend in with the background. (4) I made a new layer below the layer with the image. Then I filled my selection with white (#ffffff) and I used a soft round eraser to erase the sharp lines of the lower half of the selection.


(5) I set the layer mode (of the layer with the white) to soft light (opacity 100%). I also made a new layer and traced his eye (with the pen tool). I filled it with a bright red color (#ff0003) and set the layer to lighten (opacity 100%). However, because of the recoloring later, I could've just left this part out. (6) Select all the layers you just made except for the background and go to Layer » Group Layers. This will place all the layers in a group which you can easily edit and copy. In the layers tab, right click the group and choose duplicate group. Press CTRL+T (or go to Edit » Free Transform). Make the group smaller. You can do this by editing the percentages in the top bar (W is width and H is height), make sure they are the same. You can also use your cursor, click one of the corners, hold the Shift key and make the image smaller. This way the image will not appear stretched. Also, right click the image and choose Flip Horizontal. Now you can click OK (Commit transform, or enter). Play a little with the placing of the images, until you have found something you like. (7) Time for textures! Every texture is going on a new layer, on top of the others. This one is from So-ghislaine on dA. As you can see, I chose a purple color (it was one from the main colors on both sides of the texture) and made sure the texture was covering the complete workspace. (8) I set the texture layer to multiply (opacity 57%). I wanted to keep the layout dark, so then blending modes such as multiply, darken and color burn are the best to use.


(9) Another texture, this one is from Sarytah on dA. I used a soft round eraser to erase some of the parts of the texture, around the face and body of our main image. When using grungy or scratchy textures, or any textures that aren't smooth, always be careful to not cover up the main image. (10) I set the texture layer to soft light (opacity 100%). As you might already have noticed, I try to ligthen the areas around the face and then make the rest darker. The light spots against the dark background will stand out. It's good to think about this when making a graphic, what do you want to emphasize? (11) The layout was getting pretty dark, so I decided that it could use some color and some light. I chose this texture, that is kind of bright, but still is in the right color family (reds and yellows). This texture is from 99mockingbirds. I also removed some parts around the face and body, this time because it would all become too bright (and we don't want that either). (12) I set the texture layer to soft light (opacity 65%).


(13) More grunge! I used this texture from shi-zoo on dA, even though it's not in the right color family as it's blue. In this case, that's ok because the blue is not very bright and I'm going to use a blending mode that doesn't make the colors clash. I also erased some parts around the face and body, as this texture is way too heavy. (14) I set the texture layer to overlay (opacity 100%) and as you can see, the red is not really altered by the blue, it just becomes darker. (15) I realised that the main image didn't really stand out from the background anymore, so I went back to the layers I created in step 4 and duplicated it for both the groups. I lowered the opacity to 54% for the larger one. Much better! (16) Another texture, this one is by yunyunsarang at dA. Again, the middle is brighter than the borders.


(17) I set the texture layer to overlay (opacity 50%). (18) I recolored the image a bit (see the end of the page for the exact changes that were made), so I made a new adjusment layer (selective color). I actually don't remember why I decided to recolor the image, as the changes are minor. It was probably because I thought I was almost done. (19) New texture, again from shi-zoo at dA. This one is really busy and I only used this one because I was experimenting a bit. As you can see, I took a soft round brush and took one of the main colors of the textures to smoothen the area around the face of the smaller main image. (20) I set this texture layer to overlay (opacity 100%).


(21) This texture is probably one of the textures I use most, it's also from shi-zoo at dA. I erased some parts around the main image and I also blurred some parts of the texture. I did this to create more dimension and also, to soften the look of the texture. (22) I set the texture layer to screen (opacity 100%). Bokeh textures with black backgrounds usually work best when set to lighten or screen. (23) I like to put in some random letters and text. This was from swimchick, but you can't find it on there anymore. However, anything with nice text will do, as long as the background is white and the text is black. (24) Pretty! I used the polygonal lasso tool (press L) to cut up the image. I selected random shapes and dragged them to another place. Play around with it, but try to concentrate the words in a few places. Otherwise the layout will become to busy. I also deleted a few parts of the image.


(25) I set the text image layer to multiply (opacity 100%). (26) And the last texture, a grungy/scratchy one. This one is from violetspell. (27) I set this texture layer to color dodge (opacity 100%). (28) Again, I selected the polygonal lasso tool and started to select some random shapes around the faces of the main image. Press ctrl+shift+C to copy the selection and then paste it into a new layer. I changed the size using free transform (ctrl+T) and made the part grayscaled (ctrl+shift+U). Then I set the parts to lighten (opacity 100%).


(29) It might be difficult to spot the change in this one, as the image is really tiny. I lowered the opacity of the big part to 58% and cut of some of the corners of both parts. (30) Here I recolored the image again, also with a selective color adjustment layer. You can see the settings at the end of the page. (31) I pressed ctrl+A to select the whole workspace and then ctrl+shift+C to copy everything (all layers). I pasted this copy in a new layer and used the polygonal lasso tool to select random shapes. I used the move tool (or just hover over the selection and while holding ctrl, move the selection) to move the selections a tiny bit. This gives a choppy effect. Just remember to never make the selection go through faces or other important focus points. (32) This is a light flare stock (or something) by ISOstock at dA. I went to the layers of step 4, then click the layer image in the layer tab while holding the ctrl key. This way, you select the layer's content. Then I went back to the layer with the flare stock and deleted that part of the stock. I also removed some other bits with a soft round eraser.


(33) I set this stock layer to lighten (opacity 80%). I do not normally lower the opacity when I use stock or textures like this and then set them to lighten or screen, as I think they look a bit washed out if I do that. However, it still looked ok here (it was better than not lowering it, as the image was a bit too bright), but I think you shouldn't go lower than 80%. (34) I made a copy of everything, just as I did for step 31 and then pasted it into a new layer. Then go to Filter » Blur » Motion Blur... I kept the angle at 0. I don't recall the exact value I used for distance, but I think it must have been somewhere between 40 and 60. Then click OK. Set this layer to lighten (opacity 100%) and then use a soft round eraser to erase the middle part of the blurred image. I erased quite a large part of the image and actually only left some of the borders blurred. (35) I created a new layer and then used a soft round brush to make the lower borders black. I set this layer to soft light (opacity 50%), just to make the image a bit darker. I also recolored the image, which you can also see below. (36) I made a new layer, took an orange color (#fd9c52) and then used the gradient tool (radiant gradient) to create these little color spots. I set this layer to overlay (opacity 100%). This just added a bit more color to the graphic.


As a last step, I like to copy all layers again (just like I did for step 31) and then sharpen it (Filter » Sharpen » Sharpen). I usually soften it a bit by going to Edit » Fade Sharpen... And this is the final result!


The settings for the selective color adjustment layer mentioned in step 18. As you can see, I only adjusted the main colors in the layout, which were red, yellow and black. Overall, this made the layout a bit darker and made the black a bit more blue.


The settings for the selective color adjustment layer mentioned in step 30. This made the yellows more yellow (less orange), the red more orange (so less red) and the black more blue (less magenta and less yellow). I also played with the cyans and neutrals to alter the parts that I greyscaled.


The settings for the selective color adjustment layer mentioned in step 35. Here I decided that I didn't like the orange so I made it a more pinkish red, I made the yellow a bit less yellow and the dark blue a bit more black... So I actually just did the opposite of what I did before... Whatever works right? I also remove all the yellows, blues and magentas (-100%) for the whites, but that wouldn't fit on the image.

Design Process: Float

Layering textures can be quite a challenge. Especially when you're using a lot of textures, layouts can easily become cluttered, messy or just plain ugly. I'll show you the design process of a heavy textured layout and hopefully you find it useful!

I suggest you read my tutorial on texturing and recoloring first, if you haven't done so already. This tutorial is actually more like one big example of how I put everything I talk about in that tutorial to use.

A few things to keep in mind
1. You don't have to use the whole texture. It's okay to erase certain parts that may a bit too much or are covering up important parts.
2. Try to use textures that are (about) the same color as the image your working with.
3. You shouldn't use this many textures on every layout, but it's a great way to fill an empty background. I suggest you only do this when using PNG's.
4. When adding brushes, try to make them go with the movement, not against it. Let's look at the image below. If you want to add brushes, you should use brushes that compliment this shape, and go with the flotsams. The best thing is to just imagine what those little movement lines they use in comics would look like. It's a bit hard to explain, but once you do it right, it looks great.



Let's start!
I began by cutting out the three flotsams from an image. Of course you can skip this step, as you can use this PNG:



I'll show you step by step how I created the layout. It's mostly about the visuals, but I'll do some minor explaining as well.


1. Start by opening a new file. I like to work with a workspace that is 1000x600, because it's quite large and it fits exactly on my screen. Paste in the PNG and move the flotsams around until your satisfied with your composition. Fill the background with a solid color, I used #85b0a1.
2. On a new layer below the PNG, add some watercolor splatter brushes in white (these were from zerofiction at dA, but you can also find some here).
3. Set the layer with the brushes to Soft Light (opacity 100%)
4. Create a new layer on top of the with the brushes and add some nice swirly brushes in white again. Don't change the blending mode.


5. I added a grungy cloud texture. I like to use cloud textures, because they add a lot of depth and they work with a lot of different images.
6. I've set the blending mode of the cloud texture to Soft Light (opacity 100%). This way the texture will only add some lighter and darker spots on the layout, other blend modes are a bit overpowering.
7. I added this texture to add more depth (again) and a subtle gradient. I don't remember where this is from. I like using textures for adding gradients better than actual gradients, because textures are more uneven, so the effect is more interesting.
8. I've also set this layer to Soft Light (opacity 100%), for the subtle effect.


9. I used Gradient Map to recolor the image. I personally find green a very difficult color to work with, so I made the image more blue. I set the adjustment layer to Pin Light (opacity 40%).
10. I added a blue/violet abstract texture (from shi-zoo at dA). There were some white brushes on the texture which I erased with a soft round brush. I also erased some of the texture covering the flotsams' faces.
11. I've set the blend mode of the texture to Pin Light (opacity 100%) because I liked the red color in my layout.
12. I've added this blue abstract texture (also from shi-zoo at dA), because it has some nice light effects. I've erased the right part completely, because it was too light.


13. I set this layer to Lighten (opacity 100%), so only the really bright colors will be visible in the layout.
14. I really liked the textures and bokeh in this texture (from shi-zoo at dA), so I decided to use it. As you can see, it's okay to use textures of a different color than your layout, as long as they're in the same color range. I also erased bits on and around the flotsams.
15. I set the texture to Color Burn (opacity 20%), because I wanted to make the layout a bit darker. Setting textures to Color Burn is a great way to do this, but it's usually best to lower the opacity quite a bit.
16. You might not even spot the differences, but I actually dragged the purple texture layer below the texture I used before that. It made the red and bright blue colors just this bit better. It's good to rearrange your textures sometimes, but it all really depends on the effect.
17. I really like this texture (again from shi-zoo at dA), because it kind of looks like bokeh, though it isn't. Again, I erased some parts around the faces of the flotsams. I also erased some other parts, because I felt the effect was a bit too much.
18. I set the texture to Lighten (opacity 100%). You can also set textures like this to Screen, but this gives a much brighter effect, which can sometimes be a bit overwhelming.


19. This texture (you guessed it, from shi-zoo at dA) is great to give the overal layout a softer look, while it does add a subtle texture. Once again, I erased some parts around the faces.
20. I set the texture to Soft Light (opacity 70%). I could've used Lighten or even Screen, but this would've made the layout very bright and that was not what I was going for.
21. I added some blue watercolor paint brushes over the flotsams. I set the blend mode to Soft Light (opacity 100%).
22. I recolored the image using a Gradient Map. You can see the gradient I used on the screen cap. I set the layer to Color Burn (opacity 60%) to make the image a more vibrant blue color.


23. I used Selective Color to recolor the layout a bit more. In the image above you can see the settings I used. As you can see, I added a tiny bit of red. For the cyans, I added more yellow, to create more depth in the blue colors. For the blues I reduced the magentas, because adding magenta can make the blue color quite bold. For the magentas, I added more magenta. For the whites I added a bit magenta en yellow so the brighter spots became a bit violet. And for the blacks, I added more blue. I didn't change the blend mode or opacity.
24. As the finishing touch I like to sharpen the image a bit. I do this by selecting the whole canvas (CTRL+A), then copy all layers (Shift+CTRL+C) and paste it (CTRL+V) on top of all other layers. Go to Filter » Sharpen » Sharpen. Then go to Edit » Fade Sharpen... and lower the opacity. I don't exactly how much I reduced it, but mostly it's more than 50%. You want sharp lines, but when they become jagged, you have to reduce the sharpening. Remember to use Fade Sharpen right after you've used the filter, because otherwise the option won't be available. Of course you could also lower the sharpened layer, but I always use the other method.

All that gave me this final result:

How to: Ray of light effect

This is a tutorial on one of my favourite effects. I call it the ray of light effect (because it looks a little like little rays of light). I've used several shapes and the pen tool to create this effect. It's great to create movement in an otherwise static image or to just create the right atmosphere for a layout. So what does it look like?


I've also used this effect for the second style of my Altador Cup lookups. I use it most of the time to emphasize movement or to give something a sunny look.

Step 01. Choosing the right image
Be careful with choosing the image your going to edit. Your image shouldn't be too passive. I would describe an image as passive when the main object (mostly a neopet or a petpet) is just standing or sitting. Some examples: 1, 2, 3. These images are pretty static, so I wouldn't use them. Furthermore you should be able to follow the movement. For example the moving of the arm, legs, wings or hair. I mostly use images without a background for this effect, but that isn't really necessary. You shouldn't use an image with a dominant background (a background with a lot of details and colors) though. This because when you would add this effect to a background that is already really busy, it might overwhelm the image.

I chose to work with the image on the left. It is from this neogreeting and as you can see, I've extracted one of the faeries. You can find more PNGs like this on Details (here and here) and Aroma.

Step 02. The base
Open a new Photoshop file. I always make my files 1000px wide by 600px heigh. I do this because not everyone has the same screen resolution, so I suggest you make your layout no wider than 1000px. The 600px is a random number, but I always use it because it fits perfectly on my screen and I won't get a horizontal scrollbar when working on my layout. For the option "Contents" I usually chose white, but you can also chose transparant, that doesn't really matter.

Make sure the PNG is saved to your computer and open in Photoshop. Copy it and paste it in the new file (CTRL+V). Make a new layer beneath this layer and fill it with this color: #2c5885. It's the blue color of the tail of the faerie. I always use colors from the image (unless there isn't a color that works), so it looks more as a whole.

Before I actually start working on the layout I always imagine how I want the layout to look. Decide where you want the textbox, how wide the textbox should be, where you are going to put the navigation and then where the image should go. I really think you should do this, so you won't find out later that you're not able to make a layout of the image. For this layout, my textbox is going to be on the right, so I've placed the image on the left.


Step 03. The rays
Now we're going to work on the effect. First, decide where your focus point is going to be. This is the point from which all the rays will emerge. Most of the time I choose a point in the middle of the chest. I'm going to do that here as well. I decided that I wanted to create an effect that looks a bit like waves (as she is a waterfaerie, so that seems fitting).

Now select the Pen Tool (P) and match your settings to mine:



You don't have to select the auto add/delete, but I find it pretty handy. It just means that when you want to start working on a new path, the old one will be deleted and it creates automatically a new one.


Here, I started with the first ray. Can you see the point around her middle? That's the focus point, where all the rays will come togheter. I just made a random wave. To smoothen or alter the path you've made, hold the CTRL-key.

Then close the path. You can see I pretty much included the whole image in my path, this because you only want a sharp line at the top of the ray. Make the path into a selection and then we are going to take a brush to make a ray. It will make sense, I promise!

Now select a soft round Brush (B) (which is a round brush with hardness = 0). I usually use a diameter of 200 or 300px. It depends on how large the ray is going to be. In this case I used a 300px soft round brush. Make a new layer directly beneath the PNG. The color I chose was the lightest color of her skin (#ffefdd). I like to start with colors that are close to white or black, as they are the easiest to work with.

Gently brush along the "important part" of the selection, so you'll get something like this:



I set this layer to soft light (opacity 100%). If your ray doesn't reach the ends of your workspace, then you can soften the end with a soft round erases (E).

Now you've seen the basic idea, I'm not going to explain all the other rays in as much detail. I'll show you how they look, what color I used and to what blend mode and opacity they were set. I'll show you below what I did.



Step 04. Shapes
The rays are done, but our workspace is still pretty empty. You could use the layout like this, but I like to add shapes. By shapes I mean circles, rectangles, triangles etc. For now I'll be making circles, I find that they fit better with the rays (as they are really round). But you could use other shapes just as well. Try to stick to one thing though, otherwise your layout could get really messy. Also, think about the placement and the size of your shapes. You should foces them around the rays and it looks better when they get smaller as they are placed further away from the PNG.

Now I'm going to work with the Eclipse Tool (U) to create circles. Using the Eclipse Tool is pretty easy. I always hold the shift tool, so the circles will be actual circles (same width as height) and no ovals. When you've finished all of the paths, click "Fill path with foreground color".



As you can see, I created clusters of circles, both solid and lined. I followed the rays, most of them are in the same area and some a bit further away. Also, I decided to continue using blue's and yellows. Note that the lined circles are the same colors as the lines in the rays.

Step 05. Texturing
Even though you could use the layout as it is now, I'd like to add some textures. I use them to create more depth and a larger variety of colors.

For a more extensive guide on texturing, click here. I usually just look through my texture folder on my computer for textures. I look for textures that are in the same color family as my layout and then try them out. In this case the main color is blue, the accents are yellow.



On the left you can see the textures I've used and how I erased some parts. On the right you can see how I've blenden them with the rest of the image. I guess I was feeling grungy. I also like the addition of really fine bokeh, like the first texture. I think it makes it look really magical.

Step 06. Recoloring
Next up, recoloring. I like to first try and play with several Gradient Map adjustment layers. When I've found something I like, or if I didn't, I start to alter the colors with a Selective Color adjustment layer. To learn more about recoloring, click here


I made a total of six Gradient Map layers, however, I only used these two. As you can see, the first one only makes the dark parts stand out more. The second one makes the blues more purple and the yellows less yellow.

Then I made three Selective Color adjustment layers. I could give you all the settings, but that isn't very helpful. You should try for yourself and see if you could get something that looks like my result. Basicly, I just reduced all magenta's. Yes, I know I had added them with my second Gradient Map. That's OK though, it helped me to come closer to what I wanted, so I don't mind. Also, it did help me to create more unity among the colors in the layout. Sometimes when there are too many colors in your layout, you'll find it's more difficult to recolor it. Then th easiest thing is to reduce the amount of colors. Anyway, this is how I recolored the rest of my layout.



Step 07. The finishing touches
You could add more textures or maybe brushes, but I think my layout is done. What you could also do is take a bright color from your layout and then create some light spots with the radial Gradient Tool (by setting the layer to lighten or screen). I'm not going to do that now, because I don't think it would work with all the grunge going on in my layout.

The thing I always do when I finish my layouts, is sharpen the whole thing. To do this, I copy all layer by pressing CTRL+A (to select the workspace), then CTRL+Shift+C (to copy everything) and then I paste it on top of all the other layers (CTRL+V). Go to Filters » Sharpen » Sharpen. Then to soften the amount of sharpening, go to Edit » Fade Sharpen. I sharpened my image 40%. Closely watch your image and make sure the borders are not jagged (this is a sign that you've oversharpened your image).

I'm not going to add a textbox for this graphic. But it would go right of the faerie, just I showed you at the beginning.

Step 08. Saving the image
I suggest that you always save the file to your computer as a PSD file, so you can change things easily when your finished. Saving a file as a PSD isn't difficult. Just go to File » Save (CTRL+S) and save the image.

Now you have to save the image as a file you can upload and use in your layout. Go to File » Safe For Web. I suggest you save the image as a JPG file. Only save images as a PNG when you have transparant parts in your layout or when the file size is actually smaller as a PNG. I think this once occured to me when I tried to save a patterned background. But in all other occasions, stay away from PNG files, because they're very large files.

So, I've selected JPG (the first box below "Settings"). Now don't touch the other boxes or tabs, only the "Quality" is important. You'd say that you would want your layouts images to be as high quality as possible. Wrong. The difference between the highest quality and for example Quality 75 isn't noticable. While the loading time and the bandwidth it uses is noticable. My suggestion is that you set the Quality to around 75.

This is my final result (as you can see I recolored it a little more):

How to: Quick Effects

Say you've made a really nice blend, but you just want to spice it up a little. It's OK, but you still think that something's missing. Over the years I've learned some quick effects that can just add that little extra and I'll share them with you.

I have made this simple blend that I'll use to demonstrate how I would apply the effects. It's just a PNG repeated with a few textures and some scribles.



Pixel blur effect

The first effect is an effect I call pixel blur. Select the whole canvas (CTRL+A), then copy all visible layers (CTRL+Shift+C) and paste the copy on top of these layers. Go to Filter » Pixelate » Mosaic. A little screen will pop up that only has one option. If you have the preview box checked, you'll notice that the filter will pixellate your blend. Changing the cell size, will increase the size of these pixels. You don't want your pixels to be too large, but you also don't want them too small. The small details shouldn't be visible anymore, but you do want to be able to see what the image originally was like. For my blend I used a size of 8 square (see below, first image). If you've found a size you like, hit OK.

To make the effect stand out a bit, go to Filter » Sharpen » Sharpen. I sharpened the layer twice, to make the effect really strong. Now set this layer's blending mode to Lighten or Darken, depending on the effect you're going for. I'll use Darken for this blend, because the blend itself is pretty dark already and I just think this way the effect looks better.


(Left bottom: Lighten, Right bottom: Darken)

You don't want everything to be pixellated, that just looks weird. So now take your eraser (harness 0%) and erase the parts around the faces and the middle of the bodies. This is my final result:



Shatter effect

I like to use this effect to create movement or to create a worn out, shattered look. Select the whole canvas (CTRL+A), then copy all visible layers (CTRL+Shift+C) and paste the copy on top of these layers. Now select the Lasso Tool (L). Now you want to make selections like shown below:


You make these by just moving your cursor up and down, just scribling. When you've made an selection you like, hold down the CTRL-key and drag the selection a slight bit away from the center. Repeat this step, until you're satisfied with the result.

Remember to not make your selections go through an important part of your image, such as the face. You want to leave focal points intact. Below you can see the layer with the shattering, with a white layer below it. As you can see, I only shifted all the parts a tiny bit away from the center. I also left the faces intact.



You can leave the image as it is now. Or you could change the layer's blending mode to Lighten or Darken depending on the look your going for. Note that Lighten will give a stronger effect on darker layouts, and Darken will give a stronger effect on lighter layouts.


(Drag and drop for full view)


Lens Flare effect

The lens flare is a great way to emphasize certain parts in your layout. First, make a new layer above all your other layers and fill it with black. Go to Filter » Render » Lens Flare. There are different kinds of Lens Flares you can choose from, but I like the first and the third the best. For this layout I choose the first, as it already is a red color and that fits my layout better. You can change the position of the flare by moving it around with your cursor in the little preview box. Then you can also change the Brightness to make it more or less bright, but I left it at 100%. When you like your flare, hit OK.

Now change the blending mode to Lighten or Screen, depending on how strong you want your flare to be. Because my layout is really dark, I set mine to Lighten. Then I changed the placement. Remember to put your flare in a place that seems possible. For example, I don't think it's possible to have a flare coming out of your face, right?


(Normal, Lighten, Screen, Alternative placement)

Now I don't really like the colors of the flare. You could leave it the way it is, if it matches your graphic, but for me the colors are a bit of. Press CTRL+U to open up the Hue/Saturation. Check the box Colorize. Change the Saturation and Hue to your likings. Usually you have to highter the saturation a little and then just shift the hue until the flare is a color you like.


I suggest you make the lens flare before recoloring your layout, as this will make it easier for the flare to blend in with the rest of the layout.

Motion/Radial Blur effect

This effect is really quick and easy. Select the whole canvas (CTRL+A), then copy all visible layers (CTRL+Shift+C) and paste the copy on top of these layers. Go to Filter » Blur » Motion Blur or Radial Blur, depending on the effect your going for. I'll show both starting with Motion Blur.

For the Motion Blur, I usually make the blur horizontal, which means the angle is 0. Then I change the distance. You shouldn't make it so large everything is becomes one big blur, but you also shouldn't make it so small that that all the little details are still visible and things barely move. I set my distance to 45 pixels.

Now go to Filter » Sharpen » Sharpen, to sharpen the blur. I did this twice, but the second time, I lowered the opacity of the blur to 50% by going to Edit » Fade Sharpen.

Now you can set the layer's blending mode to Lighten or Darken, depending on the look your going for. I went with Lighten.


Then erase, using a soft round eraser (hardness 0%) to remove some of the blur around the faces and bodies. My result:


For Radial Blur, you do the same steps, only with a radial blur. You can either choose Spin or Zoom for the blur mode, but I really like Zoom a lot better than spin. However, you can try Spin if you want to. Set the quality to best. Unfortunately there is no preview option, so you should guess a little for the amount. I set mine to 40.

Because Radial Blur can sometimes pixellate the image a little, I suggest you don't sharpen the blur too much (I did only once). Again, you can set this layer to either Lighten or Darken. I choose Lighten.


Remove some parts around the center of the blur and around the faces with a soft round eraser (hardness 0%).



Dreamy Glow effect

This is not an effect I use very often, however, it can look really nice. Select the whole canvas (CTRL+A), then copy all visible layers (CTRL+Shift+C) and paste the copy on top of these layers. Go to Filter » Blur » Gaussian Blur. Set the radial to something between 1,5 to 4. I set mine to 2,5. Now make this layer grayscaled by pressing CTRL+Shift+U (Desaturate). And set the layer to Soft Light or Overlay depending on the overall shade of your layout and how strong you want your effect.


Because my layout is pretty dark already, I made the blur layer a bit lighter (CTRL+U, make the lightness higher), set the layer to Soft Light and lowered the opacity.



Color blobs

There is probably a better way to describe this effect, but whatevss. Sometimes all your work needs are some pops of color. Make a new layer on top of the other layers and color drop a shade from the image you would like to add more. I usually look at what the main colors are in my image, here that would be dark navy, dark red and a muted orange shade. I went with both the main red color and orange.

Select the gradient tool (G), make sure the Foreground to transparant gradient is selected, together with Radial gradient. Match my settings below. Except for Dither, which is supposed to add noise to the gradient, but I've never noticed the difference.



Then create small circular gradients at places you think could use more color. I usually concentrate these around main figures in my layouts.


I created new layers for both colors, different colors might ask for a different blending mode or opacity. I set the blending mode for both layers to Lighten, which is often the best to use for these bright colors. Screen could be nice, but is quite bright, so you might have to lower the opacity. I lowered the opacit for both layers a bit as well, as the original effect was a bit too strong. Try to play with the layer modes and see what works best for you.

Shape distortion

This effect is quite similar to the shatter effect, however, here you'll use geometric shapes to distort the image. I usually go for triangles or squares and sometimes circles. You don't want to get too crazy with your shapes, or it might start to look really chaotic.

Select the entire workspace (CTRL+A), copy all layers (CTRL+Shift+C) and paste (CTRL+V) on top of the rest. Select the shape tool (U). These are premade pen tool paths in several geometric shapes. I selected the polygon tool and set the number of sides to 3 so it forms a triangle.


Now to create the actual shape, just click and drag to determine the size of the shape. If you hold shift when you make the shape, you'll notice it fixes the angle at 0, 45, 90 etc.


I like to focus the shapes around the faces. Try to never distort the face, or important focus points. You can edit your paths with CTRL+T (Free transform) or drag them around if you hold down the CTRL button. If you are happy with the paths you've created, you can make a selection by going to the paths window and click Load path as a Selection, or right click the path and choose Make selection (then make sure feather radius is 0). Select the Move Tool (V) and move the selection just a little bit in a different direction. Keep repeating this process until you are happy with the result.

The effect isn't as pronounced in this example as all the colors are quite close together. Play around with it a bit.

Achromatic shapes

For those who don't know, achromatic means no color, so black and white. This is something I have been doing quite a bit recently and that is to add a achromatic shape. I will demonstrate with the same shape tool I explained above.


I created a few triangles, one bigger one and a few small ones. Made the selection, then copied all layers (CTRL+shift+C) and pasted on a new layer (CTRL+V). I always like to make new layers and keep old layers intact, so I can always come back on decisions I've made. Then press CTRL+shift+U, which desaturates the layer.

You could leave it like this, but you could then again try to blend the layers a bit more. I ended up setting the layer with the shapes to lighten (100%). Lighten and darken usually work the best, depending on the overall brightness of the image.

There is another thing you could do, that is a bit more bold and that is to invert the colors (so you'll get colors that are completely the opposite of what they were). To do so, go to the layer with the shapes and press CTRL+I


I think the effect with the inverted colors is quite cool, but it is also quite harsh. I toned the colors down a bit by setting the layer mode to lighten. If you choose to do this, I suggest you do it early on in your design. When you later texturize and recolor, you'll lose some of the sharp contrast and bring more harmony to your piece.

Adding lines and scribbles

I really like the messy look of adding scribbles to layouts. I usually do this for grungy layouts. As you can see, the base blend I have been using throughout this entire tutorial already has some scribbles in there, although they are rather tame.

I make my scribbles with the brush tool (B), with a normal round brush set at 100% hardness with the size at 1px. I usually pick a contrasting color, or white/black. Here I went with white. Then I just move the mouse a bit up and down, undo the scribble with CTRL+Z if I don't like it.


You could add some subtle scribbles, or you could go big!



When I make a big scribble, I like to combine it with the scatter effect. Then I toned it down a bit by setting the blending mode to soft light.

For a more geometric look, you could also add parralel lines. I make these with the line tool (U), with the weight to 1px. Create the path, fill it with your desired color and then I duplicate the layer a few times, move these layers around, shorten some of the lines a bit.


Something like this. I wouldn't say the effect goes that well with the example image I used here, but you get the idea (I hope).

How to: advanced PNG's

I've already explained how I usually make PNGs, however, what can you do if you want to use an image that is too small? You could come across an image that you would love to use, but if it's not the right size, you probably can't use it.

You could always resize it, but enlarging images will make them blurry. In this tutorial I'll show you how I've made several PNGs of small images, using the pen tool. Before you start, note that this is a very time-consuming process as you have to retrace the whole image for the best result. Also, some pen tooling abilities are required. It is completely worth it though, when you can use that image you love.


I've always liked this image, so I decided that I would make it into a larger PNG. For a first time I would suggest finding an image that is more simple than this one. Avoid images with gradients (they're difficult) or images with lots of line-art and colors.

First I copied the image and pasted it into a new file in Photoshop. I made the workspace 1000 x 600 pixels as I find that fits best on my screen. The size really depends on your preferences, but it should be larger than the size of your image, otherwise you have no space to make the image larger.


Enlarge the image as much as you like, it does not have to look good (and it won't). You can change the size by pressing CTRL+T (Free transform), I changed both the height and width to 300%. Now it's time to trace the outline. I usually make one layer for the lining and then I make new layers beneath that for every new color. If you make everything on one layer, it will be really difficult to alter things later. It's also wise to name your layer, because you will end up having quite a lot of them.

I like to lower the opacity of the enlarged image, otherwise you sometimes think you have traced something really nicely and it will look horrible when you see the result. Also, if you have the image at 100% opacity, you might forget which lines you'd already done or not. Another thing is that it could also be possible that you're working on the image layer and you just don't notice it (yes, that has happened to me many times and it's very annoying). So that are all reasons to lower the opacity, I usually lower it to 30% or something like that. But first you need to colordrop the color you need to use. I started with the black lining.


I like to really follow the lines. I trace the in- and outside of the line, close the path and then fill it with a solid color. I know it would be easier to make one path and then stroke it with a brush, however, I don't think the result is just as nice.


I first finished the black lining (see how I forgot some parts? That's OK, you can always go back later and finish it). Note that I changed her hand a bit, I thought here fingers were way too long. Then I did the hair, the shell and the dark blue lining of her body. This was all done on different layers.

As you may have noticed, I did not do all the lining for the face. This is because for the face it is very important that you get it right. Minor differences can really ruin the whole feel of the image, so I like to do that later.

When I've finished the lines, I usually start blocking in the most important colors. You could use a brush to do this, which is even more convenient if you have a tablet for your computer (I do!), but I still prefer the pen tool. When you fill something in with a brush, you can have gaps that you forgot to fill and that happens a lot more than you would expect. This doesn't happen when you use the pen tool. The pen tool also gives more control.


(drag and drop for full view)

I started by doing the hair, as this is one of the biggest parts of the image. I started with the darkest color. For every new color, I made a layer beneath the previous layer. This way you don't have to trace each line twice or more. For example, for the last last color for her hair, I just created large block of color beneath the other layers, I did not trace the lines. This is the reason that the color that I do last, are also the colors that make up the major parts of the image.

Then I continued with her skin. Note that I did not do all of her face again, for the same reason as I mentioned before. You can see that it is already starting to look like something. I always like to check how my PNG looks between all the different steps. I make the enlarged image invisible or change the opacity back to 100%, to check if everything is right.

After I was done with the hair and the skin, I did the rest of her body. I first did the lining that I forgot to do before, then I blocked in the colors. I also did the shell in her hair.


Now it's time to do the face. This is the most difficult part in my opinion. I like to start making new layers below all the others, untill I have blocked in the most important colors. Then I start to make new layers, above the rest, to slighty alter her face until I think it looks good. For the eyes, I usually use brushes, because sometimes the pen tool makes the lines to harsh. You could also copy the enlarged image layer (duplicate by pressing CTRL+J) and drag it on top of all the other layers. This way it's easier to determine what you need to change, especially when you've already blocked in all the colors.


(drag and drop for full view)

For the last steps, check if you blocked in all the colors, if you did it right and if there are no slight gaps between the lines or different colors. You can do this by making the enlarged image invisible, creating a new layer below all the other layers and fill this layer with a color that is really bright and is opposite of most colors in your image. I used green. As you can see below, there are more gaps than you would expect.


Create a new layer below all other layers except for the contrast layer (the green layer in my case). Take a brush (hardness 100%) and fill all the gaps. You don't have to be very precise, as long as you put the right color beneath the right gap, everything will be fine. Also, make sure you don't go outside the lines.


Just to give you an idea, this is how my layer looked. Note that on the left, there is a yellow part that I later changed with the pen tool, because it wasn't inside of the lines. Always check for these things.


And now it's done! Note that there are always going to be minor differnces between the original image and the PNG you've created. It's really difficult to get it the same, so you're goal should just be to get it close enough. This is my final result:


It took some time to make (two hours I think), but I really like the image, so I think it was worth it :)

How to: make a PNG

PNG's (cut out images with transparent backgrounds) can be the perfect base for a great layout. But rough edges and white lines can ruin a layout just as easily, especially when the contrast between the original image and the layout is big (ie. dark image on a light background). In this tutorial I'll explain how I make and edit my PNG's.

Obviously, you first need to look for an image you want to cut out. If you want to start easy, then look for an image with thick, black lines that aren't covered by anything. For this tutorial, I'll be cutting out Garin from this image:


Open the image in photoshop. I always like to have a white background layer below my PNG, I will explain why later. Select the Pen tool (P). I always use the pen tool to cut out images. This might not be the easiest way, but I do think it gives the best result. Mastering the Pen Tool takes some practice and patience, but it's totally worth it.
If the quality of the PNG doesn't really matter, because you use an image with a dark outline on a dark background, you could always decide to use the Magic Wand Tool (W). However, I will not discuss how that tool works (it's pretty easy to use) and I do not recommend it, because it makes the edges of your image jagged.

I'll start on the right bottom. I always zoom in, so I can see better where I have to create my path. You don't have to follow the line exactly, that's nearly impossible and a waste of you're time. If you don't like one of your lines, hold the CTRL key down and use the mouse to adjust the line. I can't really teach you how to do this, you really have to practice and find out what works for you. What I do though is create a starting point: just click, don't move your mouse. Then I make a second point, this time I do move my mouse so I get a curved line. The third point is most of the time (unless I want to make a really long line) the same as a starting point. Like this:



Easy, huh? You'll notice that most of neopets' images can be traced with a series of simple curves like this. Continue tracing the outline until you've reached your starting point again. Don't forget to zoom out once in a while, because you never know. Sometimes I start to follow the wrong lines. Always look if your still on the right track!



We're not done yet. You also have to remove some of the parts between his arms and hair. Just create some new paths for that:



Now go to your path window (or right mouse click with the pen tool selected » Make Selection...) and click on the "Load path as a selection" button. Press CTRL+Shift+I (Select Inverse) and press delete. We've cut out the image. It took me about 5 min to do this. I was using the mouse pad though (because I can't use my mouse in bed, haha lazy!) so I would have done this quicker with my mouse.

Now we have this weird thing on his arm, that we don't want. So again we are going to use the pen tool. Make a new layer (always make new layers in case you mess up) on top of the cut out image. Use the eyedropper tool (I) to get the color of his sleeves (the very light yellow color). Create a path like this:



Fill this path with your foreground color using your Paths window or right mouse click with the pen tool selected » Fill Path... Make a new layer below this one. Select black (#000000) as your foreground color, then select a Brush Tool (B) with hardness 0 (I think I use size 19) and go over the grey bits on the supposed to be black line. You don't have to be precize as long as you don't have any black coming out beneath your yellow bit. Then hold down the CTRL key and click in your Layers window on the layer of your cut out image. Your image should now be selected. Make sure your still on the layer of your black line and press CTRL+Shift+I (Select Inverse) and press delete. It should now look something like this:



That looks a lot better. (The lines are a bit jagged because I saved the image as a .gif file, it's not really like that, sorry!). Make sure there's no background layer below your image visible and press CTRL+Shift+E (Merge Visible).

Again, we're not quite done yet. Go to the white background layer below your PNG and press CTRL+I (Invert) to invert the background color. Against the black background you can really see all the parts you've missed.



Select your Magic Wand Tool (W) (yes, we will use it for this part) and set the tolerance to a really high number (I set it to 200). Make sure that "Add to Selection" is selected. Now click on the area outside your image a few times (on the layer of your cut out image of course) and don't forget the parts within his arms and hair. It will now look like this:



Just to make sure nothing weird happens: select the Rectangular Marquee Tool (M) and set the mode to "Substract from selection". Now unselect the bottom part (the part that doesn't have a black line), as you can see below. You should always unselect borders that are not black, as it will start to look odd.



Now press CTRL+U (Hue/Saturation) and set the lightness to -100. You'll see that a lot of those light spots are now gone. Not all though. Now we can do two things, but it really depends on the image which technique you're going to use.

If the image has very thick lines (like this one), you can go to Select » Modify » Expand. Expand the selection by 1px, by filling in "1" and hitting the OK button.
If the image doesn't have thick lines, you have to select the lighter parts by hand. So select the pen tool again to create some paths around these spots. You don't have to be precize, as long as you don't select the color parts within the lines. If you're really good with the mouse, you could also use the lasso tool (L). I actually prefer the lasso tool over the pen tool when I have to make quick, unprecize selections like this. Make sure you set the lasso tool to "Add to selection".



Turn the paths into a selection as we did before and then press CTRL+U and set the lightness to -100 again. And now we're done. I like to go back to my background layer and invert (CTRL+I) the color again to check if everything still looks fine. If you're PNG looks good against both light and dark backgrounds, you're golden. Also, I always copy the image and paste it into a new file, because then the file will be as small as possible and you don't have to crop the image. Go to File » Save for web. Save your image as a PNG-24 file. Make sure that Transparency is selected, otherwise your work would have been for nothing.

So this is my final result:



You now have created a great base for a layout. This cut out image can be use on both light and dark backgrounds.

How to: Cropping and resizing

The first step in making your button is most often cropping and resizing the image you want to use for your button. Buttons should always be 88px wide and 31px high. No exceptions. Of course, images aren't usually this small, so you have to resize or crop them. In this tutorial I will explain how I do this and how you choose your focus point, resharpen the image and resize an image without losing too much detail.

First I open a new file. I make the width 88 pixels and the height 31 px. Then I will start looking for an image. When looking for an image, you should keep in mind that the main focus point on your button should ALWAYS be your text. That's what you make the button for. This means that when you choose an image, there should be enough place for the text.

If you want to put a lot of text on a button, you can't choose an image with a large focus point. This also goes the other way around. If you want to put very little text on your button, you can better pick an image with a large focus point. A focus point is most of the time the character on the image.

Look at the following image for example. I've drawn a red circle around the focus points in the image you could use for buttons:


I suggest you only use one of these focus points for your button, because you don't want it to become to busy. A button is a really small graphic, so you should use your space wisely.

Images that are great for buttons with lots of text are wearable backgrounds, you can check here for some pages that link to the swf files. Of course you could always use really small images, but then you have to be careful that the object is still recognisable.

So now we've found a fitting image, we work on the cropping and the resizing. I'm a bit lazy so I'll use a banner I've once made for my gallery:


My focus point will be the shopkeeper itself (the peophin). I copy the image and paste it into the file I've just created. Use the move tool (V) to move the image around a little so you can get an idea of how it's going to look.

Now I'll resize the image. I always use CTRL+T (free transform) to resize images. If you hold the shift button while you resize the image, it will lock the ratio between the width and height, meaning you won't skew your image. On the top of your screen a bar will appear:


As you can see, I've resized my image to 45%. How much you have to resize your image really depends on the image and on how much text your going to put on the button. I usually resize the image so the focus point covers about 30-50% of the button. Make sure that the width (W) is the same as the height (H) (in %). Also, be careful not to scale your image down too much, as you will lose a lot of detail. You'll have to judge for yourself what is acceptable, as I cannot really give you a rule of thumb.

The great thing about free transform is that you can move the image around at the same time and you can rotate your image. If you hover the cursor over the image, you can move the image and if you hold the cursor anywhere else (so not over the image) on your workspace you can rotate the image. I suggest you don't rotate the image too much, because this will affect the image quality. Also, put the focus point on the left or right side of the button, but never in the middle. If the focus point is in the middle, you won't have enough place for your text.

After you've resized the image and moved it to the right place, you can hit the button at the right of the bar to commit the changes.

Now the image will be most probably a bit blurry and we don't want that. Go to filters » Sharpen » Sharpen. The image will be sharpenen, but usually this is a bit too much. If you sharpen an image too much, the lines will become to harsh and a bit jagged. This is why I go to Edit » Fade Sharpen. You can now play with the settings of the opacity. That's the only thing you need to change. (Make sure the box "preview" is checked, because you want to be able to see how your button will look like). I've set the opacity for my button to 65%. If you're done, hit enter or just the OK button.

Here are my bases, the first one is the blurred one, the second one the sharpened one and third is the final one.


The differences are very subtle, but they do matter. Always make sure your buttons aren't blurry, but you also have to be careful, because you don't want to over-sharpen them. Remember that recoloring and texturing will also make the lines a bit sharper.

Now you have a cropped, ready for editing button base. The great advantage of first setting the sizes of the workspace is that you're button has the right size right away and you can keep moving the image around after you've resized it. You don't lose parts of your image as a result of cropping.

How to: Adding Borders

Borders are a very important part of your button, without one your button will seem incomplete. Though borders are very simple (most of the time they are), a wrongly designed border can easily ruin a button. In this tutorial I'll explain how I create the borders on my buttons. I have made a few premade borders which I often use for convenience. You can use them for your own buttons if you like!
Unless the border is really simple I usually use these the premade borders to speed things up. I'm not saying you should use my borders, but it's really handy to create some premade borders like this for yourself.



I'll be using this example button as a base.



I prefer to add the border after cropping the image or after adding the text. This because I like to have the base for the button completely finished before I start adding textures and recoloring.

Well, let's choose a border. I'll be using this one:


In order to use a border, you have to save the border to your computer first. You can't just copy and paste it, because then all the transparant parts will turn black.

Open the border file in photoshop and copy the border (press CTRL+C). Then go to your button file and paste the border on top of your base layers (press+V).

Now right-click the border layer and choose Blending Options... We'll be using the main window that pops up.


Move the little arrow (the one with the red cirle on the screenshot) a little bit to the left. Now all the white on your border will be invisible. Click "OK".

Now I usually (really almost always) set the border to "soft light". This because I want the border to blend in with the button. The border is a bit light on my button, so I duplicate the border layer by pressing CTRL+J. My button now looks like this:


That's already starting to look like it, but the button base doesn't have the right shape. Hold down the CTRL key and left-click the border layer. The whole border including the invisible white will be selected.

Now you can do two things. One; you can press shift+CTRL+I to select inverse and then go to your base to delete these parts. Two; you could go to your base and press CTRL+J so only the selection will be duplicated. Then click on the little eye of the original (so not the duplicate) base to make it invisible. Why would you do this? Because having some sort of backup in case you mess up is always good.

Make sure there is no extra background showing and that the parts that are supposed to be transparant are actually transparant. This is what I've got so far:


The border itself is finished, but I sometimes like to add an inner border. I use these to create some extra contrast between the border and the button base. You can also find these inner borders above, the corresponding inner border is below every normal border. This is the one that I'm going to use:


You have to save this border to your computer too. Open, copy and paste it the same way as you did with the normal border. You don't have to edit this border any further to use it. I usually set this border to soft light just as the normal border. This is my final result:


Try to experiment with your borders. Of course you don't always have to use black and white, but it are the easiest colors to use.

Whatever you do, always keep in mind the fact that borders are only frames. If all the attention goes to your border, you're doing something wrong. When selecting a solid color for your button (and you don't set it to soft light) always choose a color from your button. Be careful when you do this, because it's very easy to pick the wrong color. To prevent this you could lower the opacity of your border.

A guide to: adding text

Text is arguably the most important part of a button. As the purpose of a button is advertising your site, it should be clear to people what the button is advertising for and that is why you put text on it in the first place. I've noticed that many people find it quite difficult to get it right, so I'll explain how I like to add text to my buttons.

Before you start

Readability. There are some things to keep in mind when making a button. First and foremost remember that text should always be readable. It doesn't matter how fancy the font is you've used or how pretty the color is you gave your text, you should always be able to read it. People are not going to try and figure out what your button says as most visitors are really lazy. I know this is easier said than done. When looking back at my portfolio, I find that quite some buttons could have been better if I'd made the text more readable. Always look at your button and ask yourself, do I have to try before I can read what it says? Also, remember that pixel fonts are usually easier to read than nonpixel fonts.

Placement. Also, mind your placement. The most important focus point of your button should not be covered by the text. Also, because buttons are so small, it will become really obvious when the spacing is off. When you put something in the middle of a button, make sure it's really in the middle and not a bit more nudged to the left. People can and will see when it's not right.

Less is more. Buttons are small, try to put as little text on it as possible, though I suggest you stay away from abbreviations. It should be clear what the button is advertising for, but it shoudn't contain complete sentences. If you want to put more text on a button, then consider making the text the focus point and use a simple background.

Nice fonts to use

Pixelfonts. As I said before, I like using pixelfonts as they are really easy to read and therefore easy to use. There are quite a lot of pixelfonts available if you look for them, however, these are the ones I had installed on my computer. I don't use them all as often, because I like the more basic ones better than the fancy ones. My favorites are 04b_03, 04b_24 (for longer words) and PF tempesta five (condensed and compressed).


The important thing when using pixelfonts is that you should set the anti-aliasing (see the sceenshot below) to none. Otherwise your font will appear blurry. Also, all pixelfonts have a standard font size. I've also named that in the list. Don't make the font larger or smaller, they don't work that way. As you can see I've also showed the lowercase and uppercase versions of all the fonts. The letters for 04b_21, for example, only show for the uppercase version. A lot of other fonts also look better and are better readable in uppercase, so that's something you need to consider.


A screenshot of the menu bar for the text tool. From left to right there are options to set the text font, font style and size and the anti-aliasing method.

Nonpixelfonts. As you can see in the picture above, I like setting the anti-aliasing method for nonpixel fonts to strong. Try them all out and you will see that strong usually results in the best readable font. However, when you use a font that's really thick and already readable the way it is, you could try crisp or sharp, otherwise the font might become too strong.

I know a lot op people list their favorite nonpixel fonts in button tutorials, however, I don't really have favorites for buttons. I just try a lot of fonts to see which one I like best. If you are interested, you can find a list of my favorite fonts here (these are just pretty much all the nice fonts I have).

It's good to start with a large collection of fonts, so I suggest you browse your favorite font site before you start making your buttons. A must are some basic pixelfonts. For nonpixel fonts I suggest you have at least some handwritten fonts, a nice serif font and a bold font. You probably already have a lot of good fonts on your computer as they come with a nice collection of standard fonts.

Choosing a font

Space. So now you have installed a lot of pretty fonts, but how do you choose? It really depends on a few things. The most important factor is probably space, meaning how much space do you have left on your button and how long is the text you want to put on it. If your site name is pretty long, for example Nienke's Premades, you should stay away from using large fonts, or you should somehow reserve a lot of space on your button. This is something to think about before you even start making your button.

Length. The other thing is the amount of words you have to put on your button. For Nienke's Premades I like to use different fonts for each word. I think this makes the button more interesting, but also allows you to emphasize certain words. Well, let's look at some examples.


Text as the focal point / one font. As you can see, the main focal point in these buttons is the text. That's why you want it to stand out and I like to use large nonpixel fonts for this type of buttons, but pixelfonts can look good too. However, this is the type of button you'd want to make if your new to using nonpixel fonts. Keep the background simple, as it can quickly become overwhelming. I usually use this for one-word buttons.


Text as the focal point / multiple fonts. When you want to put multiple words on a button, try to use different fonts. The easiest way is to use two different pixelfonts as you can see in the first button on the left. You could also mix pixel- and nonpixel fonts, or use all nonpixel fonts. However, the key is using contrasting fonts (handwritten vs. serif, nonpixel vs. pixel, large vs. small etc.) to keep it interesting.


With an image focal point. Most buttons will have an image focal point. As I said before, you are limited by the amount of space. Don't choose a large font, when your spacing doesn't allow for it. You can see this on the left. As the text gets longer, I start to use smaller fonts and also make the focal image smaller. When you start making buttons, I suggest you start with using nonpixelfonts for this type of buttons. These usually work the best (and easiest) with image focal points.

Themes. Another thing to keep in mind is that you could match your font to the theme of your button. I wouldn't use a very swirly font for a spooky button. Remember that you usually can't go wrong with pixelfonts.

Text placement

The placement of the text is also very important and can have a huge impact on the button as a whole. Here are some examples I made using my button bases.


Simple base. Here I choose a base that is quite simple. It does have a focal point, the tree, but it's not a very obvious one. When you put the text in the lower left corner, you will have the tree in the opposite border and this creates balance. Note that the distance from the left and lower border to the text is the same, which also results in a nice balance. You could decide to move the text up, in the second option the text is vertically centered. I like this option less than the first one, but it still works as you now create a left-right balance. The focus also shifts to the center of the button. For the third button I placed the text in the exact center of the button. As a result the text now covers the tree and it immediately stands out less than in the other options. The text has now definitely become the main focal point of the button.


Another simple base. The logical thing to do is to place your text in the middle, as this part of the button is empty. Your first option is to place the text in the center towards the bottom of the button. This way the text doesn't take any attention away from the image. You'll create two focal points, that are balanced as they are opposite of each other. For the second option, I moved the text up a bit. It looks like it's vertically centered, however, it's not. I know, what? This is a typical example of an optical illusion, caused by the background image. The text is however slightly more positioned towards the bottom. You will only spot this if you zoom in a lot. Then the third option, with the text exactly centered. It looks like the text is slightly more positioned towards the top, but this is the same optical illusion. In this case I would rather use the second option than the third, because that one seems more balanced.


Focal image. This base has a really obvious focal image. The first option shows (just as for the first base) the text place on the opposite side of the image focal point (eyes!). In this case I would rather use a larger font as there is still a lot of empty space left. This problem is fixed for the second option, as the text is now in the middle of this space and therefore creates a focal point on the left side of the button. There is still balance, as the face as a whole is another focal point and the text is placed opposite of the face. For the third option I placed the text in the middle of the button. You shouldn't do this, because the text is now covering the faeries face and also, it leaves a relatively large empty space on the left.

In summary. When you have an image focal point, then you should place your text on the opposite site of the button. This can be the opposite vertically and horizantally, however, it doesn't always have to be both. Placing things in the center of buttons is also a very save thing to do, again you can center vertically and/or horizontally, and also it does not have to be both. Try to strife for balance and try to keep distances to corners or borders the same. And last but not least, do not cover the important parts of you focal image with text.

Mixing fonts

I already mentioned above that mixing fonts is a way to keep your button interesting. I also talked about contrast. What I did not tell is that balance is just as important for the mixing of font as for the placement of these fonts. I'll show you a few examples that I made, using the words Lore example. I made pixel-pixelfont, pixel-nonpixelfont and nonpixel-nonpixelfont combinations.




Again, length. The first thing you should note that the word Lore is a lot shorter than example. This means that to maintain balance, the word Lore is usually in a larger font than example.

Word structure. Another thing is that Lore doesn't contain any letters that would cover the other word up, this would have been different if example would have been the first word (because of the p). Then the L in Lore would also cause problems. Say that would have been the case, there are two things you can do. You could try to find a way or arranging the two words so they don't cover each other up. Or, you could capitalize the words, so all letters are the same height. However, you shouldn't do this with handwritten or swirly fonts, as this looks weird.

First letters. You could also decide to use another font for the first letters of the words. Then you should use a basic font for the words and then a very bold or fancy font for the first letters.

Alignment. Don't forget about the alignment. Most of the examples were centered, but that's because there is no button context here. When you are not sure what alignment to use, then stick to this rule. The alignment of your text, depends on its placement. When your text is placed left of an focal image, it's best to also align te text to the left. If it's placed right of the focal image, you'd better align the text to the right. However, when your focus image is more in the middle of a button and you've placed the text agains the image (and not the border), you should do the opposite of this rule. Let's take the example above with the rainbow faerie, second option. I could've placed more text on it and then I would've aligned it to the right. And if the text is placed in the center of the button, then also center the text.

Size. Also, note that the nonpixelfont combinations are much larger than the pixelfont combinations. Make sure that it all fits on your button when you use nonpixelfonts. On the other hand, large fonts are very useful when you have a lot of empty space on your button. This is also why these fonts usually work better with smaller or no focal images.

Again, remember that readability is a priority. Don't overdo the mixing and stay away from using too many nonpixel fonts.

Styling text

So now you've very thoughtfully placed your text on your button, you want to make it look nice. In this part I'll talk about colors and effects.

Colors. Always use colors that are in your button. Take a look at your button and define the main colors, but also try to see what are the dark and light shades in your button.


These are five examples, on the left are the dark colors and on the right the lighter colors. Of course, you can always find more than three main colors in a button, but I think you should stick to a maximum of three for your text.

Again, I always colordrop my colors from my graphics. For the last example, you could just use white, but it will look a bit harsh as the light colors in the buttons aren't pure white. When you choose colors that are in your button, the text will look like it is part of the button, whereas it would look like it doesn't belong there, when you use colors that aren't in your button at all.

First determine where the text is going to go and then choose the color. On light backgrounds, you shouldn't use a light text color, just as you shouldn't use dark colored text on a dark background. When you know if you should use dark or light colored text, you could use one of your main colors you found in your button. I prefer to use colors that are important for the image focal point, this creates a certain unity.

Borders. I strongly believe that text for a button always needs a border. Because you are forced to use small fonts, you will need something to make them stand out.

To add a border to your text, right click the text layer in the layer screen and choose Blending options. Then select Stroke (see the screenshot below).


Again, as you are limited by the amount of space, I suggest you always use a border size of 1. It will look odd when your border is larger than your text and also, it is usually just a waste of space. Don't change position, you want the border to be outside of the text. You can change the blend mode to whatever suits you, the blend modes I use the most are soft light and overlay, but you should just try and see what everything does. However, it is better to first change the border color. I like to use colors that are very close to my background color or main colors that are an opposite shade of my text colors (so dark text with a light border). You should always try to keep the color quite close to the rest of the border, as this will help your text blend in with the rest of the button. If you feel like your button is to harsh, you could always lower the opacity.

Outer glow. I really like to add an outer glow to my text. I usually make my outer glow the same color as my border or my background. Making it the same color as your border will make the border less harsh, making it the same color as your background can make the text stand out more from the background.

To add an outer glow to your text, you have to go to Blending options again (see: Borders). The important options for Outer Glow are the same as for Stroke. Unless you know what you're doing, you can better keep most options at default. Only change color, opacity and blending mode.

Drop shadow. Drop shadow is actually quite similar to outer glow, but it's dark and displaced a little. It just creates a shadow below your text, which can help making it stand out from the rest. I think the default settings are a bit too harsh for a button though, so I either lower the opacity or blending mode (to soft light or overlay). I also almost always set the distance to 0, as this will put the shadow directly behind the text. I wouldn't touch the other settings too much, but you can play around with them a bit to see what they do.

Gradient overlay. Gradient overlay is the last layer style I sometimes use to style my text. I use it over colored text, or over text with the border. To do so you'll have to merge the styled text layer with a new layer, because otherwise the gradient will not apply to the border. For the gradient I mainly use the basic black to white gradient, or white or black to transparant. The blending mode I set to soft light or overlay. Or I will use a bright color from the button and use the color to transparant gradient set to lighten. You can change the angle to adjust the direction of the gradient.

The other layer styles I barely ever use, as I think the ones I named cover the basic needs for style text.

Animation: using actions

I can animate a button within a minute using actions. Actions are actually recordings of things you've done in Photoshop or ImageReady. I use them for animations which involve simple linear momevents. If you're a lazy animator just as I am, you'd probably like this tutorial!

The things I use them for are when I have to move something in an animation. Where you would normally have to move and create a new layer and move and create a new layer and so on... you now only have to press one button (several times). The action won't be long, but it will save you some time!

I'm now going to explain how to make an action for moving an object 4 pixels to the right per frame.

Make sure your "Actions" window is opened. If not, go to Window » Actions. At the bottom of your "Actions" window you'll see this bar:


(4) is the button for creating a new action, (2) is the button for recording an action, while (1) is the button to stop recording or playing. The (3) button is used for playing (using) your action and the (5) button is used for deleting an action.

Now we're going to make our action. Important is that everything is ready before you start recording. Open a file, it doens't matter what it is and make sure there is an object you can move around. Select the Move Tool (press V).

Now go to your "Actions" Window and press the (4) button to create a new action. I've called mine "Move4right", because that's what it will be doing. Create a new frame (Duplicates current frame button) and then nudge your object 4 pixels to the right. Then press the (1) button to stop recording. Your action will now look like this:


Well, this wasn't so hard right? You might be wondering now what you should use this action for. For example, I always use it for my shine animation and it saves me so much time or at least... a tired hand because I don't have to nudge it anymore ;)

Animation: motion Blur

This is another one of my favorite animations. I've never seen a tutorial on this before, so I thought I'd write one. This one is not that difficult and pretty quick, while the effect is rather cool, so I hope you like it.

First, here are some examples of buttons I made using this animation. You can use it for buttons with a bit of a grungy effect, but it also works very well with lighter buttons.


I'll be using by example button again (; drag and drop for full size). The important thing is that the text and everything should be done, this animation is pretty much the last step in your workflow.

My button only has two layers, the grey background and the text. Important to note is that I have added a border and outer glow (Blending Options) to the text layer. This means that if I alter the text in any way, the effect also changes with the text. So if I were to blur the text, the effect would get a bit funky (1).

To solve this, I duplicate the text layer (CTRL+J) and then make a new empty layer as well. Then I select the new text layer and the empty layer (click the layer in the layer screen while holding CTRL) and merge them (CTRL+E). You might notice that even though the stroke and outer glow are still there, their blending mode is reset to normal (2). That's OK. Now select the text in the new merged layer by holding the CTRL key and click the layer preview in the layer screen. Make the layer invisible by click the little eye (3). Go back to the original text layer, then press Shift+CTRL+C to copy and CTRL+V to paste (4). This might not look like the easiest way to do this, but I believe this gives the best result and you can actually do this pretty fast if you get how it works. If you now decide to use motion blur on the new copied text layer, it will look much better (5). Note that I kept the original text layer visible, I think this makes the animation looks better.


If you didn't use any effects on your text layer, then you can simply duplicate the layer and rasterize the text (right click in the layer screen and choose Rasterize Layer). I suggest you always keep your original text layer as a back-up.

Now the preparations are done, it's time to animate. Remember that in my case, there's the background layer, then the original text layer and then the merged text layer. The layer I'm going to work with for this animation, is the merged text layer.

The one thing you should remember is that if you want to make changes to the merged text layer, you should duplicate it. This because otherwise the changes would also be visible in previous frames and that's not what we want. So each time I'm talking about blurring or sharpening a layer, I used the most upper layer (the one that I altered last). Also, note that duplicating frames and layers is not the same thing.

Start by making a new frame (Duplicate Selected Frame), the first frame is of course the unchanged version of the button. Now go to Filter » Blur » Motion Blur (with the merged layer selected). Start with a low distance, within 5 to 10. Then click OK. This is the second frame.

Now you want to make two new frames. Why? Because you want one new frame to alter and then one that you are going to keep the same. The animation is in fact mirrored. After you've made two new frames (you should now have four frames of which 2 to 4 are the same), we continue working with frame 3 (the first duplicate of frame 2).

For this frame, duplicate (CTRL+J) the merged text layer and sharpen it a little (Filter » Sharpen » Sharpen, then Edit » Fade Sharpen to 50%).

Again, duplicate this frame twice and continue with the first duplicate. Duplicate the merged and sharpened layer. Add a Motion Blur, this time with a larger distance, within 15 to 20. Duplicate the frame twice, use the first duplicate. Then again, duplicate the last used text layer. Another Motion Blur, this time with a lot larger distance as it is the last time we're going to blure. I did 40. For the last frame, we of course duplicate the previous frame twice and then alter the first duplicate. For this one you only have to duplicate the last used text layer.


This is what the different layers look like. The first is the normal text layer en merged layer unaltered. The second is with the Motion Blur of 7. The third is with the layer sharpened for 50%. The fourth with a motion blur of 17. The fifth with a motion blur of 40. And then the sixth with the layer sharpened for 30%.


Here you can see the animation screen for this button. As you can see, all the frames (except for the first one) are mirrored. Layer 7 is the middle one and is not duplicated. Also, remember to check all the frames, sometimes the wrong layers are visible in the wrong frames.

There is also another way to mirror the animation instead of duplicating each frame twice each time you make a new one. You can also decide to duplicate each frame only once, then when you're done, you can select all the frames you want to mirror. Then choose the option Copy Frame, then Paste Frame (choose Paste After Selection) and then Reverse Frames (all these options can be found in the animation screen, click the little arrow in the right of the screen).

Now select all the layers, except for the first one and change the time. I decided to use 0.1 seconds as this slows the animation down a little, but doesn't make it look choppy. I choose 0.5 seconds for the first layer, but only because this is a preview of the effect. Normally I would use 1.5 or 2 seconds for the first layer.

Animation: Glow

The glow animation is about the easiest animation there is. And I found a way to make it even more easy. Using a special action, making the glow animation will only take you two minutes give or take. Here I'll explain how to make and use this action. Here are some examples of the animation:



The animation can be used for a variety of buttons. You can use it to make text glow, to make a glow appear over the text, but also to make text fade in and out. I will further explain the first of these options.

Use a button that is almost finished. I use my example button (; drag and drop to view full size), but this time without the outer glow.

The animation is pretty much the glow fading in and out. So we need the version of the button without glow and then one with glow. For the animation, we are slowly going to higher the opacity of the layer with glow (from 0 to 100%) and then lower it. I like to do this with steps of 10% per frame.

First we have to make the layer with glow. The easiest way to do this is to duplicate your text layer and then add Outer Glow to that layer. You could add the glow to your original text layer, but altering the opacity of that glow is more difficult, because you would have to open the Blending Mode every time you want to change the opacity.

Because I have a border, that is set to soft Light, duplicating my original text layer will make the border appear more bright. You can undo this, by simply removing the border of the duplicated layer. Now we are going to add the glow, right click the layer in the layer screen and then choose Blending Options » Outer Glow. You can change the outer glow to your likings and then click OK. I just used the standard settings. Set the opacity of this layer to 0%.

Now we are ready to make the action and thus the animation. If you don't understand how actions work and how you can make one, read this first.

Select the first frame and make sure the right layer is also selected (the one with the glow). What you should do when you start recording is duplicating the current frame and then higher or lower the opacity of the glow layer. It's really easy. This is a screenshot of my action:


See? I constantly add 10% to the opacity. Then when I've reached 100%, I start going back to 0%. Of course you don't have to make two duplicates for 100% and 0% is actually not included in the action, because it is the starting situation.

If you understand how it works, you can start recording. Remember that it pretty much records everything you do, so it's easier if you try to not make mistakes. You can always delete certain parts of your action, but it's just more convenient if you don't have to. Then when you've done all the opacities (from 10% to 100% and then back to 10%) you can stop recording. Here is my result:


I set the time for each frame to 0.1 sec, it's pretty subtle this way, but that's what I like about this effect. It's not too much, but you can make it stand out if you want to.

For the next button you only have to make the glow object, set the opacity for that layer to 0% and then you can generate the animation with just one click.

I intentionally said glow object, because you don't always have to use Outer Glow as I did here. You can create a radial gradient or even a star (as for the Kleur button). You can also apply it to text, this will give a fade in and out effect. Try to experiment, it's not that much work to make anyway!

Animation: Shine

This is by far my most favorite animation. It's easy, quick and it looks really cool and fancy. It looks great with non-pixel text, but can also be used on pixel-text and even the whole button. Sounds good huh? Then continue reading, this tutorial will explain how I make this animation.

You can use it for the whole button, like the first four buttons below. Or only for the text, like the last four buttons below.


To begin, you need a finished but unanimated button. I've made a very simple button as an example:


I've made this completely in Photoshop (7.0). Now we're going to work on our animation (we start in Photoshop).

Create a new layer on top of all your other layers. You can do this by clicking the "Create a new Layer" button on your "Layers" window, by going to Layer » New » Layer... or by pressing Shift+Ctrl+N.

Now select the Gradient Tool (press G) and match your settings to mine: (drag and drop for full size)


Set a really light color (like white) as your foreground color. Now make a small vertical gradient on your button, like this:


I want the gradient to go over the text only, so that's what I'm going to explain. It's very similar to a gradient that's going over the whole button, so you should be able to figure that out yourself. If don't know how to, you can always drop me a neomail!

Hold down the Ctrl button and then click in the "layers" window on the text layer; the text should be selected. On this screenshot you can see what layer I had to click (the text layer) and how my text is selected:


With the text selected, I go back to my gradient layer and make sure the layer (so not it's content!!) is selected. Now click the "Add Layer Mask" button on your "layer" window to create a layer mask. As you can see, now only your selection is still visible. If you move the layer, the layer mask will move with it. We don't want aathat. Click on the little "chain" between the layer and the layer mask, it should disappear.


Now the layer and the layer mask aren't linked anymore, we can move them around separately. Select the gradient layer again (not it's layer mask).
Select the Move Tool (press V) and move the gradient all to the left just until it isn't visible anymore. I like to nudge (using your keyboard arrows to move it) instead of using the mouse, because then you won't move it in a wrong direction because your hand's shaky! I always zoom in while doing this, so I can be sure it's in the right position.

Now we're done prepping for our animation! Switch to ImageReady (or if you're using a newer version of photoshop, open the animation window) so we can animate our button.

ImageReady can be quite annoying while figuring out animations, you have to get used to it. Make sure your animation window is showing. This is the animation window, the numbers are there for my following explanation. (drag and drop for full size)


Click on the little double arrow (1) on the animation window (it's in the top right corner) and make sure nothing is selected.
Now look at the bottom left corner and make sure it's (2) set to "forever", otherwise your animation will only run once.
At (3) you can see your frame. I now only have one, but I'm going to create more frames! The frame that's selected is the one your working with.
I usually set my delay (4) to "no delay" for the animation, I'm going to do that now too. I'll make some changings in the delay, but I'll do that later.
To create a new frame you can use the (5) button. This will duplicate the frame that's selected.
To delete a frame you can press the (6) button.
To see how your animation is going to look you can press the (7) button to play and stop the animation.

Now you know how the animation window works, we can start animating. Make sure the gradient layer is selected (not it's layer mask) and select the Move Tool (press V).
Now create a new frame. Depending on how fast you want your animation to be, nudge it 3 to five pixels to the right (the more pixels you nudge it at a time, the faster it will be). I'll go for five pixels. Once you've done that, you create a new frame, you nudge and you repeat this until the gradient disappears at the right.

If you're just as lazy as I am, you could create an action to speed things up. Read here how to do this.

Go back to your first layer and set the delay to about 1,5 seconds (since this is not an automatic option you have to click "Other..."). I wouldn't make it less than 1,5 seconds or more than 2. When the animation repeats to fast, it will be very annoying. But you can't make it take to long before it repeats, because then people will miss it. I've set it to 1,5 seconds.

Now the animation is done and you can save the button! Here's my result:


There are many ways you can use this animation. Of course you don't have to use white as an color. Normally I would lower the opacity of the white or set the gradient layer to soft light. You can also make the gradient go over the whole text including the border and it's outer glow (if you've used that on your text of course!)

I could name many more things, but I think you should experiment with it.

Animation: Sparkle

The sparkle animation is a very delicate, yet fancy animation. It makes buttons extra special. It is a bit harder to master though, so it also takes a bit longer to make (compared to the shine animation). In this tutorial I'll explain my take on the sparkle animation.

Here is are some examples of the sparkle animation:


Before we start working on the animation, take a good look at the button you want to use the animation for. I'm going to use the same button base as I've used for the shine animation tutorial:


As you can see, the background is quite dark. This is important because the sparkles are going to be white and they won't be noticable on a very light background. So before you are going to animate, make sure white is noticable on your button.

Now we're going to prep the button in Photoshop for before we start animating. Create a new layer (Shift+CTRL+N) on top of all your other layers. Right click on the layer (in your layer window) » Blending Options... Layer styles are extremely handy, but for now we're only interested in the option Outer Glow.


Drag and drop for full size!

Select the option Outer Glow. Make sure the options for the Outer Glow are showing and set the blend mode to normal, the opacity to 100% and the color (that's the little white box in the screenshot) to white (#FFFFFF).

That wasn't so hard, right? Okay, we're done prepping. Now open ImageReady. If you use the option Switch to ImageReady just like I do, you have to close the file again in ImageReady. I always prefer to open a complete new file in ImageReady, because I find that easier to work with.

Open a new file in ImageReady, it should be 88x31 pixels. Go back to photoshop (yes we'll be switching a lot between these two programs) and press CTRL+A to select the whole canvas and then Shift+CTRL+C to copy merged (then you copy everything that's visible). Paste this in ImageReady.

I'm now going to explain how to create one sparkle. Go back to photoshop and make sure the layer with the outer glow is selected and that your foreground color is white (#FFFFFF). Now select the Pencil Tool (you can find it in your tool bar under the Brush Tool) and set the brush to Hard Round 1 pixel. Make a dot on your button on the place you want your sparkle to be.


That's looking good! Now select the canvas and copy merged (CTRL+A and then Shift+CTRL+C), go to ImageReady, create a new frame and paste it (CTRL+V) into the frame.

Go back to photoshop again make a dot above, beneath, left of and right of your first dot (we're still working on the same layer), like this:


Now select the canvas and copy merged (CTRL+A and then Shift+CTRL+C) and go to ImageReady. But wait, we're not going to duplicate the last frame once, but twice.


See, the first frame is the blank base without any sparkles. The second, the third and the fourth frames are all the same. The one we're going to paste our image into is the third one. You may wonder why. Well, this is because the sparkle is getting larger at first and then getting smaller. By duplicating the layer twice, we save ourselves some time. If you don't get it right now, you'll understand when you've finished the animation.

Go back to photoshop and extent the sparkel one pixel in every direction, like this:


Select the canvas and copy merged (CTRL+A and then Shift+CTRL+C) and go to ImageReady. Duplicate your third frame (the one with the slightly larger sparkle) twice and paste the image into the fourth frame. You should now have something like this:


Drag and drop for full size!

The sparkle gets larger until it reaches the fourth frame and then gets smaller. The first sparkle is now animated. I myself, find the animation a bit to fast, so I've set all the frame with a sparkle to a delay of 0.1 (do not make it any slower than this, or your animation won't be very smooth) seconds and the delay of the first frame to 1 second. If you play the animation, it should look like this:


Now you could add more sparkles. Never add too many sparkles and make sure there are pauses between the sparkles. Otherwise your button will look a bit spastic. This is how my final result looks:


You can combine this animation with many other animations. What I really love is the combination of this animation and the shine animation. However, the thing is, that since you open a new file and paste the image into the frames, you can't use actions like I normally do.

Anyway. I want to encourage you to experiment with this animation. It's a great animation and it can make a simple button a lot more interesting. But remember, in this case, less is more. Don't make too many sparkles or it'll ruin your button. I usually don't make more than four sparkles (the button I've made for spring breeze is an exception, but that's also a variation on this animation).

Design Process: button

A few people told me they really liked to see my design process for a heavily textured layout, so I figured people might be interested in how I make a button. Here you can see how I made a button for my site Nienke's Premades from start to finish.

I decided to use this image:


Hmm... I really like to use girly images... Also. Why is neo copying so many of Disney characters, is that even okay? Anyway.


1. I opened a new file in photoshop. I always like a white background layer and I make the canvas 88 x 31 pixels. You can read here how I crop images for buttons. It's what I did here too. I made the image pretty small, because my site's name needs to fit on it (it's long, I hate it haha). I sharpened the image after cropping and then used Edit » Fade Sharpen... set to 60%.
2. As you can see there's still some ugly text visible on the image bleh. I'm going to remove that using a shoft brush. I colordropped a main color from the button (blueee!!) and used that. I know this doesn't look to good and it's really obvious, but it's easy to change that. Oh, always do things like this on a new layer, this way you can always undo something if you don't like it after all.
3. I made a new layer, used some smaller and larger round brushes and color dropped quite a some colors from the button. See how it's already becoming less obvious I removed something? Yes, it's still visible, but remember that I'm going to add text and textures over that part.
4. I used a hard brush (1px) to line the hand on the left site. I used a color from the original lineart and then drew the line. I then lowered the layer's opacity so the line whould be less harsh.

Time to add some textures. I've said this before, but I still think it's a really good tip. Spend some time looking for good textures and save them to your computer. You don't want to waste your creative juices on finding textures when you're working on a graphic. I have over 600 textures saved to my computer (this count doesn't even include the ones I made myself) and it works great.

Furthermore I never ever use button textures, I don't see what's wrong with using large ones. I actually prefer them, because you can use them in so many different ways (you can scale them down or not, and use different pieces of the texture) whereas that's not possible with button textures (boring!). Of course it depends on the texture how much I scale it down, but when I want to use the whole texture it's usually around 20 to 30 %.

Also, I think you can use any kind of texture for your button, but please be careful with using ones that are very detailed, they can make the button look pixelly.


5. I used this really simple texture. I like how it makes the bottom part slightly darker and the top part a bit lighter. I also like the subtle bokeh. Bokeh works GREAT with buttons. Also, notice that the texture is blue, the main color of the button.
6. I set the texture to Soft Light (opacity: 100%). The texture doesn't change a lot, but they don't always have to.
7. I then used this pink texture. Pink is also a important color in the base. Using pink textures on blue usually results in purple, which I don't mind. As you can see I removed some parts around her face and body, because the effect was too strong there.
8. I set the texture to Soft Light (opacity: 100%). Again see how it brightens the top and darkens the bottom?


9. I used this super nice purple bokeh. It's by monxcheri on dA and the complete set is great!. I erased some parts around her face again. Never cover your focus point in bokeh, it doesn't work.
10. I set the texture to Screen (Opacity: 100%). If you want to use the same effect, but a bit more subtle, then go for Lighten instead of Screen.
11. I decided I didn't like the apple, so I used a hard small brush (1px) to paint over it. Just color drop some random colors around the part you want to remove and then circle over it with the brush. Build up the different colors and then end with a main color, so that most of the part is covered with main color, but other colors shine through. Then use the blend tool to make it look more natural.
12. I did the same thing here as I did in the previous step, I removed a small part of the background. I also repeated step 4.

I usually don't use more than 3 textures, most of the time I even use less. There are simply not as many pixels to work with, so you should hold back a little. Apart from the basic round brushes, I never use brushes for buttons, they don't work with the small working space.

When I'm done with the texturing I usually add a border and the text, but I sometimes do this before the texturing. It depends on the button and how much work the base needs.

Confession. I would actually use square borders all the time if it didn't look so uncreative haha. Hmmm, I still use them a lot. But yeah, I think square, simple borders are the best. They frame the button, without distracting from the image and the text. Which is what borders are supposed to do. You can read more about adding borders here.


13. I created a simple, square border (width: 1px). I do this by selecting everything BUT the border and then use Select » Inverse (or for short shift+CTRL+I), so only the border is selected (my trick for lazy people!). I then filled the border with a solid color from my button. I used a somewhat darker purple color.
14. Right click on the layer in the layer box and chose Blending Options. I used Stroke to create an inner white border (color: white; size: 1; blend mode: Soft Light), Drop Shadow to create an shadow around the border (color: black; blend mode: Soft Light; distance: 1) and added a gradient with Gradient Overlay (gradient: standard black to white gradient; blend mode: Soft Light; angle: 124). Then hit OK. I also lowered the Layer Fill to 68%. Lowering the fill instead of opacity will only lower the opacity of the purple color, the layer styles you just applied will have opacity 100%.
15. I added the text. I used two different pixelfonts, the first one is 04b_03 and the second one is PF Tempesta Five Compressed. When using pixel fonts always set the anti-aliasing method to none.
16. I changed the text color to pink (it's one of the colors on the button that really pops). I don't like how it looks right now, but I never worry to much about it, because I always wait to the end to edit the colors. I added an Outer Glow (opacity: 75; blend mode: screen; color: the light blue background color), Gradient Overlay (opacity: 50; blend mode: Soft Light; gradient: standard black to white) and Stroke (size: 1; color: same blue color as for the glow; opacity: 60).

After I'm done with the border, the text and the textures I usually start recoloring the button. I first like to use a Gradient Map to unify the colors, then I use Selective Color to edit the colors to my liking. Read more on recoloring here.


17. I used this gradient for the Gradient Map. I did not create a gradient layer, I just wanted to show you the gradient I used.
18. I set the Gradient Map Layer to Pin Light (opacity: 43%). I made the button more pinkish.
19. Then I used Selective Color, to edit all the colors. I extracted most of the yellows (not in the face though) and added magenta en blue (that makes purple!).
20. I duplicated the border layer (ctrl+J) and dragged it to the top. I then lowered the Fill to 0%, removed the Gradient Overlay and lowered the Opacity to 70%. I also removed the Outer Glow I accidentally added, oops! (I also removed that for the first border layer).


21. I added a pink gradient, see how it covers the text and her face only a little. (okay the text quite a lot)
22. I set the gradient to Screen (opacity: 56%).
23. With a soft round brush I made the corners of the button a bit darker adding black.
24. I set this layer to Soft Light (opacity: 100%).


25. I thought the text was a bit too bright, so I added a dark blue color using a soft round brush (while I had selected the text).
26. I set this layer to Vivid Light (opacity: 100%)
27. I recolored the button again using Selective Color. I made the colors a bit more saturated.
28. I copied all layers and pasted in on top (CTRL+A then shift+CTRL+C and CTRL+V). I sharpened this layer, then softened the sharpening using Fade Sharpen again (10%).

Now I'm done with the editing and I add the animation. As for the animations, I don't really like very fancy animations. I'd rather use a simple shine or glow animation, because they don't distract to much and they're easy to make (did I mention I'm terribly lazy sometimes?). So I'm going to use the shine animation. I'm not going to explain how I made it, but just show you how I made the gradient I use for the shine.


29. I selected the text layer, then duplicated it (CTRL+J). I made a new layer on top of that, then selected both the new empty layer en the duplicated layer (CTRL+click in the layer box) and merged them (CTRL+E). I then selected everything in that layer by holding the CTRL key when clicking on the little preview of the layer in the layer box.
30. Make a new layer (on top of the other layers) while the text is still selected and the click on Add Layer Mask in the layer box. Click on the little chain between the layer and the mask (this way they can move seperately). Now use the gradient tool (reflected gradient) to create a gradient. I used a blue gradient.
31. I set the gradient to Screen (opacity: 60%).
32. I added Outer Glow to the gradient. I used the same blue color and set the glow to Lighten (opacity: 100%).


So this is how I usually make my buttons. I don't really work very fast, but this works best for me. I hope you somehow found this useful :)

How to: Anchored petpage layout

The layout for this page is an example of an anchored layout. It is a layout which is one page, but looks like more pages. They are currently very popular. Though a lot of people still find them very hard to code, so here's a little "how to" on anchored petpage layouts.


First, I'll explain what page anchors are. A page anchor is a link to somewhere in the same page. My navigation is a great example, every link, links to a part on this page. To use page anchors you first have to create a link that directs you to the anchor. This is very similar to creating a normal link, only the URL is different. If you look at the code on the left, you'll see there's a # at the beginning of the URL. You can name your anchor anything you want, but there's has to be an # in front of it. Then you have to create the anchor itself (the second bit of the code) anywhere on your page. The names have to be exactly the same, otherwise it won't work. I've seen a lot of people using links in all caps, but then forget to capitalize the name. This does not work. I never use caps for my anchors just to make sure I won't make any mistakes.

Now you know what page anchors are, I'll explain how a anchored layout works. I've made this little picture on the right, so it would be easier to picture what you're doing when coding a anchored layout (drag and drop for full size!). Basicly what you're doing is putting a series of boxes in a box that can't scroll and you make them appear one after another with page anchors.

The box you see on top is the box that can't scroll. Behind it you see two other boxes. These boxes have the same heigth and the same width. That's why you can only see the first one when you make a flat non-transparant image of this image. Of course there's some spiffy navigation that I didn't include in this image linking to the page anchors 1 and 2. When you click the link that links to anchor 2, the second box will appear, because when you are directed to an anchor, the anchor will appear on the top of the page, making the second box to appear in you non-scrolling box.

I hope you now understand how page anchors work, but if you don't, it won't be such a big problem, because I've made a template for you! Even though it would be nice if you understand how it works, because that makes it a bit easier for you.



Enough explaining, let's get to the coding. I've coded a simple anchored layout with some really simple navigation. As you can see, I've coded for two boxes: #box1 and #scrollingboxes. #box1 is the non-scrolling box and #scrollingboxes are the boxes within #box1 that can scroll. Then there's also the #nav. Make sure your navigation is outside of #box1, because otherwise you can't navigate back and forth between the boxes.

Actually this code is just the basic. You can change it as much as you like. This layout has two boxes within #box1, but that's just to keep the code simple. You can add as many boxes as you want. Make sure to rename the anchors and make sure the new "name" corresponds with your link's URL. I suggest you give your anchors easy "names", so you won't make errors, which could ruin your layout.

Also, something you should keep in mind when you change the codes. #box1 and #scrollingboxes should have the same width and the same height, otherwise it'll start to look a bit funky.

Basics: Coding tips

I always get a lot of questions about coding. How I learned to code, how to code this, how to code that, how to make sure layouts work in all browsers. But it's hard for me to answer these questions, because with coding there isn't just one way that is the right way. You can achieve the same thing in so many different ways. That's why I decided to give some tips, instead of writing a full tutorial, because I can't.

I would also like to note that I learned most of the coding through experimenting in the 6 years I've been doing this. I started with looking at other people their codes and trying to understand how everything worked, what it all was for. And from there on I slowly learned new things, but it took some time. You have to be patient. Also, I'm no proffesional, no expert, I'm just stating my opinion. Anyway, here are some tips that I think might help some of you. Some might be obvious, but these are the ones I could think of.

Always remember that you can lose your coding. Whaaaat? Yes, last summer one of my pages got reset, because of well I still don't know, but I lost Details' coding. Luckily I had a lot of old coding still saved to my computer, so it wasn't really a problem, but always save your coding. Do monthly back-ups, I even back-up all my old layout versions. Furthermore, you can code in your browser, but what happens if you accidentaly close your window? Try to reopen the window through your browse history, but if that doesn't work, you just lost all your hard work. If you want to work in your browser, don't forget to save every now and then. You could also work in another program, I sometimes code in notepad (I actually wrote this in notepad) and save it to my computer.

Check your coding in multiple browsers. I have 5 browsers on my computer, because I like to check my layouts. Any idea how silly it looks when it says on a layout it works best in GChrome but it works perfectly fine in Firefox too? Also, a good site is at least functional in all major browsers. Yes, you can say people shouldn't use Internet Explorer, but there are people who still do. You don't have to have them all, GChrome is very simular to Firefox and Safari. And usually things then also work in Opera, but that's not always the case. Internet Explorer gives most of the issues, but I feel like it's getting better with every update (it's still a horrible browser to use, but hey, at least it's not such a pain to code for as it used to be). When you make premades or do layout requests, I think you should check them in all these browsers (at least), because that's good service!

I like to use the replace function in word when I have to make the same change a lot. Hmm, that's a weird sentence. Anyway, look at one of my content pages for NP or Details. Every layout or texture is positioned in a box and when I want to edit the layout, I have to edit the same box about 100 times. I then just use the replace function in word, because that's so much easier. Copy the phrase you want to remove and then type in what you would like to have there in return. Remember that quotation marks sometimes don't work when they're from word (that happens to me), so I tend to work around them. If you want to remove a part, then leave the other box empty.

It's not that difficult to make layouts that work in all browsers, even IE. Open the browser you alway code in and then open IE (it's the troublemaker usually). Start coding the layout bit by bit and keep checking how it looks in IE. When something looks off, you know what causes it and you can try to find a way to work around it. Try to avoid to work too much with margin and padding, because they act differently in IE and FF for example. In stead I always like to use a lot of different divs to fix the width of textboxes. When you make a div with that's 600 pixels wide and you make a new div within that box, you can give it a padding and it will looks the same in both browsers.

Make your own templates! Yes, you could code every layout from scratch, but this can take quite some time. I like to code my own templates, that are really really basic and it saves me a lot of time. For userlookups for example, I always use templates (made by me of course) that remove most of the things I want removed and already style some of the modules and text. This way I only have to adjust some things to make it work with the layout I'm making. Do not use other people their templates without crediting or reading their rules though.

To learn coding, look at other people their work. Take it apart, see what everything does, look it up. It's not that difficult! I for example really like this site. It's a code reference page. If you have a part you don't understand, you can find the explanation there. However, you should never copy other people their codes (or parts of it) to make your own layouts (without giving them credit that is). Coding is like a language, everyone can use it, but that doesn't mean everyone will come up with the same thing. It's a resource to make a layout, so yes, people can take credit for it!

Make sure you put things in the right order. Some codes won't work when you put them in the wrong order. For example links (right order: a:hover after a:link and a:visited, a:active after a:hover) and backgrounds (right order: color, image, repeat, attachment, position; though this isn't always the case, just check the order when the background doesn't show up). Also, the code work in a certain order, if you'd put two codes in there, one to remove an object and one to make it visible again, it depends on the order of these two codes whether the object is visible or not. If you put it in the order I stated, it will be visible, but the other way around it won't. Also, objects later in the code will appear over objects earlier in the code (unless you've used z-index). Keep this in mind.

You can use float instead of tables. I like tables for the fact that they are really, really stable. They look the same in all browsers and your content doesn't shift or look strange. But they are very annoying to edit once you've made them. Want to add something in the middle? Then prepare to shift everything, it's so much work. Therefore you can also code boxes with a fixed with and height and give them a float:left. This way they will line up next to each other and automatically shift to the next rule when they don't fit on that line anymore. They act a bit like cells of a table. The thing is, you don't need the tr tags and that really saves you a lot of time.

Absolute positioning is easier than relative positioning. So stick to that if you're not so familiar with coding. When you use relative positioning, thing can shift and they most of the time look different in other browsers. The thing with absolute positioning is, it will be in the same position, always.

Keep in mind that people have different screen resolutions. So you've coded your anchored layout, but that scrolling bar is so annoying. So you just set the complete page to overflow:hidden, so it won't scroll anymore. Thing is, the layout is 800 pixels high, so I wouldn't be able to see the bottom of your layout. Neopets is designed to work with 1024x768 pixels as the smallest resolution (I believe that is about right), so try to keep your layout within these limits. I for myself like to keep my layouts within 1000x600 pixels, so I avoid weird scrollbars on smaller screens.

Stick to basic fonts for text styles. Using some fancy, curly font for you site headers looks really awesome, I know. But chances are that the people who view your site, don't have these fonts on their computers and then they can't see them. This can really mess up your layout. So just use basic fonts like arial, georgia or verdana, because everyone has these. If you still want to use your fancy font, them make an image of it. It's more work, but you do know for sure it works for everyone.

Coding not your strongest suit? Fake it with graphics. If you're having a hard time making a header look good, why not just make it in your graphics program right? Don't know how to remove something without messing up your layout? Make an image to cover it up (yes I used to do that a lot). Though I think you should try first ;)

Experiment! Not sure what something does? Just try it out. Don't know how to code something? You could look it up, but try to think about it first. This way you improve, by pushing your limits. You can be creative with coding!

Where I find my resources

Even if you don't rely as heavily on resources as I do, they can still greatly help you in finishing your design. However, it can be quite challenging to find the right ones, if you don't know where to look. I wanted to make an overview of some places you can find great resources that have been helpful to me in the past. I suggest you make special folders on your computer for textures, stock images or other things, so you can easily access them at all times.

Neopets images

There are many places on the site you can find images that you could use in your graphics. Neopets itself offers quite the range of desktop backgrounds, then there's plot comics, wearables and colouring pages which are also great sources for images. If you feel lazy you can also check out some sites with PNG renders, which are images with the background removed. Below I have listed every place I could think of or know about. Another great source for images is the Dr. Sloth image directory, which basically lists all images you can find on the site. As they are tagged for different categories, it will really help you find images that you would otherwise not come across or would spend ages looking for.



Brushes/Textures/etc

On neopets, you will not find that many great graphic resource sites. The majority focusses on web resources (i.e. bullets, button place holders) and although that's totally fine, these are not resources I personally use. I tried to gather some sites that offer a bit more, but I honestly couldn't find any. So, I hate to say it, but on neo I can only recommend my own site Details. I will be on the look out for more pages though!

If you are willing to go off site, the place I rely on the most is dA (neopets will not let me post the full name, so I hope you know what I mean). Blalala Lijstje...

Fonts

I get 99% of my fonts from dafont. They have a great, free selection of fonts. Others I found by looking for lists of free fonts. You will want to look for some serif and non-serif fonts, and some fonts that are more decorative. For example, swirly fonts or very bold fonts. Try to get yourself a nice selection of fonts that varies in style, so you'll always have a font that matches your design. I've listed some of my current favorite fonts below.



Patterns

I currently only use subtlepatterns for my patterns. They have a great selection of patterns, that are all -suprisingly- subtle. I prefer the really simple ones, that are barely there, but still make my backgrounds a bit more interesting. I open the image in photoshop and then go to Edit » Define pattern. Doing that will add the pattern to your pattern library and you'll be later able to use it through Edit » Fill (select Pattern) for example.

Gradients

I mainly use gradients for recoloring. It's definitely not hard to make your own gradients, but sometimes it's just easier to grab a premade set. I suggest going to dA and just search for "gradient" in Resources & Stock Images. The ones you'll find are all great and many of these I use.

Coding

Look, I code all my layouts from scratch, but sometimes I forget how to, for example, style lists and I have to look that up. My favorite site is w3schools, it's clear and complete. On neo, I personally really like this page, which is a code reference page, much like w3schools. Then there's CSS|Guide, that is basically a reference guide for all things neopets. And lastly I recommend the resourceful CSS guide, also a code reference page.

Web resources

Web resources are small graphics, such as bullets, button place holders and dividers, that you can use to style your site. I used to offer quite some web resources on details, but removed them as I felt they didn't really fit with the other content and I needed to free up some petpages. So I have decided to put them up here as I think they will be a nice addition to Lore.

I'm not going to be difficult if you decide not to credit me, but I would really, greatly appreciate it if you do. Please credit my UL (nienkju), as I tend to move sites around sometimes.

Bullets




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-2017.
® 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