designShrine » Tutorials

3 Free Search Engine & Google Adsense / Adwords Ebooks

Ty Wenzel — Wed, 23 Apr 2008 22:23:03 +0000

Free SEO Made Easy E-book

Download this FREE e-book and learn some simple fool-proof strategies that you can start using straight away for search engine success.

Free SEO Made Easy E-book

DOWNLOAD

7 Days to MASSIVE WEBSITE TRAFFIC eBook CD Improve SEO

US $1.18

23h 21m

Document Sharing Secrets ebook-article marketing SEO CD

US $2.00

27d 16h 9m

SEARCH ENGINE OPTIMIZATION eBOOK on CD! Web Google SEO

US $1.18

28d 21h 6m

Free Google Adwords Made Easy E-book

Download this FREE comprehensive 84 page e-book on Google Adwords by Brad Callen and learn how you can profit with the Google Adwords system.

Free Google Adwords Made Easy E-book

DOWNLOAD

Google Adwords & Adsense Made Simple - Ebook or CD

US $4.99

18h 42m

Free Adsense Arbitrage Ebook

Download this FREE e-book to read a case study on how Michael Plante earned $4515.21 using only Google Adwords and Google Adsense.

Free Adsense Arbitrage Ebook

DOWNLOAD

Google Adwords & Adsense Made Simple - Ebook or CD

US $4.99

18h 42m

HOW TO BUILD GOOGLE ADSENSE WEBSITE INCOME EBOOK CD DVD

0 Bid

US $.99

1d 9h 7m

GOOGLE ADSENSE DOLLAR PRODUCING FACTORY EBOOK CD DVD

US $3.97

2d 8h 17m

INSTANT ADSENSE ARTICLE PACKAGE RESELL EBOOK CD DVD

0 Bid

US $.99

4d 10h 22m

CUSTOM BRANDED GOOGLE ADSENSE E BOOK & ARTICLES WEBSITE

US $39.00

6d 9h 17m

Share, E-Mail or Print the Style:

65 Adobe Illustrator Tutorials

Ty Wenzel — Sat, 01 Dec 2007 07:24:50 +0000

Collection of 65 Adobe Illustration tutorials for vector graphics drawing.

Another fantastic Web 2.0 Design Guide

Ty Wenzel — Mon, 26 Nov 2007 09:00:42 +0000

CUT TO THE SOURCE

Shortcut to Web2.0 Style

If you don't have the resources to create your own “2.0”-style site design, TemplateMonster have just (17 July 07) launched a new Web 2.0 Templates section.

Of course, a purchased template won't always hit your goals perfectly, but a custom design doesn't always guarantee that either!

Many sites will benefit loads from applying a fresh, current design, and purchasing a template for under $100 can be a great way to achieve that! And TemplateMonster have been doing this for years, so I'd certainly recommend taking a look.

Introduction

I'm going to take you through the features of the current wave of excellent web site designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.

If I had to sum up "Web 2.0" design in one word, it would have to be "simplicity", so that's where we'll start.

I'm a great believer in simplicity. I think it's the way forward for web design.

Today's simple, bold, elegant page designs deliver more with less:

They enable designers to shoot straight for the site's goals, by guiding the site visitor's eye through the use of fewer, well-chosen visual elements.
They use fewer words but say more, and carefully selected imagery to create the desired feel.
They reject the idea that we can't guess what people want from our sites

1Simplicity

"Use as few features as are necessary to achieve what you need to achieve"

Web design is simpler than ever, and that's a good thing.

2.0 design means focused, clean and simple.

That doesn't necessarily mean minimalist, as I'll explain later.

I really believe in simplicity. That's not to say that all web sites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.

I've written elsewhere about Occam's Razor, which is a principle I use all the time. One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.

Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is... but would that make them stronger?

The result is that you have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don't mind - it's easy, and you get just what you came for.

Why simplicity is good

Web sites have goals and all web pages have purposes.
Users' attention is a finite resource.
It's the designer's job to help users to find what they want (or to notice what the site wants them to notice)
Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that's does its stuff with as little as possible. That's economy, or simplicity.

When & how to make your designs simple

When?

Always!

How?

There are two important aspects to achieving success with simplicity:

Remove unnecessary components, without sacrificing effectiveness.
Try out alternative solutions that achieve the same result more simply.

"It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away."

Antoine de Saint-Exupéry,
Terre des hommes, 1939

Whenever you're designing, take it as a discipline consciously to remove all unnecessary visual elements.

Concentrate particularly on areas of the layout that are less relevant to the purpose of a page, because visual activity in these areas will distract attention from the key content and navigation.

Use visual detail - whether lines, words, shapes, colour - to communicate the relevant information, not just to decorate.

Here's an example of a design that suffers from not enough simplicity.

Yaxay's interface uses a lot of pixels, but the vast majority of them are decorative, part of the page background. Relatively few pixels are used to user to find or understand information or interact with the site.

See how much "stuff" there is to look at, and notice how few of the pixels are used to clarify actual navigation, actual content, or actual interactive features.

