Glossy web 2.0 button

Glossy web 2.0 button
Learn how to make a nice Web 2.0 style Glossy Button using Layer Styles, also how to make a rollover.

Learn how to make a nice Web 2.0 style Glossy Button using Layer Styles, also how to make a rollover.

(more…)

Import a Photoshop file as a composition

Import a Photoshop file as a composition
In this short video tutorial, learn how to import a Photoshop file into your After Effects 7.0 project, while maintaining the PSD file’s layers and spacial integrity.

Photoshop CS3 does not respond when you switch between applications

Photoshop CS3 does not respond when you switch between applications
Menus and document windows in Adobe Photoshop CS3 on Mac OS do not respond to user input when you switch between applications.This issue can occur when you switch to another application, such as Safari or iTunes, and one of the following conditions is present...

Crash when you run Web Photo Gallery on Mac OS X v10.5 (Photoshop CS2, Photoshop Elements 4)

Crash when you run Web Photo Gallery on Mac OS X v10.5 (Photoshop CS2, Photoshop Elements 4)
...

Photoshop Elements 6 For Only 49.99 - Crazy Deal!

Photoshop Elements 6 For Only 49.99 - Crazy Deal!
There's a new even better crazy super deal at Amazon.com right now on Photoshop Elements 6 for Windows. You can purchase it for $49.99 by using their rebate coupon. The regular price for this software is $99.99. Here's the link to the Photoshop Elements 6 super special best price deal. You'll see a link to the coupon under the already discounted price. (posted by Jennifer Apple for www.PhotoshopSupport.com)

Error "serial number not valid" when you try to enter a serial number into the Photoshop Elements or Premiere Elements trial

When you enter a serial number into the trial version of Adobe Photoshop Elements 6 or Adobe Premiere Elements 4, a red X is displayed at the end of the serial number field.� If you click the Next button, the following message is displayed: The serial number you entered is not valid. You purchased the boxed copy of the software or an electronic software download from the Adobe Store. You purchased the boxed copy of the software or a... Read More

Animated GIF files do not open with editable layers in Photoshop CS3

... Read More

Personalize your Lightroom workspace by changing the Identity Plate

In the Photography business, image is everything. Now you can personalize the Photoshop Lightroom workspace with your name or studio name. Read More

A Small Study Of Big Blogs: Further Findings

A Small Study Of Big Blogs: Further Findings

Last week we presented the first results of our study of top blogs. As promised, this week we publish the second part of the survey, including further findings and problem solutions we have found out during the study. In the first part we discussed layout design and typographic settings. What remains to be covered are the navigation design, information architecture, advertisements and functionality (RSS-feeds, tag clouds, pagination etc.).

Reminder: since we wanted to make the survey as objective as possible, we used Technorati Top Blogs and analyzed 50 most popular blogs which appear there. We have identified important design problems and considered solutions for each of the problems separately.

We have posed 30 questions which we wanted to to answer with our blog survey. Below we present further findings of our survey of popular blog designs — the second part of the analysis of 50 popular blogs according to Technorait's Top 100.

Please notice: the results presented below should not be considered as guidelines for an effective blog design. They are supposed to give you the intuition of which solution may be better than the other one. Still it is useful to know what big players do and, more importantly, what they don't do.

Last week we presented the first results of our study of top blogs. As promised, this week we publish the second part of the survey, including further findings and problem solutions we have found out during the study. In the first part we discussed layout design and typographic settings. What remains to be covered are the navigation design, information architecture, advertisements and functionality (RSS-feeds, tag clouds, pagination etc.).

Reminder: since we wanted to make the survey as objective as possible, we used Technorati Top Blogs and analyzed 50 most popular blogs which appear there. We have identified important design problems and considered solutions for each of the problems separately.

We have posed 30 questions which we wanted to to answer with our blog survey. Below we present further findings of our survey of popular blog designs — the second part of the analysis of 50 popular blogs according to Technorait’s Top 100.

Please notice: the results presented below should not be considered as guidelines for an effective blog design. They are supposed to give you the intuition of which solution may be better than the other one. Still it is useful to know what big players do and, more importantly, what they don’t do.

3. Structure

Information design is usually even more important than visual design. The structure and hierarchy of the content (the way the content is presented), has a tremendous impact on how visitors perceive the presented information and how well they can scan it when looking for some specific information. In the context of the information architecture navigation plays the most important role.

3.1. Navigation menu: top, left or right?

Few years ago, before the wave of blogs has overflooded the Web, it was an unwritten rule to place the navigation menu on the left-hand side of the layout. Today it definitely does not hold for top blogs.

We have found out that

