snap2objects

30 Covers in 30 Days, Part 2

richenda — Wed, 11 Nov 2009 23:33:30 +0000

We return you now to a NaNoWriMo challenge already in progress. Chris of Fwis is still working hard to design 30 Cover in 30 Days. Below, his first 5 covers and Part Two of our ongoing interview.

Enjoy!

Could you give us a sentence or two about each cover you produced this week? What methods did you use? Are there any new styles or techniques that you experimented with? What ideas did you want to convey?

1: The Business by Tricialee Friedman (view full)

The first one is always the toughest, and I was a little fussy on this one. I still don’t like the type treatment. The image is from the Library of Congress. I wanted to convey something along the lines of a shattering injury.

2: Traffic Lights by Cynthia Dawn (view full)

Pen & ink. I need to do more like this, just simple, broad strokes. I wanted to convey precociousness but also something dramatic and a little insidious.

3: The Beauty of a Grid by Alexander Deluca (view full)

This is one of those covers that just sorta happened on the first pass – its my favorite one so far, though it might need a little more contrast.

4: Meet John Foe by Marcia Lee Metzger (view full)

More LoC images here – basically just an Action Comics cover.

5: King of the Food Court by Stacey Shackford (view full)

I had a really short description for this one, but I really like the idea of some mall-bound sage or poet. The type is sort of an embarrassing one amongst designers so I had to use it.

Chris Baty (founder of NaNoWriMo) has defined Week One as being full of energy and anticipation. Would you say that accurately describes your experience this week?

No, I am struggling trying to write, run a business, and finish these covers. My social life is in the pits!

Have you met your goals for this week?

No!!

How much time have you spent on covers? Your novel?

I’d say about an hour apiece on the covers. I am something like 10,000 words behind on my novel, but I’m taking a week off for Thanksgiving and expect to make it up then.

You’ve said you’re not using stock images for this project. Where are you getting images from, and how has this affected the final products?

As I mentioned, the Library of Congress Image Search is great; I’ll probably end up using some of my own photos, staying purely typographic, or illustrating by hand. I’m not exactly sure to what extent I’m willing to go fair-use on copyrighted images, but its an option.

On the third, you went outside the parameters and designed a cover of your choosing. The Nominations thread is now some 200 posts long. Are you browsing for more ideas that spark your interest, or leaving it up to the NaNoWriMo selection team?

Probably not; I need to get the covers done for the people the NaNoWriMo editors have chosen – they made some excellent choices and I need to nail those to the wall before I start tossing wrenches into their careful curation. Sorry Chris & TK!

You can always find Chris’ latest cover in this forum thread: http://www.nanowrimo.org/eng/node/3438529

Have a question for Chris? Leave it in the comments!

Ultimate Photoshop Crash Course – Part II

estefany — Wed, 11 Nov 2009 22:14:19 +0000

Here we are for the second part of the Ultimate Photoshop Crash Course (check the first part here). This software is really complex, but we’re making everything simpler for you.

After learning about the workspace, how to create/edit/save documents and understanding layers in Part I, we can now start practicing a little more – beginning with the tool bar. In this article, we’ll explain the essential tools at the top of the tool bar.

The Toolbar: Overview

You don’t need to worry about all the tools right now. We will work with a few tools at a time. The one thing you must pay attention is the Properties bar at the top of the screen, which changes according to the tool you’ve selected. That’s where you’ll find the settings for each tool.

Here are the names of each Tool, and their keyboard shortcut (in parenthesis):

ESSENTIAL TOOLS

BASIC SELECTIONS

The Move Tool (shortcut V) is very important. As the name says, it’s used to move the objects contained in layers. Try to open a photo, and with the Move Tool selected, click and drag the photo. You’ll get your first stop message, telling that you can’t move this layer. It’s because this layer is defined as the background, the default for any photo you open (Jpg, Tiff).

