Feed Ansicht | Smashing Magazine

Smashing Magazine

we smash you with the information that will make your life easier. really.

Abonnieren | Zurück zu den Feeds | Abonnentenzahl: 0 | Letzte Aktualisierung: Oct 24 2008, 01:00:04

50 Beautiful Blog Designs

23 Oct 2008 23:29:04 | Vitaly Friedman & Sven Lennartz | Design Showcase,blogs,design,inspiration | Kommentare

There are things one can do a number of times without worrying about becoming boring. For instance, collecting and showcasing excellent blog designs. In this post we do it already the fifth time. Why? Web design lives in blogs; new developments appear there, that’s where the music plays. And that’s where you need to look for in order to keep up with current trends and developments.

In the showcase below we present 50 beautiful blog designs that literally stand out — either through their layout or through their design or through their attention to little details. Below you’ll find a variety of designs: clean designs, grunge, retro, graphics-heavy designs etc. Most designs presented below risk unusual approaches in the choice of design and content presentation. That’s what makes them different. Hopefully you will find some creative ideas which you can develop further in your further projects.

We strongly encourage designers to break out the common layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

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

Beautiful Blog Designs

Acko.net

Showcase of Beautiful Blogs

Standards for Life by Natalie Jost

Showcase of Beautiful Blogs - Standards for Life by Natalie Jost

Wishingline

Showcase of Beautiful Blogs - Wishingline

Langgatan 3a

Showcase of Beautiful Blogs

Loodo.com.br

Showcase of Beautiful Blogs

Matblogg.se

Showcase of Beautiful Blogs

Kyle Haskins

Showcase of Beautiful Blogs - Kyle Haskins

Pays Sud Gatine

Showcase of Beautiful Blogs

Ali Felski

Showcase of Beautiful Blogs

L’effet Créa

Showcase of Beautiful Blogs - Kyle Haskins

Gisele Jaquenod

Showcase of Beautiful Blogs - Gisele Jaquenod

Neil Gaiman’s The Graveyeard Book

Showcase of Beautiful Blogs

Viget.com/Extend

Showcase of Beautiful Blogs

Marchand de Trucs

Showcase of Beautiful Blogs - Marchand de Trucs

Thomas Finley

Showcase of Beautiful Blogs - Thomas Finley

Mark Jardine

Showcase of Beautiful Blogs - Mark Jardine

Matthew Buchanan
Clean structure and good use of icons and typography. The icons at the left side of the posts stand for the category the article belongs to.

Showcase of Beautiful Blogs - Matthew Buchanan

Goodbytes.be

Showcase of Beautiful Blogs - Goodbytes.be

45royale Inc.

Showcase of Beautiful Blogs - 45royale Inc.

Macalicious

Showcase of Beautiful Blogs - Macalicious

Clean Designs

Nonesuch Records

Showcase of Beautiful Blogs - Nonesuch Records

Objectified

Showcase of Beautiful Blogs - Objectified: A Documentary Film by Gary Hustwit

The Relevant Elephant

Showcase of Beautiful Blogs

Designworklpan.com

Showcase of Beautiful Blogs

Ciclismo Urbano

Showcase of Beautiful Blogs

Surfstation.com

Showcase of Beautiful Blogs

Designsensory

Showcase of Beautiful Blogs - Wishingline

Jason Santa Maria

Showcase of Beautiful Blogs - Jason Santa Maria

Wilson Miner

Showcase of Beautiful Blogs - Wilson Miner

Viewzi Corporate

Showcase of Beautiful Blogs - Viewzi Corporate

High Resolution

Showcase of Beautiful Blogs - High Resolution

Neil Scott

Showcase of Beautiful Blogs - Neil Scott

LittleEngine
LittleEngine provides an interesting integration of the blog into its overall design. Clean and very elegant solution which employs only few colors, but uses them effectively. The navigation is provided by the calendar in the sidebar.

Showcase of Beautiful Blogs - LittleEngine

Fiveruns

Showcase of Beautiful Blogs

forgetfoo

Showcase of Beautiful Blogs - forgetfoo

Grunge, Handwriting and Collage

Retinart.net

Showcase of Beautiful Blogs

No MILK Today

Showcase of Beautiful Blogs - No MILK Today

AmyMahon.com

Showcase of Beautiful Blogs

Meagan Fisher

Showcase of Beautiful Blogs

Rockatee.com

Showcase of Beautiful Blogs

tj mapes

Showcase of Beautiful Blogs - tj mapes

Holdrio-and-co.com

Showcase of Beautiful Blogs

Dreamling.ca

Showcase of Beautiful Blogs

Jeffrey Sarmiento

Showcase of Beautiful Blogs - Jeffrey Sarmiento

That INDIE Dude

Showcase of Beautiful Blogs - That INDIE Dude

Blog do Ronaldo

Showcase of Beautiful Blogs - Blog do Ronaldo

Slabovia.tv

Showcase of Beautiful Blogs - Slabovia.tv

iSpoil.net

Showcase of Beautiful Blogs

Andrés Gallego

Showcase of Beautiful Blogs

Retro, Vintage, Experimental

The Bond Makeover

Showcase of Beautiful Blogs

Korbinian Folk

Showcase of Beautiful Blogs - Korbinian Folk

Lynnterpretation

Showcase of Beautiful Blogs

Related Posts

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


Beautiful Examples of Moleskine Art

22 Oct 2008 22:38:57 | Vitaly Friedman & Sven Lennartz | Inspiration,inspiration,moleskine | Kommentare

By Elaine B. Inc

More than quick sketches and drawings, Moleskine art can encompass mixed media and even digital art. The imperfect lines, smudges and wrinkles give it dimension and raw honesty that more than ever are sought by digital artists and implemented in software. Regardless of any advancement in technology, pen and paper will always be the number once choice for any budding artist or seasoned illustrator.

No theme or medium is ever neglected for the Moleskine treatment if the mood strikes the artist, spawning art like no other. With abstracts, travel themes and even other-worldly monsters, this collection of Moleskine art sketches and drawings is sure to inspire thought and spark your muse. Below you will find diverse styles created for a medium that refuses to die.

Moleskine Art Sketches and Drawings

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Moleskine Art

Resources

(al)


Splatter and Watercolour Brushes For Photoshop

22 Oct 2008 12:18:56 | Vitaly Friedman & Sven Lennartz | Freebies,brushes,downloads,free,photoshop,splatter,watercolour | Kommentare

Another day — another fresh freebie. Today we are glad to release Splatter and Watercolour Photoshop Brushes, 3 sets of 21 high-quality brushes, with the average size of 2500px or 2200px. These brushes were created for Adobe Photoshop CS, CS2 and CS3 and also work with GIMP 2.4.

The sets are created by Abdullah, the creator of Qbrushes.com where you can find further high-quality Photoshop brushes available for free download. This set was designed especially for Smashing Magazine and its readers.

Download the sets for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.

Splatter, Watercolour, Strokes, Brushes Adobe Photoshop Set

Splatter, Watercolour, Strokes, Brushes Adobe Photoshop Set

Splatter, Watercolour, Strokes, Brushes Adobe Photoshop Set

Last But Not Least

We are constantly looking for creative designers and artists. You may not know it yet, but we may feature you in one of our upcoming posts.

If you would like to release a free high-quality font, a Wordpress theme, Photoshop brushes, a Drupal theme, some wallpapers or an icon set, please contact us. We would like to support you (both financially and with the broad readership of Smashing Magazine).


Creative User Interfaces in Modern Web Design

21 Oct 2008 21:30:53 | Torley Linden | Design Showcase,creative,design,inspiration,Interface,ui | Kommentare

The whole may be more than the sum of its parts, but without the parts, there is no whole. Lest that sound like some weird philosophical meandering to you, take comfort in observing the finer aspects of creative and appealing user interface design.

The following list bucks tradition by not being tied to one particular theme; although, as you’ll see, there are subtle threads running through them. While excellent, none of these designs are perfect, and I’ve pointed out room for improvement we can learn from.

Give it a go. Grab a coffee and take time to explore further. As you would a quality timepiece made of thousands of parts, analyze and enjoy how intricate parts come together to create a cohesive experience. Look closely and see what makes each website design tick.

OkayDave

OkayDave.com
I’ve noticed Dave Werner’s portfolio mentioned in passing on Smashing Magazine before and thought it was well worth a closer look, even if it dates to 2006. One basic way to provide focus and emphasis is to desaturate everything except the target element. On OkayDave, all is in black and white until you mouse over an element.

OkayDave by you.

Things get startlingly more vibrant when you actually click something; a burst of colored particles brighten the screen before transitioning to the selected media. It’s a tad on the over-compressed side but only lasts a second. What a great way to combine very artificial and earthly organics (see Dave’s handwriting and scratchy notes, in particular). And, rewarding visitors for clicking will encourage them to spend more time discovering your content.

Vimeoland

Vimeoland
Video-sharing website Vimeo is known for a number of things, foremost among them being an astoundingly consistent user interface, an example being its very user-friendly roadmap. Vimeoland is a playful form of data visualization: little figurines teleport in, representing unique website users and their status. For example, hearts appear above their heads when they like a video. From time to time, an airplane will fly by.

Vimeoland by you.

YouTube may be the biggest video website, but its user interface falls short of Vimeo’s elegance. Vimeo’s video quality, which can go up to true high definition, is superior, too. Something worth thinking about the next time you want to make a film easily accessible.

Grooveshark

Grooveshark.com
Looking for music? Grooveshark may have what you want. In a turbulent time when popular mainstays like Pandora and Muxtape have run into legal tangles because of archaic copyright laws, Grooveshark claims to be in the clear, compensating artists for their work.

Alas, this also means that unlike other services, such as imeem, you can’t (at least yet) embed music on your blog. But I was surprised by how many rare tracks that I searched were already available (they apparently reward people for uploading). Two problems I noticed: (1) some broken help files, and (2) the circular progress indicator will keep going infinitely if it can’t play a song. Hopefully they’ll be smarter about that in the future.

Grooveshark by you.

But overall the player is very slick: queued songs visually lock together like Legos, elements slide horizontally to show and hide controls and hierarchies as needed, and the overall blue and gray theme — like a shark! — is sleek.

If you want to download songs, your registration needs to be approved. It’s not an automated process yet, and I’m still waiting for my approval.

SpaceCollective

SpaceCollective.org
Into trans-humanism, fringe science, and the far reaches of space? Space Collective bills itself as “a cross-media information and entertainment channel for post-ideological, non-partisan, forward-thinking terrestrials”. And its website is a joy to visit: in the new posts section, fresh content is arranged in a curved-corner matrix, with green tabs to indicate specific projects.

SpaceCollective by you.

It seems pretty far out at first, and you may not buy some of the beliefs, but even a glimpse of this imagery will uplift your perspective on humanity’s creativity in the cosmos.

Funnel Design Group

FunnelDesignGroup.com
Do you remember the bizarre devices in the first Myst game that combined familiar elements, and by doing so, came off as alien? The “dentist-chair planetarium” hybrid was a striking example of that. When you visit Funnel’s website, you’ll sense a similar atmosphere: gears are churning away, and a little automaton with a lightbulb for a head is there to help you view its work. It’s almost Steampunk-ish.

Funnel Design Group by you.

I appreciate the detail they’ve gone into: selecting a different section makes the art in the O-shaped viewfinder spring a little, and the title up top closes and opens, as if it were a piece of paper in a rotating carousel. (The old-time Glenn Miller music and whirring sounds are fitting, too.)

Viewzi

Viewzi.com
Finally, in the visual search arena, Viewzi’s results aggregate other websites (like Google and Amazon) and present them in the most sensible context it can detect. For example, searching for “Royksopp” (whose “Remind Me” video has been popular on Smashing Magazine) brings up the album view first. Clicking on it brings up a list of the group’s CD covers.

Viewzi by you.

If that doesn’t suit you, multiple other views — like the traditional “Simple Text” and the pseudo-3D “Photo Tag Cloud” — allow you to explore the same data in different ways. They have other views for specialized searches, so try them all out for appropriate media.

GoDesignate

GoDesignate.com
Here’s another fine example of a goodie-hook. The Web developers at Buffalo were inspired to create this after a “‘discussion about whose turn it was to make the tea.” It provides a clean twist on the old “cards in the hat” process and takes seconds to use. The reference to Buffalo at the bottom is a compact pixelfont, a subtle reassurance that they’re not intrusive marketers.

Designate by you.

I couldn’t help but ask if this was actually used by the company, and Dan Griffiths, Managing Director, graciously replied:

“Glad you like it! We do use it for all sorts of things still. You should see some of the things people use it for. :)”

“Should I leave my husband?” was one of the strangest ones I have noticed!

Some more from a list of highlights Dan shared with me:

“Why does my boss call me lady?”

“Will Chris ever regain his masculinity?”

“Should I make a new site design based on Buffalo’s design?”

When hooks like this are in tune with your company’s overall image and sense of humor they build brand familiarity through repeated usage, not to mention subsequent smiles.

Hypnoteis

Hypnoteis.nl
Teis Albers is fond of splashy color. His style is more about grungy splashes of paint and pseudo-decoupage, as demonstrated in his gritty depictions of font flourishes set against a backdrop of various animal and human body parts. But similar to Pagano’s website, clicking on any thumbnail will dynamically zoom and enlarge that picture without refreshing the page. While Pagano’s zooms are Flash-based, Albers uses the magic of Highslide JavaScript.

Hypnoteis by you.

Serge Seidlitz

Serge Seidlitz
But sometimes you want to make everything stand out, and that’s what this guy is here for. Using a mess-on-the-bedroom-floor approach similar to Werner’s, Seidlitz has nothing fancy in the way of mouse-overs. But his motley assemblage of mayhem does invite clicking: he even urges you to “click on things.”

Serge Seidlitz by you.

Needless to say, if you keep updating your portfolio with new stuff, maintaining a website like this could become a time-consuming jumble. But if you already have a wealth of work to show off, the discover-my-creative-chaos approach might work for you.

Six Pixels of Separation