Edward Tufte is the boss when it comes to the design of information. He uses the terms "data ink" (i.e. detail that enables information transfer) and "non-data ink" (i.e. detail that's just detail) to describe this phenomenon.

One way Tufte specifically measures the effectiveness of information design (graphs, charts, presentations etc.) is using the ratio of data-ink to non-data-ink. The higher the proportion of data-ink used, the more likely it is that a design is effective.

Taking the Yaxay detail above, there's a lot of what I call "busyness", i.e. a lot of edges, tonal changes, colour variations, shapes, lines... a lot of stuff to look at. But, in this detail, the only useful features are:

The site logo, and
the label on the nav button (which reads "art gallery")

All the rest of the "busyness": the shapes in the background, the diagonal lines in the interface panel, the grid, the gradients... all this is noise, it's all "non-data ink", because it's not enabling communication.

I'm not against richness, complexity or beauty in web design

Simplicity means:

Use as many pixels as you need, in whatever way you need, to facilitate the communication that needs to happen.

Of course, often what you're communicating isn't hard data, but soft information.

Hard data: means facts, like news, stock prices, train times, or how much money is in your bank account...
Soft information: covers the qualitative aspects of communication, like the first impression about the quality of a company, the sense of how approachable a service provider is, and whether you feel a product will be right for you. It can be just as important!

Whether what you're communicating is hard or soft, your pixels count, so use them consciously and with care.

Take the example below:

Alex Dukal's site is rich, interesting and appealing. It uses a range of visual techniques to draw your attention, make you interested and to give you a warm feeling about the quality of Alex's work.

But it's also simple, because it uses its pixels/ink/busyness with care and sensitivity. It's not gratuitous, it's economical and rich.

Whatever you're saying, choose wisely where you use your ink/pixels. Use it to communicate, first and foremost. Then, ask whether you can communicate just as effectively with less. If so, do it.

2Central layout

(More about this on the Current Style page). Basically, the vast majority of sites these days are positioned centrally within the browser window. Relatively few are full-screen (liquid) or left-aligned / fixed-size, compared to a few years ago.

Why a central layout is good

This "2.0" style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest.

Also, because we're being more economical with our pixels (and content), we're not as pressurised to cram as much information as possible above the waterline/fold.

We're using less to say more, so we can be a bit more free and easy with the amount of space used, and pad out our content with lots of lovely white space.

When & how to use a central layout

I'd say, position your site centrally unless there's a really good reason not to.

You may be wanting to get more creative with the space, or get as much information on-screen as possible (for example with a web app).

3Fewer columns

A few years ago, 3-column sites were the norm, and 4-column sites weren't uncommon. Today, 2 is more common, and 3 is the mainstream maximum.

Why using fewer columns is good

Less is more. Fewer columns feels simpler, bolder, and more honest. We're communicating less information more clearly.

There's also a by-product of the domination of centered layouts. Because we're not filling the whole screen so much, and not trying to get as much on-screen at any one time, we simply don't need as many columns of information.

37Signals have always been at the front when it comes to questioning the status quo and coming up with simple answers.

Here, they use 2 columns. This a great case study in simplicity. It lets the message speak, and adds nothing that could get in the way.

Apple is the other leader in elegant simplicity.

This kind of layout works really, really well. Each time I experience Apple's simple design, the more convinced I become that its zen approach is the holy grail of design.

This typical Apple layout shows that someone has honestly asked, "How many boxes/columns/lines do we really need?". Then they've boldly edited out unnecessary elements, and the result is undeniably the cleanest, most effective communication.

How to choose your columns

I'd definitely recommend using no more than 3 columns, simply because you should use no more of anything than you need to.

There are always exceptions, so here are a few examples of more than 3 columns used effectively.

Derek Powazek's blog site uses 3 columns for the main section of his blog, but 4 lower down.

The lower section is a kind of pick & mix, where the abundance of columns emphasises the "Take what you like" feel.

Amazon (UK) has two side columns, and products arranged centrally in 3 additional columns.

It works beacuse the purpose of each column is clear from its design. The left col is definitely navigation; the right column is "other stuff". The products in the middle are clearly tiled and separated by white space, so they don't overwhelm.

Popurls.com contains loads of pick-n-mix information, collating the hot links from other sites like digg and del.icio.us, but it still keeps to 3 columns for the main blocks of text.

Further down, it shows thumbnails of popular images on the photo-sharing site Flickr (and there are Youtube vids later). These are tiled in several columns, which is fine, because it's a sit-back, scan and pick your experience moment...

And here's a site that gets it wrong...

Here's All Things Web2.0 using 4 columns: 2 side columns and 2 central columns.

The downside of this layout is that you don't know where to start looking. Everything is somehow low-priority (partly because of the darkish background).

As we saw, Amazon differentiates the page to this extent, but the design helps you instantly identify what each area of screen real-estate is for, so it's not confusing.

4Separate top sections

This means making the top of the screen (the main branding & nav area) distinct from the rest (the main content).

Of course, there's nothing new about this approach. It's a good idea, and has been used for ever. But it's being used more than ever now, and the distinction is often stronger.

See how clear the "page-tops" are in these 6 samples, even at small scale:

Why distinct top sections are good

The top section says "Here's the top of the page". Sounds obvious, but it feels good to know clearly where the page starts.

It also starts the site/page experience with a strong, bold statement. This is very "2.0"-spirited. We like strong, simple, bold attitude.

2 of these top-sections contain just branding (Protolize, Mediconmedia), 1 has just navigation (Cross Connector), and the remaining 3 have both.

The weakness of Cross Connector, in my view, is that the logo comes after the nav. I prefer the nav to be high-up, and clear (like e.g. Simple Bits).

When & how to use a distinct top section

On any site, both the main branding and main navigation should be obvious, bold and clear.

So it's a good idea to create a clear space at the top of a web site design that positions the logo and nav boldly.

Always put your logo right up the top of the screen. I'd always recommend putting your main navigation right after it.

It's definitely a good thing to mark the top of the page with a section that marks out the high-level screen features as separate from the main site content.

The top section should be visually distinct from the rest of the page content. The strongest way to differentiate is to use a bold, solid block of different colour or tone, but there are alternatives.

Here are 2 examples where the top section is separated with a solid line, rather than being solid colour itself.

And here, the top section contents simply sit boldly outside the main column area.

5Solid areas of screen real-estate

Leading on from the clearly differentiated top area, you'll notice that lots of sites define the various areas of real-estate boldly and clearly.

Real estate comes in various forms, including:

Navigation
Background / canvas
Main content area
Other stuff
Callouts / cross-links

It's possible to design a web page so that these areas are immediately distinct from their neighbours.

The strongest way to do this is using colour.

But white space can be just as effective.

The risk with strong colour is that it draws the eye, so it can take attention away from other relevant screen elements.

I think that placing clean content on white space creates an easier experience, helping the viewer to feel more relaxed and free to browse.

6Simple nav

Permanent navigation - your global site nav that appears on every page as part of the page template - needs to be clearly identifiable as navigation, and should be easy to interpret, target and select.

2.0 design makes global navigation large, bold, clean and obvious.
Inline hyperlinks (links within text) are typically clearly differentiated from normal text.

Why simple navigation is better

Users need to be able to identify navigation, which tells them various important information:

Where they are (in the scheme of things)
Where else they can go from here
And what options they have for doing stuff

Following the principle of simplicity, and general reduction of noise, the best ways to clarify navigation are:

Positioning permanent navigation links apart from content
Differentiating navigation using colour, tone and shape
Making navigation items large and bold
Using clear text to make the purpose of each link unambiguous

How to keep your nav simple

Simply remember the key: navigation should be clearly distinguishable from non-navigation.

Just follow the guidelines above, regarding differentiation through position, colour and clarity.

My article about navigation »

Inline hyperlinks should also stand out sufficiently from the text around them.

Check out these snippets. In each case, you're in do doubt what's a link. (Personally, I prefer using blue text (non-underlined) which turns to underlined red on hover...)

7Bold logos

A clear, bold, strong brand - incorporating attitude, tone of voice, and first impression - is helped by a bold logo.

Here are some (100% scale). Notice that logos are tending to be quite large, in line with the general 2.0 principles.

Why?

Strong, bold logos say "This is who we are." in a way that we can believe.

When & how?

See my articles on logos and text-based logos.

It's very hard to say how to create a good logo, but in brief...

Your logo should:

work visually in its main context, and any other uses in which it may be used (like flyers or t-shirts?)
be recognisable and distinctive
represent your brand's personality and qualities on first viewing

8Bigger text

Lots of "2.0" web sites have big text, compared to older-style sites.

If you fill the same amount of space with less "stuff", you have more room.

When you've made more room, you can choose to make more important elements bigger than less important elements (if they're still there).

