I would like to dedicate this tutorial to typography, which are the methods of processing printed text for better legibility and beauty. Typography is composed through the graphic design of printed text using the specifics for that languages rules. In this Basix tutorial will be apply the typography methods and rules using Adobe Illustrator. Materials for creating this tutorial were kindly furnished by Roman Kuznecov, aka Asat, who has many years of publishing experience.

Step 1

Let’s take a look at the designing of the printed text in the example of the sandwich recipe that we’re working with today. This kind of text contains a variety of items that will help you to develop the theme of this work. For the experiments, you should use text like this one here.

First, define the basic parameters of textual information:

• Size of text block
• Name of the typeface
• Font size
• Line spacing

Choosing these typographic parameters depends on many factors, in particular: on the format of the publication, style of the text, designer’s personal preferences, etc. I will leave these issues outside of the scope of this tutorial, as it covers books and monographs. Based on personal taste, I decided that the block of text will have a size of 150 by 300 mm (Type > Area Type …)

Step 2

Type text with the Garamond Pro font, size 12pt, and leading 13pt. Change these parameters in the Character palette (Window > Character).

For your information: the font size is the size of the height of the letter; typographic point is the unit of measure of the font size.

Step 3

Now align the text. There are two basic types of text justifying: Justify with last line aligned to the left and Justify all lines. The first method is quite simple, so use it for formatting. To do this, click on the button “Justify with last line aligned left” in the Paragraph palette (Window > Type > Paragraph).

Step 4

Next, we must configure the hyphenations. It is important to keep a balance between the number of hyphenations in the block of text and the amount of empty spacing in the rows. On one hand a lot of hyphenations create a feeling of the “fence” and affect the readability of text, on the other hand, long gaps also make it difficult to read.

Adobe Illustrator allows you to adjust this balance yourself with a Hyphenation dialogue window which opens from the fly-out menu of the Paragraph palette. Moving the slider to the better spacing position, we reduce the length of the gaps by increasing the amount of hyphenations, and vice versa. You must choose an optimal value that satisfies the design.

There is also an option that allows you to customize the appearance of the paragraph. In the fly-out menu of the Paragraph palette there are subsections "Adobe Single-line Composer" and the "Adobe Every-line Composer". When hyphenating, "Adobe Single-line Composer" analyzes just a single line. "Adobe Every-line Composer" analyzes the preceding lines; usually this allows you to get a better result.

Step 5

Thus, the general composition layout is already determined. Now let’s proceed to designing the individual elements of the text. I decided to highlight the main title of the text, so I’ll write it in capital letters. To do this, I’ve highlighted the title and in the fly-out menu of the Character palette I chose the option All Caps.

Here you need to pay attention to one point of interest: when designing the font tracking between the capitals is chosen on the basis that next to it there will necessarily be a lower case letter, so if you type the text in capital letters alone, the text feels cramped. Graphic designers recommend expanding slightly the letters of such text. With the text selected, in the Character palette in the tracking field set the value to 20.

Step 6

Now apply Kerning. Kerning is the process of adjusting the spacing between the character pairs to improve the appearance and readability of the text, it serves to justify the distance between adjacent letters or other font characters.

This option involves working individually with each character pair and how to find their relative position depending on the selected font, drawing letters themselves, and so on. The value of kerning is set in a percentage of the width of the space of the font being used, it can be either positive (when the characters are spaced apart) or negative (when the characters come closer to each other).

It is easy to see that the distance between pairs. See how “AV” and “WA” look different, but formally it is the same.

In order to make the distance between any two characters look visually the same, Kerning is applied. In Adobe Illustrator, there are 3 types of kerning:

• Zero Kerning – when kerning is not applicable.
• Auto Kerning – kerning set in the font by its creator. If the font is well designed, this type of kerning fits well in most cases.
• Optical Kerning – is good for kerning of titles or large freestanding signs, such as text for logos.

Set Auto Kerning for the entire text.

Step 7

Now I want to decorate a little bit the first few lines of text. I’ll do it with small caps. Small caps in typography are uppercase characters that look like reduced lowercase characters. Small caps are used to create titles and first lines of the sections following large initials, to write names, titles and abbreviations, and for bolding in the text.

It is not recommended to use small caps in long (more than two or three words) phrases and sentences; it impairs the readability of text. So, select the first few words after the title and select Small Caps in the fly-out menu of the Character palette.

Step 8

Now we need to separate paragraphs visually. This separation can be done in many ways, the most common of which are: break line (indent at the beginning of the first line of a paragraph) and the spacing between paragraphs.

In this text, I decided to make a space between paragraphs, but not just by line spacing, but by setting a blank space after each paragraph. To do this, in the Paragraph palette set the Space after paragraph value equal to 10pt.

Step 9

And now I want to talk about some ways to work with numbers in the text. There are 2 kinds of numerals: text numerals and all caps numerals. It is considered good form to use the first one along with lowercase letters, and the second one – with uppercase letters.

How to key in such numerals? There is one secret: both sets of numerals should be present in the font. The presence of two sets of numerals is one of the hallmarks of a good font. If these numerals are in the font, then key them in using the Glyphs palette (Type > Glyphs), find the necessary character in the table and Double-click to insert it in an active text block.

Our text has two groups of numerals. In the first case the numerals are in the ingredients section – leave them unchanged, I mean all caps numerals. The second group of digits are Fahrenheit temperature figures and the temperature character is in the main text. With the help of the Glyphs palette make them lowercase.

Step 10

Our text there has a bulleted list of several items. Replace the hyphen at the beginning of the list on the bullet with the help of Glyphs palette. It is important to properly arrange the indent. To do this, select the space between the bullet and the word and press TAB. Do this in every line of the list.

Check whether there is a tab symbol anywhere, and there are no extra spaces. To do this, go to Type > Show hidden characters. The tab character should be represented by an arrow (space is represented with a point, there should be no spaces).

Select the rows with the elements of the list and open the tab panel (Window > Type > Tabs). Place the marker of the tab on the rule box at the place from where the list items start.

Note: that bulleted lists should be formatted with the help of the Tabs panel, but in no way using multiple spaces.

Step 11

Your text may contain dashes. It is a gross mistake to put a hyphen or double hyphen instead of a dash! There is a character for the dash that we can type by clicking Option + Shift + _ for Mac (Alt + 0151 for Windows). Replace hyphens with dashes where needed.

There are two types of dashes – short (en dash) and long (em dash). “En dash” is keyed in by a combination of keys Option + _ for Mac (Alt + 0150 for Windows). It is used to denote the spacing between the dates.

Step 12

Now I want to tell you about such text formatting as Roman Hanging punctuation. In this text for more visual use of the Roman Hanging punctuation, we used the alignment of text to the right “Justify with last line aligned right” in the Paragraph panel.

To apply Roman Hanging punctuation, go to Type > Optical Margin Alignment, then in the Paragraph fly-out menu select Roman Hanging punctuation. With these actions, Adobe Illustrator takes all the extreme right punctuation characters behind the side lines and optically aligns the entire text.

Conclusion

To add authenticity to the text, you can change the shape of some letters. To this, in the OpenType panel (Window > Type > OpenType) press the buttons shown in the picture below.

The program will automatically replace the characters with the Ligatures (Ligature (from Lat. ligatura) – is a character of any system of writing, formed by joining two or more letters). Characters that have contextual alternates will be replaced by their alternatives. Ligatures and contextual alternates, unfortunately, are not available in all fonts.

As a result of our transformation we got the following text.

Note: the entire described above can be used for formatting text in Adobe InDesign.

Vectortuts+

http://www.marcusfriberg.com/

Portfolio of Marcus Friberg

Typography is big in everything, especially web design these days. This is a collection in recognition of that and to inspire and remind myself that respect to typography in design will take it to another level. These are types I truly love and I kid you not when I say I’ll draw inspiration from them in upcoming projects. I hope it does the same for you. Inspire.

Join DesignersCouch.org

We spend good part of our time in front of a monitor, most likely we have more than one computer, not mentioning iphones, graphic tablets and all the other ultra modern devilries that invade our desks. We are all part of the generation that need a mouse to leaf through an album with the family photos (goodbye to dear family albums with the pages left to yellow) and Facebook to send birthday wishes to a friend. 20 examples of great “sketch” inspired sites included!

Yet, in the middle of this digital era, the best allies of a web designer are common tools that can be bought with the change under your couch cushions. I’m talking about making pen, pencil and paper a part of the creative process that other “non-digital” designers have been using for ages: sketching.

With this article we’ll treat an argument that certainly many of you will have at heart: we’ll see in fact how sketching can help us arrange the ideas, design an effective layout and – why not- give a fresh and original touch to our design.

Step 01: Sketching As Part of the Planning Process

Imagine this scenario: We have just finished an exhausting briefing with our client and now it’s the moment to rearrange the ideas. We know the preferences and needs of our client; On this basis we should be able to set the layout we have to design. The problem is the quantity of information we have to consider! We defined that in the homepage we have to put a slider and a visible call-to-action which invites to a contact, the pages of the site will be seven and we must also include the latest news in the homepage and so on.

At this point, I assure you, opening Photoshop with the pretension of creating an effective layout is useless; without a plan for what you have to draw in the detail, you’ll be blocked and forced to essentially design without enough foresight to make intelligent decisions. This often means more work later on, fixing what could have been done right the first time with just a bit of work sketching.

Sketching offers something unique to web designers… it helps us organize large amounts of information into manageable pieces that we can design around.

Instead, if you have the fortune of being able to metabolize concepts and ideas in a design, most likely you’ll forget something important, with the result of having to put your hands on the layout again for the second time. And, you probably also know that there are layouts that even with a small change get completely altered and lose their communicative and aesthetic effectiveness… a really frustrating result indeed.

A few pieces of advice on how to proceed without losing your head? Get pen and paper…

1. Mark the key words that must distinguish the company and that you want in front of your eyes during the project phase, so that not to lose the focus on want you have to represent graphically. Avoid complicated phrases and concepts, be organic: the more immediate you are, the more your mind can process the information quickly and easily.
2. Always in a schematic way, possibly as a list, write down the information useful for the design phase. What you have to do is record on paper only the information and concepts that you’ll need once you open the graphic program.
3. Ration out the information in stages, so that every phrase is as straightforward as possible. If you still have to design the layout of the homepage, don’t take notes on the contents to be included in the contacts page: avoid confusion and distraction. Note the information on different sheets of your notebook, so that you can be concentrated on one single step at a time.

This first phase of sketching regards the elaboration of the information in a schematic and simple way. You’re probably thinking that all this rigor and discipline has nothing to do with creativity and imagination and you want a change of scenery? Okay, let’s move up to the next step.

Step 02: Sketching As Part of the Creative Process

We said that the sketching is a creative process, but want does this mean in practice?

We can consider the sketching as a “middle land” between the information in our possess and the layout we’ll end up planning. In this territory, hostile and magic, we find colors, fonts, boxes, ideas, inspiration, textures, images, sensations, doubts…and much more. Useless saying that in the middle of all this it’s easy to be confused and to find the right idea, the idea that works and that makes us proud to be a designer.

I think that there’s nothing more irritating than finding oneself in front of a blank sheet, waiting for inspiration that is supposed to come from who knows where, and winding up with creating ugly layouts (then if you’re really lucky like me, you’ll be engaged with a colleague that takes the most of the situation to tell you that your work sucks without bothering to sweeten the pill so that it doesn’t hurt your sensibility as a creative).

One of my own sketchbooks… we’ll revisit this later.

Personally I passed some rough times with a few clients: inspiration didn’t want to come and my graphic proposals made me be ashamed of myself. I passed hours looking at gallery sites, feeling even more depressed because it seemed like everybody were able to create beautiful layouts, the only person who wasn’t able to put two rectangles together in a nice way was me.
In my case the ease of the pressure was made easy with the help of a pencil.

Give the kicking start to one’s creative process on paper frees in fact your imagination, allowing you to work in a more spontaneous and stimulating way.

Especially if the project you’re working on is huge and rich of technical details, considering all this, the first phase can certainly be castrating for the creative flux, not to mention the debilitating fear “to fail” that affects many designers: caught in the craving to do fast and well, we often remain paralyzed in front of the monitor unable to rearrange the ideas and channel them in the right direction.

Therefore, before starting to work on whatever kind of graphic program, get pen and paper and… sketch! Scribble, jot down a couple of ideas, start tracing a kind of abstract design to get familiarity and after free your intuition. You’ll analyze afterwards the ideas, now just let yourself go and avoid logic and rationality, they won’t help you in this phase.

Outline the layout, put down a couple of notes , erase it all, start again: during this process your mind works fast and frenetically, so take note of everything before this intuitive phase dims down! You’ll discover that giving complete freedom to your ideas is pleasant and relaxing, besides useful.

Make Mistakes… on Purpose

The first idea will rarely be the right one, be prepared to accept it. Sketching helps you to unblock yourself and seize different graphic opportunities that could be right for you immediately and lightly, but this doesn’t mean that you won’t commit mistakes in this phase. The positive thing is that even if you make mistakes in this phase you can always tear the sheet, sharpen the pencil and start all over again on a new sheet. Throwing away a layout created with Photoshop, just because you realized that it’s not the best solution for your case is without doubts demotivating.

Sketch, Don’t Wireframe

At such matter, I advice you not to confuse sketching with the creation of WireFrame: we’re talking about two different things, even if I see there’s some confusion about the argument. A few days ago a web designer told me, quoting his exact words “ah, you use pen and paper? I do everything online” , mentioning a site that permits to create mockups with a mathematical precision, with a complete control on colors and typography.

Well, this is not sketching, this is completely another thing. Clicking with the mouse on some buttons to make appear some rectangles doesn’t permit you to give a shape to your ideas and free your creative flux, try to believe. With this statement I don’t doubt the utility of a good wireframe, I just want to underline the differences between these two approaches.

Embrace Chaos

Put away your craving for precision, ruler and compass! In this phase there’s no room for order and rigor, so don’t limit the creative flux, blocking yourself on margins and white spaces, you can think about them later. In the same way, don’t worry if you’re not particularly artistically gifted and your manual abilities hardly allow you to hold a pencil: sketching is used for reordering the ideas not for forming gifted artists.

At this regard we must add that even if sketching was born as a free mean of expression of imagination and creativity apart your graphic abilities, this doesn’t mean that the sketch doesn’t also have, in a certain way, an artistic value. Let’s see together what I’m talking about.

Step 03: Sketching As Part of the Design Process

The tendency of many web designers to sketch has given the kicking start to a real graphic style that recalls somehow the aesthetic aspects of the sketching: we have brushes that mime its spontaneity and lightness, not to mention hundreds of fonts in hand-written style easily found in the web. Thanks to such resources creating today a layout in sketch style is quite easy, but besides this designs that use this graphic style usually have a touch of originality that make them appealing and out of the common run.

The sketch style, just because it’s associated to an activity common to many creatives, is often used in sites of freelancers or of communication/design agencies that want to transmit this concept graphically.
Anyway, even the combination of some sketch elements to a more traditional graphic can give a fresh perspective to otherwise ordinary designs.

Let’s see how some sites have used this style in an effective and original way and how this has influenced the aesthetic and the effectiveness of their layouts.

Kunal Chhajer

http://www.kunalchhajer.com/

The site of the web designer Kunal Chhajer reflects exactly the concept of the sketch style. The graphic is light and pleasant, it’s enriched in an original way by some designs that make the layout unique. The style is also recalled in the use of a hand-written font in the navigation menu. All these details give to the design the creativity that a designer wants to express in his personal site.

Creative With a K

http://www.creativewithak.com/

In the Creative with a K site there’s a massive use of sketches and doodles, just to clearly show the “creative nature” of the site. In this case even the peculiarity of the layout, so atypical, makes the site special and unusual, even if it’s difficult to consult.

Lega-Lega

http://www.lega-lega.com/

The site Lega-Lega is an online store of shirts with prints a bit out of the ordinary and it’s aimed definitively at a young market. The addition of some sketch details give a creative and perky cut to the site.

Beavory

http://beavory.com/

Beavory is the site/blog of Karen Mack, Israeli illustrator. The style of her site is deliberately based on a style that recalls her creative nature in a pronounced and original manner. Every detail, from the structure of the layout based on irregular lines – as if they were drawn with a felt pen- to the icons of the social network traces completely an effective sketch style.

Bowtie

http://bowtieperiod.com/

Bowtie is a digital studio that decided to represent itself really in a creative way on the web. The animations of the site, together with cute, uncommon drawings, make the layout attractive and strongly extravagant. They call themselves “creative” and, to prove it, they use elements in sketch style.

MakoMako

http://www.makomako.cz/home/

The layout of the band MakoMako is completely created in sketch style, so that the same structure of the page is based on a sheet of paper with irregular lines, and in the homepage as part of the design, we find besides the usual graphic details based on sketches and hand-written fonts, a pencil. A curious and a very unusual look for a band.

Stan The Snowman

http://stanthesnowman.com/

Now that’s almost summer a lot of its charm vanishes, but the graphic effectiveness of the site Stan the snowman however is out of the question. In this case the addition of stylized images and of a calligraphic font gives a spontaneous style to the layout, playful and informal. And it traces the concept of activity, based on writing greeting cards.

Greenaway Pro

http://www.greenawaypro.co.uk/

The festival Greenaway Pro 2011 site combines in a particular and attractive way the sketch style and the grunge style, giving to its layout a really original imprint. Also in this case the choice of this particular graphic style tends to express an informal, spontaneous and eccentric look . Perfect for a festival that deals with music and surfing, right?

Julian Laval

http://www.julianlaval.com/

Julian is another freelance web designer that wanting to highlight his graphic skills, exploited the communicative power of the sketch in a really creative way. Of course, it’s not only this that makes his site special, but even the curious and deliberately uncommon nature of his drawings. Like many other sites in this style, colors are limited to a gray scale, to make the illustrations more realistic.

Little Creatures

https://www.littlecreatures.com.au/

The site Little Creatures is completely designed in sketch style and thanks to the peculiarity of its sketches, so little refinished, the page is so attractive.

Le Carnet Ordinaire

http://carnetordinaire.com/

Carnet Ordinaire is a site that is like a diary, with travel notes, annotations and personal considerations. Considering the eccentric and intimate nature of the site, the sketch style is the most appropriate one: the layout is based on the image of an opened moleskine, enhanced by sketches and stylized drawings. Even the background is made more original with some cartoons inserted in opacity and by the presence of a pencil , left casually near the moleskine.

Wing Cheng

http://www.wingcheng.com/

The Wing Cheng portfolio is a perfect example of the fresh perspective that the sketch style can give to a layout. The page structure is based on an ajar moleskine, from which the pages fall down. The effect is made more dramatic thanks to shadows that frame the design and the use of calligraphic fonts for every content of the layout, from the titles of the projects to their description. But the real peculiarity of this site regards the exposure of the projects, also sketched in pencil in a really creative way.

Kuztown University

http://www.kutztown.edu/acad/commdes/faculty/

The Kutztown university of communications and design couldn’t find a better way to address effectively to creatives or aspiring ones. The layout is certainly unusual for an academic reality: the background in water color style, the page based on a page of a book, the illustrations in water colors, the particular fonts of the navigation menu… all original and certainly expressive details.

Dan Whittaker

http://www.dannwhittakercreative.com/

Dann Whittaker in his site shows a graphic style common to many web designers. A casual and spontaneous look, based on a page book layout and on a consistent use of details in sketch style. In the complex, the layout is very effective and pleasant aesthetically.

Chernobyl Heart

http://www.chernobylheart.org.uk/

In the case of the Chernobyl Heart site the sketch style is used to highlight graphically the concept of childhood: here we’re talking about children and we see it through some small stylized sketches that copy their way of drawing. Effective and pleasant.

Demain j’arrete

http://demainjarrete.stpo.fr

The sketch style is perfect to present on the web comics and illustrations, so that the layout represents visually and creatively the nature of the site. In the Demain J’arrete case, the whole site has a “charcoal” graphic style, starting from the gradient of the background to the irregular lines that contain the layout and the navigation menu.