Six Pixels of Separation is Mitch Joel’s showcase of social media insights. It looks pretty usual and boring at the first glance, but a closer look reveals a close attention to detail. Consider how sparse graphical elements are used for maximum effect. Embedded podcasts fit perfectly into the theme; it’s relatively easy to navigate, despite the large amount of links; and leaving a comment rewards you with a surprising (but non-annoying) pop-up; try it!

Six Pixels of Separation by you.

There are too many social media blogs out there that buy into the same generic “Web 2.0″ conventions. Six Pixels bucks that banality with a layout that doesn’t get in the way of “the meat” and is all the better for it.

Fontpark 2.0

Fontpark 2.0
When I see Web typography guides, they’re often in the Roman characters that I’m well familiar with, so it’s refreshing to look beyond this style and bask in what else is happening around the world.

Fontpark 2.0 by you.

Japan’s Morisawa is a venerable typesetting company, and in addition to a brief but helpful primer on Japanese Kanji Culture, they have created Fontpark, a unique way of looking at characters with hundreds of years of history. Sit back and watch pieces be animated into animals and faces, or be an active participant and submit your work to the gallery.

Like FontStruct, this is a novel way of promoting your paid products with a quality freebie, another kind of goodie-hook. It may not be as funny as CSS Homer, but finding faces in the swashes and strokes is enlightening nonetheless.

Picnik

Picnik.com
Staying on the food theme, here is a Picnik of a very special sort. Sure, you rely on Photoshop for your more heavy-handed tasks, and rising Web-based image editors such as a.viary boast complex features. But when you want to retouch photos in a jiffy, Picnik is nothing short of a usability dream!

Picnik by you.

From the smooth registration form (observe how password and email confirmation fields are hidden until you need them, reducing the perception of complexity) to the actual “in-the-basket” look and feel of this Flash application, Picnik is a joy to use inside and out. It simply puts other Web-based image editors to shame — or at least inspires them to do better.

Bestiario

Bestiario.org
Fancy more data visualization? This isn’t as playful as Vimeoland but is substantial in its own right. At first, the lack of anti-aliasing may hurt your eyes, but scroll over (or down) the projects and watch the collection unfold. It’s almost like a very graphical elevator.

Bestiario by you.

It’s fun to move your cursor to the right, whereupon the whole gallery will tilt, as if to look at you askance and ask “Now what?” Well, there’s a pop-out collection of tags on the far right, containing another way to navigate the set. And if you love mathematical visuals…

Phatterism

Phatterism.com
This website is one of the neatest ways I’ve seen (even if somewhat impractical) to share a blog (and other media). Upon visiting, Luis Santi Jr. will greet you with ample white space, fidgeting and occasionally gazing to his left, imploring you to check out his stuff. Like Funnel Design, he’s got his own head-bopping music, which reminds me of the Austin Powers movies.

Click “TXT” and Luis goes to work for you, pulling out an index card of his journal entries. His hand even moves a bit unsteadily, adding to the realistic feel. If you click on a title, you’ll see him scribbling a note, then hold it up for you. The shakes are gone now and the handwriting is obviously a font, but what impressed me is how he presents his comments; they, too, are shown as separate note cards.

Phatterism by you.

What a fun way to show yourself off! For more of Santi’s work, see his main portfolio.

Energi Design

Clickenergi.com
From the get-go, Steve Holmes’ compact Flash website doesn’t have very much, but what’s on it is amazing. He has done video tutorials for well-known stock content provider ArtBeats, and you owe it to yourself to watch his demo reel. The earlier, more up-tempo music he used when I first saw this a while ago was better, but the visuals are captivating nonetheless. If you enjoy type-in-motion videos like Justice’s “DVNO,” this will definitely appeal to you.

Energi Design by you.

Mirror’s Edge

MirrorsEdge.com
It seems like every big game title coming out nowadays needs a Flash website. They’re usually very glossy and don’t have a lot of content, but the techniques involved are well worth experiencing. Mirror’s Edge, which is due for release in November 2008, has already been acclaimed for its aesthetics. Promoting a game with authoritarian cyberpunk gloom but set in a very clean white-blue city, the website complements it almost perfectly.

Mirror

The waving of the main character’s hair and the slow rotation of the city are nice little touches. Games with such a striking and individual look are rare (some of my favorites include the Wipeout series and Ico) and beg to be copied. Of course, the irony is that copycatting leads to angry cries that the spawns are too derivative.

Observe also that the buttons and headers are slightly askew but not horrendously so, lending a certain sense of dynamic imbalance that reflects the fleet-footed parkour seen in the game.

Like.com

Like.com
Visual search continues to rise. A couple of decades ago, the mere idea of searching through thousands of catalogued images seemed improbable. Today, we can enjoy it everyday on websites like Flickr. Websites such as Riya’s Like.com go a few steps further, and they claim to be “slowly innovating” by improving facial and object recognition. Like a handbag but think the material’s a bit too shiny? Narrow not just by color but by style, and feel like you have more investment in (and control over) the overall search process.

Like.com by you.

Someday, this will be commonplace too, but until then, it’s flirty fun to drill through look-alike Halloween costumes to pick out one that’s just right for you.

Navigaya

Navigaya.com
Think visual search is too quiet? Navigaya is another value-added search aggregator with a twist: by default, as you search, a halftone-mottled music video (from YouTube) plays in the background. Most of the selections are electronic dance, and, while not immediately obvious, you can reveal the transport controls by moving your cursor to the top of the screen.

Highlights to look out for: the blurred in-and-out (not just faded) effect for hover tips and certain menus, and dotted icons for arrows and other buttons. It’s a tight, dark design that gives the appearance of staying in the background even when it’s in the foreground.

Overall, Navigaya is too claustrophobic at times for my taste compared to Viewzi, because it mainly shows its search engine results in windows within windows. But if you like your search activities to be an information onslaught, give this a spin.

Navigaya by you.

What common threads can you identify running through different design styles? The surfaces may look different, but the underlying spirits and code may have more in common than you think. Take a moment to gaze, absorb, and mentally deconstruct; it will increase your overall understanding of why great Web design works.

About the author

Torley Wong loves to “amplify your awesome” as a screencast pioneer, virtual worlds expert, and aesthetic enthusiast. His video tutorials, which you can watch on Torley Lives, have been viewed over three million times. (al)


The Ultimate Collection Of Useful Photoshop Actions

20 Oct 2008 21:21:13 | Jacob Gube | Developer s Toolbox,actions,downloads,photoshop | Kommentare

Saving repetitive tasks as Photoshop actions can save you a lot of time, allowing you to automate your work and improve workflow efficiency. A Photoshop action is a recording of a sequence of commands and operations that you can save and access later on.

We’ve searched for the best downloadable Photoshop actions that can help you improve your workflow and perform complex techniques with the push of a button. In this collection, you’ll find more than 350 free hand-picked Photoshop actions that you can use to speed up your graphics creation.

Note: It’s important to check the license of each action set you download and use.

Quick Introduction to Photoshop Actions

For those unfamiliar with Photoshop actions, they’re simply pre-recorded tasks that you can save and reuse anytime. Photoshop actions commonly have an .atn file extension. Installing a Photoshop action for more recent versions of Photoshop is easy: simply drag the .atn file onto the Actions palette or place it directly inside your Adobe Photoshop\Presets\Photoshop Actions folder. For a more comprehensive discussion of Photoshop actions, check out this complete guide to Photoshop actions.

Image Effects and Graphic Creation Actions

Cross-processing ATN
Simulate the Cross-processing (Xpro) photography technique using this Photoshop action.

Cross-processing ATN screen shot.
1 action - Download

Lomo
Give your images a “Lomo” look and feel with this excellent Photoshop action.

Lomo screen shot.
1 action - Download

Lomo Cross-processing
This Photoshop action is a combination of two popular photography effects: Lomo and Cross-processing.

Lomo Cross-processing screen shot.
1 action - Download

Polaroid Generator
Automatically frame an image in a Polaroid border with this set of Photoshop actions.

Polaroid Generator screen shot.
5 actions - Download

Hand-Colored Vintage Photo
This is a handy Photoshop action set for giving images aged, dirty effects.

Hand-colored Vintage Photo screen shot.
4 actions - Download

Vintage
Aly’s Vintage action set is a nice collection of six vintage image effects that you can use on modern digital photos.

Vintage screen shot.
6 Actions - Download

Vintage Wash
Give your images an old, vintage effect with this set of ten different actions.

Vintage Wash screen shot.
10 actions - Download

Old Parchment
Easily create aged paper with this free Photoshop action.

Old Parchment screen shot.
1 action - Download

Simple Stamp Generator
Automatically create a stamp graphic with this action.

Simple Stamp Generator screen shot.
1 action - Download

Pseudo HDR
Mimic the “HDR” photo effect without having to use multiple exposures of the subject.

Pseudo HDR screen shot.
1 action - Download

HDR For Dummies
Here’s another easy-to-use Photoshop action set for giving photos the “HDR” effect.

HDR For Dummies screen shot.
3 actions - Download

IR Actions
Give your photos the popular infrared effect using Dave’s IR Photoshop action.

IR Actions screen shot.
1 action - Download

IR Effect
Here is another method for faking the infrared photographic effect using a Photoshop action.

IR Effect screen shot.
1 action - Download

Photo Effect Action
This Photoshop action can be used for grunge designs.

Photo Effect Action screen shot.
1 action - Download

Comics Photoshop Action
Give your image a comic book look and feel using this Photoshop action.

Comics Photoshop Action screen shot.
1 action - Download

Retro Love
Achieve a retro-colored image effect using the Retro Love action.

Retro Love screen shot.
1 action - Download

Soften Skin Effect
Smoothen skin and remove blemishes with the Soften Skin Effect action.

Soften Skin Effect screen shot.
1 action - Download

Burnt Edges Vignette
This action gives your photos burnt and high-key effects (available for low- and high-resolution images, see the “Try Me”-section).

Burnt Edges Vignette screen shot.
4 actions - Download site, check the “Try Me”-section

Edge Effects
This set of actions allows you to give your images different types of edge effects.

Edge Effects screen shot.
8 actions - Download

B & Big Picture
Create a three-dimensional collage effect using one source image with the B & Big Picture action.

B & Big Picture screen shot.
4 actions - Download

Photo Enhancement and Processing Actions

Black and White Photoshop Actions
This is a set of useful actions for processing black and white images.

Black and White PS Actions screen shot.
8 actions - Download

TLR B&W Toning
TLR B&W Toning is a large action set for enhancing and processing black and white images.

TLR B&W Toning screen shot.
30 actions - Download

Photoshop Postwork Actions
Here is a ton of excellent post-work Photoshop actions.

Photoshop Postwork Actions screen shot.
25 actions - Download

TLR Sharpening Toolkit
This is a useful Photoshop action pack for sharpening RGB, CMYK and monochrome photos.

TLR Sharpening Toolkit screen shot.
33 actions - Download

TLR Tone Enhance
Enhance the tone and color of your images using this Photoshop action set.

TLR Tone Enhance screen shot.
30 actions - Download

Color Enhancing Actions
Here is a variety of actions, such as “colorboost,” “softlight,” and “contrastboost.”

Color Enhancing Actions screen shot.
10 actions - Download

Photoshop Color Actions
A nice collection of color actions to process and enhance your photographs.

Photoshop Color Actions screen shot.
10 actions - Download

Cross Coloring Tools
Here is a set of actions for dark, mid-range, and light cross-coloring of image tone.

Cross Coloring Tools screen shot.
4 actions - Download

Image Enhancing PS Actions
These are ten brilliant image-enhancing Photoshop actions.

Image Enhancing PS Actions screen shot.
10 actions - Download

Watermark Photoshop Action
Automate the watermarking of your images with this set of Photoshop actions.

Watermark Photoshop Action screen shot.
9 actions - Download

Photographers Toolkit
A wonderful set of actions for photographers to enhance photos.

Photographers Toolkit screen shot.
9 actions - Download

Assorted Sets of Actions

Photoshop Actions - 53
This is the 53rd set of Photoshop actions by =night-fate of deviantART.

Photoshop Actions - 53 screen shot.
9 actions - Download

Productions Action
This is a set of useful actions that will simplify your workflow for common Photoshop tasks.

Productions Action screen shot.
20 actions - Download

Photoshop Automator Actions
This is one of the biggest sets of useful actions to cut down on repetitive tasks such as watermarking images, scaling images, and fitting images in the canvas. You need to register before being able to download the set.
90 actions - Download

Photography Action Set
This is an excellent collection of popular photo effects, such as HDR, Lomo, Velvia, Xpro and more.

Photography Action Set screen shot.
8 actions - Download

Rather Large Set of Actions
This is a large collection of useful Photoshop actions.

Rather Large Set of Actions screen shot.
40 actions - Download

Photoshop Actions - 62
Another beautiful set of assorted Photoshop actions by =night-fate.

Photoshop Actions - 62 screen shot.
8 actions - Download

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. (al)


Cellar Heat: A Free WordPress Theme

20 Oct 2008 13:56:26 | Vitaly Friedman & Sven Lennartz | Freebies,downloads,free,wordpress | Kommentare

We love our readers. We respect the hard work of designers and developers across the globe. And we try to do our best to make the Web design community stronger and the Web a little bit prettier. Therefore, we ask talented artists and creative professionals to showcase their skills and release something unique and beautiful as a gift to the community. And when designers agree, truly impressive works see the light of day.

Today we are glad to release Cellar Heat: a free professional WordPress theme created by Evan Eckard. The design of this theme focuses on patterns and typography, and it comes in two flavors. It is designed especially for Smashing Magazine and its readers.

Download the theme for free!

You can use the theme freely for all of your projects without any restrictions. However, it’s forbidden to sell or redistribute the theme without both the designer’s and Smashing Magazine’s permission. Please link to this article if you would like to spread the word. You may modify the theme as you wish, but if you plan to release your modification, please ask our permission first.

Motivation behind the design

Here are some insights into the design and development process from the designer himself.

“After creating the Gumball Special theme based on an older website of mine called Hellbiscuit, I wanted to create a theme similar in layout that wasn’t image-driven like that one. This layout is a unique design that I produced over a couple of years ago, and it’s finally being released.

Wordpress Theme

Wordpress Theme

“At first I wanted to do a dark theme that would contrast with the Gumball Special design. But after creating the dark version, I decided to produce a light version as well. The only real difference between the themes is the images and style sheets. Ninety percent of the code is the same between the light and dark versions.

