12 Tileable Space Waves Photoshop Patterns

12 Tileable Space Waves Photoshop Patterns

Posted on 02. Jun, 2009 by WebTreats in Patterns

Today’s web treat is another high resolution tileable Photoshop pattern set (.pat). To make them, we used 12 of our favorite patterns from the Tileable Space Waves Background Set on Backgrounds ETC.

Average resolution: 512px * 1024px.

Download the high resolution tileable space waves pattern set below.

01-tileable-space-waves-photoshop-patterns-webtreats-preview

If you’re looking for a particular color that isn’t in this set, let us know or head over to Backgrounds ETC where you will find the full set of over 160 tileable space waves backgrounds in jpg format.

As always, all Photoshop Patterns, Photoshop Layer Styles, Photoshop Shapes, Photoshop Brushes, Psd’s, Icons, Textures and Web Elements on this site are free for personal and commercial use – no attribution necessary.

If you have any requests or suggestions, we’d love to hear them. Please let us know by leaving a comment below.

45 Sets of Seamless Vector Patterns

45 Sets of Seamless Vector Patterns

image

A collection of 45 free awesome seamless vector patterns. Over 500 different types of vector patterns which are perfect for print and great to be used within web design. 45 fresh sets of patterns which will help bring any type of design to life whether its print or web.


1) Zola

Patterns: (5 in Set)

image

2) Patterns by Raimyu

Patterns: (20 in Set)

image

3) Micro Patterns

Patterns: (54 in Set)

image

4) Retro Grunge Wallpaper Patterns

Patterns: (10 in Set)

image 

5) PS Patterns - Christmas

Patterns: (4 in Set)

image

6) Stylized Clouds 1

Patterns: (1 in Set)

image

7) Stylized Clouds 1

Patterns: (8 in Set)

image

8) PS Patterns Pack 2

Patterns: (3 in Set)

image

9) GypsyGarden

Patterns: (2 in Set)

image

10) Very Flowery

Patterns: (3 in Set)

image

11) Simple Scandinavian-style

Patterns: (3 in Set)

image

12) Simple Scandinavian-style

Patterns: (10 in Set)

image

13) Grunge Wallpaper Pattern

Patterns: (10 in Set)

image

14) PS Patterns Pack 4

Patterns: (3 in Set)

image

15) Brusheezy Exclusive

Patterns: (1 in Set)

image

16) 25 Woven Plaid Swatches

Patterns: (25 in Set)

image

17) 25 Seamless Polka Dot Pattern

Patterns: (25 in Set)

image

18) Mellow Mint Photoshop

Patterns: (16 in Set)

image 

19) Mellow Mint Photoshop

Patterns: (20 in Set)

image

20) Softly Plaidly- Peachy Keen

Patterns: (11 in Set)

image

21) wallpaper.patterns

Patterns: (11 in Set)

image

22) Cute patterns

Patterns: (17 in Set)

image

23) Patternlicious Polka Pattern

Patterns: (24 in Set)

image

24) Retro Set

Patterns: (3 in Set)

image

25) Bitbox

Patterns: (5 in Set)

image

26) Batik Pattern

Patterns: (6 in Set)

image

27) Geometric Coloured

Patterns: (6 in Set)

image

28) Random 2

Patterns: (24 in Set)

image

29) 18 patterns

Patterns: (60 in Set)

image

30) Antique Engraved

Patterns: (1 in Set)

image

31) Antique Gold

Patterns: (1 in Set)

image

32) Blue Discs

Patterns: (1 in Set)

image

33) Brown Swirls

Patterns: (1 in Set)

image

34) Ornate Set 1

Patterns: (3 in Set)

image

35) Modern Floral Set 2

Patterns: (3 in Set)

image

36) Classic pattern

Patterns: (1 in Set)

image

37) Paisley

Patterns: (1 in Set)

image

38) Damask seamless pattern

Patterns: (1 in Set)

image

39) REDmillion

Patterns: (1 in Set)

image

40) Pattern Set 2

Patterns: (8 in Set)

image

41) Lime Green

Patterns: (8 in Set)

image

42) Skulls and Hearts

Patterns: (3 in Set)

image

43) Skull Patterns

Patterns: (1 in Set)

image 

44) Scanline

Patterns: (27 in Set)

image

 

45) Black Modern Floral

Patterns: (1 in Set)

image

An A to Z Smorgasbord of Overused Graphic Concepts and Resources

An A to Z Smorgasbord of Overused Graphic Concepts and Resources

Jul 12th in Web Roundups by Peter Sawyer