Go to the Layers panel, and just click twice on the layer’s thumbnail. Then click OK to release the background. Notice that the Background is now called Layer 0 and the little lock symbol has disappeared.

Now you can move the layer using the Move Tool.

SELECTIONS: MARQUEE TOOLS

Let’s start selecting objects. First we’ll use the Rectangular Marquee Tool (M). Notice that the icon has a tiny black arrow in its bottom-right corner. That means that there are other tools hidden under that icon, called a group. To see them, click on the icon and keep pressing the mouse till the group menu appears (give it a second).

We only need to demonstrate the Rectangular Marquee Tool here, because the others work the same way, just in different shapes (ellipses/oval/circle, single row or column of pixels). Select the Rectangular Marquee tool, then click and drag across an area of your image. You’ll get a marquee like this one:

Like the first example, select the Move Tool and drag the selection.

Now you see what a selection really is – a part that you can edit separately. Selections are so important that there’s a menu on the Menu Bar especially for them: the Select menu. With this menu you can deselect, reselect, invert a selection, modify or transform a selection, and more. And remember to deselect the objects after editing, or you won’t be able to do anything else outside of the selected area.

Lets say I don’t like the change I’ve made and I want to go back a step. To undo steps in Photoshop, press Ctrl + Alt + Z as many times as you need (by default, you can undo/redo 20 steps at a time). If you need to redo steps, press Ctrl + Shift + Z. Use the Redo command to get your selection back.

With your selection made again, press Ctrl + J to see something new. Apparently nothing has changed, but take a look at the Layers panel.

The Ctrl + J shortcut duplicates a layer. As we had an active selection, it duplicates only that part of the selection. Now we can move the new layer without affecting the original image.

It’s starting to get fun, isn’t it? The better you know Photoshop, the better it gets to use. Keep up the good work!

Select the Rectangular Marquee Tool again and pay attention to the Properties bar. Remember that I said that it changes according to each tool? Our Properties bar is now displaying settings, or properties, for the active tool–the Rectangular Marquee Tool.

Take a look at the group of four icon on the left. It’s important to know these four settings, as they work for all selection tools: New Selection, Add to Selection, Subtract from Selection and Intersect with the Selection.

New Selection is the simplest one, it can only create separate selections.

See the other ones in action:

Add to selection

Subtract from Selection

Intersect with the Selection

Another important setting is the Feather value (also works for all selection tools). Try setting the feather as 30px, create a selection with the Rectangular Marquee and drag it with the Move Tool. You’ll get a smooth, fading border.

SELECTIONS: LASSOS

The next icon on the Tool Bar is the basic Lasso Tool, grouped with the Polygonal and Magnetic Lasso. The basic Lasso is a free hand selection; it can be hard to get a good result with this tool, especially using a mouse. The Magnetic Lasso is automated, it ’sticks’ to the lines of your picture, and only works well for some images. Let’s focus on the Polygonal Lasso for simple selections.

Click several times around the element you want to select, creating the shape for the selection. Remember that it needs to have the same start and ending point.

When you finish the contour of the shape (I know, it’s really ugly here, it’s just for learning purposes) the marquee appears automatically. Then you can try moving it with the Move tool or duplicating (Ctrl + J) and moving.

SELECTIONS: MAGIC WAND

Another simple, but sometimes useful selection tool, is the Magic Wand. It creates selections based on similar colors. We can use this for images with a flat background. An useful setting in its Properties bar is the Tolerance setting, which indicates its strength. The wand will end its selection depending on how similar/dissimilar the pixels are.

Open an image with a flat background and click on its predominant color (like white in this case). The Magic Wand selected all the connected white background.

Go to Menu > Select > Inverse, since we actually want to select the model and not the background. Duplicate the selected part of the layer (Ctrl + J) and use the Move Tool to see the effect.

These are the basic selection tools. Later we’ll see about the advanced ones.

CROPPING

The Crop Tool (C) in an extremely useful tool, even for people who just want to edit their photos for Facebook. ;) If you want to crop people or things out of a photo, this is the tool to use.