• 58% use right-hand side (vertical) navigation
  (Scobleizer, TPM, CrunchGear, Neatorama, Google Blog, DailyKos, Engadget),
• 52% use a primary horizontal navigation at the top (often combined with a right-hand side secondary navigation)
  (A List Apart, Google Blogoscoped, Dooce, GigaOM, TreeHugger, Smashing Magazine, Mashable, ReadWriteWeb, Ars Technica, TechCrunch, Huffington Post),
• 12% use left-hand side (vertical) navigation,

Actually, visitors do not care whether your navigation menu is placed on the top or in the sidebar. As long as your usability tests confirm that most first-time visitors can easily identify the menu and use available options up front, you are on the right side. So essentially you can use any of the solutions presented above.

ReadWriteWeb uses a primary horizontal navigation at the top of the layout.

In fact, visitors aren’t really confused when the navigation design doesn’t completely follow conventions. However, it is designer’s task to ensure that the navigation is clear and unambiguous — independent of how exactly it is designed.

A number of users prefer the right-hand side navigation, because from the ergonomic point of view it is more pleasant to use. Since 70-95% of people are right-handed, it is sound to assume that the mouse pointer usually reseats on the right half of the window.

Why? The scroll bar is placed to the right of the browser window. Hence, if the mouse doesn’t have a wheel users need to use the scrollbar more often than browser-buttons in the toolbar of the browser. Since scrollbar is necessarily used on most (or at least many) of sites the mouse pointer is likely to be close to the scroll bar. Consequently, the required motion path to the right-hand side navigation is smaller than the path to the left-hand side navigation.

3.2. How many posts on the start page?

From the user’s perspective there is nothing worse than an extreme cognitive load which comes from the information overload on some site. As Smashing Magazine we know exactly how hard it is to find the optimum between extensive article and information overkill.

When too much information is presented to the users, they try to escape the cognitive load — they bookmark the page for future visits (and never visit it again) or simply close the browser window, because they can’t cope with the information presented to them.

Presenting an optimal amount of content is crucial to keep your visitors on your site and, more importantly, make sure that they’ll come back to your site.

• 28% have 14 - 18 posts on their start page
  (Tuaw, Slashfilm, Gizmodo, TMZ, Lifehacker, ArsTechnica),
• 26% have 10 - 12 posts
  (ProBlogger, TechCrunch, Dooce, ReadWriteWeb, CrunchGear),
• 14% have 20-26 posts
  (ValleyWag, Seth Godin, Search Engine Land),
• 10% have 2 - 6 posts
  (A List Apart, Smashing Magazine, CopyBlogger),
• 10% have 27 - 35 posts
  (Kottke, Boing Boing, ThinkProgress, Neatorama),
• 8% have 7 - 9 posts
  (GigaOM, Mashable, TreeHugger),
• 2% have 36+ posts
  (Andre Sullivan, 50 posts).

Ars Technica has excerpts of 18 posts on its start page. 28% of top blogs have 14-18 posts on their start page.

3.3. Are related and popular posts displayed?

We couldn’t identify a trend toward displaying links to the articles related to the post currently viewed by the visitors. 54% of top blogs display related posts (GigaOM, CopyBlogger, ProBlogger, ReadWriteWeb, Mashable, Engadget, TreeHugger), while the rest does not display them (Dooce, TechCrunch, BoingBoing).

Only 48% of top blogs display popular posts. Among them are Zen Habits, CopyBlogger, DailyKos, Mashable, ReadWriteWeb, Smashing Magazine and Huffington Post. Most recent comments are displayed by 16% of the blogs (ReadWriteWeb, BoingBoing, TreeHugger, TMZ, Tuaw). However, the majority of the blogs doesn’t present recent comments on the start page at all.

GigaOM belongs to 54% of top blogs that in each article display a list of related posts. In fact, the blog displays links to related articles twice.

3.4. What information is placed in the footer?

Most web-sites use footers to present rather unspectacular information such as terms of service, W3C-hints, help, copyright and links to the “about us”-page. However, there are more options available (see Footers In Modern Web Design: Creative Examples and Ideas). Interestingly enough, our survey provides some useful ideas for design of a footer as well.

The footers may contain

• copyright, legal, privacy, terms of service, terms of use (90%),
• link to the “about us”-page (40%)
  (GigaOM, TMZ, ProBlogger, ReadWriteWeb, Ars Technica),
• link to advertising-page (38%)
  (Slashfilm, Dooce, GigaOM, ReadWriteWeb, Gizmodo).
• link to the contact information (30%)
  (Kottke, GigaOM, ReadWriteWeb, ProBlogger),
• links to RSS-feeds (22%)
  (Slashfilm, Ars Technica, BoingBoing),