With computer graphic being vastly popular with so many people, no doubt that techniques are being copied and re-used. Following are numerous overused computer graphic techniques, concepts, and resources of the last few years.

You'll have to decide which are so overused they've become dull, those which still have life in them, and those that you can breath creativity into. This article is complete with a smorgasbord of resources and tutorials to show you how to pull these ideas off well and increase your stack of resources as well. Let's have some fun!

PG

Author: Peter Sawyer

You probably know me as peewee1002, I am a young guy who is simply interested in the world of graphic design. I spend hours looking at others art and hope to go to a design school in the future.

A - Abstract Renders

Often artists make excellent 3D renders and use Photoshop to add a quick background and lens blur. It sounds easy to blend a 3D renders with a photo, but many artists don't put that extra effort into it. 3D Shards, people, animals and correct lighting help make the piece more photo-realistic. Dynamic blur is a good technique to show a sense of speed or distance and is not used enough.

Resources:


Artist: MrRoBiN

B - Blender

"Blender is the free open source 3D content creation suite" it is the most advanced 3D program which is currently free. Cinema 4D and 3D Max cost huge amounts of money, so this is perfect for those starting in 3D design.

It is becoming increasing more popular with the credit crunch in most countries. "It can be used for modeling, UV unwrapping, texturing, rigging, water simulations, skinning, animating, rendering, particle and other simulations, non-linear editing, com positing, and creating interactive 3D applications."

Resources:


Artist IceVampyr

C - Comic Strips

Comic strips can be drawn, made in 3D, painted and photo manipulated, so know wonder they are very popular on the internet. Some artists go for simple drawings with short funny punch lines, some go for books and make very high quality pieces.

It's often the ideas that are overused, rather than the graphics! There are some great comics out there, such as the "Cyanide and Happiness" comics, which use simple art and short snazzy punch lines, but are great to keep reading.

Resources:


Artist: Kris-wilson, for Cyanide and Happiness

D - Digital Geometry

Being able to create amazing 3D text quickly in Cinema 4D or any other 3D program has great advantages. They look much better than a simple bevel and emboss effect in Photoshop and often are the main focal in these works.

They are often completely overused by novice graphic designers, although practice does makes perfect. It is very hard to get an outstanding look from 3D text, but when it is done well, it sure pays off.

Resources:


Artist: Nick Ainley of shinybinary.com

E - Expert Photography

When you can take a photograph of an object, which looks Photoshoped, you are clearly an expert or a very lucky photographer. Photography is an important step in creating most pieces of art, or at least finding photos to use for your digital manipulations. Taking your own picture may take longer, but they should be easier to edit and you can also take photos in front of a green screen allowing for easier extraction.

Resources:

F - Fonts

Your computer often has a set of default fonts that many use, rather than downloading more each time they make something new. Times New Roman and Trajan Pro are often used. Check out great sites such as dafont for some amazing free fonts to add to your collection. Or if you need better tracking, alternate glyphs, or other pro font features, then you may want to purchase some fonts.

Resources:


Check out justcreativedesign for their list of fonts you should know.

G - Gradients

Photoshop comes with a set of default gradients but it's good to learn how to make your own. There are countless pieces which are colored by these default color, so consider opening up your gradient palette. Black and white, orange and purple and rainbow colors are some of the most common to break away from.

Resources:

H - Honest Products

This is the photo manipulation of turning everyday products into the true reflection of what you are actually getting. "Sometimes, though, a company tries to create a brand that doesn't really reflect what the product is really like." This is where Photoshop comes in and you can change the product to your true reflection of it. This is a concept you can have some fun with.

I - Impossible Objects

The Pen rose triangle, also known as the Pen rose tribar, is an impossible object. It appears to be a solid object, made of three straight beams of square cross-section, which meet pair wise, at right angles where the vertices of the triangle form. Have fun making your own impossible objects.

Resources:

J - Juxtaposition

Juxtaposition is the use of differing colors coming together to create different moods in a piece. An example of this would be blues and reds coming together, blue portraying ideas of life, peace and happiness which would juxtapose the red colors symbolizing death, blood and conflict, etc. These pieces can be found in space manipulations, as it is easy to split the colors into two.

Other examples:


Artist: Matkracken

K - Kuler

Adobe Kuler is a well known program, it makes it possible to create, share and explore new color schemes. Kuler is not an overused graphics technique, it is more of a overused graphics tool. It is great for beginners to explore the world of color, as well as experts to try new ideas and keep their work fresh and original.

Resources:

L - Light Bulbs

