articles on

Turn Me On - Case Study

Turn Me On - Case Study

Our friend Craig Shields found a one of his artworks in his hard drive and as he mentioned, it's his take on the "extremely over done" extrude 3D text effect. We don't care if it's common practice or not, the artwork is very cool and it's a good reference for those trying to learn how to use Photoshop and Cinema 4D for this type of effect. It totally deserves to be featured here on Abduzeedo. If you don't know Craig, he is a Lincoln University Undergraduate and proud member of Depthcore, he has dedicated himself to the digital arts, often combining traditional and digital techniques to create some truly unique illustrations. For more information visit http://www.craigshields.co.uk/ Process This has been on my hard drive for months and I realise that it's outdated but would like to share. My take on the extremely over done and common practice of EXTRUDED 3D TYPE. Enjoy. Final result

Super Easy Furry Text in Pixelmator

We love playing with typography, it's simple and always effective not only in terms of outcomes but the amount we can learn by experimenting with text effects. From 3D to light effects or simply creating a furry text effect with a leopard style texture. That's the idea of the following Pixelmator tutorial. So in this tutorial we will show you how to create a Furry Text Effect using Pixelmator. The whole process won't take you more than 30 minutes and it is without any doubt a very useful technique for future projects. Step 1 Open Pixelmator and create a new document. I am using 1650x1080 pixels. Step 2 With the Type Tool (T) add the text you want. I used the word "fur" with the font Rockwell bold. I also reduced the kerning so the letters got connected. Step 3 Time to use some nice texture. The one I am using is called Skin Of The Leopard by Friday, from Bigstock. Step 4 Holding Command Key, click on the thumb of the text layer to create a marquee selection. After that select the texture layer and then go to Layer>Add Layer Mask. Step 5 Select the mask layer and then go to Filter>Blur>Gaussian Blur. Use 10 for the Radius. Step 6 Go to Image>Levels. Use 54% for Black, 56% for Grey and 58% for White. The idea of these 2 steps was to create a rounded corner for the text. Step 7 Go to View>Show Brushes. Then click on the settings icon on that panel to change another brush pack. Select Nature and use the brush I used in the image below. Once the brush is selected just start painting with white over the layer mask. Step 8 Chane the size of the brushe for some area to ake it look more realistic. Step 9 Duplicate the layer once it's done and move it a few pixels down to add some depth. Step 10 Darken the layer underneath to create the 3D effect. You can do that by either using Image Adjustments or just creating a black layer on top of the layer created in the previous step and use Multiply for the Blending at 70% Opacity. Step 11 Select all layers and duplicate them. After that merge the new layers into one and go to Filter>Blur>Gaussian Blur. Use 10 for the radius. Step 12 Change the Blending of the blurry layer to Screen at 50%. This will add some nice glow to the furry text. Conclusion You can add a texture for the background now and the image will be done. You can also try different textures and this technique applies for all sorts of text effects. Download the Pixelmator file Click here to download the Pixelmator file used for this tutorial

Wrath of the Titans in Photoshop CS6

