Words from Alejandro U. Alvarez
Photoshop
Articles about photoshop, with useful tutorials, techniques, tips and everything I find interesting…
Create cool default avatars
01258 days
If you are designing a website where users can register and have avatars, and you want them to have those cool "Human shape" avatars as default, well, here is how to do them 
This are some avatars I've created for my websites:
How to do this
I recommend using a small size, 100x100 is best for me, although any size will do. Chose two colors that will suit your design, I usually chose a lighter color for the bg of the avatar and a dark one (The same as the font color will do) for the inner shape.
So go ahead and fill in the bg of our avatar with the bg color. Now its time to get that shape. You could draw yours, although I don't recommend this, there are enough resources in Internet to have to create another.
I used a free PNG icon gallery in ArubaMaps. I really like it, it has some good quality, big PNG icons.
Go to the category Creatures, and search for people's faces.
Of course you can use anything else other that faces, but I guess I like the look of the human shape as avatar.
Now you can simply drag and drop the image in Photoshop, copy it and paste into the document, press Control+Click over the layer thumbnail to select its contents, and fill with the darker color in a layer above. Then delete the layer containing the image and position your shape.
You can improve this by using some fades and stuff like that, but that is up to you.
Beautiful lighting effect in Photoshop
01262 days
This is the effect we are aiming for:
Step 1
Let's get this started, so first create a new document. For the example I'm using a 500x500px document which I will then fill with black.
With a dark tone of purple/pink create a radial gradient around the center. It should look like this:
Step 2
Now we need to get a nice "object". I used an icon I found at PNG icons, under the category Objects.
Simply place it in the center, over the gradient we drew, and play with the Levels (Image>Adjustments>Levels...) to make it look good in the new location.
Step 3
Let's get some text to put flying around our object. I simply went to the code (View>Source code) of this website and copied the first line, but you can use any text. Anyway, it won't be legible...
Paste the text in the image, and go to Filter>Distort>Waves. It will tell you that you cannot apply it to a Text layer, that you must convert it, click OK and apply the waves directly. The default settings are good enough.
With the move tool and the "Show transformation controls" check box checked, rotate and resize your text to look as if it is going away from the object.
Duplicate the layer (Cntrl+J) a couple times and move the new texts around to have multiple streams of text. You should end up with something like this:
Step 4
Now we must create the glossy effect that makes it look so cool. Go to layer styles (Double click over the layer icon or with the layer selected go to the bottom icon that looks like a circle with a f inside) and select Outer glow.
You can leave the default color or select another. I recommend that you use a different color for each text stream. Now the most important part is that you set the Outer glow blending mode to Color Dodge, this way it will look really glossy and stylish. For mine, I set the opacity to 100%, the size to 26 and the extension to 5, but again tweak this settings until you feel confortable with the result.
This is how mine looks now:
Step 5
Some improvements, duplicate more text layers, delete the layer style and apply a gaussian blur. Then set the opacity down a little, this way you create the moving effect.
I've used a brush called "Grunge flowers" which you can find in my article Best Photoshop brushes, to paint with black over the edges of the pinkish blurred circle we did in step 1, it looks way better like this
Then I added a little outer glow to that brush, also in Color Dodge, to increase the luminosity of the background.
Another thing you can do is create a layer mask for all text layers (Select the layer and then the bottom icon that looks like a double square) and with a black to white gradient I faded the outer edges, as if it was dissapearing into the distance.
Once this minor retouches have been done, press Cntrl+Alt+Shift+N and then with E instead of N to make a copy of what's visible and apply some Lens Flares (Filter>Render>Lens Flare) to add some visual impact.
I've made a lot of stuff in this step that I completely forgot about, but basically be creative. This is my final result again:
Partial source: Abduzeedo
Hope you enjoyed this tutorial!
GTA-like portraits in Photoshop
1This is what you will achieve at the end of the tutorial:
The Tutorial
To start things up you'll need several things, first of course Photoshop, then look for a picture of yourself or a friend looking "GTA-style". I found this one in a friends' profile:
Starting up
To start up, remove all background from the picture you have chosen. I usually use for this a layer mask, since it is easier to revert things.
To do that, in the bottom of the layers palette click on the third icon, the square one with a circle inside. What a layer mask does is it will hide everything painter on the mask in black. So get a black brush and paint in the layer mask everything that you want to delete. If you delete something you didn't want to, simply paint in white and you will restore it.
You'll get something like this:
Step 2
Now it's time to get a nice background for our pic. I recommend for this getting a real screenshot of the game, to make it more realistic. Searching in Google Images I found this one:
Put it behind the guy's pic, and move it, resize it, retouch it, until you get it looking nice.
At this stage I've got this:
Next step
It is time now to make our guy look as if it was drawn in the game. So select the guy's layer and press Cntrl+J to duplicate the layer, right click on the duplicated layer's mask and select "Apply mask", then go to Filter > Artistic > Cutout and move the sliders until you get it like this:
Now set that layer's blend mode to Soft Light. If the effect is too strong simply move the Opacity slider down.
After the cutout we might need to add a bit more "sharpness" to the lines in our character, so duplicate the initial layer (The one with the mask), apply the mask to this newly duplicated layer and go to Image > Adjust > Levels... and move the black end (left one) a bit to the right and the white one (right) a bit to the left. This way you'll get sort of sharper colors.
What now
Using a GTA logo (I chose the San Andreas one, since it is the most beautiful one for me) put it in the upper part, and over some sort of rounded black bg. This is how I did it:
As you can see, I've also put a gun on the guy's hand, it makes it a bit more GTA-style
Final steps
Now that it is looking pretty good, let's make it look simply outstanding. First we will pretend it is a broken glass, and then we will add the name of the guy on top.
To ensure that we can go back in case we screw up the whole thing make a new layer group (The folder icon at the bottom of the layers palette) and name it "original" or something like that. Make sure you hide all other layers, and leave only the guy and the background visible, and press Control+Alt+N and then Control+Alt+E. Now you'll have a new layer with all visible things combined on it. Hide the "original" folder, and make visible again the gta logo and the other layers you might have. If you hadn't done so already, create a blank layer underneath everything, and fill it with black.
Now with the Polygonal selection tool create "broken glass" cuts. Make sure you start in a common point all of them, and then go in zigzag from tiny to wide, from that point out of the combined layer.
Make sure that you delete the contents of those cuts, leaving only the black background.
When you are done, select the pieces left and move them around a bit.
I'll leave all this to your originality! Here is what I did, without the black background, so you can see the cuts:
We are almost done, the final step is to write the name of the guy on top. For that we need the font, so go to this page:
http://www.gta-sanandreas.com/downloads/
and browse for the font you like. I prefer to use Diploma, but you can use the one you like the most.
Download it and move it to C:\WINDOWS\Fonts\ (C:\ might change depending on your setup)
You might have to restart Photoshop for it to display the new font in the list of available ones.
Once you have it in Photoshop write anything you want, duplicate the layer, and to the one on top add a Stroke of 4px in Black. And to the one in the bottom add another Stroke of about 6-7px in White.
This will create the "double-stroke" effect in the logo.
To make it even more realistic double click on the text-layer and click on "Create warped text":
Note that the version I was using for this tutorial was in Spanish, but you'll be able to see the sliders and that kind of things
Make sure you apply those setting to both text layers!
And you are done!
Hope you enjoyed it, let me know how it went 
Best Photoshop brushes for web designers
141378 days
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
11380 days
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