The Ultimate Collection Of Photoshop Custom Shapes

View original post found on Smashing Magazine authored by Steven Snell

By Steven Snell

Photoshop users are able to benefit from the vast amount of high-quality resources that are freely available to the community. Brushes get a lot of attention, but custom shapes are also extremely useful in the right situations. Finding a custom shape that has already been created can save you some time and headaches in your design, and fortunately there is a very wide variety of custom shapes available.

This post highlights 80 different sets of custom shapes (over 2,500 individual shapes) in several different categories. If you plan to download and use any of these shapes be sure to check to terms and conditions set by the creator of the shapes.

1. People

People Silhouettes (306 shapes)

Screenshot

Costumes and Characters Shapes (56 shapes)

Screenshot

Skateboarding (9 shapes)

Screenshot

Skater Collection (3 shapes)

Screenshot

Skateboarders (8 shapes)

Screenshot

Stock Girls (8 shapes)

Screenshot

Businessman Silhouettes (12 shapes)

Screenshot

Business Girls (12 silhouettes)

Screenshot

Jumping People Silhouettes (104 shapes)

Screenshot

Break Dancing (8 shapes)

Screenshot

Hoops (57 shapes)

Screenshot

Presentational Shapes (10 shapes)

Screenshot

Random People Shapes (11 shapes)

Screenshot

People Shape Set (25 shapes)

Screenshot

Hot Babes (7 shapes)

Screenshot

Go-Go Girls (18 shapes)

Screenshot

Sexy Stances (13 shapes)

Screenshot

Ladies (7 shapes)

Screenshot

Sexy Girls (47 shapes)

Screenshot

2. Animals

Birds (12 shapes)

Screenshot

Butterflies (38 shapes)

Screenshot

Horses (9 shapes)

Screenshot

Horses (15 shapes)

Screenshot

Zebras (6 shapes)

Screenshot

Sea Creatures (27 shapes)

Screenshot

Animals (10 shapes)

Screenshot

Animal Patterns (13 shapes)

Screenshot

Bugs (20 shapes)

Screenshot

Weathered Flying Bugs (21 shapes)

Screenshot

3. Planes and Boats

Aircraft (21 shapes)

Screenshot

Maritime (27 shapes)

Screenshot

WW2 Planes (13 shapes)

Screenshot

4. Guns and Weapons

Guns (30 shapes)

Screenshot

Guns (26 shapes)

Screenshot

Ray Guns and Laser Blasters (15 shapes)

Screenshot

I Love Weapons (12 shapes)

Screenshot

5. Halloween Shapes

Halloween Shapes (23 shapes)

Screenshot

Halloween Shapes (10 shapes)

Screenshot

6. Trees

Trees (17 shapes)

Screenshot

Dead Trees (24 shapes)

Screenshot

Live Trees (21 shapes)

Screenshot

Plan Trees (20 shapes)

Screenshot

7. Circles

Retro Circles (10 shapes)

Screenshot

Circles (10 shapes)

Screenshot

Circles, Lines and Sunlights (108 shapes)

Screenshot

8. Random Shapes

Stars (200 shapes)

Screenshot

Sunbursts (30 shapes)

Screenshot

Splats and Drips (15 shapes)

Screenshot

Splat Shapes (8 shapes)

Screenshot

Stains & Blots (34 shapes)

Screenshot

Drips (25 shapes)

Screenshot

Paisley (24 shapes)

Screenshot

Kiddy Stuffs (72 shapes)

Screenshot

Ribbon Collection (3 shapes)

Screenshot

Voters Collection (2 shapes)

Screenshot

Surfing Themed Shapes (6 shapes)

Screenshot

Hero Shapes (13 shapes)

Screenshot

Flames (5 shapes)

Screenshot

Markers (23 shapes)

Screenshot

Vector Shapes (13 shapes)

Screenshot

Arrows (10 shapes)

Screenshot

Speech Bubble Shapes (42 shapes)

Screenshot

Cartoon Shapes (25 shapes)

Screenshot

Assorted Logos (38 shapes)

Screenshot

CD & DVD Logos (7 shapes)

Screenshot

Foliage Shapes (371 shapes)

Screenshot

Tools (9 shapes)

Screenshot

I Love Skulls (12 shapes)

Screenshot

Urban Shapes (31 shapes)

Screenshot

World Map (3 shapes)

Screenshot

Banner and Scrolls (28 shapes)

Screenshot

Art Supplies (16 shapes)

Screenshot

Skyline Collection (6 shapes)

Screenshot

Arabeski (23 shapes)

Screenshot

9. Combination Packs