Wordpress Theme

Wordpress Theme

“Cellar Heat has a few cool features built in: gravatars are enabled, excerpts of previous and next posts appear on each page, the theme is widgetized (although I can’t guarantee they will look hot), no plug-ins need to be installed and a recent comments section appears in the footer.

Feel free to modify the code and design to fit your tastes; just please leave the footer links intact.”

Thank you, Evan. We appreciate your work and good intentions.

Last but not least…

We are regularly looking for creative designers and artists. You may not know it yet, but we may feature you in one of our upcoming posts.

If you would like to release a free high-quality font, a WordPress theme, some wallpapers or an icon set, please contact us. We would like to support you, too (both financially and with the broad coverage of Smashing Magazine).

You may be interested in the following free WordPress themes as well:

(al)


50 Stunning Underwater Photos

19 Oct 2008 23:54:13 | Vailancio Rodrigues | Inspiration,inspiration,photography,underwater | Kommentare

by Vailancio Rodrigues and Smashing Magazine Editorial Team

Of all the different types of photography showcased on Smashing Magazine, underwater photography is probably one of the most difficult to practice. It requires a very specialized equipment and the knowledge of some advanced techniques to get a perfect picture. You need to get the correct exposure, accurate focus, controlled movement of your subject and a pleasing color balance; you also have to deal with low light. Underwater photos offen suffer from loss of color and contrast when taken at a significant depth. Such photos are always adjusted with color balance to help offset the blueish tint of the water.

Because underwater photography is a specialized art, relatively few photographers attempt it. But it offers many exciting and rare photographic opportunities for fresh and truly different vivid images. Most often, photographers use a traditional film or digital camera covered in a watertight casing. Professionals prefer to use special underwater cameras.

Below, we present over 50 beautiful examples of underwater photos, created by artists and professional photographers. All works featured below have the artists and photographers&http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/#8217; names linked to their portfolios or websites. At the bottom of this post you&http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/http://www.smashingmagazine.com/2008/10/19/25-beautiful-examples-of-underwater-photography/#8217;ll fine some links to Flickr groups where you can find more similar and exciting photos.

Also consider our previous showcases:

50 Stunning Underwater Photos

Victor Amor

Screenshot

J.Lambusphoto

Screenshot

Scott (lundysd)

Screenshot

Numera Tokyo

Screenshot

Screenshot

National Geographics

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Neverletmego

Screenshot

Kenvin Pinardy
Dancing underwater.

Screenshot

Screenshot

Screenshot

Sugarock99

Screenshot

Dustin Humphrey

Screenshot

Screenshot

Gattaldo
Water just makes every situation more poetic and graceful.

Screenshot

Anatoly Beloschin

Screenshot

Screenshot

Screenshot

Unknown

Screenshot

Zena Holloway

Camilo Acuña

Screenshot

Eldad Hagar

Screenshot

Oracle

Screenshot

John Carleton

Screenshot

Barbara Cole

Screenshot

Tintinian

Screenshot

Smodger
Colorful scene captured using macro photography technique.

Screenshot

Vanveelen

Screenshot

Tina Owens
Blue crab holding an urchin on its head for protection.

Screenshot

Saul Kondrotas
Jellyfish

Screenshot

Tornicoqui

Screenshot

Maytevidri

Screenshot

Tamergunal

Screenshot

Kawa0310

Screenshot

Paragon

Screenshot

Ian

Screenshot

Nik

Screenshot

Rainan

Screenshot

Fangleman

Screenshot

digivangelist

Screenshot

David Doubilet

Screenshot

Last Click

1938 underwater photography
By Bruce Mozertom.

Screenshot

Further Resources

Links for further photographs and related resources.

  • Life Aquatic
    The Life Aquatic group welcomes pictures of, but not limited to, amphibians, annelids, abalone, anemones, aquariums, aquatic plants, birds, bryozoans, chambered nautilus, cnidaria, coral reefs, crustaceans, coelenterates, ctenophores, fish, freshwater fish, jellyfish, marine mammals, mollusks, octopi, reptiles, sea snakes, sea squirts, sea turtles, sharks, sponges, squid, starfish, tunicates, etc.
  • Aquatic Turtles
    All species of aquatic turtles
  • Aquatic insects
    Photography of benthic macroinvertebrates, including dragonflies, mosquitoes, mayflies, stoneflies, water striders, beetles, etc.
  • Digital Underwater Photography
    Scuba and other underwater photos.
  • Underwater Indoneesia
    Photos taken underwater in Indonesia, including Bali, Java, Moluccas, Papua (Irian Jaya), Kalimantan (Borneo), Sulawesi (Celebes), and other dive spots in Indonesia.
  • Underwater Maldives
    Photos taken underwater in the Maldives Islands.
  • Underwater Videos
    Underwater, scuba, diving or snorkeling videos.

(al)


35 Phenomenal Fractal Art Pictures

17 Oct 2008 13:13:56 | Vitaly Friedman & Sven Lennartz | Inspiration,abstract,fractals,inspiration | Kommentare

By Robert Bowen and Smashing Editorial Team

In the realm of digital art, so many wonderful and playful genres exist that stimulate the imagination, but so few do it with the intricate style of fractal art. Fractal art is achieved through the mathematical calculations of fractal objects being visually displayed, with the use of self-similar transforms that are generated and manipulated with different assigned geometric properties to produce multiple variations of the shape in continually reducing patterns. Sounds extremely technical and not that artistic, true, but these equations create some of the most mesmerizing and inspiring artwork to emerge from the digital art arena.

In this edition of our Monday Inspiration series, we look at awe-inspiring examples of the dynamic digital art sensation that is fractal art with 50 Phenomenal Fractal Art Renders. Setting across the vast sea of cyberspace to find these works was such an amazing task as so many fantastic pieces surfaced. Here are scaled-down versions of some of the most breathtaking ones that were uncovered, though the full-sized versions (linked through the image) offer a much more spectacular view of these mathematical masterpieces.

35 Beautiful Fractal Art Pictures

A Colorful Circle
The play of colors is remarkable.

Fractal Screenshot

Dot Dot Dot
Created by Lynn ON VACATION (Gracie’s mom).

Fractal Screenshot

Fire Snail
Created by Sven Fauth.

Fractal Screenshot

Ring of fire
Created by Carl Jones.

Fractal Screenshot

Experiment 109 - Fractals
Created by Lynn ON VACATION.

Fractal Screenshot

Flaming Eye-Spiral
Created by Sven Fauth.

Fractal Screenshot

I sleep only to dream of you
Created by longan drink.

Fractal Screenshot

Water Lilies
These fractal flames were created by Roger Johnston and are an “extension of the iterated function system class of fractals”.

Fractal Screenshot

Dec 31 Apophysis 1
Julian Bilateral.

Fractal Screenshot

Fractal Screenshot

Fractal Screenshot

Fractal Screenshot

Fractal Screenshot

Quantum Fabric
A pure fractal flame by Cory Ench.

Fractal Screenshot

Nabdrux
An abstract piece of art by mailart-org.

Fractal Screenshot

Fractal Web
Created by Sven Fauth.

Fractal Screenshot

Stefano Menicagli’s
Alien Sphere

Alien Sphere

Grape Jelly Nebula

Fractal Screenshot

Squidswirl2b1
A swirly beauty.

Fractal Screenshot

Silwenka’s
Gloris

Gloris

Peter Sdobnov’s
Treasure in 3D

Treasure in 3D

Keith Mackay’s
Butterflies

Butterflies 2

Peter Sdobnov’s
Cataclysm

Cataclysm

Bobrobon’s
The Human Abstract

The Human Abstract

Eye of the storm
The infinity strikes again.

Fractal Screenshot

xNight’s
Chaotic Love

Chaotic Love

Cygx1’s
The Awakening III - Rebirth

The Awakening III Rebirth

Micheal Faber’s
Counter Spin III

Counter Spin III

LaPurr’s
Subtle Masking

Subtle Masking

Subcarrier’s
Tales from the Trip

Tales from the Trip

Chris Martin’s
Gift Box Marble - Festive Spirit

Gift Box Marble Festive Spirit

Katryna Wade’s
Phoenix Heart Be Reborn

Phoenix Heart Be Reborn

Chris Martin’s
Strawberry Fields Forever

Strawberry Fields Forever

Dirk Monteny’s
Cubik Olympic

Cubik Olympic

Grinagog’s
Curling Conks

Curling Conks

Subcarrier’s
Decay

Decay

Silverb’s
The Icon of Hecate

The Icon of Hecate

Morgan Chase’s
Cosmic Carnival

Cosmic Carnival

Zooreka
UF 109 Project Purple Parasite

UF-109 Project Purple Parasite

AsaLegault’s
Polka Dot Explosion

Polka Dot Explosion

Last Click

Furnace

The last click goes out to a spectacular example of artistic will and ingenuity as demonstrated by Ramiro Perez in a stunning work produced with the fractal program that he himself created. His desire to create such phenomenal work is alone inspiration enough, but throw in his incredible artwork, and he’s practically unstoppable.

Resources

About the author

Robert Bowen is an emerging author, celebrated podcaster and poet and most recently the co-founder and imaginative co-contributor of the creative design and blogging duo at the Arbenting Design Blog, a graphic design, Web design/development and copywriting venture. (al)


Books Giveaway: Winners

17 Oct 2008 09:40:47 | Vitaly Friedman & Sven Lennartz | Events,books,giveaway,smashing | Kommentare

Last week we announced a books giveaway (the page take minutes to load) — we were giving away 10 professional web design-related books that cover the topics CSS, usability, user interface design, innovation, web navigation, web form design and JavaScript programming.

We genuinely appreciate our community and respect our readers for reading us, and now we wanted to give something back. Over 3,500 readers participated in the giveaway. And the winners are now announced in this post.

Books and Winners

