[Guide] amie's guide to composition

[aurora_amethyst]

Requested by applepips
with [mini] tutorials for starla and fallleaves

PART 1: Inspiration

Contrary to popular belief(?), I am not naturally creative. I'm actually more practical/technical in some ways. I'm the one who prefers symmetry and centers things by counting pixels (yes, I really do!) and keeps my numbers even (no odd numbers here ^^). So inspiration plays a huge role in my icon-making process.

Themes/Prompts

Most of my icons are made based on themes or prompts for a challenge or round. I used to just randomly make icons, but I don't have the time to do that anymore, lol! ^^

So usually, my starting point begins with whatever theme or prompt I'm working on.

Examples:

>> Red Hair + Green +

At the time, when I though of red hair, I though of Claire Dearing in Jurassic World. I thought it would be interesting to use a number texture and change it to green to give a sort of tech feel and to show Claire's very focused, professional side.

>> Villain +

The theme was villain, and I picked this icon by dixon as my inspiration. I thought a grungy, muted-matte feel and unnatural coloring with the grungy text suited the White Witch.

>> + +

I used the two textures from the inspiration and went for the matte coloring as well as the textured background from this icon by vanessa_lj.

>> Punk + Independent + + +

This was one of my icons from the World of Music round at somein30. I went for an unnatural, color explosion for punk and added these three textures from the inspiration (although the target and the x is not very visible (the gold bit behind the text is the x, and the target is the periwinkle and light-magenta purple background). This icon is actually a great example of how I tend to layer textures.



I initially was focusing on the x-marks-the-spot-on-the-target but ended up adding text which took the focus. I really liked how the last texture gave the icon a grungy-punk feel and harmonized the icon. The key to this icon (besides the textures) is coloring each part individually whether it's the textures or the different parts of the subject. Sometimes it's a process of trial and error to pick the right color(s) (the reason why I like Photoshop and Affinity Photo over programs like GIMP because you can easily change the color). I know I went through several different gradient maps to get the right coloring.

Tutorials and Guides

I used to follow tutorials to a tee when I first started icon-making (well, except the subject/screencap). Of course, after over a decade of icon-making, I use tutorials and guides to learn (or relearn) how to do various techniques.

>> this tutorial by adriftingsea

I opted for more vibrant colors and more visible textures (and no text) on this IU icon.

>> this tutorial by dixon

I liked the fire-on-glasses effect but added some sparks to add some drama to this Conan icon.

>> this guide by starkwars

I really went all out in coloring the individual parts for this Mr. Knightley and Emma icon. I decided to go with a more vibrant, shiny look, though!

>> this guide by apologizeg

I liked the muted look from this tutorial and used some of the steps to get this icon of Taeyeon.

Inspiration/Praise Posts

Another place that I get my inspiration from is looking through older posts from various comms such as 20inspirations, technique20in20, paintedpixels, iconspirations, monthlyinspo, somein30, etc.

I also like to refer to inspiration posts for ideas (and for resources) as well as praise posts! ^^

Here are some inspiration posts and praise posts that I have saved in the past:

Inspiration Posts

• Blue Inspiration post by catberrry at allthesuits
• Green Inspiration post by kalakauas at allthesuits
• Botanical Inspiration post by applepips19 at inkblush_icons
• Four Seasons Inspiration post by kitamikeita at melodyoftears
• Kpop Inspiration post by adriftingsea at roseseas
• Be Obscure, Clearly Inspiration post by christinaa88 at neutral_court
• Apocalypse Someday Inspiration post by rocketgirl2 at introspecticism
• Scenery Inspiration post by tturners at neutral_court
• Period Drama Inspiration post by jokermary at neutral_court
• Textural Healing Inspiration post by absolutelybatty at reflexive_verb

Here are two of my own inspiration posts as well, so you can see some of the things (icons, large graphics, textures, photographs, and fonts) that inspire me!


^^ Click here to see inspiration from Lord of the Rings and the Hobbit


^^ Click here to see inspiration of all things blue

Praise Posts

• A Complex Praise post by apologizeg at iconpraise
• Oldie but Goodie Praise post by apologizeg at iconpraise
• Praise Post Collection by charmingthrone at iconpraise
• Split Images Praise post (Levels/Blending) by sietepecados
• Text Me Up Praise post by sietepecados
• All about That Food Praise post by sietepecados
• A Moment in Time Praise post by sietepecados
• Let's Stay Inside Praise post by sietepecados

Here are two of my own praise posts of Narnia icons, so you can see some of the icons that inspire me!


^^ Click here to see a collection of icons from The Lion, the Witch, and the Wardrobe


^^ Click here to see a collection of icons from Prince Caspian

Textures! Textures! Textures

Okay, so I have like a zillion and one textures (if you really wanted to know how many, it's definitely in the 30 to 50 thousands). My textures are organized by maker, so I don't particularly like having to go through each maker's folder to find something. I usually go to my main texture folder and type in "png," "jpg," "gif," or "pack" into the search bar so that it'll pull a large quantity of textures that I can look through. And sometimes I'll use tinebrella's randomizer to find textures, lol!

For an exhaustive list of makers, you can refer to my resource post. I try to keep the list updated.

Examples:

+ >>

I combined the first texture by lookslikerain and the second texture by 77words for this black-and-white icon of Edmund.

+ 9265ed >> + + >>

I often change the color of the original texture so that it harmonizes with the rest of the icon. I really liked the shapes in the first texture, but the colors didn't work at all! So I put the texture on soft light over a bright purple layer to get the purply tones. I added the other two textures to make the icon more complex and give it some interest.

>>

This texture by j_k_icons provided the major inspiration and background for this vintage Vermouth icon. I just used a gradient map to change the color!

+ + >>

I used these two textures by selenapastel (I put the white moon, set on screen, over the orange moon as well as this orange texture, erasing the parts covering the white moon and setting it on darken, by scoobyatemysnax to add some color for this Goo Ryeon icon. Then I duplicated the white moon and brought it to the top and set it on screen to give more definition.

+ >>

I used this texture by innocent_lexys and this texture by spooky_window to make this icon of Nam Do-hyon, which I used as the base for the icon below.

( + gradient map) >> + >>

I added a gradient map to change the color of this texture by innocent_lexys, duplicated the initial icon, and arranged the duplicated layers over the texture, setting the layers to soft light, overlay, screen, and normal.

+ gradient map >>

+ + + + + >>

Combined these textures to come up with this Kim Yu-na icon (see this tutorial for more detailed info)! ^^

+ + >>

I started out with this texture by rosebein and added some gradient maps to color it then added a screencap of Emma cut out to fit the circle in the middle. After coloring Emma, I added two text textures, one by RavenOrlov and the other by ? (inverted) to added some texture and grunge to the icon.

PART 2: Process

My icon-making process is actually a lot longer and more tedious than this next section may make it seem. I go through a lot of experimentation before I get to the final product, and even then I'm not always happy with the result. T-T

Step 1: Choosing and prepping my subject

Typically, I start out by figuring out the subject of my icon and the general idea I want to go for. There are times when I may scrap what I have and start over or when I go a completely different direction.

There are generally two different directions I tend to take based on whether I use the screencap/image as the base or whether I cut out my subject from the background.

Icons using screencaps/images as the base
Icons with subject(s) cut out of original background

I always try to start out with a HQ image when working with icons. This is especially important when cutting out my subject because the quality tends to deteriorate as it gets resized and pasted into a smaller canvas. Converting the layer to a smart object before resizing gives you a slightly sharper, higher quality cutout. Depending on how sharp the coloring makes the icon, I sometimes opt to just resize the large cutout.

Large Cutout Resized | Large Cutout Made into a Smart Object then Resized | Original Image Resized then Cut out

The edges in the first example are much smoother than the edges in the third example (when I cut the image after resizing). The second example has smooth edges and a sharper, higher quality appearance.

I use the polygonal lasso tool and zoom in as close as I can get without it going to the grid effect. Then I try to make the cut as clear as possible. I usually leave out the flyaway hairs and parts that are shiny (they end up looking white when resized) just in case you were wondering! ^^

I know there are a lot of other ways to cut people out, but I just like using the polygonal lasso tool the best. Sometimes I use the wand (which often leaves jagged, weird cuts), and I've used the quick selection tool (sometimes gets parts that you don't want or leaves in parts you don't want) in the past. Both of them only work if there is a strong contrast between the background and the subject. You can see the missed areas in the images below:

Magic Wand | Quick Selection

Even if I am using a screencap or image in itself instead of a cutout, I still try to get an HQ image. For example, I found the 4K screencaps for The Lion, the Witch, and the Wardrobe which happen to be 3840x1632. Or BluRay caps which happen to be 1920x1080.

For regular images, I often use Google Image search to find the highest quality images. Trust me, you'll be glad you tried. Most of the time you can find some really nice HQ images. I usually right click the image I found and hit "search web for image" or "search Google for image." You can also go to Google Images (images.google.com) and click the camera button. Then you can paste the link of your image or upload an image you already have then search for something higher quality.

So, try this searching for this image (which is actually 255x320):

The link to the image is https://i.imgur.com/1OfNOax.jpg

Notice that the largest image available is only medium. Some images will have large as well. If that doesn't work, look through the similar visible images. Sometimes you will find something that you can use to search better (especially if your image is very LQ to begin with).

STEP 2: Textures and Coloring

After I choose the main screencap/image/cutout that I want to work with, I begin layering textures and coloring in no particular order. Sometimes I might start coloring but then change my mind and switch to layering textures and vice versa.

When I am looking for the texture(s) I want to work with, trust me, it's a long process! I have tens of thousands of textures! (Don't even get me started on how many fonts I have).

Yes, I have a texture addiction. >.<

No, I can't stop.

I tend to favor black and white textures because I like to paste them into the layer masks of solid fill layers. I often use this technique when I'm working with a color palette theme and/or when I am working on complex icons.

I used this technique in my icon of Claire Dearing.



<< I took this texture, pasted into the layer mask of a lime-green solid fill layer, and inverted it (ctrl+I)



See how the inverted texture is pasted into the layer mask? (To see the mask part, you can alt+click/option+click on the mask and then paste in your texture).

As I layer my textures, I often change the color of the background so that the icon harmonizes overall.

+ >> + Smooth Dawn gradient map >>

Texture #1 by RavenOrlov + Texture #2 by RavenOrlov set on Color Burn + Smooth Dawn from the Smooth gradient map set by Fractured-Simplicity

+ 03efed >> + >>

I modified a texture by y0ngshin and pasted into the layer mask of a teal solid fill layer.

Sometimes, I add coloring only to my subject as well.

>>

I used various color fill layers (I prefer to use the layer masks when I'm painting) to color Yu-na from her hair to her eyes to her skin to her lips to her clothes! ^^ I also tried to do some painted hair (I don't know if I'll ever be as good as some makers, lol), this time I tried using my sister's old Bamboo Fun tablet instead of doing it with a mouse (normally, I use a mouse).

Of course, there's the coloring overall as well!

+ gradient map >> + gradient map >>

My main coloring is composed of gradient maps, vibrance layers, and color-fill layers as well a textures and a little painting (nothing that requires a tablet though, lol!) and sometimes regular gradients. I occasionally use photo filters (usually to balance out the complimentary colors, like if the icon is too red, I'll use a green photo filter, or if the icon is too warm, I'll use a cool photo filter), levels, and curves. I also use a lot of copy-merge layers so that I can change things or go back to icon (or psd) if I need to but usually for blurring/softening and sharpening.

Step 3: Blurring/Softening, and Sharpening

This step isn't necessarily the last step, but it is often the signal that I'm nearing the end.

After layering textures and coloring my icon, I often find the need to soften or blur the icon because it has become slightly sharp or pixellated (or because I want to attempt a more painted look).

Diffuse (Anisotropic) | Surface Blur (12, 12)

These are two filter that I tend to use when blurring/softening regardless of whether or not I'm going for a painted look. Of course, there are other ways, but these are my go-to filters. So, I copy-merge a new layer (or you can merge visible) and apply one or the other of these filters then lower the opacity. Sometimes I keep the opacity but change the layer mode. For this icon, I decided to use the surface blur filter and set the layer to soft light to give the icon definition as well as to soften it a bit.



Sharpening is often the last thing I do (sometimes I might add a grunge texture or light blobs or gradients). I used to use the regular sharpen filter to sharpen my icons, but lately the paint daubs filter is my favorite. Again, I copy-merge a new layer and apply the paint daubs filter.

Sharpen | Sharpen Edges | Sharpen More | Paint Daubs (Simple, 1, 1)

If the icon feels too sharp, I lower the opacity of the copy-merge layer. Sometimes, I may forgo sharpening altogether. In this case, after using the paint daubs filter, I lowered the opacity to 40%.



Step 4: Finishing Touches

After I sharpen my icon, sometimes I add additional textures and some text. The textures can range from grungy to shiny and everything in between, lol! ^^

+ >> + >>

I added this texture by rocketgirl2 and set it to soft light, masking out the parts that cover Yu-na's face. Then I added this texture by heartfullcry and also set it to soft light and masked out the parts that covered Yu-na's face.

Occasionally, I'll add text behind my subject, but more often I add them toward the end as in these icons:



I usually pull the text colors from a color palette that suits the icon or colors already in the icon. In the Emma icon, I used the pen tool to place the text around the "circle." apologizeg/naginis has a great guide on how to shape text.

Examples of the step-by-step process of some of my "simpler" complex icons:



Yay for gifs! ^^

Mini Tutorials:

>>	>>	>>
1.) Picked my background texture by j_k_icons from set 38. 2.) Pasted in Vermouth (had to fix her hat and hair) and resized her 3.) Duplicated her and set her to screen, 100% opacity 4.) Duplicated the screen layer 5.) Duplicated the screen layer and changed it to soft light, 100% opacity, and added a diffuse glow (0, 8, 16) 6.) Colored her hair with debc0d and set it to soft light, 100 % opacity 7.) Colored her veil with 000000 and set it to soft light, 20% opacity 8.) Added a gradient map from the Photographic Toning set (should be included in the presets/legacy presets) called Gold 2 and set it to hue, 100% opacity 9.) Added text: a (Book Jacket, 18pt, ffffff) x2, secret (Betty Noir, 24pt, ffa904), makes (Blacksword, 24pt, 4f422a and b3a589), a (Book Jacket, 10pt, ffffff) x2, woman (For Winter, 14pt, f3d79d), woman (Brock Script, 18pt, ffa904)	1.) Started with a black background 2.) Added a grunge texture by lookslikerain from her Got the Exits Covered set, turned it upside down (180 degrees), and set it to normal, 30% opacity 3.) Added another texture by lookslikerain from her Ungracious in Defeat set, and set it to screen, 100% opacity 4.) Added text: dark (Eclipse Demo, 24pt, 9e0b0f) 5.) Pasted in IU and resized her 6.) Added a gray and white gradient map (676363, 0%; ffffff, 30%; b9b9b9, 60%) and set it to normal, 30% opacity 7.) Duplicated the IU layer, brought it to the top, and set it to multiply, 40% opacity 8.) Added another grunge layer by lookslikerain from her Run Laps inside My Head set, and set it to screen, 12% opacity 9.) Copy-merged (or merge visible) and sharpened the icon (paint daubs, simple, 1, 1), setting the layer to normal, 30% opacity	1.) Started out with a gray (404040) background (because of contrast) 2.) Pasted in Elizabeth and resized her 3.) Added a purple-orange-purple gradient by Evey-V (560c9c, 0%; e66304, 65%; 650696, 100%) 4.) Copy-merged (or merge visible) and sharpened the icon (paint daubs, simple, 1, 1) 5.) Added text: i could easily (Zing Rust Demo, 12pt, ffa100), forgive (Jewel Bold Grunge, 24pt, b004fc), forgive (Jewel Bold Grunge, 24pt, 00ffff), [Mr. Darcy's] (Book Jacket, 10pt, 00ffff), pride (Gloss Drop, 24pt, f29614, masked out the dot of the i), if he had not (Helvetica Neue LT Std, Medium Italic, 8pt, ffffff), mortified (La Paloma, 14pt, 00ffff), mine (Book Jacket, 14pt, ffa100)
>>	>>	>>
1.) Picked my background texture by spooky_window 2.) Picked my background texture by innocent_lexys, rotated it, and set it to multiply, 100% opacity 3.) Added Nam Do-hyon and resized him 4.) Added a brown-beige-brown gradient map (1d1507, 5%; ece8ce, 45%; fbf6e3, 50%; ece8ce, 55%, 1d1507, 95%) and set it to normal, 12% opacity 5.) Added a vibrance layer (vibrance: 100, saturation: 20) 6.) Added a solid-fill layer of ffffff and set it to saturation, 30% opacity 7.) Added a gradient fill layer (white to transparent) with the following settings (style: linear, angle: -33.69, scale: 100%, align with layer) 8.) Copy-merged (or merge visible), added a diffuse (anisotropic) filter, and set it to normal, 20% opacity 9.) Copy-merged (or merge visible) and sharpened the icon (paint daubs, simple, 1, 1), setting the layer to normal, 40% opacity 10.) Added this texture by innocent_lexys 11.) Added a brown-teal gradient map (2d281e, 0%; bfffe3, 100%) 12.) Hide the last two layers, and copy-merge 13.) Unhide the layers, and move the copy-merged layer to one of the rectangles in the texture 14.) Duplicate the copy-merged layer, and move the layer to another rectangle 15.) Do this until all the pieces are covered (you may need to cut out unnecessary parts) and set them to various modes such as normal, overlay, soft light, screen, etc.	1.) Started with this texture by likealight 2.) Added a black and white gradient map (000000, 0%; ffffff, 100%) and set it to soft light, 100% opacity 3.) Added a Levels layer with these settings: RGB:0, 1.00, 255, 0, 255; Red: 0, 1.00, 66, 0, 255; Green: 0, 1.00, 66, 0, 255; Blue: 0, 1.00, 66, 0, 255) 4.) Added a purple-purple-blue-teal-periwinkle gradient map (b556f1, 7%; 6472f9, 34%; 35c9ce, 70%; 8498cb, 92%) from Teeny McTeen Girl gradient map set by Fractured-Simplicity 5.) Added solid-fill layer of ffffff and pasted this texture by evenstarss into the layer mask 6.) Clipped a gradient map (#19) from the Psychedelic gradient map set by Fractured-Simplicity to the previous layer 7.) Clipped a gradient map (#4) from the Explosion gradient map set by Fractured-Simplicity 8.) Added a white and black gradient map (ffffff, 0%; 000000, 100%) and set it to soft light, 100% opacity 9.) Pasted in Yoo Jin-Woo (Hyun Bin) and resized him 10.) Clipped a gradient map (#19) from the Psychedelic gradient map set by Fractured-Simplicity to the previous layer and set it to soft light, 100% 11.) Duplicated the previous gradient map, masked out everything except for his hair, checked the box next to reverse, and set it to hard light, 100% 12.) Added a gradient map (bec603, 0%; 7c8027, 100%) from the Greens gradient map set by 77words, and set it hard light, 100% opacity 13.) Added another gradient map (#4) from the Explosion gradient map set by Fractured-Simplicity, masked out everything except for his face and hands, and set it to soft light, 100% 14.) Copy-merged (or merge visible), added a diffuse (anisotropic) filter, and set it to normal, 40% opacity 15.) Copy-merged (or merge visible) and sharpened the icon (paint daubs, simple, 1, 1), setting the layer to normal, 30% opacity 16.) Added text: gotta (Eclipse Demo, 24pt, ccff01), destroy (Mega Team, 24pt, ff00a9), destroy (Mega Team, 24pt, 9d00ff), the (KG Bless Your Heart, 10pt, 00b5ff), bug (Impact Label Reversed, 00ff00, 30pt, -200 tracking) x2 17.) Added this texture by whisperedtimes and set it to screen, 100% opacity	1.) Started out this texture by rosebein 2.) Added a brown-beige-brown gradient map (1d1507, 5%; ece8ce, 45%; fbf6e3, 50%; ece8ce, 55%, 1d1507, 95%) and set it to soft light, 100% opacity 3.) Added a dark-purple-bright-purple-teal gradient by Evey-V (130821, 0%; 8707b6, 65%; 43ded7, 100%) 4.) Cropped Emma in the shape of a circle from the background texture. 5.) Duplicated the brown-beige-brown gradient map, brought it to the top, clipped it to the Emma layer, and set it to soft light, 40% opacity. 6.) Added a gradient map from the Photographic Toning set (should be included in the presets/legacy presets) called Copper-Sepia and clipped it to the previous layer 7.) Added a peachy-pink gradient map by Evey-V, masked out everything except for Emma's neck, and set the layer to hard light, 100% opacity 8.) Painted over Emma's hair in c2ab32 and set the layer to hard light, 100% opacity 9.) Painted over Emma's dress in 4bbda8 and set the layer to hard light, 100% opacity 10.) Painted over the background of the screencap in 8b6ad4 and set the layer to hard light, 100% opacity 11.) Added a copper gradient map (also included in the preset/legacy preset) and set it to normal, 20% opacity. 12.) Copy-merged (or merge visible) and added a surface blur (12, 12) 13.) Added this texture by RavenOrlov and set it to soft light, 100% opacity 14.) Added this texture by unknown, inverted it, masked out the circle, and set screen 20%, opacity 15.) Added text: but i'll wait outside (Octopus Bold, 10pt, 99e6d8), hopin' (Calysta Rose, 16pt, a701ff), hopin' (Calysta Rose, 16pt, d3b6e5), that i'll catch sight (ONEGASHIMA, 10pt, 7336fb), of the (Orator Std, Medium, 6pt, 00ffd5), sun (Olagre, 30pt, 23abb7)

 

Thanks for reading this guide! If you have any questions or comments, please let me know! ^^

I will be doing another guide on animation, so look forward to it! ^^

Comments

[fallleaves]

Wow that is awesome, thanks for this. I see some textures I am familiar with and have. And thanks to you found new one's.

Do you know of any other free animation programs besides gimp?

[aurora_amethyst]

You're very welcome! I'm glad you find it to be helpful! ^^ And I'm always glad to share textures! ^^

No, unfortunately, I'm not aware of any other free programs to do animation.

GIMP is actually not terribly bad for doing animation. I used to make rain gifs with it. I actually have a tutorial for it here. I also have a snow tutorial here. I think you can do most types of animations in GIMP. I use a lot of gif overlay textures, so once you've finished the overall coloring of your icon, you just have to layer the gif textures over the completed icon.

[fallleaves]

Thank you again. :) Awesome, I love when makes I like stuff of post textures they like or use, I'm always finding new one's or even one's I use.

