The RuneCrypt GFX Blog

Runecrypt Graphics Blog brings you yet another signature tutorial with the PSD, stocks and resources used.

in the pack you’ll find: The original PSD (for learning use only - you may not copy any layers from there) and all the stocks and resources used.

This is a pretty simple signature, jsut shows how i like to use a lot of resources. So what I first do (isn’t in the tutorial) is pick 4-5 stocks which will act a specific purpose (main stock, coloring, effects, composition, etc…) So here goes: Read more »

OH MY GOD! two new competitions, and some other shit! you know you wanna…

Due to popular demand, i will not post naked pictures of myself. Be sure to check out the upcoming tutorial though…

Sorry it took me so much time to post this, but I had some problems with my computer

Enjoy this small tutorial… any comments, remarks or qustion - feel free to contact me…

You know you love it, and it strikes again! the official Runecrypt Graphic Art Forum Blog presents the July 2008 Vlog.

This month’s video tutorial’s gonna be posted on a separate video, so that should be out tomorrow or so.

Links and such:

Diablo III New Art Direction:
http://multiplayerblog.mtv.com/2008/07/02/diablo-iii-art-direction/

Renewed artistic direction for Diablo 3 Petition:
http://www.petitiononline.com/d3art/petition.html

Is it art:
http://blogs.reuters.com/fanfare/2008/07/01/people-running-is-it-art/

Yes I know the next vlog should be out, but I was swamped up until a few days ago with tons of test. Now it’s over so I can go on and create it so expect it sometime next week some spoilers, there’s gonna be a quick explination about vector work and other stuff of course…

Also coming soon is a Resource Tutorial - where to look for resources and which ones to chose.

In the spirit of vectoring, sonic oh so helpfully contributed this tutorial on pen tooling! thanks man, and enjoy you guys

Read more »

Hi there, welcome to my very first tutorial! This is fairly easy to follow, there’s nothing too hard. You should be familiar with the smudge tool though. I’d say it’s Intermediate difficulty.

Let’s begin, shall we? Read more »

When it comes to web editing, especially in sites where most of the material is entered as raw text, it’s important to know exactly how you want the site to look like before you approach any line of code.

In my experience with all kinds of sites and technologies, CSS is the best way to control all your styling and for those of you who are planing to build a new site is an essential syntax to perfect. It’s easy, quick, and very, very powerful. For those who don’t know CSS stands from Cascading Style Sheets, and it’s a client side code that basically integrates styles into the HTML code of the file. This allows you to easily control your editing from outside the HTML file itself, leaving the content untouched while you change all the styles. In some places CSS can even replace special Javascript codes, but that is really dependent on the browser.

First of all I’ll explain a bit about the issues you’ll get into when you go into web editing. System and browser support, overall legibility and such.

Fonts of the Internet

not all fonts are supported by all computers simply because they require the base *.fon or *.ttf font file, and they generally vary between different Os’s. What was done to make it all easier when it came to HTTP and the world-wide-web is simply to allow the fonts to be chosen from a family rather than a specific font. For instance, let’s say I want a page to use Arial font, but I can’t trust that every computer on earth has the Arial font file, so what I will do is assign the priority of fonts I would like to be used in the page: i.e. Arial > Sans Serif.

Generally it’s accepted to use, and are available on all default mac and win, can be found here: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Basically what this allows us to do is control the font more freely, without getting stuck with the default web browser’s font.

How to do it in CSS:

basically in CSS the syntax is [#] [.] tag [:status] { name: value; name2: valu…}

Where the Hash sign stands for group, the dot for class and without any is just a regular pre-set HTML tag and the :status is used for the status that element is in (for instance: a:hover – works for anchors which the user hovers on, also known as Mouse Over Link).

The line of code I talked about earlier will look like this for the <p> (paragraph tag in HTML):

P {

font-family: Arial, Sans-serif;

}

Thats it, it’s that simple. And of course you could be more accurate and continue on with other fonts before it reaches the default Sans font, just by adding more common font names separated by commas

in that same way: font-family: Arial, Helvetica, Verdana, Sans-serif;

Browser support of styling – CSS warning!

The CSS classes and ways to edit a web page have grown so much you’ll always need a go-to guide to find exactly what you need and how to use it. I suggest the W3 School CSS site – basically, it has everything.

Thing is, not all of those classes work with all of the internet browsers: IE and all its versions, Netscape, Mozilla Firefox, Oprah and others. You’ll need either to check with the CSS class listing to see if it fits the requirements, usually you’ll want it to work with IE 6 and up, Firefox 2 and up and Netscape 6.1 and up – but the more, the merrier!

The general rules of thumb, yes we have 3 thumbs…

Sure any site is different and it should be your creative outlet, but there are usually a few ways that work well when you need to handle large amounts of text. These work on the font itself, the composition and the dosage.

Font-wise, as you can see today most sites use some kind of sans-serif font, either Arial, Helvetica or Verdana – all of which look differently in different color schemes and amounts.

Arial and Helvetica being neo-grotesque and grotesque are very close together, the stroke width in comparison to the point-size and x-height is much smaller, where as Verdana is much sleeker, its more round overall and thus looks good in smaller amounts of text. Of course you can always use Serif fonts and thats usually used in more article-oriented sites. Heavy text looks much more professional when it comes in serif.

When it comes to how you block the text is again important to look at how much body the character has in comparison to it’s point-size. The fuller it is, the less I’d suggest it’d be in a full block format. Full block is generally when you use justified alignment. Blocking Verdana is much better though, since it already has a very geometric feel to it. So when you have a structured table with space for a small amount of text, you should stick to justified Verdana, but remember that the same font is suggested to be kept throughout the site (except for menus or logos which can be something different but you should really keep it simple and straight.

Getting the general paging is important as well, I mentioned some about paging in the first part but here’s the general workout when it comes down to HTML. The most important rule of non-articular text is to keep it properly composed. By that I mean: work the page more towards the style you want – and use a lot of tables to get it straight.

On the other hand you have more article-oriented writing such as blogs or news sites that have a lot of text stacked. What you’ll want to do here is actually keep it straight and use more CSS and code to format rather than tables. It’s much similar to working with MS Word or any other text editor – and this might sound pretty simple but it’s not. Here’s how you keep a clean page, step by step:

1. Write correctly: use paragraphs with key sentences and connectors with in the paragraph itself and between the paragraphs.

2. Post editing: make sure you use a good size and family font and make sure you either oblique or italic the emphasizes, make your examples stand out and such, and create levels of headers.

3. Code like a professional: When you code the body itself make sure you use the <p> tags for each paragraph and all the <em> tags for emphasizes and the <h#> tags – remember you can edit exactly how each one looks in the CSS later.

4. Adding images and illustrations: Use the CSS to make the image as a float image – when embedding an image add a style property “style=’float: left;’” (or right, whatever suites you). Experiment with the CSS’ endless ability to prefect your system.

Summary

When it comes down to the text you put on your website, just remember what it’s used for. Is it an article? Is it an ad? Is it a catchphrase? Keep it professional, simple and clean, or go wild, as long as it fills you’re need.

As to these articles, that’s basically it, I hope you learned at least one thing, cause goddamn it I know I have. The text has a lot of meaning besides the words themselves; when you take a page you look at the black and the white, at how much white there is next and away from the black and how much words you put into it. No matter what you want to say, or in whichever media: print, pixel or painted, just make sure you don’t mess it up.

In the previous part I gave a rough outline and explanation of the different types and classes of typefaces. The concept behind each style: how to implement its position and spacing. In this part I’ll try to give a general idea on how to implement text in your work – either large art of some kind, type compositions or websites.

As I explained in the previous part, there are a few basic styles and classes of text: Serif, Sans-Serif, Script and Monospaced. Each one of them in their time had a message to deliver:

Serif being the oldest style (old style serif typefaces are dated back to the 1400s) of regular type reflects the fact that back then written text was something quite special. Reading and writing was only known by the high-class and monarchy. It had, and perhaps still has, a very official, old style sense to it.

Sans-Serif only became really widely used in the late 19^th century with what’s called the father of all Sans-Serifs, “Akzidenz-Grotesk”. The Sans-Serifs were more modern – there are many similarities with other styles of art such as architecture. Many buildings of the Modern style of the early and mid 20^th century, maybe mostly known is the Bauhaus style which used slick lines, and as all modern of the time – simplicity was the name of the game. By losing the edge strokes and special features off the simple glyph the Sans-Serif tried to take the essence of the face, make it simple – yet fully constructed and legible.

Script is the descendant of calligraphy from the Far East. To make a print look non-printed is actually something more ornamental than typographical. Many people relate script to the Ornamental style typeface, but that is only if you look at script merely as a set typeface – what do I mean? The script style itself can be more easily reformed as an art of itself, not the typefaces that are currently available.

Monospace and the whole space styling is a completely different story – since it applies to all of the other classes of text. Regardless of their family the spacing between letters and whether you add Kerning or Tracking or such has a huge influence on your page. I will talk more about page composition later in the article.

General Art

How to chose a text to fit your work is the hardest part, here comes in all the thought. You need to ask yourself a few questions:

How do you categorize your work? What are you trying to bring out in your piece? How is the focal of the work styled?

Choosing the style

I’ll use examples of what I consider good text work on some of my works – First off one of my newer works, “Smooth Criminal”:

This one is somewhere in-between when I though of it style-wise. The grunge style of the lower part make it quite oldstyle with all the different real-life and cartoon stock with the natural coloring make it more modern. Thing is, I tried that the text wont interfere with the fact that the flow isn’t linier. A serif font has a very linier flow to it, because of those small tips, while a more modern typeface has less depth and fits better. (BTW – that’s why sans-serif looks much better than serif when it comes to drop shadow). Considering the main focal (the person) is a cartoon, it has clean lines - like a vector sans-serif fit much better with it.

Here’s a good example for using serif fonts, the piece called “headful of ghosts”:

The much simple coloring style made this work apparently much more conservative, yet still modern due to the amount of gray and high offset. Using on this one the face of the man and the C4D render as the main foal I needed something just as sharp and flowing. Clearly the C4D has a flow. Using the text here more as a tag made it more like a composition.

Basically, when you look at your work you have to find which will look better if you are planning to incorporate large amounts of text. (I get most of my ideas from songs, so I like incorporating sometimes a part of the lyrics in them) Using type as part of your work can make a large difference. The important thing is that you recognize what style of text will fit the size and coloring.

Getting the color and size right

After you get your style (or even before, it all works out together after some work) you have to choose your color and size. There’s a basic thumb rule about sizing, for strong, big and straight-forward text use sans-serif. For small detail, even if it doesn’t need to be readable, use small point size serifs. Why is this?

Serif fonts have a general idea of size of the lines use in the typeface. Since the letter is comprised of a few strokes, usually the stoke starts thin and then for each 90 degree turn it turns to think or thin. For instance the Bodoni typeface (modern serif):

As you can see, the first stroke on the G starts at the bottom of the circle at the top. Thin, 90 degree turn to think, then back to thin and back to thick till it returns to the start. Going from then down following the same concept. Basically, this gives the text very interesting detail for a bundle of text. In most simple languages such as English it looks substantially better when composed together to form legible text.

On the other hand you have the sans-serifs which use same width brush for all of font. The only detail is how each stroke ends: vertical, horizontal, angled or rounded. Looking at Arial for example:

We can clearly see it ends horizontally and has generally the same stroke width throughout the letter. Making it so the white space around the text itself makes the glyph much more comprehensible. Thus, its used much more for logos, tag lines and banners and such.

Going onto color, this is quite tricky since there isn’t a general guideline to work with, but just keep in mind the use of the text itself when you use it in your work. Since serif fonts usually go better for text you might want to use it in a dark color (close to black) or create a block to fit the text in, using a dark color with the type being white. Otherwise it will look like a strange sharp mess. Using large clean fonts, on the other hand, give you more opportunity to work with color. Contrasting colors always work good but don’t over kill it. When we look for instance on modern web2.0 design (I will elaborate on Internet Graphics and Web2.0 design in the next part) using a gray base color with one or two bright colors makes for a sharp look. So using a very sharp color, high saturation and mid-lighting will make it look better. But remember to do what looks good on this one.

Text in Adobe Photoshop

Photoshop has a lot of unofficial ways to deal with text – mainly: alignment, spacing, majuscule, minuscule, height and other basic emphasis such as bold and italic.

These tools can be quite strong when compiling a page.

You have to clearly define your page before you start working with either lines of text, single letters or paragraphs. Since all of these require borders, alignments and their visual content.

When writing a book you have a lot of different “Canons of Page Construction” which have the rules to allow the text to be legible and open but we’re not interested in that.

When looking to format your page and paragraphs you need to take a look at your lines. Each line of text and each letter is composed of 3 areas and 4 lines:

The median is defined between the baseline and the mean line, the descender and cap height are the restricted by the descender and ascender lines.

The basic leading (difference between lines) used to be defined by the “shoulder” of the type. The template of the letter was molded out of a block of metal and a bottom area was left clear to form the leading as the shoulder. Now you can define that simply using the “set leading” input in the character menu in Photoshop.

The Kerning for instance was always defined by the equal distance between ill-fitting letters such as W and A, it also can be defined in that same window by selecting 2 letters and defining the Kerning either by pixel or by UL number.

The interesting part is when you start composition whole paragraphs. To do so first of all you’ll need to right-click the text layer and click “Convert to Paragraph text” which will give you a box around the text which you can resize to the area that you give your text. Thus you can implement Justified Alignment which is very popular when writing articles and books. It basically automatically gives new letter and word spacing to fit that line to the whole width of the block.

You just need to take a large text with some visual content and mess around with it, work positioning, remember that the text can be either left or right of any content, you can add important excerpts in a resized version in various styles and sizes to give it a little more meaning but that’s all a matter of style.

Summary

When it comes down to style and choosing the right type for your work you need to have experience, but the best you can do is work with a lot of text. Creating sites, pages and portfolios and such gave me a lot of experience with large text quantities.

When working with logos, slogans or banners just remember that size and positioning is relative and can always be changed. Use lower and upper case letters, Majuscule, Minuscule and anything that fits.

Next part

Next part I will dedicate to the computer age, how fonts came into creation and web design as well. I hope you enjoyed this part as well, and I’ll start writing a tutorial about how to create a font of your own, so be ready for that as well, sometime next week maybe. If not, it’ll have to wait till I’m finished with the July Vlog.

The serifs which some have you might have heard about when encountering web editing are basically the little notations that surround the simple glyph.

This type of font was one of the earliest and and used and commonly known fonts such as Adobe Caslon or Garamond Pro. These have very fine edges and endings which are much assimilated with ‘old style’ type.

On the other hand, Sans (French for ‘without’) basically means no-small features. Being a newer Grotesque idea over the Serif fonts is that things ought to be simple and as they truly are. Sans-serif fonts are much cleaner and are easier to read in small point sizes.

A much known Sans-serif font is Helvetica the Grotesque-Sans-Serif font which was created back in 1937. It has clean lines and curves which compliment the letter itself rather than the fine edges. Compared to Arial of 1981 which is even simpler and thus classified as Neo-Grotesque-Sans-Serif – it uses the same fine endings are Helvetica but has less curves, using the more visible white-space to bring out the essence of the glyph.

Script style is basically the handwritten style which a lot of people know and come to like (me for one), and we’re never really accepted by the mainstream type as they are considered to be harder to read.

Monospace is a basic font that could be either serif or sans-serif as long as it has a fixed width for all letters. This related to the Letter-Spacing, Ligature and Kerning which come together to form the word.

Letter-Spacing, Ligature and Kerning

When it comes down to letters, they still need to fit together nicely in the words, and here comes in the spacing (or ‘unspacing’ for that matter) of letters when they combine together to from the word.

Letter spacing crudely explained as the space between each letter, but there’s more to letter spacing than meets the eye. You could argue that there’s no use in letter spacing and there should be a single spacing compared to the point size for each face, but letter spacing is directly linked to legibility (~how easy it is to understand the content). In smaller sizes the spacing could be a vital rule in the readability of the text, while in larger text it could try to send a message (i.e. small spacing presents the type as words where large spacing makes for the letters themselves to be recognized faster by the reader)

Ligature is the styling of text that is derived by the fact that many words use a consistent 2 or more letters in the same order more often than others. Many of which just came for styling purpose, such as the combination of lowercase F and I in German quickly combined them together.

And another styling concept is the Kerning, which is basically the letter spacing when it comes down to how much white-space the face has around it. For instance, the letters A and V are very similar when it comes to the white-spacing around them, only its exactly inverted in the facing fronts. So you could say they fit exactly together and you can keep the actual white-spacing between them more accurately. Here’s a good example using W and A in the word War:

What you can see here is that in the first format the spacing between the blocks surrounding the type might be equal, but it looks like the W’s distance from the A is larger than the A’s distance from the R – that’s because the actual amount of white space between the W and A is much larger than between the A and R. In the second line, with added Kerning which is equivalent to the actual white-space between the A and R it looks much better, where in the last line the Kerning is maximized where the actual white-space is equal to the letter spacing, and in this case it looks the opposite of the first line.

Summary

Bringing these few components together to from a font is what makes each face different from the other, and that’s the core-concept at which this art is consequential of.

Each small notation in the text has a meaning, has a purpose and can be used by graphic artists, such as ourselves, to create a piece which caries a message. Maybe even in the literal sense.

The next part

In the next part of this article I’ll talk about the digital age and what has it done to the typography and what are the graphical uses of these tools and fancy names. How to use text properly in web-editing and hopefully a Photoshop tutorial on how to create pages of text, and maybe a quick guide to making your own font-face! Stay tuned.

Signature Name: Blue
Signature Creator: Barak Shelef
Tutorial Creator: Barak Shelef
License: Learning only.

Made a small tutorial to show some coloring and light-balance techniques. Plus a quick easy signature you can all make in your spare time! Also included the PSD and the stock image used.

Read more »