What can we manipulate inside a light bulb today? How about a fish tank? There are a large amount of people seeing what they can place inside light bulbs. Fish, forests, spiders, people and cats have all been done. What is going to be next? This is fun to do, as light bulbs represent ideas, so placing things inside them work well for fusing conceptual elements.


Artist: mceric

M - Movement

On a digital camera you can turn the exposure time up, which allows for you to capture light streaks and movement. A good SLR camera will often cost you a good deal of money, so it's more affordable and easier to stay inside Photoshop to add these effects.

Resources:


Painting with light by stoiclee

N - Nebulas

Where you find a planet you almost always find a nebula. They are often placed in via brushes, but more talented artists can paint their own. The easiest and most realistic way to add a nebula is to get free images. The Hubble telescope web site takes many thousands of pictures of galaxies and is the highest quality source you will find, though be careful and make sure you read the terms of use first!

Resources


Artist: thalesduarte

O - Omega Code

The band Omega Code will release a limited number of 2300 posters, which are going to be printed and distributed around the globe along side their music.

23 artists were invited to illustrate, among them you can find names like Joshua Davis, Si Scott, Mike Cina, Michael Paul Young, Mate Steinforth, Matthew Curry, Nelson Balaban, Tom Muller, Motomichi Nakamura, Danny Franzreb, Robert Lindström, Andreas Pihlström, Chris Hewitt, Hello& Hikimori, Sebastian Onufszak, Animatório, Colletivo, Nacionale, Unstru, Tomás Peña, João Oliveira, Peter Jaworowski, Umeric and Doomedo.

The Omega Code symbol is the four overlapping triangles and one of the most popular graphics icons this year. Check out the bands web site. Check out other uses of the triangles here.


Artist: R0GUEART

P - Planets

Blending planets into a photo manipulations is hard work. Many artists make the photos and planet look like two separate layers. The most common solution to blending planets in is to add a thick layer of clouds or to place an amazing fractal on top.

Resources:


Artist kire1987

Q - Quietus

Quietus is another term for death. Death is often placed inside photo manipulations in the form of skulls. They appear most commonly in a vector format, but you can manipulate peoples faces with skull photos. As well as looking cool, skulls are also a great way to scare a viewer. Adding skulls at the bottom of a dark pit suggests that someone or something is murdering people - always fun!

Resources:


Artist: iRoot made this spooky wallpaper

R - Reflection

Often if an artist has a space to fill, adding a completely pointless text reflection is perfect - right! Often a simple flip and reducing opacity occurs, but this is totally incorrect. In ordered to do a proper text reflection you have to take the lighting and the surface into consideration, you have to get the correct perspective. It does take some practice to make a good reflection.

Resources:

S - Splatters

A splatter brush can save almost any artist in Photoshop. If you have ran out of ideas, grab the splatter brush, and you get a instant background! They are also very good to use as clipping masks.

Resources:

Examples of use:


Or as a T-shirt like above, made by me.

T - Trees

Trees seem to appear in loads of photo manipulations today. They are a good way of showing nature, as well as beauty within a piece. Often the tree flows out of an object or wraps around an object.

Resources:


"The music nature" is a striking piece by Ethernity

U - Understanding Physics

Understanding physics is one of the hardest things to do in graphics design, often when photo manipulating you are looking to make something impossible or out of this world. When you need to manipulate a picture on earth, getting the physics correct is important. For example, making reflections in puddles, speed of cars, lighting, gravity (not having objects floating), airbrushing and clouds all correct in one piece is hard work.

Resources:

V - Vectors

"Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical equations, to represent images in computer graphics." Vectors are very common but take a lot of time and practice, when starting out don't choose the most detailed object you can find!

As we can see we have another artist who has based their piece on the idea of the shape of a triangle, and then have images appearing to pop-out, or have everything contained within a triangle. There are almost endless ideas which you can use with triangles. Play around and find what is right for you.

Resources:


Artist: recycledwax made this fantastic vector

W - Water World

Placing objects underwater has never been such fun as with Photoshop! You can take almost any scene you imagine and place it in the depths of the ocean. Add a couple of fish with some bubbles, and there you have it!

Resources:


Artist: Mandrak made this fishy work

X - X-lines

I was struggling to find anything for X then a friend told me about something he called X lines. These are the abstract renders in general shape of an X. Although there doesn't seem to be a name for them, they are common to see in many pieces. If you know the proper name for them, please let me know in the comments!

Y - Yes it is real....