BoingBoing has navigation options as well as links to RSS-feeds and e-mail-subscription in its footer.

• link to FAQ or Help (22%)
  (Gizmodo, ArsTechnica, Andrew Sullivan),
• search box (14%)
  (Dooce, Tuaw, Engadget),
• link to the top of the page (10%)
  (TreeHugger, Zen Habits),
• link to the start page (10%)
  (Kottke, CrunchGear, Joystiq, TPM),
• link to the site map (8%)
  (Andrew Sullivan, Wired, Tecaucus @ NY Times),

Joystiq’s footer is neither beautiful nor effective. Less is sometimes more. The image under the footer is an ad.

44% of the blogs display more than just a simple copyright-disclaimer and few links. For instance, Zenhabits (with some kind of a site map) and Netorama (with further navigation options). Problogger additionally presents a link to the about-page. 58% use a “standard” approach which often is chosen to be rather minimal (e.g. Techcrunch). The rest uses no footer at all.

4. Advertisements

In many cases, particularly when considering top-blogs, advertisements are necessary to keep the site alive, pay bills for traffic, support the editorial team and hence enable the publishers to actually publish the content. And most users are willing to have disturbing and colorful ads next to the content if they get the information they are looking for. But where is the limit and how do big blogs display ads on their sites? And what are users used to? Let’s find out.

4.1. How many ads per page?

Bad news: the blogosphere is heavily infected with ads. Only few sites don’t contain any advertisements at all and in most cases there are more than 2-3 ad blocks per page. Usually blogs combine sponsor ads with text link advertising similar to Google AdSense. Disturbing contextual advertising (underlined links with pop-ups) could be found on 12% of the sites.

The number of advertising blocks on an article page is usually the same as the number of blocks on a start page or even slightly higher. Reason: many publishers tend to use text link advertising such as Google AdSense in the articles or below the posts. Further findings:

• on average 5,84 advertising blocks per start page
  (Mashable has most ads (20), TechCrunch wins the second place (15)),
• on average 5,96 advertising blocks per article page,
• 68% of the blogs use Google AdSense
  (among exceptions: Kottke, Scoble, Joystiq, Tuaw, CopyBlogger, Valleywag, GigaOM),

The award for the widest ad block goes to Kotaku with an 1000px ad block in the middle of the page.

4.2. Are ads displayed in the content area?

In the content area of the layout ads are usually placed directly below the post. We have observed that advertising in the middle of the post is still popular, however it is used (relatively) rarely.

According to our findings,

• 76% had no ads in the articles (but might have ads below or above)
  (Dooce, A List Apart, ReadWriteWeb, Mashable, TechCrunch, BoingBoing),
• 44% had ads below the article and before the comments
  (ProBlogger, Zen Habits, Engadget, Smashing Magazine, Tuaw, CopyBlogger, GigaOM),
• 18% displayed ads within the content (Huffington Post, Yanko, PerezHilton, Slashfilm, Search Engine Land),
• 6% displayed the ads directly below the headline and before the content of the article
  (Smashing Magazine, Neatorama, Yanko),

4.3. Where are ads placed in the layout?

Apart from the content area one usually expects ads… well, everywhere: at the top, on the right-hand side and even at the bottom of the page. Indeed, on 12% of the reviewed blogs ads could be found everywhere — on the top, on the bottom, on the left and on the right of the main content. That’s not good. But, apparently, users got used to it and stubbornly ignore disturbing ads consuming the content offered to them.

Further findings:

• there are ads on the right-hand side (88%)
  (GigaOM, CopyBlogger, Engadget, TechCrunch, Smashing Magazine),
• there are ads on the top (42%),
  (Gizmodo, Talking Points Memo, Autoblog, TreeHugger, TMZ, PerezHilton),
• there are ads on the left-hand side (34%)
  (Lifehacker, Mashable, Gizmodo),
• there are ads on the bottom (24%),
  (Andrew Sulivan, Tuaw, Wired).
• there are no ads (8%),
  (Google Blog, Think Progress, Seth Godin).

5. Functionality

To achieve its primary goals, design needs to be not only user-friendly, but also functional. All important functions should be available and clearly visible and the user must have a simple intuition of what actions are required to actually use them. For instance, new visitors should know up fron where is an RSS-button, where are social buttons, where the search box is placed and how to contact the owner of the blog.

5.1. Are social buttons and icons used?

Social icons have managed to become popular, yet they are far away from becoming a standard. Icons are used slightly more often than simple text links. Web-services such as Addthis which hide a number of popular social buttons behind one single “social” button and display them once this button is hovered are quite popular. Advantage of this approach: content area remains clean and provides a good overview of available option. Disadvantage: some users may not find the way to vote for the story on a social network.