We always try to publish tutorials based on effects we like especially from movies, posters and other sources of inspiration. Most of the times we want to redo effects so we want to learn how that was done. This tutorial is not different. We will be revisiting the Clash of the Titans tutorial with the new effect inspiring on the Wrath of the Titans poster. All done using the new Photoshop CS6. So in this tutorial we will show you how to create a nice text effect based on the Wrath of the Titans poster in Photoshop CS6. The whole process is simple but it will take you 1 to 2 hours to go through everything. Step 1 First thing to do is to get the text right. To do that is pretty easy, we have already showed a tutorial on how to make the Clash of the Titans logo, so you can just follow that at http://abduzeedo.com/clash-titans-text-effect-photoshop. Step 2 Now in Photoshop, create a new document and fill the background layer with a radial gradient from #181818 (dark) to #757575 (light). Step 3 Copy the text from Illustrator and paste it Photoshop. Just make sure to have a light grey for the color of the text. Step 4 In order to add some cracks and deformations on the logo we will use an image for reference. The one I am using is from Roberto Castillo entitled Cracked Set. Courtesy of Shutterstock. Just import the image and place it on top of the logo. Try to find a position that doesn't destroy the logo that much. Then just create a marquee selection of the cracks. Step 5 With the logo layer selected go to Layer>Mask>Hide Selection. You will have an effect like the image below. Step 6 Time to play with Layer Styles. WIth the logo selected go to Layer>Layer Styles>Bevel and Emboss. Select Inner Bevel for the Style, Chisel Hard for the Technique, 365% for the Depth, 250 pixels for the SIze, 0 for Softness, 100º for the Angle, 32º for the Altitude. For the Highlight Mode use Color Dodge with orange at 65%. For the Shadow Mode use Darken with Black at 85% Step 7 Select Pattern Overlay. Then we will use a custom texture. The one I used is courtesy of Shutterstock and it's entitled The surface of the old metal, visible rust by Supertrooper. Basically what you will do is open the file in Photoshop and go to Edit>Define Pattern. Name it "Meta". Back to the design. Select the texture you created for the pattern. Use Hard Light for the Blend Mode. Step 8 Select Color Overlay. Use grey with Overlay for the Blend Mode. Step 9 Select Inner Shadow. Use orange for the color with Hard Light for the Blend Mode. For the Angle use -90º with 11 pixel for the Distance, 20% for the Choke, 13 pixels for the Size and change the Contour for the same we are using in the image below. Step 10 Go to Edit>Transform>Perspective. Add a little perspective like the image below. Step 11 Back with the cracks from the step 4. Make it visible and then create a marquee selection of the logo. Step 12 With the cracks layer selected go to Layer>Layer Mask>Reveal Selection. The blue cracks will be visible on top of the areas we deformed on the step 2. Step 13 Now let's add some layer styles to the cracks to make the melting metal. Go to Layer>Layer Styles>Color Overlay. Use Orange for the color. Step 14 Select Outer Glow and then use Overlay for the Blend Mode with red for the color. For the Technique use Softer with 10% Spread and 30 pixels Size. Step 15 Select Inner Glow. Use Color Dodge for the Blend Mode, 60% for the Opacity, white for the color. For the elements use center with 1 for Choke and Size. Step 16 Duplicate the layer so the effect is a bit stronger. Step 16 Let's create a brush now so we can add some nice smoke effects. Go to Window>Brush. Select the Cloud tip preset. Change the Spacing to 1% Step 17 Select the Shape Dynamics. Use the image below for the values. Step 18 Select the Scattering and use the image below for the values. Step 19 Select Texture. The for the Pattern select the Cloud one. Also change the Scale to 200% and the mode to Color Burn. Step 20 Select Transfer and change the Opacity Jitter to 100%. Step 21 Add a new layer on top of the background. Use the Brush Tool (B) with the brush you have just created to paint some clouds. Use grey for the color. Step 22 Add another layer, this time underneath the previous one. The still with the Brush Tool and the brush you created. Paint some red clouds. Step 23 Repeat the same process, this time to create some black clouds on top of the others. Step 24 Add a layer on top of the grey clouds one. Then fill it with brown #574f41. Then change the Blend Mode to Overlay. Step 25 Now let's add a nice Google Map satelite view. I print screen a map from greece. Put underneath all the other layers, but on top of the background one. Step 26 Go to Image>Saturation>Hue and Saturation. Change the Hue to 40 and the saturation to 15. Step 27 Add a layer on top of the clouds but underneath the text effect. Then fill it with a radial gradient from black to white in the center. Change the Blend Mode to Multiply at 80% Opacity to create a Vignette Effect. Step 28 To create some nice shatters on our text effect we will use another image to get the assets from. The one I am using is courtesy of Shutterstock and can be found here http://www.shutterstock.com/pic-73243228/stock-photo-abstract-character… Step 29 Copy some shatters from the stock image and paste in the document. Position them on the areas that we deformed the text. Just copy the layer style from the logo and apply to them. You can change the inner shadow a bit so they won't be so yellow. After that merge all layers with shatters into one and go to Filter>Blur>Radial Blur. Use 10 for the Amount, Zoom for the Blur Method and Best for the Quality. Step 30 Go to Layer>New Adjustment Layer>Photo Filter. Use a dark yellow with 75% Density on top of the other layers. Step 31 Select all layers and duplicate them. Group all the new layers into one so you will have a layer with your composotion. Go to Filter>Blur>Radial Blur. Use the same settings as on the Step 29. Conclusion Duplicate the previous layer and then go to Filter>Blur>Gaussian Blur. Use 8 pixels for the Radius and then change the Blend Mode to Screen with 50% Opacity. Your design will be done by now. As you can see the process wasn't based on new techiques but on how to reuse them to create the effect we wanted. Using the tools will be always like that. Tweaking and evolving techniques. Download the Photoshop File Click here to download the Photoshop file used for this tutorial

LCD Style Effect in Pixelmator

Digital LCD effects are very common but they still impress me especially in terms of light effects. The way the light gets blurry on the edges and super strong in the center is simply amazing. I have been doing this kind of effect for quite a long time but never shared exactly this one and using Pixelmator. So in this tutorial I will show you how to create a LCD style text effect using Pixelmator. The whole process is quite simple and won't take you more than 30 minutes. Step 1 Open Pixelmator and create a new document. I am using 1650x1080 pixels. After that fill the background layer with #191919 Step 2 Go to View>Show Gradients. Then add an new gradient preset by clicking with the right button of the mouse on an empty slot and select New Gradient. Create a gradient using black, dark grey, black, dark grey, black and dark grey like the image below. Step 3 Go to Filter>Blur>Gaussian Blur. Use 100 pixels for the Radius. Step 4 Add a new layer and using the Paint Bucket Tool (N) fill the layer with green (#3f7d00). Step 5 Change the blending of the green layer to Multiply at 98%. Step 6 Add a new layer and go to Filter>Generator>Stripes. Use white for the Primary Color and black for the Secondary Color. Also use 2.0 pixels for the Width and 0% for the Sharpness. Step 7 Rotate the stripes layer so you will have horizontal lines. After that change the blending to Color Dodge at 40% Opacity. Step 8 Time to add some text. I am using a font called DS-Digital. You can download it at http://www.dafont.com/ds-digital.font After that add the text you want. I am using 00:00:09 with white for the color. Step 9 Add a new layer underneath the text layer and with the Paint Bucket Tool (N) fill the layer with black. Step 10 Select the text and the black layer and merge them into one. After that go to Filter>Blur>Gaussian Blur. Use 7.5 pixes for the Radius. Step 11 Change the Blending of the blurry layer to Color Dodge. Step 12 Duplicate the layer and change the Blending to Overlay. Step 13 Repeat the same process to add more text to your composition. Step 14 Select all layers and duplicate them. With the new copies selected, merge them into a new one. After that go to Filter>Blur>Gaussian Blur. Use 10px for the Radius, then change the Blending to Screen at 50%. That will create a really nice and realistic glowing effect. Conclusion You can create different colors effects by simply adding different layers with different colors instead of the green one on step 4. This effect is simple but very cool for some more advanced compositions or even for some animations. Now it's up to you to come up with your own versions. Download Pixelmator File Click here to download the Pixelmator file used for this tutorial

Sweet Cookies Typography in Pixelmator