This tool isolates the part of the image that you want. See how it works by selecting this tool, then clicking and dragging around an area in the image. Notice that the non-selected area looks darker.

Now this is what you get when you hit Enter:

Your image has been cropped to that specific area. (The gray border is actually the Photoshop window, not a border on the image.)

One of the best features of Photoshop is that you can define an exact size to crop your image to. Lets say you know you have a photo frame that is exactly 4×6in. You can crop your photo to exactly 4×6in for print or anything you want. Let me show you how.

I’m going to make a web banner with 300×100px. All I have to do is set up the Properties bar with these values for width and height and the resolution 72ppi (web resolution).

Whatever I do, no matter how large or small I draw the crop selection, the final image after the crop will have 300×100px. If your selection is smaller, say, 60×20px, the tool will expand your selection to fill 300×100px, and vice versa.

Try other sizes and proportions, practicing what you’ve learned.

MAKING ADJUSTMENTS

Now that you know how to handle these tools, let’s start editing the colors and lighting of images with the power of the Adjustments menu.

You can find the Adjustments menu at Menu Bar >Image > Adjustments.

Using the options from this menu is the simplest way to make adjustments to the whole image, but we can also use these settings on individual layers using the Adjustment Layers button. You can do this by clicking on the circular button at the bottom of the Layers panel or, for CS4 users, by using the Adjustments Panel. As both are a little more complicated, let’s work with the menu Adjustments for now.

Above: The Adjustment Layer button.

Below: The Adjustment Palette in CS4.

I’m going to demonstrate some of these adjustments with this beautiful photo from ~markheet.

Notice that it’s a little dark. We can change that with one of the basic light/shadow adjustments: Levels. Go to Menu Image > Adjustments > Levels ( or Ctrl + L).

In this dialogue box you can adjust the dark tones (first slider) the midtones (second slider) and the highlights (third slider). Let your good sense make the job and find the appropriate level. You can see the changes to your picture as you make them if you check the Preview box.

Here you see the result:

The Levels is a simple adjustment tool for light and shadows. You can also try the other ones from the first group in the menu, like Brightness and Contrast, Curves or Exposure.

Time to play with colors. For that we can use another interesting adjustment, called Hue/Saturation (Menu > Image > Adjustments > Hue/Saturation). Here is our dialogue box:

Play with the sliders to see what happens. The hue changes the color itself, the saturation changes the amount of that color and the lightness makes it darker or lighter. Again, check off “Preview” to see how your changes look.

Also, you can adjust colors using any of the other options in this Adjustment group, like Vibrance (CS4 only), Color Balance, Black and White, Photo Filter and Chanel Mixer.

The other adjustments, besides light and colors, are not typically used for regular editing. Let me quickly show some of them:

Invert

Gradient Map

Shadows/Highlights

Selective Color (applied to the eye’s color)

Now you know the basics for adjusting colors and lightness and to create special effects on your photos. Sometimes this takes a lot of fiddling to get just right, but Photoshop is so cool that it can make these adjustments automatically. Of course, it won’t work great for every image, but it’s worth trying. There are three options in the Image menu: Auto Tone, Auto Contrast and Auto Colors.

In this part we’ve learned to make selections using different tools, crop images and make adjustments to colors and lightness, and how to create some effects. Keep practicing–try to select parts of the photo and adjust that part (select the eye or the lips and apply adjustments).

PS: All the photos we used are from artists on DeviantART.

30 Covers in 30 Days

richenda — Tue, 03 Nov 2009 04:55:29 +0000

Every year, thousands of people voluntarily put themselves to the ultimate literary challenge: to write a novel. Last year, 21,683 did.

It’s called NaNoWriMo, which stands for National Novel Writing Month. Now an international phenomenon, over 100,000 writers, professional and amateur, have signed up at NaNoWriMo.org and pledged to do the seemingly impossible. If you can write 50,000 words in the 30 days of November, you win.

