2015 | Ask the Maker: a texture guide (or something).
Sometimes it's nice to just turn your brain off and write a tutorial/guide thing. Actually, I am not sure what this classifies as. It has a couple of tutorials (one full length and two minis) plus some recommendations and tips. I don't know. Anyway, hopefully it is helpful to someone, especially those of you who requested the various things below the cut!
Without further ado...
All of the following information is biased towards Photoshop CS5 and isn't necessarily beginner friendly in that it assumes you know your PS menus and tools without me taking a screenshot of them for you. That being said, if you don't understand something, just hit me up in the comments. I'm happy to help!
esgeee & adriftingsea both requested my current favorite textures. But...I don't really know that I have "favorite" textures so much. I can tell you my favorite texture makers are probably mm3butterfly, raiindust, and doctorscullyy @ tumblr. So I tend to use their textures a fair bit. So I just picked out about 15 textures that I can remember using more than once at any given time.
scoobyatemysnaxibtexturesibtexturespeterhaleraiindust
raiindustraiindustmm3butterflymm3butterflydoctorscullyy
doctorscullyydoctorscullyydoctorscullyysirius_sdzsirius_sdz
[Texture experiment:]
I also thought that it might be interesting to make an icon, but restrict myself so that I could only use textures I've showcased in the above table.
lmao, this icon is such a quickie. It's not perfect. It needs work. My heart tells me that it also needs text. Whatever. It's for texture purposes anyway.
This icon was made using the second sirius_sdz texture, the fourth doctorscullyy texture, the first texture from ibtextures, the first doctorscullyy texture, the scoobyatemysnax texture, and the first raiindust texture.
overlay with layer mask | screen with only the red channel checked | soft light, 60% opacity
inverted, screen with only the green channel checked | free transformed, screen with the green channel unchecked | free transformed, soft light with the blue channel unchecked, 60% opacity
For a more in depth look at how you can use one texture in multiple different ways to achieve something that may or may not be cool, I will also be fulfilling kirtash_girl's request for a tutorial for the following icon. It uses the first doctorscullyy texture showcased above a few different times to achieve the end effect as well as several other textures which makes it pretty much the prefect icon to use in a texture guide...thing...whatever.
to
[SOMEONE HAS TO PAY]
Step One: Freak the fuck out over how to crop something.
If you looked at the starting base and the final icon, and your first thought was 'what the hell??? this base doesn't even have the same crop!!' then congratulations, you have eyes that work. Go you! Also, you are correct. Cropping is difficult. Which is why...
Step Two: Give up on creating a crop that is unusual, and do what's easy by cutting the subject out and sticking her onto a solid colored, negative space background.
The rationale behind choosing blue as the background color is...I like blue. But let's pretend I'm deeply profound and say I chose it because it contrasts well with the warmer tones of her blonde hair and red dress.
As you can very clearly see at 200x200 pixels, I didn't bother to cut her out super cleanly. The reasons for this are as follows: 1. I am lazy as hell; 2. Hair is difficult to cut out. 3. I probably figured that no one would notice in the smaller finished product which helps with; 4. I am really lazy, like...really. My method for cutting out things to slap on negative space bases is: quick selection tool, layer mask, refine mask, and use a brush to clean up anything that needs it after the main masking has been done. Because, yeah, lazy. But to continue with the whole 'let's pretend Samantha knows what she's talking about' bit, I also like the quick selection's refine edge option (and then the subsequent refine mask option) because I think it helps out a lot with creating that more natural, fluffy and feathered hair look that you often lose when you do a hard edge cut out.
Step Three: Brushes are a girl's best friend.
DO YOU LIKE BRUSHES? THE ANSWER TO THIS QUESTION SHOULD BE A UNANIMOUS YES.
This step accomplishes two things: 1. It spices up the negative space background which was boring and 2. gets the coloring party started.
So there's some weird spacey brushes and then also a halftone pattern/dot pattern brush in the background. You can google that to find brushes for yourself. Yes, definitely google 'weird spacey brushes for photoshop'. Post your results in the comments.
And then I re-colored her dress, her hair, and her lips with separate layers for everything on soft light and color burn at varying opacity levels. At this point I think I had decided the direction this icon was going to go in which was a kind of noir/femme fatale kind of angle which meant I wanted to play up the blonde bombshell in red. This explains the color choices. Pretend those colors weren't already present in the icon, and that I came up with the color scheme all by myself in a fit of divine inspiration.
Step Four: Color, light, grunge, and all that jazz.
We'll be here forever if I don't start combining steps. So this one encompasses a fair few things. Firstly it adds vibrance and depth to the icon with some coloring bits and pieces and some lighting texture fun. Then it amps up that noir look by adding some grunge elements.
So the adjustment layers included in this step are: two vibrance layers (one on normal and one on soft light) and one selective coloring layer that amps up the blacks because NOIR!! \o/
And then the ever important texture steps include the following textures (some of which are unrecognizable because I've blurred them to hell and back; you're welcome):
The first one looks like something I probably brushed together. The second one is mm3butterfly's work. The third looks like a smaller piece of a much larger texture, and I'm not sure what the bigger picture looks like so I have no idea who it's by. The fourth is mm3butterfly again. The fifth one is also by mm3butterfly, but I have inverted it because of reasons.
How the textures were used:
1. On screen for lighting purposes followed by a stamped layer on soft light for depth. 2. For depth and warmth of color so set on soft light. 3. For grunge purposes set to screen. 4. Also grunge set to screen and masked off the middle of the icon (aka her face). 5. Grunge and light, set to screen, and also masked off everything except for certain areas around the sides of the icon. Kind of mimics fog rolling in on the sides. Kinda. If you squint.
After all this fun stuff, something like this appears:
Step Five: A few more coloring tweaks and then TEXT!
Black and white gradient map on soft light to give those shadows some edge and amp up that noir feel and then a vibrance layer set to color amps up the coloring to counteract what the gradient map leeched away. And now we're done with coloring steps for a little bit.
I don't know if you can see it in the final piece very well, but there's actually a little amber colored circle behind all the text to help it pop a little bit. I probably added that after playing around with the text a little bit, but I'm just going to mention it first. There's a circle. It exists. It's amber. It's set to multiply, and it was created with the shape tool. To get it perfect, I probably held down shift while I made it. Magic.
Font wise...'someone has to' is League Gothic probably. 'Pay' is A Glitch in Time. It also has a duplicate sitting under it, and basically what happened was...I rasterized the duplicated layer, inverted it to get a red-brown color, and then I nudged it a little bit so it stood out against the cyan.
And then I copy merged everything, set it on top, blurred it to hell and back, set it to soft light, and used a clipping mask to clip it to the text layer (which by now is one rasterized layer instead of individual words on individual layers, but to start with...all the words were on their own layer except 'has to' because I put those together). Side note: Clipping masks are the shit.
This is what the icon looks like after all these bits:
Step Six: Tweaking til your satisfied
This next step is just a lot of tweaking really. I added a couple more grunge textures to give it that extra bit of roughness, and then I went for some vibrance (set to screen and masked off the center of the icon). Then I did three stamped layers, and on each one I used a different auto function (tone, contrast, and color), and then I reduced the opacity of each of these layers to taste. Then some more vibrance set to color and masked off of the majority of the icon. Seriously, the layer mask just looks like this feather sweep of white in a soft arc in the middle.
(both by mm3butterfly)
Then there's a layer that looks like I went into variations and made it super bright and hella red/yellow. But the opacity of the layer is really low, and I've masked it off the blue sides and masked it off her shoulder as well. And the next layer is a layer where I've used 'replace color' to switch from cyan/blue to something steely grey. This layer is on luminosity and set to a fairly low opacity which adds depth back to the cyan in the background. Then a stamp and blurred layer at a low opacity followed by two more textures to amp up the grunge factor.
(both by mm3butterfly)
Finally, another stamped layer with some auto action (probably auto tone), a diffuse glow layer, and then I sharpened at this point, resized, decided I wasn't done, and then I returned to the large canvas to begin...
Step Seven: Throw textures at it until you trick your eyes into thinking the icon is good enough to share with other human beings with working eyes.
So this step using just this texture as I mentioned previously. The trick is...while it is totally fine and cool to just slap a texture on (hey, we all do it, lbr), it is also equally as fun (and often times produces more unique results) if you screw around with the texture first. So I mean...my main advice for "how to use x texture" is...do whatever the hell you want, first off. I'm not your mom. But also try re-coloring it, de-saturating it, rotating it, cutting it into smaller pieces, inverting it, etc. In this case, I used a few smaller pieces that were desaturated and also in some cases inverted as well.
(screen, screen, soft light)
Which gives me:
Step Eight: IT'S THE FINAL COUNTDOWN!
Then basically I just fool around until I get the depth, contrast, and lighting back to something I like again after the textures washed the icon out a bit. This involves soft light layers, variation layers, probably some more usage of the auto options, and then I sharpened everything again because why the hell not. And that's it. That's the icon. Are y'all still alive out there?????
esgeee also asked about the following icons and decorative textures:
[A bit of a ramble about textures.]
FRAME TEXTURES: I am going to be really, really honest here. I'm not a huge fan of frame textures. At least using them myself. So typically if you see a frame texture in an icon of mine it is usually because I wasn't super inspired with the icon, didn't want to scrap it, and slapped a random frame on to fill up space and make it look like I thought real hard about the icon and its composition. That is literally exactly what happened with this icon. So I don't really have any advice on how to use frames well or anything like that.
In this case though, I do know that I inverted the frame texture to get it to match the color scheme of my icon a bit better.
SPACE TEXTURES: LAYERING. That's really the only bit of advice I can give regarding space textures. Just keep layering them together (and possibly with other textures as well and also brushes and yeah) until you get something you like.
ALSO.
Learn to make your own star fields! It's super easy and a lot of fun. Plus you can control the stars a lot better if you're the one making them. You can google for pretty much an endless amount of tutorials on how to do this, but to make things easier for you, I've googled it:
Starfield tutorial #1
Starfield tutorial #2
Starfield tutorial #3
Starfield tutorial #4 (Pretty sure this one is for GIMP users.)
STOCK: The glass behind Ingrid isn't really a texture. It is a stock photo I googled after I decided that I wanted to take Ingrid's plot (which involves the spell of shattered sight that comes from the shattered glass of a mirror; are we seeing a theme here because...) and use it as a guide for the icon's composition. I used the stock image twice (once for the background and another time over top of her and the original in the background to get a more intense, layered look), and I also used a few other textures that had a similar "broken glass" type of look to enhance the effect.
Typically, if I use stock like this, it is usually because I have a really clear theme in mind for my icon, and then I can look for things specifically.
Examples are probably more clear so:
In the first icon, you probably cannot even tell BUT there are cherry blossoms in the background. The text comes from the English translation of Masato's song Koi Sakura, and it says: Love-colored cherry blossoms. I think you can see where I'm going with this. So I googled sakura blossoms, grabbed an image that seemed like it would work with what I had in mind, and then I ended up inverting it to get it to do what I felt like it should.
[MINI TUTORIAL]
SURPRISE! This icon was requested specifically, and so I am throwing in a mini tutorial for it right here because I can. Also because this icon was fairly simple to put together.
THE BACKGROUND
1. Solid blue colored base.
2. Cherry blossom stock image, inverted.
3. Color fill (magenta) to merge the stock image and the bg color together as well as soften the stock image a bit since it was too stark.
4. I actually ended up choosing to add the text a lot later when I realized the background looked too empty for my tastes, but in the layer palette, the text layers come next so: first layer - "love colored", second layer - "cherry blossoms", both text layers done with Intro, and I picked the colors out using the eye dropper tool (probably) and the size of the font and all that jazz pretty arbitrarily.
5. Finally, I used a soft, round brush to bring in some deeper blue hues on the sides of the icon. I also blurred this out a little bit.
THE SUBJECT
1. Cut Masato out from the scan at full size using the method I stated above in the Revenge tutorial.
2. Use a couple of blue to magenta gradient maps over the subject (clipping masks!!) to equalize the coloring between subject and background.
WHOLE ICON
1. This was originally meant for a 'muted' theme so with that in mind:
do the opposite of what I usually do, and use vibrance layers to decrease the icon's saturation instead of amping it up. Trust me, I am as shocked as you are.
2. Do a bit of blurring because those lines were looking hella sharp.
3. Blue gradient fill because, hello, Masato's color is blue. Like I was gonna do anything else. Also adds some variation to the icon which makes it more dynamic.
4. Selective coloring to pump up the blacks because his coat was looking a bit washed out.
5. Remove saturation again.
6. More blurring.
7. Realize you have fallen into your regularly scheduled mistake of making anime faces too damn bright. Fix that using the burn tool.
8. Variations for coloring purposes because muted is hard, and I don't like it.
9. Still have sharp lines around the cut out. Selectively blur the crap out of those.
10. Auto tone/contrast.
11. Feel as though the icon is looking flat. Find some sort of light texture to spice it up. Oh look! The texture is by me. Rad.
12. Give into the need for vibrance.
13. Blue gradient map because...of reasons. Who knows. It brightens and it blues!
14. Auto contrast.
15. Diffuse glow.
16. Blur some more because you can never blur too much apparently.
17. Add a border because your name is Samantha and you're addicted to adding borders at the bottom of icons.
18. Sharpen.
19. Profit. Somehow.
In the second icon, I was working to a theme (which is always helpful) where we had to...use classic sci-fi novels as inspiration if I remember correctly. Anyway...when I googled that...I chose something to do with time travel because why not. And I may have actually used the cover itself as the background? Either that or I googled clock gears. And this icon took a shit ton of work to color so my guess is I brushed the heck out of the background and also covered it with gradient maps and who knows what else.
In the third icon, I used roses for two purposes: 1. I decided to use the lyrics 'every rose has its thorn' because I was working off the premise that Belle has more backbone than she appears to have and is totally capable of taking everyone down (please give me this show!!!!) and 2. alluding to the rose used in the Disney movie that represented the time the Beast had left until he was stuck as a Beast forever.
And the last one, I chose a background scene that felt very adventure themed. Like...somewhere where she'd walk in darkness and face harrowing experiences and kick ass and there's probably dragons so basically, Lord of the Rings-esque. Because it's Mulan, and she's wicked awesome.
So, yeah, I definitely like having a theme or a concept that guides my choice of stock images when I use them as backdrops for my icons. Stock doesn't usually crop up in my icons unless I've thought about it in terms of the whole icon.
I really do believe iconning is a process by which you keep throwing things at a canvas until something you like sticks (but that is an explanation for another section of the AtM which will be coming your way soon, I hope), and that is SUPER true for my process when it comes to textures. I often open three times as many textures as I actually use. I scroll through the end list of layer modes, I uncheck layer channels, I invert, I de-saturated, I move things around, and I do all that fun stuff trying to figure out if what I imagine this texture will do for my icon will actually work.
I mean, it is always nice when you know exactly what you want, and sometimes I do. Oftentimes, however, I really don't. And that's what having a super large selection of all different types of textures is good for, and why I appreciate all the texture makers out there who enable my texture downloading habit. Y'all the true heroes of the story.
---
And that's a wrap for this section of AtM 2015 requests; the next part will be up...sometime after I move & also finish the icon battle I'm doing. If you have any questions, please let me know, and I will do my best to answer! Feel free to link back to this post where ever. If you want your textures removed from the post, let me know. Don't just remake my icons. Etc. Etc. Etc. Y'all know the drill.
Also if you want to request something, my thread is here!