Playing with text is one of the coolest things to exercise your skills with any software, at least in my opinion. You can try to make fire with the word fire or water effects with the word water. In my case today I will show you how to create a sweet cookie effect using Pixelmator. In this tutorial we will show you how to create a nice text effect using basic filters and some stock images. The result is really good for the amount of time required to achieve it. Step 1 Open Pixelmator and create a new document. I am using 1920x1200 pixels for the size. The background is white. After that select the Type Tool (T) and type the word you want. I used "sweet" with Cooper Black for the font. Step 2 Add a new layer and then with the Brush Tool (B) with black for the color select the clouds preset. Then start painting on the edges to make the word much less uniform. Once you finish the word ad a layer underneath and fill with it white using the Paint Bucket Tool (N). Duplicate these layers a few times and hide them for future use. Select the white layer, the text layer and layer with the brush effect and merge them. Layer>Merge Layers. Step 3 Add a new layer and group it into a folder. After that holding Command, click on the thumb of the sweet word from the previous step to create a marquee selection. Select the folder and go to Layer>Add Layer Mask. Step 4 Now let's use some cookies texture. The image I am using is from Bryan Solomon and it's called Three Peanut Butter Cookies Isolated on a White Background. The image is courtesy of Shutterstock. Step 5 Add the images of the cookies inside the layer with the mask. Step 6 Delete the areas where the cookies that overlap each other. Step 7 Select the layer with the word "sweet" and the layer with the brush effects. Merge both and then go to Edit>Stroke. Use white for the color, 10 pixels for the width and Inside for the Position. Step 8 Go to Image>Invert Color. Step 9 Go to Filter>Blur>Gaussian Blur. Use 8 pixels for the Radius. Step 10 Change the Blending to Soft Light. Duplicate the layer once again and hide it. Step 11 Select the Eraser Tool (E) and start deleting the top and left sides of the visible layer from the previous step. The idea is create the shadows on the bottom and right only as if the lights are coming from the top left. Step 12 Make the other layer visible and then go to Image>Invert Colors. Change the Blending to Overlay at 40%. Then with the Eraser Tool (E) delete the bottom right of the layer to create a highlight at the top left. Step 12 Let's add a background to make the effect a bit more realistic. The image I am using is called Texture Series - Old aged antique parchment manuscript for background use. Reduce the opacity to 40%. Conclusion Using the same layer of the Step 2, make sure it's all in black and merged with a white background. Then move the layer so it will be underneath the cookies text. Go to Filter>Blur>Gaussian Blur and use 4 pixels for the radius. Duplicate the layer and apply the blur again with 10 pixels for the radius. Change the Blending of both layers to Color Burn and move them down a little bit to create a really nice shadow effect. Download the Pixelmator file Click here to download the Pixelmator file used for this tutorial

Medieval Metal Text Effect in Photoshop

Last week I saw the movie Immortals and before the movie I was walking around at the movie theater checking some poster. I saw the Immortals poster, as well as some old Harry Potter and all have the same kind of metal text effect. With that in mind I decided to come up with a Medieval Metal Text Effect using Photoshop. So in this tutorial I will show you how to create a nice metal text effect using just layer styles. It's a simple tutorial and won't take you more than 30 minutes to go through the step by step. Step 1 Open Photoshop and start a new document. I am using 2560x1440 pixels for the size. Fill the background layer with grey #464646. Step 2 Search for some metal textures. I used some for Shutterstock. The one I used is from Kompaniets Taras called seamless silver metal texture with empty place for your text or image. Use Multiply for the Blend Mode Step 3 Add a new layer and then select red and yellow for the background and foreground colors. After that go to Filter>Render>Clouds. Step 4 With the layer selected go to Layer>Layer Mask>Reveal All. Select the layer mask thumb and then change the background and foreground colors to black and white. With the layer mask thumb selected go to Filter>Render>Clouds. You will apply render clouds filter to the mask. Step 5 Group the layer into a folder and then add a mask to the folder and apply the same render cloud filter to this new mask. Step 6 Change the Blend Mode to Overlay. Step 7 Add the text you want to use for this design, the one I am using was created in Illustrator and I used the font called Roman SD. Step 8 Now it's time to create the bronze effect. To do that we will use Layer Styles. Basically we will use Drop Shadow, Inner Shadow, Inner Glow, Bevel and Emboss, Color Overlay and Pattern Overlay. Step 9 For the Pattern Overlay create a metal pattern before using the same metal pattern used in the step 2. Step 10 This is the result after the layer styles. It's pretty much done now and you can apply that to all sorts of symbols. Step 11 Let's add some more details, this time I used a knight from a Shutterstock image called 4 Metal medals background by granata1111. Step 12 Apply the same layer styles, the only difference is in the Pattern Overlay that this time we will apply Overlay for the Blend Mode. Step 13 This is the effect after the layer styles. It looks god but still need some little refinements. Step 14 This is an optional step but it always add some little magic to this kind of artwork, I am talking about Lens Flare. You can search on Google Images or Shutterstock to find one you like, I am using an image that I found on Google Images, you can download it here. Step 15 Let's add a vignette effect, to do that is very easy. Add a new layer and fill it with black using the Paint Bucket Tool (G). After that with the Eraser Tool (E) and a very soft and rounded brush, erase the center of the image. Step 16 Select all layers and duplicate them, after that group all the new layers into a new one. The keyboard shortcut for that is Command(mac)/Control(PC) + Alt + Shift + E. With the new layer selected go to Filter>Blur>Gaussian Blur. Use 10 for the radius. After that duplicate the blurry layer. Use Overlay Blend Mode for the one that is underneath and Screen Blend Mode for the one that is on top. Also change the opacity of both layers to 50%. Conclusion Here is the final result. As you could see the effect was create with basically layer styles. It's a impressive how powerful layer styles are and the different kind of effects you can create. So now it's up to you to try and play around with them to come up with your own effects. Download Photoshop File Click here to download the Photoshop file used for this tutorial

