applepips: (Default)
[personal profile] applepips posting in [community profile] inkblush
 photo banner-1_zps79e6b23b.png
Look at me getting an early start on the ATM requests. \o/

So [livejournal.com profile] anassa_anemou very kindly asked me for a collection of my favourite fonts and textures and how I combine fonts.

Here it goes.
ON FAVOURITE FONTS.
.
This is definitely one of my top favourites. It is so versatile and fits almost anywhere. I usually use it when I want to use a sans-serif font that stands out.

For example:

 photo b994_zps7e7bf1d8.png  photo comm-110_zps000f5dfc.png

One of my favourite cursive fonts because it also looks clear, which is a problem with some other cursive fonts.

For example:
 photo community47_zpsda4c8414.png  photo 20insp13_zpsab83e914.png

Such an elegant sans-serif font. It works very well on icons where you want to add small spaced apart text. It also works well with icons which have muted colouring, in case you want to add some vintage-y looking text.

For example:
 photo tildas_zps75dd0b33.png  photo startrek1_zpsbec14fe5.png


I like this font for the drama it can create in an icon. I tend to use it only to emphasize single words though cause even though its ridiculously pretty, it’s not always readable. -_-

For example:

 photo b993_zps15bd5b48.png

It’s a great cursive font for emphasizing single words and since the font comes in three different widths, you can always pick and choose.

For example:

 photo b994_zps7e7bf1d8.png  photo community27_zps189f75ea.png

THIS IS JUST THE TIP OF THE ICEBERG THO. I HAVE PLENTY MORE FAV FONTS.

HERE, I URGE YOU TO HAVE  A GANDER AT THEM.

ON COMBINING FONTS.

When I am looking to combine fonts for an icon, I usually have a vague idea, that is I know I want to combine one sans-serif or serif font with a cursive font. However, finding a combination that looks good always takes some finagling.

In these icons below, once I decided what my serif or sans-serif fonts where going to be, I had a grand old ( and also frustrating) time  cycling through all the fonts I had to decide which fit the icon best! So yes it takes time and patience and numerous times but it is worth it when you finally find the font that makes you go, “ YASSSS THIS IS PERFECT”.

 photo 20insp6_zps55e4afe4.png  photo 20insp16_zps41c4b437.png  photo community46_zpsbc914707.png

Another way of creating contrast would also be using only one font throughtout the icon but switching up the sizes. Like so:

 photo community4_zps1c414a20.png
Electricity, Merest and Contact are all the same font, (Open Sans Bold) but I just increased and decreased their sizes and messed around with the kerning.

 photo tw-18_zps460a298f.png  photo tw-126_zpsb074bf66.png
Once again, one font but different sizes.

But font combination also has some pesky issues.

As in, while using two different fonts creates some contrast be careful or using two fonts that are wildly different or even more than two or three fonts. You don’t want your font choice and text overwhelming the icon, unless that is what you were going for in the first place.

To illustrate what I mean, look at these icons of mine:

 photo community27_zps189f75ea.png
I think I used four different fonts. FONT OVERKILL. I could have probably done with two or three.

 photo community7_zps1225f16f.png
The fonts are too similar. Yes I know one is a cursive font and the other is a serif font but they are too similar in terms of the mood they evoke and they don’t not really fit the icon. It’s another matter that the icon is terrible too. :D
 photo b995_zps38f96aaa.png
TOO FAR APART, so much so that they are really jarring. I don’t know what I was thinking when making this icon but I do know that I fucked up a potentially good icon. :(
Here are typography tutorials that will offer you better advice on combining fonts and using fonts.

This is a kinda-complicated heavy duty one but it is helpful all the same
This one is a very good simple to understand and helpful tutorial

Sometimes, following font rules gives you a good result, sometimes fuck the police and screw the rules and you’ll produce a fantastic text icon. Use your own judgement and if you like the text you have put on an icon, that’s all that matters.  :)

ON FAVOURITE TEXTURES.


If I had a no.1 favourite texture, this would be it. It instantly ups the contrast in an icon (when put on Softlight), when put on screen, it flattens the colours neatly, it’s just basically PERFECT. ON ANY AND ALL ICONS.

In general, I do adore [livejournal.com profile] tinebrella’s textures (the paint ones especially). The are great for increasing contrast, giving icons painty icons and just being awesome. You can put them on screen for the painty effect, on overlay for the whambam effect, Softlight for a subtle effect, and hardlight when you want the painty bits to be especially visible, they are just GREAT!!
.
Then there are ALL of [livejournal.com profile] mm3butterfly’s textures. I love them because I can put them on screen and BAM, my flat icon has some colour and pop!


Then there is this texture by [livejournal.com profile] barstr7. When I am stumped for text, especially some elegant fancy looking text, this is the texture I always default too. Also, the grunge elements in the texture mean it always increases the contrast of the icon or adds some graininess to it!

 photo blueymcphluey4_zps8cb89d94.jpg
This texture by [livejournal.com profile] blueymcphluey also is perfect. The purples and dark cyans it give your icon this subtle texture and ever so-slightly deepen the contrast.

[livejournal.com profile] endearest’s light textures are also a fave of mine. The large textures especially are great for adding light to the cap without losing out on image quality and also, great for contrast and flattening if you change the layer modes!

Um yeah, so that's about it. If you have any questions, do ask me! I will dew my best to answer. :D

Date: Sunday, 13 July 2014 11:38 am (UTC)
neonspider: (miles)
From: [personal profile] neonspider
This guide is fantastic, thanks so much for sharing that font folder! :) I looove your text use and all these tips are seriously useful and great and those textures are gorgeous too. Thanks for writing this!

Date: Sunday, 13 July 2014 07:48 pm (UTC)
From: [identity profile] anassa-anemou.livejournal.com
Thank you so much! This was amazing, is great to see the fonts in use, because it is so much easier to see how they work.
It was really marvelous to see how you work with it and I'm super grateful. And I've been really curious about which one was Justus and how to use it.
Thank you for allowing us to peek into your iconning world!

Date: Friday, 25 July 2014 05:11 pm (UTC)
From: [identity profile] setentpet.livejournal.com
Great guide with a lot of helpful tips. Thanks so much for sharing!

Date: Thursday, 4 August 2022 03:23 am (UTC)
fallleaves: (Default)
From: [personal profile] fallleaves
Shame the link for mm3butterfly’s textures don't work.

Date: Sunday, 7 August 2022 08:16 pm (UTC)
fallleaves: (102 © lemonrocket)
From: [personal profile] fallleaves
Awesome, thank you! I LOVE finding, being introduced and downloading new textures I've not seen before. I find them on LJ often enough in graphics communities or personal journals, but phootbucket and one of the other sites have ate them up and can't see or download them.

I'm honestly surprised my computer still works with the amount of textures I've got saved already.

Date: Friday, 7 February 2025 06:34 am (UTC)
thewizardofoz: (Default)
From: [personal profile] thewizardofoz
Awe, any chance you can reupload the tutorials? All but one isn't showing.

Date: Friday, 7 February 2025 07:49 pm (UTC)
thewizardofoz: (Default)
From: [personal profile] thewizardofoz
Hi, nice! Thank you. Totally understandable. I hated when photobucket went under, I'm glad I found cloudinary which is similar in set up. No worries. :)

Profile

inkblush: (Default)
icons by applepips

Expand Cut Tags

No cut tags
Page generated Monday, 23 June 2025 07:30 am
Powered by Dreamwidth Studios

Style Credit

OSZAR »