Making things bigger makes them more noticeable then lesser elements. This effect has been used throughout the history of print design, on headings, title pages and headlines.

Not only does big text stand out, but it's also more accessible to more people. That's not just people with visual impairments, but also people looking on LCD screens in sunlight, people sitting a little further from the screen, and people just skimming the page. If you think about it, that could be quite a lot of people!

When & how to use big text

Big text makes most pages more usable for more people, so it's a good thing.

Of course, size is relative. You can't take a normal, busy site, make ALL the text bigger, and make it more usable. That might not work, that might be worse.

In order to use big text, you have to make room by simplifying, removing unnecessary elements.

You also need to haave a reason to make some text bigger than other text. And the text must be meaningful and useful. There's no point adding some big text just because it's oh-so 2.0!

If you need to have a lot of information on a page, and it's all relatively equal in importance, then maybe you can keep it all small.

9Bold text introductions

Leading on from the big text theme, many sites lead with strong all-text headline descriptions.

These normally set out the site's USP, elevator pitch or main message.

They tend to be graphical, rather than regular text. The reason for this is that designers want a lot of control over the page's visual impact, especially early on in a browsing experience.

When & how to use a bold text intro

Only use one if you've got something bold to say.

If you have a simple message that you want to be seen first, go ahead and headline it. Make it clear by putting it against a relatively plain background.

10Strong colours

Bright, strong colours draw the eye. Use them to divide the page into clear sections, and to highlight important elements.

When you have a simple, stripped-out design, you can use a bit of intense colour to help differentiate areas of real-estate and to draw attention to items you want the visitor to notice.

The Treo Mobile site uses 3 areas of strong colour to mark out and advertise 3 main areas of the site.

The background colour makes it clear that this isn't main content, and large, bold title text helps you see quickly what's in each one, so you can decide whether it interests you.

Colorschemer sections the page with bands of intense, bright, cheerful colour, set against a more neutral background.

Apple's design has always used a great balanced combination of tone (darks), rich effects and colour to draw the eye.

It may be the most perfectly designed web site there is, in my opinion.

In this image, the intense dark areas and strong colour are used sparingly to pick out important content.

Colour is also a great medium for communicating brand values

Here, the colour isn't bright, but it is strong, partly because of the amount of green used.

This design uses green to communicate the values of "quality" and "health".

Note: site design doesn't match this image!

This site sells outdoor clothes exclusively for females, and the soft colours reinforce the chosen brand personality.

Be careful to use intense colour on or around high-value features

A nice, effective page design is compromised by the use of large areas of intense colour outside the main page area.

The result is that the eye is drawn away from the real content.

The Aurum Newtech site risks the same effect, but the colour is just pale enough to keep the content noticeable.

Also, the big, bold and well-spaced content elements help draw attention away from the "attractive" background.

Remember to use sparingly

If you're using strong colours to attract the eye, it only works if there's lots of area that isn't strongly coloured.

If everything is trying to attract the eye, then the eye just gets confused, and the site will feel confusing and chaotic.

11Rich surfaces

Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design.

We all know that these little touches just feel nice, but we may not know why.

Realistic surface affects like drop-shadows, gradients and reflections help make a visual interface feel more real, solid and "finished".

They may also remind us of certain tactile or aesthetic qualities of real-world objects, such as water droplets, shiny plastic buttons, and marble floors.

When & how to use rich surfaces

The golden rule here is to use with care, and not to overdo it.

As I explain in the tutorial on 3D Effects, these effects should not be applied to everything.

Like any of these techniques, a rich surface may add value to your design when used sensitively and appropriately.

If your navigation/icon/logo/layout sucks fundamentally, you can't polish your way out. Get the fundamentals right first.

It can also be important to maintain a consistent light-source. Although this can get more complex with the illusion of back-lit diffusion in buttons etc., you still know whether an overall design feels consistent.

3D effects can also make elements seem to stand out from the page, but only if the rest of the page is relatively flat.

Avoid trying to make your entire design 3D-realistic because:

It's more work
It will increase the overall size of the page assets
And you don't need to. 3D effects use lots of different pixels, and different pixels should be used deliberately to draw the visitor's attention to key content elements, or to enhance "soft" informational aspects. A little goes a long way.

12Gradients

Web 2.0 design has more gradients than the Alps.

Why gradients are so useful

Gradients soften areas that would otherwise be flat colour/tone.

They can create the illusion of a non-flat surface, used to good effect on Alex Dukal's portfolio.

Gradients can be used to fade a colour into a lighter or darker tone, which can help create mood.

In page backgrounds, they may also create an illusion of distance.

A common gradient combo is blue-to-white, which evokes the effect of aerial perspective, creating the sense that the background fades away towards the horizon.

They are commonly used at the very top of page backgrounds, where they help denote the boundary of the viewable area.

They're also an integral part of drop-shadows, and the inner-glows and specular highlights you see on glass- or plastic-style buttons.

Note that gradients usually work best when juxtaposed with areas of flat colour or tone.

On the Curve2 homepage, the gradients are more effective because each one is positioned adjacent to a flat white or grey section.

It's common to find gradients enhancing the base colour (using mix effects like color-burn or overlay in Photoshop), which create subtly different hues.

Here, the highlighted green colour is warmer and friendlier than the darker base colour. The overall effect is both softer and richer.

13Reflections

The illusion of reflection is one of the most common applications on gradients.

These commonly come in 2 kinds:

Highlights caused by light reflecting on shiny surfaces
That shiny table effect!

Specular highlights

Realistic effects of water droplets, glass beads, shiny plastic buttons etc. have been very popular over the past couple of years.

I don't know where the trends started, but Apple's web site must have been one of the most influential, preceding their Aqua interface look & feel.

Here are some examples:

The classic Apple.com shiny plastic tabs, still in use today.

These use highlights caused by a light source above the tabs, combined with an inner, diffuse glow that creates the plastic effect.