Water Text in Pixelmator

In this tutorial, I will show you how to create text with water effects. To do this, we will use some stock photos with masks and image adjustments. I will also show you how to create bevels using Pixelmator. Step 1 Open Pixelmator and create a new document. I used 1440×900 pixels. Also, keep the background white. Step 2 With the Type Tool (T), add a text. I typed “WATER” using Arial black for the font. The color here doesn’t matter because we will use it to mask images. To create a marquee selection of the text, just click on the thumb of the text layer while holding the Command Key. Step 3 Now, let’s use a photo of water. The one I used was courtesy of Shutterstock, and you can find it here. Import it and place it in your document. Go to Edit>Transform and reduce its size; also, duplicate it 3 times, always flipping the new copy horizontally. That way, you will be able to match the sides. Use the image below for a reference. Step 4 With the marquee selection of the text active, go to Layer>Add Layer Mask; that way, the photo will show only on the text area. You will have to repeat this 2 more times for the duplicated layers of the photo. Step 5 To make the water more realistic, let’s use another photo. You can find one here. This one is of some water bubbles. To make the colors of the images match, go to Image>Colorize. Move the little controller to the cyan area and increase the saturation to over 70. We will use this often for other images throughout the tutorial so keep that in mind. You also will have to try different values depending on the imagery you are using. Step 6 Repeat the Masking process so the bubbles will be within the text area. The result here already looks pretty cool. Step 7 To spicy it up a little, add some water splashes. The ones I used can be found here, courtesy of Shuterstock, once again. You also will have to colorize them in order to make the colors match, exactly like we did in Step 6. Step 8 Select all layers but the white background and duplicate them. Merge all the duplicated layers (Layer>Merge Layers) and then go to Edit>Flip Vertically. Move this upside down text right below the text aligning the words. After that, go to Filter>Blur>Gaussian Blur; use 20 for the amount. To finish the effect, go to Layer>Add Layer Mask, then select the Gradient Tool (G) and a linear gradient from black to white. Mask the layer in which the black area will be hidden and the white will be shown. Use the image below for reference or download the PXM file in the end of the tutorial. Step 9 Add a layer on top of the others and fill it with a very subtle gradient. Use the Gradient Tool (G), and for the colors, use Grey to White and play with the Opacity in order to make it very, very subtle, exactly like the image below. Step 10 Let’s now place a photo of some water droplets. The one I used can be found here. The image is in grey scale, so go again to Image>Colorize and change the color of the image to this cyan scheme we are using. Step 11 Put this layer beneath the other layers; also, change its opacity to 55%. After that, go to Edit>Transform. Then, the Transform panel will open. Click on the little gear icon and choose perspective. Then, apply the perspective I used. Use the image below for a reference, but basically, the only thing you will have to do is move the controllers on the bottom area while holding shift to make them wider than the top area. Step 12 Duplicate the droplets layer and go to Filter>Blur>Gaussian Blur. Use 30 for the amount. Step 13 With the Eraser Tool (E), delete the areas close to the text in order to remove the blur. Also, notice that the horizon is sort of fading out. That’s because I added a gradient from white to cyan and applied an overlay for the blending. Step 14 Again, repeat the “WATER” text with the marquee selection like we did in Step 2; however, this time, the text has to be black. Step 15 Go to Edit>Stroke. Use white for the color and 5 for the width. Also, make sure that the Inside option is selected. Step 16 Now, still with the marquee selection active, go to Filter>Blur>Gaussian Blur. Use 15 for the Radius. Step 17 Just change the Blending of the layer to Color Dodge and you will already have a really nice bevel effect. Step 18 With the Eraser Tool (E), delete the bottom left areas of the bevel to try to match the droplets. Step 19 Select all layers and duplicate them. Then, merge all of them into a layer and go to Filter>Blur>Gaussian Blur. Use 20 for the Radius. Step 20 Change the Blending to Screen. Step 21 Add a new layer on top of the others and fill it with cyan using the Paint Bucket Tool (N). Then, change the Blending to Color Burn with 30% Opacity. Step 22 Now, add another layer, this time, beneath the cyan layer and fill it with a radial gradient from white in the center to grey. Change the Blending to Multiply with 25% for the Opacity. Layers Order I love that we can now have groups of layers in Pixelmator. Conclusion This is the outcome you will have. The idea is pretty simple and straight forward; we are just mixing some photos and masking them with text. However, I believe the Bevel technique will be very useful for your projects in Pixelmator because there is no filter for that yet. Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial.

Inception Poster with Repousse in Photoshop CS5

