The Art Company's Blog

15 Online Background Generators

Marc — Sun, 26 Apr 2009 10:23:16 +0000

Backgrounds are important. Whether they’re used on a website, on a drawing, on an image compo or on a mobile phone, they give an undeniable “cachet” to your creation, while also improving the viewing experience by increasing the focus on the content. And while they’re tons of free or shareware applications to create these backgrounds, there’s also a lot of free online tools that will do the same in seconds. This list of 15 online generators will allow you to create your own background, stripes and tartans in a couple of clicks!

» 15 Online Background Generators

Ultimate Collection Of Useful Photoshop Plug-Ins

Marc — Fri, 24 Apr 2009 10:22:14 +0000

Our friends at Smashing just released an article that features nothing but the ultimate list of must-have plugins for photoshop. It doesn’t mean these plugins are free, of course, but it gives you a clear idea of how your plugin collection should look like if you’re info serious graphic design.

» Ultimate Collection Of Useful Photoshop Plug-Ins

600+ free high-quality textures

Marc — Wed, 22 Apr 2009 10:16:43 +0000

Enough with the talking, here are the links. Enjoy!

Abstract Textures volume 2

Abstract Textures volume 1

Various Textures 1

55 Free Large Textures

Rusty Metal Textures

Metal Grunge Images – Part 1

/ Part 2

Dirty Wood Textures

25 Free Hi-Res Fabric Textures

31 Free Original Textures

6 Hi-Res Concrete, Clay and Slate Textures

6 Hi-Res Wood Textures

12 Wood Textures Pack

80 Free Hi-Res Paper Textures

Free Liquid Textures

Free Hi-Res Paint Textures

Free Crack and Dirt Textures

Colorful Antique Fabric and Wood Textures

20 Free Original Hi-Res Stained Paper Textures

Free Hi-Res Textures and Tutorials

Free Hi-Res Cardboard Textures

Free Hi-Res Denim Textures

60 Impressive Free Hi-Res Textures and Backgrounds

60 Free Exclusive Textures from SXC.hu

Free Hi-Res Grunge Nebulae Textures

10 Hi-Res Quality Bricks Textures

15 Hi-Res Stone Textures

337 Free Textures at TextureKing

Find your way in the jungle of file extensions

Marc — Tue, 21 Apr 2009 10:14:32 +0000

As web developers, web designers, graphic artists or information architects, we deal daily with a lot of documents. Files, applications, archives, that’s a lot of information. We also exchange a lot of data with colleagues, co-workers, contractors, freelances… And in this mass of data, sometimes there are pieces we don’t know. What if you’re sent an obscure .ABT document and don’t have a single clue what this file format is? Of course, you can Google it, but wouldn’t it be nice to always be able to open any file you have, regardless if you have its native mother application or not? Now it’s possible, thanks to OpenWith.org!

OpenWith.org provides detailed information about most file extension and links to free programs that can open and create each type of file. There are plenty of great programs out there that will cost you hundreds to do what you need. What you probably don’t know is that there is usually free or open-source software that is just as good.

OpenWith.org is a little piece of (free) software that provides detailed information on most of the file formats you can meet in your life. Most important, it also provides links to free or open-source software that, once installed on your machine, will allow you to open (and most of the times, also manipulate) the files. All it takes is a right-click on the document in your favourite files explorer, and then select “How do I Open This?” from the popup menu. A couple of seconds later, you’ll know what that infamous .ABT document is, and what you’ll need to open it.

OpenWith.org currently recognizes more than 120 different formats, and more are regularly added as the application gets updated. It’s definitely a must-have utility for every professional out there.

» Download OpenWith.org

Don’t write for yourself, write for your audience!

Marc — Wed, 15 Apr 2009 10:12:02 +0000

Writing for the web requires a certain discipline. Also, the way you put up your content can’t be compared to the way you write for other media, such as newspapers, or any other form of more “traditional” communication. But most of all, what you write on the web should talk to your audience, not to yourself. Our friends at WebDesignerDepot have written an excellent article over the subject, explaining the “ugly”, the “bad” and the “good” of a efficient copywriting, and how it can impact the effectiveness and the core value of your websites. Read on!

» Is Self-Centered Web Copy Hurting Your Websites?

Size your CSS for HTML e-mail with Premailer

Marc — Mon, 06 Apr 2009 16:57:26 +0000

One of the main concerns when creating an HTML page to send via email (like a newsletter) is that the application that will be used by the recipients to read your page has, at best, a very vague interpretation of CSS (at worst, no support at all), whether that CSS is linked from an external stylesheet or directly inserted into the document (in the HEAD section). Hopefully, there are alternatives. But some are far more usable and effective than others…

One of the ways to solve the headache is to force the CSS description into each HTML element that will be needing one. This technique is called inline CSS, and is proven to work. However, it’s quite a pain in the … (well, where you feel pain when you have to spend hours on boring stuff), since it’s a very time-consuming procedure.

To give you an idea, here is how inline CSS works. Imagine you have this:

Welcome

and sectiontitle relates to:

.sectiontitle {
      font: bold italic 24px/30px arial, helvetica;
      color: #58fe2a;
      letter-spacing: -0.08pt;
      padding-bottom: 20px;
      }

Now imagine you have about 20 h2 headings with that sectiontitle class in your document. Using inline CSS means that you’d have to turn each of these 20 h2 tags into:

 Welcome

Nice, uh? Oh, and the same applies of course for every HTML element you need to style.

Hopefully, here comes Premailer. It’s an online service that turns a regular web page with attached external stylesheets to something understandable by Outlook, Thunderbird or GMail. Simple, neat, and effective.