According to our findings,

• 54% of top blogs use social icons below the post
  (GigaOM, ProBlogger, Mashable, Ars Technica, BoingBoing, ReadWriteWeb),
• 38% don’t use social icons
  (Dooce, Google Blogoscoped, Scobleizer, Political Ticker),
• 8% use social icons above the posts (Smashing Magazine, TreeHugger, The Huffington Post).

Netorama uses social buttons embedded in a bubble. RSS-feed and e-mail-subscription are available as well.

5.2. RSS-feeds: position and visual appearance

Since an RSS-button is probably the most important design element which binds visitors to the blog, it should be given a prominent position in the site layout. In fact, there was a good reason behind designing large, glossy RSS-buttons in the Web 2.0-era: these buttons needed to be visible at the first glance.

Therefore it’s not surprising that RSS-buttons still (usually) can be found in the header of blogs. In fact, only 38% of top blogs display an RSS-button in the header, while 28% present it in the top area of the sidebar. The middle area of the sidebar (8%), bottom of the sidebar (14%) and footer (8%) are used as well, but they are not as popular as the upper area of the layout. However, here RSS-buttons often appear additionally to the button at the top of the site.

It’s interesting to notice that only 66% of the sites used a standard RSS-icon to indicate their feed, while the rest used simple text links for the same purpose.

GigaOM has two RSS-feeds and an alternative e-mail-subscription.

Regarding the number of available RSS-feeds: we’ve found out that 64% of top blogs have only 1 main RSS-feed. Often comments-feeds and tags-feeds are available as well; however, it seems that only few blogs actually offer multiple channels (e.g. feeds for some specific topics). In 56% of the cases publishers were offering an e-mail-subscription as an alternative to RSS-feeds.

24% publicly display the number of RSS-readers, usually via Feedburner. Wordpress-users can consider Feedcount as a handy alternative and define their own designs for the button. However, here Feedburner is required as well.

Zenhabits displays the number of site’s RSS-subscribers.

5.3. Tag clouds in use?

Tag clouds provide a good overview of the popular topics covered on a blog and their weight throughout the blog. However, 90% of top blogs don’t have any kind of tag clouds and present standard navigation options instead. According to our intuition there is often just no space for a tag cloud which is why when a tag cloud is used at all then it is rather small and compact.

Among sites who have a tag cloud are The Huffington Post, ReadWriteWeb and Joystiq. You can find more information about tag clouds in our article Tag Clouds Gallery: Examples And Good Practices.

5.4. Pagination in use?

Surprisingly, pagination was used only on 22% of the sites we’ve reviewed (among them are Dooce, GigaOM, Mashable, ReadWriteWeb). In most cases a standard navigation with “next” and “previous”-links is used (60%).

Pagination offers a lot of advantages as it shows to the visitors how much content is available and allows them to quickly jump to older articles. Our article Pagination Gallery: Examples And Good Practices provides creative examples of what can be achieved with pagination.

Some blogs also use calendar navigation (6%, Thecaucus, Andrew Sullivan) or an archive section instead (12%, A List Apart, TPM, The Huffington Post)

Pagination on Gigaom

An unusual navigation on Treehugger. Instead of pagination and usual next-prev-navigation, the site displays articles which appear on the next and on the previous archive page.

The Caucus with an archive instead of pagination and next-prev-navigation.

5.5. Where to place the search box?

Only 62% of top blogs have a search box in the right upper corner of the site layout. Among them in 58% of the cases the search box is placed in the header. The rest of the blogs place it in the top area of the sidebar. Search box in the middle of the sidebar and in the lower part of the sidebar is less popular (16%). Footer as the only place to display the search box is used only once (Dooce) and Kottke doesn’t have a search box at all.

Dooce displays a search box only in the footer of the site.

5.6. Where to place the link to the contact page?

Most top blogs place the link to the contact page in the sidebar. Usually this link is among further navigation options available in the right-hand side navigation menu or in the left-hand side navigation menu. Sometimes icons are also used (particularly the e-mail icon) to indicate the purpose of the link.

• 52% of the blogs place the link to the contact page in the sidebar (Engadget, TMZ, DailyKos, Smashing Magazine),
• 40% place the contact link in the header
  (A List Apart, Dooce, CopyBlogger, ProBlogger, Ars Technica, Tech Crunch),
• 30% have a contact link in the footer
  (ReadWriteWeb, ProBlogger, Mashable, TMZ),
• in 4% of the cases the link to the contact form was hidden in the about-section (TreeHugger).

