Subtle Patterns: Free textures for your next web project | Hacker News Reader

Subtle Patterns: Free textures for your next web project

subtlepatterns.com

801 pointsvitomd64 comments

There is a huge community around website colors, palettes and patterns over at http://colourlovers.com . You can also create your own starting from scratch or from already existing patterns.

YC company too!

All patterns over there look really psychedelic. Are 60s making a comeback?

This is really awesome. Just an hour ago my wife and I were scanning through an extensive collection of tile-able background images she stumbled onto (http://www.flickr.com/photos/webtreatsetc/). While I really liked a lot of the background images there, what I really love about the images in the OP is that they're friendly to content areas with text.

This has always been the hardest part for me, finding a subtle background pattern that gives a little more than a flat color, but that doesn't have too much contrast such that it draws the eye from the text. I'm glad to have found a resource specifically designed for this common need.

The license is pretty confusing: This work is licensed under a Creative Commons Attribution 3.0 Unported License. The patterns can be used freely in both personal and commercial projects with no attribution required, but always appreciated.

Am I required to adhere to the CC-BY license or does the second part indeed cancel the BY requirement?

That was my initial thought. I think as the CC-BY states that the attribution must be made in accordance with the wishes of the author then the second part effectively modifies the attribution to make it optional. I'd have thought that could be defended well in a court of law.

In this case, what is the point of the CC-BY license at all? Additionally, artists who submit their textures to the site only license it under CC-BY [1]. This means that the website's operator may not actually waive the Attribution requirement. I have contacted the website operator to clear this up.

[1] actually, the submission form says "You also agree to let me license the pattern as Creative Commons – in other words, give it away to the world for free. " This is quire ambiguous.

It looks to me that the Attribution is only conditionally waived. That is to say, if you're using it you don't have to add the attribution but if you're sharing it or a remix of it the attribution is still required.

If only someone would come up with a collection of standard licenses covering all the reasonable scenarios with both good legal language and an understandable summary.

A big struggle for our startup was learning how to design a good looking site.

For our first site, we used a template we got off of a template site, then modified it out of all recognition.

To be honest it's not great and we'll probably redo it before too long. But it was something we could hang a couple apps off of.

http://www.kymalabs.com

For our second site, we went with a different approach and designed it from scratch as a learning exercise. One of the experimental techniques we sweated over for hours and hours was using textures.

http://www.eggtweeter.com

We think it made a huge impact in the look of the site, but also drove us in new directions with the design we weren't planning on.

This site looks fantastic and something we'll definitely be looking at (maybe for an eventual redesign of our current site!)

N.B. The first FAQ (and its answer) should be on eggtweeter's home page.

Not a bad idea, I'll talk it over with my co-founder about making the change.

We're trying to keep it as clean as possible, but I think you're right, we went overboard in exchange for burying an important data point behind another click.

This is great! Like tileabl.es and some other website I'm forgetting at the moment.

Regarding design for your next proj/startup: I wrote this "crash course" post a while ago: http://paulstamatiou.com/startup-web-design-ux-crash-course

Simply great.

Feature request: If there's a slider with the thumbnails of all the textures which can be browsed in single page, that would make the searching easier, instead of clicking next page so many times!

You're forgetting that the webmaster wants fresh ads to be loaded.. :)

However they're not being a dick about it - they let you download the whole bunch of tiles as PNG and as a .pat file so you could just then use your file manager to scan the PNGs.

What you don't get then is the quick view of the tiles in use but it shouldn't take long to knock up a quick script that will take a directory of tiles and give you a block of bgs to look at.

That's a great site! Also, if you're looking for simpler pixel patterns, you can use something I built a while back:

http://www.patternify.com/

That's pretty neat. The only thing that's missing IMO is an option to preview the pattern as the background of the page.

A nice addition would be the proper background color for before it loads.

Ya, would just require a default settings per texture.

Maybe the quick and dirty fix is the left half grey light, the right half grey dark?

Cool. Now hook me up with a site that does this for those cicada patterns previously featured on HN:

http://designfestival.com/the-cicada-principle-and-why-it-ma...

Hah, went to reread that page and the first thing it mentions now is just such a project: http://designfestival.com/cicada/

This is a great collection. I would maybe consider adding a custom color filter, and a custom text overlay w/ preview.. and maybe a sort by most popular/downloaded? Thanks again :)