Some people like to manipulate pictures and make them so real that people cannot tell. They give them a false backstory to go with them as well. These pictures can end up in the news before someone figures they are fake. This story was posted with the picture below:

"There was a family on holiday in Australia for a week and a half when husband, wife and their 15 year old son decided to go scuba diving. The husband is in the navy and has had some scuba experience. His son wanted a pic of his mum and dad in all their gear so got the under water camera on the go. When it came to taking the pic the dad realized that the son look like he was panicking as he took it and gave the ‘OK’ hand sign to see if he was alright.

The son took the pic and swam to the surface and back to the boat as quick as he could so the mum and dad followed to see if he was OK. When they got back to him he was scrambling onto the boat and absolutely shitting himself.

When the parents asked why , he said ‘there was a shark behind you’ and the dad thought he was joking but the skipper of the boat said it was true and that they wouldn't’t believe him if he told them what it was.. As soon as they got back to the hotel they put the pic onto the laptop and this is what they saw"

It took a long time before anyone figured that it was fake and in fact just a photo manipulation.

Resources:

Z - Zip It

Again where is it possible to add a zip? It is as simple as finding a picture of a zipper and then using the clone tool to create a zipped edge against something. Then add a picture in underneath. Easy and effective, and it makes for a very common manipulation. Awe, so cute, kittens in live alligators luggage!


Credit goes to Caveatscoti for this gruesome picture.

Conclusion

I hope you had fun with this post! There are some ridiculous and overused graphic concepts shown here. Though you've likely found a couple nuggets of visual awesomeness as well! It's up to you to wade through all the clutter of digital graphics and find that creative spark, which ignites your artistic passion!

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

30 Light and Sleek Web Designs for Inspiration

30 Light and Sleek Web Designs for Inspiration

July 12th, 2009 by Jacob Gube | 6 Comments | Stumble It! Delicious

The creative utilization of color gradients, lighting effects, glow effects, and details such as inset pixel dividers can result into a beautiful and impressive website design. When deciding on a color theme, designers often choose whether they’d like to use a dark or a light palette; in this showcase, you’ll get to see light and bright designs.

This collection presents exemplary and gorgeous examples of light, bright and sleek web designs for your design inspiration.

X3 Studios

X3 Studios

Kompakt

Kompakt

Saturized studio

Saturized studio

Digitalmash

Digitalmash

MULTIWAYS

MULTIWAYS

JUNECLOUD

JUNECLOUD

Interactive Partners

Interactive Partners

Central Snowsports

Central Snowsports

Darren Hoyt Dot Com

Darren Hoyt Dot Com

clandrei

clandrei

Fontcase

Fontcase

Trent River Cruises Nottingham

Trent River Cruises Nottingham

Mayoris

Mayoris

Gist

Gist

Common Good Radio

Common Good Radio

buro Taggetig

buro Taggetig

Campaign Monitor

Campaign Monitor

Cultured Code

Cultured Code

reichweite

reichweite

Miro

Miro

Guifx

Guifx

Sansa

Sansa

RonnieSan

RonnieSan

Easykom

Easykom

Discovery Creative

Discovery Creative

koves

koves

Postbox

Postbox

Deaxon

Deaxon

Crush + Lovely

Crush + Lovely

youlove.us

youlove.us

Related content

10 Common Mistakes In Logo Design| logo设计的十个常见错误


来自:http://www.smashingmagazine.com/2009/06/25/10-common-mistakes-in-logo-design/

翻译的不一定准确,英语好的自己看原文吧~

With the power of the Web, and more eyes watching than ever, it’s important for a business to communicate its unique message clearly. The easiest way to recognize a company and distinguish it from others is by its logo. Below, we go through 10 common logo design mistakes that you should avoid if you want to create a successful and professional logo.

1. Designed By An Amateur 【业余的设计师设计】


Avoid websites that promote ridiculously cheap logo packages. You get what you pay for.【别去买什么网站的廉价打包logo集合,便宜没好货】

A professional business should look professional. New business owners often invest a lot of time and money in property and equipment, but do not often match it by investing suitably in their logo.

Here are the most common reasons why many logos look amateurish:

  • The business owner wanted to save money by designing the logo quickly themselves.
  • A friend or relative who claims to know a little about graphic design does it as a favor.
  • The wrong people are commissioned. (Local printers are not likely proficient in logo design.)
  • The business outsourced the job via one of several design competition websites, which are mostly populated by amateur designers.
  • The job was given to an online company that offers really cheap logos.

All of the above can result in disastrous outcomes. If your logo looks amateurish, then so will your business. A business should know where to look when it wants a new logo. David Airey offers great insight on how to choose the right logo designer for your requirements.