It’s worth mentioning that most blogs provide readers only with a “contact e-mail” (64%), while only 28% have a contact form which needs to be filled in online. 8% offer both a contact form and the e-mail (Yanko, TechCrunch). And Zen Habits asks its readers to comment on a blog’s entry to get in touch with the blog’s owner.

5.6. Are top blogs standard-conform?

Actually, before conducting the survey we have assumed that the content would be more important than design for most blogs. However, we didn’t expect that only 4% of the top blogs are actually standard-conform.

Apparently,

• 96% of top blogs are not standard-conform,
• 8% of top blogs have over 500 errors
  (Ben Smith’s Blog, Neatorama, Search Engine Land),
• 28% have 200 - 499 errors,
  (BoingBoing, ProBlogger, Google Blog, Engadget),
• 24% have 100 - 199 errors,
  (TreeHugger, Mashable, ReadWriteWeb, Gigazine, TUAW),
• 22% have 50 - 99 errors,
  (TechCrunch, CopyBlogger, Dooce, Ars Technica, Lifehacker),
• 10% have 1 - 49 errors,
  (Kottke, GigaOM, AutoBlog, Google Blogoscoped),
• 4% have 0 errors
  (e.g. A List Apart).

Neatorama is not valid XHTML 1.0 Transitional. That’s no wonder — the page is built with tables.

The awards for most errors goes to Ben Smith’s Blog (2286 errors, no Doctype definition), Neatorama (1428) and Search Engine Land (1116).

There is a simple reason for “invalid” HTML-code: from the perspective of Web standards, ad-servers are nothing but horrible. They almost never produce a valid code which is why most blogs (which need to have advertising to keep them alive) are almost never standard-conform. The publisher often has no choice and needs to compromise the quality of the code with the revenues resulting from “dirty” source cofe of ad-servers.

Bottom line

Let’s conclude survey results with a brief overview of the main findings. Please keep in mind that the results of the survey should not be considered as guidelines for an effective blog design — this is a topic for another article.

• usually right-hand side vertical (58%) and top horizontal navigation (52%) are used;
• the start page presents excerpts of 10-20 posts (62%),
• related and popular posts are displayed on every second top blog (50%),
• footer contains copyright information (90%), links to about-page (40%) and link to contact information (30%),
• on average popular blogs have 5,84 advertising blocks per start page,
• on average popular blogs have 5,96 advertising blocks per article page,
• articles often contain no ads (76%),
• layouts usually contain ads on the right-hand side (88%),
• social icons are often placed under the post (54%),
• RSS-buttons are displayed in the above area of the layout (66%),
• “standard” RSS-icons are used more often than text links (66%),
• most publishers use one main RSS-feed instead of multiple feeds (64%),
• tag clouds are not used (90%),
• pagination is used rarely (22%),
• search box in the right upper corner of the site layout (62%),
• 96% of top blogs are not standard-conform.

Please stay tuned and subscribe to our RSS-feed , we are going to conduct more design-related surveys in the future.

Straighten crooked photos in Photoshop Lightroom

Straighten crooked photos in Photoshop Lightroom
Learn how to use the crop tool in Photoshop Lightroom to straighten out a crooked image.

Photoshop CS3 10.0.1 update printing notes

With Adobe Photoshop CS3, Adobe made a significant effort to improve the printing experience for our users. A number of issues have come to our attention since Photoshop CS3 shipped, and the 10.0.1 update addresses several of those�issues. The attached PDF document�contains information and instructions specific to the printing issues fixed in the 10.0.1 update. The�PDF document�contains installation instructions for... Read More

Working the text in Photoshop

If you think typography is just for page layout applications, think again. Photoshop offers a number of text formatting options similar to those you find in InDesign, PageMaker, and QuarkXPress. Read More

The TIFF options dialogue box does not display when you save using Save or Save As (Photoshop CS3)

The TIFF options dialogue box does not display when you save using Save or Save As (Photoshop CS3)
The TIFF options dialogue box does not display when you choose Save or Save As in Adobe Photoshop CS3 when you are working on a TIFF file that was exported from Adobe Photoshop Lightroom. In order to improve the workflow between Lightroom and Photoshop, the TIFF options dialogue is disabled by the means of a metadata entry when a file is exported from Lightroom. Instead of respecting this metadata only when Save is used, Photoshop also respect...

Photoshop CS3 does not respond when you switch between applications

Photoshop CS3 does not respond when you switch between applications
Menus and document windows in Adobe Photoshop CS3 on Mac OS do not respond to user input when you switch between applications.This issue can occur when you switch to another application, such as Safari or iTunes, and one of the following conditions is present...

Smashy The Alien Icon Set