Nature Shop

http://www.natureshop.co.nz/

Adding a couple of sketch details in apparently casual way, can give that special creative touch to a minimal and essential site. The result, visible for example in the site Nature Shop, is extremely pleasant.

Ready to Market

http://www.readytomarket.net/

The layout of the Ready to Market is an example on how mixing a modern style with some stylized and comic details can give a new and stimulating result.

Cou Cou Shop

http://www.coucoushop.ch/

The Cou Cou Shop is very nice and pleasant to see. One of the most particular elements of the layout is without doubts the footer, that shows a stylized landscape of Switzerland. Even the sketch of the bag from different angles is a very original detail.

Upside Down-Town

http://upsidedowntown.me/

Colorful, unusual and whimsical: the site of the learning center Upside-Down Town invests a lot on the originality of the sketch style. Every element of the layout, especially in the heading, points to the visual effectiveness of drawings, sketches and colors that highlight graphically and in a pleasant way children’s world.

Conclusions

We saw how the sketching process can help us to process ideas in a creative way and at the same time, how some sketches can give a different and original perspective to our layouts. Make sketching a habit when you start to work on a new design project – and not only- can come extremely handy also in other fields, like in the copywriting – and in time you’ll develop a flexibility of mind that will turn useful in your work. Therefore to conclude: turn off the computer and get paper and pen!

I finish sharing with you two personal sketches: a sketch of my current portfolio and the first ideas I put down for this article, during a really boring train ride.

Now, it’s your turn, I want to see your sketches!

Webdesigntuts+

At only 18 Adrian Romero Aka Vision is already creating a name for himself throughout the design world. With a very distinct style Adrian’s illustrations are extremely vibrant and spark about a variety of thoughts from its observers. In our interview Adrian explains the intended ambiguity of his art, as well as gives us a run down on how he created some of his more popular pieces. So be sure to check out this interview with another talented designer.

Hi everybody! My name’s Adrian Romero and I am a self-taught freelance Illustrator/Graphic designer from Spain. I started playing with Photoshop and Illustrator a few years ago. I instantly started experimenting and spent a lot of time on it, shortly after I was addicted. Ever since then I’ve been constantly drawing. This discovery has definitely changed my life.

Hip Hop Nation Magazine

I like my pieces to be ambiguous and I tend to be surreal. In my opinion, the perspective of how we see the things changes the context completely. That’s my intention when I create, I love to create some confusion around the main idea, maybe you see the piece and think thing the same that I thought when I created it, or maybe not and that’s pretty interesting.

Material

I love typography, and playing with it is one of the things I like most. Sometimes is a headache and I make a lot of changes before deciding what kind of typo I will made. Usually I start drawing different ideas on a notebook, then with those ideas I start playing on the computer till it fits well with the piece.

POWER

When I started my influences came from Spanish magazines like Belio magazine or Étapes and another Spanish artists or studios like Alex Trochut, Sergio del Puerto (Serialcut), Seleka, Vasava etc. But I’m also pretty influenced by movies, music and everything around me, a walk in the night can be one of the most inspiring things.

Life

That’s the huge decision that I have to make this year. I will finish college soon and I’ll start moving on and see what comes. I would love to go to university and I would love to travel to another country and study there. We’ll see what happens.

Sprains

Thanks! Destroy was a very complicated piece to me. It changed a lot since I started it and finally it went well. I used a lot of papers sketching. The main idea of the piece was to express the contradiction that the word destroy could be, depending on if we focus on the end of something or the new beginning of another one. Then in the piece we have some kind of machinery that feeds itself destruction to create, but not in a dark way, in a way to make the things a new and better.

Destroy

I’m working on some projects that I cant unveil yet and I’m also working with the Slashthree collective on something you will see at the OFFF in Barcelona.

Pyramid

Thanks for having me and thanks to everyone who follows and like my work. Bye!

Voyage

Where to find Adrian on the Web

• Adrian’s Portfolio

Misc Poster

Psdtuts+

A few times a each month we revisit some of our reader’s favorite posts from throughout the history of Vectortuts+. This tutorial by Jonathan was first published on April 14th 2010.

Merge form and function to create outstanding modern infographics. In this tutorial you will learn that data doesn’t have to be boring, it can be beautiful! Learn how to use various graph tools, illustration techniques and typography to make an accurate and inspiring infographic.

Step 1

Start by using the Rectangle Tool (M) to draw a shape. Give it a subtle radial gradient too.

Step 2

The entire design is based on a grid of four columns. To make the columns first select the rectangle and drag a guide onto the centre of the shape. Drag guides onto the left and right edges of the shape too. Tip: Quickly show the ruler by pressing Command+R.

Step 3

Condense the shape so it fits within the left-most guide and centre guide. Now, add another guide where the centre of this condensed shape is.

Step 4

Move the shape over to the right and add another guide to the centre here.

Step 5

Using the Rectangle Tool draw a thin white box on the centre line that will be the width of the gap between the columns. Add guides to both sides of the small box and delete the centre guide. Tip: Guides are locked by default. In order to delete a guide go to View > Guides > and uncheck Lock Guides. Then, click on the guide and press the delete key.

Step 6

Repeat the process for the other columns with your final result being below. Widen the orange box so it’s slightly larger than the outermost guides.

Step 7

I like to place the most important graphics first and work-in the ancillary charts and graphs afterwards. Pay attention to scale and balance as you’re beginning to place your elements on the page. Below, the combination of heavy and thin text complement each other.

Step 8

Early on you can experiment with placing a main graphic that will help give the piece some visual interest. I chose to use circles as the very tall orientation of the layout will benefit from these contrasting shapes. Using the Ellipse Tool (L) draw some arbitrary circles or varying sizes.

Step 9

Give the circles a variety of gradients. To access Illustrator’s predefined gradients go to Window > Swatch Libraries > Gradients > Bright’s.

Step 10

I’ve placed the first group of circles in the corner and extended them off the page.

Step 11

To ensure a clean edge we’ll clip the circles so that they look like they stop where the background stops. First, draw a rectangle with no fill or stroke. Make sure the rectangle is in front of the circles. Select the circles and the rectangle then go to Object > Clipping Mask > Make.

Step 12

I’m using a variety of graphs in this infographic. To create an accurate pie graph click the appropriate graph then click and drag on your document to create a graph at a specific size. The first graph we’ll plot the data, 50 tutorials with 39 being standard and 11 being premium. Having said that, enter 39 in the first box and 11 in the second. Press the tab key to advance to the next box. Once you’re finished click the checkmark icon in the upper right.

Step 13

Much of the styling of all the graphs is created by hand. To further manipulate the graph ungroup it by going to Object > Ungroup. You’ll receive a dialog as shown below. If you’re satisfied with the graph click OK. Tip: After you’re plotted your graph but before you ungroup it simply control+click on it and go to Data to further edit the information.

Step 14

This step is a matter of preference. I didn’t like how the small gray area was on the left so I flipped my graph using the Reflect Tool (O.)

Step 15

Manually add the graph numbers and key.

Step 16

As expected, I’m using the grid as a basis for how wide my graphs are. To create a dividing line between the graphs use the Pen Tool (P) and draw a vertical line. In the Stroke Palette select Dashed Line and enter 2pt in the first box. Tip: When scaling previously drawn strokes, check or uncheck Scale Strokes and Effect in the preferences panel (Command+K) to achieve un-scaled or scaled strokes.

Step 17

To create the effect of a recessed line draw two lines, one darker and one lighter.

Step 18

Place the darker line slightly above the lighter line to create the illusion of light coming from above.

Step 19

The next graph I’ll create is a Column Graph (J.) Again, click and drag to create the graph size of your choosing. Enter the values for your graph. The scale on the left is automatically generated based on the variables you enter. Click the checkmark icon when you’re finished.

Step 20

Ungroup your graph so that you can make visual edits to it. Below, I’ve condensed the graph so it looks taller rather than wider. Of course I could have just drawn the box for the graph tall but this is after the fact.

Step 21

Below, I want the text that corresponds with the graph to be a set width. To accomplish this, use the Text Tool (T) and click and drag from the top highlighted circle to the lower highlighted area. This will predefine the text area so the information fits perfectly between the guides.

Step 22

To create the icon of the man, use simple shapes. Start with the Rounded Rectangle Tool. Adjust the radius of the corners by holding the up or down arrow as you draw the shape.

Step 23

Draw a rectangle with no rounded corners for the torso.

Step 24

Use another rounded rectangle for the shoulders.

Step 25

Finally, use an ellipse for the head. Select all the individual shapes that comprise the man and in the Pathfinder click Unite. This will give you one solid shape.

Step 26

To create a more stylized graph we’ll use the man to represent the information. Using the Stacked Column Graph Tool click and drag to draw the graph the same height of the man. Enter your variables then click the checkmark icon.

Step 27

Ungroup and get rid of the other numbers and lines. Using the Pathfinder Palette again, click Divide. Now, each section of your man is divided into accurate sections. Ungroup all the shapes and get rid of the extra gray shapes around the edges.

Step 28

Separate each section of the man by selecting them using the Selection Tool and pressing up or down once.

Step 29

To create the scissors you’ll need to use the Pen Tool (P) and freehand draw the shape as shown.

Step 30

This graph is created using the Line Graph Tool.

Step 31

Add the key to the bottom manually and the figures above the points manually.

Step 32

The last graph is created using the Stacked Bar Graph Tool. Again, add the details manually.

Step 33

To add some interest to the design I’ve layered in the circle graphic behind the graphs. There is no secret to the process… as long as it looks good and helps balance the design, go for it!

Step 34

To create the list of comments draw a text box like we did in Step 21.

Step 35

Since comments will span from one box to another click the plus sign in the bottom right corner then click anywhere on the page and a new linked text box of the same size will be created!

Step 36

When dealing with large amounts of text it’s a good idea to create styles for that text. In this case I’ve created a style for the date and tutorial title. Styles make it easy to change all the text at once if you ever need to go back and make a change to color, size, font etc. To create a style first select the text that you want to style. Next, in the Character Styles Palette (use the Paragraph Styles Palette if you’re styling a paragraph of text) click Create New Style.

Step 37

Double click the new style in the Character Styles Palette to open up the options panel. In the options panel adjust your text to suit your liking. Click OK. Note: Even though you check Preview, new styles that haven’t been applied can’t be previewed.

Step 38

With your text that you want to style still highlighted, SLOWLY double click on the style in the Character Styles Palette to apply the style.

Step 39

I’ve created a style for the tutorial title in addition to a style for the date.

Step 40

Finish your design by adding any pertinent details to the bottom.

Final Image Preview

That’s it! You’ve just learned how to create a modern infographic.

Vectortuts+

Comic book covers are often beautiful works of art. A good comic book cover should not only preview the contents of the story but should also look amazing at the same time. One of the great things about the comic book industry is that there are so many comic book covers for us, as designers to look at. Comic books are a limitless well of inspiration and today, we will be taking a look at some of our favorite comic book covers of all time and will be showcasing them for you all to see. Please take a look and let us know if there are any that we left off the list.

Catwoman #53 Adam Hughes

For our first feature we take a trip to the DC Universe to check out this stunning Cat Woman cover. Artist Adam Hughes used an incredible angle mixed with some great color
combination. The neon blue colors from the skyscrapers perfectly set the tone for this cover.

Detective Comics #626 Michael Golden

Another breathtaking angle is used for this Batman comic cover. Just the cityscape in the background mixed with the thought of The Batman leaping through the city of Gotham makes for an amazing cover. The illustration and art design used for this cover is top notch and therefore deserves to be on this list.

Watchmen #11 Dave Gibbons

Simplicity speaks volumes in this case. As one of the most iconic graphic novels ever published, The Watchmen has been praised for its amazing story as well as art direction. These 3 covers feature different scenes throughout the book which are pivotal moments in the story. Each has its own meaning and its more symbolic than anything, 3 amazing covers from an
influential comic.

Batman #1 Bob Kane

The debut of Batman is another iconic cover, in this very first issue we are
introduced to a very popular color scheme that was constantly used. On top of that we are given some in-action shots of the protagonist and his sidekick. No reason why this shouldn’t be featured, this influenced many covers that came after it.

The Walking Dead #48 Charlie Adlard

This symbolic and ominous cover really portrays the comics’ contents perfectly. A single character in a graveyard surrounded by nothing but darkness and despair. The artist took the premise of the comic of a zombie wasteland and turned it into a visually stimulating cover.

Astonishing X-Men #2 John Cassady

Most of us who aren’t familiar with the specific story this cover is trying to tell can still appreciate the wonderment of the incredible design for this comic. The single blue tone that envelopes the whole cover sets a very specific mood which is then added to by the characters. There is a whole other level of symbolism in this comic when you look at the positions of the characters and the beams of light breaking through the hands of the female character.

Batman #648 Jock

Angles seem to really work out when you are dealing with characters that effortlessly fly through the air. The specific way that this artist is trying to show Batman’s course of action is very interesting. On top of that we usually don’t see Batman while its bright out, which adds another level of awesome to this cover. The painting looks realistic enough to mimic an actual photograph, which is another great element to an awesome cover.

Y The Last Man #14 J.G. Jones

This is the first of a few Y The Last Man comics featured for their amazing art direction. A cover like this can tell the viewer a whole story itself without even opening the comic up first. The whole position of the featured character mixed with the visuals going on over his body make for a classic cover.

Catwoman #55 Adam Hughes

Without even heavily featuring the main character Cat Woman this cover simply takes over the viewer with the beautiful neon lighting and dark cityscape. The expression of the woman on the cover also paints its own story that leaves viewers anxious to know what this whole scene is about.

X-Men #44. Andy Kubert

This is another brilliant cover that features incredible design and detail while putting on some symbolism for the viewer. The sheer
destructive force seen in this cover by Cyclops even seems to disrupt the X-Men logo which is seen to be all crooked and disassembled. A lot of emotion is felt when looking at this cover making it one of the best ones featured in our list.

Meathaus S.O.S. Tomer Hanuka

This is not a traditional comic cover with characters that are easily recognizable but we don’t really care. This comic features an incredible illustration, which has a top half that features an almost whimsical childlike scene and then drops down to a dead body in between all of that. The simple painting style this artist took really brings out the purpose of the story this comic is telling.

The Amazing Spider-Man #633 Chris Bachalo

We don’t usually see covers with the main hero’s being crushed to death, but that is why we picked this one. It takes a much different approach in showing us what this comic is mainly about. The painting is flawless and instantly captivates the viewer with its dark presence.

Spider Girl #20 Ron Frenz

We are used to seeing Spider Man in his futuristic dark costume but this cover takes a little different approach. The artist figured not to include any cityscapes or soaring angles to enhance the scene that is to be set with a cover. All that we see is the daughter of Spiderman in the future wearing one of his many iconic costumes, enough said.

Y: The Last Man #60 Massimo Carnevale

Readers of this comic can instantly understand all of the messages this artist is trying to convey with the final issue of this graphic novel. But for those who are just appreciating the art there is still a lot to appreciate about this incredible cover. The artist painted this flawlessly, the gritty scenery and the rays of light that converge with the man in the straight jacket to form the letter “Y”. There is so much more here to look at in wonder,
truly a great cover.

Wolverine: Flies To A Spider Tim Bradstreet

The irony of having a huge light display of the words peace mixed in with a blood spatter and
Wolverine of all people in the center makes for another stunning comic display. The painting style used here almost looks like a photograph, but then elements are added like the grit of the background to make this a lot darker to fit into the theme of the comic. Great art direction taken on this one.

Thing #5 Andrea Di Vito

The colors of this dark damp city really bring out the focal point of this comic. The Thing, standing amongst the citizens of this poor looking setting. There is obviously a story to this that without reading we
wouldn’t know, but we can always look at and enjoy the stunning imagery and detail of this painting.

Black Panther #9 Trevor Hairsine

Another cover where we see the main character in a scene of peril and hopelessness. The Black Panther being attacked by Dr. Doom, the artist decided to go with a simple cover that conveys a lot of emotion which we can see in the eyes of Dr. Doom and the position of the Black
Panther.

Sweets #2 Kody Chamberlain

I wasn’t really sure what this comic was about when I saw it but that didn’t really matter to me when I added it to this list. The art direction is fantastic and once again we see a full shot of
what’s going on in this comic from an unusual angle. The coloring and gritty textured painting make this crime story almost come to life.

Popgun, Vol. 4 Ben Templesmith

The artist who created this unique cover used a fantastic painting style to illustrate this futuristic comic. There is no sense of realism here, it looks like a traditional painting but with very cool visuals. The digital dragon
tattoo is one of the coolest things I’ve seen in this whole list, and the way the robot is pictured here gives it a very calming soft mood.

The Marvelous Land of Oz #3 Skottie Young

This comic was made to look something along the lines of a revolutionary poster. The basic elements of a revolution are
definitely in this comic cover, the design style is simple yet rough and textured. This
vector zed comic cover just screams Revolt, and it definitely deserves to be on this list.

Joker Lee Bermejo

The instantly noticeable grin of this villain makes for a simply gruesome comic book cover that just screams awesome. There was
absolutely no need to sully this incredibly gritty painting with any typography
describing this comic because everyone already knows what it is going to be about. This painting perfectly depicts the Joker with the rough and dirty painting style. An amazing cover with some amazing color selection that
definitely tie into what the comic is all about.

Batman #682 Alex Ross

Right after we feature the Joker its only right to bring out the Batman. This cover has an unusual color scheme but we can’t be helped but to be amazed at how this was brilliantly painted. With a flurry of classic heroes and villains meshed in the back interacting with the bright and loud neon signs and Batman logo make for a pretty perfect cover that has everything one can ever want in an illustration about the Gotham Knight.

Marvel Zombies #9 George Roussos

This series of comics definitely feature some of the coolest illustrations out there. What would we do if our favorite heroes turned into insane flesh eating zombies? Yea, a
Captain America Zombie! Although this was a semi old cover it still featured some
gruesome half dead illustrations of our favorite heroes just undead.

Amazing Spider-man 592 Paolo Rivera

The last two covers featured are definitely some of the more original ones that we have in our roundup. Marvel and the artists took
Wolverine and then meshed him with many classical artists. Dali’s famous surrealism is up for display here with a little twist from the adamantium man. Anyone who loves art can appreciate the quality of this comic cover.

Uncanny X-Men 508 Laura Martin

Lastly the artist that created this cover decided to mimic the painting style Van Gogh while still keeping it badass as
Wolverine always has. Who doesn’t love that he has a person’s ear on his claws, this cover is just pure
genius on so many levels. Bravo to those at Marvel and the artist’s who came up with this idea. There are a lot more of these types of comic covers so follow the link to see the rest.

Psdtuts+

In many parts of the world, spring is almost here. In this round up we will bring you 50 Photoshop tutorials to help prepare you for spring. This round up includes many tutorials that demonstrate techniques that have to do with nature, bright flowers, and being outdoors. Let’s take a look!

1. Grean Landscape Beanstalk

Shows you how to make a cool fairytale type illustration.

2. Create an Ice Cream Type Treatment

Learn how to make some colorful Popsicles this spring and be ready for summer!

3. Make Oranges and Lemons in Photoshop

Use Photoshop to make some oranges and lemons from scratch.

4. How to Create an Abstract Floral Explosion

Learn how to create a graphic full of spring florals and color.

5. Piece of the Artic Pie Chart

Make a cool 3D pie chart of the ocean in Photoshop.

6. Create a Flowerpot in Photoshop

Build your very own flower pot for all those spring flowers in Photoshop.

7. Nature Inspired Photo Illustration

Turn an ordinary photo into a cool nature inspired image.

8. Serene Fantasy Photomanipulation

Create a vintage style, serene fantasy nature scene.

9. How to Paint a Surreal Scene in Photoshop

Learn how to paint a surreal nature scene using only Photoshop.

10. Create a Glamor Scene in Photoshop

This tutorial teaches you how to make a glamor scene full of spring greens.

11. Create a Fantasy Out the Door Wallpaper

Make a neat image that pulls the spring outdoors, inside.

12. The Making of Eagle Ray