Here are the advantages of hiring an established and professional logo designer:

  • Your logo will be unique and memorable.
  • You won’t run into any problems down the line with reproducing it.
  • Your logo will have a longer lifespan and won’t need to be redesigned in a couple of years.
  • Your logo will look professional.

2. Relies On Trends 【太相信流行趋势】


Focusing on current logo trends is like putting a sell-by date on a logo.   【太关注当前流行趋势,就好像给logo贴上了保质期(无法成为经典,因为过期会坏掉)】

Trends (whether swooshes, glows or bevels) come and go and ultimately turn into cliches. A well-designed logo should be timeless, and this can be achieved by ignoring the latest design tricks and gimmicks. The biggest cliche in logo design is the dreaded “corporate swoosh,” which is the ultimate way to play it safe. As a logo designer, your job is to create a unique identity for your client, so completely ignoring logo design trends is best.

Logolounge has a great section on its website in which it updates current logo design trends every year. Being aware as a designer of the latest crazes is important, mainly so that you can avoid them at all costs.

3. Uses Raster Images 【使用非矢量图】


An example of how raster graphics can limit reproduction.【非矢量图放大的时候或者来回缩放的时候就会无比痛苦】

Standard practice when designing a logo is to use vector graphics software, such as Adobe Illustrator or Corel Draw. A vector graphic is made up of mathematically precise points, which ensures visual consistency across multiple sizes. The alternative, of course, is use to raster graphics software, such as Adobe Photoshop. A raster graphic — or bitmap, as it’s commonly called — consists of pixels.

Using raster images for logos is not advisable because it can cause problems with reproduction. While Photoshop is capable of creating very large logos, you never know for sure how large you will have to reproduce your logo at some point. If you zoom in enough on a raster graphic, it will appear pixelated, making it unusable. Maintaining visual consistency by making sure the logo looks the same in all sizes is essential.

The main advantages of vector graphics for logo design are:

  • The logo can be scaled to any size without losing quality.
  • Editing the logo later on is much easier.
  • It can be adapted to other media more easily than a raster image.

4. Contains Stock Art 【使用素材图形】


Using stock vector graphics in a logo puts your client at risk.【随便从网上拽一个矢量图标集做logo会让你的客户很厌恶】

This mistake is often made by business owners who design their own logo or by amateur designers who are not clued in to the laws on copyright. Downloading stock vector imagery from websites such as VectorStock is not a crime, but it could possibly get you in trouble if you incorporate it in a logo.

A logo should be unique and original, and the licensing agreement should be exclusive to the client: using stock art breaks both of these rules. Chances are, if you are using a stock vector image, it is also being used by someone somewhere else in the world, so yours is no longer unique. You can pretty easily spot stock vectors in logos because they are usually familiar shapes, such as globes and silhouettes.

5. Designing For Yourself Rather Than The Client【太个人主义,无视客户】


Never impose your own personality onto a client’s work.【别太把自己的个性强加到给客户的稿子上(尤其是比较传统的客户)】

You can often spot this logo design sin a mile away; the cause is usually a designer’s enormous ego. If you have found a cool new font that you can’t wait to use in a design, well… don’t. Ask yourself if that font is truly appropriate for the business you’re designing for? For example, a great modern typographic font that you just love is not likely suited to a serious business such as a lawyer’s office.

Some designers also make the mistake of including a “trademark” in their work. While you should be proud of your work, imposing your personality onto a logo is wrong. Stay focused on the client’s requirements by sticking to the brief.

6. Overly Complex【太精致】


Highly detailed designs don’t scale well when printed or viewed in smaller sizes.【细节太多的logo当他们缩小的时候就会丧失精致感并变得模糊】

What better analogy for thumbnail images than fingerprints? You’ll notice the intricacies of your fingerprints only when looking at them really close up. As soon as you move away, those details are lost. The same holds true for highly detailed logo designs.

When printed in small sizes, a complex design will lose detail and in some cases will look like a smudge or, worse, a mistake. The more detail a logo has, the more information the viewer has to process. A logo should be memorable, and one of the best ways to make it memorable is to keep things simple. Look at the corporate identities of Nike, McDonald’s and Apple. Each company has a very simple icon that can easily be reproduced at any size.

7. Relies On Color For Its Effect【效果太依赖颜色】


Without color, your great design may lose its identity.【太依靠颜色的话,一旦没有了颜色,他们将会失去他们所代表的内容】