The challenge has already inspired spin-offs, from the sanctioned Script Frenzy (100 page screen- or stage-play in April), to NaNoEdMo (edit your novel) and 24-Hour Comic Day (write and draw 24 pages in 24 hours). Now designer Chris Papasadero, co-founder of design firm Fwis, has taken on his own challenge.

Papasadero is going to design 30 book covers in 30 days. Novelists who post a title and synopsis of their story are in the running for selection by the NaNoWriMo team. The plan is for one lucky novel to be transformed every day this month. As every past participant knows, November isn’t always kind to those who take on big projects.

Snap2Objects will conduct weekly interviews with Papasadero during November, to follow his progress and see how this ambitious venture fares. Read More for this week’s interview, and come back next week for part two!

First, could you recap what the 30 Covers, 30 Days project is and why you decided to take it on?

I’ve been a fan of NaNoWriMo for some time, and I often find myself appreciating volume over quality in some things, so this is a good chance to embarrass myself productively. I will be designing a cover for a NaNoWriMo writer for each day of the project.

A lot of NaNoWriMo participants have wondered, how will you select novels to be turned into cover art? Are you browsing at random, or making an effort to take a wide sampling of genres, locations, etc.?

The covers are being chosen by the NaNoWriMo head honchos; I have no idea how they’re going about it, but I have to assume they’re going for a broad variety of topics, demographics, segments, etc. to properly represent the broad range of writers participating in the project!

How did you first find out about NaNoWriMo?

I believe I heard about it four or five years ago, back when I lived in the lovely city of Portland, OR.

What is Fwis, and how long have you been involved with them?

Fwis is my design firm and we’ve been around for about seven years.

What is your background as a designer?

I’ve been working on Fwis for a long time now and have been involved primarily in the day-to-day operations of the firm and don’t do as much design as I’d like to, so this project will help me blow the dust off the ol’ visual part of my mind and maybe even sharpen it up a bit.

What sort of projects do you typically take on?

It really runs the gamut, from advertising and marketing campaigns for companies like Corbis, to package and environmental design for companies like Johnson & Johnson.

How would you characterize your work?

Conceptually relevant to the clients’ needs… humorous, ‘wonky’, colorful and optimistic. I think at the baseline the ideas are always good, truly unique and perhaps even a bit iconoclastic.

What tools do you use frequently? Do you prefer digital media, or traditional?

I definitely prefer getting away from the computer when I can, but it really speeds things up, which is appropriate for this project! I use a spiral-bound sketchpad, a Pilot Precise V5, and scotch on a daily basis.

You maintain a blog at http://covers.fwis.com/ dedicated to book cover art. What interests you about book covers?

The book cover is a perfect fusion of two creative minds; the wordsmith and the visual thinker.

I see you have a word count going at NaNoWriMo.org. Are you attempting to write a novel as well as design 30C30D? Do you think you have a better chance of finishing one or the other?

I was hoping you weren’t going to ask this question as I wanted it to be a surprise! But yes, I am also writing a novel this month as well. I clearly have no social life.

How do you plan to stretch yourself artistically with this project?

Speed, volume, experimentation. I’d like for all the covers to somehow feel a little serialized, but I’m not sure if that’s going to work out!

How does it feel to be on Day One (November 1)? Do you have any worries, or aspects you’re looking forward to?

I’m fiddling too much and need to use broader strokes, speed, and smart concept. I am so amazed at how nice the NaNoWriMo people are, they are optimistic and cheery and I hope that they all become famous, wealthy authors some day!

Follow the Project on the NaNoWriMo forums

Interview with the NaNoWriMo blog team

Do you have questions for Chris? Want to know more about NaNoWriMo? Tell us in the comments!

30 Covers in 30 Days, Part 2

Four Vector Floral Ornaments

mao — Sat, 31 Oct 2009 02:44:00 +0000

