Archivio per 'webDesign'

daily cloud #24 – Libertà tu vocabolario

Mi piace molto l’associazione del claim della creatività con le lettere stile “scarabeo”.
I really like the association of the slogan of creativity with the letters style “scarabeo”.

logo iris cinema – dopaWork

Realizzazione logotipo per il canale cinema del sito www.irispres.it, il concept riguarda il concetto visuale del cinema, in questo caso la macchina da presa e al posto delle “pizze” il logotipo di iris.

Logo design for the site www.irispres.it movie channel, the concept it’s about the  visual element for the film, in this case the camera and the “pizza” thet’s the iris’ logo .

5BY5 – video design site

A new site about design, all the content by video, i like it!
http://5by5.tv/

Exclusive Freebie Pack – Eloquence! Icon Set – Resources

There are very few design elements with more uses than icons. Icons can be used in just about every type of project, from software applications to website designs. Today, our friends from Icon Nebula have released a really nice set of 75 free icons exclusively to the readers of Psdtuts. Exclusive Freebie Pack – Eloquence! [...]

The Difference Between Art and Design | Webdesigner Depot

The Difference Between Art and Design | Webdesigner Depot.

This is a very interesting article about our work or passion!
Enjoy it…

crazy pattern – dopaWork

Playing with pattern and circle in photoshop, thank’s this cool article:
http://www.blog.spoongraphics.co.uk/tutorials/create-an-abstract-design-with-patterns-in-photoshop

3D Water Text Effect with Repoussé in Photoshop CS5

Last year I wrote a tutorial called Incredibly Realistic Water Text in Cinema 4D and Photoshop where I created a text made out of water. I had to use Cinema 4D to create a 3D object then I imported this 3D file in Photoshop where I mixed with some stock photos. Now with Photoshop CS5 Extended and the Repoussé tool we can create 3D objects direct in Photoshop, so I decided to recreate that effect.

So, in this tutorial I will show you how to create a water text. Even though it might look complex it's a very simple effect. We will be using the new Repoussé then some stock photos to create the effect.

Step 1

Open Photoshop and create a new document. Fill the background layer with black and using the Brush Tool (B) or importing a vector file with a handwritten text. You can the one I used in the PSD file that you can download in the end of this tutorial.

3D Water Text Effect with Repoussé

Step 2

If you create a text using the brush tool or importing a vector and paste it as bitmap, create a marquee selection of the area you want to apply Repoussé. With the selection active go to 3D> Repoussé>Current Selection.

3D Water Text Effect with Repoussé

Step 3

To create the water effect we will use the Inflate preset and pretty much use the same values we used in the previous step, the Inflate 3D type. Change the Depth to 0 and the Scale to 1, also for the Inflate, change the Slides to Front and Face.

3D Water Text Effect with Repoussé

Step 4

You will notice that the E will be a solid block and the hole will be lost, then select the area that you want to be hole and then change the Type to Hole. Also increase the Strength of the Inflate to 1.

3D Water Text Effect with Repoussé

Step 5

Select the Front Inflation over the 3D Palette and then click on the folder next to the Bump values. Select Open Texture to open the texture in a new document. Then in this new document create a new layer and go to Filter>Render>Clouds. Make sure that you are using black and white for the colors. After that go to Filter>Render>Different Clouds. If your result is too dark, go to Image>Adjustment>Levels, then increase the white input. This texture will be the Bump map, which will distort our 3D text. For the other values, use white for the Diffuse color, 15% Opacity, 20 for the Reflection, Black for the Illumination, 100% Gloss, 100% Shine, white for the Specular and 1.5 for the Refraction. You can render here to have a preview of the 3D effect.

3D Water Text Effect with Repoussé

Step 6

Now to make our effect more realistic let's mix some stock photos. The one I used is from Stock.xchng (http://www.sxc.hu/photo/884261 and http://www.sxc.hu/photo/1131843). Open these 2 images in Photoshop. Copy some parts of the water splash from the photos and paste it in our 3D image.

3D Water Text Effect with Repoussé

Step 7

Repeat the process, copy and paste more splashes. As the water splashes from the photos have black background, just change the Blend Mode to Screen, so the black will be transparent.

3D Water Text Effect with Repoussé

Step 8

Time to Render our 3D object. On the 3D Palette change the Quality to Ray Traced Final. It will take a few minutes to render the 3D object. If you want to change the lights you can do that and render it again until you find the best result.

3D Water Text Effect with Repoussé

Step 9

Duplicate the rendered 3D object and go to Layer>Rasterize>3D. I will rasterize the 3D object so I can apply some image adjustments, I could do that with the 3D layer but some wouldn't work the way I want or it can get a bit slow. Add a new layer and fill it with black, then merge the black layer with the 3D rasterized layer. After that go to Image>Adjustments>Levels. Use 15 for the Black, 0.8 for the Grey and 160 for the White inputs.