Right now trying to find some good vibrant guides or textures.

Thank you, those one's I do got saved. I just haven't been able to master gimp for some reason, I keep getting frustrated with it lol.

[fallleaves]

Gotta ask for this one


Did you use a texture to get that coloring effect?

[aurora_amethyst]

Lol, no, actually that's an icon made by dixon. She may have used a texture set on multiply to get the coloring, or she might have used a gradient map.

[fallleaves]

Oh, okay! My bad lol. Never read a tutorial page when you got a headache. Think I must of thought the first one was from dixon and second from you. But thank you though.

And OMG that animated icon you got right their is amazing. Love the sparkles, reminds me of stars.

[tinny]

Oh, wow that is So Much! I love it. I'm glad you could spare the time to put this amazing post together!

Thank you!

I'm sure I'll be back more than once to go look at all the details.

[aurora_amethyst]

You're very welcome! ^^ It took me a while, but I enjoyed the process!

I hope you will find something helpful through it! ^^

[applepips]

Oh wow! This is so detailed and awesome! Thank you so much for doing this! I will be back over the weekend with a longer and detailed comment! I really appreciate the depth of detail you went into. Thank youuuuuu!

[aurora_amethyst]

D'awww! You're very welcome! ^^ I'm glad that you liked it and hope you will find some part of it to be useful! ^^