More floral vector ornaments! I love all those baroque-ish designs. These ones are just lovely. Perfect for fancy website backgrounds, for example :)

Preview

Download 855k .zip in [ .ai .eps .svg ]

This work is licensed under a
Creative Commons Attribution 3.0 License.

Ultimate Photoshop Crash Course – Part I

estefany — Thu, 22 Oct 2009 20:09:21 +0000

Hi everyone! We have good news for you. We’re making a Photoshop Crash Course (and soon an Illustrator version as well). In a few simple and fast articles we’ll help people with no knowledge of Photoshop learn the basics, so you can start editing and creating!

Have you always wanted to retouch and edit your photos or make simple manipulations? This guide should be a good starting place for you. Let’s do it!

INTERFACE
When you first open Photoshop, it may be scary – a lot of panels and icons you may not be familiar with. The screen is divided into areas to help you understand their functions. The image below shows the default appearance of Photoshop CS4, which is composed of these basic elements: the Menu Bar, Properties Bar, Tool Box and Palettes.

Click to enlarge

This is what we call the default Workspace. A workspace is the arrangement of palettes and bars that are visible. In Photoshop there are a lot of different palettes besides the ones above. To see the other palette options, take a look at Menu Bar > Window:

3D, Actions, Adjustments, Animation and all the others are palettes that can be turned on or off (make visible or hidden). Also, there are some preset workspaces that you can access by going to Menu Bar > Window > Workspace or by clicking on the “Essentials” button (which is part of the default Workspace) to choose one. As you are not yet familiar with the palettes, let’s stick with the Essentials Workspace.

Photoshop is very customizable. You can change palettes, open new ones, close others, and even save workspace arrangements that you like.

The big panel on the left can became a small column of icons. This leaves more space on the screen for the image we’re working on. Try clicking on the small highlighted arrows. You can also shrink the palette by clicking and dragging the border, like in the image above.

OPENING, CHANGING AND SAVING DOCUMENTS

Before we start using the tools, let’s see how to create, open and save documents. Photoshop offers a large array of formats to work with, but we’re going to focus on the most general ones. Suppose you have a photo to edit and send to your friends. Just go to Menu bar > File > Open and then browse through your folders, select the image file you want, and click on Open.

One of the first things you might need to do with a photo is change its size. For example, you may have an 8MP digital camera. When you take an 8×10in photo with this camera, the digital file will be 3264×2448px (much too big to send to friends by e-mail). Want to know how to resize it to make it smaller? Go to Menu > Image > Image Size. Set the width and height, and pay attention to the resolution (72 pixels/inch for internet) then click OK. That’s it!

There’s a similar command that often confuses people, called Canvas Size. You can see it at Menu > Image > Cavas Size, right below Image Size. What’s the difference between them? Well, it’s better to show you. This is the Canvas Size dialogue box:

If I change the height from 600px to 900px and click OK, this is what I get:

I changed the document, but not the image itself, creating this white area below and above the image.
You can make a simple border using this feature. Set the new size to about 105 percent (you must change the units in the drop-down box, from pixels/centimeters/etc to percent) for both width and height. This is my framed image:

Now you want to save a copy, but be careful! If you use the command “Save” instead of “Save as” you will lose the original file. Go to Menu > File > Save As. Check if the format is JPG and click OK. A small dialogue box should appear. Set the quality level (9 is fine for web) and click OK. You’re done.

CREATING DOCUMENTS

It’s very simple to create a new blank document to work in. A new document is like a piece of paper on which you will work. Go to Menu > File > New.

You can choose settings for your new document in this dialogue box. You can fill in the name of the document, choose preset options (see below), or manually set the dimensions, resolution, etc. If you’re not used to these settings, you need some key information before you make your choices.

Are you preparing your work for screen display (websites, slides, etc) or for printing?

1 – If you are preparing your work for screen display: use pixels to define the size, 72 pixels/inch for resolution and RGB for color mode.

