Tutorial Outpost

So you want to make a posit-it note? A note, a photo, anything - but posted on a wall for example. The basic technique to do this is quite simple. Let me show you how. First, make a shape you want to turn into a posted item on a special layer called “message”.

Now go to Edit > Transform > Warp. You’ll get nine points on your item. Dragging them around give your item a little perspective, so it does look more three dimensional.

Now duplicate the “item” layer and name the new duplicated layer “message shadow”. Drag this layer beneath your original “message” layer. Now, right click on “message shadow” and choose blending options. In these options under the drop shadow tool choose the look of your item’s shadow. Preferably, put “0” under distance so you get the shadow all around your item.

This is what you get.

If you look at your layers window, this is what you should have.

With the “message shadow” layer selected go to Layer > Layer Mask > Reveal All. Make sure you have the new layer mask of the “message shadow” layer selected.

Now using the gradient tool (with a selected default white to black gradient”) make a gradient from the top to the bottom of your message.

This is what you should have looking at the layers window.

Now you have the basic form of a posted item.

As you can see, the “magic” is in the shadow. Since shadows act up if you try to use this gradient technique on the top layer, you always need to use a special shadow layer. With a bit more work, a few more drops of color and some text, you can make a very nice stick-it note.

Download the PSD used for this tutorial.

Here are 8 books that are a must-have for anyone learning Photoshop for the first time or just trying to polish off their skills.

There are literally hundreds (if not thousands) of books on learning Photoshop…all of which can run anywhere from $20-80 a book. This list is here to help you cut through the fluff and get straight to the good content.

by Tammie Lister

Color Affects Your Mood

Remember those mood rings you could get as a child where the color changed depending on your mood? The way our moods are influenced by color is a crucial part of our interaction with the world and is inbuilt into our brains that certain colors trigger certain mood reactions. Color affects all our senses. Seeing color can change moods on conscious and unconscious levels. Colors affect even the food we eat and it’s a good place to see how you are influenced by color and how this goes back to our basic instincts. Imagine eating blue vegetables, often food that is blue, black or purple is avoided and if tested produces loss of appetite, this comes from these colors meaning food is off and therefore we assume not edible.

Color & Culture

Color and moods mean different things depending on your cultural background. I am going to use my English background in this article but the principles are the same the world over. The meanings of colors are taught from a younger age: red = danger, green = nature, white = peace, black = sadness. Linked to these is also the way we use colors in languages. Language is full of the use of colors to describe moods: “feeling blue”, “seeing red”, “green with envy”.

A lot of therapies have developed that use color to influence the conscious and unconscious parts of our minds. Psychologists have long recognized the power of color on our minds, from the color itself to tones and also whether they are warm or cold colors. As a rule the lighter tones can be linked to a subtler mood, seen as uplifting and create calm. The darker are vibrant, energizing and more powerful in influence. By using colors of the same hue you can create a harmonious mood. White can make a color look more intense and by using black you can mute a color. Through understanding color and the way it relates to moods you can use it as a powerful tool in design. By combining particular colors or giving a color a hue you can create the atmosphere and influence the interaction and message of a design.

Colors are attached to moods and also seasons, which link to a set of moods themselves. Using the colors associated with seasons you can also create moods - we are strongly associated with the seasons and our influence on moods. An example of this would be:
Spring: green, light browns, light yellow - freshness
Summer: white, yellow, orange - vibrance - solid colors in middle of dark / light hues
Autumn: brown, dark green, reds, oranges - these are the darker hues
Winter: white, dark red, purples

So, what do specific colors means to us and how can you use this to influence mood? One of the best ways of looking at the way color and moods are linked is by picking some of the most common moods used in design and showing how colors are linked to them. The following are a series of notes on how specific moods can be created using colors and color combinations.

Energizing / warm

Red, orange, yellow, brown is a neutral warm color - colors of fire.

Exciting

Yellow - bright, warm colors leave a strong, lasting impression.

Surprising

Unique colors may appear surprising in color combinations. If colors don’t naturally go together you can create a focus and make people look twice – this can also put off though.

Feminine

Pink, lavender - often by using white in darker color combination you can create a feminine look also by using silver with the brighter colors you create a softer look.

Dramatic

Dark powerful - contrasting bright and dark colors will reflect a dramatic color scheme.

Natural

Subtler, complex colors are usually dulled with grey tones.

Masculine

Majority of designs use dark colors with tans or browns and sometimes blue.

Youthful

Very contrasting or not contrasting at all - very vibrant or very pale, absolute extreme colors.

Tranquil

Mostly cool colors from violet to green and including blue and grey, when you exclude strong contrasts stress is reduced.

Calming

Tones of blue, violet or green with the neutral color being grey.

Color & You