This is a very common mistake. Some designers cannot wait to add color to a design, and some rely on it completely. Choosing color should be your last decision, so starting your work in black and white is best.

Every business owner will need to display their logo in only one color at one time or another, so the designer should test to see whether this would affect the logo’s identity. If you use color to help distinguish certain elements in the design, then the logo will look completely different in one tone.

8. Poor Choice Of Font【不好好选择字体】


Font choice can make or break a logo.【一个不好的字体会破坏一个logo的整体感(上图就是系统自带的字体 comic fonts)】

When it comes to executing a logo, choosing the right font is the most important decision a designer can make. More often than not, a logo fails because of a poor font choice (our example shows the infamous Comic Sans).

Finding the perfect font for your design is all about matching the font to the style of the icon. But this can be tricky. If the match is too close, the icon and font will compete with each other for attention; if the complete opposite, then the viewer won’t know where to focus. The key is finding the right balance, somewhere in the middle. Every typeface has a personality. If the font you have chosen does not reflect the icon’s characteristics, then the whole message of the brand will misfire.

Bad fonts are often chosen simply because the decision isn’t taken seriously enough. Some designers simply throw in type as an afterthought. Professional font foundries, such as MyFonts and FontFont, offer much better typeface options than those over-used websites that offer free downloads.

9. Has Too Many Fonts【字体太多】


A logo works best with a maximum of two fonts.【一个logo最多使用2种字体就好】

Using too many fonts is like trying to show someone a whole photo album at once. Each typeface is different, and the viewer needs time to recognize it. Seeing too many at once causes confusion.

Using a maximum of two fonts of different weights is standard practice. Restricting the number of fonts to this number greatly improves the legibility of a logo design and improves brand recognition.

10. Copies Others【抄袭!!!】

This is the biggest logo design mistake of all and, unfortunately, is becoming more and more common. As mentioned, the purpose of a logo is to represent a business. If it looks the same as someone else’s, it has failed in that regard. Copying others does no one any favors, neither the client nor the designer.


15个梦幻的登录页面设计展示


battlenet


Battle.net


wow


World of Warcraft


tastebook


Taste Book


newsberry


Newsberry


vimeo


Vimeo


getsignoff


Getsignoff


brightkite


Brightkite


matt


Matt


drupalcon


Drupalcon DC


krop


Krop


animoto


Animoto


strawpoll


Strawpoll


mailchimp


MailChimp


playsega


PlaySega


footytube


[ 关键词:页面设计 设计 原文/来源链接 ]
网站或应用的登录页面有时候通常用户会看很多遍,同时也有机会诱使临时用户注册,所以,一个设计良好的登录页面会比你想象的更有用。这里是一些我们收集目前最好的登录界面设计。

50 Beautiful Flash Websites


Drinks Sites

Martini Asti
This Martini site is a nice example of giving a fresh image of a drink. The navigation is made simple, the graphics have superior quality, it loads fast and runs smoothly. What else does a Flash site need? Note due to the law on alcoholic drinks, you need to enter an e-mail address, a password of your choice and accept their terms.

Martini Asti

Bacardi - Original Mojito
The motion graphics and the water effects in slow motion give a unique style to this site. A fresh site, with a colored menu with a drag option, makes it functional and simple. Note: due to the law on alcoholic drinks, you need to enter an e-mail address, a password of your choice and accept their terms.

Bacardi - Original Mojito

Glacéau - Vitaminwater
The vitamin water site is full of motion and small details like the top menu, with a colored wave effect, the mouse movement, the masks effects and swirls which make it great.

Glacéau - Vitaminwater

Portfolios

v5 Design
Beautiful landscape with some nice details such us the sun and butterflies. The old paper effect when opening from the menu, and the mask effect over the green plants give it a special touch.

v5 Design

Sensisoft
The Sensisoft site offers a nice interaction for users. The vortex effect while changing from path, the motion graphics in the background, the high quality and details of the graphics make it a great design agency site.

Sensisoft

Mauricio Guimarães Portfolio
Mauricio portfolio is a good example of creativity. Instead of the ordinary menu, he uses a kind of parallax movieclip, where the user must interact with the stage to explore the site.

Mauricio Guimarães Portfolio

Colorchakra - Portfolio of Srinath Rangamani
A colored background with high quality graphics.

Colorchakra - Portfolio of Srinath Rangamani

Magnivate Interactive Boutique Agency
A nice animated site. One particular feature on this site is that you need to set a character to explore the site.

Magnivate Interactive Boutique Agency

e-Content Solutions
This studio portfolio starts with a nice and unusual preloader, a kind of puzzle which interacts on mouse rollover. Another kind of interaction is user’s ability to explode the balloons.