2 – If you are preparing your work for printing: use centimeters, millimeters or inches for the size, 300 pixels/inch for resolution and CMYK mode. (You can also use RGB and convert to CMYK when the work is done.)

There are also some presets to help you with this task. I usually use “International Paper” for printing and “Web” for screen.

Now you know how to open a blank document to start creating.

UNDERSTANDING LAYERS

One of the biggest features in Photoshop is the use of layers. They make a huge difference, because you can work with separated elements, apply different behaviors (modes) to each element, resize isolated elements and much more. If you haven’t used layers before, it’s time to start.

I’m going to open an illustration I did based on an iStockPhoto vector I found. My file already has several layers, and was made in Photoshop, which means it is has a .PSD extension. PSD files are documents created and saved in Adobe Photoshop. It’s only appropriate for editing, not for sending to friends or for printing, as they can be very large.

This is the illustration and its Layers palette:

If layers were real, they would be transparent plastic sheets, like the ones used in hand-drawn animation. You can draw on the sheets, place other sheets with drawings on top of each other, and move/edit each one separately. Together, they make one image. As you can see in my Layers palette, I have one layer for each part of the illustration (face, hair, eyes, lines and blush). Because each is in its own layer, I can turn each part on/off (visible or invisible), and move or edit each of these parts.

See the layers deconstructed below:

And an animation that shows the overlaying:

To turn off one layer (make it invisible), I just click on the tiny eye to the left of the layer, like I’ve done to the Hair layer…

Or, I can turn the Hair back on, and turn the Background off:

Curious about this chess pattern behind her? That’s the way Photoshop indicates transparency. As I turned off the white background, it became transparent. If I saved the image like this, as a png or gif, it wouldn’t have a background. (Quick tip: If you want your files to be transparent for the web, you must use png or gif format when saving.)

If you don’t want to make an element totally invisible, you can change its opacity. The command is in the top-right of the Layers palette. Here I use the dropdown/scale to set the opacity of the Eyes layer to 20%. See the result:

Nice, isn’t it? Now you can see the real magic: the blending options. It’s actually a complex setting, but we’re going to use the basics for now. The blending options affect the behavior of the layer, changing colors, mixing textures, determining how they… well, blend. Lets take a look and see some simple examples.

The Blend options are in the top-left of the Layers palette. All the options become visible when you click on the “Normal” dropdown arrow. Each of these blending modes affects the layers differently. There aren’t too many, so they’re easy to get familiar with. You can try each one in different situations and see what’s best for your work.

They are separated into groups by lines, as you can see. I would roughly describe the second group (Darken – Darker color) as working best for dark tints, the third group (Lighten – Lighter Color) for light tints, the fourth group (Overlay – Hard Mix) for a mixture of tones, the fifth group (Difference – Exclusion) inverts the colors, and the last group (Hue – Luminosity) works only with colors, not black and white. The best way to understand what each setting does is to play with them. See how different blending modes affect the cheeks layer:

Now see how blending modes affect black and white layers (like the eyes in this case). The results can be surprising.

Interesting how the black disappears with Screen mode and white disappears with Multiply mode, don’t you think? I told you, blending layers is awesome!

Well, that’s it for now. A lot of information, but it’s worth learning. With this basic guide, you can start to understand Adobe Photoshop, which has a huge “universe” of possibilities.

In the next article we’ll start learning actions and practice making changes. Meanwhile you can experiment with what we’ve seen today: open/create/save files, edit images sizes, customize workspaces and use PSD files with layers to play around with blending modes. (If you need layered files to practice on, you can download some from sites like deviantART.)

Prepare yourself for much more information in the next article. See ya!

Musical Instruments Silhouettes

mao — Mon, 19 Oct 2009 18:10:54 +0000

9 Musical instruments silhouettes to enrich the soundtrack of your life or your projects.

Preview

Download 405k .zip in [ .svg .ai .ai]

This work is licensed under a
Creative Commons Attribution 3.0 License.