As you can see, color and moods are connected at our most basic of psychological understanding. By considering the use of color you can influence what is felt by your design work. Humans interact on many levels and use all their senses. Influencing mood is something that a lot of marketing companies and designers use to target a market and promote their business. It can also be used in the environment we exist in such as your house or work place. Take some time to think about your own reactions to specific colors and what they mean to you. We all have our own interpretations but you will also find there are general rules that apply across us all with regards to colors and how they relate to moods.

Well, it looks like Photoshop CS3 Extended is now coming to Apple’s iPhone!

It’s a complete, full-featured version that has every single feature as Photoshop CS3 Extended. It’s even at the same resolution as a 30″ monitor!

Also, instead of showing those annoying error messages, it will just call your phone! Genius!

by Ivan Brezak Brkan

Photoshop has become a tool that most designers as well as artist rely on for their day-to-day workflow. Web design, graphics, illustrations, Photoshop is a very versatile tool. There is one type of graphic that intimidates a lot of people. Thats icons! Those nifty little graphics that form the basis of any good GUI. Well, no more vectors people. If you need a basic icon for your site or application and don’t want to beat around the bush, I’ll show some basics in creating a good Mac style icon. As a case study, I will be recreating the .Mac icon which is simple, yet beautiful…

First, open a new PSD file, a 200 x 200 PX canvas will work nicely. The thing with icons is to to things big, because when minimized, they can and should look awesome. Luckily for us, a not so great detail in the big picture can look awesome when shrunk to the size of the icon.

Step 1

First make a new layer over your background layer and name it “base”. Make a nice big circle by holding shift (to make it perfectly round) while draging it. Right click the layer you made the circle and right click ”blending options”. Here you can adjust various things, including gradients which I used for this icon. Now you have a nice blue canvas.

Step 2

Now you need to “brighten” up the lower part of the icon to make it look more realistic. Take your brush and set it up like I did, activating the airbrush feature with the flow set to 50%. Now control click the “base” layer (to get a selection) and create a new layer called “highlight” not deactivating the selection. Click “highlight”! Now you can work on that layer with the selection from “base” so get your brush and start easily brusing to get the look just right.

Step 3

Now we go on to the lines. Select your eliptical marquee tool (right click on the rectangular marquee tool so you can select it) and use it to make a selection that has the outer broder in the shape of the line you want to draw (you may also prefer using the pen tool) and then go to Edit > Stroke (select white and inside, as well as 1px) to finish it. The only problem now is that the line goes outside the circle. Control click the “base” layer and go to “Select > Invert” to invert the selection. Now you can delete the part of the line you don’t need. To get the faded edges of the line right it is best to use the eraser set up like the airbrush (just select the right brush type and flow) and work around the edges.

Now repeat the process for each line to get the desired effect.

Step 4

As far as the dots go, it’s pretty easy. Just draw a little circle and use Photoshop blur filter on it. Use more blur for the bigger circles. Don’t worry to much about perspective, just be sure to have not too many and not too little circles.

Step 5

Now it’s time for a little more highlighting… Control select “base” again and drawing on a new layer, highlight the top with white using the airbrush.

Create another layer on top and using dar blue and the “base” selection brush in some dark blue edges to get a nice realistic perspective.

Step 6

Now for the blue edge. Control select “base” and make a new layer in which you’ll Edit > Stroke a 3 pixel dark blue border inside.

Having that layer selected go to Layer > Layer mask > Reveal all. Now use the default “white to black” gradient in the layer mask to make a portion of the blue border visible and a portion invisible.

Step 7

Now to finish the icon. Merge all the layers to one layer (by selecting all the layers and then using Layer > Merge layers). Copy that “master” layer (We’ll need it later). Open the “blending options” of the top layer and apply a small inner glow. Obcourse, you want that glow only at the lower edge, so use the technique which we used to make just a portion of the blue border visible here as well. Since you have the same layer (except for the glow) under it, it will look nice and finished.

Step 8

But… We musn’t forget the shadow and reflection. Copy the icon and lower it… Using the “white to black” layer visibility technique you can make quite a realistic reflection.

Now just use the airbrush style eraser to finish it up and make it look more natural. Lower the opacity of the layer to finish it up.

Now for the actual icon shadow. Now make an oval and give it a shadow effect like I did. Now just put that under the actual icon but over the reflection.

The finished product:

Now that your work is finished, you need a way of exporting it into an icon, expecially if it’s for an application. I suggest using IconFactory’s Icon Builder. It’s a Photoshop plugin which you can use (and misuse :)) to give your icon that extra edge.

I’m more important than this.
Typography hierarchy refers to the different levels of importance placed on information being delivered. Using type is about balancing and the form of letters on a page. Verbal and visual are used to interpret and understand the page contents. It’s about making the message get across amidst often a mass of text information. Text is given a structural relevance by using hierarchy when styling and formatting it.