Learn how to make your very own pet stingray.

13. The Making of Underwater

Follow along and learn how to make a sweet underwater scene with lightrays.

14. Fantasy Out of Bounds

Design a framed up nature scene where the flora explodes out of the frame.

15. Create a Spectacular Grass Text Effect

Turn your text into a grass with a few easy steps in Photoshop.

16. Create a Nature Inspired Photomanipulation

Use Photoshop to create a nature inspired image to use in advertisements and posters.

17. Unreal Rose Bouquet

Make a splash with this tutorial that turns roses into something surreal.

18. Create a Vector Style Magazine Cover

Make a fun and colorful vector magazine cover, all in Photoshop.

19. The Making of the Frog

Create a cool frog silhouette on a bright green leaf.

20. Making of the Green Field

Watch the making of Vlads green field and learn how to make your own.

21. Making of Condensed

Short but sweet tutorial on making some water droplets on a solid background.

22. Create an Abstract Ecology Scene

Use Photoshop to create a vibrant scene full of nature.

23. Making of a Forest Magical Scene

Build your own magical forest scene with help from this tutorial.

24. Creating a Nature Inspired Digital Piece

Use some of the outdoors to get inspired and create this digital masterpiece.

25. Super Easy and Cool Flower Text Effect

With this quick and easy tutorial, you can create a pretty sweet flower text effect.

26. Glass Tomatoes

Here is a surreal tutorial that shows you how to take everyday tomatoes and turn them into glass.

27. Create a Flowery Natural Composition

This tutorial will demonstrate how to create a flower power peace themed composition.

28. Sunlight in the Trees

Learn how to create majestic sunlight rays through trees with this tutorial.

29. Create Soft Flowing Waterfalls

Perfect an old photographers effect with this Photoshop tutorial to create soft flowing water.

30. How to Create a Magical Painted Scene

Use Photoshop to create this painted magical scene full of color and creativity.

31. Magical Forest Photo

Yet another magical forest tutorial.

32. Elegant Typography on a Vista Background

This tutorial will demonstrate how to create some cool typographical treatments on a vista background.

33. How to Create a Spectacular Nature Composition

Nature is a spectacular thing. Why not use Photoshop to create a spectacular nature composition?

34. Create a Modern Heart Concept

Use nature as your inspiration to create the cool modern heart concept image.

35. Create a Dynamic Nature Poster

Create a poster that uses almost all the various elements nature has to offer.

36. Creating an Ecological Fairy Tale Wallpaper

Have some fun learning to make an eco friendly fairy tale scene with this tutorial.

37. Composing 3D Rendering into a Nature Scene

Use 3D rendering, Photoshop, and nature to create some amazing designs.

38. Making a Book of Magical Playgrounds

Let your imagination run wild with this tutorial that helps you create a scene right out of your favorite book.

39. The Enchanted Forest Fantasy

Use Photoshop to create your very own enchanted forest fantasy. G rated of course.

40. Create a Vibrant Conceptual Photomanipulation

Create a cool and unusual image with this tutorial that combines all sorts of spring time fun.

41. The Cute Flying Hippo

When pigs fly is a tutorial on how you can create hybrid animals through Photoshop.

42. Create a Green Planet

Use Photoshop to create your very own green planet.

43. Leaking Honey effect

Create this sweet nectar in Photoshop.

44. Create an Awesome Grass Texture

Learn how to make your own grass texture to use in many other projects.

45. The Magic Night

Create a surreal night photo manipulation full of color and mystery.

46. Making of a Magical Forest Scene

Another Photoshop tutorial to help you create your very own magical forest scene.

47. The Fantastic Tree

Create an ominous tree full of dark personality.

48. The Soft Sea Light

Use some big moon images and soft light to create a breathtaking ocean scene.

49. Day and Night

Combine day and night in this Photoshop tutorial.

50. How to Create Bamboo in Photoshop

Make your own bamboo using nothing but Photoshop and some mad skills.

Psdtuts+

Michael Doret’s career works have influenced generations of designs. You might be familiar with his design works if you have seen his logo for the NY Knicks or one of his many Time covers or the album cover design for KISS band and the Squirrel Nut Zippers.

He has designed a number of beautiful fonts with up to 2000 glyphs per font, and endless ways of using digital technology to emulate hand-lettering. We recently had the opportunity to interview this award-wining designer, lettering artist, and illustrator. Michael talks about his childhood influences, his education and his brilliant start at a freelance career. He tells us about his experience working with some of the big clients and the valuable projects that challenged him to explore his creative potential.

I grew up near Coney Island in Brooklyn, NY. Dating back to the beginning of the 20th Century, Coney Island was a very well known amusement area in New York City, and all its sights and sounds left quite an impression on my young mind – the effects of which can easily be seen in most of my work. My career began and developed in New York City, but in the early ’90s I moved to Los Angeles where I currently live and work together with my wife, illustrator Laura Smith. My work almost always revolves around letterforms – whether it’s a logo design assignment, or one of my own font designs.

I don’t really have a “typical” day because every day there are new surprises that usually need to be dealt with. But suffice it to say that I absolutely love what I do (working with lettering) and I’m happiest when I’m being creative.

The main focus of my higher education at The Cooper Union in NYC was actually Fine Arts. At the time I started college I didn’t know in what direction I wanted to go, but after a year or two at Cooper I knew that I wanted to be a graphic designer. At that time the course offerings at Cooper for graphic design were rather limited, so I took extra courses and got as much additional education as I could outside of my regular day classes. I graduated with a Bachelor of Fine Arts degree, but this degree played little or no direct part in my career success. Practically everything that I do now was either learned on the job or self-taught after I graduated and started working.

However, I will say that the formal education I did get at Cooper Union was priceless to me. It gave me the background, the foundation, and the tools I needed in order to be successful at what I eventually decided to do with myself. So if you have the opportunity for a college education I would definitely suggest taking that opportunity and using it — if nothing less — as something to use as a basis to build a career upon. Otherwise, in my opinion, you will be skating “on thin ice.”

I was extremely lucky that at the beginning of my freelance career I was able to hook up and partner with some very big names in the illustration world such as Charles White III and Doug Johnson. Working together with them gave me instant access to some very big clients. So very early on in my career my lettering appeared in places that were very visible to millions of people: for example in such pieces as the “Screaming Yellow Zonkers” poster I did with Charles White III, and on the New York City Yellow Pages cover with Doug Johnson. Although when I was starting out I worked for very little money, the experience of working with some very visible clients was invaluable to me — especially for my self-esteem. I knew that what I was doing was really good, and so I never assumed that any job was out of my reach. I didn’t always get the projects that I wanted, but I was never so intimidated that I was afraid to try.

The projects that have been the most valuable to me have been the ones that have challenged me to go beyond what I thought I was capable of. Some of these projects have been the album covers for “Rock and Roll Over” and “Bedlam Ballroom,” the logos for the “New York Knicks” and the “Graphic Artists Guild,” and my covers for TIME Magazine and the Toronto Bluejays. All those projects forced me to step beyond my usual way of solving problems and try something a little different.

I was assigned that project because at the time I was working on some projects with the agency (Howard Marks Advertising) that was working with KISS. They were familiar with my work and thought it might be interesting to see what I would come up with for an album cover design for the group. The members of KISS agreed, and so I started work on that cover design.

The concept I developed was rather simple and obvious — I took the name (Rock and Roll Over) and very literally illustrated it by creating a design that could be rotated (or “rolled over”). The group members liked the idea and so I developed a colored pencil sketch to show them.

After I presented them the color sketch there were a few minor changes — mostly in the details of their faces. After that I created the final art which was done as a “mechanical,” or “pre-separated art” (black ink on drafting film overlays). That was in the pre-computer days. I recently recreated that art in Adobe Illustrator for a limited edition large scale print that is available from the KISS Online Store. The actual cover was printed in five Pantone match colors. This was very unusual as most album covers were typically printed with standard 4-color process printing.

Paul Stanley definitely wanted the new cover to relate very closely to the older one stylistically. The design process for the newer one wasn’t that different from what I went through for the earlier one. But then again my design process hasn’t really changed. Design is first and foremost a mental process — not a digital or an analog process.

Designing really has nothing to do with software, or in the case of the earlier cover with colored pencil, pen and ink, and drafting film. It has to do with ideas, and with a designer’s vision of what they want to achieve. Whether he or she realizes that vision with digital tools or with analog media isn’t that important.

I transitioned from my analog tools to working with a Mac back in 1995. I made that transition primarily because it was expected of me by my clients. It became clear to me that if I didn’t no one would know what to do with my “mechanical” artwork.

That said, I should emphasize that I still begin my projects the same way I always did — with pencil sketches on tracing paper. In earlier years I would take the final tracing, place it underneath my frosted mylar overlays, and do my finished inking over it with a Rapid-O-Graph. Now I take that same tracing paper sketch, scan it, place the scan in Illustrator, and work over it.

My style hasn’t changed that much. I don’t believe that style is something that you can consciously control. I believe it’s a result of who you are and what your influences have been. I speak about this extensively in a talk that I give called “It Began In Brooklyn.”

The transition to digital media was very easy for me. Perhaps it’s because I had a predilection for mathematics, which certainly seems to be beneficial in understanding how Illustrator works. The other thing I like about working digitally is that it allows me to do things design-wise that would otherwise have been very difficult for me to achieve — such as integrating complicated textures. Also working in Illustrator has allowed me to do my work more accurately and much quicker than before.

Lettering and type have always been a part of what I do. As I mentioned earlier, my first work was with some well known illustrators: what I tried to achieve in my work with them was to integrate my lettering into their illustrations in a way that was seamless — where it became something more than letters placed over an illustration.

I’ve been interested in font design for a long time, but only recently has it become a viable way to make a living. I actually did a font design back in the ’70s for a film called “Savages.” At the time there were no digital fonts, and this design went no further than the use in the film. But a few years ago I decided to create a digital version of this font. Even though it was not my first digital font, the reality is that it was my first real font design.

For me font design is a very, very labor intensive process. It takes me many months to create a finished font design. In earlier years, the amount of time I’d have to invest was way too much for the amount of money that I would probably make from the design. So it wasn’t cost effective for me to do it. The fact that many people are now buying fonts for their personal computers has made the process of font design financially a much more realistic endeavor.

The process is actually different for each typeface that I do. But as different as they all are, they’re all very personal to me. It would be very difficult to describe the process for any one of them here in a few words.

For example, Steinweiss Script evolved out of cover lettering I designed for Taschen Publishing for a book on the work of Alex Steinweiss – “The Man Who Invented the Modern Album Cover.” That story is quite involved, and spanned more than a year, but those who are interested can read about it here.

I’d have to say that my favorite part of the type design process comes at the very beginning when I hone in on what will be the actual design of the font — what makes it distinctive and what makes it work. After that, it’s actually a lot of very tedious technical work in a program called “FontLab,” which I’m actually not that excited to do. So I work with a guy named Patrick Griffin in Canada who is really good at this programming work, and is happy to work together with me on it.

The naming of the font can actually be one of the hardest parts of the font creation! Why? Because there are so many fonts now, and almost any name you can think of seems to be already taken. “Grafika” (the font I designed for that movie “Savages”) was originally named “Chrysler” (after the Chrylser building in NY), but after I created the digital version a few years ago, I found that the name was already taken. “Steinweiss Script” was a fairly obvious choice, but I felt that I needed to get permission from the Steinweiss family to name it after Mr. Steinweiss (I got it).

Not only was Deliscript honored by the Type Directors Club last year, but this year it was selected by Communication Arts to appear in their first Typography Annual as a winner in the Typeface Design category.

In brief, Deliscript took its name from its initial inspiration — a neon sign over the front of Canter’s Delicatessen in Hollywood. The story behind this typeface was actually much more involved than that: in an article I wrote for the AIGA, I describe the whole process and how, in an interesting turn of events, the process turned back on itself and led to my actually working on a design for Canter’s new food truck.

As far as my favorite fonts are concerned, that’s a difficult question. My fonts are all quite different from each other, but I’d have to say that if I had to pick favorites that they’d all probably be my scripts: Steinweiss Script, Metroscript, and Deliscript. They are three fonts in which I feel I have tried to push the boundaries of what’s possible to achieve with a font. They all have extensive OpenType features that allow them to do things that most other fonts cannot do. These features help to remove them from the realm of standard typesetting and to achieve a little bit of the look and feel of hand lettering.

Yes, I’m currently working on an identity project for a new concept in restaurants. I cannot divulge too much about it because of confidentiality, but I can say that this concept may change the way we experience restaurants. I’m involved with creating the overall identity, and then the individual identities and signage for several different types of restaurants that will fall underneath the larger “umbrella” identity.

I’m very excited about this project because it will allow me to try to expand the possibilities of what I ordinarily do. It will allow me to try to move beyond what everybody usually expects from me and create what I hope will be surprising graphics. Trying to do something different and interesting is, I think, what excites designers like me the most.

Although I do love to listen to music, for me it’s not easy to listen while working. It can be difficult because of constant interruptions, phone calls, and sometimes the need to concentrate and focus on what I’m doing. Listening to music that must be turned on and off is not fun! What do I listen to? Anything that’s new, fun and/or experimental! Lately I’ve been listening to M.I.A., Girl Talk, Beck, and Zap Mama.

Getting out into the world and just looking around can be very inspiring to me. Traveling around the globe, experiencing things with fresh eyes is what really gets my creative juices flowing. I just got back from Paris, where I was visiting my son. Getting away from my studio for a while, and exposing myself to what’s going on in other parts for the world is really good for one’s creativity.

Actually yes. The one thing I would stress to young designers and illustrators is that what software you use is not as important as your thinking process, and how you solve problems. Of course it’s important to master the software you’re using — whether it’s Illustrator, Photoshop or whatever. But you shouldn’t lose sight of the fact that the software is there to serve your needs — and it shouldn’t become so important that it takes over and controls you. When I look at a great piece of art, I don’t want to be aware of what kind of paint the painter used. In the same way, the software should become invisible and subordinate to the vision of the artist.

Michael Doret on the Web

• Portfolio
• Alphabet Soup Fonts
• Prints for Sale
• Blog
• Twitter
• Facebook

Vectortuts+

Today we’ll meet British designer Chris Spooner. He became widely known thanks to his two successful blogs Blog.SpoonGraphics and Line25. Chris has written plenty of excellent tutorials on vector graphics and web design. Learn more about Chris Spooner, his tutorials and blogs after the jump.

I’m Chris Spooner, I’m a designer/blogger from Sheffield, UK. I studied Art and Design throughout School, College and University and ended up with a BA(HONS) in Art & Design. Although despite my educational background I’ve picked up the majority of the skills I now use on a daily basis through self teaching and experimentation.

Right now I’ve cut off the majority of client related work in order to concentrate on my blogs. I find it much more fun to create work for myself than it is for other people!

I tend to work on jobs as they need doing. I don’t really plan out a specific schedule. Some days I’ll be in a really creative mood and manage to complete multiple jobs in one morning, other days might be a little slower and I hardly get anything done. I’ve been running my blog(s) for over four years now so creating article and tutorial topics each week has become pretty routine.

Twitter has now become a great way of just keeping in touch with designer friends. I used to use it for discovering awesome design content but it seems the level of people actual posting links has dropped over the past year or so. Twitter is the one network I check routinely, but I’m also fairly active on Facebook, YouTube and Dribbble.

I’d say it’s definitely worth investing the time. I’ve manage to build a complete living out of writing tutorials. At first the tutorials helped develop me exposure and become more well known in the industry, then they began bringing in project work, now they’ve reached a level where the traffic they receive helps cover my living expenses. Don’t worry about not feeling like you’re good enough either, the most popular tutorials are those where you show the basics. There’s always going to be someone at the same level as you and below, so share what you know with these people and you’ll see the benefits in time.

I always find that the designs and tutorials I think will be really popular often don’t perform quite as well! A couple of designs that I have been proud of, and have actually been well received are my gothic blackletter typography and sugar skull illustration tutorials.

I do enjoy creating videos because having watched other people on video I’ve found it helps develop that personal connection to your readers. I’d love to create more screencast type tutorials, but my working process when originally creating the design is so random and chaotic it would be too hard to follow and narrate. When I create written tutorials I go back and dissect the design, so this cuts out all the false starts I had when creating it from scratch.

I’ve always been the only author on my blog as it’s pretty connected to my personal style etc, so one post per week fits into my schedule quite well. I’d like to think that posting one in-depth post per week is better than multiple smaller tutorials. Obviously multiple in-depth tutorials would be awesome, but until they master human cloning I’ll have to stick with one main post per week.

I have a good few ad spots on my blogs, but I aim to keep them non-intrusive. I know a lot of design blogs have ads in all kinds of places, which is great for squeezing extra dollars out of your site, but I don’t want to put my loyal readers off. There’s a series of 125px banners in the sidebar, then a larger ad above the content which only appears on older posts. There’s all kinds of other ad types I could consider – footer banners, more ads in the sidebar, CPM ads, RSS ads etc, but until the time comes where I need more income I’ll not be too greedy.

I guess it all depends on the individual. I’m blessed with being able to pick things up pretty quickly – A bit like in the Matrix – “I know Kung Fu.” The saying “Jack of all trades, master of none” springs to mind, but I like to aim for “Master of all.”

I find many of the things I focus on overlap, for instance graphic design, illustration and web design all have skills that interlink and can be used in each specialism. I do have limits though, if there’s anything beyond my comfort zone I won’t take it on as project work.

I don’t think that being inspired by others prevents you from developing your own style – Browsing other people’s work is actually what gives me the buzz to create cool stuff myself. As for creative blocks, I tend to step away from the computer altogether and go for a walk with the dog. While I’m away from the computer ideas will still be developing, so the next time I log on there’s usually some fresh directions to try out.

I’m probably quite boring compared to most people! I’m not much of a party animal. I do enjoy donning my combat gear and blasting people on Call of Duty Black Ops on my Xbox, so I recently set up a YouTube channel to share tips and tactics to be more productive with this time. Otherwise I enjoy frequent trips to the gym and enjoy a movie with my fiancee every now and again.

Well my latest little project is my YouTube gaming venture I recently mentioned – It’s non design related but it gives me something to enjoy myself with outside of the design spectrum. Otherwise I’m pretty worked up with my current projects so there’s nothing on the cards.

I always advise for new designers just to have fun creating stuff and don’t get bogged down with wanting to work for clients. The best part of being a designer is being able to create cool stuff to fulfill your creative desires, so remember to keep fueling your passion with personal projects as much as you can.

Chris Spooner on Web

• blog.SpoonGraphics
• Line25
• Flickr
• Behance



Vectortuts+

We’re back with a new installment of our “The Best of ThemeForest” which is a curated list of the goings-on at one of the world’s biggest premium web design retailer. Whether you’re searching for inspiration, or looking for something to buy, be sure to check out our roundup after the break. And this month, we’ll be introducing some additional items from other marketplaces such as web elements from GraphicRiver and CodeCanyon.

Featured Author

This month’s featured author is obox. Obox is ran by two brothers, David and Marc Perel, who work together with one designing and one developing. Their portfolio of eleven themes has amassed 156 sales (at the time of writing) earning them a red paw. The South African pair have also gained 40 followers since their January 2011 joining date.

Featured New Author

DMThemes is quite a ThemeForest phenomonon who launched their only theme, CircloSquero, at the end of February. Less than a month later and it’s already been sold over 600 times and have a solid four-star rating. Considering this has been done in far less than a month is an amazing feat for the duo followed by 84 users.

Free File of March

PHOTOME is this month’s free file of the month, the one file on ThemeForest you can download without charge for one month only.

PHOTOME is a photography portfolio template that comes in two flavours of wood. This version is a static site template, but a WordPress version is also available from the same author. The integrated AJAX slider looks great and works unsurprisingly well with the dark wood background. Be sure to grab it before thr turn of the month!

The Best of ThemeForest…

March has seen some great new themes available on ThemeForest and this roundup recognises the great work that designers and developers alike have put into the marketplace. In compiling this list, i’ve tried to pick out some of the most unique additions to the marketplace but, if you have any personal favourites, be sure to share them in the comments section of this post.