A few days ago I went to the movies with Amanda (@amlight) to watch Inception, the new Christopher Nolan movie. I left the movie theater completely blown away. The story is simply amazing and the director leaves us confused all the time, especially in the end. Anyway I'm not here to talk about the movie, but instead about how it inspired me to get on Photoshop and try something. Then I saw the posters of the movie and boom, there it was, a really cool effect to create a tutorial about :) So in this tutorial I will show you how to create the effect of one of the Inception posters, the one with the word Inception made of buildings on an aerial photo of a city. To create this effect we will use the new 3D tool in Photoshop CS 5 called Repousse and an aerial photo from Pixelcase (http://www.pixelcase.com.au/). I hope you enjoy the tutorial and I highly recommend that you go to the movies to watch Inception, it's fantastic.... btw in the end it is all a.... :) Step 1 Open Photoshop and create a new document. I'm using a Letter format with 72DPI only for this tutorial, but I suggest that you do at least 300DPI. Make sure the background is black too. Step 2 In order to recreate the poster I needed to find the right image. After searching on stock photos sites I didn't find any image that had the same birds eye view. Then I tweeted about it and @janinetoro sent the link to Pixelacase. Pixelcase simply has the most amazing aerial photos ever. So I sent an email to them asking permission to use one of the images in this tutorial. They were kind enough and allowed me to do that :) With the image I wanted, I placed it in my design. Step 3 With the Horizontal Type Tool (T) I add the text DREAM using Futura Condensed for the font. I also stretched the word a little bit so the letters would have sort of match the size of the blocks in the photo. Then just rotate the text to match the photo as well. Step 4 With the text selected go to 3D>Repousse. Use the default preset but change the Depth to 2.4. Step 5 Go to Window>3D to show the 3D panel in Photoshop. Click on the DREAM object and then select the DREAM Extrusion Material to change the material of the extrusion. We will use some windows for it. To do that click on the little folder next to the Diffuse Color and select New Texture. After that click on the icon again and choose edit texture to open it in a new document. Step 6 This is an image of a building I found on Google Images and placed on the texture file. After that I just saved it and Photoshop automatically updated the original design with withe windows. Step 7 Do the same thing for the Bump, use the same image but convert it to black and white and increase the contrast. Save it and change the Bump to 8. Step 8 For both the Difuse and Bump, click on the texture icon and select Texture Properties. Use 8 for the U Scale and 2 for the V Scale. Step 9 Here is the design you got so far. Step 10 Duplicate the city photo layer and rearrange it so it will be on top of the other layers. Then create a marquee selection of the top of the 3D object, the word DREAM. Go to Layer>Layer Mask>Reveall Selection. Step 11 Go to Layer>Layer Style>Stroke. Use 1 for the Size and 25% for the Opacity. Step 12 Select Inner Glow and use Multiply for the Blend Mode, 100% for the Opacity, 30% for the Choke and 5 pixels for the Size. Step 13 As you can see now, we have the buildings with the windows on their sides and the top is the original one from the aerial photo. However it is still not looking very clear. Step 14 Select the aerial photo that is beneath the other layers and go to Layer>Layer Mask>Reveal All. Then with the Brush Tool (B) and a very soft brush (0 Hardness) with black for the color, start painting the areas beneath the word to delete the city so we sort of isolate the DREAM word as real buildings. You can also create a vignette effect by painting the corners of the layer. Step 15 In order to render the 3D object for the final design, go to the 3D panel and select the Scene, then, over Render Settings, change the Quality to Ray Traced Final. The render process might take some time, like minutes I think, but it depends on the machine you have, so wait until it's done. Step 16 Select the layer on top of the others and then go to Layer>New Adjustment Layer>Hue and Saturation. Mark Colorize and then for the Hue use 200, for the Saturation 40 and keep 0 for the Lightness. Conclusion You can add another Adjustment Layer, to increase the brightness and contrast, but the process is finished. I also tweaked the lights a little bit trying to match the photo. The technique is quite simple and you can use it with different images. If you have a photo with more resolution and more closer to the roof tops you can work a little bit more to make it even more real. I am waiting for a hi-res image from http://www.pixelcase.com.au/ so I can create my poster and play a little bit more with this concept, however one thing is pretty clear, this is the right type of effect in which Repousse is perfect for, you can create a 3D text effect pretty quickly and without having to use another app. Download the Photoshop File Click here to download the Photoshop file used for this tutorial

Cool Text Effect with the Puppet Warp Tool in Photoshop CS5

When Adobe started announcing some of the new features of the CS5 version of Photoshop they showed the Puppet Warp tool in which they played with an elephant's trunk. I was really impressed with that tool but never used it that too much, because of that I decided to give it a try, especially after seeing a screen cast with Russell Brown in which he was showing how to manipulate a rope with the Puppet Warp Tool. So in this tutorial I will show you how to create a text effect using a photo of a rope and the Puppet Warp tool. This tutorial will only work with the CS5 version and I believe it won't take you too much time. Step 1 Open Photoshop and create a new document. I'm using 2560x1440 pixels for the size. After that import a photo of a rope. The one I used is courtesy of Shutterstock and you can find it here. Step 2 We will be using the Puppet Warp tool to create our text effect, but to make it work properly the rope has to be really long. You will also have to extract the background of the layer, leaving just the rope. After that go to Edit>Puppet Warp. The default mode will show a mash over your object, to hide it just deselect the Show Mesh option. Step 3 Now start adding points or joints, I don't even know how to call those things. As you can see in the image below, I added one at the beginning of the rope and one at the end. Start moving them around to see how they behave. Tips, if you hold ALT you can rotate the point, a little circle will show so you can use it as a controller. Also if you click on the point holding ALT you will delete it. Step 4 Start creating your word, below you can see the R of rope. Step 5 Keep editing, it takes quite some time to get used to how things work, it's important to not stretch the rope too much otherwise it will distort the image. Step 6 Another really cool feature with the Puppet Wart is that you can change the order of the mesh in terms of depth, it's quite impressive how they do that but for example you can define with part goes on over the other using the Pin Depth icons. Step 7 After a few minutes moving the points I got a quite convincing result for the word ROPE. Step 8 Import the rope image again and connect it with the R, then do the same with the E. Step 9 Add a new layer on top of the others and with the Brush Tool (B) use a very soft brush with black, paint the areas marked below to create some shadows. Group this layer into a folder and change the Blend Mode of the folder to Color Burn at 50% Opacity. Step 10 Group all layers and duplicate the group, then with the duplicated group selected go to Layer>Merge Group. Change the Blend Mode of the group to Overlay. Step 11 Using the rope image again, create another effect using the Puppet Warp tool. Step 12 Import a paper texture and place on top of the other layers. The one I used is from Shutterstock and can be found here. Select all layers but the paper texture, then group them. After that duplicate the group, select this new group and go to Filter>Convert for Smart Filters. Step 13 With the Smart Object layer selected go to Filter>Blur>Guassian Blur. Use 8 pixels for the Radius. One cool thing about Smart Filters is that they behave like masks, there is a white thumbnail next to the Smart Filter sub layer that is like a mask, everything that is white gets the filter, what is black doesn't and the grey scales areas the filter is less strong. This is perfect to create a sort of depth of field effect. With the Brush Tool (B) and a very soft brush, paint of the ROPE word area with black and also the whole rope that connects the word. Use the image below for reference. Step 14 Select all layers and duplicate them, after that merge the duplicated layers and go to Filter>Blur>Gaussian Blur. Use 15 pixels for the radius. Duplicate this layer, so you will have 2 blurry layers. The one at the top use Screen for the Blend Mode at 50% Opacity and the one beneath use Overlay for the Blend Mode with 50% of Opacity as well. Step 15 Go to Layer>New Adjustments Layer>Hue and Saturation. Reduce the Saturation to -40. Conclusion The Puppet Warp tool is an incredible tool which shows an incredible technology behind it, like there are some things that are quite mind blowing such as the changing depths of the mesh. This tutorial was just an example of how to use it to create a text made out of rope. Now it's up to you to come up with much cooler ideas. Click on the image for full preview. Download the Photoshop File Click here to download the Photoshop file used for this tutorial.

Simple Underwater Scene in Photoshop

A few weeks ago I received an email from a reader asking me if I could write a tutorial showing an underwater scene. I have written some tutorials on this subject like the 3D type made out of water or the underwater scene for Digital Arts in 2008. However I was watching TV this weekend when I started to watch I, Robot. The opening titles of that movie is awesome and really inspired me to write this tutorial. In this tutorial I will show you how to create a underwater scene with some bubbles and light effects. We will use the Brush Tool to create the bubbles and basic tools and filters for the rest of the effects. The whole process won't take more than 45 minutes and as usual you can download the Photoshop file in the end of the tutorial. Step 1 Open Photoshop and create a new document, I'm using 2560x1440 pixels so I can use it as wallpaper. After that fill the background layer with black. Step 2 Add another layer and fill it with green (234b44) Step 3 With the green layer selected go to Layer>Group Layer. The layer will be inside a folder in the Layer Palette. Select this folder and go to Layer>Layer Mask>Hide All. Select the Brush Tool (B) and, with a big soft brush, paint with white over the areas you want to be shown, Step 4 Select the green layer now and go to Layer>Layer Mask>Reveal All. Over the layer palette, select the mask of the layer and go to Filter>Render>Clouds. You will apply the clouds into the mask. After that, still with the mask selected, go to Filter>Blur>Gaussian Blur. Use a big value, I used 80px for the Radius but this value will vary depending on the size of your document. Step 5 Add another layer on top of the others and with the Brush Tool (B) and a very soft brush, paint a red spot light like I did in the image below. Change the Opacity of this layer to 65% as well. Step 6 Add another layer on top of the others and then again with the Brush Tool (B) and the big brush you used before, select now a dark blue and paint some areas above the red. This blue has to be very subtle, so change the Opacity to 20-30%. Step 7 Add another layer and then select the Gradient Tool (G). Click on the gradient colors to open the Gradient Editor, then change the Type to Noise, the Roughness to 100% and select both Options: Restrict Colors and Add Transparency. Fill the layer with the gradient and then go to Image>Adjustments>Desaturate. After that go to Filter>Blur>Gaussian Blur. I used 30 pixels for the Radius, but once again this value will change depending on the size of your document. Step 8 Just change the Blend Mode of the layer with the noise gradient to Color Dodge. Step 9 For the bubbles I created a brush using a photo for reference. The photo I used was courtesy of Shutterstock and you can download it here. You can also download the brush I created here. Add a new layer and then select the Brush Tool (B) and then using a big size, I used 400 pixels, paint some bubbles using white for the color. Group this layer (Layer>Group Layers) and change the Blend Mode of the Folder to Color Dodge. Step 10 Select the layer with the bubbles and go to Filter>Convert for Smart Filters. Then go to Filter>Blur>Gaussian Bur. Use 7 pixels for the Radius. The whole layer will get blurry, but notice that there is a sub layer with a white thumb called Smart Filters. Select the Brush Tool (B), with black for the color and start painting over the bubbles you don't want them to be blurry. It's like a maks for the smart filters. Step 11 Import your logo and go to Layer>Layer Styles>Blending Options. Change the Fill to 0, then select Inner Glow. Use Color Dodge for the Color, 50% for the Opacity and change the Size to 15pixels. After that select Bevel and Emboss. Use Inner Bevel for the Style, 90% for the Depth, Down for the Direction, 1 pixel for the Size, 5 pixels for the Soften. For the Shading options use 70º for the Ange and 16º for the Altitude. For the Highlight and Shadow Modes use Color Dodge with white for the colors and 100% Opacity. Step 12 Add another layer, you can add it inside the folder of the other layer with Bubbles, the one we created in the step 9. With the Brush Tool (B) and the bubble brush, this time with a much smaller size, paint some bubbles over the A, B, Ds and O like the word would be disintegrating into bubbles. Step 13 Select the text layer and go to Layer>Layer Mask>Reveal All. With the Brush Tool (B) and soft brush with black paint over the areas that the text would be disintegrating into bubbles (1-6) Step 14 Select the bubbles layer the one that is over the text and the repeat the same technique we did on the Step 10 to make some parts of the layer blurrier than other areas. Step 15 Add a layer on top of the others and go to Filter>Render>Clouds. Make sure you had black and white for the background and foreground colors. After that go to Filter>Render>Difference Clouds. The layer will be very dark, so go to Image>Adjustments>Invert, then go to Image>Adjustment>Levels. Increase the white input until you have an image like the one below. Step 16 Change the Blend Mode to Color Dodge and go to Filter>Blur>Gaussian Blur. Use 20 pixels for the Radius. You can also reduce the Opacity to 60%. Step 17 To give more realism to the composition you can add some real bubbles, here I'm using a photo that is courtesy of Shutterstock and you can find it here. As you can see the photo has black background, in this case, change the Blend Mode to Color Dodge so the black becomes transparent. Step 18 Once again you can convert the layer with the stock photo of bubbles to smart objects and then apply Gaussian Blur and paint of the areas you want to keep them without blur like we did on the Step 10. Step 19 Add a layer on top of the others and then select the Paint Bucket Tool (G). Change the type to Pattern, then select the stripes pattern that I have created, you can download it here. Fill the layer with the pattern and go to Filter>Blur>Gaussian Blur. Use 2 pixels for the Radius, then change the Blend Mode to Overlay and the Opacity to 50%. Conclusion The idea of this tutorial was to show you how to create a sort of underwater scene using basic tools like brushes and gradients combined with simple filters like blur and clouds. The whole process is pretty simple and you can now create some really nice wallpapers as well. Click on the image for full preview. Another Example Download the Photoshop File Click here to download the Photoshop files used for this tutorial

Clouds Text Effect in Pixelmator

In this tutorial, I will show you how to create a text made up of clouds in ten very simple steps, solely using brushes, blending, and basic filters. The technique is extremely simple and can be used to create all sorts of text effects as well. Step 1 Open Pixelmator and create a new document. As usual, my document is wallpaper size, 1920×1200 pixels. After that, import a photo of a sky and some clouds. The one I used stems from Google Images; you can find it at the following link: http://wallpaperblog.files.wordpress.com/2007/12/blue_sky_1920.jpg Paste the photo into your document.? Step 2 Using the Type Tool (T), add a text to your design. I am using Cooper Std Black as the style of font with a size of 300 pixels in white. Step 3 Pixelmator comes with a really cool smoke/cloud brush, but certain adjustments need to be made in order to make it work for our cloudy text effect. Double click the cloud brush to open the brush presets, then use the values shown below for your brush settings and save them.? Step 4 Holding down the command key on your keyboard, click on the thumb of the text layer in the layer palette. This action will create a marquee selection of the text. Add a new layer, and change the Blending to Screen. Then, using the Brush Tool (B), select the cloud brush you edited previously, and use white to start painting within the selection. Step 5 Go to Filter > Blur > Gaussian Blur. Use 20 for the Radius. Step 6 Add another layer, and using the Brush Tool (B) and white paint on the cloud brush, paint more clouds, particularly over the edges of the text in order to make these edges less visible. Next, adjust the opacity of this layer so as to make the effect more subtle. I am using a 50% opacity, which results in the image below. Step 7 Add another layer, and repeat painting in some more clouds; this time, the idea is to highlight particular areas.? Step 8 Adjust the opacity of the highlighted layer. Once again, I am using a 50% opacity; however, you can try different values, depending on the manner in which you painted the clouds. Step 9 Add a layer on top of the others, and fill it with a dark yellow/orange color; I used #e89e00. Next, change the Blending to Overlay and the Opacity to 30%. Step 10 Here you can see the organization of the layers in the Layer Palette.? Conclusion The yellow overlay layer was added in order to attain this vintage/lomo look in our design. As you can see, the process of creating the text effect was really quite simple and used nothing other than Brushes and Blending. You can create all sorts of text effects with this technique, ranging from water to fire. I will try to cover these effects in the next tutorials. Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial.

Cool Typography with the Blend Tool in Illustrator

I have written some Illustrator tutorials in which I've used the Blend Tool to create swirls and other shapes, but I have never used it to create a text effect. Then we received this email suggestion from one of our readers quite a few months ago asking us how to create that effect. I really like the text effect and decided to give it a try. So in this tutorial I will show you how to create a text effect using the Blend Tool in Illustrator and then we will use Photoshop for some final retouches to make the effect more subtle. The technique is very simple and it won't take more than 30 minutes to achieve the same effect. Step 1 Open Illustrator and create a new document. I used A4 for the size, but it is not really important because we will copy the illustrator vector and paste it in Photoshop later on. With the Pen Tool (P) create a Z with just a few points. Every time you create a new anchor point, hold the mouse button to transform it to a curve. Step 2 Duplicate the Z and move it down a little bit. Step 3 Select the Blend Tool (W), then click on one of the segments and then on the other to create the blend object. Step 4 With the blend object selected double click on the Blend Tool icon or go to Object>Blend>Blend Options. Change the Spacing to Specified Steps using 15 steps. Step 5 With the Direct Selection Tool (A) start moving some anchor points to change the blend object, the idea here is to add some movement to the letter Z. Step 6 Now let's create the other letters, in my design I used the name of my design studio, Zee. Repeat the same thing we did in the Step 2, 3 and 4. Step 7 Apply the Blend Tool (W) for the letters E. Once again, with the Direct Selection Tool (A) move some anchor points to make the necessary adjustments in order to make the design smoother. Step 8 With the Direct Selection Tool (A) you can select the 2 lines of the Blend Object and change their colors, below you can see 2 examples with blue and pink and yellow and pink. Step 9 Copy the blend object in Illustrator and then paste it in Photoshop to make some adjustments. Then in Photoshop with the Eraser Tool(E) or using mask, use a very soft brush to erase some areas like on the beginning of the letter Z (1). To the end part you will have to use the Polygonal Lasso Tool(L)(2) to select just the part you want to erase, otherwise you will delete part of the E as well. Then do the same for the end of the second E. (3). Conclusion This tutorial was a reader's suggestion sent to us via email and it's amazing how many things we can do using the Blend Tool in Illustrator, it's a very powerful tool and using it for texts is not that common but the result is really good. Download the Illustrator File Click here to download the Illustrator file used for this tutorial

