Welcome to the extras page of Nienke's Premades and Details.

Here I'll post all the content I've made that didn't fit with my other sites. The things you can find here are layout templates, tutorials, my complete FAQ, extra coding help with my layouts, the site's layouts archives and info about the sites and me. Enjoy!
09 july

Just fixing stuff

Gaaahhh... I'm still trying to get everything to work again. I do always keep my PSD files of all the layouts I make, but I delete the separate images. And that's what makes this so time consuming. I have to make a perfect tiling background, I have to find out how I cropped the layout, what the images were for the navigation etc. It's annoying, that's for sure.

I actually thought I would exceed by bandwidth last month and when that didn't happen I assumed everything was fine (because I had already deleted a fair ammount of large images from the account). Yeah... I was wrong. Ah well, it's not that big of a deal. It's not like all my images are not working right now. But I feel kind of bad because it was the account I used for requests and if it were only the premades or my personal images, I wouldn't have cared.

Anyway. Since this page was such a mess (almost all images you see here were uploaded to that account), I decided it could use a new look. I didn't really alter the coding, so I just added another image and used a different color scheme. And yeah... it has a faerie in it. And different shades of a pinkish red, so I'm happy. I also changed the title from "Nienke's Extras" to just "Extra". Typography wasn't working with me today and I figured this is just easier.

Not all images on this page are working right now, but I the majority is back up. I'll upload the rest later, this isn't the most important page to fix anyway.

So now I'm off to fix some more things. And to try not to think about how I never saved the coding for the newest template and then used the petpage I coded it on for something else -yay I love recoding petpages oh no I don't-
03 july

So many ideas...

Wow, what a few good nights of sleep and a cup of coffee can do for your mind. In the last few days I finally got to working on those layout requests and now the last one is almost done! My main goal for summer break is to relax and for me the best way to do that is creating a bunch of graphics. Of course that's not all I'm going to do, haha. No really, that would be a bit sad, wouldn't it?