Minerva

Minerva is a minimalist business template designed with product promotion in mind. The package you’ll get for your payment is a 19-page, valid XHTML site with PSD and a working contact form included.

ANAN

ANAN is a photography theme that’s typography is just stunning! The body of ANAN’s theme is a large image and there’s multiple page templates which lays content out in alternative views. This file also has some text templates for individual gallery pages. The price tag for this file is a huge bargain, in my eyes.

Qloud Landing Page

Qloud is a landing page for, what seems to be, software promotion. Qloud has an attractive range of typography, and – since it’s a marketing site – conforms to many design principles including the Z-layout.

Coverage

Coverage is a WordPress theme that markets itself as a “unique portfolio theme”. The theme taeks advantage of some wordPress 3.1 features including the WP3 menu system.

Freshfolio

Freshfolio is an curvy, horizontal, HTML theme aimed at [guess what], portfolio designs. If the theme’s not attractive enough, the price tag will be!

LooseLeaf

Looseleaf is a “woodsy, natural” theme that’s surprisingly attractive. Head over to the theme demo and check out the page demos. The container breaks for the titles really complement the natural style.

Plus over 3,600 more…

As always, ThemeForest hosts thousands of great themes. Marrying a great review team with stringent quality guidelines, pretty much every file on ThemeForest is great and you should be sure to check out the wide selection available.

Across the Marketplaces…

ThemeForest is Envato’s web design marketplace, however it’s sister catalogues also feature some great web elements to use as part of, or aside, web templates.

UI Elements for Web UX Mockups

These UI elements demonstrate a beautiful set of professional buttons, sliders and icons.

Pricer Pricing Grid

Pricer is a CSS3 pricing grid available in three colour styles and is totally devoid of images or javascript. The file is cross-browser compatabily (including Internet Explorer 7 and up) and supports animation on some browsers.

Stiched Green Buttons

These buttons are an attractive set of green buttons with a nice, stiched effect on the ribbons. These are some of the best buttons i’ve come across this month and, if the green turns you off, it’s incredibly easy to change the colour which just makes the whole package even better.

WordPress Ken Burns Slideshow

WordPress Ken Burns slideshow is a plugin for the popular blogging platform that generates a pan-and-zoom effect on a gallery of photos. This is not all, however. There’s also an semi-transparent overlay with text. The only connotation is it’s Adobe Flash roots causing some incompatabilities.

The Month at ThemeForest

ThemeForest Drops IE7 Compatability

ThemeForest staff announced it has dropped the Internet Explorer 7 compatability requirement for new themes due to it’s decreasing market share and the recent IE9 release. However, IE 9 compatability will not be a requirement until a few months down the line once authors have familiarised themselves with Microsoft’s critically-aclaimed, new release.

RevaxArts launches The Documenter

Ever feel the pain of writing out documentation for your new ThemeFores themes? RevaxArts has launched a new, web-based service to spice up the documentation process to create an attractive file. The service itself is very simple and free to use so be sure to check it out (and, if you want, offer Xaver a donation to thank him for your legion of satisifed buyers).

Developer Changes

Finally, let’s go behind the scenes and note that there’s been some changes in the marketplace’s development teams. Whilst this may not directly affect your purchasing or creation on the various sites, you may be interested to know. Firstly, new developers have been added to the marketplace teams in the form of Mark and Chendo. On a sadder note, developer John writes on the forums:

On a sadder note, we’ve got a couple of departures: Glen from the marketplace team finished up with us a couple of weeks ago, and Fred who did a lot of work taking care of creattica and freelanceswitch is wrapping up today.

I’m sure you’ll all wish those the best and look forward to another month of ThemeForest (and another roundup at the end of it!).

Webdesigntuts+

In this tutorial you will learn to create a stylish x-ray print in just a few easy steps. It’s perfect for stylized typography or even an element for an illustration. Let’s begin!

Step 1

Create a new 256 by 256px document

Step 2

Select the Rectangle Tool (M) and click the art-board. Set the dimensions to 256px and 256px. Align the rectangle to the middle of the art-board both vertical and horizontal dimensions.

Step 3

With the rectangle selected go to Effect > Warp > Squeeze. Select Horizontal and set the Bend to 10%.

Step 4

Go to Object > Expand Appearance. Set the object’s height to 256px.

Step 5

Create a rectangle using the Rectangle Tool (M). Rotate it about 45 degrees. Select the squeezed object and the rectangle (holding Shift), open the Pathfinder panel and click Divide.

Step 6

Press Command + Shift + G and delete the part of the rectangle that does not intersect with the squeezed object. Select Convert Anchor Point Tool (Shift + C) and click each Anchor point of the triangle. Select Direct Selection Tool (A) and move the top right corner of the triangle to the bottom left.

Step 7

Make a copy of the triangle and up-size it a little bit. Intersect it with the copy of the squeezed object using Pathfinder panel. Send it Backward – Command + Left Square Bracket.

Step 8

Create a copy of the black swatch, double click it and check the Global check-box. Select the squeezed object and color it with a radial gradient. Pantone DS 213-2 C (Blue) for the left Gradient Slider (Opacity – 80%), Black for the right Gradient Slider. Add another Black Gradient Slider, set its Opacity to 90%, Location to 74.85%, on the Color Panel – 95%. Set the angle of the gradient to -45%. Select Gradient Tool (G) and move the right Gradient Slider to the bottom right corner of the squeezed object.

Step 9

Color the top triangle with a gradient fill: Blue for the left Gradient Slider (Location – 0%, Opacity – 80%, Color – 26%), Blue for the middle Gradient Slider (Location – 35%, Opacity – 80%, Color – 80%), Black for the middle Gradient Slider (Location – 100%, Opacity – 90%, Color – 70%). Select Gradient Tool (G) and adjust the angle of the gradient. Color the lower triangle with a gradient fill: Blue for the left Gradient Slider (Location – 0%, Opacity – 80%, Color – 50%), Black for the right Gradient Slider (Location – 100%, Opacity – 90%, Color – 100%). Set the gradient’s angle to -90 degrees.

Step 10

Create a 2 copis of squeezed object, make one of them slight bigger and intersect it with another. Set the resulting object’s gradient fill to Linear with following sliders: Black (Location – 0%, Opacity – 100%, Color – 100%), Blue (Location – 20%, Opacity – 80%, Color – 70%), Blue (Location – 80%, Opacity – 80%, Color – 70%), Black (Location – 100%, Opacity – 100%, Color – 100%),

Step 11

Select Text Tool (T) and type “AI” using Bone Regular font (size 180pt). You can download the font here. Set it’s color to Blue – Color 70%. Go to Effect > Stylize > Inner Glow. Set Mode to “Sreen”, color – white, Opacity – 100%, Blur – 7px, check “Edge”.

Conclusion

Finally create a copy of the text object. Press Shift + X and set the color of the stroke to white. Set stroke Weight to 2pt using Stroke panel. Go to Effect > Stylize > Outer Glow. Set Mode to “Normal”, color – white, Opacity – 100%, Blur – 4px.
This is it!

Vectortuts+

These are exciting times to be a web designer. CSS is finally starting to catch up to the visions of the beautiful websites we have in our heads. No longer do we have to rely on hacks and images to create wonderfully engaging interfaces! But we can’t just rely on browsers to usher in this new era. As creators we have to be flexible and adapt our workflow to encourage these new best practicees. It’s time to rethink how we make websites.

What I will be discussing today is not new or groundbreaking, but rather an extension of what you already may have suspected deep in the back of your mind for quite some time now. This article is going to serve as a counter-point to a lot of the other articles on this website that focus on Photoshop and Fireworks, but they are just the opinions of a single designer, so you can take them or leave them.

Meet Your New Design Tool

Our new blank canvas.

Rethinking Web Design Workflow

The new streamlined workflow.

If you’re anything like me, when you start a new website, you break out the sketchbook and start scribbling down ideas. You then open up Photoshop (or Fireworks) and hammer out the design. Code doesn’t even factor into it until the very last stage.

This is a fundamentally flawed idea, for many reasons. For one, a website is not an image. A finished website is a flexible, moving thing, built with HTML or CSS. Photoshop gives us (and our clients) unrealistic expectations for how a website will look and behave. You should be thinking about how the design will translate into code all the way through the design process.

Secondly, the whole concept of one “finished” design for a website is wrong. Building a Photoshop mockup and then saying “all right, now on to the code” gives a permanent feel to a web design, as if you were proofing a print before sending it off. One of the huge advantages of the internet is that it is ever-changing. Stamping a mockup as done says that this is the final version of the design that will exist. As designers, we should embrace the ever-changing nature of our medium and recognize that a design is never actually finished.

The advantage of designing with code is that you are forced to think about the content and the styles as two different things. The content will lead the design, rather than the other way around.

The Tools

Obviously, you’ll need a browser. In fact, you should really have a few of browsers for testing. (Aside: I recommend Wine for IE testing on the Mac). At the very least you should have a Webkit-based browser like Safari or Chrome, as well as a Gecko-powered one like Firefox. If you’ve done any sort of web design before, you’ll doubtlessly have this area covered.

The web designer’s pyramid.

You should also have a decent code editor as well. Preferably something with a live-update feature like Espresso or Coda. I personally am a huge fan of TextMate, although it does not have a live-update mode. Again, as a web guy/gal you probably already have a favorite, but I might as well mention it for any newcomers.

Sketching

Sketching is arguably the most important part of the design process. That shouldn’t change even if you design inside the browser.

You should still have a solid idea of what the design should look like before starting on the computer. At the end of the day, this is still design, and you should still use a sketchbook. I won’t go into detail about this part of the process, seeing as you, as a designer, should already be familiar with it. Just know that the same rules apply. You wouldn’t open Photoshop with no idea how your site will look, that would be crazy!

Actually, it doesn’t have to be sketching. Just do what works for you to create the concept. Whatever that may be, the important thing to consider is getting a solid idea in your mind before starting on the computer.

Image credit: Sean McGrath.

Layout

Layout is without a doubt the most important part of this process. You could have the most beautifully selected fonts, perfect colors, and delicious little details, but without a solid layout, the whole design will fall flat. Fortunately, building a solid, float-based layout with CSS is one of the easiest things you can do as a web designer. A List Apart has a Great Article on the subject that I highly recommend for the technical details of building a CSS-based layout.

If there’s one thing you should already know before going into your code editor, it’s the layout of your design. If you have a specific layout in mind, it’s a simple matter to code it up. However, if you go in without a layout in mind, I think you’ll be disappointed at the results. Layout isn’t a thing you can just experiment and switch out on the fly, it’s a matter that requires careful consideration on the designer’s part.

Even if you don’t know exactly where every element is going to live on the page, you should at least have a general idea of placement of main elements, as well as the proportions between those elements.

One of the great things about this new movement of “Responsive Web Design” is how it encourages designers to think in proportions, rather than pixels. For instance, you could say that this element needs to be 30% of the main container, as opposed to 200px or a similar measurement. This especially comes in handy for in-browser web design when one has to structure a page. You could start off with a main container element that is, say, 70% of the browser window, and then design the rest of the page inside that container in proportion to that element’s width. No more messing about with exact pixel measurements and that stupid Ruler Tool in Photoshop!

Type

Image credit: Jennifer Chong.

At this point, you should all have at least heard of @font-face, even if you haven’t used it in a project yet. For all, i don’t know, one of you that hasn’t heard of it, here’s the one sentence version. @font-face is a way of embedding and using any typeface for use on a website, even if it is not installed on your users’ computers.

This simple idea has brought a whole new era of web typography in a matter of a few years. Entire businesses like Typekit and Fontdeck have cropped up for the sole purpose of serving up beautiful typefaces for your website. In the past we’ve been forced to rely on hacky methods like Cufon or just regular images to display our type how we want it, but all that is changing. Type foundry’s have largely embraced the new format, modifying their licenses to allow embedding, or even allowing their fonts to be hosted by Typekit.

So this is great, but what does it have to do with designing in-browser? Well, my good sir, I’ll tell you.

It’s a lot easier to manage typefaces when they are managed by CSS rules, not Photoshop…

Mucking about in Photoshop to change every single bit of text to a selected typeface becomes a little ridiculous after a while. In code, you can preview changes and test out different typefaces, weights, and sizes just by changing a few lines of text. This allows you to iterate your designs more quickly, and let’s you adapt a design for client requests with a few simple keystrokes.

All that power gets a little bit ridiculous when you consider that we now have an infinite number of typefaces to work with. As long as the foundries keep doing their thing, and Typekit keeps doing theirs, designers will never lack an appropriate font.

I highly recommend using Typekit, as many more fonts are available there than with a standard @font-face license. You can always manage the code yourself, but dealing with licences and having to purchase each font individually gets pretty ridiculous pretty fast. This is the option I’ve chosen on a few projects, and while it’s still infinitely better than what we had before, the experience wasn’t the best.

When it comes to chosing fonts, have fun with it! Experiment, try something crazy. If you’ll excuse the blatant self-promotion, I’d like to point you towards another article of mine.

Color

In a “traditional” web design process, often the designer starts by constructing a grayscale mockup of their design in Photoshop, before adding the colors and details needed to make the design pop. This process is integral to the layout and overall feel of the design. Even if you don’t use black and white, constructing your design in sets of boxes and simple shapes really lets you see how your design will work from a higher perspective. The building of a design using simple boxes is really easily converted to our in-browser workflow. Just use <div>’s with basic CSS applied to them!

Once you have your layout and typography marked up and styled properly, introducing color becomes a trivial matter with a few lines of code. This isn’t to say that choosing the colors is an easy and simple technique (although there is a great article for that too), just that coloring the objects on a technical level is very simple. Even displaying beautiful gradients is easy with CSS3.

When I’m coding in color to a design, I often have Photoshop open (gasp!) to choose the colors. I’m sure there’s some great tools available online that provide a color picker for generating hex codes and rgb values, but for whatever reason I still use Photoshop’s. This is out of convenience, because usually I already have Photoshop open, but I’ll get to that later.

As with typography, the best color schemes come from experimentation, so have fun! Here you can see the power of an in-browser design process when you can change the backgrounds and text-colors of many elements on your page with a few keystrokes. With a Photoshop mockup, changing the colors of multiple elements was an arduous task, involving precisely selecting layers and clicking through far too many buttons a windows, but no more!

Details: Know When to Use Photoshop

Remember how I said that I usually have Photoshop open when coding a website? Well it’s time to break something to you, young padawan. Very few sites can be developed with no use of Photoshop. I mean think about it, even if you use an entirely browser-based workflow, there’ll still be at least one or two custom images on there somewhere, say, a background or an icon of some sort. Unless you know of a way of making images without an image editor like Photoshop, you, or someone else will have to bring up Photoshop or similar software to make those textures, icons, and what have you.

Photoshop isn’t all bad. My main argument in this post has beeen that it isn’t at all good for designing websites, but as an icon designing tool, it’s actually kind of great (if you ignore how maddeningly often it crashes, which I try to). In any case, at some point during the creation of a web design, you’ll no doubt have to generate some sort of custom graphics. I have no problems with PS being used for simple things like a repeating background, texture, or icon that will ultimately be part of a larger web design.

