articles on

Water drops in photoshop in 5 minutes

A couple of days ago while I was reading a magazine I saw a pretty cool soda ad where they used a lot of water drops in its design. It was excellent and I thought that I could create the same effect in Photoshop using the layer styles.The basic idea of how to create water drops is that they are a bit complex, they have highlights, shadows, transparencies, inner shadows and inner highlights. The best thing is that we can create all of those effects using the Layer Styles in Photoshop. You have shadow, inner shadow, inner glow, glow, bevel and many more.Even though there are lots of Photoshop training tutorials on the net I decided to create my own, plus it gave me an opportunity to create my first screencast. Take a look it’s only 5 minutes. If you want to see it in full resolution go to http://www.screencast.com/t/Nl8tRrfNT The final result: Download the Photoshop File Click here to download the Photoshop file

Gimp Galaxy

I’ve been using Photoshop for a long time, I think it’s the best tool for manipulating images and creating all sorts of effects. Besides that there are people that can make magic with Photoshop, like I posted before on the 10 Photoshop Masters’ article. Although I really like the Adobe’s main product, I have seen a lot of articles about GIMP, that stands for GNU Image Manipulation Program, and people creating amazing effects using this tool. So I decided to give it a try. I have to say, it’s possible to achieve very good results using GIMP. There are great variety of Filters, some of those I wish Photoshop had. However the interface is not that friendly. It lacks a lot of features like organizing layers in folders, the layer styles and running native on Mac OS X, if you compare to Photoshop. But I don’t want to compare or review software here, I just want to show my first creation using GIMP and how I did that. The idea for the image was inspired by the new Mario Galaxy game. 1- Open a New Document, I used 1440x900. 2 - Create a Gradient: Set the shape to radial, and choose black for the background and any color for the foreground. 3 - Adding some smoke: add a new layer, set the foreground to white and go to Filters>Render>Clouds>Solid Noise. Set the layer mode to Overlay 44%. Set randomize, 1 to detail, and X and Y size to 16. 4 - Creating the Beam of light: Create a new layer, choose the Create and edit paths tool (B) and draw a triangle to be the beam of light. After that create a selection clicking on the button to create selection from the path. Fill the selection using the Fill tool (shift+B) with a blue color. 6 - Create 2 copies of the Beam of light layer, and apply the Gausian Blur to them. Set Overlay to the layer that is in the back, and Dodge to the others. This will produce the lighting effect. 7 - Creating the sparks: Add a new layer. Using the Paing fuzzy brush strokes (P) to create the sparks like the picture bellow and apply Dodge to the layer mode. 8 - Add colors to the sparks: Using Filters>Colors>Colorify to change the color of the sparks. Tip: Duplicate the layers and add a little blur to create that glowing effect. 9 - Creating the light circle: Create a new layer, go to Filters>Light Effects>GFlare, choose hidden_planet in the selector tab. Try some different setting values or like the ones I used. Set the layer mode to Dodge. 11 - Resize the Layer to add the perspective. 12 - Some dust: Duplicate the light circle layer and add a Filters>Blur>Motion Blur. Type linear, and angle 90. The layer Mode is Dodge again. 13 - The Supernova: Add a new layer, fill it with black, go to Filters>Light Effects>Supernova. Again, try different values and choose the ones you like or follow the image bellow. After that apply Screen to the layer mode. 14 - More depth: In a new layer, use the Gradient but this time with a blue foreground and black background, create a radial gradient from the top left corner to the bottom right. Set the layer mode to Screen with 65%. 15 - Add some noise: Add a noise Filters>Noise>Hurl to the first layer, the background gradient of the image. 16 - The Final Result: If you want to create the stars, like in the Final Result image, just follow the photoshop tutorial about how to create the Leopard Starburst effect in Photoshop. It's exactly the same in GIMP. The GIMP file can be downloaded here (13mb), and the icons can be found at iconbase.com

Leopard Starburst effect in Photoshop