Anyway. While thinking about what to do with the last request, an idea sprung to mind. A while ago I tried to find programs that can extract PNGs from flash files, so I could make PNGs without having to trace them. Guess what, I found a way :D I'm currently storing them on this page, until I know what I want with the layouts for Details' content pages. I'm going to devide them over two petpages, that's for sure. There are now over 200 PNGs on that page (yes, I've already added about 120 new ones) and I don't think many computers will like that.

I'm also working on some smaller recources, like bullets, dividers that stuff. I also still have a lot of photos that would make great textures... Hmm... I'm also thinking about making more templates, maybe some tutorials. So many ideas... I'm going to forget about half of them ;p

Well, keep an eye out for updates, because I think there are going to be quite a lot of those. Unless I find something better to do ;P
04 june

About tutorials etc.

I've finished the tutorial I was talking about in the previous blog entry. It's called Design progress: heavy textured layout. Very fancy. Basicly, I just show you what I did to make the blend I used for this layout. I still need to add a few minor things, but it's 95% done. Well, I hope you find it useful. I always like to see how others make their layouts.

Ignore the grammar and spelling errors, my brain is completely fried. Bio-informatics... I don't know who came up with it, but I don't think we could ever be friends.

Anyyyhow. The next days I'll be working on the requests I've gotten. That's my neo-priority for now. I might get distracted and add some other small things, or maybe I won't add anything at all. I wish I was a bit more predictable sometimes. Well. I'm certainly not going on an Altador Cup hiatus, that's for sure. I don't get what people like about the AC. At all. It doens't really appeal to me, except for the graphics. I always like graphics. And I like Mirscha, she's cool. But yeah... I've played like five games of yooyuball and it made me want to trash my laptop. Man. It is so pointless and silly. I wish TNT would come up with something different and challenging (not like the war, that wasn't much fun either)...

Okay, I really needed to say that. I've asked my little brother a thousend times what it is he likes about the AC, but he couldn't (or wouldn't?) tell me. Maybe it's like this huge big secret everyone is hiding from me and I'm missing out big time haha. Nah, I find that hard to believe.

Oh and if you want to suggest a tutorial, go ahead! I like writing them, but I have no clue what people want to read. I already got asked if I wanted to explain how to use the pen tool, but I'm still not sure if I could write a complete tutorial on that...

That's it I guess...? Um... yes. Oh if you're looking for new great music and you like a bit different. Everything Imogen Heap. Oh and Two Door Cinema Club, nice too. That's pretty much what I'm listening to right now.
30 may

Layout Requests

I've been wanting to take layout requests again for quite some time now. But I actually never felt like preparing for it. It would mean having to change up my rules, form and I would have to write an explanation. Yes, an explanation, because I feel not everyone will understand when I'm going to pick the requests I'm going to take myself, instead of always taking the ones I get first or picking them at random.

Is that unfair? I don't know. Fair is a subjective and vague concept. But I can tell you this. I don't get anything in return for making people layouts. This doesn't mean I don't enjoy it, I love it actually. It's why I take requests in the first place. However, when someone only uses the layout I worked so hard on for one week? Well, that hurts a little. And that doesn't seem fair to me either.

That's why I want to take matters into my own hands. I will keep requests open for a certain time, a few days or hours, depending on how many requests I receive. Then I'll go through all the requests and I pick the one that I would like the best to make and that I feel deserves it the most. This means certain sites will have an advantage over other sites, but this really shouldn't discourage you, I feel like everyone still has a fair chance.

So what factors will help me choose? First, I'll look at your request. Can I work with that theme? Is making a layout for your site going to be a fun challenge? Then I'll look at your site. How long has your site been open? How often do you update? Do I think your site might close in the near future? Did you recently request a layout from someone else? Etc, etc.

Well, that's it. That's how it's going to be. I'm actually really happy that I can take some requests again. I really like to organize things, haha. It's better than creating premades. I hope you understand why I'm changing things up (to make the whole progress more enjoyable for me, if you didn't get that yet) and if you don't... Well, I'm sorry that you're disappointed, but I really want to take requests my way.

Now, let's hope that I can find the time to take requests every now and then ;) Oh and stay tuned for a new tutorial!
26 may

Revamped! (finally)

Welcome to the completely revamped and renewed extras page! I've made a new layout and most important, I've reorganized everything. The coding on this one is pretty fancy if you ask me, haha. Of course the navigation doesn't work in Internet Explorer, but don't worry, you can also navigate around this page without the navigation hover effect. It's just less efficient and cool. But yeah, you shouldn't be using that browser in the first place.

If you look at the navigation, you see I've added a lot of catagories for both templates and coding help. Well... don't get too excited, because that content doesn't exist (yet). But I'm hoping I can somehow make/write it.

For the other changes, I've mostly change the organization of my pages. Especially the tutorial page looks really different now. I've moved the archives to the about pages. Of course I had to rewrite the about Nienke part. Oh and last but not least. I've written the other part of the Texturizing and recoloring tutorial about recoloring. It's now really, really long haha. It took me ages to write, but I think it's pretty much complete?

Anyway, it took me a whole day to transfer only half of the content. I started this revamp three months ago, so I don't really recall how long it took me to transfer the first half, but I recon it was about the same. I realised that's why I'm updating my sites so little, it just takes up such a huge part of my time.

The other problem is that I'm really tired most of the time. This week is an exception. I haven't been doing much else than sleeping because I was sick. I haven't had this much energy in months and it really gets the creative juices flowing :) But yeah... I don't think I could ever manage to be as active as I was before. And I don't think I'd want to. That being said, I will update when my schedule allows it.

Templates

Read these rules before using my templates please.

Leave the credit on the template.

You are not allowed to use these templates for premades or for layout requests (when you own a layout requests site). I believe that when you want to make these, you should be able to code your own layouts.

You are not allowed to redistribute any of these templates.

Read the instructions on the template itself before neomailing me with any question about the template.

Of course you are allowed to change the template in any way you wish, you can even edit the banners I've made, as long as you keep the credit. But you can also decide to change nothing and just use it the way it is.

Petpage layouts

Hey Now

Fixed banner and navigation

The layout is anchored

Works in FF, IE, O, S and GC




Counting stars

Centered in all resolutions

The layout is anchored

Works in FF, IE, O, S and GC




Bluebird

Centered in all resolutions

The layout is continuous

Works in FF, IE, O, S and GC




Faerie Fantastic

Centered in all resolutions

The layout is continuous

Works in FF, IE, O, S and GC




Dreamer

The navigation is fixed

The layout is continuous

Works in FF, IE, O, S and GC




Daylight

Centered in all resolutions

The layout is anchored

Works in FF, IE, O, S and GC

Pet lookups

Simple

Centered in all resolutions

Transparant border

Works in FF, IE, O, S and GC




Reversed

Centered in all resolutions

Transparant border

Works in FF, IE, O, S and GC




Clever name here

Centered in all resolutions

With header and footer

Works in FF, IE, O, S and GC




Clever name here

Centered in all resolutions

Transparant border

Works in FF, IE, O, S and GC

Most asked

Do you take requests?
Only when the signs on this page say so. Do not bother to ask me this otherwise. Way too many people have asked me this question before and honestly, it's getting very annoying.

I can't find/click the save button on one of your petpage layouts.
This is not a mistake in my coding, you can still easily save the layout. Try this page to learn how.

Can you help me with my coding problem?
Yes, of course. Show me the layout and tell me exactly what's wrong, so I can try to fix it. It might take me a while before I actually take a look at it, since I'm quite busy at the moment, but you can always try me.

Coding related

I want to change something to your layout/I have a coding question about one of your layouts.
Then take a look at my coding help. It's a list with questions about coding issues people come accross when they use one of my layouts. If the problem isn't mentioned there, try mailing me.

Can I use your codes for my own layout?
Only if the layout is for personal use, so no premades (or requests when you own a request site)! Also, please leave the credit. Of course, you do not have to worry about the credit on the image. If you change the image, you don't have to credit for that, but you do have to leave a link back to this page.

Can you teach me how you make/code your layouts?
No, sorry. That's just way too complicated and I think that honestly the best way to learn coding is to learn it all by yourself. I'm also not very familiar with the current coding help sites (the one I always used closed a long time ago), but I really like this one. It isn't so much a guide, but I find it very useful. This blog is also great for more advanced coders.

Will you code the layout I've made?
As I said, I do not take requests and this is one too. So the answer is NO. Coding a layout takes a lot of time and I currently am way too busy to start coding other people their layouts. Sorry.

Can you explain how you did that hover effect for details' navigation?
I'm going to write a tutorial on that soon!

Graphic related

Where do you find the pictures you use in your layouts?
All over the site! But mostly here and here. You can also use images from plots (The Curse of Maraqua, The Faeries' Ruin and The Tale of Woe are my favorites!) the advent calendar, wearables (If you're too lazy to look for them yourself, this is a great page with all backgrounds) and caption contests.

Where do you find your backgrounds?
Most of the patterns I use for my backgrounds are, as you can see in the credits section, from 77words at livejournal. Subtlepatterns also has great ones. By the way, taking their patterns, recoloring them and then putting them on your site... that's just stealing people. Recoloring isn't much work at all, so don't act like it is. I felt like I had to mention it, because a lot of "big" sites have been doing this. I find this really sad and even kind of pathetic. How could you be proud of your site if you offer content like that? That being said, don't take patterns from neo sites unless you're sure they were really made by the site owner. Otherwise you're using stolen content.

What programs do you use?
I use Photoshop 7.0 CS5 for the graphics (also for button animations). For finding coordinates for coding my layouts, I use Paint. Also, for some of the textures, I've used apophysis, a fractal program.

What fonts do you use for your buttons?
The pixel fonts I use are 048_24, 04b_03b, Bangalore, Handy00, PF Tempesta Five and Silkscreen. There aren't really any non-pixel fonts I recommend, because it really depends on a lot of things whether a font works or not. If you want to know which font I've used for a specific button, just mail me and I'll look it up for you!






Tutorials

Please read my rules first before proceeding to the tutorials.

Please give credit if you've used my premade coding. For the other things, credit is not mandatory (but appreciated!).

You are not allowed to copy or distribute parts of my guides/tutorials. With parts I mean the actual tutorial itself, so the coding is there for you to take.

Do not use my coding for premade layouts. When you offer premades, you should be able to code the layouts yourself.


All graphic tutorials were written for Photoshop. I don't work with GIMP, so please try to approach someone else if you have GIMP related questions.

While I used Photoshop 7.0 when writing most of these tutorials, it doesn't really matter which version of Photoshop you use. I now use Photoshop CS5 and I've never experienced any major differences.

Coding tutorials


Using fixed elements
You might be wondering why I don't use position:fixed, as it's obviously the easiest way to make an element appear fixed. Well not all browsers support this feature. I just looked it up and it seems that the newest version of IE does support it, but I remember that older versions don't... (read more)

Anchored petpage layouts
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. (read more)

Coding tips
I always get a lot of questions about coding. How I learned to code, how to code this, 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. That's why I decided to give some tips. (read more)

Photoshop tutorials


Texturizing and recoloring
When done correct, both textures and recoloring can add a lot to your layout and make it from just OK to a great layout. However, it can be quite hard to get it right, because not everything works that well. This is a short long guide on how I texturize and recolor my images. (read more)

Design progress: heavy textured layout
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 progress of a heavy textured layout and hopefully you find it useful! (I do suggest you read this tutorial first) (read more)

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. (read more)

Making a perfect PNG/PSD
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. In this tutorial I'll explain how I make and edit my PNG's. (read more)

Button tutorials


Design progress: making a button
A few people told me they really liked to see my design progress 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. (read more)

Cropping and resizing
Buttons should always be 88px wide and 31px high. No exceptions. 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. (read more)

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. (read more)

Using actions for animations
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! (read more)

How to: Shine animation
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. (read more)

How to: Sparkle animation
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. (read more)

Coding help

No, this is not the place where you go for all your general coding tips, sorry. These are all short solutions for coding questions you can have about my layouts. It's some sort of a coding FAQ!

If this doesn't solve your problem, you can always try to mail me. Do remember that I don't respond very often to my mail.

Userlookups

How do I make the userinfo images on my lookup visible again?

Look in the source code for #userinfo img. The part you're looking for will be either this
#usershop img, #userinfo img, #footer, #header, #userneohome, hr, #ban, #habitarium, .brand-mamabar { display: none; }
or this
#userinfo img { display: none; }
In the first case, you have to remove the bolded part, don't forget the comma. In the second case, you can remove that whole code.

If you want to remove only your shield, you can put this code between your style tags
#userinfo .medText img {visibility:hidden;} #userinfo .medText table table img {visibility:visible;}


How do I make a certain module (like the usershop or habitarium module) visible again?

The removal codes are (almost) always at the top of the code. If you can't find it, you can search for display:none.
#footer, #header, #userneohome, hr, #usershop, #ban, #habitarium, #ncmall, .brand-mamabar { display: none; }
The red parts are the ones you can remove to make your modules visible.

#userneohome is your neohome module,
#usershop is your shop and gallery module
#habitarium is your habitarium module
#ncmall is your nc mall module

Do not forget to also remove the comma's

If you're having trouble making the modules fit, then continue to the next question.

How do I make the modules fit with my layout?

When you want your shop visible for instance, you could have some trouble fitting the modules in the text box. This is most of the time because the module is too wide. It's really easy to change the with of your modules.
#usershop {width: 150px;}
This is an example of how the code for adjusting the width of the usershop module would look.

To change the width of other modules, just replace #usershop with the right name.

#userinfo is your userinformation
#usercollections is your collections module
#usershop is your shop & gallery
#userneopets are your neopets
#userneohome is your neohome module
#usertrophies is your trophies module
#habitarium is your habitarium module
#ncmall is your nc mall module

What to do if you can't make the modules smaller? You can change the size of the images it contains (see next question), but you can also change the size of the text in the module.
#usershop {font-size: 8pt;}
You can change the font-size for other modules, by just changing the name. You can also change it for multiple modules like this:
#usershop, #usertrophies, #userneopets {font-size: 8pt;}
If all that didn't work, you might have to think about chosing a different lookup with a larger textbox.

How do I make the images larger/smaller?

Trophies: If you want to change the size of your trophies, you have to look in te code for #usertrophies img. The code usually looks something like this
#usertrophies img { width: 50px; height: 50px; }
Change these numbers to change the size of your trophies. The original size of a trophy is 80x80px, making the images larger will make them blurry.

Neopets: If you want to change the size of your neopets, you have to look in te code for #userneopets img. The code usually looks something like this
#userneopets img { width: 120px; height: 120px; }
Change these numbers to change the size of your neopets. The original size of a neopet img is 150x150px, making the images larger will make them blurry.

If you want to resize images in other modules, copy one of the code above and change the name to the right module. You can find the complete list on the left (previous question). Here is a list of the default sizes of the lookup images:

Userinfo: 40x40px (shield is 100x150px)
Collections: Almost all 75x50px except for the avatar which is 50x50px
Shop/gallery: 150x150px
Neohome: 150x150px
Shop/gallery: 190x114px
Nc mall: 80x80px

About Nienke's Premades

To be completely honest, I can't remember when I opened my site. That's because it wasn't really a site when I opened it (and because it was over 5 years ago). It was just a place where I stored some graphics I made using paint. I didn't expect it to be big, or to be viewed actually. I remember how thrilled I was when my counter hit 100 views.

It must have been around January 2007 when I opened Nienkju's Graphics, because that's when I opened my first photobucket account. The things I offered were mostly some lame banners and icons, but also some premade lookups. They weren't real beauties, because I used paint to make them. Honestly, I used someone else's code to make them. I don't remember where I got it, or if I even gave credit. I hope I did. It would be really stupid if I didn't... Anyway, here are two of the lookups my site used to offer. Aren't they lovely?


I can't exactly recall what happened after that. I know I got photoshop and my graphics started to improve. I also started to learn how to code layouts by myself. The changes also included a lot of name changes. As you can see on the left, I've changed the name of my site numerous times. Here are some things I made around that time.


In the meantime the site had grown quite a bit. Next to userlookups it now also offered petpage layouts. I removed all the graphics and decided to make it a premade layouts site. The site started to receive some real traffic the day I won the userlookup spotlight. I think that's the day I realised that my site could be serious business (haha).

I started to extend my site again and added guild layouts. Later I also added a resources division, which is now Details. Around May 2010, I was asked to work for SunnyNeo as a graphics maker. I decided to do it, but that also meant I couldn't work on my site anymore. Here you can see a part of my first news post there:


In the time I worked for SunnyNeo I added quite a lot of layouts: 3 lookups, 1 guild/shop layout, 2 guild layouts and 13 petpage layouts (which is 30% of all petpage layouts they offer at the moment).

After I've worked there for half a year, I decided I wanted to start working on my own site again. I talked it over with Marleen and we decided that I would semi-quit SunnyNeo, but still at a few layouts every now and then. I changed Nienkju's Premades into Nienke's Premades and started to revamp the complete site and it's content. Here is my update from the day I reopened after my hiatus.


I was like this for a few months, but after a while I stopped with making new layouts for SunnyNeo. About three months later I quit so I could focus on my own site.

After numerous revamps the site has become what it is today. I'm quite proud of the amount and quality (I know you're not supposed to say of your own creations, but I know I put a lot of time and energy in every layout, so I think I can say that!) of the layouts Nienke's Premades now offers. Seeing the site ranked on other sites is also great. I've put a lot of time in the site, but I also get a lot back. It's great to see people appreciate my work, even now that I'm less active than I used to be.

Layout archives

1. I'M A WINNER - This is the layout I made during my hiatus. This is the first layout for the site I still like. It's pretty simple, the main page didn't really have any content on it back then, so I didn't need more than this. I should have recolored it a bit though...
2. DANCE THE NIGHT AWAY - I made this layout when I decided I was going to work on my site again. It was way more proffesional than all my previous layouts. I used the pen tool to make the kyriis (the original image is very small), which took me ages. What I like most about this layout is the color scheme.
3. JUST LET GO - This layout is very similar to a layout I made for my guild. I liked the idea so much that I wanted to use it again for my site. I love how the main image turned out. I'm not a big fan of the css though. It was a bit too white. But I still like it, it's a bit different from everything else you see.
4. ALL THE RIGHT MOVES - I'm still pretty much in love with this layout. Again, there was a lot of movement, but I also like the textures. The whole layout had this old look, but it didn't look dirty. I also think it looked very classy. This definitely one of my favorites.
5. MEMORIES - Even though this layout was very pink, I really liked it. What I liked most about is, is how the image fitted around the textboxes. The css was a bit boring, but the imagery made up for that.
6. LAST MAN STANDING - This is one of the layouts I didn't really like. It just didn't fit my site. I still really like the imagery, all the motion and effects. The box was just to small for my site and it didn't feel like... a proper welcome.
7. SOMEWHERE ONLY WE KNOW - This layout was really peaceful, with the blue colors (yes, blue colors work relaxing, it's true) and the meditating nimmo. I really liked the lillies at the bottom, they made the layout instantly more interesting. The textures also worked really well.
8. SUNSHINE - It took me ages to come up with this layout. I wanted to make a new layout before Rika started to review my site, but nothing worked out the way I wanted it to. After a whole day making layouts, I came up with this one. I still love it. The bright colors make the layout so happy and sunny and shiny.
9. COLORDROPS - The PNG I used for this layout was a PAIN to make. It took me about 3 to 4 hours. This was about the time I discovered the Gradient Map Adjustment layers. I really love the coloring, it's very different from the original image, but it still looks natural.
10. DREAMER - The image of the sleeping faerie is actually a coloring page. I colored it using the pen tool. I love the dreamy look this layout has, it fits perfectly with the images. Though I wish I would've spent a bit more time coding it. It could've been a better layout.
11. SILENCED BY THE NIGHT - It took me really long to make this layout. I really loved the base image, but I didn't like how the layout as a whole turned out. I thing it was a bit too purple for my taste. I'm still thinking of a way to use the base image for a premade.
12. THE LIGHTNING STRIKE - I really disliked the previous layout, so I felt like I had to make a new one. I wanted to make something simple, but not plain and boring. I really like this layout, the only thing I didn't like was the navigation.
13. TROUBLE - This layout took me ages to make. I just couldn't figure out where I was going to leave all the modules. I think it turned out pretty good, though the placement of the modules started to bug me after a while. Also, some of the text was quite hard to read because of the text...
14. TINY LITTLE FRACTURES - I just had to use my favorite faerie for a layout. I still really like this layout. It is really different from what you usually see. It's also the first dark layout I've made for my site. And I've even made almost all the resources used myself (only the brushes are from swimchick).
15. I'LL BE YOUR BREEZE - I've always love this image since the first time I saw it. It's so delicate. I wanted to make a new layout for spring and I thought the image was perfect for it. I love the coloring, but other than that, the layout was a bit boring for my taste.
16. DON'T MISTAKE MY OPEN ARMS... - When I started working on this layout I had a few things in mind: it had to be grungy and I would not use a faerie or girly image. And this is the result. I still like it, but it has been up far too long (about half a year I guess), so certain things about this layout really bug me.
17. SINK IN - The layout that is currently up. I like that it's something different. And I like to use triangles in layouts. And a lot of colors and textures. Everywhere. So I guess this layout is a win win.

About Details

My resources and graphics site has been around for quite some time. I can't exactly remember when I opened it, but I think it was around January 2010. It's now called Details, but it used to be Nienke's Resources.

Nienke's Resources started out as a division of Nienke's Premades and was more some sort of dump for my resources. I only used to offer textures, stock images and brushes.

The layouts were usually very simple, because I never saw it as a real site. As more people started to use my resources, I started to make more content. More textures, more stock images and more brushes. But also new resources, as PNG's, icons and button bases.

Looking at these pages made me realise that it was becoming a lot of content for "just" a division. So I started to think about turning it into an actual site. When the layout started to bug me more and more, I decided that I would revamp Nienke's resources into a real site.

I started to think of a name. I thought "what are my resources?". Well, I think they are the little details for other people their layouts and sites. The little bit extra. Since I wanted a short name, I instantly liked the idea of that name, Details.

I made a layout, and then I changed it. And I changed it again. I coded all the pages and put up all the new content I had made in the meantime. After a while, the layout started to bug me and I just left it for a month or so.

After that month, I started to work on Details again. I made new layout and determined to finish my project, I worked on it for a week. In february (2012) I finished it and made Details public to the rest of the site community.

It now even has it's own homepage (that's mostly because before that, if I wanted to change something in let's say the welcome message, I had to change it on 5 pages and that was really annoying) and takes up 6 of my petpages. Details has become one of the largest resources sites in the neopets community and I like to think it's the only site that focuses on real graphic resources (like textures and brushes) instead on only bullets and icons.

About Nienke

Hey theeere! So, uh, yeah. My name is Nienke and I'm a 20-year-old student from the Netherlands (it sometimes really surprises me how many people don't know what that is? Holland, Amsterdam, ring a bell?). That's NST+9 if you were wondering. When I write in English, I like to use a lot of words like so, but, yeah and I guess. Ha, because that's how English sounds in my head. So if that annoys you, then do not continue reading ;)

I have a strange sense of humor, but yeah... I do like to make people laugh. I talk a lot and really fast and I'm quite easy-going. I can be shy though. I would say I'm a nice person, but on neo I sometimes feel like I come of as arrogant, because I never answer my mail. Well people, that's because I'm too nice, I look at your mail and I think and think about what I should say and then I just close it, because I don't know. I only know so many ways to say thank you, so yeah... On top of that I have procastination issues, like... it happens every single day. Life's tough yo (haha, no I'm very fortunate, shouldn't complain).

I like to do quite a lot of things, don't have many favorites though. I hang out with friends, I shop (maybe even a bit too much, you know, like it won't fit in my closet anymore), I listen to music, I create/design things, I watch tv shows etc. People always ask me why I'm not studying design or art or something, but it's just a hobby. I like sience too. This year I'm following some courses on disease (really horrible diseases) and cures, but I used to only study microbiology.

I like to draw and I have always enjoyed it. But never really seriously, I'm not patient enough I guess. I did manage to finish these drawings/paintings below. I'm planning on practicing more, but I haven't done it yet.

Daenerys from Game of Thrones, a sloth and some doodles

Um yeah. Favorites. I tend to listen a lot to indie and stuff. I'm not one of those people who hate mainstream music just because it's mainstream, it's just not what I like. Some of my favorite artist aren't really indie too. I love Imogen Heap, Andrew Belle, Keane, Trend Dabbs, Greg Laswell, MS MR etc. My favorite tv shows right now are Hannibal, Game of Thrones, Dexter, New Girl and many more. My watchlist includes 20 shows hmmm... I sometimes game, but not too much (OK, more than I would like to admit). I really like the wii Zelda series, Okami (=love) and Skyrim.

Oh my guinea pigs are my favorites too! We've had guinea pigs for ten years now, but these are really the craziest piggies we've had. The left one is called Elmo (he's an old little man, 7 years already) and the one on the right is called Puk (he's our little tigger, he's 4 or 5? mmm don't remember).


Okay, what I don't like. I have this great aversion to people who don't give proper credit (in general, not just credit for my stuff), but I try not to bother too much. I don't like the Dutch weather. It's always raining. And when it's actually sunny, I pretty much can't live, because I'm crazy allergic. Meh. I don't really like my job, but it earns me greaaaaattt money :) I don't like plain bread, yuck. And what I really don't like is being bored, my mind doesn't handle boredome that well (ugghhh lectures). Oh and stress. I don't handle stress well at all.

