Web Design Resources

Curating awesome stuff for your web design needs.

[webdesign-resources]

3 Textastic Lorem Ipsum Generators

Originally published on June 26, 2011.

Using dummy text to get a preview of what your design will eventually look like when it goes live is pretty much a standard part of a designer's work flow. But someday, you will grow tired of seeing the same dummy text that you got from one of those generic lorem ipsum generators scattered around the Internet. If you want to put some flair into your disposable content, here are 3 dummy text generators that will put some unconventional spin to your otherwise boring dummy text.

Lorem Ipscream: Different random blocks of text are grouped by categories with names like Mint Chocolate Czech, Soylent Cream and Chunky Bacon. Lorem Ipscream brings the fun in filling up your design with dummy content.

Blind Text Generator: Like Lorem Ipscream, this dummy text generator gives you different blocks of text with different content. It may not have the same fun factor as the ice cream-themed generator, but it goes further in terms of features as it lets you set the number of words/characters and paragraphs in the generated text.

adhesiontext: The last of our textastic lorem ipsum generators is adhesiontext. This one lets you get into the nitty gritty of the generated text by giving you the ability to pick the set of characters to be used and the option to include basic punctuation marks. It also gives you a range of language options which is ideal if you are working on a design for a non-English audience.

[webdesign-resources]

Originally published on June 24, 2011.

Free High Resolution Grunge Textures

One of my favorite sources for grunge textures is GrungeTextures.com. The site offers free high resolution textures that mostly feature worn and weathered surfaces. You can view their gallery of textures spread across 21 different categories including concrete, metal and -- as seen in my example above -- wood. It's a straight up quality resource if you need a solid-looking background or design element for any kind of design project.

[webdesign-resources]

CSS Text Wrapper: A Text Wrap Generator

Originally published on June 22, 2011.

CSS Text Wrapper is an HTML/CSS generator dedicated to text wrap. Traditionally, content shows up us rectangle blocks of text. Other than inserting images that text wraps around on, there's nothing much you can do to add flair to it. Unless you apply some HTML, CSS and Javascript sorcery.

You have several work area and preview settings to play around with like content area width, content are height, font-size, font-family and text-align. You can even use an image to trace your text around. Once you have all the options set, you can start dragging the points to apply your desired text wrap on the sample content. Once you're happy with the look, you can then apply it to your web design using any of the 3 ways: Inline CSS/XHTML, XHMTL with Classes and Javascript. Just like that, you can present your content shaped like a wine glass.

[webdesign-resources]

Check Browser Compatibility with Browser Shots

Originally published on June 20, 2011.

To check browser compatibility, you usually view your design in different browsers on your system. If you want to check it on a lot of web browsers, you have to install all of them on your machine. That could be quite a hassle especially if you don't have the system resources to spare. This is where Browser Shots comes in.

Browser Shots uses several computers to take screenshots of your web design on different browsers across different operating systems. All you have to do is enter the URL of the web design you want to test and pick which browsers and operating systems you want to test it on. Your submitted URL will be put on a job queue and you will be given an ETA on when your screenshots will be ready. Also, your URL will have its own page where the screenshots will be displayed.

If you plan on using this service often, it is recommended that you sign up for an account so you can save your browser and operating system choices as a preset. Priority processing is available, but for a price of course.

[webdesign-resources]

AJAX Loading Image Generator

Originally published on June 18, 2011.

You can always find generic loading image files for your projects easily, but have you ever wanted to use different loading indicator types with colors matching your design? During those times, you probably thought "Man, it would be awesome if there's a free loading indicator image generator out there." Guess what. There is.

AJAXLoad is a web app that lets you generate loading indicator images like these (I generated them using the colors of Web Design Resources' logo):

     You just have to pick an indicator type, a foreground color and a background color. You can also set the background as transparent. Once you've picked the colors and the indicator type you want for your loading image, you can see a preview of it. If you're already happy with your loading indicator, you can then download it as an animated GIF file. The best part? All generated loading indicator images are free to use wherever and whenever you like.

[webdesign-resources]

Textures: Kuschelirmel-Stock

Originally published on April 18, 2011.

You can find a lot of stunning textures on DeviantArt that you can use for your graphic art projects. One of the really good collections of textures I've found is that of kuschelirmel-stock. She offers colorful grunge textures as well as other types of stock images. Before downloading and using her stuff, though, be sure to read her terms of use.

[webdesign-resources]

Photoshop Patterns: Paper and Manga

Originally published on December 28, 2010.

First of all, happy holidays, everybody! If you're on vacation and you're thinking of playing around with some graphics or if you're actually working (well, that sucks), here's a couple of patterns that you can try on for size.

Seamless Paper Patterns by WebTreats

Six seamless paper patterns in 3 color variations. That's a few combinations you can try out if you're working on something with a school or a sketches theme. It would look nice on grunge designs too. Whatever you're going to do with it, know that the package includes a Photoshop tileable pattern set. Nifty and convenient, eh?

Seamless Manga Patterns by crazykira-resources

This set of seamless patterns is a little bit on the cute side. The package includes 25 seamless Photoshop patterns, so there's a lot for you to play around with. You'll see a lot of circles and squares and parallel lines in this stash. Go crazy. I hope you're having a blast this holiday season. See you guys in 2011!

[webdesign-resources]

ecoBlog WordPress Theme

Originally published on December 14, 2010.

For the very first entry of Web Design Resources, I would like to talk about the WordPress theme I'm using on this blog. It's called ecoBlog and it was developed by iDesignEco. I like minimalistic designs so I decided to go with this lush green-accented them that is mostly a gray and white palette.

Another reason why I chose this theme is that I want this blog's design to be compatible with all modern browsers. ecoBlog has been tested on all popular modern web browsers, so that's nice. I also like to tinker with code and ecoBlog's code has a clean and newbie-friendly structure. To top it all off, there's an administration panel that also features a sleek design. Changing theme settings is a very pleasant experience.

If you're looking for a WordPress theme for your blog or if you just want to see what a clean set of code looks like, check out ecoBlog.

[webdesign-resources]

Web Design Resources used to be a self-hosted WordPress blog but circumstances led me to moving it to Tumblr, hence this new Web Design Resources blog. To know more what this blog is all about, please read the About page.

The next few posts will be the old posts from the first iteration of Web Design Resources and I will be posting them as I wrote them originally. That means they may sound weird and out of context.

Enjoy.