Likewise, Fireworks isn’t bad either. In fact, Fireworks has lots of great features (like batch processing and advanced “save for web” tools that actually make it the perfect companion for the in-browser workflow… you’ve just gotta know when to use it.

Caveats

We’ve come a long way in this article, but before I finish up, there are a few caveats about this process that I’d like to mention.

Client Pushback: Some clients may not like you using this technique. They might be dead set on seeing a Photoshop mockup before you do any code work. If this is the case, then you should accommodate them. You can still use a lot of the tips I’ve given here, such as trying different typefaces with Typekit or another @font-face service, or quickly iterating a design with colors. The important part of this post is recognizing that even if you mockup with an image editor, the design should still be open to change and improvement.

Even Microsoft wants you to stop supporting IE6!

Old Browser Blindspots: There are still are a lot of things that you cannot do in browser, and a lot of things that aren’t supported by older browsers. If full IE7 compatibility is a client requirement, then you shouldn’t use CSS gradients, and instead use images. There are ways of providing fallbacks, but sometimes a client will demand full support. That said, you should always be looking for ways to delegate design responsibility to CSS and to cut down of excessive image use. It produces cleaner and more maintainable markup and resources.

Be Comfortable! My third and most important caveat: you may not be comfortable with this workflow, and that’s okay! As I said before, even if you’re not ready or not able to completely follow these ideas, the important thing is that you recognize and at least try to consider some of the concepts, such as rapid iteration or focusing on layout first.

Conclusion

It’s that time again. Time to wrap up and really assess what you’ve learned today, which hopefully isn’t nothing. I’ve covered a lot of stuff, and with any luck, at least some of it has stuck in your brain. I’m not expecting you to all go and completely change your workflows, I just want you all to consider that there is another way to do things. It’s sometimes hard to realize that there are other ways of designing aside from the way that you do things now, but as a designer, it’s important that you are exposed to different schools of thought.

I firmly believe that this process is the future of web design, and I, for one, welcome it!

Webdesigntuts+

Conceptual photo manipulations are all about depicting an idea, message, or story that a digital artist wants to convey to their viewers. In a conceptual photo manipulation the idea is the primary motive for the piece, not the materials, tools, or techniques that were used during its creation. These works are truly inspirational and tell a story through the characters, landscape, emotions, or through political or social commentary. In this collection you will find a mixed bag of clever conceptual photo manipulations, some of which include a bit of fantasy, surrealism, or humor.

Australia Post: Hug

E-mail and texting have made communication instantaneous and easy. But a hand-written letter has a personal touch to it. There is something about ink and paper that an email will simply never replace. This print advertisement for the Australia Post successfully conveys that message.

Liquid Fire

An excellent example depicting the metaphorical concept of liquid fire. It shows how fire would look if it was made of water.

Olympus: Eagle

This print advertisement by Olympus has a great concept and visual. It uses the frozen ice to symbolize that the action has been frozen in time by the camera.

Wakes You up With Every Bite

This amusing print advertisement cleverly uses Photoshop to convey its USP.

Falling Letters

Have you ever been so tired while reading that you felt the words are falling from the book? Here is a cool visual example of the same.

Creating My Own World

Creating My Own World in an impressive artistic concept. The ink represents the fluidity of imagination and creativity through which the artist creates fish, birds, butterflies and the world of his own. It has beautiful color, texture and a poetic touch.

Lens Coffee Mug

It’s hard not to like this cool coffee mug. It is made from the lens of a camera that has been fashioned into a mug. I think the image is the Photoshopped prototype (of the initial concept) of Canon mugs.

The King

The King has an interesting and thought provoking concept drawing parallel between king and pawn. The artist philosophically states that when the game is over, the king and the pawn go into the same box.

Skinbonsai

Skinbonsai is a well executed but creepy photo manipulation of bonsai created from body parts.

Help

Poor grapes are looking really scared! This fantastic photo manipulation is humorous and heartwarming at the same time. The attention to the detail is mindboggling and the concept is skillfully executed.

Go Your Own Road

Go Your Own Road has a great concept. It advises you to follow your heart.

International Handshake

It would be cool if you could shake hands with your friend in another country without a long journey or jetlag. International Handshake is an awesome example of an Out of Bounds photo manipulation concept.

Apple or Kiwifruit

This advertisement for Polident Denture Care uses fruit as an object of focus. It shows fruits like apple, pear, sugarcane each with unexpectedly soft interiors. Here it refers to the softness of kiwi fruit when you bite an apple wearing their dentures.

Love is a Learning Process

Human emotions are complex. Love is the best/worst feeling to ever have, it can be so diverse at times that you can never be sure that you know all. Though I wonder if you could learn all about love or intricacies of human feelings from books. Simplicity, colors and subject of this photo manipulation is eye-catching.

Eat Me!

What would you call them? Eggheads? And are you ready to eat them! It has the wonderful humorous concept. The expression on each of the face and eyes can surely make you laugh.

Choose Your Face

Choose Your Face has a novel concept and the attention to the details is beyond words, it almost looks real.

Toyo Tires: Octopus

This print advertisement for Toyo tires cleverly uses octopus to go with their slogan “Griping Performance”.

Perception

Sometimes you might have the wrong perception about yourself and that might stress you out. This is a great example that shows how you can use perfectly ordinary objects to make a powerful message.

Wild Horses

A fascinating photo manipulation where the woman’s flowing hairs are shown as horses. The peace and calmness on woman’s face and the running wild horses on the other hand symbolizes the constant thought process going on in our mind. Although outwardly we might seem to be calm and relaxed. A very original idea..

Listen

An unusual concept showing hands morphed into a mouth and ear. It depicts that everyone wants an ear to voice their opinion.

Lion show

Lion Show is a print advertisement for Zoo Safari. It has an outstanding concept backed by wonderfully executed visuals to match its slogan “blend in”.

Don’t Get Drawn In

An excellent photo manipulation of an artist hand drawing himself.

Spiritual Milk

This is an amazing idea personifying the milk into spirit.

Strength in Every Pour

A similar concept as the one shown above but with the positive message. In this print advertisement the milk is personified to symbolize that it helps to support your heart and body.

Verbal Abuse

This powerful Public Interest advertisement campaign successfully illustrates how verbal abuse can be just as horrific as physical violence. It raises awareness of issue of vicious domestic verbal abuse.

Love Story

This is really a sad love story. It is amazing how you can tell a story with just one object. The old and faded effect gives it an interesting feel. The idea of using fruit to make something that seems so simple and yet universally recognizable is very clever.

Cigar City

A delightful and detailed imagination of city built from a cigarette’s ashes.

Life is Heavy

Another witty and brilliant piece of conceptual photo manipulation. It says something so philosophical in such a minimal and simple way.

Time Goes By

Time Goes By has creative concept of depicting fleeting time.

Reduce the Effects of A Disaster

A public interest advertisement by FEMA for Disaster Management and taking timely actions to reduce the effects of disaster. The concept is very clear and the brick typography is exceptional.

The Monster In The Mirror

The Monster In The Mirror symbolizes the hidden fear within us. The beautiful girl and the pastel colors makes the artwork more attractive.

How does This Make Your Tongue Feel?

This is how a tongue would look if it had a life of it’s own. A creepy and funny concept that can make you chuckle.

The Insight Story

An excellent campaign for the Swiss newspaper SonntagsZeitung with visuals depicting political figures and characters. The general idea is that the newspaper digs down through the layers to bring the news and the image accurately brings forth the concept.

Elements – Fire

An amazing Photoshop work showing woman dressed in fire and solidified lava. The concept is beautifully executed with great attention to details like the clouds, the lava, the debris etc. The color scheme and the firey glow which reflects on the model’s body makes it an outstanding piece of work.

The Poisoned Smoke

A great piece depicting the harmful health effects of smoking cigarettes and tobacco. It is simple and powerful which makes the message very clear.

Surgeon Changes

An amazing poster illustrating plastic surgery and botox that goes behind a beautiful model’s face.

What More Can I Say

Psdtuts+

This time I’ve got for you a fun tutorial for everyone. In Part 1 we will create a very original design for all the comicbook fans out there. We will create this blog layout from scratch using several tricks in Photoshop to make it look awesome. Then in Part 2 we will learn how to slice it, code it, and get it ready to be converted into a blog CMS theme. Are you ready?

Before Getting Started

Let’s get it started! In order to speed up the reading I will avoid some of the most basic explanations (like how to create a layer mask or how to edit the handlers or Beziers of a vector shape). You will need some basic knowledge about Layers, Guides, Vector and Layer Masks, Brushes, the Pen Tool, and working with Typography (Character and Paragraphs).

The assets for this tutorial are:

• The Paper Texture – Scraps
• Sunburst Shapes
• Comic fonts from Font Squirrel (Komika Title and Komika Text)
• Social Media Icon Pack by Komodo Media

The first step is creating a mock up, doodle, or even just a sketch the layout on a napkin. Having a rough draft of the site’s structure makes easy placing the elements on the design. Below you will see a simple sketch showing the following elements:

A header, with the logo, search bar and social media links, besides the main navigation bar.
A banner, with featured posts, notice how the post text is placed over the image into a talk bubble to depict the “comic” style.
A content area, with a list of posts displayed in two columns, each post have a picture associated and the text is shown into a talk bubble as well.
A footer, with a list of the blog’s categories, archive and popular post and recent comments and the copyright information.

Step 1: Setting Up the Document

Open Photoshop, download the 12 columns Photoshop template from 960 Grid System or create a new document 960px with and make draw some Guides to the left and right borders.

Increase the working area to see how it looks on wider resolutions and increase the height as well. I’m setting the document dimensions to 1420px width and 1200px height. Finally go to Layer > New Fill Layer > Solid Color… and set a Black (#000000) background for the canvas.

Step 2: Header Background

Draw a horizontal Guide around 450px from the top border, we will use it as a reference guide to add a shade on top of the page. Using the Rectangle tool, draw a wide rectangle using this color as foreground (#AA0001). Then apply a Gradient Layer Mask (Black to White) to the rectangle in order to hide the bottom part of it.
Tip: do not ever use a Gradient Layer for backgrounds, because when increasing the height of the canvas (a very common practice in web design) the background gets distorted.

Step 1: Add a Texture to theBackground

Open the “Paper Texture” from the assets Copy and Paste it above the red gradient layer. Scale it in order to make it fit into the bounds of the design and change the layer’s Blending Mode to Linear Burn. We will slice this as a large image background, but for wider resolutions we need to subtle merging the edges of the paper with the black background, for this, using the Burn Tool, darken the areas close to the Left and Right edges of our paper texture. You can use a big and soft Brush (0% Hardness).

Always keep your layers organized, put both layers (“Paper” and “Rectangle”) into a folder named “Header Bg”.

Step 1: Sunbursts

Moving forward with the comic style, let’s add some sunburst stripes to create a dramatic background for the logo.

Open the “Sunburst” shapes from the assets. On the Custom Shape tool, choose your favorite sunburst shape an draw it over the red gradient layer. Place the shape to near to the left border of the 960 template (show the Guides to see the bounds). Apply to the “Sunburst” layer a Radial Gradient Layer Mask (white in the center and black in the outside). Change the Layer Opacity to 50%. Optional: using an irregular Brush, paint with Black over the Layer Mask to create a more grunge merge between the sunburst and the background.

Step 1: Halftone

In order to enforce the comic style, we will add some Halftone points over the header background. Create a new layer above the “Sunburst” layer, and render some Black and White Clouds in there (Filter > Render > Clouds). Then go to Filter > Pixelate > Color Halftone. Change the “Halftone” layer’s Blending Mode to Multiply and add a Layer Mask > Hide All to it. Then using a big and soft Brush (Color: White and Opacity and Flow to 75%) paint some areas of the layer mask to make visible only a bit of the halftone pattern.

Step 1: The Title

Now you have the header background finished, let’s add the Logo. First draw a reference Guide around 180 px below the top border, the logo shouldn’t be below that guide. Using the “Komika Title” font face from the assets type the title of the site (“Comicastic”) Font Size: 68pt and foreground color: #FFB401. Then Add more text element, like the exclamation sign or the slogan in white (font size 16pt).

Then using the Free Transform Tool rotate the text a few degrees left to make it look less formal. Try to get something like the image below, but remember not to place any element below the guide. Finally put all these layers into a folder labeled “Logo”.

Step 7: Logo Layer Styles

Add a Layer Style > Gradient Overlay (#EA9403 – #FFC501) a Stroke (Size:1px, Inside, #FCB600) and a Drop Shadow (Black, 50% Opacity, Distance and Size: 2px) to the “logo” layer. Use a similar Style to the slogan, but change the colors of the Gradient Overlay to #EDEDED - #FFFFFF and the Stroke to White (#FFFFFF). If you place the exclamation sign to the logo, you can try converting it into a shape (Layer > Type > Convert to shape) and distorting it a bit as shows the bottom of the image below.

Featured Posts Banner

Step 8: Background

Use the Rounded Rectangle Tool (Radius 5px) to draw a wide rectangle all across the banner below the logo as shows the image below, the height if the rectangle is up to you, I’m setting 250px. Then apply a Gradient Overlay (Colors: #DA7E00 – #F0AD00, Angle: 90°) and Stroke (Color: #F2AA00, Size: 1px, Position: Inside).Layer Styles to it.

Step 9: Changing the  Top Banner

Using the Direct Selection Tool (A) over our brand new rounded rectangle, grab the points of the top left corner and move them to the right (you can use the cursors for an accurate move). Then move the bottom right points a few pixels left.

Step 10: Adding the sliding picture container

Now, using the Rectangle Tool draw a gray rectangle inside the yellow banner (630px x 250px aprox.), you can leave the bottom part of the gray rectangle a few pixels away to the bottom of the yellow banner to create an out-of-bounds effect. Add a Stroke (Size: 1px, Position: Inside, Color: #FFFFFF) and a Drop Shadow (Color: #000000, Opacity:50%, Distance: 0px, Spread: 0px, Size: 5px) and try to place the rectangle as shows the image below. Finally, put both layers (Gray and Yellow rectangles) into a folder named ”Top Banner”.

Step 11: Main Navigation

Using the font family “Komika Text” type the pages navigation at the top right of the top banner, set the font Size to 18px and color: #FFFFFF. Put it on a folder named “Pages Navigation”, be sure this folder is behind the “Top Banner”. Then using the Rounded Rectangle Tool (Radius: 3px, Color: #EFA800), draw a rectangle just behind the first word of the navigation, name the layer “Selected Tab”. Next using the Direct Selection Tool (A) move the points of the bottom left as shows the image below. Next apply a Gradient Overlay to the “Selected Tab” layer (Colors: #F0A900 – #FEBF00, Angle: 90°). If you want to, you can add a very subtle Drop Shadow (Color: #000000, Opacity: 25%) to the navigation text.

Step 12: Add the banner images

To show an actual sample, paste any image over the banner. If the image is bigger that the rectangle you can use a Clipping Mask, for this paste the image above the gray rectangle, then Option / Alt – Click between the two layers, this will clip the image inside the rectangle no cropping needed.

Step 13: Banner Controls

Select the Custom Shape Tool and chose one of the arrows, and draw a couple one next to the other, both pointing left. Then Apply to both a Gradient Overlay (#6D0004 – #980000) and a Stroke (Size: 1px, Position: Inside, Color: #B20002). Put both arrows into a folder named “Prev” and using the Free Transform Controls and holding the Command / Ctrl key, distort the arrows a little bit. Then duplicate the folder and rename it to “Next”, move it to the right of the banner and go to Edit > Transform > Flip Horizontal to change its direction. Finally put both folders “Next” and “Prev” into a new folder named “Controls”.

Step 14: Controls Hover

Now duplicate the “Next” and “Prev” folders and apply a different layer style to the arrows in order to create a hover effect for each one. I’m Copying the Layer Style from the exclamation sing of the title.

Step 15: Halftone details

With the same process of Step 5, create a Halftone Layer above the yellow banner. With the “Halftone” layer selected do Command / Ctrl – Click over the yellow banner, then hit Command / Ctrl + Shift + I to invert the selection, then delete the exceeding. Change “Halftone” layer’s Blending Mode to Overlay and Opacity to 25%. Finally add a Layer Mask > Hide All and using a big soft White Brush, paint over some areas on the layer mask to make visible only a few portions of the pattern.

Step 16: Featured Article Talking Bubble

Now is time to add a field to put the featured post’s content. For this, using the Custom Shape Tool look for the Rounded Cornered and Rectangular talking bubble. Draw it over the “Featured Image” Banner and place it on the right as shows the image below. Before designing any of this features you need to do some research if it’s possible to achieve this kind of effect, even if you don’t know how to code, you can look for some existing libraries of Ajax (JQuery / MooTools) and see what is already done and working, and then adapt your design to an existing library.

Then, using the Direct Selection Tool (A) distort the shape of the bubble a little bit. Finally apply a Drop Shadow (Color: #000000, Opacity: 25%, Distance: 5px, Spread: 0px, Size: 10px).

Step 17: Featured Post Text

It’s time to add the title and a brief to our featured post. For the title use “Komika Title”, 18pt. #680001. For the Body text, use “Komika Text Tight”, Size: 16pt, Color: #1B1B1B. Place the text layers right aligned as shown on the image below.

Step 18: Comments Box and Post Meta

Now, add another bubble, but smaller this time, use this color as foreground: #9C0001 and add a Stroke layer style (Color: #D00000, Size: 1px, Position: Inside), just as shows the image below, then add the comments number with “Komika Title” font face, Color: #FFFFFF and Size: 24pt. And the word “Comments” with “Komika Title”, Size: 12pt, Color: #FFB301.

Finally add a small Meta (information about the post) below the post brief with “Tahoma” font, Size: 10pt, Color: #1B1B1B. If there’s no enough space to put the Meta text, you can use the Direct Selection Tool to increase the height of the featured post bubble box a little bit.

Tip: Do not ever transform a Vector Rounded Corner element using the Free Transform Tool in Photoshop, this will distort the corner, select the points you want to move using the Direct Selection Tool and then displace them.

Step 19: Featured Post Title’s background

Duplicate the featured post background bubble, hide the drop shadow, change the fill color to yellow (#FFC001) and rasterize it. Then, using the Rectangular Marquee Selection Tool, select all the yellow bubble below the title line, then Delete the selection. Next, add a line of border, with the “Bubble Title” layer selected, Command / Ctrl – Click over the “Bubble Background” Vector mask. Then Go to Edit > Modify > Contract and set the value to 1px. Finally, hit Command / Ctrl + Shift + I to invert the selection and delete it.

This is a good time to set everything related to the top banner organized into folders and add more detail if you want to, I’m adding a yellow line between the Post brief and the Meta.

Main Content

Step 20: Content Background

Now let’s move forward with the main content background, create a Folder named “Page Content” and draw a white (#FFFFFF) Rounded Corner Rectangle (5 px radius) several pixels height (If the original canvas size becomes too small at this time you can increase its size, just ensure to keep the top border as is).

Step 21: Post Image

It’s time to start adding content to the page, as default on blogs we will design a list of the latest posts.

Draw two squares (3 columns width aprox.) and place them as shows the image below. Doing the same process than step 12 add some images over the squares using them as Clipping Masks. Finally select the square and add a Stroke Layer Style to it (Color: #FFB801, Size: 1px, Position: Inside).

We will work over one of this images adding the content around it, and then duplicate it as many times as post want to show on the homepage.

Step 22: Add posts’ Titles and Categories.

Draw two wide rectangles, one yellow (#F2AA00) and another White with yellow border below (#FFB401). Over the yellow stripe, type the title of the post using “Komika Title”, Color: #670003, Size: 18pt. And on the white stripe, type the Categories names using “Komika Text Tight” Size: 13pt, Colors #212121 for links and #670003 when mouse over.

Step 23: Post brief and Meta

Draw a talking bubble again, over the picture and the yellow stripe, fill it with this Color: #333333 with a 1px Stroke (Color: #696969) and also apply the Drop shadow we did before on the banner. Then add the a sample brief text using “Komika Text Tight” Size: 14pt, Color: #FFFFFF, a sample Meta text using “Tahoma” 10pt Color #979797 and if you want to a line between both texts (#4B4B4B).

Step 24: Finishing the main content

To finish this part add a Comments bubble, basically repeating the process of Step 18. Then put everything on folders, I’m naming the post folder “A post”. Then, duplicate it (Command / Ctrl + Drag) and place it on the right. Repeat the process with two or three rows of post as shown at the bottom of the image below. Increase the height of the white background as needed to fit all the post in.

Step 25: Page Content Corner

To increase the “comic book” style, we will add a simple page curl at the bottom right of the white background.

First draw a Black Triangle at the bottom right corner (you can use the Pen Tool), then duplicate it and move the triangle making it a “reflex” of the black one, you can fill this copy with any other color. Next warp the second triangle making it a little curve. Then, apply to the warped triangle a Gradient Overlay using a nice mix of colors: (#9C0001 – #FE0000 – #9C0001) and change the Angle to anything that looks good according the angle of the curl, in this case 108 degrees. Next using a Soft Brush (Black, Opacity and Flow 50%) paint some shadows in a new layer behind the warped triangle. If you want to, add some points to the warped triangle in order to add a rounded corner to the tip just as shows the bottom of the image below. Finally, put all the curl related layers into a folder named “Page Curl”. Keep it handy because we are using it later.

Step 26: Footer Background

We are almost done, first create a folder named “Footer” and ensure is below the “Page Content” folder, inside it draw a red (#9C0001) circle, then apply a Gaussian Blur of at least 65px radius. Then transform the resultant blurred circle to make it match with the bounding guides.

Step 27: Background sunbursts

Now, with the Custom Shape Tool, select one of the Sunburst shapes and draw a black one in the middle, then down its Opacity to 50%. Then add the Halftone Pattern over the red glowing circle, hide it using a layer mask and show only some parts of it. Finally down the opacity of the red circle to 50%..

Step 28: Footer content background

We will add common elements of a blog such Categories and Archive on the footer.

Now, let’s add a background for the footer elements, draw a Rounded Rectangle (5px radius) Color:#1A1A1A and set its Fill value to 50%, making it around 3 columns wide. you can create copies of it to make fit 4 boxes at the footer.

Step 29: Footer content background – Curl

Select the first rectangle, (you can delete the others at this point). Then duplicate the “Page Curl” folder and place it inside the “Footer” folder, transform it to make it match with the bottom right corner of the rectangle, then change the colors of the gradient to different tones of gray. Finally add to the rectangle layer a Stroke style (1px, Inside, #242424).

Step 30: Categories

Now, add the title of the section, in this case “Categories” using “Komika Title”, Size: 14px Color: #F2AA00. Use guides to delimit the title baseline, keep it at least 20 px below the end of the page content background. Then add some rows as sample categories, using “Komika Text Tight”, Size: 16px, Color: #FFFFFF, and Red (#EC000A) as hover effect. As an additional detail for the hover effect, add a little yellow (#FFB301) arrow using the Custom Shape Tool. Put all the layers into a folder named “Footer Element”.

Step 31: Duplicate the footer section

Duplicate the “Footer element” folder and move it to the right, change the words to depict “Archives” this time.

Then duplicate the folder again but this time expand the translucent background to make it twice wider, on top, type the titles for “Popular Posts”, “Latest Posts” and “Recent Comments”, use yellow for the first one and gray for the other two. As you guess, this will have a similar functionality than a tabbed pane. Then add a little yellow triangle to mark the selected tab.

Step 32: Tabbed pane content

Since this part will have mostly lists of posts, lets add them, basically is a combination of “Komika Title” and “Komika Text Tight” with different colors (See the screenshot below). The first row will be a sample of the selected (hover) item, on this, add a black (#000000) rounded rectangle behind the text and add a Horizontal Gradient (Black to White) Layer Mask.

Finally, add a little Pager at the bottom of this section.

Step 33: Search Bar

It’s time to add some details to finish up our graphic. Let’s start with the search bar. Create a folder named “Search Bar” on top of everything, create a Rounded Rectangle (3px Radius, Color: #000000 with a Stroke Effect Size: 1px, Position: Inside, Color: #7C0000) as the search input, and a small rectangle for the search button; Copy the Layer Style of the selected item on the main navigation and paste it to the search button. For the actual button, type the word “Go!” over it with White, and apply the same Drop Shadow than the main navigation text (recycling layer styles is a great time saver). On the Search input, type the Word “Looking for something” using “Komika Text Tight” Color: #F9A600.

Then add a Rectangle behind all the layers inside “Search Bar”, fill it with a dark red #380001 (Fill: 50%) and apply a Stroke using this Color: #890101. Convert it to a Smart Object and apply a Layer Mask > Hide All to it, fill the mask with a Reflected Black – White Gradient to create the effect show at the bottom of the image below.

Step 34: Social Media Icons

Repeat the process of the search bar background but this time using a less height bar and with a sightly different Stroke color (#860001). Then type the word “Follow us” using “Komika title” and paste all the icons you want to add, you can use the mini icons from the assets. Don’t forget to keep your layers organized under folders.

Step 35: Footer navigation and copyright information

Finishing today’s work, let’s add the Footer navigation. Delimit the section with a white Line, masked with a reflected black – white gradient. Type the navigation links using Arial, Size 10px, Color: #515151 and highlight a hover effect with yellow: #F2AA00. Then add the copyright text Right aligned.

Step 36: This is it!

Finally double check all the layers are on its respective folder.

Conclusion

We finished the graphic part of the process, now it’s time to jump over NetTuts+ to see how to slice this and turn it to HTML+CSS, are you ready?

.

Webdesigntuts+

Putting together a party or an event can be stressful enough without having to worry about the invitations or promotional material. Recently, GraphicRiver has been collecting a ton of really cool flyer/leaflet templates that are ready for print. We wanted to highlight some the variety of templates that are available for your next business or personal shindig.

1.Legacy Poster/Flyer Template

Legacy Poster/Flyer Template

This sexy event poster comes packed with 7 different styles to try out. There are many layers to move around/change blend mode etc. to create unique looks.

2.Full Page Magazine Ad or Flyer Templates

Full Page Magazine Ad or Flyer Templates

This high resolution magazine or flyer ad is ready for print and includes all the bleed, cut and text safe guides you’ll need.

3.Flashy Nightclub / Event Poster-Flyer

Flashy Nightclub / Event Poster-Flyer

If you like the night life as much as you like to boogie, you’ll love this retro nightclub event poster/flyer. Includes several variations.

4.myFlyer – Party Celebration Flyer

myFlyer – Party Celebration Flyer

This colorful party flyer really pops off the page. Also, there’s no rasterized layers to worry about; all the text is fully editable!

5.Get Minimal – Flyer 02

Get Minimal – Flyer 02

If you love the classic style of strong typography mixed with minimalist design, you’re going to love this flyer. Feel free to change colors, positions and typefaces.

6.Club Flyer Template

Club Flyer Template

Grab their attention with this flyer/poster for your next club event. The photoshop document is well organised and super easy to edit.

7.Business Flyer Template With 4 Color Schemes

Business Flyer Template With 4 Color Schemes

When the party is over, it’s time to get back to business. This attractive business flyer comes with 4 different color schemes.

8.Business Sale Postcard Mailer

Business Sale Postcard Mailer

Mailouts can get pretty expensive, so don’t waste your money on a blah looking one. This 8.5 x 5.5 postcard template is ready to send!

9.Indie Flyer

Indie Flyer

Be sure to wear your flannel for this Alternative inspired party flyer. Suitable for a festival, concerts, special evening in a club, concerts or parties.

10.Wavy Style Flyer Template

Wavy Style Flyer Template

This clean and professional flyer template is perfect for a business flyer or mailout. Print bleed lines included.

11.Music Festival Poster & Flyer

Music Festival Poster & Flyer

A touch of grunge and eye-catching colors will make this poster/flyer stand out. Also included is a smaller version for mailouts.

12.Green Valley Poster Template

Green Valley Poster Template

Got a summer blockbuster in the works? This poster template would go well with your next indie movie screening or off-broadway play.

13.Contemporary Flyer Template

Contemporary Flyer Template

Bold typography and images make this flyer jump out at you. Comes with several different styles and sizes.

14.Typographic Poster Template

Typographic Poster Template

Who says text-only can’t be beautiful? This poster template combines texture, light and typography to deliver a high quality product.

15.Business Flyer Template

Business Flyer Template

This flyer template is perfect for a business that wants a clean, modern look. 3 color schemes are included.

16.Clean Simple A3 Poster and A6 Flyer

Clean Simple A3 Poster and A6 Flyer

If you’re looking for a flyer or mailout with tons of breathing room, this is your template. Every layer is vector based, no pixel layers, patterns, or smart layers so it is completely editable and scalable.

17.Sensation Flyer

Sensation Flyer

As sexy as it is sensational, this flyer template really grabs you. Ultra easy to modify, change colors, dimensions and place your own photos.

18.Elegant Product Flyer

Elegant Product Flyer

If you’re looking to announce your newest product, you can’t go wrong with this clean, elegant flyer template. Super simple to change text and images of your own.

19.Poster Template

Poster Template

Stars, grunge, bold typography – what’s not to love? This poster template is quick to adapt and edit.

20.Outline – Business Flyers

Outline – Business Flyers

Keep things professional with this cool business flyer template. Three different versions are included along with video instructions on how to edit and use the files.

Sell Your Own Design Templates?

GraphicRiver has been growing very fast and top authors there earn thousands of dollars a month these days. If you’ve got the skills, you should consider uploading your files for sale! Anyone can join and become an author, and with a bit of work you’ll get to enjoy a nice, steady income stream.

Learn more about selling on GraphicRiver

Psdtuts+
Print / Web Design Company India

Conceptual art has to be one of my favorite themes. It’s a piece of art that plays out an event, situation, or concept to it’s viewer. Sometimes you get it straight away on first glance, sometimes it’s a real head scratcher. Throw vector into the equation and I’m in heaven. Today I give you twenty pieces of amazing vector art from the galleries of deviantART to make you think, inspire you, and hopefully put a smile on your face.

Just Like A Circus by FlashParade

Just Like A Circus is one of a series of illustrations by FlashParade, this being one of Britney Spears. They all feature female solo artists of the past five years in a style regularly used and associated with the vector artist. Each one is filled with vibrant colors and subtle gradients in a cheeky and often tongue in cheek pose.

I chose to feature the Britney Spears themed illustration above the others as there are two concepts involved. One being that of the image of the singer and the second of the song “Circus” – released from her last album. In it she describes herself as a ring leader, so this naturally has carried over into characters design.

Control by Cryssy

Cryssy has a gallery full of pastel shades and beautiful girls and Control is a great example of showing a subtle theme through vector.

The initial focal point is the elegant portrait and it’s not until your eyes wander outwards that you see the elements of “control” in it. The eyes lead you to look towards the hand grabbing her hair, catching her unawares while another hand takes a piece of her.

Sweet Disposition by TFDC

TFDC (aka FlowIsKing) is one of my favorite abstract and typography artists. I remember him showing me this piece and I was blown away. While it still maintains it’s abstract feel, it also plays out a theme of distance between two people. Whether they are lovers or not isn’t really important, more the sense of there being many days and lands to cross before the other is reached. This is played out further by it’s quintych set up (a piece of art across five panels).

Trooper Dassler by Phig

Here’s a concept that is a visual treat for the inner geek. Phig mixes two iconic brands in one… the Star Wars Stormtrooper and the three stripe branding of ADIDAS. Maybe it’s one of those pieces which you’re just supposed to enjoy looking at, or maybe there is a purpose to these elements being brought together. The first thing I saw when I viewed this was that it might be a comment on mass production. Stormtroopers were no doubt mass produced as well as items for a sportswear company. They are both there to service a purpose and help enhance the task at hand. Who knows… what do you see?

Tarot Justice by Lanitta

There are many set themes ready to be tackled by artists and one which is regularly visited is the Tarot Card theme. Lanitta has injected her style of illustration and vector rendering in this amazing Tarot Card for Justice. Without reading the bottom of the piece, you can tell it is for Justice by way of her scales. What I love especially about this vector is the detailed hair rendering and the contrasting colors of the blue and orange/ginger mix.

Little Red Riding Hood by Paranoid Butterfly

A good way to get your creative conceptual juices flowing is by entering contests. This piece and the next are both from entering the same contest of “Fairytales gone bad”. This is an eerie portrayal of Little Red Riding Hood. I’m not sure what element makes it more haunting, the pale, porcelain skin or the small drops of blood from her mouth. Maybe her role was reversed with the wolf? Now that’s a scary thought.

Malice and Friends by Pixelledanddead

Often a common theme to visit, but never in such a unique way. Malice and Friends is a play on Alice in Wonderland which was also used for the “Fairytales gone bad” contest. Pixelledanddead has put an evil spin on some of the iconic elements of the story, including a poisoned “drink me” bottle and S&M themed flamingos. Cleverly done and a treat for the eyes.

The Call of the Can Opener by Lanbridge

Being a cat owner, I certainly know this situation and I’m sure others will. The Call of the Can Opener comically illustrates the desperation of felines on the sound of the opening of a tuna can. Each cat has been drawn and colored individually and seem to be running towards the owner in many directions. Not only that, but look twice and you’ll see another, larger feline wanting to be fed!

RABIES Act 01 Codename Lo5 by TraceLandVectorie03

This is a haunting piece with plenty of attitude. A display of werewolves on a rampage at night. It’s the finer details I appreciate most about this piece: the billboard in the background, the city sky line and the suit detailing. Such a marvelous piece and an original take on the horror of werewolves.

Force’s Asthmatic Side by Adralves

OK, another Star Wars themed piece and this time with Darth Vader himself. Ever wondered why he had a gasping voice? Well maybe he did actually have asthma! Although it’s a simple put together piece, in a way with the limited palette and shapes, but the detailing has been pulled off really well. We have the C3PO portrait as a rather camp nurse on the wall and the carving of Luke’s name in the bench. Very cheeky and definitely brings a smile to my face!

Rebirth by CQCat

CQCat often has a fashion theme throughout her illustrations and this is no exception. Rebirth is a piece dedicated to the late, great Alexander McQueen using one of his pieces from his Fall/Winter 2010 collection. I have the pleasure of owning a print of this piece and it’s simply beautiful to see. It screams the quirky style of a great fashion designer who will never be forgotten.

Crazy for Vector IV by AtixVector

Part of a series, Crazy for Vector IV has to be my favorite piece by AtixVector. This work uses the often referenced Pen Tool in connection with vector, bold line art, and dynamic colors, to demonstrate being crazy for vector! Such a simple concept and a great execution. What I love most about this piece is how the hair is rendered. Chunks of hair split into sections using lines to illustrate the flow of hair, coupled with gradients. An inspiring style and concept for the vector lover!

Communion by CrisVector

I’ve always seen this piece as a bit of a thinker. One day it could mean one thing to me, the next a completely different theme. To me it’s reminding you of the circle of life and it’s often seen as a positive thing… that when you die you nourish the earth that grows the food we eat etc… however I’m seeing this as the circle of life in a negative sense. Yes, the man is taking from the good earth to nourish himself, in fact filtered and boiled the best from what nature has to offer, however what he is putting back into the earth from himself is negative… his evil thoughts and lack of you could say vision.

Astronaut Chimp by Mendigo-Amigo

Mixing comedy and fiction this time with Astronaut Chimp. What I love about this piece is the non-sense in craving something you just can not have. Imagine the frustration of our monkey friend… even if he reaches the banana, he can’t take the helmet off to eat it. The characterization of the chimps face is absolutely priceless!

Speechless by Bumble V

I adore Bumble V‘s use of color in her illustrations and I love it’s use in this piece. Using the concept of silence, the gradients are being used to illustrate the draining of color, maybe life from this character. The life signs are there still and these are shown by the glazed over eyes. Simply beautiful.

Healing by Artemisa-69

Conceptual pieces which are more personal to the artist can often be interpreted in different ways for the viewer. The artist may use elements that they associate directly with themselves, rather than what the audience may see. In this piece, Healing is seen as a private progression. With the hands covering the face, hiding the process from the viewer and elevating it’s connection with the artist even further. The feathers could be representing flight, which is often seen as a release or freedom. Maybe this was part of their healing process.

Mother Natures Lonely Laugh by J3Concepts

J3Concepts uses a contrasting theme of being lost in the forest for Mother Natures Lonely Laugh. Not being able to see the wood for the trees. I love the chaos of the many elements within this illustration and the smaller details – such as the clock, axe and jewels, which draws you further… maybe distracting you away from the loneliness of Mother Nature.

Dance by Ssst

I’m almost speechless every time I visit this piece. Dance is probably in my top ten vectors, if I ever created such a list. I’m amazed at it’s original concept of a jellyfish and an octopus anthro character interacting together. Furthermore, the unique way of rendering such a scene has been pulled off in a stylish manner.

Half-Nation Love by AntonVanDraco

Literature is often a good source of inspiration and I love this piece by AntonVanDraco with his own take on “Romeo and Juliet.” Each little character has it’s own expression and coloring depending on the side they are on. Again, it’s the little details I’m loving with this… can you see the guy thinking of bombing?

Hope Tomorrow by ChewedKandi

As I’m a fan of conceptual work, I thought I’d share one of my favorite pieces of my own work. This from an ongoing series referred to as “Gasmask Angels,” with titles referring to the future, and in this case there being Hope Tomorrow.

I like to have a story behind this series of the end of the world coming, and we’ve taken so much out of the earth that the population has to walk around with gasmasks on. The wings are purely for visual purposes and add little to the story. In this piece specifically it’s how in the future birds and butterflies will be suspended on strings to remind us of past beauty. However one butterfly seems to have came to life and can breathe. Maybe there is hope tomorrow?

Conclusion

Whether it be a unique concept, or your own take on a popular theme, conceptual work is definitely an area to take your art. Adding your own details and associations can be fun and seeing the reaction from other people and what they read into it is interesting. Try simple concepts such as the seven deadly sins, or even a pack of playing cards, they can all give you inspiration. Have you created conceptual vector art before? Please share with us a link to your work!

Vectortuts+

Web apps, Android apps, iPhone and iPad apps and now, with the release of Mac apps, the world appears to be going app crazy! It seems that there is an app to cater for almost every situation… but in a digital marketplace, how do these apps promote themselves? With web design of course!

There are tens of thousands of apps out there (and that number grows everyday). Naturally, all of these various applications need to use different methods in order to promote themselves and using a website is one of the most essential strategies. App websites are some of the best designed and there are many trends running through this particular niche of site. In this article we will take a closer look and examine some of those techniques currently being used.

Introduction

The Angry Birds site is deceptively simple, using illustration to effectively deliver the spirit of their app without any need for an overly stylized design.

“Where would we be without Angry Birds allowing us to let of some steam by hurling small, feathered animals around the place?”

Some people simply couldn’t live without Evernote for all of their note taking needs and how could we possibly know where everyone is without Foursquare? Where would we be without Angry Birds allowing us to let of some steam by hurling small, feathered animals around the place? Apps have almost become essential to many people’s work and social lives.

The popularity of apps has resulted in many thousands of them being released into the various marketplaces, and in order for any particular one to be noticed, it needs to distinguish itself from the crowd and a well designed website is one way to achieve this.

App websites need to perform several different tasks effectively. First of all, it is absolutely crucial that app websites are well designed, as should any website that sells products online; since a potential buyer’s perception of the worth and quality of the product will be influenced by the environment it is contained within. As well as looking good, app websites are expected to market the app, communicate its purpose, demonstrate its capabilities and even educate the buyer on how to use it. Some may even have to integrate e-commerce features if the app is not sold through a marketplace.

Needless to say, it can be quite a challenge to meet all of these requirements, and designers need to find creative ways to do so. Next, we’ll examine in depth some common features found amongst app sites that contribute towards them being a success. Let’s get started.

Themes

The EpicWin App website mimics the theme of their app on their site… to the max. Everything from background textures to typography emphasize the style and tone of the app.

A large majority of application websites choose to mimic the theme of the application they are promoting. Creative use of imagery, color, texture and many other elements allow the subject of the app to transcend the app itself and enable the website to become an extension of it. There are many examples of this method in action, an obvious one would be the website for the Tea Round app.

The Tea Round app, in their own words; “rapidly settles thirst-based arguments by deciding who makes the tea”. It is extremely obvious from the design of the website that the purpose of the app revolves around tea. .

Use of imagery such as the kettle, the cup stain on the note and the teacup in the logo are all highly indicative to the purpose of the app. As mentioned earlier, this is a very clear use of this technique, but it can also be used more subtlety, such as in the website below.

This is the website for the Get Galleried app, which displays examples of high-quality web designs in order to provide the user with inspiration. From the site itself – “We pre-populate inspiring sites from hand-picked design galleries for you in a fast, tiled interface”. Notice how the website uses a tiled pattern for its background – suggestive of the tiled gallery the app presents.

This technique of extending the theme of the application to the site is an excellent way of communicating the nature of the app itself. Sure, while it will still be necessary to provide an explanation of how exactly the app works, this method instantly provides the user with a general feel of its purpose.

Also, an additional benefit of using the same textures, colors and design elements for both the site and the app, is that it creates continuity between the two platforms, which will allow the user to become familiar with the brand and more comfortable using the app.

Icons and Buttons

You will notice that as well as the websites being designed around themes, they are also designed to look like an app themselves. Elements commonly found in apps such as icons and buttons are also often used in the design of the websites.

There are two main benefits to designing the website in the style of an app. The first benefit relates to the point made earlier, in that it helps create continuity between the website and the app. Secondly, it is sensible to think that a good amount of visitors to these sites will be using touch-sensitive devices such as iPhones and iPads.

Apps use large and visual interface elements such as icons and buttons as they are much easier to interact with when using touch-sensitive devices, so it is only good practice to utilize such features on the website as well.

Device Imagery and Screenshots

You can talk up your app all you want, use every superlative in the dictionary and claim it will solve all of life’s problems, but unless people can actually see what they are buying, they will be very reluctant to commit to anything. It is one of the many problems some people have when purchasing products over the Internet, especially for electronic information such as eBooks and digital music.

To solve this problem, images are used to help the buyer visualise what they buying, such as images of album covers on iTunes or eBooks represented as actual books. It is much the same with apps; websites will often show screenshots of the app displayed on devices such as iPhones, iPads and computer monitors. This technique not only allows the user to become familiar with how the app will look, but it will also help them visualise the app on their own device which may influence their buying decision.

If the saying ‘a picture is worth a thousand words’ holds true, then a video should communicate more information about your product than you ever could using text. Many app websites have taken to using video to demonstrate their app and its capabilities to potential buyers.

The video demonstration for the Concentrate app is an excellent example. The video is able to fully demonstrate all of the app’s features in a relatively short space of time. With the addition of pleasing background music and short section headings; the video is more entertaining and the information is much easier to digest than the many lines of text it would require to communicate the same information.

Layout

As we have discussed, app websites have many objectives that they need to accomplish, but their primary goal is to get visitors to buy the app itself. All of the websites will include some form of link to allow you to download the app, either through an app store, or directly from the site itself.

To aid the website in doing this, designers will often create a simple, but effective, layout that guides the user through the key points of the site and ultimately to the call to action element (the download link). Many choose to use the ‘Z’ layout. Webdesign+ editor Brandon Jones has previously discussed the ‘Z’ layout in depth here – it is an excellent article and will help you better understand the points we are discussing here.

Let’s take a look how such a layout is implemented on an app website. We will use the website for the Leaflet app. Once again, there is an excellent tutorial on Webdesign+ on how this particular design was achieved. A rough ‘Z’ shape has been overlaid onto the website to help demonstrate our points further.

You will notice that the ‘Z’ shape covers various points on the website in the following order:

• Images of the iPhone Device with screenshots of the app
• The logo/name of the app
• A brief description of the app
• The download button

The designer has deliberately chosen to place these points along the path he intends the user to follow. If the visitor to the site were to indeed follow the intended path, they would first receive an early indication as to the purpose of the site through the use of iPhone imagery with screenshots of the app. The user would then notice the logo of the app quickly followed by a paragraph briefly describing what the app does.

Now that the user has been educated on the many benefits of the app, coupled with enticing imagery, they arrive at a conveniently placed button (alongside a temptingly low price) that will allow them to buy the app for themselves.

There are an incredible amount of apps available and it is a very competitive marketplace, so it is essential that you can grab your users attention, pitch the benefits of the app and make it easy for them to buy it all in a short space of time, and the ‘Z’ layout is perfect for this. Obviously it is impossible to fit all of the information in this space, so you will often find that sites who implement this layout will go into a lot more detail about how the app works further down the page.

The ‘Z’ layout is by no means the only layout used by app websites, as there are many others to choose from, but it is very effective when used correctly. Here are some more examples of the ‘Z’ layout in action.

Get Galleried

Evernote

Steps and Bullet Points

The app marketplace is saturated and if a potential buyer isn’t convinced quickly by your app, you can guarantee that they will be able to find something that will elsewhere. Therefore it is essential that you can communicate how your app works and the benefits it will provide in a clear and concise way.

Using bullet points and numbered steps are an effective method for breaking down information, as users may not be willing to read through whole paragraphs of information about how it works.

The website for the Gallerytopia app utilizes both bullet points and numbered steps to communicate information about the app. All of the benefits are summed up using a small amount of short, easy to digest bullet points. The benefits listed by these bullet points are further enhanced by use of visual ‘tick’ symbols, almost as if they are checking off your list of requirements.

Further down the page, instructions on how to use the app are broken down into three numbered steps. It is very common for app websites to divide information on how the app works or how to use it into a small amount of numbered steps. These steps communicate that that the app is very simple and easy to use, because no one wants to buy something that complicated right?

More Examples of Great App Sites

Now that we have seen some of the features app websites implement, lets take a look at how some of the best app websites go about this. Below are some great examples of beautifully designed app websites.

Kaleidoscope

Bills

Bord

Concentrate

Courier

Evernote

Things

Layers

Epic Win App

Conclusion

We have discussed many different features and techniques commonly found amongst app websites and there appears to be a common goal than runs throughout many of these features; and that is to communicate information quickly and efficiently. It was recently announced that the Apple app store has hit ten billion downloads and the marketplace is growing all of the time. The website of any app needs to capture the user’s attention, communicate the benefits and make it easily available all in a short space of time; otherwise there are plenty of other options for an app shopper to choose from.

Lastly, it is worth mentioning that although these websites employ many techniques in order for them to achieve their goals, these features would not be nearly so effective if they were not contained within such beautifully crafted website designs.

This article has discussed a few features and techniques that make app websites effective. Are there any other features you have noticed amongst these types of website? Is there a particularly good app website that you know of? Please share your thoughts and comments below!

Webdesigntuts+

Today we’ll be continuing our “The Best Of” series for our sister site, ThemeForest. Every month, we review the past thirty-ish days of our premium themes marketplace from our favorite new author to a file you can grab for free! Searching for inspiration? Looking for something to buy? Be sure to check out the roundup below!

The Month at ThemeForest

It’s hard to believe it’s just been a month and a half since the new year… here’s the latest news on what’s happening at ThemeForest.

First author hits 20,000 sales

The Austrian based web designer has over 3,000 sales since his August 2008 membership. Tuts+ interviewed Kriesi, real-name Christian, back in December so be sure to check that out!

WooThemes Joins the ThemeForest Bandwagon

WooThemes launched a selection of their own premium Drupal and EE themes on the Marketplaces recently. Unfortunately, WordPress alternatives are not available yet, but surely that is only a matter of time.

Envato Launches WP-Select

ThemeForest launched WP-Select this month, a hand-picked selection of premium ThemeForest themes from Envato staff. The site features some new search filters such as colour schemes, layout and price to be able to pick the best theme to suit your needs and budget. Read the full announcement at EnvatoNotes!

The Best of ThemeForest…

As per always, February has been a busy month at ThemeForest with lots of great new themes being released across the board from new and legacy editors alike.

Synoptic

Synoptic is a beautiful PSD and HTML template available at the tiny price of . Synoptic is obviously oriented around business and portfolio pieces and includes some great CSS3 animations. The theme already has a straight 5-star rating and 112 sales.

Utopian

Utopian is a very image-heavy HTML site template by our February featured new author.

SideWinder

SideWinder is one of the more unique themes aimed at portfolio users. It’s based around the grid layout and is an image-centric, fully skinnable theme.

Oh and did I mention it’s made by the editor of this very site

Multimedia

Multimedia is a colour-heavy, image-intensive WordPress theme aimed at multimedia producers and bloggers as it’s name suggests. The theme went live on Valentine’s Day and just three days later achieved 00 in sales.

Child Care Creative

Child Care Creative is a unique theme in that it has some great typography choices. The scheme of fonts used match the target audience impeccably. For it’s high-for-themeforest-but-still-very-low price tag, you get bonus shopping cart and newsletter features.

Ermark

Ermark is a very unique, urban-style site template which comes with included PSDs. The blog theme, not currently available for WordPress, is made by a graphic design (something which is pretty event). The great integration and usage of serif and Cufon typography makes this look stunning and one of the best themes i’ve seen on ThemeForest this month! It even comes with an even better looking mobile theme!

Plus over 70,000 more…

As always, ThemeForest hosts thousands of great themes. Marrying a great review team with stringent quality guidelines, pretty much every file on ThemeForest is great and you should be sure to check out the wide selection available.

Free File of February

Xero by wizylabs is this month’s free file of the month, the one file on ThemeForest you can download without charge for one month only.

Xero is an HTML/CSS site template aimed at portfolios and professional blogs. There’s three robust portfolio options and a full working PHP contract form included. There’s also a very nice jQuery dropdown menu included and used in the theme. Plus, you get eight different colour options to brand it any way you want. Grab it before the end of February to grab it for free!

Featured Author

This month’s featured author is tonyc. Their portfolio consists of 14 ThemeForest files with, alongside a CodeCanyon file, have amassed over 1,370 sales across WordPress and others.

Featured New Author

3circlestudio is a new author to ThemeForest who launched his first item in January. In the month or so since then, Utopia has already reached over 0 in sales and a full five star average rating.

3circlestudio also has one CodeCanyon file, the navigation bar from his Utopia template. Expect more from him soon.

Webdesigntuts+

Are you new to Photoshop? Have you been trying to teach yourself the basics of Photoshop but have found the amount of educational material available on the net a bit overwhelming? As the world’s #1 Photoshop site, we’ve published a lot of tutorials. So many, in fact, that we understand how overwhelming our site may be to those of you who may be brand new to Photoshop. This tutorial is part of a 25-part video series demonstrating everything you will need to know to start working in Photoshop.

Photoshop Basix, by Adobe Certified Expert and Instructor, Martin Perhiniak includes 25 short video tutorials, around 5 – 10 minutes in length that will teach you all the fundamentals of working with Photoshop. Today’s tutorial, Part 11: Typography, the Art of Text will explain working with type layers, kerning, keyboard shortcuts, and resousse. Let’s get started!

Psdtuts+

Jump into this roundup of some of the most creative and challenging vector poster design tutorials on the web. There is a large assortment of styles and approaches here to review, from spacey psychedelic poster design, to geometrically influenced poster design, to robotic stomping power, to retro aesthetics and more. Check out these inspiring poster design tutorials.

Blend and Mask Yourself a Great Poster

Veerle Pieters shows us how to create a strong geometric central poster design, which utilizes flowing blends, masked shapes, and subtle gradients, to create a sophisticated final work. She covers each step of creating this work in detail and uses a quick workflow that uses tools like Smart Guides to speed things up. Veerle’s work always has a distinctive look and feel, while using geometric beauty and bright colors to their fullest.

The Making of 3 – A Limited Edition Poster Design

To celebrate the third birthday of Chris Spooner’s blog Spoon Graphics, he created a limited edition poster design. He shows a detailed walkthrough of the design process. The concept behind the design is based on the number three, and carried out with a triangle vector pattern made in Illustrator. The final result is polished in Photoshop with some light effects.

Making of “Robot Earth 3009″ Typographic Illustration

Veteran poster designer Tom Whalen shows us how to create a rampaging robot poster made of a combination of type and shapes. Learn how he uses Illustrator tools such as the Pattern Brush to speed up is workflow, as well as tools like the Free Transform tool to place shapes at angles that retreat into space – adding dimensionally. In addition to numerous tips you can follow along with this advanced Vector Premium tutorial to learn a solid poster design workflow.

Poster Illustration: Go Forth & Create!

This creative poster design tutorial by Von Glichka is from 2008, but the overall artistic process is timeless. His thorough concept sketching with layered vellum approach is awesome. Having your artwork refined in analog before jumping into digital can improve your workflow. This Poster in Illustrator is made with a very similar process to his current work and it’s was created for Adobe. For those of you that were in love with Freehand, you may get a little misty-eyed reading this.

Create an Inspirational Vector Political Poster

This tutorial is inspired by Sheppard Fairey’s famous political poster series for the Obama campaign in the US. We’ll be showing you how to create this style of poster design. We’ll start with basic image editing techniques in Photoshop to get our guide layers setup, and then we’ll jump into Illustrator. You don’t need any fancy equipment to follow this workflow.

Photoshop and Illustrator Tutorial: Master Retro Poster Design

In this tutorial, Fabio Sasso shows you how to create an art deco inspired poster design with references from US TV and film studio branding of the 40′s and 50′s. Learn how Fabio uses CS5′s Perspective Grid tool to set up the building in this design. Discover the fonts he chooses and how he takes all the vector elements into Photoshop to color and texture.

How To Create a Tessellating Geometric Poster Design

Chris Spooner shows how to create a trendy, geometric poster design. In this beginner tutorial you’ll learn how to crete three dimensional cubes in Illustrator, color with gradients, and position with perfect alignment into a repeating pattern. Some Photoshop textures, color casts, and highlights finish off this poster design.

Creating a Vintage Ski Poster Design with Illustrator CS4

This Vector Premium tutorial is based on a client project Neal McCullough created. In it you’ll learn how to add a little Art Deco glamour to your illustrated poster designs by making subtle use of the Gradient and Transparency palettes in Illustrator CS4, as well as introducing an aged paper feel with clever use of texture resource files. This tutorial mostly uses bold retro shapes to compose the illustration, gradients are used quite a bit and a few areas have added pizzaz added with reflections, the use of blends, and various transparencies.

Classic Photoshop & Illustrator Tutorial: Create Abstract Poster Effects

Strong, simple shapes make up this colorful poster design by Danilo Rodrigues. This symmetrical artwork uses numerous 3-D shapes created with Illustrator’s 3D Extrude and Bevel. The vector elements are then taken into Photoshop where photography and texture is added to unify the design and bring together this Retro-Futuristic inspired poster.

Photoshop & Illustrator Tutorial: Create Retro Poster Art

Gordon Reid shows us how to create a retro flavored poster, inspired by a 50′s and 60′s aesthetic. Walk step-by-step through the process of preparing stock images for compositing, lighting, coloring and texturing the design. The vector part of this tutorial is mostly in the creation of various complementary design elements, as well as a triangular based grid.

Create a Retro Style Poster with Shapes, Patterns, and Eagles

In this tutorial Simona Pfreundner shows the inspired Adobe Illustrator artist how to create a retro style poster design. Learn how to create shapes by using the Pathfinder tools, by joining paths, and by applying graphic patterns. Also learn to take advantage of the Appearance Palette and have some fun with applying multiple strokes to objects.

Gigposter Design: The New Sex

Dave from GoMedia shows us how to create a gig poster using numerous stock elements and a crafty workflow. This tutorial has great results, requires no drawing skills, and is aimed at beginners. Learn how to roughly and quickly put together photo elements in Photoshop, which you then use Auto Trace in Illustrator to clean up. Add some trendy lines to scratchy elements, and other tips to compose this poster design.

Creating the “Samurai Werewolf” Poster

Veteran designer Tom Whalen has a thorough approach to creating posters in Adobe Illustrator. He shows us how he starts with strong initial sketching and vision, and then uses numerous Illustrator tools to speed through his workflow. Tom shares some of his favorite tips in this tutorial. You’ll learn how to use Adobe Illustrator’s powerful editing capabilities to help you create dynamic, evolving works of your own in this advanced Vector Premium tutorial.

Illustrator Tutorial: Create Summery Poster Artwork Using Illustrator CS5

Ben The Illustrator shows us how to create one of his trademark poster designs saturated with bright colors. He covers the big poster design steps quickly here: showing his sketch, the basic use of the Pen Tool to create most of the shapes and houses, then he jumps into showing us some of the most powerful tools in Illustrator CS5. He shows the usefulness of the Variable Stroke-Width tool, improved dashed-line functions, new shape-building tools, and the functionality of the most exciting new perspective tools.

How to Create a Vintage Ocean Liner Poster

The period between the end of the 19th century and World War II is considered the golden age of the ocean liner. We’ll be starting with a basic sketch of an ocean liner Tijs Koelemeijer drew up, and use this as the basis to creating a classic poster design. The main tools you’ll get to know in this tutorial are the Pathfinder and the Transform Effect, as you walk through the process of creating a vintage poster design in Illustrator CS4.

How to Make an Eco Friendly Vector Poster

In this tutorial, Simona Pfreundner explains how to create an illustrated poster design and how to set up our own crop marks in a few easy steps. This tutorial is aimed at the beginning Adobe Illustrator user. Jump in and learn to make this organic poster design.

Create a Distressed Vector Typographic Poster Design

Take a stroll through this poster design tutorial by Chris Spooner where he takes inspiration from the ZX Spectrum computer of the 80′s. Learn to create linear, rainbow-colored typography in Illustrator, and then finalize the poster design with watercolor brushes, layer effects, blending modes, and more in Photoshop.

Illustrator Tutorial: Design a Geometric Op-Art Poster

Simon C Page explains how to create an Op-Art poster design with a style reminiscent of classic 1950s book covers. He shows how to use some tricks in Illustrator to set up the radiating square design, then how to create a basic script in Illustrator to color each of the hundreds of squares randomly – saving hours of time. The final poster design is laid out in InDesign CS5.

Psychedelic Poster Design

Learn how Zip Design creates a psychedelic-style gig poster design using Adobe Illustrator and InDesign. The poster design’s theme is based on a wild mix of cosmic imagery, strong patterns, egyptian art and has a P-Funk inspired feel. Learn step by step how to create the main elements of this design, from the use of stock, to font choice, custom drawn elements, and how to make it blend to fit the funky theme. You’ll also learn to use spot colors, including metallic Pantone colors, and how to set up a spot varnish to give the poster design a shiny finish.

Design a Vintage Poster with Vector Pack 16

Tim Boesel shows us how to take mostly GoMedia Arsenal stock elements and blend them into a stylish grunge feeling poster. You can of course design your own elements, or draw your own illustrations, and use these inspiring techniques as a jumping off point for your own poster design.

Rock & Roll – Illustrative Poster

Von Glichka takes us through this Rock & Roll Hall of Fame poster design. Learn exacting methods for drawing tribal artwork, flames, and then vecotrizing, laying out the elements, as well as creating and adding texture.

Create a Pulsing Poster with a Vinyl Record and Grunge Type

In this tutorial Simona Pfreundner shows how to create a vinyl record with blends and opacity masks. Also learn how to create some funky pulsing elements, grunge typography, and put it together into a unique poster design.

How to Make a Retro RC Airplane Poster

Joseph Alessio shows how to create a fun toy airplane poster design suitable to adorn a young boy’s room. Much of this tutorial is made by creating shapes with the Pen and Pencil tools, then the Gradient tools to color. Learn to create a fun retro remote-control airplane illustration, then compose it into a poster design. While this tutorial uses the Pen tool quite a bit, it’s still a tutorial well suited for beginning Illustrator users.

How To Create a Fun Cartoon Style Poster Design

Follow Chris Spooner as he creates a fun cartoon style poster, as a tribute to the character Sloth from the iconic tween movie “The Goonies.” He combines a quick character doodle, done right in Illustrator, with the Roughen Effect used to give the linework it’s sketchy hand-drawn feel. Some blocky text, a muted color palette, and some mixed in texture give this poster design it’s retro feel.

Iconic Poster Design Tutorial (with video)

Jeff Finley shows every detail in the creation of this poster design in a 30 minute video. He walks you through setting everything up in Illustrator, creating swatches, using vectors as background elements, choosing an iconic centerpiece, simple and classy typography, and retro/vintage effects.

Also don’t miss Jeff’s stunning video tutorial on the Tuts+ Marketplace on The Making of Andrew Jackson, which shows professional vintage creation tricks, excellent for applying to your next poster design.

Poster Design Inspiration

If the above tutorials aren’t enough to satisfy your poster design needs, then check out the poster design inspiration below and be sure to read through our Creative Session on Poster Design here on Vectortuts+.

• Interview: Film Poster Art with Tyler Stout
• 50+ High-impact Illustrated Vector Posters
• Inspiration: 80+ Amazing WWII Allied Propaganda Posters
• Inspiration: 40 Typographic Posters
• 26 Inspirational Vector Posters from Creattica
• Interview with Tom Whalen of StrongStuff
• Milton Glaser on Using Design to Make Ideas New
• Fantastic Sci-Fi and Fantasy Movie Poster Inspiration, 1925 to 2010

Vectortuts+

Ari Weinkle is a designer that creates some unique abstract works of art. It is this unique style that helped earn Ari a place in the prestigious Depthcore collective as well as many other features and accolades. In this interview Ari discusses why he decided to go to the Rhode Island School of Design and how he benefited from it. He also gives our readers some really fantastic advice. So don’t miss out on this excellent interview.

I am from Boston, Massachusetts and have just graduated from the Rhode Island School Design. I have been interested in art and design my whole life, but began working in the digital realm in high school. Currently, I am working at a design and branding firm in Boston.

In India I

I have always enjoyed creating things and making artwork. I wanted to be able to work creatively in my day job, and graphic design allows me to do that. I landed specifically on graphic design because it always seemed like one of the most tangible ways to bring art into one’s work. On another level I have been surrounded by art my whole life and was very fortunate to be able to travel a fair amount at a young age. That exposed me to many different cultures and aesthetics, which greatly contributed to my desire to become a designer.

Computer Arts

To me the best part is that “ah ha” moment that comes after hours and hours of working on a project. Some people call it “flow” or something similar. After lots of errors and setbacks, things finally start to come together. Then the fun part comes where you lose track of time and can enjoy the process of creating. This usually occurs after I’ve settled on a concept and am working on the microscopic details.

Soul

That’s an interesting question. I felt that going to art school would expand my thinking and attitude towards art and design. On a practical level, it’s great to have a degree. I also had an opportunity to meet and work with many talented people who pushed me to work harder, and inspired me to think differently.

Remnants

Much of what I was taught at school relates to process. For me, one of the most important things I learned was to enter each project without expectation. Instead, it’s better to work and let the process and act of creating/designing lead your decisions. It’s a very tough thing to incorporate into one’s work, but I think its really important.

Rael

During my trip, I went to many sacred spots across northern India. Being surrounded by so much devotion, vivid imagery, and unique sensory stimulus made me want to create this series as a response to what I experienced. The series of work was inspired by five of the principle deities in Hinduism. Each piece attempts to reduce the iconography of the particular Deity to something abstract, and not directly related to form. If I had to choose a favorite, it would be the Shiva piece, because it was the final work I created and the one which in which I pushed myself the furthest. The forms were actually generated by igniting charcoal, paper, and handmade Indian paper.

In India II

In terms of contemporary graphic design studios, some of my favorites are, Grandpeople, Project Projects, and Onlab. Each of those studios is a bit different, but they all have me to think differently about typography. In terms of more traditional artists, some of my favorites are Joan Miro, Hiroshige, Piet Mondrian, and Mark Rothko. Mondrian in particular is someone who I never get tired of. Of course, the whole Depthcore. collective is one of my main sources of inspiration… everyone there is top-notch and have really helped bring my work to a new level.

Is Back

Thanks for having me… all I can say is to keep creating! The world needs more meaningful art and design.

India V

Where to find Ari on the Web

• Ari’s Portfolio

India III

Psdtuts+

The 960 Grid System has been around for a while now… but it’s been mostly used on the coding side of projects as an HTML/CSS framework. Today, we’re going to discuss the advantages of using grid systems like 960GS at the very start of a project, before you even open up Photoshop or Fireworks. If you haven’t used a framework before, or you just want a good refresher, this is a great place to start!

Diving Into Frameworks

Chances are good that you’ve already heard of or used some sort of CSS framework already… but just in case, let’s review the key benefits of using a CSS framework (aka grid system) in any web project:

• Provides a “framework” that’s designed to look good on all monitors.
• Streamlines the design process by defining exact measurements.
• Reduces development time by providing pre-coded HTML/CSS.
• In a perfect world, it helps designers and developers communicate better – smoothing out the process of moving from Design to Coding.

Ultimately, a CSS framework should help establish some basic guidelines for content columns, while still providing designers with full control over their designs.

In this article: I’m going to explain what a CSS framework is, and why I chose 960. Then, I’ll go over the basics of how to apply the 960 Grid. To wrap up our discussion, I’ll show you a few sites that are using the 960 grid, and how they are structured.

CSS Frameworks: A Brief Overview

A CSS Framework is a series of stylesheets created to make a web developer’s life easier. They account for the various quirks of browsers, are easily adaptable, and apply basic design principles (such as establishing visually pleasing margins between elements).

Oftentimes, these frameworks also have typography stylesheets, which can act as a great place to begin working on your site’s typography (for more information about Typography, check out this article).

There are two major CSS Frameworks at the moment: Blueprint and 960. Both are perfectly capable frameworks, with great features and ease of use. It simply comes down to a matter of preference of which Framework you feel most comfortable using.

Before you begin the design phase of a project, it’s important to discuss the selection of a framework with the person who is going to code the site. Often, developers will have preferences towards a particular CSS framework, and as one of the main reasons we use frameworks during the design phase is to smooth out the transition from design to coding, it’s a major decision. If you’re coding the project yourself, just make sure you are comfortable with the grid framework you pick – there’s nothing worse than design an entire site based on a framework that you end up disliking.

960 GS: The Gritty Details

Personally, I found the 960 Grid suits my needs better, so that’s what I’ve adopted and that’s what we’ll be discussing in this article. However, the overarching principles that we’ll be discussing will apply to any framework, including Blueprint.

960.gs is based around putting all of your site’s elements in a 960px wide (clever girl) container, and dividing that container into 12, 16, or 24 equally sized columns. They provide a tool to use alternate widths, but 960 is what the entire system is developed for and it happens to look pretty sharp.

The CSS Generator at 960GS

Why 960px? Because 960px is a width that is suited for the wide number of platforms on which we browse the web. It essentially allows for a 1024px wide monitor to show the site accurately and without horizontal scrolling, accounting for the width of the browser chrome, scrollbars, and a bit of padding for legibility. There is always a 10px margin placed at the right and left of the main content column, which means that smaller browsers will always be able to read the farthest left content without the text butting but against the browser window.

Additionally, all numbers in the 960GS are whole numbers based on the golden ratio – there are no decimal points or funky spacing issues. If you’ve read our article on Mathematics and Web Design, you know how important getting these numbers right is.

One of the glaring omissions, or nice features, depending on how you look at it, is the way the 960 handles (or doesn’t) typography. There is a text.css file included, but this is mainly to ensure that there is at least a something in place, so that as you do rapid prototyping, common elements such as headings, paragraphs and lists have basic styling.

How is Blueprint Different?

I won’t go into too much depth here, but let’s briefly discuss the key differences between 960.gs and Blueprint. First, Blueprint is a CSS framework that’s based on 950px – it’s very similar to 960 in the way that it handles the basic layout stuff (BP uses 24 columns with similar approaches to padding and ratios)… but that’s where Blueprint stops being similar.

Blueprint does allow for form-specific styling and notifications, something I wish 960 would implement.

Blueprint is a much more complex, robust, and comprehensive framework system. It’s been built as a full fledged stylesheet for pretty much every element that you can think of (radio buttons, tables, etc.). There are things I like about Blueprint, the most notable being its styling for form elements and built in notification classes. Additionally, it includes a full suite of styles for:

• Typography – BP provides typography size and spacing defaults for all elements.
• Form Element Styling – Styling for forms and some classes that can be used to add to forms (like required fields).
• Print Styles – Print stylesheets for when surfers hit the print button.
• UI for Plugins – Pre-built CSS (and sometimes images) for buttons, tabs, and sprites.

The problem that I had with Blueprint is that it’s just too complex to use at the design phase… creating a design from scratch means re-formatting everything that they provide, and it’s often hard to keep up with the sheer comprehensiveness that BP provides. In contrast, 960.gs offers just a layout – perfect for letting a designer get creative within realistic boundaries.

Using the 960 Grid System

The 960 Grid is almost frighteningly easy to use (in fact, you may start to ask yourself: “Why wasn’t I using this earlier?”), with only a few simple rules you need to abide by.

Download the 960 Grid from 960.gs

After you download it, take a look inside the directory you just unzipped. I want to draw your attention to two folders: “sketch_sheets” and “templates”. The “sketch sheets” folder contains a PDF of the various grid sizes in a within a browser window, and the “template” folder contains templates for almost every graphics program under the sun (such as GIMP, Fireworks, and Photoshop).

Sketch Sheets: Making Your Life Easier…

The purpose of a CSS Framework is to make your life easier, and you should always be looking for ways to help you decrease the time it takes to create a design. Use these templates when creating a design in Photoshop, print off copies of the “sketch sheets” when discussing the details of a project with a client (and make sure to look at this before you go!).

Example of a printed out Sketch Sheet… with some sketching on it.

In fact, I would suggest using these sketch sheets every time you start a project: they’ll allow you to experiment freely before locking yourself down to any layout. It will only take you 5 minutes of sketching to realize a design will or won’t work, as opposed to 50 minutes+ if you had been designing and coding it.

Designing With the 960 Templates

Once you’ve come to a basic agreement on the sketched out concept for the site, it’s time to crack open the template files. This is probably the central reason why I like using the 960 system… it comes pre-packaged with templates for just about any program you can think of. I happen to use Photoshop, so here’s a screenshot of the provided template:

The key benefit here is simple: The template has pre-built guides for all of the main content columns that directly correspond to the CSS framework on the coding side of thigns. It’s easy to quickly draw your main content columns and keep everything in your design clean and organized.

Experienced designers might see this as “design with training wheels on”, but frankly, there’s nothing wrong with having a simple overlay system to help guide the framework for a web design.

You still have to design everything on the site (of course!), but by keeping your design in line with the guides, it’ll make the development side of things much easier. As as added benefit, having a uniform approach to padding between content cells is a great way to make your design look more professional. Read more about why “Pixel Perfect Comps” here.

Setting It Up

Now that you’ve gotten a design nailed down, it’s time we talk about the 960 grid syntax. As I mentioned at the intro, you can find a lot more information about using and prototyping with CSS frameworks at Nettuts, so I’m just going to cover the basics here.

First, you’ll need to reference the appropriate CSS files into your design: reset.css (the reset file that accounts for browser quirks), text.css (the built-in typography stylesheet), and 960.css (or 960_24_col.css if you are using a 24 columns grid). Usually, I place all of my site-specific styling in a separate file (usually called style.css), to ensure I don’t break anything in the Framework.

Quick Tip: Reference your own stylesheet after you reference the Framework, so that you can adjust specific aspects of the framework without altering the Framework itself (and if you make a mistake, you don’t have to re-download and overwrite the Framework’s files). With these 4 files, you’re now ready to begin to design your site.

Here’s a quick overview of the syntax, pulled from the 960.gs site:

<div class="container_12">
    <div class="grid_7 prefix_1">
        <div class="grid_2 alpha">
            ...
        </div>
        <div class="grid_3">
            ...
        </div>

        <div class="grid_2 omega">
            ...
        </div>
    </div>
    <div class="grid_3 suffix_1">
        ...
    </div>
</div>

The first div is your container, what your content will be stored in. By defining it’s class as “container_12″, you’re saying: “I want this container to have a 12 column grid” (The same practice applies when using a 16 and 24 column grid).

Now that you’ve defined the container as a 12 column layout, you begin to structure your site in such a way that it fits within the layout. If you look at the next div elements in the hierarchy (as noted by the tabs), you’ll see the syntax for their definitions. “Grid_7″ and “grid_3″ are easy enough to understand: you’re saying that this div element is going to take up X number of columns. However, 7+3 = 10 < 12, which means you’ll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of “grid_x suffix_y”, you’re saying: “I want this div to take up X columns, and for there to be Y number of empty columns after it.” (This also applies to prefix). So, since “Grid_7″ has a prefix of 1, and “Grid_3″ has a suffix of 1, 7+3+1+1 = 12!

By now, I know you’re wondering about the Div elements nested in the “Grid_7″ div. Well, you can nestle divs which take up a specified number of columns inside another div, so long as it does not exceed the size of its parent grid. Furthermore, the first and last elements must have “alpha” and “omega” appended to their class definition, respectively. So, in our sample code: “grid_2 alpha” is the first div nested within “grid_7″, the next element “grid_3″ is in the middle (and therefore does not need an “alpha” or “omega” appended to it), and finally “grid_2_ omega” is the last div nested within “grid_7″. And since 2+3+2 = 7, the definition is proper.

Putting It All Together: A Short Example

For the purpose of illustrating this whole process, let’s go through a quick example of using the 960 Framework during the design phase of a personal project of mine.

The design itself is pretty simple, but it’s the perfect way to show you how the framework can act as a tool through the design process.

The Cerberus Website: The Example that We’ll Use

Mass Effect 2 is one of my favorite games of the past 5 years, and I felt creating a site for the fictional organization “Cerberus” would be a challenge. The main aspects of the organization are: professionalism and technological prowess, which I wanted to convey with a clean design that used their entire color scheme. To start, I sketched out the design for the site (it would be hypocritical for me to act otherwise, right?).

As I looked the design sketch, I saw how to make the design work in the 960 Grid.

Below is the HTML skeleton for my site:

<div id="container" class="container_12">
	<div id="header" class="grid_12">
		<div id="logo" class="grid_2 alpha">Logo</div>
		<div id="subHeader" class="grid_12 omega">
			<div id="tagline" class="grid_4 alpha"><h1>Cerberus: Strength for Humanity</h1></div>
			<div class="grid_8 omega">Navigation</div>
		</div>
	</div>
	<div id="content" class="grid_8">
		Content
	</div>
	<div id="sidebar" class="grid_4">
		<div class="sidebarSection">
			Sidebar
		</div>
		<div class="sidebarSection">
			Sidebar
		</div>
		<div class="sidebarSection">
			Sidebar
		</div>
	</div>
	<div id="footer" class="grid_12">Footer</div>
</div>

If you noticed, I had the logo only cover 2 columns, while the sub header took up all 12 spaces. Since the header div was 12 columns long, any sub elements can up to 12 columns long. This trick allowed me to make the header, as the logo was took up 2 columns, and left the rest empty (the image is actually the background image for the header div). And since the sub header was 12 columns wide, it filled up the entire width under the logo (since it couldn’t fit all of its content inside the 10 spaces left after the logo).

This is actually an important distinction to make, and is another design tool you should utilize (and to be safe, you could use “prefix” or “suffix” to ensure a certain amount of space is reserved). The rest of the site is pretty cut-and-dry: 8 columns for the main content and 4 for the sidebar. Each sidebar element is a separate div element; they stack on top of each other because they are constrained to the width of 4 columns.

To illustrate how the site is set up, I’ve taken a screenshot of the site and clearly marked the columns:

Examples of The 960 Grid in Action

Now, my own example might not be the best way to really inspire you to go out and create some killer web designers, so here are just a few examples of the 960 system in action. You can find more at the 960.gs site.

The Keynote Wireframe Toolkit website, which uses the suffix aspect of 960, along with a background image via CSS to list the compatible programs.

The 5by5 podcasting network uses the 960 Grid to align its latest episodes in an appealing manner.

With the 960 Grid Framework; Hugh Griffith was able to present a clever bullet-point list of himself, and a more detailed explanation of his expertise side-by-side. Furthermore, he uses the bottom half of his site to present the 3 most appealing parts of his portfolio (each being 4 columns wide).

Closing Remarks

One of the most appealing aspects of a CSS Framework is the convenience they offer to designers. However, like any other tool, you have to ensure that you are using it in a relevant and worthwhile manner. Don’t try to use it if it doesn’t fit the design, and don’t let it restrict your creativity. For most projects (especially those for complex newspaper or blog-inspired layouts), a CSS framework can be a great time-saving tool, not just for spitting out quick HTML/CSS, but for the entire design process.

Want to read more about coding with CSS frameworks? Check out Nettuts library of articles on the topic (scroll to the bottom for more advanced tuts).

Webdesigntuts+

YES. I absolutely LOVE to watch films! and I’m certain you do too.
And so.. I just wanted to share with you guys some films/ film titles that I admire. *when I’m not familiar with a certain film, I usually decide of I like or dislike it in the beginning (so good film titles have a real impact on me) These titles sequences here also have their corresponding ‘mini-docu-behind-the-scenes’ feature which I know will help you appreciate the art more.

Join DesignersCouch.org

Developing a meaningful concept is a crucial step in any design project… but it’s a skill that few people really take the time to understand and appreciate. Today, Ahmed (UI Manager at Link Development and Adobe User Group Manager in Egypt) is going to walk us through the creation of a concept and inspiration process. We’ll go through the process step by step, until we arrive at a successful concept to start our web design.

Why Developing a Concept Matters in Web Design…

In my last article, The Gestalt Principle: Design Theory for Web Designers, we established the need to start any design with the containing shell design first before going into the details, in this part we will discuss the methodology of coming up with a shell design.

Any containing shape should have a concept behind it – but sadly, lots of designers focus only on a nice-looking shape that really has no meaning behind it. Or worse, they design an entire website based on pre-existing frameworks without even a moment’s thought for how an original design might bring some realmeaning to the project.

Truly great design has meaning behind it – it’s not just pretty shapes, filters or typography – each element should actually say something about the underlying project.

At this stage, if you followed the methodology of creative requirements gathering (How to Get the Right Creative Requirements From Your Client), you should have enough input to build upon and work out what container shape or style your design will fit in.

Start By Collecting a Library of Reference Images

One of the easiest and simplest ways to find ideas is to have asked your client to give you some keywords to describe how he wants people to feel about his site…. energetic, fresh, young, solid….etc, by simply entering these keywords in any image search such as Google or Bing.

Choosing from these images the ones you like, you will easily find yourself with a large library of brainstorming ideas to start from.

Design Begins With a Brainstorm

Similar to any brainstorming exercise, don’t dismiss any ideas… however strange they are. It’s always easier to tone down a design than to try and spice it up… sitting down in front of your library of ideas, get a pencil and paper (which are excellent tools at this stage) and start sketching out concepts that come to your mind by looking at your library, sketching helps because ideas tend to fade away as fast as they pop into your mind

For example, if a client asks me for a “fresh” design, I will simply enter “fresh” in Google for example (or your preferred search engine) and checkout the image results.

Here is a sample of what I came up with:

How would these images inspire me? What would they tell me about the direction of the design?

Well, simply knowing that my client wants a fresh design and by using this method in interpreting the images I would understand that:

• I should mostly go for organic or curved shapes
• Light “fresh” color shades are preferred (more on color in a later article)
• Use of “crystal” style and semi-transparent components.
• Have a lot of white space and no over-crowding of components

I usually prefer to do this exercise with 2 or 3 other designers together as it helps bounce different ideas off each other, I would ask each one to search for images alone for 15 or 20 min, then sit together and start saying what we see in each image, you will be surprised how other people may see something totally different than what you think or see, and this may open up a totally new idea for you.

It’s important to talk during this stage in the design process! The word “fresh” means different things to different people – so don’t rely solely on the initial search of image results or your own interpretation to be the definitive source of inspiration.

Don’t Copy Ideas, Steal Them!

Good artists copy, Great artists steal,
- Pablo Picasso (1881 – 1973)

My interpretation for this quote is this: Copying another idea will make you a good designer, however, “stealing” an idea or concept from within another design and using it wisely (without blatant copying) will make you a great designer.

Stealing an idea is hard – much harder than copying – you need to truly understand the concept to lift it from one place and move it into your design.

Case Study: Stealing the Pyramids

In a recent project, I was working with a team on a site for an Egyptian Tourism portal. They did not want a straight forward “Pyramids, Karnak, Pharaonic” style site that most people would go for… They wanted something modern, yet they wanted to keep an Egyptian identity that would literally say “this site is from Egypt”.

It was a real challenge, but by going through the above methodology we came up with images like these:

Now the client didn’t want cliché designs showing straight forward hieroglyphs or images of ancient Egyptian temples and stuff like that, but by looking at the images we started building on the idea that we can use some elements such as the slanted walls and the ancient Egyptian portals and how they would relate to the site being a portal to Egypt.

The problem is that the only style that’s unique to Egypt is Pharaoh-style. If we went with Arabian art, for example, it would not be unique to Egypt. If we show diving or beaches, it is not unique. If we go with any other style, it will not be unique to Egypt and that was a strict requirement.

At the same time, we were told not to use clear Ancient Egyptian images or hieroglyphs as the client wanted to promote all types of Egyptian tourism, not just temples or pyramids. A tricky design brief, to be sure.

In the end we came up with a sketch like this:

We simply took part of the entrance “portal” pylons in Karnak temple, using only the slanted lines to identify the walls, the area in the middle was used to animate different images from Egypt and we used the left area for the logo and navigation while the whole right area was used for the content.

It was a very simple concept, yet it fulfilled all the requirements. Such an idea would have been hard to come to mind if we had not watched the photos and images that came up from a simple “Egypt” search query.

We were able to steal the ideas behind the Karnak Temple and the Pyramids, and then use them in our design.

Good Concepts Speak For Themselves

Some people argued that this concept may not be very clear when people look at the site, and this may seem strange, but concepts don’t need to be “understood” from first look at a design… nor do they need to be visually clear at all – this is not a must. This may be easily understood by looking at logos, take the Mercedes logo for example:

At first glance for most people, it is just a 3-pointed star. However, the concept behind this star is that it represents its domination of the land, the sea, and the air – having the top arm representing the air and the 2 bottom arms representing land and sea.

Who knew? Very few people outside of the company… but that’s not the point, now is it? A good concept speaks for itself – even if people don’t immediately understand exactly what it means, the intentional shapes and ideas underneath will always take on a life of their own. Concept-less designs don’t have that kind of life… they just sit there.

Finding Inspiration for Concepts

Another great source of inspiration is to try and stay away from your screen. Many designers tend to visit design inspiration sites, which contain daily top designs. While this is a good exercise in other phases (such as requirements gathering and in component details), it probably won’t help much when you’re trying to come up with your own core concept.

It’s often better to look at other off-screen sources – Billboards, Magazines, Posters and TV Commercials are very good sources if you have time, especially because the rules governing web design differ greatly from print design or TV Ads, they give you a unique perspective that help you come with up with very original ideas that you can work into your design concept.

Architectural designs also can be good and unique sources of inspiration:

Depending on your client and your goals, each of the above buildings can give you new concepts and ideas to use for your web site “container shell” design as in the following examples (in the same order):

Notice how each of the architectural photos from above can easily be turned into viable website shell designs.

The trick is to always keeps your eyes open and use everything as your source of inspiration, don’t narrow down your options by sticking to looking only at other web designs or trying to come up with something on your own.

Conclusion

Seeing comes before words. The child looks and recognizes before it can speak.
- John Berger, Ways of Seeing

If you haven’t come across John Berger’s, Ways of Seeing, it’s worth finding a paperback copy (or at least an e-book version!). I won’t dig too deep into the details, but it’s a book that explores the ways that people see the world around them. The underlying message is that seeing is a vital and primal instinct to us humans – we “see” before we read, before we speak, and before we walk.

As such, we as web designers can take some special meaning from this truth. We should be careful to craft the concepts behind our designs because they are the first thing that people “see”. Before the words on the page or the flashy image slider that we’ve been working so hard to code, people see the shell – the concept – that creates the overarching impression of the site. Details are important, don’t get me wrong, but you can’t really nail the details until you’ve got a meaningful design to put them into.

Read more great “theory” articles in our Web Design Theory Session!

A special thanks to Ahmed, who turned in this article in the midst of the chaos happening in Egypt.

Webdesigntuts+

True Love Beyond Sex. by =princepal

Artist’s Comment

I was always think that, True Love start after sex, but somebody corrected me…
And said Yes! True Love start after sex, because “True Love Beyond Sex.”

Happy Valentine

Download Here