Well, that's all I guess!

Fixed elements

You might be wondering why I don't use position:fixed, as it's obviously the easiest way to make an element appear fixed. Well not all browsers support this feature. I just looked it up and it seems that the newest version of IE does support it, but I remember that older versions don't. So if you want to make sure your layout works for all browser (versions), then you can give this solution a try.

Before I explain how I code it, here is the code I use:


Basicly, what you do is creating a scrolling and a non scrolling layer. The body is set to overflow:hidden so it won't scroll. Then I've coded a div "#box", which will scroll. Because I've made the width and the height 100%, you won't see it's a div.

Everything put before the div, will appear as if it's fixed. Everything in the div will appear normal.

Make sure you work with the right z-index, because otherwise your elements won't overlap the right way. The z-index is a simple number that indicates in which order your elements will appear. If your image for example has the z-index 2 and your textbox has 4, then your textbox will appear over your image. The fixed elements should have a higher z-index than your non-fixed elements when you want them to appear on top. If you want them to appear below the non-fixed elements, you should make ze z-index of the fixed element lower than the z-index of the non-fixed element. Z-index can also be a negative number. Be careful though, if you put links in an element that has a negative z-index, they won't be clickable in all browsers.

Now you can create fixed elements, working in all browsers. Be careful with fixed elements though. Don't make them to long or place them to low, because then people with smallers screens won't be able to see the whole thing. Also, don't make them to big when they're covering some of your text up, because that's really annoying if you're trying to scroll or read the text.