3D Water Text Effect with Repoussé

Step 10

Select all layers and duplicate them. After that go to Filter>Blur>Gaussian Blur. Use 15 for the Amount. After that change the Blend Mode to Color Dodge and the Opacity to 30%.

3D Water Text Effect with Repoussé

Conclusion

Last year I created this effect using Cinema 4D to create the 3D part, which was really simple as well. However now with Repoussé in Photoshop CS5 Extended we can do everything, in this case the 3D part, in Photoshop. I have been playing quite a lot with Repoussé and there are lots of new things that we can create with this new tool, this water effect is an example. I hope you enjoyed it and now it's up to you.

3D Water Text Effect with Repoussé Click on the image for full preview.

Download the Photoshop File

Click here to download the Photoshop file used for this tutorial.

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Adobe has just released the CS5 family and you can download the trials including the new Photoshop CS5 Extended. With this new version we have the Repoussé feature which allows us to create 3D objects in Photoshop. The last tutorial I showed you how to create a simple extruded text, now in this tutorial I will show you the Inflate option in Repoussé.

With the Inflate we can create really cool 3D objects by inflating the front and back faces of the 3D objects, the result is very cool and reminds a lot the work of Jeff Koons with the metallic balloons sculpture. So in this tutorial we will use Repoussé with the Inflate options to create a metallic inflated text. The effect is pretty simple and it won't take more than 20 minutes to achieve the effect.

Step 1

Open Photoshop CS5 Extended and apply a gradient on the background layer. I used #afc7c0 (bottom) and #bac1d7 (top) for the gradient colors.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Step 2

Here I pasted a vector from illustrator to transform it into a 3D object using the Repoussé tool. Tip: I pasted the vector as Shape Layer.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Step 3

Go to 3D>Repoussé>Selected Path. Select the 4th preset called Inflate (1). Over the Extrude options use 0 for Depth and 1 for Scale (2). Over the Inflate options change de Slides to Front and Back, the use 90 for the Angle and 0.4 for the Strength. After that over the Scene Settings change the Lights to Mardi Gras.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Step 4

The Mardi Gras will create 3 very colorful light on the scene. But now let's do some adjustments and apply a nice material on the object.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Step 5

Click on the the Icon at the top right hand corner of the 3D palette and then select Ground Plane Shadow Catcher and Snap Object to Ground Plane as well. That will create a shadow as the object is on a floor.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Step 6

Go to 3D>Browse 3D Content Online... You will be redirected to the Adobe Photoshop website where there will be the Material Downloads box with a big blue Download button. Click there to download some Fabrics, Glass, Metal, Stones and other cool materials to be used in Photoshop. Just download and install the materials using the Extension manager.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Step 7

After you install the materials, just click on the little icon at the top right hand corner of the materials window and you will have some new options like I mentioned before, there will be Fabrics, Fun, Glass, Oragnic... select Metal then pick the first chrome material, the Metal Chrome 2.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Step 8

Now that we have selected the right lights and materials we have to render the 3D. Click on the Scene in the 3D Palette and then over Quality select Ray Traced Final. It will take some time to render the whole scene but the result will be really good.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Step 9

With the Ellipse Tool (U) create a white ellipse below the object as if it was a spotlight. Then go to Filter>Blur>Gaussian Blur. Use 50 pixels for the Amount.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Step 10

Select all layers and duplicate them, after that go to Layer>Merge Layers, or simply press Command(MAC) or Control (PC) + ALT + Shift + E to create a layer with all layers merged into it. After that go to Filter>Blur>Gaussian Blur. Use 30 pixels for the Amount, then just change the layer's Blend Mode to Multiply.

Playing with Inflate in Repoussé in Photoshop CS5 Extended Click on the image for full preview

Conclusion

The Repoussé feature in Photoshop CS5 Extended has a lot of settings and we can create really cool effects using it, in this tutorial I played a little bit with the Inflate option, and as you could seem, I used just the presets of lights and materials. You can try different light colors and settings as well as shapes to create your own effect.

Playing with Inflate in Repoussé in Photoshop CS5 Extended

Download the Photoshop File

Click here to download the Photoshop file used for this tutorial

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

Il mio primo articolo

http://www.uxmagazine.it/interface-interaction-design/il-ruolo-dei-moduli-nellinterazione-tra-utente-interfaccia-web/#more-865

These are your users… read and be horrified | UX Magazine

By Jonathan Anderson

These are your users… read and be horrified

via These are your users… read and be horrified | UX Magazine.

A interesting article about the user’s browser cognition!