Using Fabric Textures in Web Design

by tatiana on May 27, 2012

As some of you may know, I’m a pretty big sewer and fan of vintage fashion, so naturally I love texture in design. For my website redesign, I decided to use less collages (as were seen on my last site), and experiment a little more with fabrics.

Then (2007 – 2012):


For my website redesign I scanned a handful of fabrics I had on hand to see what would work best. I decided on a beautiful navy lace (that I am currently using to make a cute Built By Wendy dress), some gray & white striped fabric for the background (which I made a little more subtle in Photoshop by adding a gray overlay), and muslin (unbleached cotton fabric) to add some texture to my header background.

I scanned all of my fabric using my trusty Epson V100 at 200 dpi (since this is for the web I could have scanned it at a lower resolution, but it’s always nice to have a high quality scan on hand in case of… design emergencies? Those totally happen). Anyway, scanned they were. The result is what you see on my site!

Last night, a friend came over who was not loving the default header and background on her WordPress hosted blog, Fog City Vintage. There wasn’t a lot we could do without paying $$ (since we couldn’t access the CSS, and in order to “customize” her free theme she’d have to pay $30 to access the code), we could literally only change the header and background, so I helped her come up with this:

I used a pretty floral corduroy fabric for the header (which can also be seen here in my room. Can you tell I’m absolutely in love with that fabric?!), the Bellerose font, and the same gray and white striped fabric that I used on my site, but we added a beige color overlay in Photoshop.

I’m excited to continue exploring using textiles on the web. Maybe in addition to fabric, yarn, lace, ric-rac and buttons would be fun to play with? The possibilities are truly endless.


Just for fun, I’d like to share my textiles with you. Feel free to download the texture pack below (8.7MB). Please note that these are for personal use only. Let me know if you use them for any of your projects! I’d love to see your work.

You can download the entire pack by clicking below:

Related Posts Plugin for WordPress, Blogger...

{ 2 comments… read them below or add one }

Sylvey July 10, 2015 at 9:27 am

Connected to your site via recent reddit post, and really enjoy the things you share! Thank you!


tatiana July 10, 2015 at 9:45 am

Thanks, Sylvey! :)


Leave a Comment

Previous post:

Next post: