7 ms·
Subtle Patterns: Free textures for your next web project
- jeffehobbs 15y agoThese are great! Very useful and well-organized.
- munaf 15y agoVery cool! Great to see a pattern site that's actually clean and usable.
- palish 15y agoThese 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.
- pbnjay 15y agoi found that the default white surround didn't help any. hitting "preview" I was actually able to see it even on my laptop.
- wavephorm 15y agoYou probably have your contrast up too high. Try calibrating your monitor, MacOS includes a utility.
- palish 15y agoHaw. 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
- wlesieutre 15y agoWindows 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.
- palish 15y agoHeh. 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... :)
- edoloughlin 15y agoVarying the contrast/brightness should be part of the process of evaluating a pattern for a website. Many users won't have properly calibrated monitors.
- danbee 15y agoTo 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.
- aculver 15y agoThis 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/ 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.
- Periodic 15y agoThis 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.
- PatHyatt 15y agoAwesome patterns, very subtle but bring a lot to the page.
- incongruity 15y agoThank you – this'll come in handy!
- empire29 15y agoVery nice job -- i particularly like the "organic" patterns (like black linen)
- deniz 15y agoThis is great. The preview feature is clever.
- dbbo 15y agoTile one, add a radial gradient, and you've got a killer desktop background/wallpaper.
- JoshTriplett 15y agoVery 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.
- Raphael 15y ago"Triangles" should be called "Parallelograms".
- kefs 15y agoThis 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 :)
- natesm 15y agoA nice addition would be the proper background color for before it loads.
- mrtron 15y agoYa, 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?
- fuzionmonkey 15y agoAwesome, this is exactly the sort of thing I was looking for.
- krumjahn 15y agoSuper awesome. Is the green pattern you've used for the buttons available too? Thanks alot!
- tortilla 15y agoLove this site, I've been using these in last couple of projects.
- p_monk 15y agoThis 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/ http://www.mayang.com/textures/
- vitomd 15y agoI am not affiliated with the site, just shared the link beacause is awesome and I used it in some projects.
- bane 15y agoA 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 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 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!)
- mhartl 15y agoN.B. The first FAQ (and its answer) should be on eggtweeter's home page.
- bane 15y agoNot 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.
- Nat0 15y agoNice 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.
- Veera 15y agoSimply 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!
- craze3 15y agoYou're forgetting that the webmaster wants fresh ads to be loaded.. :)
- pbhjpbhj 15y agoHowever 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.
- einai 15y agoNice site with great textures! Thank you for sharing.
- baran 15y agoWhen 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?
- anakin 15y agoAwesome! Love it. Thank you man :-)
- mailanay 15y agoThanks ! Extremely useful for non-designer programmer like me !
- mapleoin 15y agoThere is a huge community around website colors, palettes and patterns over at http://colourlovers.com http://colourlovers.com . You can also create your own starting from scratch or from already existing patterns.
- sahillavingia 15y agoYC company too!
- deleted 15y ago[deleted]
- hcho 15y agoAll patterns over there look really psychedelic. Are 60s making a comeback?
- vnuk 15y agoSite seems to crash a lot, probably isn't built for being on HN front page :) Otherwise, kudos - some beautiful textures. Thank you
- richardw 15y agoDonated. If this site saved you some time, maybe think about giving him something for it.
- wingerlang 15y agoAwesome, I am always looking for excatly this every time i try to make a webpage.
- bluppy2 15y agoAnother nice collection of free tileable patterns: http://tileabl.es/ http://tileabl.es/
- DanBC 15y agoI 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.))
- PStamatiou 15y agoThis 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 http://paulstamatiou.com/startup-web-design-ux-crash-course
- sgdesign 15y agoThat'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/ http://www.patternify.com/
- Duckpaddle2 15y agoVery Nice!
- bigfoot 15y agoThe 90ies called, they want their tiled backgrounds back.
- funkah 15y agoThis is awesome! These patterns are really nice. Good work.
- raphman 15y agoThe 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?
- pbhjpbhj 15y agoThat 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.
- raphman 15y agoIn 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.
- masterzora 15y agoIt 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.
- kevinpet 15y agoIf 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.
- dbbo 15y agoI'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 https://github.com/dbb/subtle-patterns-gimp
- snorkel 15y agoDid I fall into a rip in the universe where web developers are once again in love with background textures?
- alttag 15y agoI was looking for exactly this last week. Do you have an easy way to flag or bookmark patterns?
- haroldp 15y agoCool. 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-matters-to-web-designers/ http://designfestival.com/the-cicada-principle-and-why-it-ma...
- haroldp 15y agoHah, went to reread that page and the first thing it mentions now is just such a project: http://designfestival.com/cicada/ http://designfestival.com/cicada/
- deleted 15y ago[deleted]
- lukedupont 15y agoIt is so refreshing to see a well designed pattern download site. A infinite scroll would be a nice touch!! Fantastic job with this.
- kevinpet 15y ago90% 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.