Movements and Styles After Modernism

estefany — Tue, 13 Oct 2009 17:48:27 +0000

Hi everyone! We have one more Design History article, talking about the postmodern movements. Many things happened in the art world after the second war. See the most important movements that are still reference for designers.

The International Style

About 1950, in Switzerland, a new style came out, very clean, objective, neutral, using sans serif type, known as the International Style or Swiss Style. It was based on the idea that type should be neutral and not a distraction from the content. Its concepts expanded to other arts, like architecture, product and graphic design, becoming a world-wide style.

Pop Art

The Pop Art movement challenged tradition, joining the popular culture with fine art. Born about 1950-1960, the Pop Art is considered one of the earliest postmodernist arts. The most known Pop Art artists in the US were Andy Warhol and Roy Lichtenstein.

Punk

Starting about 1976, the punk movement was a rebellion against traditional values, affecting different areas, from music to fashion, art and design. In fashion, it was market by intense make ups, bold hairstyles and aggressive, torn, cut, mutilated clothing.

Post Modern Architecture

The postmodernist architectural movement emerged in 1960, as a response to the International Style. It brought back the ornaments, colors, masses and texture, against the formality of the International Style. In modernism, these characteristics were seen as unnecessary, not functional and expensive.

New Wave

Wolfgang Weingart, considered the father of New Wave typography, made experiments with type, based on a huge knowledge of the functions on typography. He says that he started Swiss Typography and “destroyed” this concept, creating something new, but without the intention of creating a new style. His students were the ones to understand his ideas and spread the “Weingart style”. Among his students, the ones that most stood out were April Greiman and Dan Friedman.

Deconstruction in Literature

The French philosopher Jacques Derrida proposed the Deconstruction, as a method of analyzing literature, highly philosophical, which covers the different layers of meaning. On its approach, the text has contradictory meanings and different interpretations, showing that the language is constantly changing.

Deconstructed Typography

The deconstructivism is characterized by fragmentation, layering, non-linear shapes, distortion and dislocation. The movement initialized with Derrida’s studies had also a great importance for postmodern architecture.

References and further information:

Design History

As you could see there were many important artistic movements since 1950 – each one with its characteristics and importance. I can say that one of my favorites is the Swiss International Style, so clean, objective and elegant. I guess, although, for most people the “deary” is the Pop Art. What’s your favorite one?

6 Floral Vector

mao — Wed, 07 Oct 2009 21:27:58 +0000

This is Another set of floral vector ornaments. This time 6 little happy flowers.

Enjoy

Download 558k .zip in [ .psd ]

This work is licensed under a
Creative Commons Attribution 3.0 License.

30 Free Comic Fonts

estefany — Mon, 05 Oct 2009 19:17:11 +0000

No more Comic Sans! Nothing personal, just kidding. Who has never needed a nice comic font for speech balloons? There are plenty of good options and styles. Make good use of these 30 comic fonts.

Shonepunk! Custom

JL Quixs

Adam Warren 0.2

Go Boom!

Vigilante Sidekick

Deeko Comic Regular

Egg’s Handwriting

Badaboom

Anime Ace

Komika Poster

BD Cartoon Shout

ACME Secret Agent

Indie Komiks Sketch

SF Comic Strip

Manga Temple

Hey Arnold

Adventure

Digital Strip

Smack Atack

Zud Juice

Damn Noisy Kids

Marooned on Mars BB

Crash Test

Aerovias Brasil

Agent Orange

Gee Whiz

Mighty Zeo

SF Slapstick Comic

Onomato Shark

Yard Sale

BONUS

A typography only for cursing.

Curses

Digital Revolution in Graphic Design

estefany — Fri, 02 Oct 2009 15:31:29 +0000

We’re finishing our Design History series with a more contemporary matter: the computer and the graphic design. We’re going to see some great names that we already know, like Apple, Adobe and Microsoft, and how they contributed for the graphic design. Good reading.