We are always looking for creative and talented artists and designers. Once we find them, we ask them to cooperate with us and release something for free. We provide them with the full freedom to showcase their professionalism and express their creativity. And we support them financially and with a broad coverage in our magazine. Every release helps to make the Web a nicer place. In fact, the results are quite often pretty impressive. You can find our previous releases in our section Freebies.

Today we are glad to release a free Smashy The Alien icon set. The set contains 8 icons (RSS, news, home, download, contact, calendar, blog and Smashing) with a nice modest alien who is just too shy to show his face completely. You can use the set for private and commercial projects, blogs and web-sites for free — without any restrictions whatsoever.

The icons are available in .ico and .png-formats in resolutions 32×32px, 48×48px, 64×64px and 128×128px. If you love Smashing Magazine just like Smashy does feel free to place him on your blog.

This icon set was designed by Maja Bencic aka Abeja from Croatia especially for Smashing Magazine and its readers.

We are always looking for creative and talented artists and designers. Once we find them, we ask them to cooperate with us and release something for free. We provide them with the full freedom to showcase their professionalism and express their creativity. And we support them financially and with a broad coverage in our magazine. Every release helps to make the Web a nicer place. In fact, the results are quite often pretty impressive. You can find our previous releases in our section Freebies.

Today we are glad to release a free Smashy The Alien icon set. The set contains 8 icons (RSS, news, home, download, contact, calendar, blog and Smashing) with a nice modest alien who is just too shy to show his face completely. You can use the set for private and commercial projects, blogs and web-sites for free — without any restrictions whatsoever.

The icons are available in .ico and .png-formats in resolutions 32�32px, 48�48px, 64�64px and 128�128px. If you love Smashing Magazine just like Smashy does feel free to place him on your blog.

This icon set was designed by Maja Bencic aka Abeja from Croatia especially for Smashing Magazine and its readers.

Download Icon Set For Free!

You can use the icons for private and commercial projects, blogs and web-sites for free, without any restrictions whatsoever. However, you are not allowed to sell or redistribute the icons without author’s and Smashing Magazine’s permission.

• PNG files (0.25 Mb)
• Windows icons (0.23 Mb)

Motivation behind the design

Maja contacted us through our contact form and asked if we are interested in some kind of cooperation. We were impressed by Maja’s work, so we have comissioned Maja to design a memorable, lively and beautiful icon set for our readers.

Here are some insights about the motivation behind the design from the designer herself:

I prefer clean and simple designs with lively colors and original elements such as icons. Since I love creating characters and try to include them often in my designs, I wanted to use them for a set of trendy and cute icons inspired with cartoons and picture books.

I think these icons could be used to make web-sites more lively and friendly no matter how serious they are supposed to be. At least that’s how I like my web-projects to be. I hope people will find a way for incorporating some or all of these icons into their designs.

I started as a web designer 6 years ago, but recently I do a lot of graphic design and illustrations as well. Some of my work is presented on my website abeja.org.

Maja Benčić

Thank you, Maja!

Want to showcase your work as well?

Please notice again: we are regularly looking for creative designers and artists and we are more than happy to support them financially and with a broad coverage in our magazine. If you think you can design a professional icon set, theme, wallpaper, typeface, screensaver or whatever — feel free to contact us. You may not know it yet, but we might feature you in one of our upcoming posts.

Read More

Photoshop CS3 or Photoshop Elements 6 crashes when you open more than one image (Windows)

When you open more than one image in Adobe Photoshop CS3 or Adobe Photoshop Elements 6 on Windows, the program closes unexpectedly. There may be no error message, or you may see one of these errors or a similar error: "Adobe Photoshop has encountered an error and needs to close." "Adobe Photoshop Elements has stopped working." "Could not complete your request because of a program error." "An unhandled win32 exception o... Read More

Custom paper sizes are not saved with images in Photoshop CS3

Custom paper sizes are not saved with images in Photoshop CS3
Adobe Photoshop CS3 on Windows does not retain custom paper size in the Print dialog when you set the paper size to something other than 8.5 x 11 inches and then save, close, and reopen your image.Manually reenter the custom paper size when you open the Print ...

Vivid Imagery In Modern Web Design

Vivid Imagery In Modern Web Design

By using vivid images designers can draw user's attention, communicate a message quickly and effectively and leave a memorable first impression. Practically all websites use images in their design, but few use vivid images to achieve maximum results. What is a vivid image? A simple definition is an image or photo that is striking, shocking, intriguing, interesting, beautiful or sexy (we'll be looking at plenty of examples below). It causes a reaction from the senses of visitors that an average image would not.

Words can communicate on their own. Photos can often communicate quicker and in different ways than text. Vivid images used in combination with the right words can be incredibly powerful. These images do more than just play a mere complementary role in the design.

A good starting point for this discussion is to look at the purposes of images in general and why they are used in web design. From there it's possible to observe the true impact that vivid images can have as opposed to just standard images.

By Steven Snell

By using vivid images designers can draw user’s attention, communicate a message effectively and leave a memorable first impression. Practically all websites use images in their design, but few use vivid images to achieve maximum results. What is a vivid image? A simple definition is an image or photo that is striking, shocking, intriguing, interesting, beautiful or sexy (we’ll be looking at plenty of examples below). It causes a reaction from the senses of visitors that an average image would not.

Words can communicate on their own. Photos can often communicate quicker and in different ways than text. Vivid images used in combination with the right words can be incredibly powerful. These images do more than just play a mere complementary role in the design.

A good starting point for this discussion is to look at the purposes of images in general and why they are used in web design. From there it’s possible to observe the true impact that vivid images can have as opposed to just standard images.

6 Purposes of Images in Web Design

1. Accomplish a More Attractive Look
The most common and obvious reason for using images and pictures in web design is simply to create a more attractive and visually appealing design. While other design elements such as color schemes, typography, spacing and balance play an instrumental role in achieving the desired look, images make a sizable difference as well.

Komodo Media uses imagery heavily to create an attractive and vivid “jungle” atmosphere.

2. To Add Color
Photos and images have a strong ability to add color to a design that may be very plain or basic without the image. A well-chosen photo can complement the color scheme and give it more depth. In some cases a color scheme can be too overwhelming with lots of different colors of text, backgrounds, buttons, navigation, etc., but a picture can add far more variety of color without having the same downfalls.

3. Added Personality
One of the challenges of web design is to create something that visitors will connect with at some level. Photos and images can create a greater sense of personality for the site and can do more for building a connection that just text. We’re used to seeing photos of people on an About page or a Staff page for this reason. Readers connect more with people than they do with text.

Marchand De Trucs uses an attractive imagery in the header of his blog. Result: the image conveys the design a personal note.

4. Branding Purposes
Branding is a priority for most websites, and images are capable of helping to establish the brand of the company by creating a particular vision of the company/website in the minds of visitors. Many images that are used for the purpose of branding will lead the visitor to quickly see the company in a particular light. While text is also useful and essential for branding, images have the ability to communicate a message more quickly and more powerfully.

5. Product Previews
If a website is selling products, images will almost always be included. People like to see what they’re buying, and photos can help to give them more confidence that they are getting what they want.

6. To Catch Attention
Images are often the first thing visitors will notice, so when they are used properly they will lead the visitor to understand what is on the page and to continue reading the text rather than totally distracting them from the text.

How Do Vivid Images Differ from Usual Images?

In many ways vivid images will achieve the same purposes of general images that we just looked at, but they will do so more effectively. Usually images and photos are used to add some life to a page or make it more attractive, while vivid images will often be the focal point of the page. It’s very common when a vivid image is used that it is the only image, or one of very few, on the page in order to keep it as the focal point. Too many strong images on one page will distract the visitor and drown out the message.

It’s very common when a vivid image is used that it is the only image, or one of very few, on the page in order to keep it as the focal point. Example: Mark Jardine uses only one attactive illustration, but uses it effectively. The guitar hero is memorable and looks nicely.

In Web design vivid imagery often builds upon the existing perceptions and associations of visitors. Images and objects that carry some type of meaning can be used to portray a specific message. A few examples:

• Water commonly evokes thoughts or feelings of purity, cleanliness, or freshness.
• Plants and sprouts demonstrate growth and life.
• Light is frequenty used for creativity, ideas, or energy.

Potential Qualities of Vivid Imagery as Compared to Usual Images:

More Powerful

A vivid image that jumps out to the visitor holds a great deal of power in terms of communicating a message and getting attention. The example below from 3000k uses an image of a young plant in a person’s hand to help communicate the message of growth. This is far more powerful than their tagline "Grow: make something worth seeing" would be on its own without being accompanied by the image.

Capture Attention Faster

While images in general will grab the attention of visitors more effectively than text, vivid images will far outperform average images in this way. Eric Benoit uses a picture of an orange to complement his tagline, "Want to squeeze the most out of your website?" In a similar fashion as the 3000k example above, the image and the text work together. In this case, the image of the orange is the first thing visitors will notice.

More Memorable

A vivid, striking image will last in the minds of visitors. Text may be read and forgotten, but a strong image will be remembered. Of course, the goal is also to create the proper association with the memory (for example, we’ve all seen television commercials that stand out to us, but we can’t always remember what product they were promoting).

We Create Logos uses an image of a light bulb to communicate the creativity of their design. Visitors are more likely to remember them in this way than if this image wasn’t used.

Better for Branding