These tabs, from one of my recent redesigns, have a polished (from the strong white highlight) carbon-fibre appearance. The carbon effect comes from the warm diagonal-stroke pattern from the icon's glow.

More nice shiny plastic. Notice how the reflections fall off at the edge of the shape, which create the illusion of rounded edges.

Similar effect on a square shape looks like a badge.

The non-horizontal angle creates a sense of dynamism.

This shiny button from cafepress.com uses a rounded reflection that suggests a wide light source coming off a rounded surface.

This button from web hosts Mediatemple has a more diffuse reflection, suggesting a matt glass finish.

That shiny table effect!

Pioneered by Apple again (I'm sure). This is a really nice effect which is so prevalent now, it's in danger of being overused, now starting to look tired and is falling out of favour with designers.

Remember, of course, that web designers are usually more sensitive to these things, so even if we're getting turned off by it, the general public may still think it's cool for some time to come.

The standard Apple look. Greyed-out and fading on a white base.

On a coloured background

Fading out to either side (my one this, not published yet)

More extreme angle, and a rich layered effect reflecting the colour of the solid object

Here's how to do it (from photoshoplab.com) »

14Cute icons

Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning.

Icons can be useful when they're easily recognisable and carry a clear meaning. In lots of other cases, a simple word is more effective.

In the old days, icons were sometimes overused. It seemed that everyone wanted an icon for every navigation link or tab. Now, we use clear text more extensively, and are less ready to litter a page with icons.

Where 2.0 designers do employ icons, they are reserved for higher-value spots, where .

Simpler, more spacious designs demand less attention and allow for a richer icons.

Some examples, demonstrating various attributes.

Simple and clean

Cute and quirky

Do not necessarily have to feature tiny hills!

Richly detailed

Creatively inspired by Mac OSX. See Enhanced Labs for a great showcase.

15Star flashes

These are the star-shaped labels that you see stuck on web pages, alerting you to something important.

They work by evoking price stickers in low-cost stores. For this reason, they suit the start-up ethic of many 2.0 sites, but for the same reason may cheapen other sites.

They can really work well, but of course should only be used to draw attention to something important.

I'd recommend only using one on a page (at most!).

Another style that's seeming over-used, and will probably run its course over the next year.

To find out how to do it in Photoshop, go here and scroll halfway down (from photoshoplab.com) »

Share, E-Mail or Print the Style:

Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided

Ty Wenzel — Thu, 15 Nov 2007 00:05:37 +0000

SOURCE

One of the web 2.0 design and layout trends which I actually quite like is what I am going to call "clean and horizontally divided". Catchy name eh?

Every trend should have a poster-boy, and the poster-boy for this trend is *drum roll* shoeboxed.com!

So, hopefully from the above screenshot you can see what I am talking about when I say "horizontally divided". You can see there are several sections of the website which are all divided by different colors and layout. Each segment serves a specific purpose, with the amount of "real" information increasing as you move further down the page, and the amount of "marketing" information decreasing as you move down the page.

Before we analyze the elements of this trend, here are some more sites which are worth looking at to give you an idea of what this trend is about:

OK, enough of that! Lets get to it!

Top Segment/Logo

Looking at all the above screenshots you will see that most of these sites follow a fairly similar trend for their logos and top segments.

The top-most segment tends to contain a darker background with a very simple text based logo:

The logos may also have a small amount of decorative extras, but nothing too over the top:

These top segments tend to contain very little elements other than the logo. This leads to a clean look where the user is not overloaded with information and navigation options at the top of the page.

Other Segments

The second segment tends to contain large typography and a bit of catch-phrase or selling point for the website.

Third and fourth segments tend to explain the website or product in more detail (e.g. feature-list, screenshots and focus points).

Colors

The color schemes on these websites vary. Gradients are used extensively but subtlety. Black and light blues feature heavily, with splashes of vibrant colors in large icons on the sites.

Let's take a look at the more vibrant of the color schemes:

Icons/Vector/Characters

Graphics play an important part in the overall look-and-feel of this trend. We have already mentioned the use of gradients, but in addition to this is vector cartoons and catchy icons.

Vector cartoon characters are visually appealing and help brand a website. They also make the user feel like the application/website is very easy to use:

Icons and badges also help add a splash of color to the site. They can also draw attention to the more marketable aspects of the product/application/service.

Navigation

A big theme of this trend is simple, effective and clean. In order to achieve the clean feel, simple navigation is a key. In the sites we have looked at, there is a maximum of seven menu items present on the home page. Some even have as little as three menu items (Home, Login, Sign up).

So there you have it - a complete analysis of the "clean, colorful and horizontally divided" web 2.0 trend. I hope you are able to use this as a tool to help your own creativity if you choose to design a site which fits into this trend.

I hope to do further analysis on other web 2.0 trends - it is rather time consuming though so let me know if this is useful.

Share, E-Mail or Print the Style:

Design Watercolor Effect Menu

Ty Wenzel — Tue, 13 Nov 2007 16:44:14 +0000

One of the most gorgeous photoshop tutorials I've ever read. Visit the source for much more by this amazing designer.

SOURCE

This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article), I will show you how to design a watercolor effect menu in Photoshop. Then in next tutorial, I will show you how to slice the menu and code in CSS. If you need some inspiration on creating an artistic menu, visit our previous post on artistic websites. Ready? Let’s begin Part 1. (Update: Part 2 is ready - Advanced CSS Menu)

Download Photoshop file

Preview

Here is a preview of the final image:

1. Notepaper stock image

First you need to find a notepaper stock image. You can buy stock photo from iStock or scan from a notepad.

Cutout the notepaper and apply 2px drop shadow effect.

2. Watercolor effects

Cmd + click on the notepaper layer to load the selection. Create a new Layer Group and click on the Add Layer Mask mini icon in the Layers palette. This way everything within the Layer Group will be masked.

Create a new layer. Choose a pink color (or any pastel color), select the Pencil tool, set the tool Opacity to 10%, brush size 100px, and drag around the document as you are doing a watercolor painting.

Repeat this step until you get multi layers of watercolor effects.

3. Add details

Find some coffee stain images, paste it in and set the layer blending mode to Multiply.

Dirty and splatter effect: download and use the splatter or watercolor Photoshop brushes from Bittbox.

Add some pencil sketch illustrations. You can either scan your marker sketches or use vector illustration.

Make a triangle selection in the corner, pick a grey color and apply a gradient to make the wrinkle effect.

4. Hand wrting text

If you don’t have any nice hand writing fonts, go to Dafont or Urban Fonts to download them. Create a new Layer Group and enter the navigation text.

