Can Photoshop do everything? Of course, it can. But one should have extreme skills, plenty of experience and a great deal of time before retouching images or creating graphics pixel by pixel. Photoshop is an amazing graphics application that has forever changed graphic, Web design and digital photo editing.
One should know how to use Photoshop to its full potential to get the most stunning results. This is where Photoshop plug-ins come in handy. (Plug-ins aside, though, if you have time to acquire extreme skills, we encourage you to do so because there is nothing better than learning something new.)
Featured below is the ultimate collection of useful Adobe Photoshop plug-ins that will make your work easier, faster and better and reduce the number of steps needed to accomplish tasks. They will also allow you to do things you just cannot do with the features built into Photoshop. Some of the plug-ins are collections of filters, whereas others are programs or utilities that you may find useful.
Please also take a look at the following collection of (free and commercial) Photoshop plug-ins from our friends from the web design community:
Cutting out is one of those painful tasks in Adobe Photoshop that people always approach with gritted teeth. It is very easy to cut out a section when the image has clearly defined lines. But on many occasions, you will come across images that prove to be just too challenging.
The fluid mask plug-in is helpful in such cases. It can isolate subjects in a quick and logical way and works similar to Photoshopâs own mask options, except that it has its own interface and offers much more control; for example, all brushes have their own settings. There are a lot of ways to use this plug-in, depending on the type of image you are working with.
Compatible host program
Adobe Photoshop CS2
Adobe Photoshop CS3 (Fluid Mask installed as plug-in)
Virtual Photographer is a free plug-in that you can use to create a variety of photographic styles quickly and easily. This plug-in features multiple presets for creating numerous effects, so you donât have to waste hours working out the perfect settings.
Virtual photographer has a filter to suit every purpose. You can fine-tune the available settings even further to manipulate the image to your specific requirements. It is also possible to save your favorite settings as .vph files so that you can apply the styles to future images.
Portraiture is a useful portrait retouching plug-in. It intelligently smoothens and removes imperfections, while preserving important portrait details such as skin texture, hair, eyebrows, eyelashes, etc. A unique feature is that it allows selective smoothening for only the skin tone areas of the image. It also lets you add effects quickly with presets.
Batch processing
via Photoshop Actions
Compatible host program
Adobe Photoshop CS2, CS3, CS4
Adobe Photoshop Elements 4, 5, 6, 7
Adobe Lightroom 1.5, 2.0
Apple Aperture 2.1
Color support
8 bits/channel
16 bits/channel
Operating system
Windows XP, Vista Mac OS X 10.4.x, 10.5.x
Price
$199.95
AKVIS Chameleon
AKVIS Chameleon automatically adjusts pasted objects to the target image’s color range and smoothens the object’s borders. This plug-in frees you from the meticulous process of precisely selecting objects. With the press of a button, the object adjusts to the new background, adapting to the new color range and blending with the environment.
Noise Ninja is a useful plug-in for removing noise and grain from digital photographs. Noise reduction is useful for anyone shooting in low-light or fast-action situations like news, sports, weddings and events.
Noise Ninja often yields a two-fold improvement in image quality, while preserving important image detail. In addition, it can produce cleaner, smoother enlargements from low-ISO images. It includes automatic and manual noise analysis, camera-specific profiles, an innovative “Noise Brush” and batch processing to allow you to quickly and easily retouch and rescue your images.
An image often looks dull if all areas or objects are of the same focus. Giving areas varying levels of focus is an ideal way to add interest and create a more sophisticated look. Depth of filed is a difficult effect to get right, but this plug-in allows you to achieve it easily.
Depth of Field Generator Pro provides an automatic solution for depth of field problems and uses a range of algorithms to aid you in the process. The plug-in can be applied to single or multiple images at once.
Although natural lighting effects can greatly improve a photograph and add interest to it, there is no way to guarantee light when taking a photo. Thatâs where the Light plug-in comes in handy. It comes with a selection of shapes that you can use to cast light and shadow. Donât worry, the image won’t look unnatural because this plug-in comes bundled with displacement options that emulate the effect of light wrapping around objects.
Compatible host program
Adobe Photoshop 7.0 and above
Adobe Photoshop Elements 3.0 and above
Apple Aperture 2.1 and above
Adobe Photoshop-compatible applications that support the Photoshop 6 API
Altostorm Rectilinear Panorama is an unique tool that corrects distortions in panoramic images, including geometric image distortions; lens, perspective and panorama distortions; and asymmetrical and irregular distortions.
Compatible host applications
Adobe Photoshop 4.0 to CS4 (32-bit and 64-bit)
Adobe Photoshop Elements 2.0 to 7.0
Microsoft Digital Image 10.0
Adobe Fireworks CS3, CS4
Corel Photo-Paint 9.0 to X4 and many more
Operating system
Windows 2000, XP, Vista
Price
Professional: $179
Home Edition: $69
Dreamy Photo
Dreamy Photo gives your photos a soft-focus look, giving them a dream-like feel.
Compatible host program
Adobe Photoshop
Operating system
Windows and Mac
License
Freeware
AutoEye
AutoEye is a useful tool for image editing if you have no clue about color correction or processes such as adjustment, curves, levels, cast removals, contrast and histograms. It can automatically improve digital images by rebuilding color detail, sharpness and image vibrancy using a totally different set of adjustment methods than Photoshop’s. It can instantly correct and enhance images.
Compatible host applications
Adobe Photoshop 7, CS, CS2, CS3, CS4
Operating system
Windows 2000, XP, Vista
Mac OSX
Price
$129
Image Doctor
Image Doctor can save you hours trying to fix a photo in Photoshop. It is a powerful tool for retouching and repairing images. It seamlessly removes blemishes and objects. It enables photo editors to unclutter poorly composed photographs with just a few clicks of the mouse. Web designers and photographers can restore and repurpose poorly compressed JPEGs, including cell phone photos. Portraits can be retouched instantly with one click, removing pimples, moles, scars and tattoos. It can restore old photos by removing dust and scratches.
Compatible host applications
Adobe Photoshop CS2 9.0.2 and above
Adobe Photoshop Elements 4.0.1 and above (Macintosh)
Bleach Bypass Professional is an advanced Photoshop-compatible plug-in designed to digitally simulate the traditional âbleach bypassâ film technique. The âbleach bypassâ technique involves partially or completely skipping the bleaching stage when processing color film. This prevents the silver from being removed from the negative, and the result is a contrast image with muted colors.
Operating system
Windows
License
Freeware and Pro
Price
$29.95
Process FX
Process FX is another tool that digitally simulates traditional film cross-processing (i.e. C-41 print film processed in the chemicals used for the processing of E-6 slide film, and vice versa). This technique creates skewed color effects that range from subtle to extreme. This plug-in allows you to reproduce that cross-processed look in software, with full control over the effect. It comes with several presets, which you can save for later use.
Operating system
Windows
Price
$29.95
PearlyWhites
PearlyWhites automatically whitens and brightens teeth. PearlyWhites can also whiten the sclera of the eye because it looks for white elements surrounded by flesh tones. It supports batch image processing for editing many images at once.
Compatible host program
Adobe Photoshop 7.0 and above
Photoshop Elements 2 and above
PaintShop Pro 7 and above
Operating System
Windows Vista, XP, NT, 2000
Mac OS X and above
License
Free to try
Price
$49.95
Photomatix
Photomatix is a tool for creating high dynamic range (HDR) photographs. Although Photoshop CS2 and later versions allow photographers to create HDR images, the tools for mapping the resulting files into something that can be displayed in print or online are primitive.
Using Photomatix, photographers can merge photographs of various exposures into one image with increased dynamic range. They can also reveal highlight and shadow details in an HDR image created from multiple exposures.
Compatible host program
Photoshop CS2, CS3, CS4
Operating System
Windows 98, ME, 2000, XP, Vista
Mac OS X
License
Unlimited trial period (with a watermark)
Price
$119Â USD
ReDynaMix HDR
MediaChance’s ReDynaMix HDR is another Photoshop plug-in that gives HDR-like effect to your images. The difference between Photomatix (covered above) and ReDynaMix is that the latter adds HDR-like effects to single images: no need for multiple exposed photographs. It has an easy-to-understand interface, with immediate previews for settings.
Compatible host program
Adobe Photoshop 5, 6, 7, CS, CS2, CS3
Adobe Photoshop Elements 1 and above
PaintShop Pro 8
Photo-Brush 4.3
Operating system
Windows
Price
$16
Xpose
Xpose is an exposure adjustment plug-in. It allows you to quickly adjust highlights and shadows with rapid preview feedback and a simple, intuitive interface. With just a few sliders, you can better expose your digital photos.
Operating system
Windows
License
Freeware
Color MegaMix
Color MegaMix is a free Photoshop plug-in that can modify the colors in any image. Using two rows of colors, eight source colors and eight target colors, this plug-in reconstructs the color space.
Operating system
Windows
License
Freeware
Wire Worm
The Wire Worm plug-in can remove wires and other unwanted objects from your images. Wire Worm comes with a set of features that distinguishes it from other tools:
Specific tool designed for easy selection of long thin objects,
Advanced color matching for seamless patches without color bleeding,
Ability to fine-tune patches after placement,
Unlimited undo and redo.
Compatible host program
Adobe Photoshop
Operating system
Windows
License
Freeware
Color! Color!
The Color! Color! plug-in gives you bold colors for your images with far less color distortion.
Compatible host program
Adobe Photoshop 5, 6, 7, CS, CS2, CS3
Adobe Photoshop Elements 1 and above
PaintShop Pro 8
Operating system
Windows
License
Free Trial
Price
$10
Face Control
The Face Control plug-in allows you to change the facial expression of people in digital photos.
Operating system
Windows
License
Freeware
Backdrop designer
With the Backdrop designer plug-in, you can transport people and objects into scenes from professional photo shoots from the comfort of your desktop. Produce backgrounds that are resolution-independent and have textures and shadows, which increase depth and makes your scene more realistic.
Compatible host program
Photoshop 7.0 â CS3
Photoshop CS4 32-bit (not CS4 64-bit)
Elements 4.0â6.0
Operating system
Mac 10.4, 10.5 Win 2000, XP Home, XP Pro Vista 32-bit, 64-bit
License
Free to try
Price
$199.00
Intellihance Pro
No more going through various steps to enhance your photos. Without any advanced Photoshop skills, using Intellihance Pro, you can easily correct your photos based on dynamic before-and-after previews. Using the improved Quick Enhance adjustment engine, you can visually compare up to 25 color-corrected variations of your photo, allowing you to easily correct digital images from any source.
Compatible host program
Photoshop CS2 v9.0.2, CS3
Photoshop Elements 4
Operating system
Mac OS X 10.4.8 and above Windows XP SP2, Vista (32-bit only)
License
Free to try
Price
$159.95
NightScope
The NightScope plug-in is a free filter for converting your day photos to night ones. NightScope works by removing color from the image and applying a slight blur that mimics the action of a camera trying to focus. You can choose the amount of grain to be applied to the image, as well as the color, by mixing the red, green and blue channels.
Compatible host program
Adobe Photoshop
Operating system
MacOS 8 and above Windows 95, 98, ME, 2000, XP, Vista
License
Free
Photoframe Pro
The Photoframe Pro plug-in gives your images an artistic and professional look through numerous frame designs and border effects. Photoframe Pro comes bundled with decorative and realistic effects, such as ones that make your image resemble negative film. Using the effects palette, you can adjust the settings of your frameâs background, border, glow, shadow, bevel, texture and edge. Frames and settings can be saved as presets and applied to other images.
The Aurora plug-in is great for creating environments for 2-D images. Using Aurora, you can create natural-looking environments with ease. It allows you to “magic up” sun, clouds, stars, water and moon, along with lightning effects and other options. It is used not just for creating natural-looking environments but also for improving areas in outdoor images. For example, you can replace a dull-looking sky with something pleasant.
Compatible host program
Adobe Photoshop 6.0 and above
Operating system
Windows 98 and above
Mac OS 9.2, Mac OS X
Price
$199
Fractalius
Fractalius creates beautiful fractal textures from images. You can also simulate various types of exotic lighting and highly realistic pencil sketches.
Operating System
Windows
Price
$39.90 USD
SymmetryShop
SymmetryShop is a powerful tool for designing patterns.
Compatible host program
Adobe Photoshop
Operating system
Windows and Mac
Price
CD-ROM with printed User Guide: $321.00
Download: $295.00
Sketch Master
Sketch Master is a manipulation tool for creating realistic hand drawings derived from photos. It consists of various tools, such as lead pencil, ink pencil, crayon, charcoal, airbrush, etc. Three layers with separate settings allow one to emulate effects of stylized fine art on all sorts of surfaces, including water paper, squared paper, laid paper, canvas, leather, crepe and rag paper.
Often, a big gap separates visual Web design and development. Creative professionals feel comfortable using Photoshop for Web design. The resulting design is then coded into an actual Web page by scripting professionals.
SiteGrinder bridges the gap between Web design and development by generating Web pages directly from Photoshop. Photoshop Type layers are converted to CSS layouts, while image layers are converted to Web graphics, and HTML code is automatically generated to display images on the website exactly where you positioned them in Photoshop. It is also bundled with the Layer Comps palette tool, which allows you to create a multi-page website from a single Photoshop document.
Nature A collection of 10 Photoshop filters, which can create fire, smoke, rust, snow, ice and more. Nature includes over 500 presets for frequently used effects.
Impact A collection of 10 Photoshop filters, which can create chrome, brushed metal, glass, bevels, shadows, reflections and more. Impact offers beautifully rendered effects for designers.
Textures A collection of 10 seamless texture generators. Textures produces a wide variety of effects, including snake and lizard skin, fur, brick, stone and wood. Graphic designers, Web developers and 3-D artists can quickly create backgrounds, skins, seamless tiles and more.
Compatible host program
Macintosh:
Adobe Photoshop CS2 9.0.2 and above
Adobe Photoshop Elements 4.0.1 and above
Windows:
Adobe Photoshop 7 and above
Adobe Photoshop Elements 2 and above
Adobe Fireworks CS3*
Corel Paint Shop Pro 8 and above
CADLink SignLab 7.5
Operating System
Windows 2000, XP, Vista
Mac OS X 10.4.0 and above
Price
$199
AKVIS Decorator
Decorator allows you to change the surface of objects in a realistic way. You can create things unimaginable even to Mother Nature.
LucisArt is image-processing software that can be used to quickly and easily give beautiful artistic effects to your images. LucisArt 3 comes in two versions:
LucisArt 3 ED (Enhance Detail) Provides greatly increased ability to fine-tune how you enhance detail.
LucisArt 3 ED/SE (LucisArt 3 ED bundled with LucisArt 3 SE (Special Effects)) Adds special effects like Winslow, Sculpture and Plaid.
Sometimes combining the two gives unique and stunning results.
Preparing photos for print can be tedious, often involving DPI, aspect ratio and cropping. Blow Up is a Photoshop plug-in that produces dramatically sharp enlargements. Blow Up uses an innovative algorithm that temporarily converts pixels to a vector representation that results in perfectly smooth, crisp edges. Simulated texture and film grain keep photos looking natural even in extreme enlargements. Over 100 presets for common output sizes are available with this plug-in and make cropping and resizing easy to do in one step. Blow Up also has a built-in batch processing tool for resizing many photos at once.
Compatible host program
Adobe Photoshop CS2 9.0.2 and above
Adobe Photoshop Elements 4.0.1 and above (Macintosh)
Icon is a free plug-in that graphic designers can use to create compelling icons directly in Adobe Photoshop without needing to use intermediate files or buy additional icon editors. It can export and import Windows icons (.ico). It supports multi-format icons, transparency, semi-transparency and other non-standard icons of different sizes and color resolutions, including monochrome, 16 colors, 256 colors, 24-bit True Color and 32-bit True Color with semi-transparency.
Compatible host program
Adobe Photoshop 5.0, 6.0, 7.0, CS
Paint Shop Pro 9
Photoshop Elements 3.0
Operating system
Windows 95, 98, ME, 2000, NT, XP, 2003
License
Freeware
FlickrShop
FlickrShop is a plug-in for uploading photos to Flickr directly from Photoshop. You can automatically resize photos, choose image formats and adjust image quality. Also add titles, descriptions and tags, and set visibility settings for public, family and friends.
Compatible host program
Adobe Photoshop
Operating system
Windows and Mac
License
Freeware (3 uploads per day)
Price
$19.95
PhotoPurify
PhotoPurify lets you match your print’s colors to your screen’s colors without additional hardware. It takes 27 measurements, using a color picker to synchronize print color and screen color.
Compatible host program
Photoshop and Photoshop Elements
Operating System
Windows and Mac
License
10-day trial
Price
$9.95
SuperPNG
SuperPNG is fast and can reduce the size of PNGs considerably. It includes some advanced options for saving PNGs: 16-bit color support, variable compression, gamma correction and meta-data saving.
Color support
16-bit
Compatible host program
Adobe Photoshop and Adobe After Effects
Operating System
Windows and Mac
License
Freeware
Timeline
Timeline is a version control system designed specifically for Adobe Photoshop files. Whenever you feel you have done something worth saving, just click a magic button on the Timeline palette in Photoshop, and your file is saved as a version on the PixelNovel server.
Compatible host program
Adobe Photoshop CS2, CS3, CS4
Operating systems
Window and Mac
License
Beta
Other Good Photoshop Plug-Ins
Many other good plug-ins are not reviewed in the list above:
Vailancio Rodrigues likes to learn new things and share them with others. He loves working in the creative field and is constantly improving his skills. You can follow Vailancio on Twitter.
Real estate is a valuable and often expensive purchase. Copious research is done by home buyers before venturing out to acquire real estate. In this day and age, gathering information about a property is typically done online, and an effective and captivating website design can make or break a home sale.
In this showcase, we’ll explore some great designs of real estate websites. We’ll also discuss some commonalities between them to tease out current trends in real estate websites.
Trends In Real Estate Websites
1. Traditional/Sophisticated Themes Versus Modern/Contemporary Themes
Property realtors want to convey the message that they’re reliable and well-established. They want home buyers to feel that they will be purchasing property from a company that’s dependable, steadfast and time-tested. That’s why most of them opt for a classic and sophisticated theme for their websites, rather than a sleek, modern theme.
2. Image-Heavy Designs
Home buyers want to see what they’re potentially buying without having to take the time to travel to a property. Real estate websites typically contain a lot of images for this very purpose.
3. Photo Galleries
Again, photo galleries allow website visitors to see what properties look like without having to leave their computer. That is why you’ll often find image galleries that feature properties that realtors currently have available.
4. Property Locator Feature
Many real estate websites provide a property locator feature for home buyers to find properties for sale in areas they are interested in.
Real estate property locator features are usually a Web form with various input fields — such as property type, property features, price range, zip code, etc. — so that you can easily narrow down your search to the exact type of property you’re looking for.
Many realtors use a third-party service or application (such as Google Maps) to enable this feature on their websites.
Showcase
Ranchline Ranchline is an excellent example of a real estate website that embodies the trends discussed above: clean and sophisticated design, image-heavy and graphic-centric, with a property search feature conveniently located in the left-hand column.
Cantera Real Estate Cantera Real Estate has a clean, captivating traditional design and presents a housing locator to visitors in the top half of the home page.
Naples Real Estate Naples Real Estate features a property for sale on the home page to highlight a piece of real estate that they’re currently promoting.
MacAllan Ridge MacAllan Ridge’s beautiful design uses an illustrated background as its defining feature.
Broadview Homes Broadview Homes ventures out of the box with a dark and very modern theme.
Hillwood Residential Hillwood Residential uses family photos in frames to give off a feeling of traditionalism and family values.
Ellicott Mack Realty Group Ellicott Mack Realty Group captures the viewer’s attention by saying, “That warm house that is ‘home,’” and right under it, showing a family having breakfast.
Riverside View Riverside View uses a light-blue color palette that evokes a feeling of modernity coupled with sophistication.
Under the Roman Sun Under the Roman Sun captivates viewers with its large beautiful images of Rome in the top half of the home page.
Monica Ruggieri Real Estate Monica Ruggieri’s design is a great example of using classic and sophisticated themes on a real estate website.
Lanikai Properties Lanikai Properties uses a bold and colorful theme to portray the nature of its properties in Hawaii.
Stone Coast Properties Stone Coast Properties has a dark background with classic and vintage design elements.
The Meadows at Historic Castle Rock On the home page of The Meadows at Historic Castle Rock, you’ll see an image-heavy, Flash-based slideshow.
Coldwell Banker Real Estate This well-established real estate agency, Coldwell Banker, has a clean Web form at the center of its design.
Belvedere Inc. Belvedere Inc. uses a dark-brown textured page background and green leaf elements to evoke a feeling of nature and environmental friendliness.
Woolshed Grove Woolshed Grove has images of families in the header.
Bluegrass Commons Bluegrass Commons captures the viewer’s attention with the promise that, “This is the one.”
The Real Estate Concierge The Real Estate Concierge’s website has a dark theme to create a sense of sophistication and affluence.
Marin Real Estate Marin Real Estate relies on the slideshow on its home page to captivate viewers.
Bellingham Real Estate Bellingham Real Estate has an engaging image of a mountain range in the header section.
San Clemente Real Estate “Clean” best describes the design of the San Clemente Real Estate website.
BATICO BATICO has a dark theme and image-heavy home page.
Oypro Oypro, which deals with commercial real estate, has a very clean design.
REALTOR.com REALTOR.com focuses on the content by using light, unobtrusive colors in its website design.
Best Plots Best Plots couples a dark theme with a clean and uncluttered design.
Mike Gagne Realtor Services Mike Gagne includes a photo of himself to create a personal, rather than corporate, touch for his website.
Kensington Lakes Kensington Lakes’ dark-themed design makes the images really pop out.
About the Author
Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.
When designing a website, the most important thing is to make it as usable and convenient as possible. On a website on which users could possibly get confused, it is best to include help elements. Help elements come in all different shapes and sizes: an entire page, a suggestion box or a quick tip. But they all have one thing in common: besides doing the obvious (i.e. helping the user), help elements provide an extra convenience that brings the website closer to that sought-after usability.
With the amount of forms, search functions and other navigational elements on websites these days, using them can occasionally become confusing for some users. Providing help elements in as many places as possible can be a great way to make the user’s experience more pleasurable. The better the experience of the user, the more likely the user will buy your product, come back to the website and fulfill the goal that the website was built to achieve.
Below is a compilation of best practices for help elements, an explanation of when to use them and a showcase of excellent help elements.
You may also be interested in the following related posts:
Convenience is key to a website, and going the extra mile to make a website more convenient can go a long way. Help pages and help elements bring that extra convenience to users. But where is a help element really needed?
1. Forms To some, forms may be confusing. The purpose of certain objects and inputs may be unclear to users, so suggestions and examples certainly should be included to help users fill them out. Another type of form element is labels.
2. Log-Ins/Sign-Ups You want users to sign up for your service, so make it as easy for them as possible. There are a number of ways to make log-ins and sign-ups more usable, one of which is to include help elements. First, as mentioned, you should include help elements within the sign-up form.
The form below is nicely laid out; it’s clean and has good explanations of each form element. It is overall a usable form with thorough help elements.
3. Checkouts As with forms, some elements of the checkout may be unclear to the user. During checkouts, money is being transferred, so it is essential that the user does not become confused in the process.
4. Searches There is not too much that’s complicated about a search box, but what to search may be unclear. Providing search examples and suggestions is a good idea. Live auto-suggest boxes are another usable search feature.
What To Include
What to include depends on the type of element and where it is being used, but there are a few guidelines to making a “helpful” help element.
Avoid the Obvious If you are going to make a help element, actually make it useful. Don’t put it there just for the sake of including it.
Quick Tips One type of help element is “tips.” Providing tips to help a user navigate content is often a good idea. Tips and suggestion boxes can be especially convenient to new users.
The following is a tip box from Google Reader. In this example, the tip is alerting users to a recent redesign. A link is provided to give users more information. This could be very useful to new users who are confused by the layout.
Here is another good example from Google Reader. It shows tips and shortcuts to provide a better user experience.
Examples In forms, it’s a good idea to include examples that will help the user fill out information. This includes showing examples of user names, email addresses, etc.
Search Tips/Suggestions With search, many websites add the convenience of search suggestions. This gives users a basis for their search and makes it much easier for them.
Take a look at the Apple search box below. There is an option to show a list of useful search tips for product support topics. Also notice that the link leading to the list of tips doesn’t get in the way of the search, but it has a convenient location for those who need help.
Password Strength Meter and User Name Check On sign-up forms, password strength meters and user name availability checks are just two small elements that drastically increase the usability of a form.
Labels To take forms to an even higher level of usability, adding labels to inputs is the way to go. Explain form inputs in as much detail as possible.
Usability Is The Key
With any website design, one strives for usability. Usability is the key factor in the success that a website achieves. Usability is simply about making things easier for your users — and help elements certainly do that. But are your individual help elements themselves usable?
Don’t Confuse the User Confusing the user contradicts the purpose of the help element, so avoid it. Only put in content that is appropriate to the element. The way you organize content within the help element affects usability. If the element contains a lot of content, use lists and highlight keywords so that the content is easy to scan.
Placement Has a Major Impact In Web design layout, placement of objects is a top usability consideration. Likewise for help elements, placement affects usability.
Many designers make the mistake of making help elements (i.e. buttons, links, etc.) very small so that they don’t get in the way of the website’s main content. The problem is that they become hard for the user to find. Sure, their small size leaves room for more content, but that won’t help a confused user. Find a balance between subtlety and accessibility.
Also remember that help elements should be optional for the user, not required. Allow the user to choose to get help, instead of immediately showing the element.
Take a look at the form below. Notice the small question mark icon to the right of one of the inputs. When clicked, this icon pops up a box containing information about the input. The icon is clean, well-placed and out of the way of the form.
Avoid Too Much Clicking, No Pop-Ups The worst thing you can do is force the user to have to click back and forth between help elements and the content on the page. This makes tools that are supposed to help the user completely unusable.
Using Graphics/Icons as Metaphors Using icons and other graphics as metaphors in Web design is quite tricky. The meaning the icon is meant to represent could easily be taken the wrong way by users. Just because you understand it, doesn’t mean that all of your users do. If easy to understand, icons can be very useful in help elements and can even serve as the help elements themselves. Graphics can be used to explain things such as diagrams, charts and directions. Just make sure the graphic or icon is easily understandable for any user.
Showcase Of Help Elements
Help elements appear on many websites, and you often don’t notice them. Here are some examples of websites with usable help elements.
Form Elements
Here are a few nicely laid out forms that contain useful and convenient help elements. The elements give examples and explanations of the inputs to assist users.
Search Elements/Suggestions
The following are usable search functions that give examples and suggestions to make the user’s search easier.
Log-ins/Sign-Ups
Finally, here is a group of cleanly designed log-ins and sign-ups that use help elements.
Further Resources
You may be interested in the following articles and related resources:
Matt Cronin is a freelance Web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials, and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon.
Progressive Enhancement is a powerful methodology that allows Web developers to concentrate on building the best possible websites while balancing the issues inherent in those websites being accessed by multiple unknown user-agents. Progressive Enhancement (PE) is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience.
PE differs from Graceful Degradation (GD) in that GD is the journey from complexity to simplicity, whereas PE is the journey from simplicity to complexity. PE is considered a better methodology than GD because it tends to cover a greater range of potential issues as a baseline. PE is the whitelist to GD’s blacklist.
That’s All Well and Good, But Why Would I Want To Use It?
Part of the appeal of PE is the strength of the end result. PE forces you to initially plan out your project as a functional system using only the most basic of Web technologies. This means that you know you’ll always have a strong foundation to fall back on as complexity is introduced to the project.
PE goes well with the principle of “Release early, release often.” By starting with a strong foundation, you are able to release projects that work and then concentrate on adding the bells and whistles at a more appropriate time.
PE projects are easier to maintain. With this focus on “first principles,” developers can concentrate on more complex sections of system interaction without worrying about the foundation.
PE is also good for your users. It gives them the security of knowing they can visit your website using any of the thousands of user-agents available to them and still interact with your content as that agent allows.
All Right, So How Do I Use It?
In practical terms, it’s easiest to break the concept of PE into different layers, each one building on the previous to improve the experience of interacting with the website.
The Layers
The first layer is clean, semantic HTML. This allows text-based, speech-based, antiquated and robotic user-agents to navigate the content of your website properly.
The second layer is CSS. This allows visual-based user-agents to display or alter the visual representation of your website’s content.
The third layer is JavaScript. This allows user-agents that are capable of using it to provide your users with enhanced usability.
A practical example
We’ll create a Progressively Enhanced list of website navigation items whose order is saved by the user. Our ultimate goal is for users to have a drag-and-drop experience that saves the menu order via AJAX. But because weâll be reaching that end goal through the principles of PE, all user-agents should be able to interact with our list in the way most appropriate to them.
The first layer
Here we have the semantic markup of the navigation. See navigation-1.html.
The navigation is laid out as an ordered list within a form so that the user can alter the order using the input boxes provided. The individual list items are given an ID that correlates to the name of the input box (for reasons that will become apparent later — for now, it does nothing but add a little weight to the markup). The labels for the input fields help the user figure out how to use the form.
Clicking “Save” will POST to the PHP page, which will determine the new order and print the results, but which could just as easily save to a database. The page is not very attractive to look at, but the important thing is that every element is in place to allow any user-agent, no matter how basic, to read and make sense of the form. Screen readers should be able to process this form easily, and keyboard navigation is functional and enabled by default.
Our save_order.php page is very simple and just echos the order of the menu items sent through in the POST.
$order) { echo 'The order for $menu_item is $order'; } ?>
Obviously, this isn’t a production script. It simply illustrates that the procedure for processing a form should be one of the first interactions in PE.
The second layer
Now, weâll add a CSS layer to give the form a bit of visual elegance. See navigation-2.html.
We took the labels out of the document flow with position: absolute and then gave them an outrageous negative margin to remove them visually while leaving them in place for screen readers (which can still read them in the original order because we’re not removing them with display: none).
We removed the numbers from the ordered list to avoid the potential confusion of having two sets of numbers for the list items.
We maintained the font size to initially be equal to whatever the user-agent has set as a preference and asked the user-agent to use its own default serif font.
We gave the individual list elements an outline and a bit of padding to see them more easily. To give the user a little more of a visual hint that the list items are movable, we also gave them a hover state that we know will be used by any user-agent that can handle it. Input boxes are neatened up a little, too, for browsers that can handle attribute selectors.
The form now looks a lot neater and is still just as functional as the first layer.
The third layer
Finally, we’ll add the JavaScript layer, which allows the user to simply drag and drop the navigation items into the desired order. We’ll use jQuery to make the process as painless as possible (both for us and our users). See navigation-3.html.
Hide the input fields because we’re providing users with a different usability experience.
Make the ordered list sortable using the jQuery UI sortable plug-in.
Update the new order each time the DOM changes. We’ll use the options and utility functions in jQuery and the plug-in to get the new order for the list items and to set the value of each text field to match each list item’s unique ID.
Send the newly updated form to the server via POST.
Parse the new_order variable that we sent via AJAX to match the values expected by the original PHP script.
Our server-level script in save_order.php needs to change very little to still work. We simply take the new AJAX posted value and parse it into the POST that the original form was looking for. This is another of the strengths of PE: by adding the basic form interactions in the first layer, it becomes much easier to add potentially complex interactions in later stages with minimal fuss.
$order) { echo 'The order for $menu_item is $order'; } ?>
Now, here’s the interesting thing about this last layer: while the drag-and-drop functionality makes menu ordering more usable for many users, it actually makes it less accessible, too. Our users now have to use the mouse to reorder menu items; those who prefer keyboard shortcuts will have a frustrating experience, and blind users would find it totally unusable (even if they could drag and drop the new menu elements, they have no way of updating the new values to their screen reader).
There are a few solutions to this problem, from as complex as rewriting the sortable jQuery plug-in to be keyboard-accessible and WAI-ARIA-compliant to as simple as providing a quick link at the top of the page that allows users to turn off JavaScript and use the more accessible version we had in layer 2.
Okay, You’ve Convinced Me…
While this is a very basic example, it illustrates the power of using Progressive Enhancement in development. By clearly establishing how a system’s interactive elements are supposed to function at the most basic level, you gain a clearer understanding of the project’s requirements. Your clients will be happy with the rock-solid results, the more accurate time-frame estimates and the easier maintenance, and you will be happy knowing you’ve provided a better, stronger product that benefits more people.
Related articles
You may be interested in the following related articles:
Over the recent months we’ve been presenting various showcases of photography – while many readers hated the showcases, most readers found them inspirational and perfect for a lousy workday’s morning. However, what we should have done in the inspirational posts is not just provide you with some inspiration for your work, but also present useful photographic techniques which can help you to achieve optimal pictures for your designs. And as requested by many of you, now it’s time to correct our mistake.
In this post we present useful photographic techniques, tutorials and resources for various kinds of photography. You’ll learn how to set up the perfect environment and what techniques, principles and rules of thumbs you should consider when shooting your next perfect photo. This round-up isn’t supposed to be the ultimate one – please feel free to suggest more useful articles in the comments to this post.
Among other things, we cover high-speed photography, tilt-shift photography, black and white photography, motion blur, infrared, night, smoke photography, macro photography, HDR, panoramic photography, RAW processing and others. Hopefully, you’ll find many of the listed tutorials and how-tos useful for your regular work.
1. High Speed Photography
Celebration Of High-Speed Photography This post is supposed to provide you with some inspiration of what can be done with high-speed photography. It also showcases some truly stunning slow-motion videos.
DIY - High Speed Photography at Home This guide describes how to capture super fast movements using ordinary camera gear and a little home made electronics. It describes the setup used, the common problems and what can be done to solve them.
Home-Made High Speed Photography (PDF) Pictures of high-speed events such as popping balloons, breaking glass, and splashing liquids reveal interesting structures not visible to the naked eye. With this guide you can take your own high-speed photos to captures these ephemeral events. A very detailed tutorial.
Quick guide to Simple High Speed Macro Photography This is a quick tutorial to get you started with high speed photography. There are tons of other resources on the web, but most of them are advanced and require special equipment. This one is simple and basic.
2. Tilt-Shift Photography
Tilt-shift photography refers to the use of camera movements on small- and medium-format cameras; it usually requires the use of special lenses.
“Tilt-shift” actually encompasses two different types of movements: rotation of the lens relative to the image plane, called tilt, and movement of the lens parallel to the image plane, called shift. Tilt is used to control the orientation of the plane of focus (PoF), and hence the part of an image that appears sharp; it makes use of the Scheimpflug principle. Shift is used to change the line of sight while avoiding the convergence of parallel lines, as when photographing tall buildings.
Another, less cost-intensive technique called “tilt-shift miniature faking” is a process in which a photograph of a life-sized location or object is manipulated so that it looks like a photograph of a miniature-scale model.
Beautiful Black and White Photography One of the most beautiful inspirational posts on Smashing Magazine, featuring over 50 brilliant works from photographers across the globe.
Black and White Photography Guide Black and white photography starts before the shot is even taken. In this article you’ll find some quick tips on what to look for to ensure the perfect black and white landscape – e.g. camera settings for black and white photography and what filters are good for black and white landscapes.
Digital Black and White This site features professional photography articles written by Keith Cooper. It covers black/white-photography-techniques, image manipulation techniques, tools, articles and camera reviews.
The Top 5 Black & White Photography Tips Five handy tips to get you going in the right direction: practice, focus on contrast, focus on texture, use color filters and more. If you want to learn more about the actual black and white conversion process in Photoshop, see the article 12 Ways to Make a Black & White Photo as well.
4. Motion Blur Photography
45 Beautiful Motion Blur Photos A showcase of motion blur photos. Motion blur is frequently used to show a sense of speed. You can artificially achieve this effect in a usual scene using cameras with a slow shutter speed. Also Adobe Photoshop can be used for this purpose, though sometimes images may look unnatural and unprofessional.
How to Capture Motion Blur in Photography Capturing movement in images is something that many photographers only need to do when photographing sports or other fast-moving events.
Photoshop Tutorials: Create Silky Smooth Waterfalls “In this Adobe Photoshop tutorial, we’re going to look at how to give waterfalls a silky smooth appearance, as if the photo were taken with a longer exposure, which would normally require the use of a neutral density filter.”
Long Exposure Photos Long exposure can be used to create very interesting photographs. It can be used, for example, to create a bright photo in low-light conditions or to create motion blur for moving elements in a photograph
5. Infrared Photography
40 Incredible Near-Infrared Photos A showcase of near-infrared photography. Near-infrared images straight out of the camera do not always look good and are usually not as dramatic and beautiful as normally captured images. Hence, a lot of post-processing is done to enhance these images.
Infrared Photography with a Digital Camera Thanks to digital photography, we can take infrared pictures whenever we please, mix them with ânormalâ ones and see the results on the spot, tweaking the settings to our heartâs desire.
LifePixel Rich collection of manuals, how-to and do-it-yourself guides.
Beyond Visible Website about IR, UV and luminescence photography. Here you can found plenty of theory and useful information about IR adaptors for flashlights. Among the resources is a huge collection of links related to invisible light photography.
Infrared (IR) A gallery with a number of amazing IR photos.
Infrared photography Huge article with a number of useful links. Nearly complete list of IR filters and digital cameras that can be updated for IR shooting.
6. Night Photography
60 Beautiful Examples Of Night Photography 60 amazing examples of night photography, created by some hard-working and dedicated photographers. Take a look at their websites and portfolios.
The Nocturnes The Nocturnes is an organization dedicated to night photography. Founded by Tim Baskerville in San Francisco in 1991, it has grown to become the premier source of information and education on night photography, as well as an international community for night photographers.
Lost America night photography Wandering the deserted backroads of the American Southwest, Troy Paiva has explored the abandoned underbelly of America since the 1970s. Since 1989 heâs been taking pictures of it… at night, by the light of the full moon.
Smoke Art Photography - An Introduction This articles features smoke art photography tips from Stoffel De Roover; it describes the typical setup, important techniques and necessary adjustments for a perfect smoke art photo.
Smoke Art: Professional’s Notes Personal photography notes from Graham Jeffery that are part instruction, and part a description of his own technique, and a few things that he has discovered along the way.
Photographing Smoke The interview with Graham Jefferey, of Sensitive Light fame (see the link above), with interesting insights into practice and handy tips and tricks. Learn how to get the smoke right, how to set up the perfect lighting and exposure and how to manipulate images digitally.
How to photograph smoke - Photography podcast This podcast talks about how to photograph smoke in a professional way. It discusses photographing different types of smoke including incense, outdoor smoke and liquid nitrogen.
25 Beautiful Macro Photography Shots A round-up of some truly revealing and inspiring macro photographs which are sure to have you marveling at the world around you.
If you donât like these kinds of photos, please move along. No complaints will be accepted.
35 Fantastic HDR Pictures This post covers 35 beautiful and perfectly executed HDR pictures. Some of them may look surreal, too colorful, even magic or fake, but they are not. Keep in mind that theyâve all been developed from normal photos; not a single image is an illustration.
HDR Tutorial HDR how-to guide, mostly related to Mac users.
My HDR Tutorial Clear tutorial on using your digital camera, Photomatix and Photoshop, by Markus Linke.
HDR tutorial Tutorial on HDR with free-of-charge software GIMP and Qtpfsgui
HDR Tutorial Tutorial on HDR with Adobe Lightroom, Photoshop CS2 and Photomatix Pro
10. RAW Processing
A raw image file contains minimally processed data from the image sensor. Raw image files are sometimes called digital negatives, because they serve the same role as negatives in film photography. But unlike negatives, these files need much more processing.
RAW vs. JPEG: The Real Story You can take the RAW image file and make all of your choices about size, color, contrast, etc., and then output it to a new original each time (which might be a JPEG). This is greatly aided by the fact that thereâs 12-bit color. The software can make easier choices and less compromises.
Digital camera RAW converter comparision This article is not an in-depth analysis of seven different programs. The goal is to give the reader an overview of each programâs features and capabilities and to provide reasonably accurate image comparisons. With Canon 1Ds Mk II, Canon 400D XTi, Canon 50D and Nikon D300 images
Choosing RAW Image Processing Software The most expensive multi-function RAW processing software is not always the best for converting the wide range of current RAW image file formats.
RAW Processing Workflow Using Phase Oneâs Capture One 4 Capture One 4 is more than just a rewritten version of Phase Oneâs Capture One LE. It offers improved speed and quality of RAW conversion, and it builds on its strengths as a RAW-processing workflow tool.
A full-range review of three of the most popular and powerful tools for RAW processing
Lightroom Presets: The Ultimate Free List “The biggest, most updated list of free Adobe Lightroom presets. Itâs true you can have too many, but this is the best jumping-off point for finding new presets. Taste as many as you like, then tell us your favorites.” Note that the presets donât work with RAW and JPEG files the same.
11. Panoramic Photography
A panorama — or panoramic photo — is usually made by stitching several pictures taken with the same camera into one.
How To: Panoramic Photography Making a panoramic photo really is only taking the pictures, stitching them together on your computer. The more effort and attention you put into the first step, the easier the second step will be and the more realistic your final photo will look.
Taking Panoramic Landscapes - The Easy Solution Panoramas have a reputation for being hard to take. Dedicated panorama cameras are available, but unless you’ve got at least $1000 to spare, you probably can’t afford one! But you can take panoramas with any kind of camera.
Digital Photography Tutorial - Panorama Stitching “Many digital cameras, even some budget-priced pocket compacts, have a feature known as “Panorama Stitching” mode. If you haven’t experimented with it yet, it is designed to help with a particular type of photograph, or rather series of photographs, in which successive shots are taken as the camera is panned across a scene.”
Building Panoramic Images in The GIMP Panoramic landscapes make for some amazing photos. There’s nothing like the relaxation and tranquility felt when gazing over the sweeping wilderness, save for the hassle of actually getting there. Using a digital camera, it’s possible to stitch photos together to simulate the expensive effects of a landscape filter.
The easy way is to use Pandora. Pandora is a plug-in for The GIMP that tries to match the edges of the photos, using a best guess at where one photo ends and the next begins.
Guide To Architectural Photography Despite architecture’s diversity there are a number of simple rules that apply in most situations, or will at least get you thinking more deeply about how you can best portray a particular piece of architecture.
Fixing photos shot from airplanes One of the cool things about getting a window seat in an airplane is that you get a unique opportunity to photograph things from a high vantage point. On the flip side, when you get home, you often find the photos look washed out and the color poor. Luckily, there is not much that Photoshop canât recover, provided that the photographs are in focus.
Walk into most professional photographersâ studios, and youâll be confronted with truckloads of lighting equipment. To the average hobby photographer, itâs enough to make your mind boggle — and make your stomach turn as you think about the cost of it all.
In this post, Iâve found 10 DIY flash and lighting hacks that put some of these lighting techniques within the grasp of the rest of us.”
Lighting simulator A great tool to plan and test your portrait lighting with one light source, with fill light if wished
FAQ: Photo Filters Optical filters function in digital photography much as they do in film work. Properly used, they can condition the light entering the camera in favorable ways — often in ways that post-processing can’t easily duplicate.
10 Top Photography Composition Rules This post reviews important rules of good photography, such as Rules of Thirds, balancing elements, leading lines, symmetry and patterns, viewpoint, background, depth, framing, cropping and experimentation.
In print design, typography is one of the more crucial aspects. Typography is essential the practice of organizing, arranging, and modifying type. The typography techniques uesed in print has a direct impact on how the reader is able to receive the image. In print, typography doesn’t have to be plain and boring. It can be beautiful, creative, and colorful. There are a number of ways to liven up typography, such as creative and original layouts, using color variations, use of fancy fonts, and much more.
This showcase will focus mostly on the layout and organization schemes. Below are about 40 different typographic layouts used in different fields of print such as brochure design, editorial design, and poster design.
You may be interested in the following related posts:
Matt Cronin is a freelance web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials, and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon.
While the Smashing Community icon set is being designed and prepared for the release, we would like to ask your opinion about the WordPress theme that you would like us to design. And here’s how it works: you tell us what Wordpress-theme you need, and then we design it together with PSD to WordPress and release it for free.
And to make it a bit more interesting, we’ll smash three commenters with original nerdy laptop sleeves. To participate, just suggest an idea for a great useful WordPress-theme in the comments to this post. Details are below.
This image was based upon the design by our friends from SoftFacade who are preparing the Smashing Magazine icon set. Thanks, guys!
How do I participate?
Participating is very easy: just post the WordPress theme you would like us to design in the comments to this post (and, if possible, what specific features it should have) – it can be anything, e.g. portfolio-design, blog-design, lifestream-blog, magazine-style etc. The theme should not be basic, but it also should not be too complex.
On the 25th of April, we’ll select the most popular ideas and requests and publish a poll in our magazine, inviting our readers to vote on their favorite theme. Once it’s done, the creative minds behind PSD to WordPress will carefully design the theme. You can keep track of updates on Twitter @smashingmag and @LachyG.
Awards
A total of three commenters will be awarded Cargo Laptop Sleeves (see images below). The winners will be picked randomly and announced on Twitter (@smashingmag) after the concept of the WordPress theme has been chosen. The winners will decide by themselves, what size and what pattern of the sleeve they prefer most.
Finally, we’ll release the theme as a free download, which you can freely use for personal and commercial use.
Smashing Magazine Is All About Our Readers
At Smashing Magazine, our readers have always been our highest priority. We respect our readers; we listen to them; we are always open to their suggestions; and we always appreciate constructive criticism. This is why we created a number of ways to interact with our readers:
We created a friendly Smashing Forum to make it possible for our community to exchange ideas and help each other in problem solving.
We are using Twitter to share useful resources and knowledge with, and get feedback from, our readers (e.g. deciding which article should appear next), and we now have almost 29,000 followers.
We are preparing the Smashing Book, in which our readers can decide what topics will be included.
And now we would like you to decide what theme we should design and release next, especially for you. We hope to get great feedback from you, and we would like to thank “PSD to WordPress” for its cooperation in this event. Please spread the word, too; we would like the design community to decide what would be most useful and interesting for designers out there!
So, what WordPress theme is it going to be, folks?
There’s just no escaping light and shadow — it’s everywhere you look. Everything you see reflects light and casts some sort of shadow. Visually, light and shadow help us make sense of what we see and help us understand texture, dimension and perspective.
So, as we try to make our designs on the Web more natural, moving and intuitive, a good understanding of light and shadow is pretty important. Here are 5 ways to better use light and shadow to polish your page designs and make them stand out on the screen.
A Quick Anatomy Of Light And Shadow
In the simple diagram below, we can see that the light source is coming from the left. The highlight is where the light is strongest, and the shadows fall on the side furthest from the light source. The appearance of light and shadow tells us a lot about the surfaces and textures in the image.
But what does this have to do with Web design, you ask?
If you’re trying to design rich, tactile interfaces and websites, light and shadow are your friends. In the same way that many classic artists made their paintings jump off the canvas, you can use light to give your designs depth and visual interest. Let’s get into it.
1. Using A Light Source
Perhaps the most important part of working with lighting is knowing where the light(s) is coming from. The light source will most likely determine where the highlights and shadows fall (although with Web design you can afford to bend these rules in places). If you’re working in Photoshop, you can use the “global light” effect so that all of your lighting effects follow the same light direction.
Controlling the source(s) of light in your designs (even if just with a linear or radial gradient) can help create atmosphere in your page designs. It can also help direct the eyes to a focal point in the design.
Examples on the Web
Campaign Monitor use a burst of light rays that conveys the feeling of a sunrise behind the design.
Icebrrg use light to submerge its website deep underwater.
Mike Precious uses more than one light source to add visual interest and to tie in with the desk-lamp lighting style.
Deaxon use a subtle light source behind its logo to give the logo visual prominence on the page.
2. Gradients
In the real world, very few things have a flat tone. Light and shade are on everything. Subtly using gradients is a great way to provide depth and makes things come to life on the screen.
The key with gradients is not to overdo them. If you’re using Photoshop, make use of layer styles for your gradients. This gives you the freedom to edit them at any point; it also means that if you resize the element, the gradient will rescale too.
Examples on the Web
nclud’s website is a lesson in subtle yet effective use of gradients to separate and organize content.
CSS Ninjas appears to use flat colors at first glance, but each colored area has a subtle gradient, which gives it texture.
3. Highlights
Highlights can help balance shadows and should be used on the edges of objects closest to the light source. Highlights are often overlooked because when used effectively, you don’t even notice they’re there. And while not suited to every situation, a tiny highlight can make all the difference in polishing an interface. The “sharper” the highlight, the shinier the surface will appear.
To really appreciate highlights, we need to zoom in a bit close. A good trick for adding highlights is to work at 200% or more, because at 100% it can be hard to see what you’re doing clearly.
Examples on the Web
Icon Dock and Newism both use a semi-transparent white line on the page element’s top edge to give it a highlight. It’s barely noticeable but adds a bucket of polish to the design.
You’ve probably seen Apple’s website already. However, you may not have noticed the lovely highlights at the bottom of the navigation items, which help make the words look recessed.
4. Basic Shadows
Like gradients, drop-shadows have become a staple of most Web designers. Shadows can really add visual depth and texture when used the right way. The key is not to overdo it.
The qualities of a shadow depend on the light direction and intensity, as well as the distance between the object and the surface where the shadow is cast. The stronger the light, the darker and sharper the shadow. The softer the light, the softer the shadow.
Examples on the Web
When it comes to online examples of drop-shadows, there are simply too many websites to choose from. When used cleverly, they can add a touch of dimension to even the most minimal design.
LinkedIn adds a very subtle shadow to the bottom of its sidebar elements to create the illusion of depth.
Google — with perhaps the hardest-working page on the Internet — still invests in the subtle use of shadow for its search page.
5. Advanced Shadows
You can do a lot beyond basic drop-shadows to give elements a third dimension. Longer shadows are a great way to change the spatial relationship between objects on a page.
In the examples below, the same Coke can is given completely different positions in space depending on its shading and shadow.
Examples on the Web
Emotions by Mike cleverly uses shadow (and light) to turn the flat page into a floor.
Superkix uses shadow to float sneakers “above” the website. The shadow moves when you resize the page, as if the light were shifting.
Sofa creates a floor on the white background with great use of both light and shadow.
Further Resources
Area for further articles and related resources.
Photoshop Cafe Tutorial on casting shadows in Photoshop.
PSDtuts Using light and shade to bring text to life.
Build Internet Light and shadows: feathering gradients in Photoshop
PSDtuts Using gradients to make light and shadow… and a coffee cup!
About the Author
Rob Morris is an Australian designer based in Japan. He freelances for clients all over the world under the moniker Digitalmash. You can follow his adventures on Twitter.
âLomographyâ is a term quite unknown to most of us, but many practice it. The name was inspired and derived from the Russian “LOMO” cameras. Lomography not only refers to photographs taken with the LOMO camera, but can also apply to casual photography taken with any ordinary camera.
The characteristics of Lomo photographs are oversaturated colors, extreme optical distortions, rainbow-colored subjects, off-kilter exposure, blurring and alternative film processing, all things usually considered bad in photography. In short, Lomography is the act of taking photographs without thinking, and ignoring the established rules of “good” photography.
Just take your camera along with you anywhere and everywhere, and start taking photographs. Sometimes it will yield amazing and creative results. Because it often does, we have collected over 35 Beautiful Oversaturated Pictures (among other things Lomography, but also other techniques), from many amateur photographers.
The names and images below are all linked to their sources, so please feel free to check out some of the other works of these very talented photographers.
Vailancio Rodrigues like to learn new things and share it with others. He loves working in creative field and is constantly improving his skills. You can follow Vailancio on Twitter.
Although often used in the wrong context, the motif of â70s Retro Rainbow designs seems to occur in many modern designs – from products designs to posters and web designs. The rainbow colors are particularly eye-catching and lively; they may provide the design with a dynamics and help to vividly convey the message of the graphic work. In past few months I came across to many artworks and new concepts of retro designs which gave me a thought to gather few for this inspirational post.
Below you’ll find a showcase of beautiful Retro Rainbow designs and resources. They range from popular Flickr photos to unconventional sources of inspiration, from helpful tutorials to useful related tools. Share your favorite sources of inspiration in the comments.
You may want to consider browsing through the following related posts:
Whatever country we live in, we’re probably all familiar with the well-known photography magazines available in our newsagents and bookstores. The UK has Practical Photography, France has Photo, the Italians have Zoom and the Americans have American Photo. What you may not know is that there are many more photography magazines that are only available online. And some of them are good, very good.
That’s the great thing about online publishing. It’s cheap, it’s easy, and just about anyone with a PC and an internet connection can take part. The difficulty lies in putting together a quality publication, something that rivals the best commercial magazines for content and quality (we hope you think that Smashing Magazine just does that!)
As an introduction to the wonderful world of online photography magazines, we put together a list of the biggest and best that we could find. You won’t find these magazines in your local bookstore, they’re only available online. From photojournalism to portraiture, from landscapes to lomography (and everything in between), you’ll find the most amazing photography and discover the work of some of the world’s best photographers, both famous and unknown. Dive in and enjoy their work.
Amazing Online Photography Magazines
The 37th Frame Dedicated to bringing the best photojournalism on the internet to its readers.
MakingRoom A magazine about the process of making art and photography.
F-Stop Features contemporary photography from established and upcoming photographers.
Vewd A documentary photography magazine continuing the tradtion of telling stories through a visual medium. Dedicated to photo essays from up and coming photographers.
Colours Magazine Colours Magazine is an online photography magazine showcasing the work of both established and upcoming photographers from around the world.
Deep Sleep A brand new quartely online photography magazine from the UK.
See Saw An online photography magazine dedicatd to work that successfully captures, represents and encourages acute observation, via the photographic medium.
Visual Candies The new Photography Webzine. Promoting emerging photographers and understanding their work. Photos from Flickr.
Creative Lens Lots and lots of wonderful photography articles.
Purpose Excellent online photography magazine from France.
Fraction An alternative outlet for publishing work by new and established photographers.
Our Eyes Photography Our Eyes specialises in people photography: artistic nudes, portraits, self-portraits, people and fashion.
Photo Eye General interest photography magazine with lots of great photography articles and book reviews.
Photoblogs Magazine Photoblogs Magazine’s aim is to showcase the best photography to be found around the web in photoblogs. The magazine hasn’t been updated for some time but the past issues are well worth checking out.
Wedpix Magazine The online magazine of the Wedding Photojournalists Association. The magazine is aimed at wedding photojournalists and anyone else interested in applying photojournalis techniques to wedding photography.
Ahorn Magazine An online magazine dedicated to contemporary photography.
1000 Words Photography 1000 Words is dedicated to highlighting the best of contemporary fine art photography in the UK and beyond.
Photography BB Magazine An excellent photography magazine aimed at beginner to intermediate photographers. Issues can be downloaded in either PDF or ZIP formats.
Arriba Magazine Downloadable magazine featuring both photography and illustrations.
Bokeh Magazine Mexican photography magazine, downloadable in PDF format. It’s in Spanish, but you can look at the photos.
VII VII Photo Agency present the most recent and best work of their photographers in their online magazine.
Bulb Magazine Brings the work of creative, but lesser known, photographers to a wide audience.
Snap Magazine Aims to showcase some of the best photography and photo manipulation, articles and tutorials.
Pixel Press PixelPress encourages documentary photographers, writers, filmmakers, artists, human rights workers and students to explore the world in ways that take advantage of the new possibilities provided by digital media.
Everywhere Mag A brilliant travel magazine relying on user submissions from the publishers of JPG Mag. They published a few issues of this magazine but since mid 2008 it has just been an online magazine.
Cultures on the Edge Dynamic quarterly magazine dedicated to supporting cultural diversity through education.
Last Click
Burn Magazine Burn Magazine is an evolving journal for emerging photographers, the brainchild of Magnum photographer David Alan Harvey. As you’d expect from a photographer of this calibre, the magazine is excellent.
Resources
You’ve read the online photography magazines, now check out some of the best print versions.
This is our fourth installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post weâll cover how you can style only the text inputs, refreshing a content-block automatically, how to avoid some positioning problems and create and use transparent div-backgrounds; we also discuss further CSS-related problems and deliver answers to a couple of quickfire questions.
If you have a question about CSS or JavaScript, feel free to reach me (Chris Coyier) via one of these methods:
Send an email to ask [at] smashingmagazine [dot] com with your question.
Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the hashtag #asksmcss.
Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. However, I hope you use the forums to post questions because that gives you the best opportunity to get help from the community.
You may be interested in the following related posts:
Since I use a CMS for generating forms, I have encountered a problem with styling of forms that are auto-generated. I can use input[type=text], which only styles the text inputs, but it does not work in IE. I wonder if there is another good way to do this.
Hi Don, as you seem to know, that selector is what is known as an attribute selector in CSS. You can use it on any element if you intend to select only elements with particular values of inputs. For example, a[title='home'] is a valid attribute selector, which will target elements like this . In the case of inputs, this is particularly useful because there are so many different types: text, submit, radio, image, etc., but they are all ’s. You may want to apply a width to text inputs but not radio buttons, for example.
As you also found out, IE 6 and below doesn’t like attribute selectors (it just ignores them). Huge bummer. One solution, which was pointed out right away in the forums, is to apply an ID or class to these inputs. You could then use the ID or class to target them in the CSS and apply your unique styling that way, without fear of affecting other types of inputs. But you say that these forms are being generated by a CMS, which seems to imply that you don’t have this type of fine-grained control.
A bit of a rough situation you have there. But there is hope, if you don’t mind a little JavaScript. If you use jQuery, it supports CSS selectors that accurately do the selecting for you, even in IE 6:
$('input[type=text]').css({ // apply styling });
Perhaps an even better solution is to use the Dean Edward’s ie7-js script, which automatically makes your CSS attribute selector just work, as well as fix a slew of other IE 6 bugs:
Making the switch from print publishing to digital publishing is a big step. But as costs for everything from paper to shipping increase, making the jump to digital is becoming more appealing to publishers of both newspapers and magazines. It’s a complicated process, though, and if not executed effectively, it can leave readers feeling alienated and disenfranchised.
Not exactly what you want, considering that it can be more difficult to attract and retain digital subscribers than to sell something outside of the virtual world. Below are some things to consider when making the switch. Research up front will prevent headaches down the road.
1. Digital Publication Formats
There are three basic formats for digital publication, each with its own pros and cons.
Flip-Books
Digital flip-book-style magazines, commonly known simply as “digital magazines,” are a great option if you’re keeping a print presence. A number of companies offer flip-book solutions, and a few different formats are available. Encore Magazine is one of numerous examples of a Flash-based online magazine with a “print” look.
Distribution of this type of magazine is generally done via emailed links as well as links from your publication’s website and from online advertisements. Rights management for this type of file is very easy to set up. You can prevent text from being cut and pasted onto other websites, control the quality that pages are print in and make it impossible to copy or save the magazine files.
The biggest advantages of this format are the similarities to print publications. Readers turn pages and view things much as they would in a magazine or newspaper in real life. Page layouts can be taken directly from the files that go to the printer. In addition to including everything that appears in the standard print publication, most digital magazines in this format can add multimedia content, either for editorial sections or advertisers.
Click-throughs are easy to track for this type of publication, making it simple to provide advertisers with reports on traffic and even views. Some providers even tell you the amount of time visitors spend on each page in addition to overall views and click-through rates. Advertisers are almost always interested in how much attention their ads are getting, and this format can make it easier to track which pages and features increase click-throughs and viewership, making premium placements and add-ons easier to sell.
The disadvantages to this type of digital magazine are mostly related to cost and server space. You’ll either have to pay a service provider, such as Texterity or Zinio, to convert your PDF files to flip-book format, or you’ll have to have a staff member on hand capable of creating it (which generally requires pretty advanced knowledge of Flash). Most service providers charge a basic setup fee, an additional per-page surcharge and often a monthly hosting fee for completed magazines.
Search engine optimization is also more difficult with flip-book solutions because most are Flash- or image-based. Long-tail search results are harder to attain because, in most cases, not all text is available to search engines.
Texterity is a flip-book creator that includes a built-in lead management system.
Zinio is probably the largest digital magazine creator and has an online newsstand where it sells subscriptions and single copies.
PDF Magazines
PDF magazines are excellent for a more budget-conscious publication that still wants to keep its print format or wants to make the publication more portable. Creating PDFs for distribution online is no more difficult than creating them for printing, and in many ways is much more forgiving.
Distribution is similar to that of a flip-book-style magazine, though depending on the size of your file, you may also be able to email it directly to subscribers. Digital rights management can be controlled through the security settings in your PDF editor.
Blanket is a PDF magazine. It offers a mix of excellent writing, colorful layouts, and good content.
One of the biggest advantages of simple PDF magazines is their ease of setup. Page files are generally sent to printers in PDF format, so setting up the same files for Web distribution is an easy-enough transition. Another advantage is cost. In all likelihood, a publication already owns the software required to create the magazine, and staff wouldn’t need additional training.
Depending on the size of the files created, hosting and bandwidth needs would not be too high. Consideration should be given to size, because publications will need to be downloaded to be viewed. Portability is another advantage, as readers can download and save the magazine or newspaper to their hard drive or any portable device capable of reading PDFs.
Newer PDF formats can include multimedia files and links, making them more competitive with flip-book-style magazines. Inclusion of multimedia files does, however, increase the overall file size and should be used sparingly to prevent the file from becoming unwieldy. And because search engines can index PDFs like any other content online, SEO is easier than with flip-book-format magazines.
PDF does have disadvantages. File size needs to be carefully monitored. In publications that are image-heavy or include multimedia, files can quickly exceed 100 MB. Image compression can go a long way to remedying this problem, but if you go too far, you’ll sacrifice quality and images won’t appear crisp on the screen. To encourage readers to download, the optimal file size is generally around 10 MB. If your target readership likely has a slower connection speed, you’ll need to be even more diligent about file size.
Resources:
Adobe Acrobat is the most fully featured PDF creation software out there.
pdf-mags.com is a distribution website for free PDF-based magazines.
Blog- and Website-Based Magazines
The best solution for many types of publications, especially ones not keeping a print presence, is to discard the print-style magazine or newspaper format and simply set up a blog or website with a news- or magazine-style theme. This is one of the most cost-effective solutions for digital publications. Often, whoever does your website design or maintenance can set up a section of your website to serve as an online publication.
Distribution is as simple as sending out an announcement whenever new articles are added and setting up RSS feed capability (generally built into blog software). Security is a bigger concern because cut-and-paste functions are enabled by default on this type of website, making it easier for others to steal content for use on their own websites. These capabilities can be disabled, however, and you may want to consider doing so.
The biggest advantages of this type of format are the costs and ease of use on both the publication’s and reader’s end. Your readers are already accustomed to reading articles online, so the transition won’t likely alienate them. Bandwidth and storage issues are no worse than for any high-traffic website. Readers can choose how to be notified of new content, either through RSS or email. Re-distribution to friends and other interested contacts is easy enough through email, and an “Email to a friend” button is a useful feature to include right at the article level.
If your publication is image-heavy, this format may not be the right solution, or at least more care will need to be taken during the initial design and setup stages. Take into account how many images you’ll want to have for each article and how important those images really are. Consideration should be given to how the images will look on screen and in the context of the overall text layout.
Resources:
WordPress is a great, free platform for creating blog-based publications.
Movable Type is another platform for blog-based publications.
This article on free WordPress templates contains a number of high-quality magazine themes perfect for online publications.
A Hybrid Approach
A hybrid approach is another option. Combine any or all of the approaches above to increase options for your readers. Providing an online flip-book that can be downloaded in PDF format gives your readers the best of both worlds. Letting casual visitors read articles right on your website is a good solution that can increase subscriber numbers, with little investment on the part of the visitor.
If you use this approach, make sure to integrate each solution fully and that your publication has a style that carries over between the different formats. Otherwise, you risk making things look like they have been pieced together after the fact.
Resources:
Magazooms provides a variety of flip-book options with the ability to download a personal PDF copy.
2. Special Design Considerations
Typography and images are the two major design elements you’ll need to reconsider when making the switch from print to online publishing. No matter which format you’ve chosen, there are distinct differences between the way something appears on screen and the way it appears in print. In many ways, online publishing is much more forgiving than print of image compression and quality. On the other hand, digital typography is, in many ways, harder to master than print typography.
Typography
A couple of major differences exist between best practices in print typography and those in digital typography. Font type and size should be reconsidered when transitioning between print and digital. Contrast between the font color and background color should also be taken into consideration.
1. Font Choice Typography is probably the most important decision you’ll make when transitioning from print to digital. Serif fonts have traditionally been used for body text in print publications because they are easier to read on paper. But studies have shown that sans-serif fonts have higher readability on screen. Switching the body text of your articles to a sans-serif font will often change the entire look of the publication and may require tweaking the overall design to maintain a unified style.
While many fonts originally designed for print are perfectly readable on screen, using fonts that are optimized for on-screen readability often comes with advantages. Georgia (serif) and Verdana (sans-serif) were both designed for on-screen use.
Compare the difference between 11-point Times New Roman…
Times New Roman 11 point Phasellus codnimentum, est eu congue dapibus, justo trtor lobortis massa, sit amet dictum massa erat in lectus. Donec turpis mauris, mattis in, consequat nec, faucibus. Aliquam auctor mattis odio. Fusce congue commodo felis.
…and 11-point Georgia:
Georgia 11 point Phasellus codnimentum, est eu congue dapibus, justo trtor lobortis massa, sit amet dictum massa erat in lectus. Donec turpis mauris, mattis in, consequat nec, faucibus. Aliquam auctor mattis odio. Fusce congue commodo felis.
Most will agree that the Georgia is much more readable than the Times New Roman example.
The same is true for sans-serif fonts. Here’s 11-point Arial…
Arial 11 point Phasellus codnimentum, est eu congue dapibus, justo trtor lobortis massa, sit amet dictum massa erat in lectus. Donec turpis mauris, mattis in, consequat nec, faucibus. Aliquam auctor mattis odio. Fusce congue commodo felis.
…and 11-point Verdana:
Verdana 11 point Phasellus codnimentum, est eu congue dapibus, justo trtor lobortis massa, sit amet dictum massa erat in lectus. Donec turpis mauris, mattis in, consequat nec, faucibus. Aliquam auctor mattis odio. Fusce congue commodo felis.
While both were designed specifically for on-screen use, Verdana still comes out easier to read in most cases.
Use Verdana and Georgia as your “gold standards” of on-screen typography; when searching for fonts, compare the readability of those to these. If a font is at least as readable as either of these, then you’re on the right track. If it falls short, you’ll have to either increase the font size or play around with contrast to make the type more legible. And remember, if you’re using a website- or blog-based publication format, you’ll need to stick with Web-safe fonts (I’d just recommend Verdana or Georgia in this case).
2. Font Size Most print publications use a 10- or 11-point font (some even go as small as 9 points). While this is perfectly legible on paper, it is often very difficult to read on-screen. And in the case of flip-book magazines, it means that even readers with excellent eyesight will have to zoom in to read articles. Increasing your font size to 12- or even 14-point type will make your articles much more reader-friendly.
Here is an illustration of how increasing the font size to 12 points makes a big difference in readability:
Compare the difference between Verdana and Georgia:
Notice how Verdana is, for the most part, still easier to read than Georgia.
If you’ve opted for a website- or blog-based digital publication, including links to increase or decrease font size is a nice feature to add. Depending on your target market, your users may not be familiar with their browser’s ability to increase and decrease type size.
The size you choose should correspond directly to the font’s complexity. If you’re using an elaborate script or grunge font (and I would recommend using these only for headers and sub-headings), you’ll want to increase the font size. Simpler fonts usually can be kept smaller.
3. Contrast and Color For some reason, a lot of people who design perfectly beautiful print products sometimes go nuts with color when they design digital products. Here are some best practices for color and contrast.
Using a very dark gray type instead of black is sometimes easier on the eyes. Even switching to a #999999 gray on a white background can make a world of difference in preventing eye strain in your readers. Going for too light and too low a contrast can have the opposite effect and make it harder to read (i.e. don’t use a #333333 gray on a white background).
While the first two are perfectly legible, the medium-gray type is noticeably harder to read for long periods of time. The light-gray font is very difficult to read and is probably best not used at all or reserved for things like image captions.
Beware of using a dark background with white type. Large blocks of white text set against a black background become very difficult to read. If you’re determined to use a combination of dark background and light text, decrease the contrast. Use a #333333 gray type on a black background, or even a #999999 background. In the examples below, notice how harsh the white text on the black background looks. When the text color is changed to a light gray or the background is changed to a dark gray, it is noticeably smoother.
Colored headings are perfectly fine to use, though fluorescent colors are often harder to read. Also, don’t use a type color and background color that are opposite on the color wheel (blue and orange, purple and yellow, red and green, etc.) Color combinations like these are almost impossible to read.
Colored body text is much trickier than colored headings. Navy blue, hunter green, dark brown and similar colors are generally fine on a white or very light-colored background. But the further you stray from black and gray and the brighter you go, the harder your text becomes to read.
While the dark blue is completely readable, the green is almost illegible. The red is readable but much more likely to cause eye strain in long passages of text. Use it sparingly.
Images
There are two major differences between print and on-screen images. The first is the color space used, CMYK vs. RGB. The second is compression and overall image size.
CMYK vs. RGB CMYK stands for Cyan, Magenta, Yellow and Key (Key being whatever ink color makes black on the paper color you’re using — usually just black itself) and is the standard color space for printed material. Using these four ink colors in different screens, you can produce virtually any color in print. RBG, on the other hand, stands for Red, Green and Blue and is what every computer monitor, television and other digital equipment uses to produce color.
RGB generally produces brighter and more vibrant colors. As the photo below illustrates, blue is especially affected by the conversion from RGB to CMYK. Shades of just about any color can be affected and will generally appear duller in CMYK.
Because images in digital publications are viewed in RGB, no conversion is needed (scanners and digital cameras both render images natively in RGB). The other major advantage is that what you see on screen is what your readers will see (barring differences in monitor calibration). This means that proofing on screen is adequate, without the need to print out individual pages.
Image Compression and Sizing Because images in digital publications are viewed on screen, they can be compressed much more.
To determine the size your image needs to be, figure out how large your image will be at full zoom in your digital publication’s format. Your image will need to be at least that size at 72 dpi. If you’re working with a digital flip-book or PDF-style magazine, you may need to increase the dpi to make the image fit on the page at the proper size. For example, if your magazine can be zoomed in to twice its normal size, you’ll need to make your images at least 144 dpi. If you can zoom in to three times the normal size, your images will need to be at least 216 dpi.
I recommend using JPEG (set to “high” quality, usually level 8 or 9) or PNG format for your image files. Be careful with compression in JPEG, however, because you’re more likely to end up with “artifacts” in your final image. PNG offers a number of advantages to GIF, particularly when it comes to options for transparency and true-color palettes. And PNG images can be compressed to between 10 to 30% more than GIF images. For the most part, unless you are repeatedly re-saving images, the format you choose will make little difference to anything other than file size.
Distribution of the magazine can be handled in different ways. An RSS feed is a great way for all of the formats discussed above. Email announcements are another method.
RSS feeds are great for magazines with more tech-savvy readerships. Your own target readership may or may not be familiar with RSS, though the format is becoming more popular and widely known every day. It’s a good option to offer across the board, though, because delivery by this method is more reliable than by email.
Email distribution can be plagued with problems. Maintaining unsubscriber lists can be a headache and come with legal ramifications if laws and regulations are not adhered to. Bulk emails always run the risk of ending up in spam or junk folders, and special programs are needed to manage large mailing lists. A number of providers out there will manage email lists and mailings for you, though prices vary and sometimes long-term contracts are required, as are monthly fees.
Getting subscribers is a bit more difficult, too. Targeted advertising is probably the most useful method, along with search engine optimization. Including both RSS and email subscription options is another way to increase your subscriber numbers. Both should serve as valid measurements when discussing subscriber rates with potential advertisers.
Resources:
ConstantContact is an email marketing platform that comes with a 60-day free trial.
iContact is another email marketing platform that includes a number of extra features.
poMMo is open-source mass-emailing software that is a good solution for those who want to do everything in-house.
4. Revenue Generation
Advertising is probably the most promising revenue stream for digital publications, as it is with most print magazines and newspapers. Subscriber-based methods of generating revenue are more difficult online unless you are dealing with a very specialized niche market. With so much free information available online, you have to offer something very unique to attract enough people who are willing to pay for your content.
More advertising options are available with flip-book and PDF magazines than with standard print magazines. Common add-ons for which you can charge are active website links, multimedia content (Flash videos, audio files, etc.) and special sponsorships. Charging for each add-on can increase revenue streams.
Generally, pricing should be based on traffic and readership numbers. Compare these numbers to the rate per thousand impressions on websites in similar niches to get a good baseline for advertising rates. Website advertisements can be done in the same formats that most other websites offer.
Don’t overlook advertising opportunities in subscription delivery. You can sell ads that appear within RSS feeds and in email announcements. Ads on the website where your magazine is distributed are another oft-overlooked opportunity for more revenue.
Article length and even paragraph length should be considered in digital publications. While PDF and flip-book formats are more forgiving (because they more closely resemble print), remember that people often tire of reading things online more quickly than in print. Allowing readers to print pages and articles can help curb this problem.
TypeChart lets you flip through, preview and compare Web typography while retrieving the CSS.
With website- and blog-based publications, paragraph and article length is more important. Keep your paragraphs shorter and break up long articles into multiple pages if possible.
Resources:
TypeChart is a great place to find readable online fonts and get their CSS code.
A collection of tutorials, resources and more on Image Optimization for the Web.
While print and Web publications have many similarities, they also have a lot of subtle differences. The Web offers more options with multimedia and is, in many ways, an easier format to work with. Take time to plan out your solution. Changing your mind after a few issues can be a costly and time-consuming decision. Good planning and full investigation of the options available to you can save headaches later on.
Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, GreenStyle Magazine, which will relaunch later this year.
Everybody likes cartoon characters. They make us happy and keep our mind tension-free. We present here beautiful and mind-blowing Cartoon Illustration Tutorials for you. This article contains a mixture of Photoshop and Illustrator tutorials. Some are intermediate level and some are advanced tutorials that include coloring processing, character sketching, pen tool tricks for tracing line art sketches, shapes processing, vector conversions and much more.
We are sure all of the tutorials in this post will be a great help to you. We have made sure to include illustrations that will guide you step by step to easily learn how to create cool and interesting cartoon characters in Illustrator and Photoshop. You will also learn the basic skills required to create your own interesting and attractive characters. We also feature some powerful tips, tricks, tools and other resources that may help you make a variety of cartoon character illustrations.
You may want to take a look at the following related posts:
Draw figures in an anime style Melissa Somerville uses drawing and inking techniques in Photoshop to create an enchanting anime-style fairy.
Color your fantasy figures Refine your Photoshop tool skills to color your characters and situate them in magical fantasy environments.
How to illustrate a cute Emo kid In this tutorial, the artist takes you through the process of drawing these cuties. The concept is based on the popularity of Emo, and you are taken through all the steps, from sketch to full-color vector using Illustrator CS3, to pen, paper, scanner and Wacom tablet.
Digital manga illustration Just as Harajuku Girls mix fashion styles, Joanna Zhou combines several drawing techniques to create a new twist on manga art.
Primitive art man cartoon This Photoshop tutorial takes you from scan to finished line art composition, step by step. It has great pointers for lighting and coloring your work. If you want to draw your own cartoon, check out this great tutorial.
How to create a killer chainsaw bunny character This tutorial shows you how to build a Bucket o’ Thought character and add a dynamic background effect. This process can be applied to any sketch you are vectorizing.
How to create a cartoon character with expressive lines Cartoon-character drawing involves a lot of techniques and styles, whether it is for one-tone characters or colorful multi-layered ones. In this tutorial, you’ll see the necessary steps for creating a multi-colored cartoon character with shading.
Create a super-happy octopus character With Illustrator, it’s really easy to create fun characters just with simple shapes and the Pathfinder panel. Use these techniques and elements to create whatever character you want!.
How to turn a sketch into a fat cat vector illustration This tutorial guides you from sketchbook to screen: a “fat cat” doodled with biro and translated into a neat vector caricature. Intermediate knowledge of Adobe Illustrator is recommended.
Draw vector-looking cat illustration using Photoshop This tutorial aims to put in the clearest light the process of creating this cat image. Step by step, the artist shows the whole process and clarifies every stage with the help of his notes.
Build your characterâs back story Danilo Brandão reveals a simple yet effective way to breathe life into your characters by developing personality and creating their environment.
PAINTING TUTORIAL This painting tutorial was done using Photoshop and a Wacom Intuos 2 (6×8) tablet.
Drunken monkey Photoshop tutorial In this tutorial, the artist explains step by step how he designed this attractive character. He reviews the entire design process, from first sketches and drafts to final touches with Adobe Photoshop.
Creating vector characters in Illustrator Characters can add a recognizable element to your work. But how do you go from a sketch to finished product? Peskimo walks you through the process.
How to create a cute bunny vector character In this Illustrator tutorial, the artist shows you how to create a cute bunny character. This tutorial makes use of simple shapes and gradients that are easy to apply to illustrations of other characters. The great thing is that you don’t have to be an amazing artist to do it!
A lovely cartoon character In this tutorial, you will learn how to draw shapes with the pen tool, perform a shading trick with the burn and dodge tools and create a perfect lighting effect.
Drawing a characterâs face in Illustrator Creating a cartoon- or human-like caricature in Illustrator is a fun and rewarding project. If you’re pretty good with the pen tool, it doesn’t take very long either. In this tutorial, the artist helps you create an elf.
Create a cute panda bear face icon In this easy-to-follow tutorial, the artist shows you how to create a cute panda bear face icon, all from ellipses (well, and one rectangle for the background). The great thing is that you can easily apply these techniques to your other projects.
Digital art tutorial This is an old tutorial but very worthwhile and interesting.
Making of a Clown In this tutorial, the artist explains the making of his “Balance Attack” creation. This picture took him about six hours to complete; take your time with it and be patient.
Creating a character In this tutorial, the artist teaches you how to create a funny futuristic character. You’ll see the basic principles of drawing, designing and coloring.
Tips And Tricks
From sketch to vector illustration A very informative tutorial. Follow the steps here to produce high-impact digital creations from hand-drawn sketches.
Draw a realistic eye for cartoon character In this tutorial, you will learn how to make a realistic eye for your cartoon character. The tutorial also explains the theory behind creating eyes and how to match colors for different parts of the eye. Of course, you can choose your own favorite color for your eye.
Photoshopâs pen tool: The comprehensive guide The pen tool appears across Adobe’s almost entire product range. Its function and behavior vary depending on the application, but by mastering it, you’ll find you work more quickly and smoothly and with better results. This guide gives you a comprehensive basis for working with the pen tool in Photoshop.
Here at the end, we have listed some of the most fun and beautiful websites to help you create a cartoon character and represent yourself in online profiles and avatars in a very interesting, cartoony way. You can use your avatar for your blog profile, Facebook, Orkut, Hi5, MySpace, Friendster or just for fun. They are very simple to do.
Cartoon Me Have a photo of yourself or a friend cartooned! Enter your details in the space provided and submit your photo.
Portrait Illustration Maker Portrait Illustration Maker provides character icons completely free of charge! Use them for your blog or social network service.
Make your own cartoon strip online Strip Generator is a project that was created to embrace the Internet blogging and strip-creation culture, helping people with no drawing ability (yeah, I’m one of them, too) express their opinion via strips for free.
Simpsonize Me Turn yourself into a Simpsons character.
South Park Studio Create your own South Park alter-ego or make one of a family member or friend! When you’re done, save it to your computer and use it on your website or print it out.
Meez Build and animate your own 3-D avatar. It’s free.
Related posts
You may want to take a look at the following related posts:
Designing a beautiful, legible typeface is hard work and takes time and patience. The type family has to convey a message clearly and effectively, regardless of the setting in which it is used. Of course, thousands of freely available fonts are out there, and some free fonts are very impressive. Yet only a few free fonts manage to beat the look and feel of a carefully designed professional typeface, one that has been painstakingly developed over years with a close attention to tiny details.
We looked around and researched recently released corporate typefaces that have been frequently recommended, mentioned or discussed on popular typography-related blogs, forums and magazines. In the end, we came up with a list of the most promising corporate typefaces and collected information about each of them. The result is this comprehensive showcase of typefaces, together with links to specimens and pricing information.
Below, you’ll find 35 brilliant new typefaces for corporate design. Please note that they are not free, but we’ve focused on typefaces that are definitely worth spending money on. This showcase should serve as a great reference for professional designers looking for some fresh, beautiful typefaces for their corporate projects.
You may also want to take a look at the following related posts:
Our section on Fonts has a number of typography-related posts.
Please be patient; this page might take some time to load.
1. Bodoni Script Pro
Bodoni Script Pro | PDF specimen | Price: â¬69+ Designed by Panos Vassillou, this typeface was designed with connected characters and capitals with calligraphic elements. Bodoni Script Pro is a 3-weight family; each font comes with 725 glyphs, including a large number of alternates, as well as 144 ornaments.
2. Geogrotesque
Geogrotesque | Gallery | Price: $50 each Geogrotesque is a semi-modular typeface with a subtle rounded finish. All the characters are based on the same formal principle, with corresponding optical adjustments to adapt the system to an alphabet for texts. ?Although the type family has a geometric or âtechnologicalâ construction, the rounded finish lends a warm appearance, making the typefaces more accessible.
3. Museo and Museo Sans
Museo | Gallery | Price: $29.95 for all five fonts Museo is a clean yet unconventional semi-serif, designed by Jos Buivenga. This OpenType font family comes in five weights, and each weight comes with support for CE languages, even Esperanto. Besides ligatures, contextual alternatives, stylistic alternates, fractions and proportional/tabular figures, Museo has a “case” feature for case-sensitive forms. The sans-serif version is a sturdy, low-contrast, geometric, highly legible sans-serif typeface that is well suited to any display and text use.
Both typefaces are lucid and versatile, great for cool-looking headlines but also effective as medium-sized text. Bonus: some weights of Museo are available for free downloading: Museo Free Download, Museo Sans Free Download.
4. Gotham Narrow
Gotham Narrow Gotham is new, economical and designed specifically for text. The typeface can be used in publications, on websites, for branding and on book covers and posters. The typeface includes four different widths, from regular to condensed, and each style is paired with a matching italic. For tables and charts, Gotham’s core styles include a âNumericâ range that contains tabular figures, fractions and extended symbols.
5. Metroscript
Metroscript | Gallery | Price: $99 for all five fonts With Metroscript, New York-based lettering artist Michael Doret has adapted his trademark hand-lettering style to the computer, creating one of the most sophisticated suites of script fonts on the market. Metroscript was successful throughout 2008 and proudly holds the title of MyFontsâ Brush Script Font of the Year.
6. Locator
Locator | PDF specimen | Price: $250 (complete family) Designed by Eric Olson in 2002/2003, Locator was originally proposed as a custom typeface for the Design Institute at the University of Minnesota. Locator is now a complete family of 12 fonts with true italic. Since its release in the spring of 2003, Locator has been used for a range of projects, including books, signage, corporate identity and even the company’s website.
7. Madawaska
Madawaska | Gallery | Price: $29.95 for all 34 fonts Madawaska, a slab-serif family, has a bit of both: some of the ruggedness of the creator’s display work, and the extensive structure of a text family. With seven weights, including some very subtle hairline versions, itâs versatile and widely usable. Madawaska comes with fractions, old-style numerals and lining numerals. This typeface may not look as solid and professional as others, but it gives your copy a modern, strong and original appearance.
8. Olicana
Olicana | PDF specimen | Price: â¬79,00 per family A beautiful typeface script in action. There are over 100 ligatures, which, when activated in a layout program, introduce more inconsistencies, making for a more convincing handwritten appearance. The typeface also has a more ornate style (swash feature), so the user has a choice between “old” and “new” styles. There are also replacement ligatures for double swashes appearing together.
As a final touch of authenticity, there are eight difference lengths of strike-throughs. When inserted after a word, these special characters cross out the “mistake.” There are also eight “splats,” including ink blobs and even partial fingerprints. The typeface comes in two weights, rough and smooth. Designed by Nick Cooke.
9. Ronnia
Ronnia | PDF specimen | Price: â¬29+ One of the most remarkable characteristics of this humanistic sans-serif is its versatility. Ronnia has been engineered mainly for newspaper and magazine applications, as evidenced by its properties: economical in use, highly legible and friendly and charming in character. Ronnia was part of the Tipos Latinos exhibition 2008 and the 23rd Biennale of Graphic Design 2008 in Brno.
10. Skolar
Skolar | PDF specimen | Price: â¬49+ Skolar is a serifed typeface that has been designed specifically for scholarly multilingual publications. The relatively large x-height puts the typeface’s proportions somewhere between a book and newspaper’s typeface. The capitals are rather low compared to the ascenders to give the typeface even more texture and space for capital diacritical marks. These characteristics were introduced to improve readability in smaller sizes. Skolar received international recognition at the Ed-Awards competition 2008.
11. Capsa
Capsa | Specimen | Price: $130 for 6 weights Capsa was inspired by the work of mid-18th-century Parisian printer Claude Lamesle. It is an original design with classical flair, expert typesetting features and full, contemporary character sets. The Capsa family is an ideal book type: highly legible with beautifully fluid swash and italic styles. The Patterns and Vignettes fonts comprise a useful collection of decorative borders and ornaments. OpenType features include small caps, ligatures, alternates, old-style figures, lining figures, tabular figures, fractions, scientific inferiors, superscript, swashes, numerators, denominators and ordinals.
12. FF Meta Serif
FF Meta Serif | Gallery The OpenType version of FF Meta Serif offers Book, Medium, Bold and Black, each including italics and, of course, small caps, OSF, LF, TF and a range of arrows and other symbols. While it stands on its own in a wide range of applications, the extra benefit is its close relationship to the original FF Meta, its sans serif sister.
13. Buffet Script
Buffet Script Buffet Script is based on calligraphy by Alf Becker, arguably the greatest American sign-lettering artist of all time. Buffet Scriptâs OpenType programming contains discretionary ligatures and stylistic and contextual alternates, all interacting with each other to allow the composition of just the right typographic look and feel. This font is best used where lush elegance is a design requirement.
14. Opal
Opal | Preview | Price: €70,21+ per typeface Opal is a text face with noble aspirations, yearning for luxury and still delivering. Because of the long ascenders that rise clearly above the capital letters, Opal should be set with generous line spacing. The typeface’s design has the attributes of the old-style Renaissance serifs, yet Opal is not based on any specific predecessors.
15. Akagi
Akagi | PDF specimen | Price: all 20 weights for $400 Akasi is a legible sans-serif family with modern, crisp, clean and legible glyphs for corporate designs and magazines. Designed by Neil Summerour.
16. Encore Sans Pro
Encore Sans Pro | PDF specimen | Price: €65,00 per weight This typeface is supposed to be a perfect alternative to any overused classic sans typeface. Encore Sans Pro is a humanistic sans-serif that projects an image of reliability, authority and competence, making it ideal for corporate applications. A functional typeface that combines utility, simplicity, clarity and style. Contemporary and elegant. Coming in OpenType, the family consists of 22 fonts (also available as separate weights).
17. Stag
Stag | PDF specimen | Price: $50+ A new slab-serif for bold, forceful headlines, with a very large x-height, extremely short ascenders and descenders, and tight spacing, for a compact, contemporary look. In 2008, three new weights were added in order to match the full range of weights offered in Stag’s sans-serif companion, Stag Sans, in the hope of adding more flexibility to this eccentric family. Designed by Christan Schwartz.
18. Comenia
Comenia | PDF specimen | Price: â¬21+ Comenia, a school typeface system, was developed as a typographic system for use at all levels of schools and universities. It introduces new aesthetic standards aimed to improve reading and writing skills and enhance the appeal of texts for pupils, students, teachers and office and IT staff at schools. It offers a clear, understandable and universal graphic tool for electronic typography, information systems and laying out primers, textbooks and educational texts and materials. The family consists of 19 fonts.
19. Router
Router | PDF specimen | Price: $49+ Router is located at the intersection of mechanical and organic. Unlike other rounded sans-serifs with simple rounded terminals, Router flexes outward, mimicking the physical process of carving letters into plastic or metal. These details function exceptionally at display size, and disappear to satisfying effect in text, creating a legible, organic and evenly colored body copy.
20. Paz
Paz | Gallery | Price: $69 for all 4 fonts. Paz, a squarish 4-weight industrial family, ranging from extreme hairline to black, is ideal for editorial headlines in which type plays a major role in the overall design. The fonts were designed by Ariel Di Lisio and digitized by Alejandro Paul.
21. Kewl Script
Kewl Script | PDF specimen | Price: â¬59,00 Kewl Script is ideal for food packaging, book and music covers, magazines and window splashes. “The idea was to go on the heavier and more playful side, but with a South American sign-letterer’s twist, rather than just good handwriting. I did some sketching, took some notes, then got busy with other projects. Some of that stuff eventually seeped into Candy Script and, to a lesser extent, the Whomp font. But it was only a matter of time before I got back to the original concept and finished it.”
22. Tisa
Tisa | Price: â¬46,00 each Designed by Mitja Miklavcic and initially created in 2006 to fulfill the requirements of an MA in Typeface Design, Tisa was primarily created for use in various magazines that are printed by either web-fed offset or gravure printing techniques. Nevertheless, the typeface can also be successfully used in other printed media, such as newspapers, annual reports, etc. Selected by the TDC judges for the Certificate of Excellence in Type Design, it was released in 2008.
Karmina Sans | Gallery | Price: $490 for 12 fonts Karmina Sans follows in the footsteps of its successful cousin. While they share stylistic features, Karmina Sans was specifically designed to be a versatile tool for editorial designers. It comes in six weights with matching italics. Each of the OpenType fonts includes nearly 900 characters per weight, with small caps, multiple numeral styles, scientific superior and inferior figures and a set of symbols and arrows. Karmina Sansâ heavy variant delivers one of the darkest and most powerful text styles available, while the text weights are a perfect companion to Karmina Serif.
25. Newzald
Newzald | PDF specimen | Price: $50 each, $150 for Basic and $250 for the whole family Newzald is a modern serif designed for the international editorial environment. Newzald’s large x-height and slightly condensed forms allow many words to the column without looking cramped or ungainly. Newzald has four weights, ranging from the brisk Book to Black. Its character set includes a wide array of accents, seven numeral sets and small caps across all styles. Designed in 2008 by Kris Sowersby.
26. Gloriola
Gloriola Std & Display | PDF specimen | Price: $75+ Gloriola is a mono-linear sans-serif, whose extremely broad range of nine cuts offers endless creative possibilities. Gloriola Std cuts and corresponding italics are suited to common typesetting needs thanks to the open character of its letters, the sufficient x-height and clear forms, as well as the full possibilities of OpenType, such as small caps, ligatures, tabular figures and alternating characters. Four extreme Display cuts are perfect for display use. Their reduced ascenders and descenders and strong forms are perfect for creating distinct yet harmonious effects when combined with other cuts of the same typeface. See also Marat typeface.
27. Haptic
Haptic | PDF specimen | Price: US $55 each The Haptic family is a sans-serif typeface optimized for use in small-sized text. It serves well in attention-seeking headlines and comes in roman and italic with seven weights each. Through its versatile character traits, Haptic emits visual warmth and draws sympathy, without sacrificing readability.
The rounded, slightly broadened stem-heads emphasize the x-height and were adopted from the common ink bleed when writing with ink and pen. The Haptic family has true italic forms available, as well as descenders for f and Ã. Designed by Henning Skibbe.
28. Mrs. Eaves XL
Mrs. Eaves XL | Preview | Price: $95 for the regular package This is a revised design of the classic Mrs. Eaves, a transitional serif typeface designed by Zuzana Licko in 1996. The main distinguishing features of Mrs Eaves XL are its larger x-height, shorter ascenders and descenders and overall tighter spacing. These additional fonts expand the Mrs. Eaves family to a larger variety of uses, specifically those requiring economy of space. The larger x-height also allows a smaller point size to be used while maintaining readability. Mrs Eaves XL also has a narrow counterpart to the regular, with a set width of about 92%, which allows for even more compact uses.
29. DIN Next
DIN Next | Preview | Price: €82+ per typeface DIN Next is a typeface family inspired by the classic industrial German engineering designs. Each of the seven weights of DIN Next ships in three varieties: Regular, Italic, and Condensed. The typeface family also includes a set of four âroundedâ fonts (DIN Next Rounded), bringing the total number of fonts in the family to 25.
The typeface can be used particularly for industrial signage. It has been tailored especially for graphic designers, but its industrial heritage makes it surprisingly functional for just about any application. The only drawback of the typeface is the simple fact that it is way too expensive.
30. Susa
Susa | Price: €39,90+ per typeface This playful typeface is ideal for corporate designs that need a friendlier, less formal look. The typeface is also perfect for educational projects because it imitates blackboard handwriting perfectly. Every connection between letters looks perfect without any alternate glyphs. The weights from light to heavy serve well in text and display.
Bonus: Klavika
Klavika | PDF specimens | Price: $99,00+ per pack Klavika is a flexible family of sans serifs for editorial and identity design. Features like small caps, true italics, multiple language support and several numeral styles make it an ideal workhorse typeface. Since Klavika was designed with identity programs and editorial design in mind, emphasis has been given to alternate numeral styles and typographic details like small caps and ligatures.
One of the reasons people love WordPress so much is its great flexibility. You can change the software’s appearance with themes. You can enhance its functionality with plug-ins. And, last but not least, you can totally unleash WordPress’ power with hacks. Some time ago, we wrote a post showing 10 Killer WordPress Hacks.
Today, let’s do it again with 10 new and totally killer WordPress hacks to make your blog stand out from the crowd. As usual, we won’t just list the hacks alone. In each entry, you’ll find an explanation of the code as well as the kinds of problems that the hack solves.
You may be interested in the following related posts:
The problem. Because Twitter has become a social media revolution, many bloggers and Twitter users enjoy sharing blog posts they have found and liked on Twitter. However, manually creating a TinyURL before tweeting can get a little tedious. As you probably know, Twitter can bring a lot of traffic to your blog, so it is in your interest to consistently provide short URLs to your readers.
The solution. To use this recipe, follow the simple steps below:
Open your functions.php file.
Paste the following code in the file:
function getTinyUrl($url) { $tinyurl = file_get_contents('http://tinyurl.com/api-create.php?url='.$url); return $tinyurl; }
Open your single.php file and paste the following in the loop:
That’s all you need. Each of your posts now has its own TinyURL, ready for tweeting!
Code explanation. The popular URL shortening service TinyURL provides a quick API that creates TinyURLs on the fly. When you pass a URL to http://tinyurl.com/api-create.php, the API immediately prints the related TinyURL on the screen.
Using the PHP function file_get_contents(), we can get it and assign it to the $tinyurl variable. The last part of the code retrieves the post’s permalink and passes it as a parameter to the getTinyUrl() function previously created.
The problem. If you often schedule posts to be published, how about displaying them in a list? This will make your readers look forward to what you’re going to publish in a few days and can help you reach new RSS subscribers. Implementing this functionality on your WordPress blog isn’t hard at all.
The solution. Nothing hard here. Just copy this code and paste it anywhere in your theme files.
Once you’ve saved the file, your upcoming posts will be displayed on your blog.
Code explanation. This code use the super-powerful query_posts() WordPress function, which allows you to take control of the WordPress loop.
The parameter used is post_status, which allows you to get posts according to their status (published, draft, pending or future). The showposts parameter is also used to define how many items you’d like to get. You can change the value of this parameter on line 4 to retrieve more or less than ten posts.
The problem. In the first hack, we noted that Twitter can bring a lot traffic to your blog. Another website that can boost your traffic stats easily is Facebook. In this hack, let’s see how we can create a “Send to Facebook” button for your WordPress blog.
Alternatively, you could use the getTinyUrl() function to send a short URL to Facebook:
http://www.smashingmagazine.com/2009/04/15/10-exceptional-wordpress-hacks/http://www.smashingmagazine.com/2009/04/15/10-exceptional-wordpress-hacks/ID)); ?> Share on Facebook
That’s all. Your readers will now be able to share your blog post on Facebook with their friends!
Code explanation. This useful hack is very easy to understand: the only thing we do here is retrieve the post’s permalink and title and send them as parameters to http://www.facebook.com/sharer.php.
In the alternative method, we used the getTinyUrl() function (created in the previous hack) to send a short URL instead of the post’s permalink.
4. Create A Maintenance Page For Your WordPress Blog
The problem. One thing I really like about Drupal is the option to temporarily redirect visitors to a maintenance page. Sadly, WordPress doesn’t have this feature. When you upgrade your blog, switch themes or make design changes, you may not want your visitors to see your blog as it is being tweaked, especially if it has design or code problems or, even worse, security gaps.
The solution. To solve this problem, we use the power of the .htaccess file. Just follow the steps below to get started.
Create your maintenance page. A simple WordPress page is generally sufficient.
Find your .htaccess file (located at the root of your WordPress installation) and create a back-up.
Replace 123\.123\.123\.123 on line 3 with your IP address (Don’t know it?). Make sure to use the same syntax.
Now, all visitors except you will be redirected to your maintenance page.
Once you’re done tweaking, upgrading, theme switching or whatever, re-open your .htaccess file and remove (or comment out) the redirection code.
Code explanation. The .htaccess file, which controls the Apache Web server, is very useful for these kinds of tasks.
In this example, we state that any visitor who has an IP different from 123.123.123.123 (which doesn’t request maintenance.html) should be redirected to maintenance.html.
By replacing 123.123.123.123 with your own IP address, you make sure you’re still allowed to browse your blog normally, while others are redirected to maintenance.html.
The problem. One well-known way of keeping visitors on your blog longer and helping them discover news posts is to display, usually at the end of the article, a list of related content.
Many plug-ins will do this job, but why not super-charge your theme by integrating this functionality by default?
Save the file, and then have a look at your blog: related posts are automatically displayed!
Code explanation. This hack uses tags to retrieve related posts. The first thing it does is get the post’s tags. If a post has tags, the first one is extracted and used in a query that retrieves posts with the same tag.
By default, this code displays up to five related posts. To change this number, simply edit line 9 of the code.
6. Automatically Retrieve The First Image From Posts On Your Home Page
The problem. Many WordPress users use custom fields to display a thumbnail on their blog home page. Of course, this is a nice solution, but how about automatically retrieving the first image from a post and using it as a thumbnail?
The solution. This hack is quite easy to implement:
Open the functions.php file in your theme.
Paste this code in. Don’t forget to specify a default image on line 10 (in case a post of yours does not have an image).
Code explanation. The function uses the global variable $post to parse the post’s content with a regular expression. If an image is found, its URL is returned by the function. If not, the default image URL is returned.
The problem. When you use thumbnails on your blog’s home page or even images in posts, having to manually resize them is boring and wastes a lot of time. So, why not use the power of PHP to do it?
The solution. To achieve this hack, just follow these simple steps:
Get this script and save it on your computer (I’ll assume you’ve named it timthumb.php).
Use an FTP program to connect to your server and create a new directory called scripts. Upload the timthumb.php file to it.
Once done, you can display images like so:
In other words, you just call the timthumb.php file and pass your image as a parameter. The same goes for your desired width and height.
Code explanation. The timthumb.php script use the PHP GD library, which allows you to manipulate images dynamically with PHP. GD is installed by default on all servers running PHP5. If you’re not running PHP5, you’ll have to check if GD is installed before using this script.
The timthumb.php file gets the parameters you’ve passed to it (image URL, width and height) and uses it to create a new image with your stated dimensions. Once that’s done, the image is returned to you.
The problem. Displaying your most popular posts is a good way to make visitors stay longer on your blog, as is displaying related posts. Many great plug-ins can list your most popular posts, but again, why use a plug-in when you can simply hack your WordPress theme to do it automatically?
The solution. Just paste the following code anywhere in your theme files (for example, in sidebar.php). To change the number of displayed posts, simply change the “5″ on line 3 to your desired number.
Popular Posts
http://www.smashingmagazine.com/2009/04/15/10-exceptional-wordpress-hacks/http://www.smashingmagazine.com/2009/04/15/10-exceptional-wordpress-hacks/get_results('SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5'); foreach ($result as $post) { setup_postdata($post); $postid = $post->ID; $title = $post->post_title; $commentcount = $post->comment_count; if ($commentcount != 0) { ?>
Code explanation. This code executes an SQL query to the WordPress database, using the $wpdb object, to get a list of the five posts with the most comments. The results are then wrapped in an unordered HTML list and displayed on screen.
The problem. The WordPress search engine system is often criticized for not being powerful enough. One of its weakest points in my opinion is that searched text is not easily distinguishable from the rest of the text. Let’s solve that!
The solution.
Open your search.php file and find the the_title() function.
Replace it with the following:
echo $title;
Now, just before the modified line, add this code:
Save the search.php file and open style.css. Add the following line to it:
strong.search-excerpt { background: yellow; }
That’s all. Better, isn’t it?
Code explanation. Once again, regular expressions are a lifesaver. The regexp parses the $s content ($s is the variable containing the searched text) and automatically adds a element around any occurrences of $s.
Then, you simply modify your style.css file to give searched text a special style and make it more visible to your readers.
10. Disable Widgetized Areas Without Editing Theme Files
The problem. Widgets are very useful, but sometimes you don’t need them on a particular page or post. Sure, you can create a page template for a particular page or even remove the widgetized zone from the code, but a much better and more elegant solution exists.
The solution. To do this, simply add the following code to your functions.php file:
Code explanation. This code first adds a filter to the sidebars_widgets WordPress function. Now every time WordPress tries to execute this function, it will execute the disable_all_widgets function we just created.
The disable_all_widgets function uses WordPress conditional tags (in this example, is_home(), but you can use any conditional tag) to disable all widgets if a visitor is on a particular page or post.
This post was written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium, who blogs about WordPress at WpRecipes, about Photoshop at PsdRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter.
Though we differ in the way we look and things we believe in, there’s something we all share: emotion. Human emotion is innate in all of us; it’s something we’re born with and something we die with. Happiness, sadness, love, hatred, worries, and indifference - these are things that constantly occur in our daily lives.
Today we share with you 40 powerful depictions of the human emotion. In these photos you’ll see celebrations, sadness in defeat, raw anger, and everything else in between that makes us what we are⦠human.
Jacob Gube is a web developer/designer and the founder of Six Revisions, a blog on web development and design. He’s also an amateur photographer, wielding the Nikon D40x DSLR camera. If you want to connect with the author, you can follow him on Twitter.
Last week we presented 8 Useful Tips To Help Your Website Convert – we discussed various rules and guidelines from marketing, such as subliminal suggestion, prevention of choice paralysis, AIDA-principle, attention guide and the Gutenberg rule. The main idea was to help designers and developers create a design that would help the site to grow and become a success the financial point of view.
As we see more and more businesses move their services online, and even more that begin their life on the Web, a greater need arises for websites that are designed and built to sell. A great-looking website may achieve the goal of shaping and delivering a strong brand, but its good looks alone aren’t enough to sell the products or services on offer. For that, you need to introduce the element of marketing.
This article presents further principles and rules that will help your site convert. Among other things, we cover A/B testing, footnotes, testimonials, feature lists, the sign-up process and typography. You may be interesting in the following related posts:
There is no reason to stop developing your website once you’ve come up with a design that youâre happy with and that you think best sells your product. Practice often differs from theory, and every market is different. Things you believe should work may not actually perform well in your context. This doesnât mean your implementation was completely wrong; perhaps it just needs a little tweaking to achieve its full potential.
You can tweak your website using what’s called A/B testing (also known as split testing). Basically, this test pits design A against design B and determines which performs better. This simple test helps you figure out things like, Which headline works better, or Where should you place the âBuy nowâ button?
Google Website Optimizer is a free tool you can use to perform A/B testing, as well as multivariate testing (testing many combinations of variables), on your website. Itâs relatively simple to use: all you need to do is provide Google Website Optimizer with the different assets you want to test, and it will randomly load them for your visitors and track which ones lead to better conversions.
2. Footnotes: The Good and the Bad Ones
Sometimes, when writing a description of your service or a product feature, you may need to disclose additional information about things like availability and price. This extra information can usually be placed in a footnote at the bottom of the page.
This is logical because you want to keep the copy on your main page as slim as possible to ensure people actually read it. If the copy has any extra information that is not relevant to the pitch, then it may break the flow and add needless weight. To add a footnote, just insert a reference number in the main text (using the sup-tag), and then place the accompanying explanation at the bottom of the page (the larger the font size, the better).
A typical feature description on Apple’s website. The little asterisk in the first line under the heading “Built for Time Machine” indicates that a technical description is in the footnote.
However, some companies use footnotes for another purpose: instead of hiding superflous technical details, they trick customers into buying something, offering services “for free” and referring with footnotes or asterisks to details of the deal. These details are almost always unreadable – because of the font size and the font color – and almost always result in misunderstandings and problems. If you or your company use footnotes for this purpose, you are definitely doing something wrong. Once your users lost trust for your company (for instance, because they purchased something that they didn’t want to buy), it will be damn hard for you to win it back.
The German company T-Mobile offers the iPhone for a sensational price: 1 Euro. Of course, the customer needs to pay attention to little footnotes that explain further costs. This is hidden marketing and disrespectful behavior towards customers.
Price details in the footnotes: unreadable blocks of unscannable chunks of text with numerous numbers and traps for customers. That’s not how footnotes should be used.
Conclusion: if you care about your customers and aim to build a solid, long-term relationship with them, you better make sure you communicate with them honestly and directly – and use footnotes properly.
3. Testimonials
Testimonials are great because they tell your visitors that other people use your product and would go as far as recommend it. Testimonials help relieve some of the risk associated with purchasing a new product or service. You have little way of telling whether something is good or not until you try it, and knowing that others have tried it and liked it helps a lot in breaking down this risk barrier.
There are some formatting tricks you can use to make your testimonials more effective. For example, read the following three testimonials:
I found Product X to be incredibly useful in my daily workflow.
“I found Product X to be incredibly useful in my daily workflow.”
“I found Product X to be incredibly useful in my daily workflow.” John Smith, ACME Corp, New York
The first testimonial doesn’t have anything attached to it — it’s just a sentence and so doesn’t look very believable. The third one on the other hand has speech marks around it and attribution to the source. Just adding speech marks already makes a testimonial look better. For best testimonials though make sure to add a source.
Business Catalyst formats their testimonials perfectly, with a picture of each client next to their quote.
Quotes from publications on The Resumator site follow the same rules.
It’s also a good idea to provide readers with case-studies that describe the process of your work and explain how customers liked it, what were the problems and how the service can be useful to solve tasks from the daily routine.
4. Scannable Feature Lists
Your visitors donât have a lot of patience. Why? Theyâre spending their time browsing your website, time that could be spent doing a myriad of other things. Time is money, and people are investing it when they navigate around your website. This means youâve got to offer something valuable in return. You must grab their attention and not let go. If they get bored or donât like what you offer, then they will click away and likely be gone forever.
Rapidweaver makes its feature list scannable by using white space, headings and images.
To address this, present your information in a way that is easiest and quickest to digest. Youâve got to slice up your marketing pitch into bite-sized chunks that are fast to read and simple to understand. You may want to give each chunk a heading or highlight areas of the text to stand out. You can also add images, such as an icon next to each chunk of text. All of this makes the text scannable. People are then able to look over the text, pick out headings and read more detailed blurbs about the elements they like.
Selling has a lot to do with breaking down barriers. These barriers are mainly the objections people imagine to buying your product, but these barriers can also be physical; for example, the sign-up form on your website. Users have to fill in forms, and that means a little work on their part. To ensure you donât lose conversions at this stage, you can do a few things.
First of all, ensure the sign-up form is as short as possible. If a field is optional, it doesnât have to be there. Users can always fill in optional fields later on their settings page. Donât make potential customers do more work than they have to; keep the form nice and short and easy to fill in.
Posterous, a blog host, doesn’t even ask you to sign up to start using it: just email your first post to its address.
Secondly, to ensure users donât make any mistakes and have to re-fill information, you can validate fields live using AJAX. You could, for example, display a green tick next to each filled-in field when it validates, or display a red cross along with a short error message if some error occurs (such as if a required field is left empty or a user name that is already taken is chosen). This allows people to see any errors as theyâre filling in the form and fix them before clicking the “Submit” button.
The Veritocracy sign-up form isn’t even a separate page; it’s a form that pops up as a modal window and requires only four fields to be filled in.
Lastly, you can simplify the page layout of the sign-up form by removing any irrelevant navigation elements. Your objective here is to get the visitor to sign up rather than navigate to other sections of the website, so you can remove any extra navigation to help the user focus on the task at hand.
6. White Space Is Not Lost Space
Have you ever seen those cheap ad booklets one gets in the post, all full of bright colors, big text and pictures, every millimeter used to display a latest offer or new deal. The designers try to fit everything theyâve got into the booklet and make sure no space is wasted. Cramming everything youâve got into a limited amount of space isnât always the best approach, though, and in most cases itâs the wrong approach online.
Perfect use of spacing and white space in a magazine-layout on Good.is. The space makes the content look clean, attractive and readable.
White space, the empty space around and between various pieces of content, is important. It gives your design air to breathe by separating elements. This separation is valuable because it allows people to focus their attention on individual areas of the page, be it the navigation, a feature description or the websiteâs description.
When everything is stuck together, it becomes more difficult to distinguish between its components and thus more difficult to focus on and thus less scannable. You can read more about the proper use of spacing in Liam McKay’s excellent article How to Spot Quality within Web Design: Examples & Tips.
7. Set your type properly
The way you set your type has an effect on how well your copy performs. Good typography can give your copy the punch it needs. Use large font sizes to make headings stand out. If youâre selling to an older demographic, ensure all font sizes are large enough to read easily. Small fonts may look great, but if theyâre difficult to read, they will turn people off.
Also, ensure the text and its background color have enough contrast. Black on white is a good start. Inverted color schemes (light text on dark background) do not work so well in most cases, especially if your audience is used to more traditional media (e.g. newspapers), where black on white is the standard.
The redesigned 37signals website features eye-catching typography that takes advantage of big font sizes, varying colors and high contrast.
To focus people’s attention on certain elements, you can decrease the contrast of surrounding elements by using something like dark gray on white (instead of black on white) to fade them out a little. Use stronger contrast for the stuff you want people to notice. One good technique is to use the highest contrast for a feature heading or brief description, and then a lower contrast for the detailed blurb below. The aim here is to make the page scannable: let people glance over it and settle their gaze on the text thatâs most important and quickest to digest.
To Conclude
Design definitely has a role to play in selling the product or service on your website, though it’s more of a support than a lead role. Design should reinforce the copy: help it stand out and be readable. Choose images that send the message you want. Ask yourself what purpose each image on your website has. If it has no purpose, why is it there? Use white space and typography to give your copy punch. At the end of the day, though, you have to make sure your content actually works, because a great design alone won’t be enough to close the sale.
About the Author
Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability.
The skateboard has been a favorite medium of artists for decades. Not only does it provide a sturdy surface to paint on, but it offers a great way to have your artwork be seen in the community. Skateboarding culture, which was once looked on as a short-term fad for rebellious teens, has established itself in society.
A wide range of artists have opted to put the canvas aside and go with the unique shape of the skateboard as a way to get their artwork out. In this article, we showcase 40 amazing skateboard designs that blend various design styles. Whether you used to skateboard, currently skateboard or have never stepped on one, these skateboard designs will surely lend inspiration.
Beautiful Skateboard Designs and Resources
BRC The Black Rock Collective is a design collective of over 40 artists. By letting each person contribute a different style, they come up with a great variety of designs.
Drez Impressive skateboard designs by the freelance designer and illustrator Drez were brought to life by exporting his vector artwork for creation as plotted vinyl graphics. His other deck designs feature a collection of fantastic illustrations with heavy textures and a variety of graphics.
Andrew Graves Andrew Groves is an illustrator, artist, maker of small things and creator of beasts. His designs are always unique and recognizable, with original illustrated characters and motifs.
Calavera Calavera exhibits a great comic-book style in its designs. They use great illustrations, and a lot of their designs feature a vintage look and style.
J3 Concepts The skateboard designs below exhibit a brilliant, playful style. Each design uses great colors to achieve a fun style.
DolceQ No one said design couldn’t have a little edge to it. These designs show that even edgy designs can be turned into beautiful artwork.
Electrik Suicide Electrik Suicide uses great mixed-media designs to create a unique style. His designs feature images that really let the mind penetrate the depths of the board.
Mike7 Mike uses a brilliant array of colors to make his designs really pop. His blending of colors gives his artwork a unique style.
No Pattern Artist Chuck Anderson sharply mixes together everyday photographic realism and colorful, fantasy-tinged surrealism, creating a rich and vivid portrait of a world only imagined.
Go Media Go Media is a design group that creates mind-numbing designs. Having a large body of experience designing in different media, they’re able to easily turn the skateboard into an amazing work of art while keeping its purpose and culture at the forefront.
MWM Graphics MWM uses a vivid mix of colors, shapes and patterns to create some truly awesome and unusual boards. With mixtures of colors rarely seen together, his skateboards have an altogether distinct feel.
Further Resources
You can find more beautiful skateboard designs in these showcases:
30 Cool Vector-Illustrated Skateboard Decks Here are 30 very cool examples of vector skateboard deck art with info on the artists behind them, plus some resources to help you get started creating your own skateboard deck art.
Joomla is one of the most powerful, robust and feature-rich content management systems out there. Besides being open-source, Joomla is capable of some really stunning designs through the use of modules and built-in display customizations. Below, we present a list of 20 of the coolest, slickest, most eye-catching Joomla template designs.
Mynxx | Demo | Support This theme incorporates the popular Joomla ecommerce / shopping component, Virtuemart. This integration is applied in a variety of platforms, such as modules, a custom virtuemart theme and template coding. The custom Virtuemart theme allows us to override the core output, which results in a more seamless integrated with the Virtuemart shopping component.
Akiraka | Demo | Website One of RocketTheme’s finest templates. The fully transparent design gives you complete control over the color of the website.
Lightfast | Demo | Website The definition of a light and fast template. Joomla is powerful, but it is also big. Because of all the possible features to take advantage of, templates are often bloated with tons of code. Lightfast is Joomlashack’s response to this problem. The entire file is only 13k and is SEO optimized right out of the box. Template costs $39.95.
Simple Praise | Demo | Website A very smooth rotating content module and lots of module positions makes this a very versatile Joomla template. Club membership costs $75 for 1 year.
Social Praise | Demo | Website SocialPraise is built for community collaboration. It is templates like this that really show what Joomla! can do as a content management system. SocialPraise integrates completely with the most popular Joomla community building components like Community Builder and Fireboard forum. Club membership costs $75 for 1 year.
NewsPro | Demo | Website A sliding content module crams headlines into this easy to navigate template. The small body text and expansive menu suggests this template would work well as a magazine layout. Club membership costs $99 for 1 year.
Periphelion | Demo | Website One of the best grunge-themed templates for Joomla. Multiple color styles make this template incredibly versatile.
City Portal | Demo | Website A clean, smooth template, perfect for a magazine or portal.
News Link | Demo | Website As the name states, a great news template with built-in news rotator with tons of features.