Custom Shapes Pack v. 1.1 (100 shapes)

Screenshot

Custom Shape Pack (45 shapes)

Screenshot

50s Custom Shapes (14 shapes)

Screenshot

Revolution Collection (6 shapes)

Screenshot

Custom Shape Mix (24 shapes)

Screenshot

Vector Shape Mix (50 shapes)

Screenshot

If you’re interested in learning more about the basics of custom shapes, how to load them, and how to create your own, try the following resources.

About the Author:

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

100 Free High-Quality XHTML/CSS Templates

View original post found on Smashing Magazine authored by Steven Snell

by Steven Snell

If you haven’t taken a look at the (X)HTML/CSS templates that are available for free from a variety of sources, you may be surprised by the quality you can find. WordPress themes tend to get a lot of exposure and attention in the design community right now, but there is also a wide variety of high-quality (X)HTML/CSS templates that are free of charge.

In this post, we’ll showcase 100 free high-quality templates. Hopefully some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.

You may want to take a look at other collections as well (some are from Smashing Magazine, some are not):

100 Free High-Quality XHTML/CSS Templates

Package | Registration is necessary.

Template Screenshot

Consultant | Download Consultant

Template Screenshot

Environmental Brand | Download Environmental Brand

Template Screenshot

Internet Jobs | Download Internet Jobs

Template Screenshot

Internet Music | Download Internet Music

Template Screenshot

Greefies | Download Greefies

Template Screenshot

Squick Design | Download Squick Design

Template Screenshot

Harvest | Download Harvest

Template Screenshot

Blackberry | Download Blackberry

Template Screenshot

Flower Shop | Download Flower Shop

Template Screenshot

Lingerie Store | Download Lingerie Store

Template Screenshot

Web Application | Download Web Application

Template Screenshot

Internet Studio | Download Internet Studio

Template Screenshot

Puzzled | Download Puzzled

Template Screenshot

Journey of Love | Must register with Registration is necessary.

Template Screenshot

Strockes | Must register with Registration is necessary.

Template Screenshot

EC Mania | Must register with Registration is necessary.

Template Screenshot

Cluster | Must register with Registration is necessary to download.

Template Screenshot

Temper | Download Temper

Template Screenshot

Jet 30 | Download Jet 30

Template Screenshot

Green Web | Download Green Web

Template Screenshot

Flash Web | Download Flash Web

Template Screenshot

AppleWeb | Download Apple Web

Template Screenshot

Trial Impact | Download Trial Impact

Template Screenshot

Aquatic | Download Aquatic

Template Screenshot

Business Events | Download Business Events

Template Screenshot

Cool Web | Download Cool Web

Template Screenshot

Genious Web | Download Genious Web

Template Screenshot

Expert Vision | Download Expert Vision

Template Screenshot

Intercraft | Download Intercraft

Template Screenshot

Clean Design | Download Clean Design

Template Screenshot

Business Design | Download Business Design

Template Screenshot

Delicious Fruit | Download Delicious Fruit

Template Screenshot

MultiFlex 3 | Download MultiFlex 3

Template Screenshot

Simple Life | Download Simple Life

Template Screenshot

Street Style | Download Street Style

Template Screenshot

Miss Understood | Download Miss Understood

Template Screenshot

Street Life | Download Street Life

Template Screenshot

skuteczni | Download skuteczni

Template Screenshot

Clarity | Download Clarity

Template Screenshot

The Old Forest | Download The Old Forest

Template Screenshot

Typography Paramount | Download Typography Paramount

Template Screenshot

Subordinate | Download Subordinate

Template Screenshot

Nature’s Charm II | Download Nature’s Charm II

Template Screenshot

Zenlike | Download Zenlike

Template Screenshot

Clicker | Download Clicker

Template Screenshot

Biz Company | Download Biz Company

Template Screenshot

Attractive Business Temp | Download Attractive Business Template

Template Screenshot

Happy Template | Download Happy Template

Template Screenshot

Internet Encyclopedia | Download Internet Encyclopedia

Template Screenshot

Concept Nova | Download Concept Nova

Template Screenshot

Free CSS Full Site Template | Download Free CSS Full Site Template

Template Screenshot

Black Eyed Susan | Download Black Eyed Susan

Template Screenshot

Reference | Download Reference

Template Screenshot

Interlude | Download Interlude

Template Screenshot

Printing | Download Printing

Template Screenshot

Numerology | Download Numerology

Template Screenshot

Greeny Grass | Download Greeny Grass

Template Screenshot

Collaboration | Download Collaboration

Template Screenshot