Find a different font, enter the menu mouseover text.

5. Washout RSS icon

Use the Eraser tool, choose one of the splatter brushes, set tool Opacity to 10% and randomly erase the edge. Then paint some brown color overlay the icon to give the dirty effect.

6. Sketchy strokes

Sketchy or pencil strokes can be easily created in Adobe Illustrator. Draw a shape or path, open the Brushes palette, click on the charcoal brush and set the Stroke weight to 0.25pt.

7. Final

Here is my final image. If you want to spend more time on the details, you can add paper clips, tapes, post note, pencil sketches, etc.

Watercolor Painting - Flowers - signed E. Bell - Nice!

US $34.99

12m

ORIGINAL WATERCOLOR PAINTING LEO SIMONE ABSTRACT

0 Bid

US $675.00

15m

Giclee print of watercolor painting Catskills Tatiana

0 Bid

US $28.38

30m

Original Lion opaque watercolor painting 22 X 15

0 Bid

US $150.00

31m

Watercolor Painting - Covered Bridge - Lrg Signed Dated

US $260.00

39m

French watercolor and ink original painting 1916

0 Bid

US $25.00

40m

Original 19th century Illustration Watercolor Painting

US $3,300.00

44m

1911 French ink and watercolor painting

0 Bid

US $35.00

PAINTING WATERCOLORS THAT SPARKLE WITH LIFE by C. Agan

US $16.99

1h 5m

Basket Of Geraniums - Original Watercolor Painting

0 Bid

US $5.00

1h 17m

Lobelia Flowers - Original Watercolor Painting

0 Bid

US $5.00

1h 21m

BLACK CAT & SINK Art PRINT of Watercolor Painting VERN

US $11.98

1h 28m

PAINTING WITH WATERCOLOR, PEN & INK by Claudia Nice

0 Bid

US $10.99

1h 32m

LEE EVERETT WATERCOLOR PAINTING 9 X 13 SEASCAPE RARE

US $149.99

1h 34m

PAINTING SUNLIT STILL LIFES IN WATERCOLOR

1 Bid

US $14.99

1h 35m

WATER COLOR PAINTING OF WOMEN "OLD"

0 Bid

US $9.95

1h 40m

ORIGINAL PAINTING Watercolor Russian Abstract Modern OX

0 Bid

US $.99

1h 43m

ORIGINAL SIGNED WATERCOLOUR PAINTING "The Two Of Us"

5 Bids

US $19.55

1h 47m

WATER COLOR PAINTING OF WOMEN WEARING STRAW HAT "OLD"

0 Bid

US $9.95

1h 55m

Watercolor painting Walking peacocks

0 Bid

US $5.00

2h 2m

Share, E-Mail or Print the Style:

31 Eyes Photoshopped [PICS]

Ty Wenzel — Thu, 04 Oct 2007 08:40:53 +0000

Almost close up and digitally worked out in Photoshop. I like eyes, hope you like them, too.

How To Make Your Own Web Mashup

Ty Wenzel — Sat, 29 Sep 2007 07:37:36 +0000

So you want to make a mashup but aren't entirely sure where to begin? This page can help you get there.

1. Pick a subject

Answer the question: a mashup of what? Hint: Plotting markers on maps is probably the easiest place to start. It might just be the best delis in your neighborhood. While you could go for something more complex with muliple data sources: maps + photos + bookmarks + more, you may want to keep it simple to start.

This helps define what APIs and tools you'll be looking at: maps, news, auctions, products, etc. Browse this site's API Database and sort by Category to get a sense of API types. You can also browse the Mashup Listing to see which interesting applications have been built using which APIs.

2. Decide where your data is coming from

What is the source of your data? This can drive the APIs you'll use. For example, if you want to do something with your photos on Flickr or sale items on eBay, then those vendors APIs are the likely candidates. Or, you may be inputting the data yourself such as with simple map markers. In which case your options are more open.

