or in Photoshop, go to Filters -> Blur -> Average
Nivo slider is lightweight jQuery plugin for creating an awesome Image Slider. This plugin offer 9 unique transition effect. This image slider is simple clean and it has valid markup. This image slider can display prev-next buttons and a navigation to control the slides.


Anyway, here is one more point, last but not least:
A design may have impact. It may have style. But having these isn’t enough.
To work well, a design has to have elements that play off each other’s strengths. Fortunately, every piece of content has inherent guidelines.
Layout, or the arrangement of content on a web page, is critical to a design’s success. Among other things, layout prioritizes content to lead people from one element to the next.
If done right, people will be so interested in the content that they won’t notice anything else.
Read on for more details and tips for creating layouts that work in your designs.
With the example below, most people will notice either the photo or the headline first, then the text and finally the links.
They may not notice that the headline, text and model’s face are set one third and two thirds into the page respectively (honoring the rule of thirds), or that the headline and links are written in colors sampled from the model’s lips, or that the curve of her shoulder leads the eye toward the calls to action.
Text, photo and headline make up a composition. If one falls out of place, the whole piece fails.

Where do we put things? Let them tell us. The quirks of graphics, photos and chunks of text become apparent when they meet on a page. Some work together better than others, and some work only when placed a certain way. For example, our layout technically works in two ways:

Figure 1 shows the layout used in our example above. Gray blocks represent the headline, photo and text.
Figure 2 shows how the same principles would apply to its inversion: one large element balanced by two smaller elements. This particular photo looks better on the right, though.

Our model is looking to the left. In figure 1, she’s looking at the text. In figure 2, she’s looking away from the text. That might have worked if she was looking at the camera, but because she’s looking away, it loses some impact. Not much, but enough to matter.

The model alternately shows interest in the text and, when inverted, ignores it. The arrangement of elements establishes either a positive or negative attitude.
Sometimes the thing that makes elements work a certain way also provides clues about space and alignment. We noted how the model’s eyes point to the left, but the photo and text contain other visual cues.

Implied lines between landmarks in the typography and the image abound in this composition:
Some landmarks have more power than others. Designers and photographers could debate, for example, whether the model’s eyes are more influential than her silhouette. But a layout based on any landmarks is better than a layout that ignores them.
Non-designers who try their hand at layouts sometimes arrange elements based on how they fit onto the page. Space should be respected, but it doesn’t always lead to the best design.

Figure 5 aligns elements to the page’s space and bases everything on the boundaries of the canvas.
Figure 6, though, bases its layout on focal points in the photo. The result is a more streamlined appearance.

Figure 5 is inefficient because viewers bounce around between focal points: to the headline, down to the face, up to the text. The simplest line is straight. Hence, figure 6 guides the viewer’s gaze easily from left to right, from one element to the next. The crux of the second layout is a narrow band running along the headline-face-text alignment.

In these images, readers are drawn to the model’s face, the headline and the text—usually in that order. That’s three different areas to look at. Aligning them gives the layout focus.
All three layouts below use the same headline, photo and text elements:

The first layout has the most “breathing room.” The second respects the text. The third layout uses negative space to achieve balance. All three use landmarks but in different ways. Is one the best?
Hunting for an answer may blind us to the obvious: that multiple solutions can be equally valid when the elements work together. Visual landmarks are opportunities, not rules. Take another look at the first design.

The more the elements conform to implied lines, the more a non-conforming element will stand out. Here, the designer breaks the word “Landmarks” from the other text’s vertical alignment, thus emphasizing the keyword.
There’s no doubt about what the page is promoting. Success isn’t measured by how strictly elements conform to principles of design but by how well the page communicates its message.
Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance writer and designer who solves communication problems with better design.
Cheatsheets and various quick reference guides are available for almost any type of software and language these days.
Unfortunately they’re not always easy to find when you actually need them. This is why I decided to take some time to gather up as many as possible and share them with you here!
Hopefully this can be a timesaver for you, along with teaching you a new trick or two. The resources have been divided into various categories to make them easier to find. Below are more than 100 cheat sheets and reference cards for the following topics:
LaunchList
This tool helps you review important items before the big launch. By default, the tool provides 28 items to be checked, but it also allows you to add custom items to the list. Each item can be commented on or crossed out. Once you’re done, you can send the report along with project’s details to multiple recipients via email. Alternatives: Ultimate Website Launch Checklist and Paul Boag’s The Ultimate Website Prelaunch Checklist.
Bounce
A fun and easy way to share ideas on a website. The tool allows you to make notes, write feedback in an overlay of every site and then share your notes with friends.
Visual Website Optimizer
Visual Website Optimizer is undoubtedly the best A/B, split and multivariate testing software ever created by mankind.
gridr buildrrr
This generators allows you to choose the grid for your layout and preview it online.
jsFiddle
Online Editor for the Web, with support of JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML and CSS. The tool lets you save and run your applications within the web browser.
Titanpad
This tool allows you to edit documents simultaneously with other users, highlighting each user’s edits in a different color. Editing is done in true real time. Nice solution for everybody who works collaboratively on text documents, whether in the same office or on the other side of the world.
0to255
A simple tool that helps web designers find variations of any color. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.
HiFi RegExp Tool
Regular expressions can be a pain. The HiFi RegExp tool is 100% JavaScript using jQuery. This tool was created to help developers learn, practice, and compose regular expressions.
Tableizer
Clients often provide data in spreadsheet form, and reformatting it into HTML can be a real pain. This tool generates HTML tables out of spreadsheet data. Just copy and paste the cells from your spreadsheet, choose your options (font, font size and header color) and you have a properly formatted HTML table for your data.
Sketchpad
This application is a powerful online image editor. Its tools are organized in handy, draggable boxes that can be positioned very much as you would see in traditional image-editing applications.
Grid System Generator
This tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.
Typograph — Scale & Rhythm
A useful tool for testing typographic scale and rhythm. It lets you set factors such as the typographic scale (traditional, 3:5 Fibonacci, Le Corbusier, etc.), the font size in percentage, line height, the layout, padding and the line height for h1, h2 and h3 headings.
What the Hex?
Among the variety of methods of representing color values, some are easier to identify than others. The hexadecimal system, though, often looks incomprehensible. If you feel you know colors pretty well, then this is a simple game for you. All you have to do is match the hexadecimal code (which is actually a group of three hex numbers: #rrggbb) with the corresponding color. Of course, this is easier said than done, but you can adjust the difficulty by displaying between 2 and 48 possible answers.
You are viewing
eugenedest's journal