# Cover Title
by Author
Description
1 Screenshot Ajax: The Definitive Guide
by Anthony Holdener
Militaru (#491)
2 Screenshot Pro JavaScript Techniques
by John Resig
Adam K. (#1562)
3 Screenshot Thinking with Type
by Ellen Lupton
Brian (#304)
4 Screenshot Geometry of Design: Studies in Proportion and Composition
by Kimberley Elam
Marco (#2590)
5 Screenshot Photoshop CS3 Bible
by Laurie Ulrich Fuller, Robert C. Fuller
Lindsey Lake (#1040)
6 Screenshot Letterhead and Logo Design: v. 9
by Mine
Huy (#3251)
7 Books Giveaway Designing Web Navigation
by James Kalbach
Owen (#881)
8 Books Giveaway

The CSS Anthology: 101 Essential Tips, Tricks and Hacks
by Rachel Andrew
hd-J (#648)
9 Books Giveaway

Layers: The Complete Guide to Photoshop’s Most Powerful Feature
by Matt Kloskowski
Toju (#2353)
10 Books Giveaway

Bierut: 79 Short Essays on Design
by Michael Bierut
wendy wallach (#1729)

Congratulations to the winners! All winners have already been contacted.

Be prepared, we are going to smash you big next time, more giveaways are coming. Therefore maybe it’s a good time to subscribe to our RSS-feed Subscribe to our RSS-feed.


50 Excellent AJAX Tutorials

16 Oct 2008 21:44:38 | Steven Snell | Tutorials,ajax,coding,useful | Kommentare

AJAX provides Web developers with plenty of opportunities to enhance the user experience and improve the performance of their websites. There are countless ways that AJAX can be used, and fortunately there are plenty of good and useful AJAX tutorials out there to help you with your own implementation.

This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. You’ll find tutorials on working with forms, building shopping carts, creating chat features, working with log-ins and usernames and much more.

For more on AJAX see:

Useful AJAX Tutorials

Build an AJAX-Powered Shopping Cart
NETTUTS shows us how to build an AJAX-powered shopping cart using PHP, jQuery and some plug-ins.

AJAX

AJAX Username Availability Checker Using MooTools 1.2
When allowing a user to register a username, you can use AJAX with MooTools to let them check the availability of the username being submitted.

Introduction to AJAX Calls Using jQuery and PHP
If you’re not familiar with using AJAX calls with jQuery and PHP, this is a good starting point.

AJAX and XML: AJAX for Tables
IBM.com has a lot of useful articles on using AJAX. This one shows how to create tabs and tables.

AJAX and XML: AJAX for Chat
Learn how to create a simple chat box for a website.

Creating a Dynamic Poll with jQuery and PHP
This poll is created with PHP, XHTML and jQuery. AJAX effects are used to eliminate the need for a page refresh when the poll is submitted.

RSS AJAX JavaScript Ticker
This AJAX ticker may be useful for displaying news headlines or similar content to visitors.

Building Your First AJAX Application with PHP
An introductory post for getting started with AJAX.

Taking AJAX Further with PHP
Following up on the preceding introduction, this post goes a bit further.

jQuery/JavaScript - Customizable AJAX Pagination
AJAX can also be used to improve the pagination of a website.

One Form, Many Uses - Server-Side jQuery with Jaxer
AJAX can help you get more use out of one form rather than create multiple forms.

How to Call Server-Side Function from Client-Side Code Using PageMethods in ASP.NET AJAX
This post shows a work-around for calling server-side functions from the client side.

Developing Portlets Using JSF, AJAX, and Seam - Part 1, Part 2, and Part 3
An in-depth three-part series to help you create portals.

AJAX Forms with jQuery
Trevor Davis shows how to create a form that will check an email address for validity, makes sure there are no blank fields and display an error if something isn’t right or complete.

Easily Build Powerful Client-Side AJAX Paging Using jQuery
This is another useful tutorial on improving pagination with AJAX.

Use jQuery and ASP.NET AJAX to Build a Client-Side Repeater
This tutorial shows how to improve user experience and reduce server load by using a client-side repeater.

Develop AJAX Applications Like the Pros - Part 1: Using the Prototype JavaScript Library and Script.aculo.us
The first part of this three-part series includes an introduction to the Prototype JavaScript library.

Develop AJAX Applications Like the Pros - Part 2: Using the Prototype JavaScript Framework and Script.aculo.us
The second of the three parts moves on to the Scriptaculous library.

Develop AJAX Applications Like the Pros - Part 3: Use DWR, Java, and the Dojo Toolkit to Integrate Java and JavaScript
The third and final part takes you through the process of setting up a message board.

PHP Components: Autosuggest
Using PHP and AJAX, you can add an autosuggest feature to a search box.

AutoCompleter Tutorial
This tutorial produces a result similar to the preceding tutorial.

A Dynamic AJAX Table Example Using Dojo and RESTful Web Services on Glassfish
This tutorial takes you through the process of creating a dynamic table as you would see on a travel-booking website.

AJAX Overhaul - Part 1: Retro Fit Existing Sites with AJAX and jQuery
Have an existing website that needs some enhancements? This tutorial series takes you through the process.

AJAX Overhaul - Part 2: Retro Fit Existing Sites with jQuery, AJAX, Tooltips, and Lightboxes
The second part of this series takes you further through the process of improving a shopping website with tooltips and lightboxes.

AJAX Overhaul - Part 3: Retro Fit Existing Sites with jQuery, AJAX Tabs, and Photo Carousels
The third part of the series adds some nice AJAX effects with tabs and carousels.

AJAX Overhaul - Part 4: Retro Fit Existing Sites with jQuery and AJAX Forms
The final part of the series looks at enhancing the purchase form.

Auto Populating Select Boxes Using jQuery and AJAX
Learn how to allow users to choose a top-level category in a select box that will trigger the subcategory box to autopopulate.

Using AJAX to Validate Forms
Use PHP and jQuery with some AJAX to create a form that validates the data entered.

Easy AJAX with jQuery
This tutorial includes some introductory information on AJAX and jQuery and will help you get started.

Quick and Dirty AJAX (video)
This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX.

Load Content While Scrolling with jQuery
This tutorial creates a scrolling effect similar to DZone’s.

Wicket - Updating ListViews Using an AjaxLink
Create a table that will update without a full page refresh when a link is clicked.

AJAX for Evil: Spyjax
A look at the dark side of AJAX: viewing browsing habits.

How to Integrate Google Calendar in Your Website Using AJAX
Calendars have a great use in a number of websites.

Edit in Place with AJAX Using jQuery JavaScript Library
Allow a visitor to edit the HTML of a page they are visiting.

Creating an AJAX Rating Widget
Create a rating widget that allows visitors to rate an item with stars or some other measurement.

Use AJAX and PHP to Build Your Mailing List
Allow visitors to subscribe to a mailing list without a page refresh.

Nice AJAX Effect for Message Box Using MooTools
Use this AJAX effect to give visitors a message based on some action.

Build an AJAX Dropdown Menu
This is a fairly simple tutorial on creating a drop-down menu.

Making AJAX Work with Screen Readers
For accessibility purposes, this article covers how AJAX effects can affect users of screen readers.

How to Load In and Animate Content with jQuery
Another NETTUTS tutorial for enhancing a website with jQuery and AJAX.

Continuous Pagination
Another look at the subject of pagination by demonstrating continuous pagination, in which the user keeps scrolling down rather than going to another page.

Making Element Selection and AJAX simple with DOMAssistant
A tutorial to get you started with the DOMAssistant JavaScript library.

Slider Using PHP, AJAX, and JavaScript
Create a nice slider using PHP, JavaScript and AJAX.

ASP.NET AJAX Calendar Extender
Seven different tips and tricks for working with this calendar extender.

Log-in/Sign-up Screen Using AJAX Modal Pop-up Extender
This is a quick look at creating log-in and sign-up forms.

Dealing with Large Data in AJAX
Get your AJAX application to meet your data requirements.

Creating a Gmail-Like AJAX Status Display
Use Prototype and AJAX to create this status display.

Creating an AJAX-Enabled Calendar Control
Another tutorial that focuses on enhancing calendars with AJAX effects.

JavaScript Error Publishing using ASP.NET AJAX
Use AJAX to display errors in code.

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)


jQuery and JavaScript Coding: Examples and Best Practices

16 Sep 2008 17:15:47 | Vitaly Friedman & Sven Lennartz | How-To,coding,dom,jquery,scripting | Kommentare

When used correctly, jQuery can help you make your website more interactive, interesting and exciting. This article will share some best practices and examples for using the popular Javascript framework to create unobtrusive, accessible DOM scripting effects.

jQuery

The article will explore what constitutes best practices with regard to Javascript and, furthermore, why jQuery is a good choice of a framework to implement best practices.


WordPress Developer’s Toolbox

15 Sep 2008 21:59:19 | Steven Snell | Developer s Toolbox,coding,design,development,resources,themes,tools,wordpress | Kommentare

By Steven Snell

Web designers and developers are getting an increasing number of requests from clients for custom theme development, and a growing number of designers are also building their own themes to distribute for free or to sell as premium themes. With all of the WordPress development that is going on, there is a need for an organized collection of resources to educate, inspire and equip developers to improve the quality and efficiency of their work. This post provides all kinds of WordPress-related resources to do just that.

1. Helpful Resources

While there are all kinds of resources available for Web designers and developers, these are especially nice to have on hand when working with WP themes.

The WordPress Help Sheet
This is a nice resource to refer back to when you are developing themes. It’s a one-page collection of PHP snippets and code that will come in handy when designing with WP.

Wordpress Toolbox Screenshot

The Advanced WordPress Help Sheet
A slightly more advanced version of the help sheet.

Wordpress Toolbox Screenshot

Huge Compilation of WordPress Code
A helpful post that provides code snippets for a variety of common functions.

Wordpress Toolbox Screenshot

WordPress Template Tag Reference Guide
This is a handy guide to have nearby when you’re building a theme. It lists the various template tags used by the WP system.

Wordpress Toolbox Screenshot

Unraveling the Secrets of WordPress’ comments.php File
A good starting point for getting more familiar with how comments work in WP and what you can do with them as a designer.

Wordpress Toolbox Screenshot

48 Unique Ways to Use WordPress
Want some ideas on how you can use WP in your next project?

Theme Switcher Reloaded
For displaying demos of multiple themes on your website or blog.

Wordpress Toolbox Screenshot

2. WordPress Tutorials

One of the advantages of using WP is the amount of information that is readily available from others who are willing to share their techniques. For designers and developers, there are tutorials on just about any aspect of working with WP. Here are some that deserve to be highlighted.

2.1. Basics of Creating a Theme

Designing for WordPress
A series written by Chris Coyier of CSS-Tricks that includes videos and articles.

Wordpress Toolbox Screenshot

Developing a WordPress Theme
Helps you with coding each of the necessary WP files.

Wordpress Toolbox Screenshot

How to Create a WordPress Theme from Scratch
If you want to get started with your first theme from scratch, this is a good resource.

Wordpress Toolbox Screenshot

How to Create WordPress Themes from Scratch - Part 1
Another useful article for setting up the basics of a theme from scratch.

Wordpress Toolbox Screenshot

How to Create WordPress Themes from Scratch - Part 2
The second part gets into slicing and coding.

Wordpress Toolbox Screenshot

Dissection of a WordPress Theme - Part 1, Part 2, Part 3, Part 4
A detailed look at what makes up a WP theme and how to create your own.

Wordpress Toolbox Screenshot

So You Want to Create WordPress Themes Huh?
An excellent series of tutorials on just about every aspect of theme development.

Wordpress Toolbox Screenshot

From XHTML/CSS to WordPress
If you already have a site or template built, here is how to convert it to WP.

Wordpress Toolbox Screenshot

2.2. Multiple Hints, Tips, and Tricks

WordPress Theme Hacks
A must-bookmark post at Web Designer Wall that quickly shows the code needed for a variety of tricks when working with WP themes.

Wordpress Toolbox Screenshot

Mastering Your WordPress Theme Hacks and Techniques
Another exhaustive resource with tips on many different aspects of designing on WP.

Wordpress Toolbox Screenshot

The Most Desired WordPress Hacks: 11 Common Requests and Fixes
This post includes a variety of information, including tips on custom fields, creating menus, working with categories and authors and more.

Wordpress Toolbox Screenshot

2.3. Working with Categories

Removing Several Categories from the Loop in WordPress
There will be times when you want to take posts in a certain category out of the loop and show them someplace else. This tutorial shows you how.

Wordpress Toolbox Screenshot

Displaying WordPress Categories in a Horizontal Dropdown Menu
Shows you how to create drop-down navigation using CSS and JavaScript.

Wordpress Toolbox Screenshot

3.4. Navigation Menus in WordPress

Creating Two-Tiered Conditional Navigation in WordPress
Get an advanced navigation menu with the right WP coding and CSS.

Wordpress Toolbox Screenshot

Using Sliding Doors with WordPress Navigation
Use this popular navigation style in your WP themes.

Wordpress Toolbox Screenshot

2.4. WordPress as a CMS

How to Use WordPress as a Membership Directory
This tutorial covers one non-traditional use of WP that may be of interest in some of your projects.

Wordpress Toolbox Screenshot

Using a WordPress Page as Your Homepage
In some projects, you may want a static page to be set as the home page, rather than to display recent blog posts.

Wordpress Toolbox Screenshot

Build a Dynamic Design Portfolio with WordPress
Some specifics for creating an effective portfolio website powered by WP.

Wordpress Toolbox Screenshot

2.5. Working with Comments:

Hack Together a User Contributed Feed with WordPress Comments
Learn how websites in the TUTS family have their community links section set up.

Wordpress Toolbox Screenshot

Adding Form Validation to WordPress Comments Using jQuery
Learn how to validate comment form submissions without reloading the page.

Wordpress Toolbox Screenshot

How to Highlight Author Comments in WordPress
Setting the author comments to stand out from reader comments can make it easier for others to identify your responses to questions and comments.

Wordpress Toolbox Screenshot

How to Separate WordPress Comments and Trackbacks
You may want to give your comment area a cleaner look by keeping pingbacks and trackbacks out of the main comment area.

Wordpress Toolbox Screenshot

How to Add Gravatars to WordPress Themes
You can make your comment section more appealing by displaying gravatars for each commenter.

Wordpress Toolbox Screenshot

2.6. Working with Headers, Footers, and Sidebars:

Client Friendly WordPress Themes: Header.php
If you’re designing themes for clients, here are some things to consider.

Wordpress Toolbox Screenshot

Simple Random Header Image for Your Blog
Provides the code for a randomly rotating header image.

Wordpress Toolbox Screenshot

Creating a Widget-Ready Footer in WordPress
You can give your theme’s users more options by allowing for widgets in the footer.

Wordpress Toolbox Screenshot

Mashing Up Feeds Using Yahoo Pipes
Covers the steps of adding a list of links to your sidebar that consist of posts from various blogs; in this case, blogs from the same network.

Wordpress Toolbox Screenshot

How to Install DomTABs on WordPress
Improve your sidebar by giving visitors more to choose from, without taking up more space.

Wordpress Toolbox Screenshot

WordPress Sidebar Turned Apple-Flashy Using jQuery UI
Create a more attractive sidebar that will be noticed by visitors.

Wordpress Toolbox Screenshot

2.7. Web 2.0 Integration

Creating a Life-Stream and Social Media Hub
A look at the process of setting up a personal website that incorporates your social media accounts, such as Twitter, Digg, StumbleUpon and Flickr.

Wordpress Toolbox Screenshot

Create a YouTube Section with WordPress
Video is becoming a bigger part of blogs and websites, and this tutorial will help you create an attractive section for YouTube videos.

Wordpress Toolbox Screenshot

2.8. Styling

Styling Individual Posts Using the_ID
If you want to get creative, individual posts can be styled differently by using the post ID assigned by WP.

Wordpress Toolbox Screenshot

Multiple WordPress Page Layouts in One Single Template
Create a more flexible theme that changes the layout based on various factors.

Wordpress Toolbox Screenshot

2.9. WordPress SEO

WordPress SEO
Although SEO involves much more than how a website is built, development can have a big influence on rankings down the road.

Wordpress Toolbox Screenshot

Blocking Your WordPress Categories and Archives from Google
A simple step that can improve your website’s SEO.

Wordpress Toolbox Screenshot

WordPress and SEO
A good primer on developing search-friendly websites.

Wordpress Toolbox Screenshot

SEO for WordPress Tips
Another article that looks at SEO from the perspective of a WP designer or user.

Wordpress Toolbox Screenshot

2.10. Working with Feeds

Creating Posts that Only Appear in RSS
Send special subscriber-only content that won’t appear on your front page or archives.

Wordpress Toolbox Screenshot

Publishing External RSS Headlines to Your WordPress Site
A simple tutorial that will show you how to add RSS headlines to your website.

Wordpress Toolbox Screenshot

2.11. Working with Featured Posts

How to Create a Featured Post Carousel for WordPress
Displaying featured content on the front page is pretty common right now. This tutorial shows you how to set that up for yourself.

Wordpress Toolbox Screenshot

Create a Tabbed Featured Post Area in WordPress
Give your theme an attractive look and feature the appropriate content.

Wordpress Toolbox Screenshot

2.12. Working with Custom Fields

Using WordPress Custom Fields: Introduction
If you’re not familiar with using custom fields, this is a good place to start.

Wordpress Toolbox Screenshot

WordPress Custom Fields: Laying Text Over Your Lead Graphic
A great way to improve the look of your theme by taking advantage of custom fields.

Wordpress Toolbox Screenshot

2.13. Other Tutorials

13 Tags to Delete from Your Theme
Page load time can easily be an issue with more involved WP themes. You can help the cause by getting rid of unnecessary calls to the database.

Wordpress Toolbox Screenshot

How to Make a Random Post Button
A different functionality that may be right for one of your upcoming themes.

Wordpress Toolbox Screenshot

Customize Your 404 Page
You can improve the usability of your blog by customizing the 404 page that visitors may find from time to time.

Wordpress Toolbox Screenshot

Adding an Author Page to Your WordPress Blog
You’ve probably seen blogs that have a specific page for each author. Here’s a tutorial on setting that up.

Wordpress Toolbox Screenshot

How to Install WordPress Manually
Most hosting companies offer an easy WP installation. If yours doesn’t, this post can help.

Wordpress Toolbox Screenshot

Adding Thumbnails to Your Posts in WordPress
Thumbnails are popular, especially for magazine themes. Here’s an explanation of how they can be added.

Wordpress Toolbox Screenshot

How to Easily Make WordPress Archives that Rock
Provides some code and strategy for setting up effective archives.

Wordpress Toolbox Screenshot

3. Articles from the Official WordPress Codex

The official WordPress Codex provides a wealth of information for developers, as well as for WP users in general. This list is just a sample of some of the articles that are most relevant to developers.

Wordpress Toolbox Screenshot

Theme Development
This article will cover the basics of designing themes for WP, and it links to a number of additional resources on the subject.

The Loop
Get the details on the loop, one of the most essential elements of the theme system.

Creating an Archive Index
There are a lot of different options when working with archives in theme development. This article is a good starting point.

Customizing Your Sidebar
Sidebars provide developers with plenty of options for experimentation and tweaking.

Conditional Tags
To create versatile WP themes, understanding conditional tags is essential.

Stepping into Templates
The basics of how templates work in WP.

Template Hierarchy
Explains how templates work together in a theme.

Template Tags
WP relies on a variety of template tags throughout a theme.

Using Custom Fields
Custom fields open up a whole new world of opportunities for developers.

Search Engine Optimization for WordPress
This article contains some general SEO information, as well as some that is specific to WP themes.

4. Blank Themes

It’s possible to save yourself a considerable amount of time in development by starting with a blank theme. Blank themes are not intended to be used as they are, but rather as a starting point or framework to increase efficiency with the tasks that are common to the development of almost every WP theme.

Whiteboard
A free WP theme framework.

Wordpress Toolbox Screenshot

Starkers
A completely naked WP theme from Elliot Jay Stocks. (Note: some users are having problems with Starkers on WP 2.6. Improvements are hopefully soon to come.)

Wordpress Toolbox Screenshot

Naked
A starter theme with only very basic styling.

Wordpress Toolbox Screenshot

The Starter Theme Project
This is basically an empty template. It is not a theme that is intended to work out of the box.

Wordpress Toolbox Screenshot

5. WordPress Design Inspiration

Readers of Smashing Magazine are obviously familiar with excellent sources of design inspiration. The resources listed here will help you if you are specifically interested in seeing what others have been able to do on the WordPress (WP) platform.

We Love WP
The best gallery dedicated strictly to websites powered by WP. It is updated rather frequently and has a decent-sized archive.

Wordpress Toolbox Screenshot

The Gallery at WPCandy
A bit of a smaller gallery than We Love WP, but still worth checking out if you’re interested in seeing what others are able to do with WP.

Wordpress Toolbox Screenshot

Unmatched Style
This design gallery has a tag for WP-powered sites.

Wordpress Toolbox Screenshot

CSS Glance
A large (and continually updated) category for WP.

Wordpress Toolbox Screenshot

45 Beautiful and Creative WordPress Designs
A mini-gallery from design blog Six Revisions.

Wordpress Toolbox Screenshot

25 Outstanding WordPress Designs
Another mini-gallery from Six Revisions.

Wordpress Toolbox Screenshot

Creative Examples of WordPress Theme Modifications
An interesting blog post that shows sample theme designs compared to the themes that were their starting point.

Wordpress Toolbox Screenshot

60+ Unusual WP Blog Designs
Noupe put together a bunch of designs that stand out.

Wordpress Toolbox Screenshot

6. Icons for Your Themes:

Improve the look of your theme by using some icons that are available for free.

RSS: Best Design Practices and Icons
A collection of RSS-feed icons from Smashing Magazine.

Icons Pack

110+ Free RSS Icons to Show Off Your RSS Feed
A nice collection that will give you some options when it comes to RSS.

Wordpress Toolbox Screenshot

Fresh, Free and Gorgeous RSS/Feed Icons
A previous collection from Smashing Magazine.

Wordpress Toolbox Screenshot

Cheers: A Free “Social” Icon Set
12 icons of glasses and social media from Smashing Magazine.

Wordpress Toolbox Screenshot

Feed Icons
If you’re looking for the standard RSS icon, get it here.

Wordpress Toolbox Screenshot

7. Places to Distribute Free Themes You Have Developed

Many theme developers choose to distribute their themes from their own websites or blogs because it draws more visitors and gives them control over the distribution. However, there are some other places where you can try to get your theme listed. Some will simply link back to your website, and others will offer visitors direct downloads from their own websites. In general, make sure that you’re familiar and comfortable with the directory or gallery before submitting your theme. Some have been known to distribute themes with sponsored or hidden links.

Official WordPress Theme Directory
There are around 300 themes included at the moment.

Wordpress Toolbox Screenshot

Weblog Tools Collection
This blog announces new themes and plug-ins to its 11,000+ subscribers.

Wordpress Toolbox Screenshot

8. Galleries of Free Themes that Accept Submissions from Designers:

9. Marketplaces to Sell Your Themes

Most developers of premium themes will sell them from their own websites or blogs or, if they have several for sale, set up websites specifically for marketing and selling them. However, there are also some marketplaces that will sell your theme for you, in exchange for a cut of the profit.

Theme Forest
A new and already popular marketplace for templates and themes, including those for WP.

Wordpress Toolbox Screenshot

Templamatic
A similar marketplace for themes and templates.

Wordpress Toolbox Screenshot

WPforSale
A marketplace for premium themes and plug-ins.

Wordpress Toolbox Screenshot

For more WP-related content at Smashing Magazine, see:

About the Author:

Steven Snell is a designer and freelance blogger. He actively maintains his own blog at Vandelay Design.


Tribute To Graffiti: 50 Beautiful Graffiti Artworks

15 Sep 2008 00:50:56 | Vitaly Friedman & Sven Lennartz | Monday Inspiration,culture,graffiti,inspiration,urban | Kommentare

Street culture and graffiti are well-known for being provocative, appealing, bold and uncompromising. Originally used by gangs to mark their territory in some urban area, graffitis have now become a rich medium for unrestricted expression of ideas and statements. In fact, creative designers and artists across the globe use this form of art to deliver their message and showcase their work.

Probably the most prominent graffiti artist is Banksy, a famous pseudo-anonymous British artist whose works focus on topics such as politics, culture, and ethics. His art has appeared in cities around the world; it’s worth mentioning that Banksy does not sell photos of street graffiti or mount exhibitions of screenprints in commercial galleries. You can explore Banksy’s works in the Time’s slideshow The World According To Banksy. However, many different artists explore graffiti in a variety of ways.

In this episode of Monday Inspiration series we are presenting a tribute to street art and graffiti — over 50 examples of beautiful and impressive graffiti artworks. Hopefully everybody will find some inspiration at least in some of the works showcased below. Feel free to explore the works of artists by following the links to their sites.

Graffiti Art

Michael.jh

Mrzer

Deuce 7

Graffiti

zevs

Graffiti

imminentdisaster

Graffiti

Banksy

Graffiti

Graffiti

Marquis Lewis

Graffiti

Retna Saber Revok SeventhLetter

Graffiti

Mr Mucho

Graffiti

unknown

Graffiti

Wall Spankers Project
Our goal is to bring together international artists and designers in a collaborative, sharing environment. The website serves as an online gallery showcasing the artists involved in the sticker swap. Currently 4 issues are released.

Reone

Reone

Muck

Graffiti

obey

Graffiti

Lady Pink: Sandra Fabara
Lady Pink is a legend. In the 1980s she made a name for herself as one of the only females capable of competing with men in the graffiti subculture.

Lady Pink: Sandra Fabara

Xenz: Graeme Brusby

Graffiti

Graffiti

Graffiti

SABER

Saber

Saber

6emeia

Graffiti

Graffiti

Vancouver Street Art

Graffiti

Graffiti

Graffiti

Graffiti

Collective Graffiti, Chiado, Lisbon

Graffiti

Paopao

Jakedobkin

Lois In Wonderland

Wouldpkr

Hammotime

Abigaelarachnid

Newfie Bullet

K.E.L.P

Newfie Bullet

Loupiote

Stuart Herbert

Seetwist

Wickedcliche

Akbar Simonse

Marco

Josepalencia

Sindios69

Tonogayora

Guy Fawkes

Bitzi

Kekko73

Cloud-TA

Loupiote

Laughing Squid

Further Resources

Related Articles

You can also take a look at the following related articles:


Health And Beauty Photoshop Brushes Set

12 Sep 2008 09:56:20 | Vitaly Friedman & Sven Lennartz | Freebies,brushes,downloads,free,photoshop | Kommentare

In our previous releases we focused on icons and Wordpress themes; however, there is a variety of further tools that graphic designers need on a regular basis; for instance, Photoshop brushes. You can find dozens of our other releases in our Freebies section.

Grunge Photoshop Brushes

Today we are happy to release Health and Beauty Photoshop Brushes: a free set of 67 Photoshop brushes ranging in resolution from 69 to 2463 pixels. The set is compatible with Adobe Photoshop 7.0, CS, CS2 and CS3 (you can use it in Photoshop Elements, Paint Shop Pro, GIMP and Paint.NET, too). The brushes were designed by Silvia Bukovac Gasevic, the creative mind behind graphics-illustrations.com, especially for Smashing Magazine and its readers.

Download the Set for Free!

You can use the set for all of your projects for free and without any restrictions. However, it’s forbidden to sell them. Please link to this article if you would like to spread the word.

Motivation Behind the Design

As usual, here are some insights from the designer herself:

“It’s just another Photoshop brushes set, believe it or not. Some might say just that, and truly so. This may be just another Photoshop brushes set, but like anything else in our lives, it all depends on how you approach it and how you use it.

“As you will see, there are different shapes, subjects and topics covered in this set of 67 Photoshop brushes. The theme of this set is health and beauty. All of the brushes were created from scratch, and all of you, I hope, who do vector graphics from scratch will know and appreciate the work behind them. But what can we do? We all know what Smashing Magazine’s standards are and I wouldn’t dare to send Vitaly anything less than this.

My goal was not only to create a brush set that would help designers decorate or “fill in” their health and beauty-related artwork, but to create a collection of inspirational artwork; brushes that might be used as a starting point for times when the muse is not around and one just needs a bit of inspiration. What they are supposed to be is a little push, a starting point for those moments when there’s just a blank screen in front of you and a total lack of ideas. The idea was to enable designers to open the set in Photoshop, pick one of the brushes and start from there.

So, here it is. If you ever find yourself in a situation where you have to do some health and beauty-related design project (but not only that, of course), these will be really helpful. I hope I have achieved at least a little of what I aimed for with this set. It’s here for you to use, as always, with no restrictions at all. You can look for more on my site and I would be more than happy to hear from you. All of the sets are compatible with Photoshop 7.0 up to CS3, Mac and PC alike.

More of my work can be seen on my blog at graphics-illustrations.com.”

Last But Not Least

We are constantly looking for creative designers and artists. You may not know it yet, but we may feature you in one of our upcoming posts.

If you would like to release a free high-quality font, a Wordpress theme, Photoshop brushes, a Drupal theme, some wallpapers or an icon set, please contact us. We would like to support you (both financially and with the broad readership of Smashing Magazine).


75 (Really) Useful JavaScript Techniques

11 Sep 2008 18:51:36 | Vitaly Friedman & Sven Lennartz | Developer s Toolbox,download,free,javascript | Kommentare

By Glen Stansberry and Smashing Editorial Team

Developers and designers are using more and more JavaScript in modern designs. Sometimes this can be a hindrance to the user and take away from the simplicity of the design, and other times it can add greatly to the user’s experience. The key is a) adding the right amount of JavaScript, and b) using the right JavaScript techniques. We have already collected various JavaScript techniques in the past – now it’s time for a new portion of JavaScript.

Thanks to the Web’s widespread adoption of JavaScript, JavaScript libraries have sprung up to help make design and development easier. Here are a few of the major JavaScript libraries that developers use: jQuery, Prototype, Scriptaculous, mootools, Dojo. These frameworks have thriving communities whose members have developed countless plug-ins that can greatly add to the JavaScript framework.

However, sometimes we need JavaScript solutions that are a little more involved or specific. Here are 75 more handy JavaScript techniques that have made websites much sleeker and more interesting.

75 Useful JavaScript Techniques

Textboxlist Auto-Completion
One of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading.

TextboxList

Hyphenation in Web
This project collects working solutions for automatic hyphenation in (X)HTML pages. For different human and script languages, server- and client-side. A JavaScript-solution, called Hyphenator.js is available as well. Hyphenator.js brings client-side hyphenation of HTML-Documents on to every browser by inserting soft hyphens using hyphenation patterns and Franklin M. Liangs hyphenation algorithm commonly known from LaTeX and Openoffice.

Showcase of Beautiful Album and CD covers- Hyphenation in Web

SocialHistory.js
SocialHistory.js enables you to detect which social bookmarking sites your visitors use. It cannot enable you to see all of the user’s history. It checks, in a 20-questions style, if the user has been to a particular URL: It’s hit or miss. SocialHistory.js has a big list of the most popular social bookmarking sites which it checks against. An alternative approach.

Useful JavaScript Techniques - SocialHistory.js

addSizes.js
This small JavaScript takes care of an automatic link file-size generation. For instance, if you have large .mp3- or .pdf-files offered on your page, this script automatically checks the size of the file and displays the format and the file size in brackets.

Useful JavaScript Techniques - addSizes.js

syntaxhighlighter
SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.

Useful JavaScript Techniques - syntaxhighlighter

samaxesjs
samaxesJS is a set of utilities and controls, written in JavaScript, for building rich interactive web applications. The TOC control dynamically builds a table of contents from the headings in a document and prepends legal-style section numbers to each of the headings: adds numeration in front of all headings, generates an HTML table of contents, degrades gracefully if JavaScript is not available/enabled.

Useful JavaScript Techniques - samaxesjs

Step by Step
This script allows you to show and explain visitors what your page has for them. You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.

Useful JavaScript Techniques - Step by Step

MoreCSS
MoreCSS is a small, cross-browser compatible JavaScript library which enables you to create tab menus, tables and lists with “zebra”-style as if you were using regular CSS. It’s enough to include the library in HTML and use CSS for general purpose design elements.

Useful JavaScript Techniques - MoreCSS

Facelift Image Replacement
Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (h1, h2, etc.) to span-elements and everything in between!

Useful JavaScript Techniques - Facelift Image Replacement

CSS Sprites2
Cross-browser functionality is a bit of a freebie; jQuery works across most modern browsers, so everything you see here works in IE6+, Firefox, Safari, Opera, etc. We’ve also accounted for multiple graceful degradation scenarios.

Useful JavaScript Techniques - CSS Sprites2

jParralax
“Parallax is [a jQuery library that] turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.” Think of looking through a camera and having layers of objects at various distances moving around. This library achieves that effect using multiple using static images, one for each layer.

Useful JavaScript Techniques - jParralax

ddMenu - Context Menu Script
ddMenu is a simple MooTools-based script to create you’re own context menus. Press the Crtl-key and right click to switch between ddMenu and browser default context menu. Press the Shift-key and right click to open ddMenu beside the browser default context menu.

Useful JavaScript Techniques - ddMenu - Context Menu Script

js-hotkeys
jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination. Alternative approach.

Useful JavaScript Techniques - js-hotkeys

BarackSlideshow
An elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Galleria
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Useful JavaScript Techniques - Galleria

History Keeper
unFocus History Keeper is a JavaScript based library for managing browser history (back button) and providing support for deep linking for Flash and Ajax applications. It enables back button support, for client-side applications, has a hash-based deep linking (Anchor Style - index.html#foo=bar) and is event-driven - Subscriber pattern. Currently the script works well in all modern browsers.

Useful JavaScript Techniques - History Keeper

date.js
Datejs is an extensive open source JavaScript Date library for parsing, formatting and processing time and dates.

Useful JavaScript Techniques - date.js

Lightview
Lightview is another script that create modal windows on a web-site. It has a smart image preloading, adjustable rounded corners, without PNGs and content resizes to always fit on your screen. The script can be used for presentations, single images, Quicktime-files, Forms, Iframes, Inline content and Flash-files.

Useful JavaScript Techniques - Lightview

Coda popup bubbles

The software company Panic has a beloved Mac application for developers called Coda. Coda has an incredibly elegant design, and one of the subtle JavaScript effects that have been added to it is a stylized pop-up bubble. The blog jQuery for Designers has created a script that combines jQuery with custom code to replicate the feature used on the Coda website. The effect is subtle and elegant and greatly adds to the user’s experience.

Coda Bubble

ajax im
With the popularity of Web-based IM clients, like meebox, many developers want to add a JavaScript IM client of their own. Ajax IM is a library dedicated to creating an Ajax IM client that works out of the box. The script is a relatively large one, but it can be a nice effect for some websites that need more interaction with their users.

LiveValidation

This is a handy gem for any web developer who uses forms. Trying to create an intuitive sign-up form can be a chore with all the different types of validation that need to happen. Also, creating a faster, more intuitive form with JavaScript can be tricky, too. Thankfully, LiveValidation has taken the guesswork out of the process and created a tiny, unobtrusive script that can take the pain out of form validation. If you’re a Ruby on Rails developer, LiveValidation comes in two forms: either with Prototype (ideal for Ruby on Rails) or one that can be used as a stand-alone package.

Live Validation

Ajax AutoSuggest
Like TextboxList’s autocompletion script, Ajax AutoSuggest is a tasteful and refined autosuggest script. The script is quite tiny, weighing in at just under 9k, and adds a very nice touch to any search form.

Ajax Auto Suggest

FancyUpload
This is an upload script that shows the progress of files you are uploading. It’s perfect for any upload form and even allows for multiple uploads at the same time. You can limit the size of the uploaded file as well as restrict the type of file that can be uploaded. The only requirement that FancyUpload has is that your users have installed Flash, which has a 95% penetration among Web users.

Fancy Upload

Taggify
Taggify is a bit different in implementation than the other JavaScripts listed. Taggify is a hosted solution for adding pop-up widgets to photos. Instead of having to download a script and host it on your site, you can just add a tiny in your tag, and you’ll have the power of Taggify installed on your site. Using Taggify is interesting; it adds notes and other useful information to photos.

Think of it as a souped-up version of the note-adding feature for Flickr images. You can add any HTML to the Taggify note, creating a nice informational page to accompany any image that needs a bit more explanation.

Taggify

AmberJack
AmberJack is one of the more interesting and compelling JavaScript techniques. Website tours are extremely beneficial because they can help familiarize users, showcase features and products, and many other things. Possibly the best part about AmberJack is that nothing has to be installed or learned to start creating website tours. AmberJack provides a way for website and product owners to quickly and easily create website tours with JavaScript. It’s an amazingly tiny download, at only 4 KB.

Sliding Tabs
This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution.

JavaScript Image Loader
If you’re looking for a more intuitive way for users to upload and preview images on your website, the JavaScript Image Loader (demo) might fit the bill. The JavaScript Image Loader is a great way to show your users an image before it has uploaded, and it can also provide other information about the image if desired.

swfIR
swfIR is an interesting concept as it uses a combination of Flash and JavaScript and adds image manipulation functionality to it. Once swfIR is installed, it adds a with the class “swfir” around the image. swfIR can add almost any manipulation to an image. An especially useful feature of the script is its ability to automatically resize images based on the size of the page. When you resize the text on the page, the image resizes proportionally with the layout. By resizing the picture along with the text, the design feels much more cohesive.

swfIR

MooFlow
For fans of Apple’s Cover Flow feature in Leopard, MooFlow is taken directly from Apple’s playbook. MooFlow is a JavaScript gallery script that uses MooTools and adds a bit of JavaScript magic to make beautiful image galleries, complete with a slider that mimics Cover Flow.

Just like with Cover Flow, you can manipulate MooFlow’s gallery layout and functionality. You can toggle full-screen mode, image reflection, and autoplay. MooFlow is quite configurable and easy to set up because it just grabs all of the images within an element.

MooFlow

amCharts
This script is a chart generator that runs off of a combination of flash and JavaScript. You can generate virtually any type of graph or chart with the script, and can even use .csv and xml files to pull the data from. With amCharts, you can generate graphs in the form of Column & Bar, Pie & Donut, Line & Area and Scatter & Bubble.

AM Charts

GreyBox
GreyBox’s website hails the JavaScript pop-up window as “A pop-up window that doesn’t suck,” and for good reason. GreyBox does everything that a modal window should do. It can display pictures, websites, and just about any other content you can think of.

Using GreyBox is incredibly easy because once you’ve included the JavaScript file in the header, the only thing left to configure is adding a tag to whatever element you want to display in the window.

Mailist
While Mailist isn’t a full-blown AJAX contact form, the tiny script is exactly what most Web developers need to quickly store email addresses for things like beta sign-ups and other expression-of-interest forms. It even has a back end for administering things like email backups and editing the look of the form.

SWFObject
SWFObject is a tiny little Flash player that uses JavaScript to overcome many of the obstacles that can’t be solved by markup alone. The player is a tiny download, only 9.5 KB (or 3.8 KB GZIP’ed). SWFObject prides itself on its compatibility with modern browsers, and it actually uses JavaScript to help detect which Flash player version to use and to avoid outdated Flash plug-ins that break Flash content.

SWF Object

PlotKit
PlotKit is a JavaScript chart-plotting script that relies on the tiny JavaScript framework Moochikit. PlotKit is an exceptional library for quickly plotting all sorts of graphs.

PlotKit

JavaScript tabifier
The JavaScript tabifier is a nifty little script that allows you to quickly and easily create tabs for your content. All that is required to use tabifier is to include the JavaScript and add a

with the class “tabber” surrounding the tabbed content, and then add the class “tabbertab” and the title for the
in what shows as the tab’s title. You can even use advanced techniques, such as adding cookies to the tabs, dynamically changing the tabs, and setting a default tab.

Tabifier

FancyZoom 1.1
Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom is providing a smooth, clean, truly Mac-like effect.

It is focused on a smoothest, polished zooming animation and automatically scales images from any image link, with no HTML changes. The script also preloads full-size images in the background on link mouseover and requires no Javascript libraries. FancyZoom requires only two lines of code in your HTML-files.

Useful JavaScript Techniques - FancyZoom 1.1

A Mac OS X-style Dock In JavaScript
Apple’s Mac OS X operating system is renowned for its fluid graphical effects. One impressive feature is the dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily.

Useful JavaScript Techniques - A Mac OS X-style Dock In JavaScript

fValidator - An open source (free) unobtrusive javascript tool for easy handling form validation
fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). Alternative jQuery Plugin.

Useful JavaScript Techniques - fValidator - An open source (free) unobtrusive javascript tool for easy handling form validation

jQuery Interactive Date Range Picker with Shortcuts
An advanced jQuery date picker that is optimized for quickly selecting a date from a list of preset dates/ranges, and we added smooth transitions when additional options are revealed.

Useful JavaScript Techniques - jQuery Interactive Date Range Picker with Shortcuts

Raphaël
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the Web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library. Raphaël uses SVG and VML as a base for graphics creation.

Useful JavaScript Techniques - Raphaël

NoGray Time Picker
This time picker utilizes a simple drag and drop interface. To select the time users can just drag the minutes or hour of a clock.

Useful JavaScript Techniques - NoGray Time Picker

Yetii - Yet (E)Another JavaScript Tab Interface
Yetii is a simple, yet functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independend tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.

You can link to certain tab on page A from page B via URL parameter and you can turn on tab persistence feature, so the most recently clicked tab is stored inside a cookie and remembered between page refresh.

Useful JavaScript Techniques - Yetii - Yet (E)Another JavaScript Tab Interface

Calendar
Calendar is a Mootools Javascript class that adds accessible and unobtrusive date-pickers to your form elements.It has highly configurable inputs and selects, multi-calendar support (with padding), variable navigation options and multi-lingual and fancy date formatting.

Useful JavaScript Techniques - Calendar

Starbox
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well.

Useful JavaScript Techniques - Starbox

Magic Zoom
Magic Zoom is a JavaScript zoom tool. It’s the best way to display images in incredible detail. Users do not need to click anything - they just move their mouse over the image to see every detail of your product.

Useful JavaScript Techniques - Magic Zoom

Magic Magnify
Magic Magnify is a Flash zoom tool. It’s an elegant effect to view images with a magnifying-glass. Upon hover over the image, the user sees the close-up detail of the product. Price: $28 / £15 / €18.

Useful JavaScript Techniques - Magic Magnify

Carousel.us
Carousel.us is a Javascript 3D carousel, using either the prototype.js and scriptaculous.js or mootools.js frameworks. It also uses PHP Easy Reflections v3 by Richard Davey.

Useful JavaScript Techniques - Carousel.us

slideshow
Slideshow is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. Slideshow is the result of many trials in code attempting to create a javascript class that was lightweight, unobtrusive, a snap to setup (but also highly configurable), extendable and - built using the javascript framework with the best effects - visually very impressive. Slideshow began as a side project by Aeron Glemann, and is now open source with an MIT-style license.

Useful JavaScript Techniques - slideshow

jgrousedoc
jGrouseDoc allows developers to produce documentation for their javascript code based on javadoc-like comments embedded into the source code. It allows documentation of classes, regardless what kind of library/technology was used to implement OOP. The script also allows documentation of multiple syntaxes that could be used to invoke a function/method. The output is customizable using CSS and Velocity templates or XSLT.

Useful JavaScript Techniques - jgrousedoc

Lightbox 2
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Useful JavaScript Techniques - Lightbox 2

Control.Window
Control.Window is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are included.

Useful JavaScript Techniques - Control.Window

SimpleModal
SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

Useful JavaScript Techniques - SimpleModal

Creating a carousel with MooTools
You’ve probably seen it on various websites: those neat little inline slideshows that browse you through a gallery of images (or content if you want, too). Most people simply copy the code to use it on their own site, but I believe that by making it yourself, you learn new techniques and gain new insight. Therefore I’ll walk you through this tutorial that teaches you how to achieve this through the use of CSS and MooTools.

Useful JavaScript Techniques - Creating a carousel with MooTools

Unobtrusive Expand and Collapse Navigation
A tutorial that displays how to to create a vertical navigation that will expand and collapse to show and hide sub-navigation using only unordered lists and as few class/id names as possible.

Useful JavaScript Techniques - Unobtrusive Expand and Collapse Navigation

Image Cross Fade Transition
Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer - either in CSS or with the simplest of JavaScript. Today’s challenge is the rollover transition.

Useful JavaScript Techniques - Image Cross Fade Transition

Slider Gallery
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.

Useful JavaScript Techniques - Slider Gallery

FancyZoom meets jQuery // Ordered List // We Make The Web Beautifully Simple

Useful JavaScript Techniques - FancyZoom meets jQuery // Ordered List // We Make The Web Beautifully Simple

Build An AJAX Powered Shopping Cart
The goal of this tutorial is to show you how to build an AJAX powered shopping cart. However, it will not be production ready. The back end requirements vary from site to site far too much to write an effective tutorial. Instead, we are going to focus on the AJAX parts.

Useful JavaScript Techniques - Build An AJAX Powered Shopping Cart

jQuery iPod-style Drilldown Menu
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

Useful JavaScript Techniques - jQuery iPod-style Drilldown Menu

Load Content While Scrolling With jQuery
This script allows to load the content “on the fly” - once th visitors has scrolled vertically to the end of the content block. “I always loved the dZone’s Ajax content loading while scrolling feature and created a similar one using jQuery.”

Useful JavaScript Techniques - Load Content While Scrolling With jQuery

JavaScript Tooltips
This tutorial describes how to create a nice, lightweight JavaScript tooltip. By Michael Leigeber.

Useful JavaScript Techniques - JavaScript Tooltips

Newsticker
Antonio Lupetti re-creates a news ticker which is similar to the one used on Newsvine. Mootools in use.

Useful JavaScript Techniques - Newsticker

jQuery virtual tour
This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

Useful JavaScript Techniques - jQuery virtual tour

Flexigrid
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Useful JavaScript Techniques - Flexigrid

tableFilter
This script allows users to filter and sort even large tables quickly and in an interactive way.

Useful JavaScript Techniques - tableFilter

Row Locking with Checkboxes
“I had my function set up so that if any part of the row was clicked, the checkbox would check. When I clicked the actual checkbox, it would show a checkmark, but since the checkbox is a part of that row, my function would run, too, which would then think it’s time to uncheck the checkbox. In a fraction of a second, it would look like the checkbox never checked, but the row changed color anyway, sending the wrong signals to the end user.”

Useful JavaScript Techniques - Row Locking with Checkboxes

jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. It has the ability to style icons based on file extension, uses AJAX to fetch file information on the fly, has a customizable expand/collapse event and support single- and multi-folder views.

Useful JavaScript Techniques - jQuery File Tree

Proto.Menu, prototype based context menu
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Pricing Matrix
This tutorial explains how to create a matrix that would give an indication of relationships among the information provided.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Toggling Announcement Slider
“A few of my customer have asked for me to create a subtle but dynamic (…I know…) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick from GoDaddy’s playbook, I put together an announcement slider that toggles on click. Thanks to MooTools 1.2, this was a breeze.”

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Tutorials

Show/hide a Login Panel using Mootools 1.2
“Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest Wordpress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.”

Images slider to create Flickr-like slideshows
If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework. “Since long time I was looking for a simple way to implement a Flickr-like slideshow (”image carousel”) and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.”

Create an apple style menu and improve it via jQuery
“Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.”

Useful JavaScript Techniques - Create an apple style menu and improve it via jQuery

Creating a Slick Auto-Playing Featured Content Slider
By Chris Coyier.

Useful JavaScript Techniques - Creating a Slick Auto-Playing Featured Content Slider

Build An Incredible Login Form With jQuery
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we’ll also animate it

Useful JavaScript Techniques - Build An Incredible Login Form With jQuery

Create a Slick Tabbed Content Area using CSS & jQuery
“One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.”

Useful JavaScript Techniques - Create a Slick Tabbed Content Area using CSS & jQuery

Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
Learn how to create a lightweight, intelligent “accordion” effect using the Prototype and Scriptaculous libraries.

Useful JavaScript Techniques - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

Create a Simple, Powerful Product Highlighter with MooTools
This tutorial will help you find your inner cow by introducing you to one of the most powerful and modular javascript libraries—MooTools. You’ll create a flexible tool for highlighting your sites products or services using the MooTools javascript framework.

Useful JavaScript Techniques - Create a Simple, Powerful Product Highlighter with MooTools

Creating a Dynamic Poll with jQuery and PHP
When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

Useful JavaScript Techniques - Creating a Dynamic Poll with jQuery and PHP

Related Posts

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


Cheers: A Free “Social” Icon Set

11 Sep 2008 00:19:52 | Vitaly Friedman & Sven Lennartz | Freebies,downloads,icons,social | Kommentare

We love to release freebies. Every release helps to make the Web a nicer place, which is why we support designers and challenge them to release something for free in order to be featured on Smashing Magazine. And the results are quite often pretty impressive.

Icon Set

Today we are happy to release Cheers: a free set of 12 “social” glasses, designed by Helen Gkizi from Webtoolkit4me, especially for Smashing Magazine and its readers.

Download the Set for Free!

You can use the set for all of your projects for free and without any restrictions. However, it’s forbidden to sell them. Please link to this article if you would like to spread the word.

Cheers Icon Set

Motivation Behind the Design

As usual, here are some insights from the designer herself:

“It’s really funny if you think about it as the motivation behind it was a simple and basic question. Helen is a graphic designer specializing in invitation and brochure design. The question was “Can you design icons” and she said “Sure why not, what kind of icons?”

Gerasimos browsed through a few sets and that was it. She had her first one ready in about 30 minutes. We just said “glasses”. Icon in a glass. Gerasimos and Helen run a small design agency in Thessaloniki, Greece. He is a web designer she’s in the print business. But now he thinks they need to expose this talent somehow and here it is. Their “web 2.0 in a glass”. Cheers!”

Last But Not Least

We are constantly looking for creative designers and artists. You may not know it yet, but we may feature you in one of our upcoming posts.

If you would like to release a free high-quality font, a Wordpress theme, Photoshop brushes, a Drupal theme, some wallpapers or an icon set, please contact us. We would like to support you (both financially and with the broad readership of Smashing Magazine).


The <hr>-Contest Results - Download your fresh <hr>-line now!

09 Sep 2008 21:58:42 | Vitaly Friedman & Sven Lennartz | Graphics,contests,divider,free,Freebies,hr | Kommentare

Three weeks ago we have encouraged our readers to participate in our


-contest by designing beautiful and creative horizontal lines. It was necessary, since this design-element was slowly disappearing and was often neglected in web design. But it is going to change now. We have received 1290 images and source-files from 384 designers across the globe. The result is an impressive collection of horizontal lines that designers can use for free without any restrictions whatsoever.

Many entries contained not only images, but also source-files, mostly for Photoshop or Illustrator. You can use them if you want to modify a design for your projects. For this purpose we packed these files in one .zip-archive with all source-files (109 files, 25 Mb). Of course, it would be better to provide the link to a .zip-package next to each of the designs presented below, but it would take many hours of work which we can actually use in a more effective way. We can not guarantee that all images in the .zip-package are correct as we haven’t tested all of them.

Unfortunately, some entries could not be considered for the contest. They didn’t meet our requirements, were too big or unusable. It was important for us that these files could be used in projects beyond the scope of our contest.

The BIG Gallery of
-Graphics

Some ideas were more popular than the other ones. For instance, a zipper, flowers and ornaments, pencils, Pac-Man, birds, scissors. You can see almost everything from geometrics designs to oriental designs. Our smashing readers show that even a small tiny line can become a piece of art. For some users it may be too much, but here the idea counts most. And you can use as a starting point for horizontal lines in your projects. Or you can use some minimalistic designs. Most designs were black/white, and few of them were pretty colorful.

Colorful Lines

Andrea Baroni
Ideas under the design: mmm….well…starting from a pencil sketch I then created the vectors in Illustrator and refined them in Photoshop.

hr-line

Johannes Aagaard

hr-line

Ratko Horvat

hr-line

Lewis Keogh
'Igloo eyes' - Odd alien type eyes that resemble mulitcoloured igloos. Could be adapted to match the colour scheme of a site/blog.

hr-line

Ray Pham

hr-line

Lewis Keogh
'Noah’s arc' - As the name suggests.

hr-line

Sandeep Singh

hr-line

Isfahan Ashraf

hr-line

Darren Northcott

hr-line

Darren Northcott

hr-line

Johannes Aagard
The ideas behind my 3 designs are mainly fresh and happy colours, while I love fresh colours. And I’m sure lots of other also does. But also 2 of them are a little unusual, and would fit nicely in a creative blog (in my opinion)

hr-line

Jehzeel Laurente
I love to experiment and explore the astounding features of Photoshop. In my green hr entry, I tried using pen tool to create bent vectors and combine it with other objects to see what’s the outcome. In my black entry, I just tried to make it simple and elegant by creating circles, lines and label it with binary code. I think it looks boring but it’s simple and clean, perfect for websites and blogs that want simple and clean horizontal divider.

hr-line

Jehzeel Laurente

hr-line

Jehzeel Laurente

hr-line

Cameron Queen

hr-line

Jade Gordon
I was eager to try out some recently learned techniques in Photoshop. I’ve been falling for patterns and textures, and fine brush details.hr-line

Heather van de Mark
HR Ransom - Cutout letters create an hr divider that is funky and original. It is an array of colors and yet they all complement each other. This is definitely for an alternative blog/web site with humor and edge. I created multiple different backgrounds with jagged edges, so it looks as if they really came from the printed page. The graphic can easily be manipulated to cut the divider to make it longer or shorter or to rearrange the letter order. I didn’t want it to spell anything because that would be distracting.

hr-line

Abhijit Sagade
I have tried to relate HR with real life observations and have tried to create simplistic visuals out of those ideas.hr-line

Abhijit Sagadehr-line

Joel Lueck

hr-line

Alistair Symonds

hr-line

Mihai Petica

hr-line

Vincent Fromaget

hr-line

Carina Kornowski

hr-line

Yann Guerin

hr-line

Olivier Courbet

hr-line

Jeronimo Strehl
This is a shoooooooooooooort break.

hr-line

Manasa Malipeddi
(the lamp) The idea of this lamp sprouted out of my own wishful thinking. I always wished (and still do) that I had better stuff to write about in my blog; posts that would enlighten somebody, and that is how I thought of a lamp representing enlightenment.

hr-line

Manasa Malipeddi
(the cat)

hr-line

Manasa Malipeddi
(the frightened girl) This was what I wanted to do when I realised that my new haircut looked aweful - hide behind a divider!

hr-line

Manasa Malipeddi
(the knot)

hr-line

Dennis Meene

hr-line

Dennis Meene

hr-line

Ray Pham

hr-line

Geo Sukarno

hr-line

Priscilla Louzada

hr-line

Guilherme Baiao

hr-line

Guilherme Baiao

hr-line

Ardy
I have designed the HR keeping in mind the theme of nature and subtle relaxing ideas (duck in water, clouds, leaves, etc). I feel that these break the monotony of using typical HRs with straight lines. The colors used are also soft and comforting to the latest in designs. I hope you like them. We might plan on making use of the ‘cloudy HR’ within our own website which is currently undergoing major revamping. You can see a general design idea at www.anautix.com/v2

hr-line

Vlad Mocanu

hr-line

Ardy

hr-line

Livia Radvanski

hr-line

Reginald Balanga
a set of hr graphics with a theme of 'Baby’s Clothesline'. Inspired by my 1 year old baby boy. The graphics are in png format and is best used with white background.

hr-line

Reginald Balanga

hr-line

Reginald Balanga

hr-line

Andrea Baroni

hr-line

Peter Dzaluk

hr-line

Peter Dzaluk

hr-line

Fabienne Curty
A power cable desperately reaching for its plug.

hr-line

Ardy
I have designed the HR keeping in mind the theme of nature and subtle relaxing ideas (duck in water, clouds, leaves, etc). I feel that these break the monotony of using typical HRs with straight lines. The colors used are also soft and comforting to the latest in designs. I hope you like them. We might plan on making use of the ‘cloudy HR’ within our own website which is currently undergoing major revamping. You can see a general design idea at www.anautix.com/v2

hr-line

Milan van Bruggen
For the creatives: A colourful ruler with crayons.

hr-line

David Laplante

hr-line

Valeria Kuzminska

hr-line

Valeria Kuzminska

hr-line

Johannes Aagaard
The ideas behind my 3 designs are mainly fresh and happy colours, while I love fresh colours. And I’m sure lots of other also does. But also 2 of them are a little unusual, and would fit nicely in a creative blog (in my opinion)

hr-line

Kyle Theisen
All of the designs were inspired by CMYK - nothing more, nothing less. I wanted to create something very simple, yet modern and fun.

hr-line

hr-line

Steve Lam

hr-line

Ross Cooper

hr-line

Ricardo Mestre

hr-line

Tamer Yilmaz

hr-line

Playing with

Some designers decided to use classic motifs.

Milan van Bruggen

hr-line

Nathan Lyle

hr-line

Björn Rohles
After doing some research on web standards, I was surprised that none of the sites I found actually included code to create a visual representation of the topic of 'web standards'. I imagine it would be easy to work with the text used to code a site for design purposes (for instance, using the text 'div' in the background of divs). This hr is a start to realize this approach.

hr-line

Dariusz Rusin

hr-line

Vernon Kesner
Driving force behind this idea was actually was a recent quarter (I think it was a quarter) I saw. On close inspection, there was actually inscription going around the outer ridge of the quarter. I actually think these turned out really cool.

hr-line

Vernon Kesner

hr-line

Ricardo Mestre

hr-line

Vane Kosturanov

hr-line

Mark MacDonald

hr-line

Drawn Lines

Prijadarshi Kunal

hr-line

Chris McLeod

hr-line

Yiyi Zhou
I’ve always like hand-drawn designs with lots of color. The first two are meant to look somewhat like beads on a string, and the second two are just meant to be fun designs of an owl and snails.

hr-line

Yiyi Zhou

hr-line

Jehzeel Laurente
My pink entry was inspired with pink dirty-like brushes and cartoony buildings. My blue entry was inspired with simple blue lines in different thickness to make it look stylish, simple and creative. And my last entry was the orange arrows from splashed paint. This entry was some kinda accident. I just played around with the paint splatter brush then suddenly arrows appear in my mind and I included it.. and… I’m somewhat satisfied of the outcome.

hr-line

Vernon Kesner
Driving force behind this idea was actually was a recent quarter (I think it was a quarter) I saw. On close inspection, there was actually inscription going around the outer ridge of the quarter. I actually think these turned out really cool.

hr-line

Vernon Kesner

hr-line

Sandeep Singh

hr-line

Stig Greve

hr-line

Dominik Felber

hr-line

Dominik Felber

hr-line

Eric White

hr-line

Brian Litzinger
I didn’t have a lot of time to invest in making these HRs, so the first idea that came to mind is what you see. I have no clue if this has been done before…

hr-line

Brian Litzinger

hr-line

Brian Litzinger

hr-line

Abhijit Kumar

hr-line

Prijadarshi Kunal

hr-line

Prijadarshi Kunal

hr-line

Jeronimo Strehl
No, this isn’t the end - just a little break…

hr-line

Jeronimo Strehl
Ok - this is the end, the post is finished - so, get unppluged and go outside.

hr-line

Cheng Kam Wang

hr-line

Thin Lines

These ones can be used for body copy.

Eva Hellmann

hr-line

Eva Hellmann

hr-line

Christoph Bach

hr-line

Zsolt Kocsmarszky

hr-line

Christina Böhme

hr-line

Petar Pavlov

hr-line

Christoph Bach

hr-line

Cameron Queen
This is just a design I’ve been playing around with for my own site and thought I’d interpret it for this competition as it’s an avenue I haven’t explored with my ‘donut’ graphics until now.

hr-line

Arthur Rehm

hr-line

Aren Lavilla

hr-line

Vane Kosturanov

hr-line

Nour Malaeb
Equalizer: Another musical-themed design for a more minimalist blog.

hr-line

Nour Malaeb
Moustache: Just a fun design for hair-themed blogs, or perhaps a blog for gentlemen. Or the Monopoly guy.

hr-line

Amer Aidi

hr-line

Dariusz Rusin

hr-line

Dariusz Rusin

hr-line

Black & White

Jehzeel Laurente
I love to experiment and explore the astounding features of Photoshop. In my green hr entry, I tried using pen tool to create bent vectors and combine it with other objects to see what’s the outcome. In my black entry, I just tried to make it simple and elegant by creating circles, lines and label it with binary code. I think it looks boring but it’s simple and clean, perfect for websites and blogs that want simple and clean horizontal divider. My pink entry was inspired with pink dirty-like brushes and cartoony buildings. My blue entry was inspired with simple blue lines in different thickness to make it look stylish, simple and creative. And my last entry was the orange arrows from splashed paint. This entry was some kinda accident. I just played around with the paint splatter brush then suddenly arrows appear in my mind and I included it.. and… I’m somewhat satisfied of the outcome.

hr-line

Wojciech Slowacki
The birds sitting on a wire are a common sight when you travel between one place and another, so you can say the image of birds separates different places. That’s why I thought it could also separate content as a


background

hr-line

Wojciech Slowacki
A cowboy riding off into the sunset - thats a good scene for an ending, so I thought it would be a fitting image for an ending of a post on some blog.

hr-line

Nathan Lyle

hr-line

Alistair Symonds

hr-line

Richard Stellmach

hr-line

Vlad Mocanu
The general ideea of my images is a modest desire to reinvent the magic of 2D geometry. We live in a world that has forgotten the place it rose from … unfortunately …

hr-line

Dennis Meene

hr-line

Jon Lucas

hr-line

Nathan Kelly

hr-line

Dominik Felber

hr-line

Vane Konsturanov
While I was reading the


contest post on Smashing a couple of ideas came on my mind. This is what came out.

hr-line

Marcin Dembek

hr-line

Michael Koloch
A tribute to osvaldo cavandoli’s 'la linea' cartoon i watched since i was 3 or 4 years old.

hr-line

Loveena Rayan

hr-line

Emanuel Felipe

hr-line

Anggun Pribadi

hr-line

Amber Slooten
The reason I created a


like this, was because I personally like silhouettes of women. I thought it was a lot of refreshment. There wansn’t really any inspiration source: It just hit me.

hr-line

Jens Fiedler
The first designs was forced through an old Mockup for my own portfolio, i liked the idea of usual things for the website functions, so i wanted to make them all look 'real'… and the contest, reminds of it, so i made an zipper to make an remindable hr graphic.

hr-line

Olivier Courbet

hr-line

Andrea Baroni
Ideas under the design: mmm….well…starting from a pencil sketch I then created the vectors in Illustrator and refined them in Photoshop.
This three themes are pretty naturalistic and on the cute-side I think…
Nothing so risky in the end, but I hope enjoyable and unusual.

hr-line

Fabienne Curty
A horizontal crack in a wall, with a pair of scary eyes staring out - this


would fit into grungy layouts.

hr-line

Fabienne Curty
A horizontally torn paperstrip that’s being held together by staples and clips - this


would fit into papery layouts.

hr-line

Sonali Vora

hr-line

Jim Hargreaves
Elegance meets wit…a classic design for journalistic blogging.

hr-line

Jim Hargreaves

hr-line

Jim Hargreaves

hr-line

Jim Hargreaves

hr-line

Stephan Hilbelink

hr-line

Stephan Hilbelink

hr-line

Daan Weijers

hr-line

Giacomo Boccardo

hr-line

Ehren Harber

hr-line

Ehren Harber

hr-line

Mario Santos
My inspiration on the firts model/set is to have an end identifier on each part of site/text, nothing like a bar code.

hr-line

Mario Santos

hr-line

Abstract and Creative Ideas

Was nicht in die vorigen Rubriken passte…

Cornelius Dorgan

hr-line

Lewis Keogh
'Contemporary bubbles' - Witches cauldron with a modern twist.

hr-line

Lewis Keogh
'What now' - Working along the lines of, now that the article above has finished what is to follow - as if a line hr break could think.

hr-line

Rob MacKay

hr-line

Casey Smith

hr-line

Elena Plyusnina

hr-line

Gavin Steele
My clean and simple designs…. its about the content, as a decoration the Hr should not draw the eye away from the content.

hr-line

Tiffany Pilgrim
This a play-off of the classic ornate divider, but this time hand sketched and with the pencil shavings left behind.

hr-line

Zivko Condiv

hr-line

Francesca Culatti

hr-line

Francesca Culatti

hr-line

Abhijit Sagade
I have tried to relate HR with real life observations and have tried to create simplistic visuals out of those ideas.hr-line

Abhijit Sagadehr-line

Ratko Horvat

hr-line

Dennis Meene

hr-line

Ratko Horvat

hr-line

Tobias Goth
So what drove me to do make this blood dripping


? My addiction with the Showtime tv-series Dexter of course. I’m a sucker for the intro that rolls at the beginning of every episode. Here’s my adaptation of it into a horizontal ruler.

hr-line

Alex Holt
Is a background image that should be right aligned…
Subtle, stacked paper design to break the page elegantly.

hr-line

Tammy Hart

hr-line

Tammy Hart

hr-line

Vane Konsturanov

hr-line

Vane Konsturanov

hr-line

Vane Konsturanov

hr-line

Lance Gililand

hr-line

Lance Gililand

hr-line

Aren Lavilla

hr-line

Ehren Harber

hr-line

Nathan Kelly

hr-line

Regina Silva

hr-line

Rubens Cantuni

it’s inspired by the fable 'Le petit poucet' bu Charles Perrault. This lil kid leaves pebbles behind is walk to find the way back to home, until one day he can’t find any pebbles so he left crumbs, but birds ate them all…

hr-line

Rubens Cantuni
a ninja running fast leave a trail of dust behind him

hr-line

Rubens Cantuni
realistic tear repaired with sticky-tape and staples.

hr-line

Charles Bamam

hr-line

Guilherme Baiao

hr-line

Guilherme Baiao

hr-line

Katya Shulzhenko
Text-style divider says 'this is the end' without using brain

hr-line

Stephan Hilbelink

hr-line

Fouad Badawy

hr-line

Alex Souto
My theme for the competition is the mouse! This terrible but necessary element of those working on the computer.

hr-line

hr-line

Prijadarshi Kunal

hr-line

Sergio Ruiz

hr-line

Fabienne Curty
ECG - The typical ECG measuring curve, spiced up with a cute heart in the center.

hr-line

Carina Kornowski

hr-line

Anne Douglas

hr-line

Anca Holostencu
During the creation of the HR lines, I thought about fluid shapes and a subtle blending in the overall page design. The lines are meant to incite the reader and make her/him complete the nice feeling regarding what she/he read so far and continue with the next chapter.

hr-line

Victor Fedyuk

hr-line

Joro Yordanov

hr-line

Ardy
I have designed the HR keeping in mind the theme of nature and subtle relaxing ideas (duck in water, clouds, leaves, etc). I feel that these break the monotony of using typical HRs with straight lines. The colors used are also soft and comforting to the latest in designs. I hope you like them. We might plan on making use of the ‘cloudy HR’ within our own website which is currently undergoing major revamping.

hr-line

Maria Paula Figueroa

hr-line

Adrian Pauly
hr-branch was more of a decorative approach, taking the usual decorative squiggles as a parting point, but rendering it as a much more natural organic element.

hr-line

Mihai Petica

hr-line

Thank you!

We would like to express sincere gratitude to each of designers who participated in our contest! Further contest are already on their way. Please stay tuned.

So who is the winner of the contest?

We selected 25 designs which we liked most. Of course, the choice is subjective, but we had to choose the best ones. Please don’t feel angry if you have some other opinion.

Each design has a number assigned to it. Everybody can vote for his or her favourite design. You decide who is the winner of our contest and who will be awarded with a Wacom Intuos3 9X12 USB Tablet displayed below. The poll will be closed in 4 days. The design with most votes will be awarded with the prize.

Wacom Tablet

25 Finalists

1

hr-line

2

hr-line

3

hr-line

4

hr-line

5

hr-line

6

hr-line

7

hr-line

8

hr-line

9

hr-line

10

hr-line

11

hr-line12

hr-line

13

hr-line

14

hr-line

15

hr-line

16

hr-line

17

hr-line

18

hr-line

19

hr-line

20

hr-line

21

hr-line

22

hr-line

23

hr-line

24

hr-line

25

hr-line

Vote for your favourite design!


Smashing Magazine’s 2nd Anniversary

08 Sep 2008 22:09:44 | Vitaly Friedman & Sven Lennartz | Events,anniversary,poster,smashing | Kommentare

It happened again. Today, Smashing Magazine celebrates its second birthday. We are two years old now and we are proud of what we have achieved over these years. To celebrate our anniversary, we could do any number of things. For instance, we could organize a huge giveaway—as we did one year ago—but, of course, bigger and more overwhelming. However, we won’t do that; after all, we’re giving away stuff every week and we have many contests where our readers can win truly smashing prizes. (New contests are already on their way.)

Instead, we could share some insight about the highlights of Smashing Magazine over the last 12 months: an exploding number of page views, hundreds of thousands of backlinks, numerous testimonials and rewarding ad revenues. But we would probably sound like show-offs and we can’t afford to do that; after all, we have only published 301 posts so far.

Another possibility would be to discuss our plans for the future. What’s happening behind the scenes? What’s in the works? We could even share some top-secret information about the planned Smashing Book Series or new Smashing Forum. However, we won’t do that, because nobody can predict how successful those will really be.

Hence, the only remaining thing for us—Vitaly, Sven, the writers and other creative, hard-working minds of the Smashing Magazine team—to do is express our sincere gratitude to each of our readers for an absolutely smashing year. Without you—each and every one of you—our small magazine could not exist and definitely could not become what it has become today.

Comment and Win an Exclusive Poster!

Still, we do have a small surprise for you: a handful of exclusive Smashing Magazine posters, designed by the well-known, talented artist James White. You can preview the poster here or read the Making Of.

We are giving away 8 exclusive printed Smashing Anniversary posters, shining like gold in A3 format. Only 11 posters have been printed worldwide. If you want to win one of them, just write some kind words and congratulations in a comment to this post.

The winners will be determined randomly among all valid comments (spam and ad links do not count). Don’t forget to provide a valid email address in the input field, otherwise we won’t be able to notify you.

Thank you, folks! We really appreciate your support.


Agregado: A Free Wordpress Theme

08 Sep 2008 17:26:03 | Vitaly Friedman & Sven Lennartz | Freebies,downloads,free,theme,wordpress | Kommentare

We love our readers. We respect the hard work of designers and developers across the globe. And we do our best to make the web design community stronger and the Web a little bit prettier. Therefore we ask talented artists and creative professionals to showcase their skills and release something unique and beautiful as a gift to the community.

We support them both financially and with a broad coverage on our magazine. And when designers agree, truly impressive works see the light of day.

Today we are glad to release Agregado Lifestream Theme — a free professional Wordpress-theme created by Darren Hoyt and Matt Dawson of Category4. The theme features a built-in lifestream module and contact form with custom control panel options. It is commissioned by Smashing Magazine and designed especially for Smashing Magazine and its readers.

Download the theme for free!

You can use the theme for all your projects for free and without any restrictions. However, it’s forbidden to sell or redistribute the theme without both designer’s and Smashing Magazine’s permission — please link to this article if you would like to spread the word. You may modify the theme as you wish, but if you are planning to release your modification, please ask our permission first.

Motivation behind the design

Here are some insights about the design process and development from the designer himself.

“Agregado was inspired by the recent popularity of services like Twitter, FriendFeed and Tumblr, and by a recent trend Zeldman calls 'the vanishing personal website'. The theme attempts to rebuild that idea of a personal website, incorporating a lifestream carousel alongside standard blog posts, keeping your fragmented data all in one place.

Wordpress Theme

The lifestream code was inspired by Kieran Delaney's WP plugin 'SimpleLife', but rewritten to fix bugs and caching issues. The code is built right into the functions.php file, with control panel options which include contact form configuration. There are other 'personal site' touches - a user profile box with gravatar and bio, plus the built-in contact form. First-time visitors get an easy sense of who you are, what services you use, and how to get in touch.

Sidebar

The design itself intentionally deviates from the standard WordPress layout. Hierarchy is key - lesser content modules (Subcategories, Pages, Monthly Archives, Search) are tucked away so the user stays primarily focused on recent blog posts and recent lifestream items. Newer items are lighter with a larger font size, and get incrementally smaller and darker as they get older.

Wordpress Theme

The theme also contains a custom Archives page. In the past, blindly clicking a monthly archive link (ex: 'November 2006') has never been useful to me, so I decided to display all posts in a grid format, chronologically, and categorized by month and year. If you find bugs, please leave a comment. We will continue upgrading the theme as necessary.”

Thank you, Darren and Matt. We appreciate your work and your good intentions.

Features

  1. Lifestream module with carousel
  2. Custom archives page
  3. Animated js dropdown menus
  4. Built-in contact form module with AJAX sent/fail message
  5. Built-in drop caps for lead paragraphs
  6. Numerical pagination on archive and search pages
  7. Author-highlighting for comments
  8. User profile module
  9. Widgetized bottom bar on homepage
  10. Widgetized sidebar on single post pages
  11. Print stylesheet
  12. 'More in this Category' sidebar module
  13. Control panel options for lifestream and contact form

Requirements

  • WordPress 2.6+
  • Firefox 3.0+, Safari 3.0+, IE7+
  • Host server with PHP5+ installed

Last but not least…

We are regularly looking for creative designers and artists. You may not know it yet, but we might feature you in one of our upcoming posts.

If you would like to release a high-quality free font, a Wordpress-theme, some wallpapers or an icon-set please contact us — we would like to support you (both financially and with the broad coverage on Smashing Magazine).

You may be interested in the following free Wordpress-themes as well:




Abonnieren | Zurück zu den Feeds | Abonnentenzahl: 0 | Letzte Aktualisierung: Oct 24 2008, 01:00:04To top
 



Bei FilmAlloy anmelden
Mitgliedsname 
Passwort 
  Angemeldet bleiben 



Latest News
FilmAlloy © Copyright 2008 - 20010 www.filmworks.de GmbH.