Breakfast | Download Breakfast

Template Screenshot

News Flash | Download News Flash

Template Screenshot

Discovery | Download Discovery

Template Screenshot

Adios | Download Adios

Template Screenshot

Old Architecture | Download Old Architecture

Template Screenshot

Beauty Co. | Download Beauty Co.

Template Screenshot

Jewelry Shop | Download Jewelry Shop

Template Screenshot

Book Store | Download Book Store

Template Screenshot

Real Estate | Download Real Estate

Template Screenshot

Business Company Dark Blue | Download Business Company Dark Blue

Template Screenshot

Electronix | Download Electronix

Template Screenshot

Photo Gallery Green | Download Photo Gallery Green

Template Screenshot

Quartz Storage | Download Quartz Storage

Template Screenshot

Aero Solutions | Download Aero Solutions

Template Screenshot

Unnamed | Download Unnamed

Template Screenshot

Imagination | Download Imagination

Template Screenshot

Corporate | Download Corporate

Template Screenshot

Urban Artist | Download Urban Artist

Template Screenshot

VectorLover | Download VectorLover

Template Screenshot

Keep it Simple | Download Keep it Simple

Template Screenshot

FreshMedia | Download FreshMedia

Template Screenshot

EliteCircle | Download EliteCircle

Template Screenshot

Nature Theme | Download Nature Theme

Template Screenshot

Mint Idea | Download Mint Idea

Template Screenshot

Metplate | Download Metplate

Template Screenshot

Decent Photo Gallery | Download Decent Photo Gallery

Template Screenshot

Consulting Services | Download Consulting Services

Template Screenshot

Flare | Download Flare

Template Screenshot

Water Spill | Download Water Spill

Template Screenshot

Inverted Headline | Download Inverted Headline

Template Screenshot

Choice | Download Choice

Template Screenshot

Purple | Download Purple

Template Screenshot

Business Elegance | Download Business Elegance

Template Screenshot

Symisun | Download Symisun

Template Screenshot

Ad Agency | Download Ad Agency

Template Screenshot

GUITARhero | Download GUITARhero

Template Screenshot

Pixel Green | Download Pixel Green

Template Screenshot

Subdued | Download Subdued

Template Screenshot

The Big Leaf | Download the Big Leaf

Template Screenshot

GreenWay | Download GreenWay

Template Screenshot

BWDEC2007 | Download BWDEC2007

Template Screenshot

Other collections:

About the Author

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

Newspaper Website Design: Trends And Examples

View original post found on Smashing Magazine authored by Steven Snell

By Steven Snell

News websites can be intriguing to examine from a design perspective. Regardless of what type of news they cover, they all face the challenge of displaying a huge amount of content on the home page, which creates plenty of layout, usability and navigational challenges for the designer. The lessons that can be learned from examining how news websites address these challenges can be valuable for designers who work with other types of websites, including ones with blog theme designs.

Monetization is also a major factor for news websites, and it’s interesting to see how they integrate advertisements in the design. In some cases, the ads are somewhat intrusive or excessive, but most news websites are able to use ads without turning readers away, in part because of the content that’s available.

For the purposes of this article, the term “newspaper website” refers to any news-related website that has the editorial focus of an online periodical. Many of the websites mentioned here are the online versions of major newspapers, but others are standard news websites and some blur the line between news website and blog.

You may want to take a look at the following related posts:

  • Award-Winning Newspaper Designs
    This post is supposed to provide you with some examples of outstanding newspaper designs which have been rewarded with prestigious awards (see references at the bottom of this post), and demonstrate unusual approaches of newspaper design.

Common Trends of Newspaper Websites

1. Color Schemes

Most news websites use dark text on a white background. Obviously, these websites contain a huge volume of content, and readability is important. A few of the websites mentioned later in this article use darker colors for headers or for the body of the page outside the content.

A large percentage of news websites also use blue and red in addition to a dark gray or black for text. Blue is extremely common for headlines, article titles and links. Red is often used sparingly as an accent color. Some news websites also mix in more colors in other places, such as in the navigation.

The L.A. Times website demonstrates a common color scheme:

LA Times

2. Header and Sidebar Banners

Of course, all of these websites need to produce revenue, and banner ads in headers are a key source of income. Some websites use banner ads on all pages, and others exclude banners on the home page but display them above the header on other pages.

While blogs commonly use 125 by 125 pixel banners in sidebars, news websites commonly use 300 by 250 banners or tall skyscrapers. Many of the websites mix in some AdSense or other text link ads.

The Telegraph uses a 730 by 90 pixel banner over its header.

Telegraph