The tool is pretty straightforward: paste the URL of the page you want to convert, specify a querystring if needed (for example, a tracking code if you have one), and click on “Submit”. The engine parses your document and turns every CSS rule into its inline CSS counterpart, then displays a link to the converted document so you can check it and save it. It also provides a short analysis of the used CSS properties, and indicates how well each would be supported in the major email clients.

Needless to say, this service is really, really appreciated, and will save hours of headache to everyone who needs to create documents for an email communication campaign…

jQuery perfect rounded corners

malagem — Wed, 01 Apr 2009 16:30:12 +0000

Rounded corners have become one of the essential design components of modern web design. There are numerous ways to implement them in your pages; pure HTML/CSS, proprietary javascript, or using standard frameworks like jQuery. That’s the approach we have chosen, since it’ll be very difficult to overcome the simplicity of this solution.

jQuery is one of the most used javascript framework today. It’s light, easy to setup, easy to use and integrates flawlessly with all the platforms and the browsers on the market. That’s the reason why we have decided to go for that solution to implement rounded corners on our pages.

jQuery can be extended using plug-ins. Plug-ins are, from a programming perspective, little add-ons that can be considered as libraries. The plugin we’ll be using for our rounded corners works exactly like that. It provides a set of methods that allow web developers and designers to seamlessly integrate new features in their projects.

Setting up the scene

jQuery is a javascript framework, and comes as a standard script. So you initialize it like you would do with any other script, by loading it from your page’s section.

Then, you load the jQuery plug-ins you’d like to use exactly the same way. In this case:

Now, you need to tell jQuery to execute the plug-in. To do so, you will have to use jQuery’s specific syntax. We’re not going to explore all the details about that here, so we encourage you to pay a visit to the jQuery website and browse the extensive documentation you’ll find there.

$(document).ready(function() {     $('whater-css-selector').corners();     });

What have you just done, here? You told jQuery to execute a function once your page has been completely loaded, and that function should apply the corners method to all the elements within the page that match the CSS selector you have specified. For example, you could have written:

    $('.rounded').corners();

Which would have applied the rounded corners method to all the elements that feature a class=”rounded” in your page. Or, you could have written:

    $('div#content>a.link').corners();

Which would have had the same effect on all the a tags with a class=”link” located within the

that has a “content” id.

The jQuery Corners plug-in

The plug-in we’re using will easily create beautifully rounded corners. It creates perfectly anti-aliased corners, supports transparency for composite background, and uses no images or unnecessary obtrusive markup. Its key features are :

Less than 8000 bytes after yui compression.
Beautiful and fast anti-aliasing for older or stubborn browsers.
Degrades well for browsers with javascript turned off.
Native browser corners used when available (mozilla and webkit).
Form and anchor buttons are easily styled and rounded.
Vast range of supported browsers (Firefox, Chrome, IE6+, Opera, Safari, iPhone, …)

The method supports various options, that allow you to mix different corners sizes or activate or deactivate anti-aliasing. It rounds buttons and fields corners perfectly. Finally, you can pass the options directly within the class definition right from the HTML code, like this:

Which will render 10px-radius rounded corners with transparency support for composite backgrounds.

Where do I get it?

» jQuery rounded corners
» jQuery reference

Font conformity: cross-browser, cross-platform?

malagem — Thu, 26 Mar 2009 09:13:16 +0000

Tweaking your CSS and your code so your pages render nicely regardless of the user’s browser is, we all know that, a very time-consuming hassle. But there’s more into it than just cross-browser consistency. Fonts might not display the same way on a mac and on a PC — in fact, that nice font you used for your headings might not even exist on the other platform. Now what? Hopefully, there’s Typechart.

Typechart is a very simple website, with one simple purpose: allow you to compare how fonts render across different platforms. To ensure maximum compatibility and consistency, it focuses on the standard faces (Arial, Georgia, Verdana), while giving an insight on platform-specific typefaces (like Cambria on windows or Lucida Grande on mac).

The way the site works is pretty straightforward: select a typeface, an emphasis or a type size, and see the how the fonts render based on your selection. Switch between platforms with the built-in preview system so you can control how the output looks when handled by Cleartype on windows or AppleFont on mac, then simply grab and paste the corresponding CSS.

In addition, Typechart provides a set of useful resources around typography, with links to articles, books, and additional tools.

» Visit Typechart

So long asleep, but not dead.

malagem — Mon, 23 Mar 2009 08:34:48 +0000

It’s been 6 months, since our last blog post. 6 months full of projects, of contracts, of customer meetings, of countless late work nights. We showed less signs of life than Han Solo in his carbonite prison. Some even asked us, kindly: “Are you dead”?

Well, we’re not.

We’ve been busy far beyond our expectations — which is good, we won’t complain about that. But we’ve neglected our audience, and that wasn’t good. So in the future, we’ll make every effort to try to post at least once a week. Those last 6 months, we’ve gathered tons of valuable resources, and we think it’s just fair that you get your hands on it.

So stay tuned !

Online tools do it faster

malagem — Fri, 05 Sep 2008 09:33:03 +0000

When it comes to creating content, there are two options: either you rely on the software installed on your machines, or you use online applications. Of course, these two options are quite different: you can do much more with Gimp or NVU than with an online form generator or an online button maker. But to save time, ask yourself: is it worth launching Photoshop every time you need to design a background pattern?

Online generators are exactly what the name says: online applications that will let you generate content, graphic elements or code snippets. They’re far from beeing as complete as their standalone counterparts, but they do pretty well what they’re meant to: quickly and easily create pieces and parts for your projects.

In the list below, we have selected a wide collection of online generators, for nearly every foreseeable purpose: from CSS templates to barcodes, from patterns to buttons, from menus to tags, we have pretty much everything you’ll need. And as usual, free of course!

Code & Script

CSS templates

Buttons

Flash

Menu

Text

Images

Tags

Miscellaneous