Here we are, in June, another WWDC with Steve Jobs and lots of cool stuff. This time what impressed me the most was the new Mac OS X, called Leopard. The finder has changed, finally, besides that, some cool features like the cover flow for files, quick view and time machine are great and make me really want to use it. Well, one thing that I loved was those new Mac OS banners, like the space, stars and those dust and flares. Awesome. So I tried to do that in Photoshop, and I have to say, it’s not that difficult, and this is what I want to show here. 1- Create a new document: Fill the background with black; 2 - Create the small stars: Duplicate the layer and add a noise>15%>gaussian>monochromatic. 3 - Adjust the Brightness/Contrast so there won’t be too many stars. 4 - Big Stars: Duplicate the small stars layer and apply a Brightness / Contrast again. 5 - Scale it like three times its size, we want to create bigger stars. 6 - Apply Images>adjustments>Threshold: This will show only a few stars. Apply SCREEN as blending options 7 - Refining the stars: Apply a mask on the layer and with the eraser with like 200px start deleting some parts of the layer. after that the stars won’t be too uniform anymore. 8 - Create some light: Add a new layer and create Clouds. Filters>Render>Clouds. Your background color has to be white and the foreground black or vice-versa. 9 - Apply a Hue/Saturation in the cloud layer and COLOR DODGE as a blending option. 10 - Now apply a Hue/Saturation in the big stars layer. 11 - Create some flares: I did that using some free ps brushes which you can find for free at http://www.psbrushes.net/ or http://www.brusheezy.com/brushes. Change some presets like Diameter, Spacing and play with that, testing the Shape Dynamics, Scattering, Other Dynamics and etc... Don’t forget to add some glow in the stars through the Layer Styles. 12 - Creating the Starburst Light: Create a Custom Shape, like the one I chose in white, apply a Gaussian Blur and after that a Twirl. Scale it down until it gets a perfect circle. 13 - Create a new Layer: Fill it in black and merge it with the Starburst layer. 14 - Add a Radial Blur to the Starburst and after that change the Hue/Saturation. Colorize it until you get a green color. 15 - Duplicate the first Starburst Light, reduce its size and apply again a Hue/Saturation, this time set a red/orange color to it. 16 - Addin the Text: For the X or Z just apply a simple Bevel and Emboss plus the Contour option. 17 - Create the reflections on the type: Create a mask and fill it with a gradient from white to black. Set SCREEN as blending options. Final Result: Download the Photoshop File Click here to download the Photoshop file used for this tutorial Plus, there are good sites with tutorials showing how to create a galaxy, stars and stuff like that. Bellow some that I used as reference. http://gallery.artofgregmartin.com/tuts_arts/making_a_star_field.html http://www.andreibilan.blogspot.com/2006/08/photoshop-tutorial-sparkling-stars.html  

Displace filter with vector effects

After one month traveling I’m back and trying to get back to my routine. First of all, I’d like to thank all comments and emails about the blog and the tutorials. Now talking about Photoshop, I started using the new CS3 programs on my mac and I have to say, they are really faster, and I can finally use the Illustrator more often. On this article I created a design inspired by the work of Nik Ainley. He’s one of my favorite Photoshop Masters and his work is really impressive. For this design I used the Displace filter in Photoshop, I think it’s one of the most obscure filters because most the majority of users don’t know how to use it, and that includes me, lol. The vectors were created in Illustrator with, again the blend tool. 1 - Create a new document and in the layer style create a gradient. 2 - Select a person to use: I used a nice photo taken by John Arlington for the Udox website. The new select features in Photoshop are amazingly cool, it’s pretty easy to cut a person off the picture with the Quick Selection Tool and the Refine Edge options. 3 - Add a Diffuse Glow: Go to Filters>Distort>Diffuse Glow 4 - Exploding the guy: Use the displace filter to explode the guy. I used a crazy image as a displacement map, though you can use any image. 5 - Refining everything: Apply a mask in the layer of the displace and in the guy’s. Start erasing the displace layer, after that use the Smudge tool to blend them together. 6 - Giving a blur: Duplicate the guy’s layer, apply the filter Pixelate>Mezzoting and choose the type as Medium Lines. After that apply a motion blur. 7- Creating the vector lines: That is pretty simple in Illustrator, just create some lines with the pen tool and use the blend tool. Repeat it as many times you think it’s ok. 8 - Using the vectors: In Photoshop again, paste the vectors there as Smart Objects, and apply a Layer Style. In that case I added a glow and a color overlay. Try different colors and glows to the different vectors. 9 - The final result: I played with the graphics a bit more like adding new elements and filters such as the noise filter in the background. I have to say that I’ve learned a lot creating this image. It took me some time to create everything, the displace filter and the vector lines that we see a lot out there. I want to say thanks to a visitor of my blog who sent me an email asking how to do an image similar to this one. That was my motivation to create this article. Download the Photoshop File You can download all the files used here.

Vector effects