Stand out from the crowd
The majority of readers will scan a page and then drill down to the information they are attracted. Attraction can be if they are looking for something or just something that stands out. Not using typography hierarchy means your message can get lost. You aren’t controlling the focus of the reader and as a result can’t predict what parts of your message will be delivered and what lost amongst the mass of text. Typography hierarchy organises the content and emphasis to point towards specific information. It allows the reader to know where to go on your page and where the key information is.

Ye olde hierarchy
To start using typography hierarchy it’s a good idea to take a look at the traditional structure order associated with text. Traditionally there are 5 types of hierarchical places in typography:

1. Headlines
2. Subheadlines
3. Body text
4. Captions
5. Pullquotes and other breakouts - these add interest.

Often you find that you use these places without actually thinking about it. A new line after a paragraph, single spacing after a full stop and a larger font size for a title, are all examples of where everyone uses hierarchy without actually realising it. When thinking about typography hierarchy and using it you design with these relative positions in mind and by using these create emphasis, legibility and direct the eye to where you want the focus.

Tools at the ready
There are a range of cues you can use to get across your hierarchy. If you think of these as tools to get what you want out of your text.

1. Spatial
   This is spacing both in the page, line and words themselves. You can also use it to divide up the page into sections using space. Whitespace is a great tool to use as a quick fix to unreadable text masses. By increasing the line height you are able to allow the reader’s eye to take in each line. This has to be done carefully of course, otherwise it just looks like a mass of one line paragraphs. Using spacing for a new paragraph is often the most common use of spacing.
2. Placement on a page

   It sounds logical, but where you put things on a page is a very important consideration. If you think back to the typography hierarchy places, you can see the flow down the hierarchy. By using this in relation to graphical elements of your design you can infer hierarchy. Grouping relevant information together in a block linked through style can distinguish information and make what you want stand out.
   Always remember that naturally a reader’s eye will fall to the near center of a page. In western cultures text is read left to right, top to bottom. You can use this to draw to a single focal point on the page, or to create various type focal points in the design.

3. Leading lines
   Leading lines do what they say on the tin, they literally lead into larger text blocks. These can also be seen as headlines which draw the eye into the text. Give headers that break the message into chunks. People rarely read all the information so chunk it and break down what the message is. This also works as it reinforces what you are trying to get across as a message. Think of it in terms of advertising slogans. The leading line sums up the contents of the text block and both draws the reader into that box and allows an understanding of the text by scanning the headlines.
4. Size
   Bigger is better in terms of what readers will focus on first. By using a range of font sizes you can priorities visually what text should be read in what hierarchy. Size changes should be noticeable though, a 1 point (points here could be em, pixel, text points, mm - whatever you are measuring your text in) difference is rarely noticed in a mass of text and often just looks wrong. Try using a 2 point difference for a subtle difference or for a more dramatic one a 10 point difference.
5. Content relationships
   Similar content types can be displayed in a similar visual style or text area style. This unites them into a group even if apart from each other in the design. You can also use a contrasting type face - if your primary typeface is a serif, by using a sans you can contrast this face. This should be done carefully though as can grate with a typographical design and work against if overused.
6. Colour
   Using colour in your typography along with weight can lead to enforcing a hierarchy. Certain colours can draw attention to them (depending on your graphical colour scheme). Traditionally, red is the colour for error messages or warning information, black is a useful colour for easy to read text and green is a great colour on a neutral design to use for subheadings as it’s an easy on the eye colour.
7. Case

   UPPERCASE makes something stand out, but you can also use lowercase to distinguish from UPPERCASE statements. It’s always best to use UPPERCASE sparingly otherwise it reduces from the impact if overused.

8. Emphasis

   Emphasis can be made using italics or bold text, it also can be used by graphical denoting of a word or text block and even by a change in size in the middle of a sentence. It could be an illustrated first letter of a paragraph or a arrow at the lead of a headline.

Less is more readability
Above all which ever technique you use you have to add to the mix a large dose of consistency. By being consistent about what you do you don’t confuse the reader. You lay down your rules of typography hierarchy and reinforce them by using techniques. Similar can be said for drumming the hierarchy point too far - don’t use a sledgehammer to break the nut of your message.

Messages in graphic bottles

Design hierarchy is all about the importance of visual information and giving it assigning levels of importance to make the message of the design get across. Graphic design can be distilled down to it’s core by saying it is about visual information management. You use the layout, graphical elements and typography to create a journey for your viewer. By effectively learning to use design hierarchy you add sophistication to your design by directing where your viewers go. More than likely the majority of design hierarchy designs you will make will actually be sub conscious ones.

All roads lead to the focal point

Design hierarchy can also be seen as ‘hierarchy of elements’ - the placing of elements to establish a focal point. With modern design there is invariably more than one focal point, the skill is guiding the eye through these points on the design journey. If you think of focal points as anchors to your message which you use to guide the eye about the design. There doesn’t have to just be one focal point, a design can have many and each focal point may even be part of the hierarchy by leading down a focal point importance chain.