3. Top Navigation

Although there are a few notable exceptions to this trend, most news websites put their primary navigation menu just below the header and above the content. The New York Times and MSNBC are two of the exceptions, as they both use the left sidebar for the main navigation.

The Times Online uses a two-level navigation menu.

Times Online

4. Tabbed Content Areas

Many news websites use tabbed content areas that allow visitors to see popular articles, recent articles, most commented articles, etc. This is sometimes used in the sidebar, and other times in the main content area, such as on Wired. This allows for more control by users over what content and links they see, and it can save space in the design by making more content accessible in a specific area.

Wired

5. Grid-Based Layouts

Newspaper websites are commonly built with grid-based designs. The grid is a popular choice not only because of the sharp look it creates but because it’s one of the most effective ways to manage and organize a large amount of content. The New York Times has one of the more well-known grid-based layouts.

NY Times

Notable Differences Between News Websites and Blogs

The line between a news website and a blog is a fine one, and the two types are difficult to distinguish sometimes. For the purpose of this article, “blog” refers more to a traditional blog than to a commercialized news blog by a team of writers. While there are certainly similarities between blogs and news websites, there are also some key differences.

Social Media Integration

Seeing widgets or voting buttons on blogs is extremely common; in fact, most blogs use them in one form or another. Most news websites, however, use them more subtly, if at all. It’s common to see a “Share” section on articles, such as the one shown below from ABC News, but voting buttons are not used in quite the same way as on blogs, where a standard “Digg This” button may appear at the top of every post. A growing number of news websites recognize the impact of social media, but they are still using such tools subtly in their designs.

A few websites shown in more detail below do make more use of social media than others. The Huffington Post has a section specifically to display stories that are new on Digg, and the website certainly makes plenty of front page appearances.

Huffington Post

RSS Feeds

Subscriptions and RSS feeds are a huge part of blogging, and most blogs use large icons or FeedBurner counts to make it easy for visitors to subscribe. Most news websites, however, don’t push RSS feeds on readers like a blog would. Most news websites do offer feeds, often according to category of content, but they’re not a major part of the design or layout. In fact, most visitors probably don’t even notice the small icons or links to feeds. As RSS feeds become a part of the daily lives of average readers, this will probably change.

The Guardian promotes a link to its feed in the website’s header, but with much less attention drawn to it than most blog themes.

Guardian

Comments

Reader comments and discussion are a critical element for most blogs, but they’re not as important to news websites. Many news websites allow readers to leave comments, but they’re usually an afterthought in the design and are rarely promoted the same way as they would be on a blog. For example, many blogs show excerpts of posts on the front page, and almost all will also show a comment count with the excerpt that links to the comment section. This is used on a few news websites, but it’s rare.

ABC News is one of the rare news websites that shows a comment count by the post excerpt on the home page.

A Look at 20 Leading Newspaper Websites

The Onion
Satirical news website The Onion features a grid-based design (it’s been called the funniest grid you ever saw) that makes excellent use of the screen space that’s available. There is a lot going on on the website, which can be both good and bad. The main navigation separates the content into video, radio, sports, election, etc.

The Onion

The header includes an ad on each side, and the sidebar has some advertising as well, but nothing too intrusive. Some parts of the home page are used essentially as advertisements for features that are part of The Onion, such as The Onion Personals and The Onion Store.

New York Times
The website of the New York Times is another well-known grid. The majority of the website’s navigation is down the left side of the page, which is not as common as top navigation. The website does use a tabbed navigation bar at the top with links to such features as “Today’s paper,” “Video,” and “Most popular,” but all of the content category links, such as World, U.S., Politics, Business, etc., are down the side.

NY Times

The website’s design includes a nice use of blue and black headers and links, with a touch of red added in a few places, such as the time of an article’s publication. Overall, the New York Times presents one of the better newspaper websites.

Chicago Tribune
Unlike many of the other websites featured here, the Chicago Tribune uses only one small banner in the header of its home page, although individual article pages use a 730 by 90 banner. Aside from the header, the rest of the home page is fairly ad-heavy, including text link ads.

Tribune

The content on the Chicago Tribune website is spaced out a bit more than, for example, the New York Times’. Again, blue is used for headers and links, with a touch of red.

Washington Post
The Washington Post also uses the common colors of blue, black (or dark gray) and red on a white background. The header includes a small 290 by 45 banner, and the top of the sidebar includes a 300 by 250 banner. The rest of the home page contains only a few other small banner ads.

Washington Post

The layout of content on the home page is focused on providing categorized links to specific content. An image is included for the lead story, but other headlines ab