IdeaScale’s tagline is "Where ideas come to life." The image of the light bulb portrays the creative aspect and the plant represents the growth and life, which works well with their tagline for branding.

Digital Base uses an image of Lego-type blocks to go along with their tagline "Building your digital future."

Capable of Illustrating a Point Creatively

Standard images make a page more friendly and more attractive, but vivid images are able to do the same while communicating a message. In many cases they illustrate the main point of a website or page. In the first example below, DoxReady uses a well-chosen image of a hand and a stopwatch to complement their tagline "Start saving time and money today." While you can easily read those words and get the message, the picture certainly reinforces their point.

There are a ton of creative portfolio sites out there. Daniel Jimenez attempts to distinguish himself with the headline "Still or Sparking… Refreshing, Natural & Vital Design." The bottle of water communicates the message of refreshing and natural (and he put his name on the bottle, which is a nice touch to help visitors remember him)..

The Focal Point of the Page

In some instances the image is the main element that the rest of the page is built around. When an image is intended to have a strong impact it will often be placed prominently in the page. Dreamten Studios uses a large image of a hand painting in the prime real estate of the page to draw attention to a featured project.

Different Approaches with Vivid Images

Sex Appeal

One of the most common and most effective uses of vivid images in web design is to use sex appeal to capture attention. The right picture of a woman will immediately grab the attention of most male visitors.

Orange Label uses a picture of a woman in a bikini accompanied by the text, "We know what attracts your customers." The picture certainly catches the attention of most visitors and proves their point by using sex appeal to attract attention.

British D.J. James B also uses a woman in a bikini.

Io Silver sells jewelry and they use some sex appeal while showing one of their necklaces.

Cut Out from the Background

Many examples of vivid images that you have seen in this post, as well as throughout the internet in general, have been removed from the background. This is a common technique that can improve the look of the image, make it stand out more, make it fit with the color and style of the page, and create a clear message with less distractions.

Nomilktoday slightly cuts out from the background. However, sometimes even this small effect is enough to make a logo stand out and attract users’ attetntion.

On the contrary, Thepixelage uses a strong cutout image of a Rubik’s Cube. This image is much more powerful and effective than it would be if it were sitting in a standard photo rather the interacting with the rest of the page.

Lighting Effects

Lighting and shadows are often used to create a more striking image. This can be done by a photographer while shooting a photo or by editing with Photoshop or a similar program. Either way it can accomplish the same goal.

Kavoon Web Design Studio uses a clever picture of a watermelon with strong lighting effects on a dark background.

Combined with Simplicity of Message

Some of the most effective uses of images and photos (and many from this post) are done in combination with a simple message. With short attention spans of visitors and the need to establish a particular message quickly, a strong, attention-grabbing image can work very well with a short, simple, and clear message. Ideally the message and the image complement each other and work together to create the impression with the visitor.

What Impacts the Success of the Imagery?

Size

Images and photos that are intended to quickly leave an impression will generally be larger in size and a more substantial part of the design. Large images are sometimes used almost exclusively with very little text on a page to create a message. Smaller images will typically have a harder time creating some of the same results.

ShoeGuru uses a huge image of a shoe, which has a completely different effect than a smaller version of the same image would have if it were surrounded by a lot of test and some other images.

Quality

The quality of the photo or image is always going to play a factor as well. Higher quality images will be much more effective than those of average quality. Whether it’s photography, digital art, or a combination of both, high quality is essential. Looking back through the examples in the post, the quality is consistently high.

Simplicity

When the goal is to quickly create a strong impression with visitors, simplicity is the key. With too much going on the visitors will be distracted and the image will not have the same impact. The simplicity is a factor in terms of the image itself and also in terms of the design outside of the image. The most effective images will present a clear message with little chance of being missed by visitors.

Adit Shukla uses vivid imagery as the background image for the overall layout. Due to the simplicity of the theme, the design doesn’t look overcrowded and appears to be simple, even although there a numer of navigation options and a variety of different design elements.

Colors

Colors are capable of having a very significant impact on visitors’ perception of the design. However, when using colorful images, you need to make sure that you use the right ones. Blue, red and green are most attractive colors among men and women. Women don’t like brown, orange and purple most, while men feel uncomfortable with brown, purple and pink.

RedChilli uses the color red very powerfully. The vivid image in the middle of the page is memorable, attractive and informative. And this is what effective design is all about.

How Do You Feel About Imagery’s Impact on Design?

What stands out to you when you look at the use of photos and images across the web? Are there strategies or techniques that you find to be particularly effective?

About the Author

Steven Snell is a web designer and freelance blogger. He recently launched DesignM.ag, which includes his articles on design and freelancing, community news, and a design gallery.