Anchored petpage layouts

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.

Texturizing and recoloring

When done correct, both textures and recoloring can add a lot to your layout and make it from just OK to a great layout. However, it can be quite hard to get it right, because not everything works that well. This is a short long guide on how I texturize and recolor my images.

Remember
Everything mentioned here is my opinion, which means there is a chance you don't agree with me. This is just my vision on designing. No, I'm not educated to do this, but I think I've developed quite the feeling for what looks good and what doesn't over the years.

Also, I only work in Photoshop CS5 (7.0 in the past). Other versions will have similar but mostly the same options. I do not use GIMP, I've used it once and I hated it (because I'm so used to photoshop I should add). If you want to ask me a GIMP related question, try to find someone else who does work with the program and knows how it works. I really can't help you.

Before you start
Prepare your base! I usually like to first build the layout, create a general set-up and decide where I want it to go. Of course you can start texturing like crazy, without deciding how you want your layout or graphic to look. Though I find this will lead to sloppy mistakes. Adding textures and recoloring are for me usually the final steps in creating layouts and graphics.

Texturizing

Where to find textures
There are a lot of sites that offer textures. Swimchick for example is one of my favorites. I also find a lot of the textures I use on deviantart. Monxcheri (dA) offers some great bokeh textures. On my site Details you can also find a wide range of different textures (bokeh, light, abstract, fractal etc). If you want to know where I get all of the other textures I use, then go to the credits section at Nienke's Premades.

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. A lot of people don't get that, but dA didn't make those textures, the users did.

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 focus on darker colors and shades, while Lighten, Screen, Color Dodge and Linear Dodge focus on the lighter colors. 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. This will also be explained later (in the recoloring part).

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 third example of bokeh textures below, set to screen). 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 colorful 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
There are a lot of types of textures, I'll name a few. (Hover or click the texture to see where I got it)

