Words from Alejandro U. Alvarez
alex
Hello, I am Alex a software developer currently established in the north of Spain. At the moment I am studying communications engineering here in Spain, a career centered in software development and communications signals. I have been working on website development for many years now, you can see my portfolio in my main website.
Homepage: http://urbanoalvarez.es
Posts by alex
Easiest gmail filtering technique
May 4th
As most of you probably know Gmail is full of features that most people don't know.
One of this almost secret features is your email name formation. For Gmail, there are some characters that are not considered as additional information, so for example urbano.alvarez@gmail.com would be the same as urbanoalvarez@gmail.com (None of those email addresses are mine)
Another trick like that one is adding words at the end with a plus sign. For example urbanoalvarez+client1@gmail.com This way all emails sent to that addressed are received normally in urbanoalvarez@gmail.com
Taking this a set further we could create a folder in our inbox that I'll label "Client 1" for the example, and setup a filter that will send all emails addressed to "urbanoalvarez+client1@gmail.com" to the folder "Client 1"!
This way you can give separate email addresses over the Internet and have your email automatically sorted into folders.
You could even create a filter to send all emails addressed at "urbanoalvarez+trash@gmail.com" to the trash, and give that email when you are forced to signup in websites you know you'll never return...
There are tons of uses for this technique, and they'll save you a lot of time for sure 
A developer’s day/life…
May 4th
Today I was thinking I would finish my current project and move on to a more interesting one, but then when all the back-end stuff was done and I decided to start testing you know what?
IE terrible display of a simple block, relatively positioned.
So I said, well, it can't be that hard... heh, foolish of me... 
About an hour later I still hadn't solved it, I was out of coffee, and I unplugged my computer directly.
I opened up Ubuntu Linux, and with Gimp I created this simple picture of how's a programmer/designer/developer/(Your name here) 's life:
I guess it is pretty straight forward... At first it was just the chart, but I just got a bit over-stressed
sIFR – Use custom fonts in your website safely
May 1st
UPDATE: The sIFR WordPress plugin is now available!
This is probably one of the most amazing scripts I've seen nowadays. It was developed by Mike Davidson and Mark Wubben, and what it does is it allows you to change the fonts used in your website to custom fonts without having to worry about them changing in the user's computer.
How this is accomplished is actually very simple. First of all you need a folder with all your fonts (.ttf files), then a JavaScript file has to be called from your html pages which will first check if Flash is enabled, and then if it is it will read through the code and determine where it should insert the flash movies.
Those flash movies take the font you selected and the text that the script found and create a static "animation" with the same text and size but with the new font. Since they are overlayed exactly over the original text, no change is noticed.
The only thing I'm afraid won't work fine is the background color. If you have a solid background it will work perfectly probably, but what if you use a textured background, like I do in this blog? I haven't tested it yet, but their test page works perfectly on solid backgrounds...
As a piece of advice don't over-use it, it is intended only for headlines, quotes, and other small bits of text.
Visit sIRF's homepage for more information on this subject
Visit their demo page
Future planning
Right after I found this tool I thought to my self, "I have to create a WP plugin that will automatically change selected tags or ids to themed fonts!". So well, I am developing now the plugin.
I started today so I guess it will take me no longer that this Sunday. I have about three days, considering that here in Spain we are on holidays... Yea I know, Spain is always on holidays 
So that is pretty much it, I'll keep on posting about the plugin status, and if you want me to notify you simply post a comment saying so and when I'm done I'll email you
Enjoy sIFR!
Best Photoshop brushes for web designers
May 1st
Here is a (huge) compilation of the best free Photoshop brushes out there. They are the ones I use, and the ones it took me a very long time to find over the web.
I've selected the best of them, and along with a preview and a description, I've made a zip file that contains the whole compilation.
For all brushes hosted at brushes.500ml.org you'll have to navigate to the brushes, since they don't allow direct linking...
If you enjoy this set of brushes consider blogging about it
- Download the zip file with all of them - 25,7Mb (Megaupload link)
Take into account that this is a huge list of brushes, and it takes a long time to download. Also, the mirrors might only be available for a limited time, so if you find them to be broken please notify me
And here is the list (Alphabetically ordered)
Art nouveau
This beautiful set features 8 brushes with patterns and designs following art nouveau techniques and style.
Visit the brush homepage
Botanical flowers
This is a very nice set of brushes, specially for "natural" websites or just as footer decoration.
Visit the brush homepage
Bugs and Angels
This is indeed a very strange combination of brushes to put in a set, but both of them are very beautiful and make a good "innovative" design element.
Visit the brush homepage
Elegance
One of the best web design brush sets I have ever found. This provides you with some very elegant lines and circles. Worth checking out
(I couln't find the author's website, so if you want the set, download the pack)
Feathers
Strange brush set, filled with feathers, but it makes a beautiful texture I guess.
Visit the brush home page (Scroll down a bit, by Sheishido)
Floral swirl
A very beautiful brush set, largely used in modern web designs (And in this blog's design too)
Visit the brush homepage
Foliage
Another brush set of plant elements. This time it is packed with tree branches, leaves, bushes... Great for some "wild life" designs:
I couldn't find this brush homepage
Fractals
A nice set of fractal images, these are great to put in backgrounds for scientific websites or pics...
I didn't find the original brush set website, but here at getbrushes.com you can find tons of fractal brushes.
Frames
This are good sets (I've put here two sets of frames) to enclose your images in.
I don't remember where I found them, but just search for frame brush sets and you'll find a lot more.
Garden of Decay
One of the most beautiful sets here, nice textures and images. It comes with some handwritten text too.
You can find it here, along with a lot more brushes by Annika
Good & Evil
A nice set, featuring some trees, skies, and other textures. Great for image edition, and adding header decoration too.
Brush set website (And also in Annika's website)
Grunge flowers
Probably the best brush set exposed here. I used it a lot for my backgrounds in this blog's design.
Grunge texture
A set of textures to use in "rough" designs probably
Hair
I really don't know where or why you would use this, but it is a good set of high quality "hairs"
Illusionist
Very strange set of cut & inversed faces. I really don't know how to describe this set. It is very cool though, so check it out.
By Annika Von Holdt
Paint
This is a very useful brush set, it is also the one I used for the header background, those paint strokes. It has both strokes and splatters...
Patterns
Some patterns for backgrounds or buttons, or whatever you want them for.
Splatter
Another set similar to the paint set, but this time focused on Paint splatters. If you want to add splatters to your designs, this is your set!
Valentine
A very romantic set, with hearts, roses, hand-written text... You'll love it
Victorian people
This is probably a very strange brush set you might think you'll never have to use, but once you have it, you'll use it. Guaranteed. It features full-body pictures of Victorian people.
Important notes & download
Please do not hotlink the images nor the zip file with the compilation, instead link to this article please.
I couldn't find most of the brush sets websites because over the years I have renamed most brush set names, so if you are the owner or creator of them and I have not placed a link to you please comment it below.
Also, if you think a link was misplaced do comment.
Download the compilation
Here you can download all of the brushes before. They come in a zip file, ready to send to photoshop.
- Download compilation (Megaupload link)
You don't know how to import them in photoshop?
Simply go to the install location of photoshop (Normally in C:\Program files\Adobe\Photoshop). Open it up and search for a folder called "Prestablished settings", once there go to "Brushes" and paste the content of the zip file.
If you had Photoshop already opened you'll have to close it and re-open it to use your new brushes.
Enjoy
Image formats review
Apr 29th
For all of you designers out there that don't understand exactly what is the difference in "lay" terms of the most common web image formats I will go on with a little explanation and examples for you:
The background is a PNG image that is always the same, and the images are set over it
PNG
This is a relatively new file format, it stands for Portable Network Graphics, and it's primary characteristic is that it has lossless data compression, meaning that it won't lose any quality whatsoever.
And the other greatest thing about it is that it has full alpha support, meaning that it can have different opacities and transparencies.
Here are below some examples of PNG images with different backgrounds:
The size of the PNG file on top (100x50px in a row of 4) is of 12,4Kb
As you can see it can be perfectly seen even though the background is changed (stripes, solid color, alpha transparencies bg, and transparent bg)
GIF
GIF image format is probably the most common one in the web, or at least it has been for the past years. It stands for Graphics Interchange Format, and it has 3 characteristics that make it unique and sometimes useful:
- It has lossless data compression (Pretty much like PNG)
- It supports animations, although they increase a lot file size
- It supports transparencies, although it doesn't support alpha opacities.
Here is the same demonstration as before, but now with GIF graphics on top:
In order to look good GIF images with transparency often use a surrounding border, that should match the background color. As you see in the example the image looks just great when displayed over white, but when displayed over other types of background colors the transparency looks awful.
A great advantage though is that this GIF image weights 4,04Kb, against the 12Kb of the PNG file...
JPEG
JPEG stands for "Joint Photographic Experts Group" and it is not the actual name of the format, it is the name of the comitee that created it, but since everyone decided to call it this way, lets stick to it
JPEG offers some characteristics that are worth looking at when designing for web, it uses lossy compression, which basically means that when saved it will lose quality.
Depending on its use this may not be bad. For example in this site's design I've used JPEG files for backgrounds, since the quality loss contributes to the "rustic" effect, but it should never be used for logos or sharp things.
The good use for JPEG is for large photographs, big backgrounds, or other large images.
Here is an example of the dice image, using different compression quality:
Since there is no transparency the background will be seen always as white...
High quality:
Medium quality
Low quality
File sizes were:
- High quality: 31,2Kb
- Medium quality: 26,2Kb
- Low quality: 25,0Kb
Conclusion
When designing you should try to use GIFs as many times as possible, since they provide the smallest file sizes, and better quality than most JPEGs. In the cases where you need alpha transparency you should consider changing to PNGs, but avoid their use, they'll increase a lot page load time...
Have fun designing