Last week I had posted an article about Photoshop Masters, it was really good to see their works and how they used the tool to achieve those amazing effects. I really like the style of some guys there, particularly Adhemas Baptista, Eduardo Recife and Nik Ainley. Now in this post, I created a really cool design mixing a photo with vector elements using Photoshop (lots of brushes) and Illustrator. Pretty much everything needed was downloaded for free on the internet in sites like magurno and brusheezy.com. This tutorial may look complicated and long, but in reality it is really easy to do and follow, you'll only use brushes and masks.? 1- Choose a cool photo: This can be the most complicated part, in this case I was lucky, a photographer friend of mine had taken some pictures for a website really cool called UDOX and he allowed me to use one of those photos. 2 - Adding some vector elements: The first symbol I got from a cd that came with the computer arts magazine. 3 - Mixing Apply a color Overlay on the Layer Style preferences 4 - Using the first Brush: First you paint over the photo, and after that you start deleting some parts. It'll give the imprresion that the elements are sometimes in front and other times behind of the guy Apply a layer mask and delete through the mask Here I wanted to put the pink element behind the legs. 5 - Adding more colors and elements: As with the previous element, we used another brush and deleted some parts to put it behind the guy. 6 - One more: All of these elements are from the Vintage by in Vogue brushes, you can download them here. 7 - Some Illustrator: Adhemas uses this effect a lot, basically it is a Blend between two elements, and it can be done pretty easily in Illustrator. Just create two elements and blend them together You see that it creates a path Edit the path with the pen tool Double click on the blend icon and you have the Blend Options, where you can edit the blend properties 8 - We need some blue: I added another element beneath the guy's foot. 9 - Final refinements: Now it's time to refine the design, delete some parts of each element to make them look like they are mixed. Sometimes the orange element goes in front of the blend, other times it goes behind, the same applies to the others 10 - Now we need some light: Duplicate the orange element, create a new folder in the layers pallet, put it inside this folder, set the folder to Color Dodge, and add a Gaussian blur to the element inside the folder. Final Result: All files used can be downloaded. Download the Photoshop File You can download all the files used here.

Magic lighting effect in Photoshop

Since my last article on how to create smoke generated lots of traffic, I decided to write another one on some of the photoshop effects. Although I use Photoshop on a daily basis, I am by no means a photoshop expert. Well what I want to show here is how to create a nice light and magic effect. 1 - Create a radial gradient, in this case from a purple to a really dark purple 2 - Here I added a really cool Icon of a magic hat from the Crystal Clear Collection by Everaldo 3 - Add some text, I used the source code of a site to get the text and apply the Distort >Wave filter Create two stripes of text 4 - Rotate and place the text 5 - Add some light using glow : Use different values for each line of text, the secret here is the blending option COLOR DODGE.. Change the values of Spread, Size and Range 6 - Group the 2 lines of texts and with one apply a mask to make the stripes disappear at their ends. 7 - With the other group of text apply a gaussian blur, after that delete some parts to show the non-blury text. This will add a movement feel to the text, like they are really being magically created. 8 - Create a new layer below the text and with a regular big brush like 100px add a spot of light in white. The layer must be below the text, otherwise the glow will not affect the white spot 9 - Make some smoke again, I used the eraser, I could've used the liquify as well 10 - Create a cloud: to do that make use a marquee with feather set to a value bigger than 20 and apply the render>clouds holding the command key(mac), ctrl key(win). The same as the previous post, and the most important thing apply the COLOR DODGE blending options on it 11 - Sparks: For the sparks create a brush, play with the shape dynamics, scattering, and other dynamics. After that, apply a Outer Glow and Inner Glow to create the magic effect. End - The result is really simple but at the same time it looks beautiful. The whole process took me about 35 minutes, one thing I think is really cool is to apply the color dodge blending option to folder, and put blurred elements inside of it. Using it you can create some really amazing light effects. The PSD files can be downloaded. Click here to Download the Photoshop file used for this tutorial

Creating Smoke

Some time ago I had posted an article showing how to create a smoke effect in photoshop, and to achieve that I used a photo of smoke and some photoshop filters. However, some people had said at the time that I should have done the smoke as well and it´s exactly what I will show on this post right now. I had previously thought about what would be the best way to create smoke in photoshop, and I’ve read some tutorials online and watched some episodes of the amazing pixelPerfect podcast, to find a good and easy solution for the matter at hand. Actually it was easier than I had expected. 1 - Create some Shapes: I created some random shapes. 2 - Apply a Gaussian blur on each shape 3 - Using the liquify filter 4 - Positioning the shapes 5 - Adding some colors Add a background color on the layer of the shape, otherwise the Hue/Saturation won't work 6 - Creating a cloud behind the smoke Set a feather with a high value, like 40 to 80, and after that apply the hue/saturation on the cloud too 7 - Adding a gradient to create an atmosphere The gradient will give a atmosphere and more depth to the image Final Result The whole process took me about 30 to 40 minutes tops, it’s pretty simple, although it can be quite hard to create a natural smoke with the liquify filter, the best thing to do is to play with the brushes and with the tools to achieve the desired effect.

The Abduweedget: creating a dashboard widget