texture by monxcheri at Deviantart

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 Swimchicktexture by Swimchick

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 Swimchicktexture by Moonchilde-stock at DeviantArt

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 DeviantArt

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 Swimchicktexture by Swimchick

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 Anliah at DeviantArttexture by Swimchicktexture by Swimchick

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.

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. For example, in the image I used to create this layout, the faerie had green eyes and a bright pink flower in her hair. The rest of the main colors where yellow for her hair and blue for her tail and body. I felt like the green and the pink clashed with the yellow and the blue, so I recolored the image and took out the bright pink and the green. Having to many colors going on in a layout will make it look messy.

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. 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 progress.

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 so 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 black 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 creat 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.

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

I chose this draik image (which you can find here) to work with. I'm only going to use the pink draik, so I've cut it out. I've uploaded it as a PNG file for the people who are too lazy to cut it out themselves! Save the image on the left to your computer and open it in Photoshop. Of course, it has been scaled down... a lot.

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.

Paste the image (the PNG) in the new file (CTRL+V). Make a new layer beneath this layer and fill it with this color: #9269FC. It's a purple color from the draik. 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 left, so I've placed the image on the right.

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. But this time I'll use the end of the tail.

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.

Well, let's start with the first ray. Start your path at the very end of the tail, follow the tail and her body. Here is an example of my path.