These are actually fantastic ZBrush patterns, as well.

I just wish they weren't so... well, subtle. On my laptop, "Dark Leather" and "Triangles" both look exactly the same: a black rectangle.

i found that the default white surround didn't help any. hitting "preview" I was actually able to see it even on my laptop.

You probably have your contrast up too high. Try calibrating your monitor, MacOS includes a utility.

Haw. I wish I had a Mac.

I'm on a 1Ghz Dell laptop from 5 years ago. So the screen is... less than stellar.

I also have $280 to my name in total :P

Windows 7 also has a screen calibration assistant, somewhere in control panel. IIRC it's not nearly as helpful, but if your screen's that bad you could probably improve it.

Heh. Thanks.

I'll try it, but I don't think the screen is physically capable of generating enough luminosity to provide any fine-tuned amount of contrast... :)

Varying the contrast/brightness should be part of the process of evaluating a pattern for a website. Many users won't have properly calibrated monitors.

To be fair, my monitor IS calibrated and those two patterns are very dark here. I have to look quite closely to make out any detail.

Donated. If this site saved you some time, maybe think about giving him something for it.

This is great. I needed a asphalt-like texture for a project and I made one using a site like this one, except with textures from the real world. http://www.mayang.com/textures/

Very awesome. I like how the preview feature doesn't change the offset of the texture in the box, but just lets it appear outside that box.

90% of these give me a headache. I don't like any identically repeating pattern, it looks like it's moving to me. I think what happens is that when I glance at it, my brain sometimes matches up right and left eye with some offset.

I like the non-identical patterns, though. Introducing a little noise helps. Not sure why half the patterns are solid black rectangles either.

"Triangles" should be called "Parallelograms".

Another nice collection of free tileable patterns: http://tileabl.es/

I love this! I really like the fact that (as others have mentioned) they are text friendly. I've added one to my custom CSS for HN.

(and a teeny-tiny comment if they're reading this: possessive its has no apostrophe. (See description for Stucco.))

Very nice job -- i particularly like the "organic" patterns (like black linen)

When using multiple textures on a page, how can you effectively transition from one to another?

I have seen the linear gradient close to the edge (creating the turned-under effect), but that seems overdone. Other ideas?

Very cool! Great to see a pattern site that's actually clean and usable.

Awesome, this is exactly the sort of thing I was looking for.

Nice site! I was just working on a pack of background textures like this that I was going to give away. I will have to submit them to the site.

It is so refreshing to see a well designed pattern download site. A infinite scroll would be a nice touch!! Fantastic job with this.

Site seems to crash a lot, probably isn't built for being on HN front page :)

Otherwise, kudos - some beautiful textures. Thank you

Did I fall into a rip in the universe where web developers are once again in love with background textures?

I am not affiliated with the site, just shared the link beacause is awesome and I used it in some projects.

Super awesome. Is the green pattern you've used for the buttons available too? Thanks alot!

Awesome, I am always looking for excatly this every time i try to make a webpage.

I was looking for exactly this last week.

Do you have an easy way to flag or bookmark patterns?

Love this site, I've been using these in last couple of projects.

Thanks ! Extremely useful for non-designer programmer like me !

Awesome patterns, very subtle but bring a lot to the page.

Nice site with great textures! Thank you for sharing.

These are great! Very useful and well-organized.

This is great. The preview feature is clever.

Awesome! Love it. Thank you man :-)

Thank you – this'll come in handy!

Very Nice!

I'm converting the individual PNGs to GIMP pattern files, in case you don't want to download all of them in a single Photoshop pattern file: https://github.com/dbb/subtle-patterns-gimp

Tile one, add a radial gradient, and you've got a killer desktop background/wallpaper.

This is awesome! These patterns are really nice. Good work.

The 90ies called, they want their tiled backgrounds back.

Reply on news.ycombinator.com