(For the purposes of this Guide, I won't spend time distinguishing between a true 'mashup', thus 2 or more data sources, and just using an API, which may mean only 1 external source. The exact definition of mashup is vague so no need to fight semantics at the moment.)

3. Weigh your coding skills

Mashups, as of today, are mostly a programmer's affair although there are some tools such as MapBuilder and Wayfaring that can help you create basic maps without coding.

How much of a coder are you?
Maps APIs are simplest but more sophisticated APIs, such as those for conducting financially-sensitive operations like auctions, are more complex.

How much time do you have?
Again, development speed is inversely proportional to complexity.

Do you have a server to run this on?
Simpler APIs can be used from JavaScript in a web page or take specially formated XML file as input (as shown here at Engadget). While this is indeed simple, security issues limit JavaScript's suitability for true client-only mashups. Odds are that you will need to run your application from a web server which you manage or have access to.

What language will you use?
This is primarily driven by what programming languages you know. While your decision may also be influenced by vendor-provided toolkits, most web APIs aim to be language-agnostic so this is less of a vendor-dictacted issue than your own choice. You can use the API reference to see if an API has a language-specific toolkit (such as Flickr which has many).

Note that this whole step may arguably be Step 1, depending on your perspective.

4. Sign-up for an API

Most, but not all, API providers require you to have a developer/application ID, a user account with their service, or both. Some services give you one ID for as many applications as you write while others require you to get an ID for each application that you create. While this signup may sound complicated, and for a few services it is, most of the time this takes only a minute or two to complete. As an example, take a look at the Google Sign-up Page.

5. Start coding

For this step, the big one, rather than describe the many variations in detail, I'll refer you to a variety of well-written and useful API-specific tutorials and introductions. You can also check the profile for any of the APIs and refer to resources from the reference section as needed.

Note that this list is dynamic and will change over time so check back later for updates.

Amazon EC2 [API Profile]
EC2 API Perl client
A Perl client for the EC2 REST API. Available on CPAN.
Amazon eCommerce [API Profile]
Explore Amazon Web Services with AJAX
Very informative five part series from Ajax Magazine on using Amazon E-Commerce services. PHP examples.
Amazon E-Commerce Service Tour
A tour of the REST functionality from Amazon's developer site.
Amazon Web Services Code Samples
Full code samples from Amazon's site. Languages include Java, Perl, ASP.NET in C# and VB.
Consuming Amazon's Web API Directly with Javascript
Shows how to use the Amazon free XSLT transformation service, the JSON output format, and a bit of plain old javascript to show you how to place live Amazon.com data on any web page.
Create an Amazon storefront using PHP
Two part tutorial on Amazon ECS and PHP by Tyler Anderson at IBM Developerworks. Registration required.
Sample Amazon ECS Store in Java
A sample application that illustrates how to build an basic storefront using Java, Amazon ECS, and SOAP.
Use Amazon Web Services in ASP.NET
Tutorial demonstrating VB ASP.NET programming for Amazon's services. By Philip Miseldine at Sitepoint.
Video Tutorial ASP.NET Mashups
See how to create a mashup application that uses ASP.NET AJAX bridging files to access the Flickr and Amazon services, and combines the results in a single user interface. Presented by Joe Stagner
Amazon S3 [API Profile]
AWS::S3 for Ruby
A Ruby library for Amazon's Simple Storage Service, S3, REST API.
Backpack [API Profile]
Harnessing the BackPack API
Thorough article on using the Backpack API. Examples in .NET with C#. By Michael Campbell.
Bible Gateway [API Profile]
Bible Gateway in PHP
Article on Cleaning-up the BibleGateway SOAP example.
Bloglines [API Profile]
The New Bloglines Web Services
Detailed introduction at XML.com by Marc Hedlund. Full Java sample application.
CNET [API Profile]
CNET API Developer's Guide
An overview of the CNET API and its general structure.
CNET API Quick Start Guide
A guide to quickly get up and running with the CNET API.
CNET API Resource Guide
A detailed guide listing the CNET API's REST entry points. The request and response structure for each REST resource is documented.
del.icio.us [API Profile]
A Truly Delicious API
Webmonkey tutorial on the del.icio.us API using PHP. By Paul Adams, Feb 06.
Introducing del.icio.us
Introduction to the del.icio.us API with examples using Python. By Matt Biddulph at XML.com
Digg [API Profile]
Using the Digg API with Ruby
This tutorial will get you started fast using the Digg API in your Ruby on Rails (RoR) application. I am assuming you already have setup your RoR application.
eBay [API Profile]
A Practical Introduction to eBay's Web API
Programmer's introduction to the eBay API with detailed C# example code. By Tim Stevens.
eBay API Getting Started and Best Practices
eBay official starting point. Good quality overviews and details.
eBay API with REST and PHP
Good starting point for using the eBay REST API with PHP 5.
eBay XML API Guide
eBay's official guide to their XML API.
PHP Ultimate eBay Store
A small commercial PHP library for creating an eBay storefront.
EVE Online [API Profile]
Python Sample for EVE Online
Short python snippet for EVE Online game.
Facebook [API Profile]
Using Ruby on Rails for Facebook
Detailed tutorial on using Ruby on Rails for creating Facebook applications.
FedEx [API Profile]
FedEx Code Samples
Get examples for the Ship Manager API in a variety of programming languages: C++, Java, C#, VB, JavaScript and ASP.NET.
FeedBurner [API Profile]
FeedBurner API Quick Tour
Basic introduction to the FeedBurner API at their developer site.
Flickr [API Profile]
Accessing Images with the Flickr API
Introductory article to Flickr's API using the Flickr.NET open source .NET library. By Tim Stevens at informIT.
Flickr API with AJAX
Presentation slides on Flickr API with AJAX from Simon Willison.
Scripting Flickr with Python and REST
Article on Flickr programming with Python at xml.com. By Uche Ogbuji in January, 2006.
Video Tutorial ASP.NET Mashups
See how to create a mashup application that uses ASP.NET AJAX bridging files to access the Flickr and Amazon services, and combines the results in a single user interface. Presented by Joe Stagner
Google AdWords [API Profile]
AdWords Developer's Guide
Google official AdWords API guide with detailed examples.
Google APIlity Library
From Google, a set of PHP classes for accessing their AdWords API.
Ruby Gem for Google AdWords
Open source Ruby client library for the AdWords API makes it easier to write Ruby clients to programmatically access AdWords accounts. The client library is provided as a gem, or can be installed independently. Also has sample code.
Google Checkout [API Profile]
Build a .NET App for Google Checkout
Good overview of Google Checkout API along with a very complete .NET application. By Martin Omander, a member of the Google Checkout team, at the O'Reilly WindowsDevCenter.
Google Maps [API Profile]
An Introduction to Google Maps
An Introduction to Google Maps and the Google Maps API by Eric Pimpler at GISuser.com.
Detailed Google Maps API Tutorial
Very thorough Google Maps tutorial from Mike Williams. Over 40 sections, each with its own example map and code. Many with pointers on things to watch out for.
Google Maps Ajax and ASP.NET
Shows how to create an ASP.NET server control that would allow a .NET developer to harness the power of Google Maps in the code-behind model.
Google Maps API Documentation
Google's official API documentation. Includes "Hello World" and JavaScript examples.
Google Maps Applications Development
Good book on using PHP and Ajax with Google Maps. Covers nuances to using the API. By Michael Purvis, Jeffrey Sambells, Cameron Turner. 350 pages, published by Apress, Aug 2006.
Google Maps Hacking and Bookmarklets
Interesting reference site shows API hacks and snippets.
Google Maps via PHP-MySQL Tutorial
Clean, simple PHP example how the mashup showing locations related to the band The Who on a Google Map.
Hacking Google Maps: Building a Community Site
Sample chapter from the book Hacking Google Maps by Martin C Brown. Code samples use JavaScript and Perl.
Hacking Maps with the Google Maps API
Very good introduction to the API by Hari Gottipati. Examples in JavaScript. He reviews shortcomings of the API and compares to Yahoo!
How to add a Google Map to any web page in less than 10 minutes
Exploration Age shows how easy it can be to add a Google Map to any page. Nice straightforward demonstration.
Integrating Google Maps into Your Web Applications
Tutorial on the Google Maps API with detailed JavaScript example code. By By Jason Gilmore at developer.com
Java for Google Maps Mashups
Javaworld.com article using the geocoder.us service, the open source library DRW, SOAP, and server-side Java for geocoding and mapping.
JobMapper in Ruby
Shows you how to create a mashup of Google Maps, Indeed, and Yahoo Search using Ruby.
Jon Udell Google Maps Screencast
Infoworld columnist Jon Udell shows how he created a Google Maps walking tour of Keene, NH, in this five minute screencast.
Make your own Google map
Engadget.com tutorial showing how to create a simple annotated Google Map.
Making of the Charlottetown Transit Map - Rukapedia
Explanation by Peter Rukavina of how he built the Charlottetown Transit Map. Includes how he setup MySQL data tables.
Phoogle Maps
PHP class that integrates itself with the Google Maps API and with the geocoder.us database to make an easy to use interface to display Google Maps on your site. With about 5 lines of PHP code you can display a customized Google Map on your website.
Phoogle Maps PHP Library
PHP library that simplifies geocoding with Google Maps.
PHP GoogleMapAPI
Good, complete, PHP library for integrating Google Maps. By Monte Ohrt.
Google Search [API Profile]
Build a Site Search with the Google Search API
Good introduction to the Google Search API using PHP examples. From Mike Papageorge at fiftyfoureleven.com.
Some Google in Your Apps
Some Google in Your Apps: An Introduction to the Google Web API Using .NET and Java, by Tim Stevens. Full source code using both languages.
Using the Google Web Services API with Flash
Shows how to create a search application using Flash + PHP + Google API. Full source code. By Jeff Hill.
indeed [API Profile]
JobMapper in Ruby
Shows you how to create a mashup of Google Maps, Indeed, and Yahoo Search using Ruby.
MapQuest [API Profile]
Getting Started with the MapQuest Open API
Brief introduction to MapQuest API at Designorati: Cartography by Samuel John Klein.
Microsoft start.com [API Profile]
Building a simple gadget for Live.com
Detailed walkthrough of created a gadgets in JavaScript. Via GadgetNews at Microsoft.
Building a Simple Gadget for Live.com
Good overview of how to buid a gadget for Live.com.
Microsoft Virtual Earth [API Profile]
Building a Virtual Earth Website with PHP
Tutorial on using PHP to create Virtual Earth applications.
Creating a Commercial Website with Virtual Earth
Demonstrates creating applications using C# with Virtual Earth.
Creating your first Virtual Earth Web Page
Virtual Earth tutorial on using JavaScript to create a VE map.
Virtual Earth Tutorial Part 1
Shows how to use Ajax and Virtual Earth.
Twitter [API Profile]
Twitter .NET API
Do you possess an undying urge to make something in .NET that can communicate with Twitter.com? Try the TwitterooCore Library, now available for download.
Wesabe [API Profile]
C# Wrapper for Wesabe
This C# library from Scott Hanselman wraps the basic functions of the Wesabe API. Hosted on Google Code to facilitate community development.
Windows Live Contacts Control [API Profile]
Hosting the Windows Live Contacts gadget
Microsoft Channel 9 video on scenarios around what the Windows Live Contacts gadget is for and how a developer can integrate it on any web site.
Windows Live Search [API Profile]
Build a Site Search with the MSN Search API
Clear introduction to using the MSN Search API using PHP. From Mike Papageorge at fiftyfoureleven.com.
Yahoo Maps [API Profile]
Building Mashup Portlets
Detailed article from the Sun Developer Network on how to use Java with the Yahoo Maps AJAX API to build a portlet for their Portal Server.
GeoCool
Rasmus Lerdorf, creator of PHP and now at Yahoo!, gives this good introduction to the Yahoo! Maps API using PHP and Flash.
How to build a Maps Mash-up
Yahoo! Maps tutorial using PHP and JavaScript. From Dan Theurer.
Introducing Yahoo! Maps JS-Flash API
Good introduction by Yahoo! Technical Evangelist Jason Levitt on creating Flash-based Yahoo! Maps applications.
Yahoo! Maps AJAX API Getting Started Guide
Yahoo's introduction to their v2 AJAX Maps API. With JavaScript examples.
Yahoo! Maps JavaScript-Flash API Getting Started Guide
Yahoo's introduction to using JavaScript and their Flash-based maps.
Yahoo Search [API Profile]
Build a Site Search with Yahoo! Search Web Services
Nice introduction on using the Yahoo! Search API using PHP. From Mike Papageorge at fiftyfoureleven.com.
JobMapper in Ruby
Shows you how to create a mashup of Google Maps, Indeed, and Yahoo Search using Ruby.
Working with the Yahoo! API
Overview of the Yahoo! Search APIs including image and video APIs. Example application in PHP. At informit.com
Yahoo Term Extraction [API Profile]
Yahoo Term Extraction in PHP5
Simple Term Extraction example in PHP5 by Philipp Lenssen at GoogleBlogoscoped.
YouTube [API Profile]
Ruby YouTube Wrapper
A Ruby interface to the YouTube REST API.
The Amazing YouTube Tools Collection
Collection of links to tools and applications for YouTube. Many use the API, some with code links. At QuickOnlineTips.com.
YouTorials
YouTorials is an assemblage of free video tutorials collected from YouTube. Users can search or browse through hundreds of videos from how to solve a Rubik cube to how to break-dance. Uses can submit their own videos and subscribe via RSS.
YouTube API Feed Extractor
PHP Class that uses the YouTube API to pull dynamic content to a website.
YouTube API How To Guide
Basic overview of the YouTube API and available language wrappers. Includes a Ruby snippet.

SOURCE

Share, E-Mail or Print the Style:

What are Tools for Mashups?

Ty Wenzel — Sat, 29 Sep 2007 07:27:43 +0000

Mashup Camp 3 kicked-off today here at MIT in Cambridge (a two day event follows on the heels of the Mashup University earlier in the week). One of the first sessions was Mashup Dev Tools, a discussion lead by Dave Nielsen of StrikeIron. It was a very interesting discussion where one of the primary challenges was the breadth of what “mashup tools” means: is it for developers, non-IT end users (client-side), middleware services (server-side), code libraries, data scraping, ajax frameworks, widget platforms, or other? Dion Hinchcliffe covered 8 of them last year. As the sampling below shows there’s a wide variety of things that could be considered mashup development tools.

IBM’s QEDwiki
/n software’s RSSBus
OpenKapow
Grazr
JackBe
Proto
Ning
OpenAjax
WidgetBox
SOA Express
Portal platforms such as the widget platforms listed here
Teqlo
Mashery
MapBuilder.net
Dapper

SOURCE

Flash Template # 6000 - FULL FLASH WEBSITE - FLASHMINTS

0 Bid

US $5.99

32m

Flash Template # 6002 - FULL FLASH WEBSITE - FLASHMINTS

0 Bid

US $5.99

32m

Flash Template # 6007 - FULL FLASH WEBSITE - FLASHMINTS

0 Bid

US $5.99

32m

Flash Template # 6009 - FULL FLASH WEBSITE - FLASHMINTS

0 Bid

US $5.99

32m

Flash Template # 6011 - FULL FLASH WEBSITE - FLASHMINTS

0 Bid

US $5.99

32m

Flash Template # 6016 - FULL FLASH WEBSITE - FLASHMINTS

0 Bid

US $5.99

32m

Flash Template # 6017 - FULL FLASH WEBSITE - FLASHMINTS

0 Bid

US $5.99

32m

Flash Template # 6018 - FULL FLASH WEBSITE - FLASHMINTS

0 Bid

US $5.99

32m

Flash Template # 6019 - FULL FLASH WEBSITE - FLASHMINTS

0 Bid

US $5.99

32m

TURNKEY TEMPLATE SELLING STORE WEBSITE BUSINESS $$

US $99.90

1h 16m

12,000+ Website Templates Package Resell Resale Rights

0 Bid

US $5.70

3h 30m

MEGA EBAY TEMPLATES WEBSITE BANNERS CLIPART & GRAPHICS

0 Bid

US $5.70

4h 10m

500+ PHP Website Scripts 200+ Web Templates 5000+ebooks

1 Bid

US $1.49

6h 20m

OVER 500,000 WEBSITE Templates PHOTOSHOP Flash GRAPHICS

1 Bid

US $11.95

6h 47m

ebooks and website templates

3 Bids

US $.65

8h 28m

7GB - 2 DVDs / WEBSITE TEMPLATES, Photoshop WEB DESIGN

0 Bid

US $22.00

9h 18m

Half a MILLION Web SITE Templates PHOTOSHOP Flash LOGOS

0 Bid

US $11.95

9h 47m

40,000+ DREAMWEAVER WEBSITE TEMPLATE CD & MORE SALE!!

US $13.99

9h 49m

Giant Website Template Package - And Much More - 2 DVDs

US $16.95

10h

Website Templates, Scripts, Graphics, Logos, +MORE!!!!

1 Bid

US $.89

10h 25m

Share, E-Mail or Print the Style:

Creating a Stunning Old-World Look in Photoshop

Ty Wenzel — Fri, 28 Sep 2007 23:14:47 +0000

In this tutorial we are going to create a beautiful oldy-worldy composition featuring a compass and making use of some awesome (free) vector artwork from Arsenal. It's a long tutorial, but well worth the effort!

Super Slick Dusky Lighting Effects: Photoshop Tutorial

Ty Wenzel — Fri, 28 Sep 2007 23:12:59 +0000

One of the best sites around for desktops has to be Desktopography. Inspired by their amazing work today we are going to put together a sunset image mixing some vector shapes and dusky lighting effects to produce a slick image that would make a nice album cover for a chillout mix!

Adobe DREAMWEAVER CS3 Software Tutorial Training 2 DVDs

0 Bid

US $24.87

38m

Adobe PHOTOSHOP CS4/CS3/CS2 Video Training Tutorial

US $24.95

40m

Teach Yourself Visually Adobe Photoshop CS3

0 Bid

US $15.00

1h 15m

Adobe PHOTOSHOP CS3 EXTENDED - VIDEO TRAINING -3 DVD

US $34.95

1h 16m

New! Adobe PHOTOSHOP CS3 CS2 Tutorial Training on 3 DVD

0 Bid

US $24.87

2h 17m

Apple Power Mac G5 Dual 2.0Ghz with Adobe CS3 & Extras!

1 Bid

US $900.00

3h 23m

Adobe Dreamweaver CS3 upgrade (MAC) + FULL version 8 CD

11 Bids

US $70.96

3h 32m

Brand New Sealed Adobe Dreamweaver CS3

5 Bids

US $138.00

3h 39m

LEARN Adobe Photoshop CS3, For Beginners

0 Bid

US $24.99

3h 44m

ADOBE PHOTOSHOP CS3 EXTENDED, FACTORY SEALED

10 Bids

US $153.50

3h 49m

Adobe Photoshop CS3 MAC (Full Version PN 13102498)

6 Bids

US $202.50

3h 53m

Adobe Illustrator CS3 (MAC) PN 16001647

1 Bid

US $149.00

4h 8m

Adobe Photoshop CS3 for Mac

10 Bids

US $203.76

4h 24m

BRAND NEW Adobe Soundbooth CS3 + Serial for PC DVD

1 Bid

US $.99

5h 47m

Learn Adobe PHOTOSHOP CS3 CS2 Video Training on 4 DVDs

US $45.57

6h 45m

Learn Adobe DREAMWEAVER CS3 Video Training on 3 DVDs

US $45.57

6h 46m

Learn Adobe INDESIGN CS3 Software Video Training DVD

US $45.57

6h 46m

Adobe Photoshop CS3 MAC Extended Sealed Full VersionNew

US $369.00

7h 14m

Adobe PHOTOSHOP CS3 CS2 Computer Video Tutorial 4 DVD

US $45.57

7h 34m

New Adobe PHOTOSHOP CS3 CS2 Software Training on 4 DVDs

US $45.57

7h 44m

Share, E-Mail or Print the Style:

designShrine » Tutorials

3 Free Search Engine & Google Adsense / Adwords Ebooks

65 Adobe Illustrator Tutorials

Another fantastic Web 2.0 Design Guide

CUT TO THE SOURCE

Shortcut to Web2.0 Style

Introduction

1Simplicity

Why simplicity is good

When & how to make your designs simple

When?

How?

I'm not against richness, complexity or beauty in web design

2Central layout

Why a central layout is good

When & how to use a central layout

3Fewer columns

Why using fewer columns is good

How to choose your columns

And here's a site that gets it wrong...

4Separate top sections

Why distinct top sections are good

When & how to use a distinct top section

5Solid areas of screen real-estate

6Simple nav

Why simple navigation is better

How to keep your nav simple

7Bold logos

Why?

When & how?

8Bigger text

When & how to use big text

9Bold text introductions

When & how to use a bold text intro

10Strong colours

Colour is also a great medium for communicating brand values

Be careful to use intense colour on or around high-value features

Remember to use sparingly

11Rich surfaces

When & how to use rich surfaces

12Gradients

Why gradients are so useful

13Reflections

Specular highlights

That shiny table effect!

14Cute icons

Simple and clean

Cute and quirky

Richly detailed

15Star flashes

Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided

Top Segment/Logo

Other Segments

Colors

Icons/Vector/Characters

Navigation

Design Watercolor Effect Menu

Preview

1. Notepaper stock image

2. Watercolor effects

3. Add details

4. Hand wrting text

5. Washout RSS icon

6. Sketchy strokes

7. Final

31 Eyes Photoshopped [PICS]

How To Make Your Own Web Mashup

1. Pick a subject

2. Decide where your data is coming from

3. Weigh your coding skills

4. Sign-up for an API

5. Start coding

Amazon EC2 [API Profile]

Amazon eCommerce [API Profile]

Amazon S3 [API Profile]

Backpack [API Profile]

Bible Gateway [API Profile]

Bloglines [API Profile]

CNET [API Profile]

del.icio.us [API Profile]