The first image shows the "importan part" of the path, the second image shows how I closed the path. Don't just close the path, but make sure there is enough space for you to work with. When your happy with your path, click "load path as a selection".

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 use a 200px soft round brush. Make a new layer directly beneath the draik. The color I chose was the lighter (non-shadowy) pink from the spots on the wing.

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



Then select the Eraser (E) (Soft round brush, doesn't really matter which size. Something 100px-200px will do). Now gently erase a little part of the end of the ray. I do this because the end isn't really smooth. In this case you can't really see this very well (you have to zoom in a lot), but sometimes it's very obvious and that just looks sloppy.

I didn't change the blending mode of this layer, because I like the way this looks. Now we're going to create some more rays. I will make these just like the first one, so I'm not going to explain how I made them. I will, however, tell what color I used and on which blend mode the layer was set. Remember to make a new layer for each new ray!



Black and white are great for making rays. I always set them to soft light. You can also make solid rays instead of these gradient rays. I'm not going to use them for this layout, but I'll show you how the path of a solid ray looks:



This one ugly example, but believe me, it looks way better when you use it in your layout! Fill this ray with a solid color. To do this, click "Fill path with foreground color". Of course, you first have to set the right foreground color.

Step 04. Color bubbles
When making these rays, I always add color bubbles. You could also stick to white bubbles, to give the layout a bit more sparkly effect. I usually make these bubbles around the focus point and otherwise I would place them somewhere near the arms or the face. Be careful with your placement tough, if you place them in the wrong place, the outcome could be very weird. Just don't make them come out of some neopets' mouth or other body parts (if you know what I mean?).

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



Now I'm going to create some other cirkles, but now I'm not going to fill them with a solid color, I'm only going to stroke the path. Select the Hard Round 1px brush, create the paths and the click "Stroke path with brush". If it doesn't create nice smooth line, you have to undo it (CTRL+Z). Right mouse click and select "Stroke path". The tool should be "Brush" and "Simulate Pressure" should NOT be selected. I only use black or white for these cirkles and I set the Layer blend mode to Soft Light. In this case I used white.



Step 05. Texturing
I ALWAYS use textures on my layouts. Most of the time I use my own textures or swimchick's textures. For a more extensive guide on how to use textures, click here.

For these types of layouts I mostly only use light textures. I do this because the layout itself is already very detailed with all the bubbles an the rays. When you use a texture with too much texture (like grunge textures), the layout will become too busy. So light textures are great textures when you want to give your light something extra, but you don't want to over do it.

Because the layout is purple/pink, you have to look for textures that fit with these colors. The textures you can use are mostly red to blue textures (with all purples and pink between the red and blue). Blue will emphasize the purple and make it more... blueish. While red will emphasize the purple and the pink and make it more red. These are the textures I'm going to use:

texture from Swimchicktexture from SwimchickTexture made by me


Let's start with the first texture. Copy and paste it into your file. First I set the layer to soft light. I liked how it looked, but when you want to make this into a layout, you have to make sure that you can actually make a background for your layout. So I set the layer back to normal and select a Soft round 200px brush. I used the Eyedropper tool (I) to select a color, for the left side I used the light pink/purple color and for the right site of the layout I used the dark purple color.



This is what the texture looked like when I was done (it has been scaled down, drag and drop to view full size). I removed a lot. As you can see, the parts that I didn't change where around or on the draik. I've set the layer to Soft Light and the Opacity to 50%.

Now copy and paste the second texture. I decided I was also going to set this layer to Soft Light, but first I was going to remove a lot.



As you can see, I've again removed a lot of the texture. I've set this layer to Soft Light (opacity = 100%).

Now I'm going the last texture. I really love this kind of light textures, because they're really simple, but they give your layout this little bit extra. Copy and paste. Set the layer mode to Screen.



And again, I erased a huge part of the texture. When using these kind of light textures, you don't want the little light spots all over your layout. Only leave some near and on your main object. Also, make sure none of them cover the face. Never ever cove a face with a (very textured) texture. Because then it will look like your main object has some really bad acne, you don't want that.

Step 06. Coloring
I always edit the colors (just like I always add textures). Not always as much, sometimes you wouldn't even say I changed them. But I think it makes layouts look much better, you can make the colors look more vibrant, making the whole layout a lot prettier. Most of the time I use Selective color layers (Layer » New Adjustment Layer » Selective Color), because with these you can edit the colors very precisely.

I can't really explain how I use the Selective Color layers, I just try things. What I do a lot though, is removing the blue colors from the yellow and sometimes from the reds. This will make the yellows and reds pop. Don't do this when there's a lot of green in your layout though. Also, be very careful with the amount of coloring you add. When you recolor your layout to much, your lines will start to look a bit jagged. This are the settings for my Selective Color Layer (drag and drop to view full size):



You could match your settings to mine, but you could also try to recolor the layout yourself. Do not click "OK" before your done with all the colors you want to edit. I've set this layer to Lighten and changed the Opacity to 85%. The difference between setting the layer to Normal and Lighten isn't very big, but I just liked it better on Lighten. You could also try to set the layer to color, this can look very good either.

Step 07. The finishing touches
Before you can use this layout as a layout, you first have to add a textbox. Make a new layer, directly below the draik PNG. Select the Rectangular Marquee Tool (M) and make a box. Then select the Paint Bucket Tool (G) and fill your selection with white. Always use soft colors for backgrounds. Most of the time I use white, but you can also use a light color. Of course, you could also use very dark colors. But please stay away from the other colors, since people should be able to read the text without getting major head aches. I've set this layer to Soft Light (didn't change the opacity), so the textbox will be a lilac color. This is an easy on the eyes color, so you can use it for a background. Then I added a border around the textbox. I do this almost always, because... I think it gives this extra distinction between your background and textbox background. To do this, go to your Layers pallette and right click on the textbox layer » Blending Options. Go to the last option: Stroke. Set the size to 1, the Blend Mode to Soft Light and the color to Black. Then click "OK".



This is how my textbox looks. I don't like the square look of the the textbox, so I'm going to give the textbox one round corner (the other one is covered, so you don't have to worry about that one in my case).

I doubt this is the best way to create round corners, but it works great for me. I first zoom in on the corner, so I can see better where to put the selection. Now select the Eliptical Marquee Tool (M) and set the style to "Fixed size" and the width and the height to 50px (You can change this number if you want to make larger or smaller circles. Place the circle in the corner, so it touches both sides of the box (see the first picture below). I use the Fixed size Marquee Tool because if you want to make more round corners, they'll all have the same size. Then select the Rectangular Marquee Tool (M). Set the style back to normal again and select "Add to selection", so you select this buttonthing: ). Now select the whole textbox, but not the corner as you can see on the second picture below. Press CTRL+Shift+I (Select Inverse) and press delete. You now have made a round corner.





You might want to add some extra things. I'm not really going to explain all that. But you could add some brushes, lines and gradients. I've added a pattern background. I've used this pattern (it has been scaled down) from 77words at livejournal. If your looking for some great patterns, you should really check it out (on your own risk of course). I've filled a layer directly above the background color layer with the pattern and then I've set the blending mode to Soft Light and the opacity to 46%. You really have to lower the opacity of the patterns with layouts like this. Otherwise the pattern would clash with all the other objects. I've erased some of the pattern behind the draik. And of course, you could also add your site name. I would place it to the left of the draik above the textbox.

Something I do before I save the image, is sharpen it a little. Go to the layer that's on top. CTRL+A (Select All), CTRL+Shift+C (Copy Merged) and CTRL+V (Paste). Then go to Filter » Sharpen » Sharpen. Now go to Edit » Fade Sharpen... Now lower the opacity (I've set mine to 50%) and leave the mode as it is (Normal). Then click "OK". I think you should use Fade Sharpen most of the time, because when you Sharpen the image too much, the lines will start to look jagged.

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 or a GIF file (JPG looks better, though, most of the time). 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 (you might go a bit lower) and try to get the file size below the 300K (you can see the file size in the left lower corner). With these settings, my file size is 251K. Of course, normally I would crop the image, so the file size would be lower.

This is my final result:

Making a perfect PNG/PSD

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. In this tutorial I'll explain how I make and edit my PNG's.

So to begin, we need an image that we're going to cut out. I'll be using the image below.


I'll cut out Garin, the yellow usul. Note, I suggest you take an image with black outlining, otherwise my little trick won't work. I use the 800x600 background, because I don't need a very big image for the layout I'm making. Also, I think this is a nice example, because something covers his arm.

Open the image in photoshop and select the Pen tool (P). I always use the pen tool to cut out images. I know you could also use the magic wand tool, but I don't like that. It is an faster and easier way to cut out an image, but the result just doesn't look as good as when you use the pen tool (jagged edges etc). You might find it difficult to work with the pen tool. I did when I just started using it. Practice a lot! It's one of the most useful tools in photoshop, so you should know how to use it.

I'll start on the right. 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? Continue doing this 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). 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 your background layer or if you don't have that, create a layer below your cut out image. Fill this layer with black (#000000). I do this so you can see really well which lines you have to adjust. For example, this is what we don't want:



White lines around a cut out image are really ugly. That's why I do this. Now select your Magic Wand Tool (W) 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). 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), like this:



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 an where going 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".



(The image has been scaled down) 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 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. You don't have to save this file as a PSD file, since the difference between your PNG file and PSD file is zero.

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.

Cropping and resizing

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. 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. 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 % of course).

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.

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'll be using this example button and one of my premade button borders:


Unless the border is really simple (like the first three premade borders) I usually use these the premade borders. I'm not saying you should use my borders, but it's really handy to create some premade borders like this for yourself.

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. (drag and drop for full size)


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 on my premade borders page. You can find the corresponding inner border 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.

Using actions for animations

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 ;)

How to: Shine animation

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.

How to: Sparkle animation

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 progress: heavy textured layout

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 progress 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.
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 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 textures. 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, 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, 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, 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 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:

Design progress: making a button

A few people told me they really liked to see my design progress 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 :)

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!



Heads Up! You're about to leave Neopia!

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



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

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



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

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



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

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

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