Clash of the Titans Text Effect in Photoshop

A few weeks ago watched Clash of the Titans. The movie was okay, I have to admit, I was expecting much more, but it was awesome to see some huge monsters and mythologic creatures battling in this epic movie. However in the end of the movie, when the credits started showing I was really impressed with the effect and I thought to myself that I had to do a Photoshop tutorial inspired by the movie. So, in this tutorial I will show you how to create a text effect inspired by the Clash of the Titans posters and artworks. We will use layer styles and basic filters to achieve the effect. It will not take you more than 45 minutes to achieve the effect, but the outcome is really cool. Step 1 Let's start our design in Illustrator, it's easier to get the text done in Illustrator, even though you can do that in Photoshop as well. When I saw the official Clash of the Titans poster I knew that font, it was the Bank Gothic, or the Bank Gothic is very similar. So with the Type Tool (T) add the word "clash", then "of the" in another independent object and then "titans", again in another object and line. All of the in uppercase. Step 2 Select the texts and go to Type>Create Outlines. With the Direct Selection Tool (A) start editing the text. First the A of "clash". then the F of "of" and the T and E of "the". After that edit the word "titans" by changing the T and A. Use the image below for reference. Basically you will be moving points, but be careful to keep the same alignments and angles as the original text. Step 3 Now open Photoshop and create a new document. Create a new layer and fill it with any color, then go to Layer>Layer Style>Gradient Overlay. Use a light beige #fee4c8 and a very dark brown #0f0802 for the gradient, use Radial for the Style and 100% opacity. Step 4 Add a new layer and go to Filter>Render>Clouds. Make sure you have black and white for the colors. Step 5 Change the clouds' layer Blend Mode to Color Dodge. After that go to Layer>Layer Mask>Reveal All. Over the Layers Palette, click on the mask thumb of the layer and go to Filter>Render>Clouds to apply the clouds to the layer mask, that will make the clouds less strong. Tip: play with masks and apply filter on the masks, you will be surprise with the possibilities and the results. Step 6 Go to Edit>Transform>Warp. Select the Fisheye warp type, then move the controller towards the center of the document. That will create a really nice blur effect, much faster than the zoom blur in Photoshop. Step 7 Copy the words "Clash of the " from Illustrator to Photoshop. We will do these words first because we will apply a different Layer Style preset for the Bevel and Emboss. Step 8 First thing here is to search for a old and rusty metal texture. I found the one I'm using on Google Images. Open the image in Photoshop and then go to Edit>Define Pattern. After that go back to our design and select the layer with the words "clash of the", the go to Layer>Layer Style>Pattern Overlay. Select the metal pattern you have just created. Step 9 After the Pattern Overlay, select Bevel and Emboss. For the Technique use Chisel Hard, for the Depth use 500%, for the Size use 120 pixels, for the Soften use 0 pixel. Over the Shading Options, use 95º for the Angle, 35º for the Altitude, then for the Highlight Mode use Color Dodge with white for the color and 65% for the Opacity. For the Shadow Mode use Color Burn with Black for the color, then 40% for the Opacity. Step 10 Now select Contour, then just change the Range to 50%. Step 11 Here you can see the effect you will have. Notice that the ligths are coming from the bottom, or the center of the document, and that is why we split the words. Step 12 Copy the word "titans" from Illustrator and paste it in Photoshop. On the layers palette select the layer we applied the layer styles in the previous steps and with the right button of the mouse click and select Copy Layer Styles. After that select the "titans" layer and click again with the right button of the mouse click and select Paste Layer Styles. Double click on the layer to open the Layer Style dialog box. Select Bevel and Emboss, then just change the Direction to Up. Step 13 This is the effect you wll have gotten so far, notice now that the light for the word "titans" is coming from the top while for the "clash of the" is coming from the bottom. Step 14 If you watched the movie you will know that the Pegasus was a black winged horse, so I got an image of a winged horse from Shutterstock, you can find it over here. It's a vector image, but that is fine, just place it as it is coming from the center. Step 15 To make the horse more realistic and less vector style go to Filter>Blur>Motion Blur. Use 35º for the Angle and 20 pixels for the Distance. Step 16 For the flares you can create them using different techniques, you can do that using the noise gradient, the lens flare filter (least recommended) and using an image. I have used a image that is really good for that on most of my projects, the only thing I do is to change the Hue and Saturation to make the colors match the design. You can find the image I used here. As you can se the background of the image is black so the only thing you have to do is to change the Blend Mode to Screen, so the black will be transparent. Step 17 Add more lens flares over some letters of the texts. Use the image below fore reference. Step 18 Select all layers and duplicate them, after that merge all the duplicated layers into one layer only. The keyboard shortcut to that is Command(mac)/Control(pc) + Alt + Shit + E. Select this layer and go to Filter>Blur>Radial Blur. Use 5 for the Amount, Zoom for the Blur Method and Best for the Quality. Conclusion The zoom blur will give that movement idea to our design, as the text is coming out of the page, exactly like the credits at the end of the movie. You can add some noise as well to give that movie style to the image. The technique on this tutorial is pretty simple, there's nothing that is difficult to be done, but the most important thing was that I wanted to show you that you can find inspiration everywhere, but it's important that you turn this inspiration into something real. The best way to do that is through personal projects ;) Click on the image for full preview. Download the Photoshop File Click here to download the Photoshop File used for this tutorial