Words from Alejandro U. Alvarez
Posts tagged photoshop
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 
Creating grass in Photoshop
31361 days
by alex
in General talk
A very beautiful resource for web designers is drawing grass, although it is usually hard. I've come up with this great tutorial on how to create grass, of any size, color, or anything.
This is the result you can get:
Grassy field:
Grass in a website header (This is actually a design I've done to add to this blog)
(Click to enlarge)
Step 1
In this tutorial we will be creating the first image, a grassy field.
So open up a new document (A medium size will do, I'll be using a 500x500) and fill it with a nice blueish gradient:
Step 2
Download this set of brushes, which contain 5 different styles of grass, which will create the illusion of variety.
(To install this set copy the .abr file and go to C:\Program files\Adobe\Photoshop x\Presets\Brushes\ The x is your installed version of Photoshop )
Step 3
Select some tones of green, try to chose a light one and a dark one to start (And ones that look sort of natural) and with the fourth brush from the grass set (The one that looks darkest in the preview) create a sort of base with the darker color.
You'll end up with something like this:
Now that you've got the base, switch to a more spaced brush, and with a bit lighter colors cover the base. I used for this the third brush.
It now looks like this:
After this you'll have light green grass, but in the places closest to the bottom it is supposed to look bigger and darker, to look ok, so with the same brush (Or another one if you prefer) and darker colors paint in the bottom and corners specially, creating a more realistic feel.
It will look like this:
And finally switch to a brush a bit more condensed and with medium greens fill in the blue spots, retouching and finishing up some details. This is just for a great result, and after all this tweaking it will look like this:
Final steps
You can now add some text over the grass, as if it was standing on it. To do this simply type in the text and put it between two layers of grass. If you didn't separate the grass into layers just create a layer above the text and draw some more grass covering a bit the bottom of it. Then duplicate the text, distort it to cover the bottom and change the color of it to black, then use the gaussian blur and you'll have a shadow (Which should go also under the grass that covers the text)
It will look like the grassy field I showed at the beginning:
Here is another example of it:
Other uses are the ones I also showed at the beginning, for headers and footers in websites.
Enjoy,
Alex
How we became web developers…
31363 days
I normally write to those web developers/programmers who are already good, experienced, and thus the articles are somewhat advanced.
But today I got up feeling nostalgic I guess, or I just felt like remembering back on my www birth, on my first impression of the Internet, my first site online, my first steps in w3c standards, the day I discovered CSS, my first table-less layout, the day i realized IE was total crap... In a few words, I wanted to talk about all the special events in a web designer life.
So first you realize you want to do something that you think will make you rich and famous, and you realize that millions of people go in Internet everyday, so you believe that if you learn how to design a website you will have those millions of visits. Come on, all of us once believed that was true
So from here some take on an html/Dreamweaver course or they buy a book. I'm more of the book buyer, but I know many signed up in a class. It is now that you learn the basics, and you design a table-based website, which is about... Your favorite computer game! (Or pet, or music group, but it is always of that sort... ) And from there you start Your Own Website! which is about you, and you make it sound "professional", and you show it to your friends and they are totally amazed!
By now you feel like you are a genius, and suddenly, as you are in Dreamweaver doing some crappy tabled design, you look into the source code for any reason, and you find something that astonishes you, CSS styles at the top!
You are feeling surprised, and when you start playing with it Dreamweaver pulls down this enormous drop down of available things to do, and you are totally overwhelmed by the new capabilities you've found! So you just experiment for a while.
If you haven't done so already you get your own free domain, which always looks like "alexwebdesign.freewebsites.com" or something of that sort...
Either now or before CSS you find those "Cool JavaScript snippets" sites, and you fill up your site with "snow falling" and "mouse trails" and the weather, and the time, and all sorts of totally stupid things you think are cool... But don't blame yourself, we all did it...
You are starting to feel quite an expert, but you want to do one of those "Contact forms" that are so cool and different from your "mailto:..." hyperlinks, and you go into a forum and ask how they actually send the email, and they will probably tell you "PHP does it", and of course your next question is "php?"
And yet again you seem to see a new horizon appear in front of your eyes, full of new paths to explore, new ways of discovering the boudless capabilities that web development is opening for you.
At some point here you find that there is something called Databases, that you can use to dynamically store and display data, and you want to test them right away.
Your first dynamically generated pages take you about a week to get them to work properly. You struggle to do a simple INSERT query, but you are happy, of course.
If you felt like an expert before you now think that you could even create a replica of Google if you wanted, and in your high, you take on a dynamic website, with user registration and all of those cool things you've seen so many times. That website has your name on the footer of every single page, and it is usually about Gaming, Books, Music, Tutorials, or Animals. When you think you are done you are astonished to see that not even one user registers! And you suddenly find out that for the world you don't even exist...
You try to find yourself in Google a week after you make the website public, and it isn't there... You know nothing about SEO, you think that Google "magically" finds the websites, until yours is listed.
Once that happens you start asking how and why, and you dive into the world of SEO, PR, rankings and stats. You install Google Adsense and Google Analytics or similar software, and you check both everyday...
It is at this point where you either continue and become a good web developer (After lots, and lots, and lots of practice and reading), or you quit and remember it as an interesting adventure for the rest of your life.
If you chose the first alternative (Which I did, although I missed the "being good and practicing a lot" ) you'll start to get clients, and work, and you suddenly realize it has become tedious, having no freedom to chose when and what to do... But well, it is now a job so...
Most of us also start a blog now, and here I don't know about the rest, but I was TOTALLY surprised to see the stats... I have to say it has been incredibly amazing and all thanks to you guys, so yea, check out where you are in the line, and see what you've got ahead 
Enjoy,
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