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

Advertisement

Three weeks ago we have encouraged our readers to participate in our <hr>-contest1 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-files2 (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 <hr>-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 RansomCutout 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 <hr>…

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

Priyadarshi 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 <hr /> 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 <hr/> 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 <hr /> 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 <hr /> would fit into grungy layouts.

hr-line

Fabienne Curty
A horizontally torn paperstrip that’s being held together by staples and clips – this <hr /> 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 <HR>? 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

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!

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/08/22/the-hr-contest/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/zip/hr-smashing-source-files.zip

↑ Back to top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing Science Fiction Stories and looking for a publisher ...

Advertising
  1. 1

    Number 8 is the most creative and simple design, with a digital vision.
    Good luck ….

    0
  2. 202

    Shouldn’t this be over by now?

    0
  3. 403

    Very creative!
    Love all the designs =)

    0
  4. 604

    HI SM,
    I just would like you to clarify what do you mean by this -“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.” :) I wish you could be more elaborative with your instructions like most of the articles here in your site. And when will you announce the winner? thanks

    0
  5. 805

    ShanghaiTechWriter

    September 18, 2008 6:30 am

    This is a great collection of HR lines! Great work to all who contributed!

    0
  6. 1006

    I voted for no. 7. I like the concept.

    0
  7. 1207

    Some of these are really cute! They would be perfect for post dividers on a WordPress blog.

    0
  8. 1408

    When will you announce the winners?

    0
  9. 1609

    Are you guys to let us know who won the contest?….I actually cant believe that it looks like that number 7 will be taking or has taken that sweet prize home.

    Please do publish it when you’ve decided who the winners is and let some of us that are annoyed by who is winning say why we are unhappy about the choice that’s been made!

    Still love you SM and fully understand that its not you guys that chose number 7 to win.

    0
  10. 1810

    i like the #6 can fit any where lols ^_^

    0
  11. 2011

    Really great designs. I could fit a lot of them into various designs my 2 web designers do.

    It is a great idea to revive the “hr”. I am seeing it less and less now.

    I have been inspired to update the company website now (www.richescreative.co.uk) and make an image “hr” to replace the defult “hr” grey line I have.

    I will set all this up once I have finished converting the site from tables (Arrrrghh) to div layers. Wish me luck :-)

    0
  12. 2212

    Great design. I like all of them. The number 1 is a real number one in all design.

    0
  13. 2413

    so lovely .I love all of them.May be i can use them.:)

    0
  14. 2614

    so whatever happened to this contest?

    0
  15. 2815

    #11 is nice…….

    0
  16. 3016

    and how can I install one of these images between the entries of my blog? any css code?

    0
  17. 3217

    hey, who have won this contest? :( have you announced it?

    0
  18. 3418

    Webdesign Saarland

    March 17, 2009 1:47 pm

    Thanks for the contest. Nice idea. My favorite is #6

    0
  19. 3619

    Simple 1px line would probably win the contest.

    0
  20. 3820

    how can I vote here ? by giving comments ??

    0
  21. 4021

    I just want to tell you that your blog is very interesting, bookmarked

    0
  22. 4222

    You write awsome article, bookmarked

    0
  23. 4423

    The link to “hr-smashing-source-files.zip” is broken. Would you correct and notifiy me.
    Thanks
    William Rouse

    0
  24. 4825

    ¡¡¡Preciosos!!!

    ☻/
    /▌
    / | *´¨)
    …¸.•´¸.•*´¨) ¸.•*¨)
    (¸.•´ (¸.Nyn•*♥

    0
  25. 5026

    these beautiful s lines are under copiright(all rights reserved) or they can be shared and used like Creative commons(some rights reserved)? I mean: i can use one of these in a website?

    0
  26. 5227

    Abdullah Al Mamun

    August 10, 2010 8:18 pm

    These are really awesome!
    The download link is not working. Please check it.
    May I use this in commercial projects?

    1
  27. 5428

    I am in love with number 5, it’s absolutley adorable! :]

    0
  28. 5629

    Thanks for giving your ideas. The first thing is that learners have a solution between federal student loan and also a private education loan where it truly is easier to go with student loan debt consolidation than through the federal education loan.

    0
  29. 5830

    Ebulueme John Chigozie

    November 4, 2011 6:02 pm

    Thanx for sharing…

    0
  30. 6031

    Thanks for sharing..
    But still curious who the winner :)

    0
  31. 6232

    Hi, awsome graphics ;) nice work!!! I was wondering… could I use one of this for a website I’m workin’ on? How’ s the licence thing working here? Thank you,
    Cristina

    0

↑ Back to top