Computer Graphic without a Screen

Computer graphics exists even before the screens we know. In one of the firsts graphic images, created by Ben Laposky in 1950, an oscilloscope was used. Later, in 1960, William Fetter uses the term “computer graphic” as he was a graphic designer for Boeing Aircraft Co.

The Screen

The discovery of cathode rays, by Julius Plucker in 1959, made possible the creation of the CRT (Cathode Ray Tube), which allowed data visualization. The firsts screens was only one color and very crude. Later they were improved, working with the three colors RGB.

CRT

GUI – Graphical User Interface

With the GUI (pronounced “gooey”), instead of using only commands on a keyboard, the user had an interface with pictures, buttons and pointers (in 1963, Douglas Englebart created the first mouse). It made a lot easier to use a computer and explore its possibilities. In 1981, Xerox launched the Star Workstation, the first station using GUI.

Xerox’s Star workstation

Digital Type is Born

Dr. Ing. Rudolf Hell created in 1965 the first device to produce characters on a CRT with digital control: the Digiset typesetting system. Other systems appeared and evolved near the 1970’s. In 1968, the Hell Design Studio designed the first digital type, called Digi Grotesk.

Bit Map Fonts

Also called “raster fonts” or “pixel fonts”, these fonts are made from squared dots, pixels, creating the shape of each letter. They look pretty crude, due to its squared shapes. Today they are used for Flash and web design.

Post Script Language Type 1 – Adobe, 1985

There were different formats for digital fonts, till Adobe created the PostScript Type 1 for the Apple Laserwriter printer in 1985, about six years earlier than TrueType format. The format permits scaling to any size, but it’s limited to 256 characters for font. For more complex titling, accents and ligatures, a “pro” version is needed.

True Type – Apple & Microsoft, late 1980’s

TrueType (first called Royal) came as PostScript rival, using a different curve system (quadratic curves). They look sharper on screen and need only one file, different than PostScripts, which needs a bitmap suitcase and a font file. Each one had its advantages and disadvantages.
OpenType – Adobe & Microsoft, 1990’s

Both technologies from the PostScript and TrueType were combined in OpenType. OpenType’s Unicode encoding allows 65,000 characters in a single font and it’s also cross-plataform, working on Macs and PC’s. So many characters can make complex fonts with special characters, accentuation and ligatures or even Greek and Cyrillic characters.

Microsoft ClearType and CoolType, 2000

These are sub-pixel font rendering technologies, created to provide sharper visualization of fonts on screen, but they only works on LCD displays. ClearType was created by Microsoft, while CoolType was created by Adobe and were added to E-book Reader and Acrobat Reader.

Digital Type Pioneers

Bitstream, 1981

Bitstream was the first digital type foundry, founded by Mike Parker, a traditional type designer from Linotype. His partner Matthew Carter was also a traditional type designer, that used his knowledge adapted to the new demands of digital type. Bitstream created some own fonts and also remade classic fonts in digital medium.

Macintosh”City” Type, 1983

Susan Kare designed for Apple a series of city-named fonts for screen. The main font of the series was Chicago, used for the operating system. The other ones were derivated from known fonts like New York fromm Times New Roman, Geneva from Helvetica and others.

Adobe Type Originals

Adobe started digitalizing traditional fonts, but about 1989 they started the Adobe Originals, where they produced a new series of type families. The known Adobe Garamond was one of the firsts fonts designed by Roger Slimbach for Adobe Originals. Some fonts that succeeded that were Traja, Lithos and Caslon.

The impact of the computer and digital type for graphic designers

We know that the history of graphic design comes much earlier than the computers. Then how could the computer turn everything so different? It’s hard to imagine myself doing everything without a computer, while the early designers needed to do everything by their own. Today it’s so simple to buy a beautiful font family, we don’t need to engrave letters in metal. How much is that good? I leave this question for you, to balance the good and bad aspects of “digital revolution”.

References and further reading: