Tutorial: Composition

[tinyumbrella]

Well this is ironic, considering my go to is mimial, negative space icons! but occasionally i am proud of how an icon looks at the end, and i was proud of this one:

which we're mostly going to talk about. It came from this cap I didn't save the .psd so i'll try my best to recreate it!

1. Background & Colour.

The first thing I did with this one, is resize it, for this particular cap i cropped it to be the width of the cap i wanted to, and then resized that so it was 200px wide. I then coloured it to what i'm happy with. It was x2 screen layers, a vibrance layer, a soft light layer & some sharpening all on various opacity. I'm not going to go through the colouring on this icon.

2. Negative Space & Texture.
I erased away the background, and placed this texture by raiindust. Which gave me this. It's a little brighter than my final icon, but pretty close.



The reason i picked this texture was because it matched the colouring of eve's shirt, but still a very diffrent colour to most of the other colours in the icon. I would have also gone with green, as the cap was based on a greenery background. It's also light and bright enough to suit the icons colouring and the way i want to look. Here are some examples of textures i wouldn't use:


The first two are two dark for my liking, and quite busy, it would have made it really hard to add to the icon from here, and the texture overwhelms the image rather than adding to it, in my opinion. That's not to say they are bad textures, just not great for this icon. The third one is easy to work with - but in my opinion in this case it's too bland for what i'm going for, and a little light, which means it's not blending AS well as it could be.
That last one is beautiful, and i could have tried to make that work, but text would have been impossible, and it's quite full on.


3. Text & Extras.


So i added another texture for two reasons - it helps bring the icon together as this texture goes over the cap + the background texture. I don't know what i used in the original icon, but i chose this one by neatmonster I just used the part that doesn't have planets on it, and what it does is set to screen, it lightens the image.

The text was pretty straightforward, i used basically the font i use all the time Lemon/Milk which looks really good even when it's really small. I typed out my text, and rotated it a little to the side to sort of suit the icon a bit more. I find that when text isn't dead straight it's often more visually appealing.

I have the "addicted" part on size 18, and i choose the blue colouring from the lighter parts of the blue background. I then have the "to you" part on size 18 and i choose the orange colouring from the colour on villianelle's shirt. I always try to pick colours from the icon, or maybe white - anything else often looks unnatural (which sometimes is what you're going for!!). I then added a drop shadow effect to outline the text. You can see most of my text set up here:



And that's pretty much it!

4. Other icons.


This icon is so simple, overall. The reason i did the text like that is because the subject is looking to the left, so i don't want to overload the left side, which is why i placed it on the right side. Again i chose colours from the icon itself, and have it justified to the right, so the text lines up to the side. The mis-match of colours is mostly just to give it some definition and excitement really. I have to say with text i don't feel confident most of the time, so i try something until i'm happy with it


This is text i rarely do, because if the text is long in the middle, it will go over the subjects face. But in this case, i quite like that it frames the face rather than going over it. I used the same text; lemon/milk, and justified it to the left. I also spaced the lines out as much as possible so the text would take up the whole icon. I like the bold text in this case as the icon itself is so simple.


Also, mixing up colours and fonts can look really good!!!

IF you want more info on text and font, this is my favourite text guide and their font guide by neversleeps. But there are a huge amount of tutorials found here on this masterpost.

I hope this of use to someone! Any questions please ask! all my other tutorials are on this tag

Comments

[st_aurafina]

This is a great tute! Thank you so much - I always waver about using text like this, and your explanations are really clear.

[tinyumbrella]

I am rarely use text because i find it hard to get it to look "right", but one day i'll get there LOL!

[colls]

Nice tutorial (and I really like the icon, too!)

[tinyumbrella]

aha thanks :)

[tinny]

This is great! I especially like how you went into *what not to do* and why.

Also, Milk is better than Stockholm (which I was using and looks similar, but has terrible kerning on the O and Y), I think I'll be using yours from now on!

[tinyumbrella]

It's still pretty subjective, lol but hopefully t helps someone.

I use lemon/milk way too much probably!