e-Content Solutions

Ari´s Labs. The Digital Home of Graphic Designer Ari Hirvonen
The high quality of motion graphics, conception and the functional layout makes this site a good example of what a Flash portfolio should look like.

Ari´s Labs. The Digital Home of Graphic Designer Ari Hirvonen

Edwin Murat Ganter Portfolio
A simple and creative layout. Not common, but still practical and easy to use.

Edwin Murat Ganter Portfolio

Vegaone
Color effects and 3D layout on this site are remarkable. However, it could be improved with some motion graphics and page transition effects.

Vegaone

Infinit Colours
This site gives the user the option to change the background between beautiful high quality designs. The menu is also a creative alternative to deliver some interactivity.

Infographiste indépendant

Infographiste Indépendant
Another creative portfolio, full of interactivity and motion graphics. The background image is great.

Infographiste indépendant

Sonacom
A great Generative Art example which requires the user to interact with the stage.

Sonacom, agence de création avec 5 studios d'enregistrement et 1 plateau de tournage TV intégrés.

CloudRaker
On this site you can use the character to move along. The graphic element is great and the concept it unusual.

CloudRaker

Prismgirl
A great creative portfolio, using an unusual layout.

Prismgirl

Agence Secondlife
At a first glance this site needs the user to interact with it in order to move forward. Rather than the graphics quality, this site creates a 3D globe, full of color which is a creative option to move around the site.

Agence Secondlife

Digaworks Corporation

Digaworks Corporation

Zign Marketing Digital

Zign Marketing Digital

Mon-Monde

Mon-Monde

Elipse Agency

Elipse Agency

Matt Wiggins Portfolio

Matt Wiggins

Lilia Planet

Lilia Planet

Ladio

Ladio

Insurance

Privado Seguros (currently offline)
The Privado Seguros site has wonderful graphics, with many rich details. A good example to get inspired from.

Privado Seguros

Let Your Worries Go
Another parallax site, with beautiful graphics, with funny interactions like dragging the characters – each of them represents one specific topic.

Let Your Worries Go

Projects

Sometimes designers and developers create awesome works, but these works never go online, because the client hasn’t chosen them. The following projects are great examples which will inspire you for sure on your future projects.

Imagine Air - Flash Site School project

Imagine Air - Flash Site School project

Project: Coca-Cola Light - Tastes of the World

roject: Coca-Cola Light - Tastes of the World

Saizenmedia - Keepersgame

Saizenmedia - Keepersgame

On Toyota’s mind

On Toyota’s mind

Games or Games Related

Get the Glass
This site is a 3D board game, with animated characters, full of action. The graphics, animations, concept are all awesome.

Get the Glass

BioShock
A Playstation game related, this site offers a nice navigation through the site, and has cool details like the tv and cinema camera. The graphics are another great aspect of this site.

BioShock

Leven Thumps

Leven Thumps

Commercial

Bebiko
A nice colored design, with motion graphics and integrated video content.

Bebiko

Nokia Trends Lab
This site is full of color which changes depending on the path the user has chosen. You can see some great details like the video images in the bubbles. Motion, multimedia content and color define this site.

Nokia Trends Lab

Hewlett-Packard - Wake up your feelings with the power of touch
Another site with great graphics and an extraordinary concept. The navigation is just remarkable. A good place to get inspired.

Hewlett-Packard - Wake up your feelings with the power of touch

Theologos House of Jewellery
The simplicity of the site navigation and the beauty of flowers are hard to overlook.

Theologos House of Jewellery

Real Casual
Another site with great graphics and a nice concept.

Real Casual

Bubbaloo

Bubbaloo

Pirogov
A simple site, with great details, like the light at the left, the sea and the castle at the right.

Pirogov

White Gold
Do you like music? And interact with a movie-clip? Well, here you are able to have both. Great graphics, and the video integration is impressive.

White Gold

Pantagonia
Another nice and interactive interface example.

Pantagonia

Infinite OZ | Tin Man | SCIFI.COM
The graphics are exceptional, and the continuous movement between scenes is great.

Infinite OZ | Tin Man | SCIFI.COM

Zube
A simple layout with quality graphics and great transitions.

ZUNE

Häagen-Dazs - Help the Honey Bees
Another example of a great user interactivity, with great graphics.

Häagen-Dazs - Help the Honey Bees

Got Milk?

Got Milk?

Environment