Chop up your chunks

A design is a mass of information, by using design hierarchy you translate this information into chunks that are dealt in priority by the eye. A tip is to take all your design contents and think about what you want your reader to do. What do you want them to see first? What do you want them to understand? What do you want their actions to be? Use design hierarchy to break down the steps to achieving the goal and distilling the mass of information into a clear message at the end of the journey. If it’s several messages then lead from one the other easily using a hierarchy and focal points.

There can be more than one

Design hierarchy on the web is taken a stage further as you have to think about the entire site not just one instance of a page. By thinking about and leading through the site using the tools of design hierarchy you are able to guide the entire website journey. You use design elements to denote sections, give value to areas and unite the design.

Tallest first

By using a design hierarchy you are creating an order of importance of the visual elements. You have to also bare in mind how your design will be read. Text is read in western cultures left to right from top to bottom, use this to interpret your visual hierarchy. Say, you have something that is actually at the bottom and you want it to be a focal point. Make it stand out and the eye when going down the page will jump over lesser elements to that one. Also think about your content and arrange this to create your hierarchy.

Tool time

The key to a good design hierarchy is that it’s a natural flow and doesn’t feel forced. To get a hierarchy you have several tools you can use. These are various techniques you can apply to your design.

1. Contrast
   By balancing your site using contrast you are able to add focus and draw the reader to specific points of your design. Think about what draws your eye to a web page. This is using contrast in design hierarchy. A design with no contrast is a mass of flat information, nothing stands out. By using colour and hue you are able to guide and create a visual hierarchy.

   The flip-side of this grey mass of no contrast is of course the migraine inducing mess of graphics and typography in more colours and hues than a psychedelic rainbow. It’s the same usual story with design - balance. By intelligently placing contrast to create a visual balance and tip toward the hierarchy your design will be easier to follow and get the message across better.

2. Element balancing
   Elements also need to be balanced to create the design hierarchy. You are affected by what audience you are aiming to of course in the selection of elements. Eyes are drawn to images or large text. By using these elements you can focus in parts of your design. A big glossy image will attract a visitor and the biggest text line will mean you read this first. When presented with a mass of information the human eye naturally locks onto prominent elements. Think about what stands out and what you want to stand out. Your audience will also be lead in the same way you are.
3. Whitespace
   By using whitespace you can filter the information and segment your design. Space in a design lets the elements breathe and also draws attention to the separation of parts into logical forms.
4. Leading focus
   By leading into say a block of text with a bold, larger header you are able to sum up that text and then draw the reader into the content. This is a great way to break up the design. You can also use graphical elements to lead the eye. Lines can be directed to draw the reader. Often when leading to the focal point it is best to be subtler than hitting them over the head with big arrow pointing.
5. Proportion
   By using the relative sizing of elements and placing these in your design you can give it form and sense. It might be a large glossy photograph to focus at the header, or a repeated proportion of icon images to graphically denote meaning on the design. You can use the same logic you would use on typography to go from large to small images as you go down the hierarchy.
6. Relationships
   By creating areas that are designed in a similar style you are able to unite these parts and cement their relationship visually. Users when viewing a mass of information build mental models to assess relations among topics - you can create and lead this relationships by uniting elements through design. You can use icons here again to link elements with the same meaning or section to them.

Tie it up all in pretty pixels

Design hierarchy has balance at it’s core. By treading a tight rope of design elements you are able to make sense of your design. Viewers won’t end up confused, but will have the ability to digest and understand your meaning. A fair few of the decisions you’d make regarding design hierarchy are probably things you naturally do when designing. By introducing some basic tools of design hierarchy you will bring more usability and power to your design.

In the following video tutorial I’ll show you a quick and easy way to create a neon satin effect.

by Mike Rundle

Out of every design-related article and blog entry written over the past few years, very few have tackled the “taboo” topic of money — namely how much to charge for creative work. There are thousands of articles about CSS best practices but when it comes down to paying bills or putting food on the table, work-for-hire designers are on their own.

What They Are Really Paying For

Pricing design work isn’t the same as deciding how much a plastic scrubber costs at Wal-Mart, you don’t factor in the same variables. Each design project is a one-off thing, a “custom ordered” piece of capitalism that cannot be priced as a commodity. A plastic scrubber might make the manufacturer money if it’s sold for $3.99, but that’s not how much it cost to produce if you look at all factors. If you add up the research and development costs associated with creating the scrubber, plus the scientists’ salaries for perfecting that particular type of plastic, along with the pay for the sales and marketing teams that managed to make you think you need that scrubber, those costs add up to a whole lot and that’s similar to a design project.
Read the rest of this entry »