After a busy week, with a lot of things happening, Apple and their iPhone, the tons of gadgets and hi-def stuff at CES, see, it was almost impossible to be up to date with all of that. Anyway, as usual, while surfing on the web, I found a really cool article. It was a tutorial explaining how to create a dashboard widget with a tool called Dashcode Beta, which can be downloaded for free. Then I thought to myself, that is a cool thing to do here for my blog, I had 2 feeds, and why not? Following the article and using the dashcode makes the process really smooth. Basically you choose what sort of widget you want (RSS, Podcast, Gauge...), and then you start editing. The interface is pretty simple, I don't want to explain in details how to do everything because the tutorial already does that. The only think that I want is to show what I did. Choosing what widget you want Essentially what I did was change the basic model with images and CSS. My idea was a widget with a cool header, like the forecast one, where the images of the sun and clouds extrapolate the borders of the widget. Looking for inspiration I searched the word "abduction" at google images and got some images to fresh my mind. Searching images for inspiration With the subject of abduction in mind and tons of images seen, I started doing the image of the header. The header's design, with alpha transparency The basic idea of the widget is show my blog's content, so it must follow the design of the site. To achieve that it uses the same background and shares the same color palette and typography. Abduzeedo's design Another thing that I was willing to do was to create an option where the user would be able to choose the feed that he would like to read, in my case the Blog and the Sideblog's feed. Messing around with some "js" files I came up with a solution, if you are a ninja, probably, you will feel far more comfortable than I doing that. Clicking on that button and it will show the blog's feed, instead of the sideblog's After a couple of hours the result was pretty satisfactory, below you can see the abduweedget among the others in my dashboard, you can even download it as an example and, perhaps, sometime do yours. The Abduweedget in my dashboard Below a list of links related to this article: Developing Dashboard Widgets Build a Dashboard Widget Sample Code: Apple Applications: Dashboard How to make your own Dashboard Widget with Dashcode

Creating a web 2.0 blog - part 2

Here we go again, continuing the creation of my brother's blog, Blackbelt. Fixing some design issues and creating the XHTML and CSS template. Design Changes My brother had asked for some minor changes on the design of the blog, mainly in the sidebar, where he hadn't liked the round corners tha I had done, although he said he really liked the feeds' box which was black. Feeds' box, darker and with round corners The new sidebar was created using the same style of the feeds' box, but lighter. Using different style for visited links, however IE6 doens't do that. XHTML and CSS Using the basic XHTML generated by the Apache Roller, the blog engine that my brother uses, I started creating the CSS. After a couple of hours everything was pretty much done and working fine, however there were some problems to be fixed with .png images and the box model under Internet Explorer 6. With everything fixed, the template is done, working fine in all the major browsers: IE 6 &7, Firefox, Safari and Opera. If you want to take a look you can download all files that I have used so far.

Creating a web 2.0 blog

Throughout this article I will illustrate the creation of a weblog with the web 2.0 style. From the briefing to the CSS development. Guidelines The blog will be created to my brother who had asked me to do that, besides, he gave me some guidelines of some design aspects that he would like to have in his blog: Dark background; big font sizes; some round corners; a place to put some logos; Also he send me some links of site that he thinks are really cool, below there are some of them. Research With the guidelines and some references in mind I started my research and found some good links about designing web 2.0 style sites such as this Web 2.0 how-to design style guide, which explains really well the web 2.0 features showing examples of sites, concepts and what not to do. After reading a lot of site and got some good insights I became the creation of the layout, first the idea of columns, where the navigation will be, the main content, and stuff like that. Talking to my brother, he said that he would like to have a vertical navigation with a sidebar where he could add his favorite links, search, the blog's navigation, flickr photos, delicious bookmarks and etc... so I came up with a pretty simple wire frame. Wireframe of the blog, liquid layout Layout creation With the wire frame done I knew where to put the content, so I had to start adding loren ipsun content there. One thing that I think is really cool on the web 2.0 trend is the gradients, they create a really cool visual effect of difference on planes, elevating some parts and put some in a lower level. Another cool effect that I have already used on a personal project and I thought would be cool is that "emboss effect" in lines that divide content as Bartelme uses in his site. The dark color and the variation of them are a feature to be exploited. For the header I thought that would be nice to add an illustration or a photo like Veerle does. I start thinking which photo would be cool, looking for the right shot I remember that my brother had taken one pretty cool in Philadelphia in front of that Metropolitan Art Museum where Rocky Balboa always finished his training, as my brother loves Rocky and with the new movie coming to the theaters, I thought that image would fit like a glove. After all of that and several hours in front of my computer using Macromedia Fireworks I came up with the layout below. Click here to open the real size version in a new window The layout, round corner in some parts, gradients, pretty much everything Showing to my brother, he said that he liked it a lot but that there were some issues to be fixed. However he hasn't told me them yet. So the only thing that I can do now is wait, and as soon as he point the issues and we fix them, I will continue this article until the CSS is done.