GE | Plug Into the Smart Grid
Maybe the majority of you have heard about this site, and even visited it due to the Augment Reality feature. But I still wanted to feature it, due to the high quality of the graphics, concept and design.

GE | Plug Into the Smart Grid

DirectGov - Act On CO2 Calculator
Another environment-related site, with an educational and informational purpose. You will find nice graphics, continuous motion and an easy navigation. A good example of delivering global topics.

DirectGov - Act On CO2 Calculator

WWF Brasil

WWF Brasil

About the Author

Carlos is a geek, flash addicted and is the founder of The Tech Labs, a site that regularly publishes Flash Tutorials, Flex Tutorials and AIR Tutorials. You can also follow him on Twitter.

采用JQ的导航菜单设计

导航菜单在任何网站中都占有举足轻重的地位。对于充满了大量页面与文章的大型网站来说,下拉菜单于选项卡菜单非常受欢迎,这是因为用户可以通过他们轻松的浏览网站,同时运用动态的选项卡显示内容能节省网站大量的空间。加入你也想创建一个属于自己的与众不同导航菜单的话,jQuery是提供一套定制选项的正确选择。这就是为什么我想大家推荐36个jquery导航菜单实例的原因。


1.jQuery 选项卡界面 / 选项卡结构菜单教程

这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟,你一定会喜欢上它的。

jquery-tabbed-interface

Preview || Download

2.效果生动逼真的jQuery菜单

学习如何使用简易的XHTML/CSS/JS创建令人惊奇的效果生动逼真的菜单,类似 Dragon Interactive (dragoninteractive.com).

jquery-animated-menu

Preview || Download

3. 使用CSS和jQuery创建非常Cool的动画效果导航 (教程 + 下载)

动画及视觉反馈是帮助用户在浏览和网站与网站互动的有效手段。虽然传统的Adobe的Flash是可以完成各种动画效果的,但是最近使用JavaScript的魔法,我们可以完全避免使用flash。

jquery-navigation-slide

Preview || Download

4.jQuery目录导航插件

这个jQuery插件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法。一个在列表之上的简易的(viaCSS)导航条,向用户展示从A到Z的检索。通过从列表中选择一个字母来显示以此字母开头的所有元素。在可选字母上面显示的计数,是表明当你点击此字母的时候会有多少项目被现实。除此之外还有其他的基本功能可供选择。

jquery-list-nav

Preview || Download

5. jqDock 菜单

变换图标模仿mac的Dock菜单, 水平或者垂直,以图标扩大过渡可选的标签。

jqdock-jquery-plugin-menu

Preview || Download

6.Jquery滑动菜单

这篇教程是像我们讲解与下载

滑动菜单,你可以在PSDtuts网页右上角查看效果。

jquery-sliding-menu-tutplus

This is how looks finished demo version:

vertical-sliding-menu

Preview || Download

7.CSS 精灵 2 - 是JavaScript的时间

css-sprites-2-jquery

Preview

8. CSS Mac Dock 菜单

如果你是Mac深度中毒者,你会爱上我设计的这个CSS dock菜单。他使用了Jquery Javascript库和Fisheye部件界面以及我的一些图标。它有两种停靠风格-上端与下端。这个菜单加入到我的ITHEME中非常好。

css-dock-menu-jquery

Preview || Download

9.jQuery的Kwicks菜单

Kwicks起源于Mootools中的一个效果(相同名字),逐渐演变成一个高度可定制的通用部件.

kwicks-jquery-menu-navigation

7 Examples || Download

10.Jquery文件树

jQuery文件树是一个可配置的, AJAX的文件浏览器jQuery插件。您可以只用一行JavaScript代码创建一个定制的,完全互动的文件树。目前,服务器端连接器的脚本支持PHP, ASP, ASP.NET,JSP, 与Lasso。如果您是开发人员,可以轻松地使用所选语言创建自己的连接。

jquery-file-tree-navigation

Preview || Download

11.学习jQuery: 褪色菜单 -更换内容

CSS-tricks上很好的教程,讲解如何使用css和jQuery, 这次是他们教导如何使用 jquery

使得菜单选项褪色。

menu-fader-jquery-navigation

Preview || Download

12. 如何使用jQuery创建顺滑生动的菜单

曾经见过一些优秀的jQuery导航,你有想自己创建一个的冲动么? 这篇教程是教你怎样建立拥有顺畅动画效果的菜单。

smooth-animated-jquery-menu

Preview || Download

13.Create Vimeo-like top navigation

学习如何创建像 Vimeo网站的导航菜单 ,虽然只用了xhtml,css used,但是我仍然想包含他。